feat: light theme + audited color-conflict-safe tokens
- 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
@@ -1,4 +1,8 @@
|
||||
---
|
||||
/**
|
||||
* MOREMINIMORE - BLOG CARD COMPONENT (LIGHT THEME)
|
||||
*/
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
excerpt: string;
|
||||
@@ -17,10 +21,13 @@ const formattedDate = date.toLocaleDateString('th-TH', { year: 'numeric', month:
|
||||
{image && <img src={image} alt={title} loading="lazy" />}
|
||||
</div>
|
||||
<div class="blog-content">
|
||||
<span class="blog-date">{formattedDate}</span>
|
||||
<span class="blog-category">{category}</span>
|
||||
<h3 class="blog-title">{title}</h3>
|
||||
<p class="blog-excerpt">{excerpt}</p>
|
||||
<span class="blog-link">อ่านต่อ →</span>
|
||||
<div class="blog-footer">
|
||||
<span class="blog-date">{formattedDate}</span>
|
||||
<span class="blog-link">อ่านต่อ →</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@@ -28,47 +35,68 @@ const formattedDate = date.toLocaleDateString('th-TH', { year: 'numeric', month:
|
||||
.blog-card {
|
||||
display: block;
|
||||
background: var(--color-white);
|
||||
border-radius: 16px;
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--color-gray-200);
|
||||
transition: all 0.3s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
.blog-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.blog-image {
|
||||
aspect-ratio: 16/9;
|
||||
overflow: hidden;
|
||||
background: var(--color-gray-100);
|
||||
background: var(--color-bg-soft);
|
||||
}
|
||||
|
||||
.blog-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
.blog-card:hover .blog-image img { transform: scale(1.05); }
|
||||
.blog-content { padding: 24px; }
|
||||
.blog-date {
|
||||
font-size: 12px;
|
||||
color: var(--color-medium-gray);
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
|
||||
.blog-card:hover .blog-image img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.blog-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.blog-content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.blog-category {
|
||||
display: inline-block;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.blog-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blog-excerpt {
|
||||
font-size: 14px;
|
||||
color: var(--color-medium-gray);
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16px;
|
||||
display: -webkit-box;
|
||||
@@ -76,9 +104,26 @@ const formattedDate = date.toLocaleDateString('th-TH', { year: 'numeric', month:
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.blog-link {
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
|
||||
.blog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
.blog-date {
|
||||
font-size: 12px;
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
.blog-link {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--color-black);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.blog-card:hover .blog-link {
|
||||
color: var(--color-primary-dark);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
/**
|
||||
* MOREMINIMORE - KINETIC HERO COMPONENT
|
||||
* Typography IS the hero - No images, just bold text
|
||||
* MOREMINIMORE - KINETIC HERO COMPONENT (LIGHT THEME)
|
||||
* Yellow/white/black editorial — no dark bg
|
||||
*/
|
||||
|
||||
interface Props {
|
||||
@@ -14,11 +14,11 @@ interface Props {
|
||||
}
|
||||
|
||||
const {
|
||||
badge = "ดิจิทัลเอเจนซี่ในประเทศไทย",
|
||||
title = "เปลี่ยนธุรกิจของคุณ ด้วย AI และเทคโนโลยีสมัยใหม่",
|
||||
subtitle = "รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย | เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย",
|
||||
badge = "AI AGENCY ในประเทศไทย",
|
||||
title = "เว็บไซต์ที่ขายได้ ไม่ใช่แค่สวย",
|
||||
subtitle = "เราออกแบบเว็บไซต์ + AI Chatbot + Marketing Automation ให้ธุรกิจไทย เพิ่มยอดขายเฉลี่ย 2–4 เท่า ภายใน 6 เดือน ด้วยงบที่จับต้องได้ เริ่มต้น 15,000 บาท",
|
||||
showCTA = true,
|
||||
ctaText = "เริ่มต้นวันนี้",
|
||||
ctaText = "เริ่มปรึกษาฟรี",
|
||||
ctaLink = "/contact",
|
||||
} = Astro.props;
|
||||
|
||||
@@ -27,13 +27,13 @@ const titleWords = title.split(' ');
|
||||
---
|
||||
|
||||
<section class="kinetic-hero">
|
||||
<!-- Animated Background Pattern -->
|
||||
<!-- Animated Background Pattern (LIGHT THEME) -->
|
||||
<div class="hero-bg">
|
||||
<div class="bg-grid"></div>
|
||||
<div class="bg-gradient"></div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Geometric Elements -->
|
||||
|
||||
<!-- Floating Geometric Elements (yellow, subtle) -->
|
||||
<div class="hero-geometric">
|
||||
<div class="geo-circle geo-1"></div>
|
||||
<div class="geo-circle geo-2"></div>
|
||||
@@ -50,13 +50,13 @@ const titleWords = title.split(' ');
|
||||
<span class="badge-dot"></span>
|
||||
{badge}
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Main Title - Kinetic Typography -->
|
||||
<h1 class="hero-title">
|
||||
{titleWords.map((word, index) => (
|
||||
<span class="word-wrapper">
|
||||
<span
|
||||
class="word"
|
||||
<span
|
||||
class="word"
|
||||
style={`--delay: ${0.4 + index * 0.12}s`}
|
||||
>
|
||||
{word}
|
||||
@@ -64,17 +64,17 @@ const titleWords = title.split(' ');
|
||||
</span>
|
||||
))}
|
||||
</h1>
|
||||
|
||||
|
||||
<!-- Accent Line -->
|
||||
<div class="hero-accent-line">
|
||||
<div class="accent-fill"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Subtitle -->
|
||||
<p class="hero-subtitle" data-animate="fade-in-up">
|
||||
<Fragment set:html={subtitle} />
|
||||
</p>
|
||||
|
||||
|
||||
<!-- CTA Buttons -->
|
||||
{showCTA && (
|
||||
<div class="hero-actions" data-animate="fade-in-up">
|
||||
@@ -84,11 +84,19 @@ const titleWords = title.split(' ');
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/portfolio" class="btn btn-outline btn-dark">
|
||||
ดูผลงาน
|
||||
<a href="/portfolio" class="btn btn-outline-dark">
|
||||
ดูผลงานจริง
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<!-- Trust strip -->
|
||||
<div class="hero-trust" data-animate="fade-in-up">
|
||||
<span class="trust-item">⭐ 50+ โปรเจกต์สำเร็จ</span>
|
||||
<span class="trust-item">· 40+ ลูกค้าที่ไว้วางใจ</span>
|
||||
<span class="trust-item">· 5+ ปี</span>
|
||||
<span class="trust-item">· 100% โค้ดด้วยตัวเอง</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Giant Background Typography -->
|
||||
@@ -103,33 +111,26 @@ const titleWords = title.split(' ');
|
||||
<div class="scroll-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wave Transition -->
|
||||
<div class="hero-wave">
|
||||
<svg viewBox="0 0 1440 100" fill="none" preserveAspectRatio="none">
|
||||
<path d="M0 50C240 100 480 0 720 50C960 100 1200 0 1440 50V100H0V50Z" fill="#ffffff"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* ============================================
|
||||
HERO BASE
|
||||
HERO BASE — LIGHT THEME (white bg, yellow accent)
|
||||
============================================ */
|
||||
|
||||
|
||||
.kinetic-hero {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--color-dark);
|
||||
background: var(--color-white);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
BACKGROUND
|
||||
============================================ */
|
||||
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -139,9 +140,9 @@ const titleWords = title.split(' ');
|
||||
.bg-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(254, 212, 0, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(254, 212, 0, 0.03) 1px, transparent 1px);
|
||||
background-image:
|
||||
linear-gradient(rgba(254, 212, 0, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(254, 212, 0, 0.08) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
animation: gridMove 20s linear infinite;
|
||||
}
|
||||
@@ -154,14 +155,14 @@ const titleWords = title.split(' ');
|
||||
.bg-gradient {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse at 30% 20%, rgba(254, 212, 0, 0.08) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 70% 80%, rgba(254, 212, 0, 0.05) 0%, transparent 50%);
|
||||
background: radial-gradient(ellipse at 30% 20%, rgba(254, 212, 0, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 70% 80%, rgba(254, 212, 0, 0.08) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
GEOMETRIC ELEMENTS
|
||||
GEOMETRIC ELEMENTS (yellow on light — very subtle)
|
||||
============================================ */
|
||||
|
||||
|
||||
.hero-geometric {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -180,7 +181,7 @@ const titleWords = title.split(' ');
|
||||
height: 400px;
|
||||
top: -100px;
|
||||
right: 10%;
|
||||
opacity: 0.05;
|
||||
opacity: 0.08;
|
||||
animation: floatGeo1 12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -189,7 +190,7 @@ const titleWords = title.split(' ');
|
||||
height: 250px;
|
||||
bottom: 10%;
|
||||
left: -50px;
|
||||
opacity: 0.08;
|
||||
opacity: 0.12;
|
||||
animation: floatGeo2 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -198,7 +199,7 @@ const titleWords = title.split(' ');
|
||||
height: 150px;
|
||||
top: 40%;
|
||||
right: 30%;
|
||||
opacity: 0.04;
|
||||
opacity: 0.06;
|
||||
animation: floatGeo3 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -221,7 +222,7 @@ const titleWords = title.split(' ');
|
||||
position: absolute;
|
||||
border: 2px solid var(--color-primary);
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.ring-1 {
|
||||
@@ -248,7 +249,7 @@ const titleWords = title.split(' ');
|
||||
.geo-line {
|
||||
position: absolute;
|
||||
background: var(--color-primary);
|
||||
opacity: 0.1;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.line-1 {
|
||||
@@ -268,39 +269,39 @@ const titleWords = title.split(' ');
|
||||
}
|
||||
|
||||
@keyframes lineSlide {
|
||||
0%, 100% { transform: translateX(0); opacity: 0.1; }
|
||||
50% { transform: translateX(30px); opacity: 0.2; }
|
||||
0%, 100% { transform: translateX(0); opacity: 0.2; }
|
||||
50% { transform: translateX(30px); opacity: 0.3; }
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
CONTAINER & CONTENT
|
||||
============================================ */
|
||||
|
||||
|
||||
.hero-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 120px var(--gutter) 100px;
|
||||
padding: 140px var(--gutter) 100px;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
BADGE
|
||||
============================================ */
|
||||
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 24px;
|
||||
background: rgba(254, 212, 0, 0.15);
|
||||
border: 1px solid rgba(254, 212, 0, 0.3);
|
||||
background: var(--color-primary);
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: var(--radius-full);
|
||||
font-family: var(--font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
color: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
margin-bottom: 40px;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.6s var(--ease-out-expo) 0.2s forwards;
|
||||
@@ -309,7 +310,7 @@ const titleWords = title.split(' ');
|
||||
.badge-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--color-primary);
|
||||
background: var(--color-black);
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
@@ -325,9 +326,9 @@ const titleWords = title.split(' ');
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
KINETIC TITLE
|
||||
KINETIC TITLE — DARK TEXT on white bg
|
||||
============================================ */
|
||||
|
||||
|
||||
.hero-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(40px, 8vw, 90px);
|
||||
@@ -335,7 +336,7 @@ const titleWords = title.split(' ');
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-white);
|
||||
color: var(--color-black);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
@@ -368,13 +369,13 @@ const titleWords = title.split(' ');
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
ACCENT LINE
|
||||
ACCENT LINE (yellow)
|
||||
============================================ */
|
||||
|
||||
|
||||
.hero-accent-line {
|
||||
width: 200px;
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--color-gray-200);
|
||||
border-radius: 3px;
|
||||
margin-bottom: 32px;
|
||||
overflow: hidden;
|
||||
@@ -399,13 +400,13 @@ const titleWords = title.split(' ');
|
||||
/* ============================================
|
||||
SUBTITLE
|
||||
============================================ */
|
||||
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 20px;
|
||||
line-height: 1.7;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: var(--color-gray-700);
|
||||
max-width: 600px;
|
||||
margin-bottom: 48px;
|
||||
margin-bottom: 32px;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.8s var(--ease-out-expo) 0.8s forwards;
|
||||
}
|
||||
@@ -424,18 +425,19 @@ const titleWords = title.split(' ');
|
||||
/* ============================================
|
||||
CTA BUTTONS
|
||||
============================================ */
|
||||
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 32px;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.8s var(--ease-out-expo) 1s forwards;
|
||||
}
|
||||
|
||||
.btn-magnetic {
|
||||
position: relative;
|
||||
padding: 24px 48px;
|
||||
padding: 22px 44px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@@ -449,21 +451,30 @@ const titleWords = title.split(' ');
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
.btn-outline.btn-dark {
|
||||
background: transparent;
|
||||
color: var(--color-white);
|
||||
border: 2px solid var(--color-white);
|
||||
/* ============================================
|
||||
TRUST STRIP
|
||||
============================================ */
|
||||
|
||||
.hero-trust {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-600);
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.8s var(--ease-out-expo) 1.2s forwards;
|
||||
}
|
||||
|
||||
.btn-outline.btn-dark:hover {
|
||||
background: var(--color-white);
|
||||
color: var(--color-dark);
|
||||
.trust-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
BACKGROUND TEXT
|
||||
BACKGROUND TEXT (light yellow watermark)
|
||||
============================================ */
|
||||
|
||||
|
||||
.hero-bg-text {
|
||||
position: absolute;
|
||||
right: -5%;
|
||||
@@ -473,20 +484,20 @@ const titleWords = title.split(' ');
|
||||
font-size: clamp(200px, 30vw, 400px);
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-white);
|
||||
opacity: 0.02;
|
||||
color: var(--color-primary);
|
||||
opacity: 0.08;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SCROLL INDICATOR
|
||||
SCROLL INDICATOR (dark on light)
|
||||
============================================ */
|
||||
|
||||
|
||||
.scroll-indicator {
|
||||
position: absolute;
|
||||
bottom: 120px;
|
||||
bottom: 40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
@@ -503,13 +514,13 @@ const titleWords = title.split(' ');
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
.scroll-line {
|
||||
width: 2px;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--color-gray-200);
|
||||
border-radius: 1px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -529,38 +540,19 @@ const titleWords = title.split(' ');
|
||||
0% { top: 0; opacity: 1; }
|
||||
80% { top: 100%; opacity: 0; }
|
||||
100% { top: 100%; opacity: 0; }
|
||||
0% { top: 0; opacity: 1; }
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
WAVE
|
||||
============================================ */
|
||||
|
||||
.hero-wave {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-wave svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
RESPONSIVE
|
||||
============================================ */
|
||||
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero-title {
|
||||
font-size: clamp(32px, 7vw, 64px);
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
padding: 100px var(--gutter) 80px;
|
||||
padding: 120px var(--gutter) 80px;
|
||||
}
|
||||
|
||||
.hero-bg-text {
|
||||
@@ -568,7 +560,7 @@ const titleWords = title.split(' ');
|
||||
}
|
||||
|
||||
.scroll-indicator {
|
||||
bottom: 100px;
|
||||
bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -586,7 +578,7 @@ const titleWords = title.split(' ');
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn {
|
||||
.hero-actions .btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -603,9 +595,5 @@ const titleWords = title.split(' ');
|
||||
.scroll-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-wave {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
/**
|
||||
* MOREMINIMORE - NAVIGATION COMPONENT
|
||||
* Morphing navigation with submenus
|
||||
* MOREMINIMORE - NAVIGATION COMPONENT (LIGHT THEME)
|
||||
* Light bg + dark text nav links + white logo banner
|
||||
*/
|
||||
|
||||
const services = [
|
||||
@@ -14,17 +14,17 @@ const services = [
|
||||
|
||||
<header class="nav" id="nav">
|
||||
<div class="nav-container container">
|
||||
<!-- Logo with Banner Style -->
|
||||
<!-- Logo: white-bg banner with the black-text logo (works on light/yellow) -->
|
||||
<a href="/" class="nav-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>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<nav class="nav-desktop">
|
||||
<a href="/" class="nav-link" data-magnetic>หน้าแรก</a>
|
||||
|
||||
|
||||
<!-- Services with Submenu -->
|
||||
<div class="nav-dropdown">
|
||||
<a href="/services" class="nav-link nav-dropdown-trigger" data-magnetic>
|
||||
@@ -41,14 +41,14 @@ const services = [
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<a href="/portfolio" class="nav-link" data-magnetic>ผลงาน</a>
|
||||
<a href="/blog" class="nav-link" data-magnetic>บทความ</a>
|
||||
<a href="/about" class="nav-link" data-magnetic>เกี่ยวกับเรา</a>
|
||||
<a href="/contact" class="nav-link nav-cta" data-magnetic>ติดต่อเรา</a>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Menu Toggle -->
|
||||
<!-- Mobile Menu Toggle (DARK icons on light bg) -->
|
||||
<button class="nav-toggle" id="nav-toggle" aria-label="Toggle menu">
|
||||
<span class="toggle-line"></span>
|
||||
<span class="toggle-line"></span>
|
||||
@@ -56,11 +56,11 @@ const services = [
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Navigation Overlay -->
|
||||
<!-- Mobile Navigation Overlay (LIGHT bg) -->
|
||||
<div class="nav-mobile-overlay" id="nav-mobile">
|
||||
<nav class="nav-mobile-content">
|
||||
<a href="/" class="mobile-link">หน้าแรก</a>
|
||||
|
||||
|
||||
<!-- Mobile Services with Submenu -->
|
||||
<div class="mobile-dropdown">
|
||||
<button class="mobile-dropdown-trigger">
|
||||
@@ -75,7 +75,7 @@ const services = [
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<a href="/portfolio" class="mobile-link">ผลงาน</a>
|
||||
<a href="/blog" class="mobile-link">บทความ</a>
|
||||
<a href="/about" class="mobile-link">เกี่ยวกับเรา</a>
|
||||
@@ -84,14 +84,14 @@ const services = [
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Scroll Progress Bar -->
|
||||
<!-- Scroll Progress Bar (yellow) -->
|
||||
<div class="scroll-progress" id="scroll-progress"></div>
|
||||
|
||||
<style>
|
||||
/* ============================================
|
||||
NAVIGATION BASE
|
||||
NAVIGATION BASE — LIGHT THEME
|
||||
============================================ */
|
||||
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -99,21 +99,23 @@ const services = [
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
padding: 16px 0;
|
||||
transition: all 0.4s var(--ease-out-expo);
|
||||
background: var(--color-white);
|
||||
border-bottom: 1px solid var(--color-gray-200);
|
||||
transition: all 0.3s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
.nav.scrolled {
|
||||
padding: 12px 0;
|
||||
background: rgba(26, 26, 46, 0.95);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(254, 212, 0, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
CONTAINER
|
||||
============================================ */
|
||||
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -123,7 +125,7 @@ const services = [
|
||||
/* ============================================
|
||||
LOGO BANNER
|
||||
============================================ */
|
||||
|
||||
|
||||
.nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -132,15 +134,16 @@ const services = [
|
||||
|
||||
.logo-banner {
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: 0 0 12px 12px;
|
||||
padding: 8px 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.logo-banner:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav.scrolled .logo-banner {
|
||||
@@ -161,7 +164,7 @@ const services = [
|
||||
/* ============================================
|
||||
DESKTOP NAVIGATION
|
||||
============================================ */
|
||||
|
||||
|
||||
.nav-desktop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -176,35 +179,41 @@ const services = [
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: var(--color-white);
|
||||
color: var(--color-black);
|
||||
transition: color 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--color-primary);
|
||||
.nav-link:hover,
|
||||
.nav-link.active {
|
||||
color: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
.nav-cta {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black) !important;
|
||||
border: 2px solid var(--color-primary);
|
||||
border-radius: var(--radius-md);
|
||||
margin-left: 16px;
|
||||
padding: 12px 24px;
|
||||
transition: all 0.3s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
.nav-cta:hover {
|
||||
background: var(--color-primary-dark);
|
||||
border-color: var(--color-primary-dark);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px rgba(254, 212, 0, 0.4);
|
||||
box-shadow: 0 8px 20px rgba(254, 212, 0, 0.3);
|
||||
}
|
||||
|
||||
.nav-cta::after { display: none; }
|
||||
|
||||
/* ============================================
|
||||
DROPDOWN
|
||||
DROPDOWN — LIGHT CARD ON WHITE BG
|
||||
============================================ */
|
||||
|
||||
|
||||
.nav-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
@@ -229,14 +238,14 @@ const services = [
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(10px);
|
||||
min-width: 220px;
|
||||
background: var(--color-dark);
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 12px 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s var(--ease-out-expo);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(254, 212, 0, 0.1);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-dropdown:hover .nav-dropdown-menu {
|
||||
@@ -251,19 +260,19 @@ const services = [
|
||||
font-family: var(--font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
color: var(--color-gray-700);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: rgba(254, 212, 0, 0.1);
|
||||
color: var(--color-primary);
|
||||
background: var(--color-bg-alt);
|
||||
color: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
MOBILE TOGGLE
|
||||
MOBILE TOGGLE — DARK lines (since nav is light)
|
||||
============================================ */
|
||||
|
||||
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
@@ -281,7 +290,7 @@ const services = [
|
||||
.toggle-line {
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: var(--color-white);
|
||||
background: var(--color-black);
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s var(--ease-out-expo);
|
||||
}
|
||||
@@ -300,16 +309,16 @@ const services = [
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
MOBILE OVERLAY
|
||||
MOBILE OVERLAY — LIGHT THEME
|
||||
============================================ */
|
||||
|
||||
|
||||
.nav-mobile-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--color-dark);
|
||||
background: var(--color-white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -337,7 +346,7 @@ const services = [
|
||||
font-family: var(--font-display);
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: var(--color-white);
|
||||
color: var(--color-black);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
padding: 14px 32px;
|
||||
@@ -361,13 +370,14 @@ const services = [
|
||||
.nav-mobile-overlay.active .mobile-link:nth-child(6) { transition-delay: 0.35s; }
|
||||
|
||||
.mobile-link:hover {
|
||||
color: var(--color-primary);
|
||||
color: var(--color-primary-dark);
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
.mobile-cta {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black) !important;
|
||||
border: 2px solid var(--color-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-top: 20px;
|
||||
}
|
||||
@@ -375,7 +385,7 @@ const services = [
|
||||
/* ============================================
|
||||
MOBILE DROPDOWN
|
||||
============================================ */
|
||||
|
||||
|
||||
.mobile-dropdown {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
@@ -393,7 +403,7 @@ const services = [
|
||||
font-family: var(--font-display);
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: var(--color-white);
|
||||
color: var(--color-black);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
cursor: pointer;
|
||||
@@ -409,7 +419,7 @@ const services = [
|
||||
}
|
||||
|
||||
.mobile-dropdown.open .mobile-dropdown-trigger {
|
||||
color: var(--color-primary);
|
||||
color: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
.mobile-dropdown.open .mobile-dropdown-trigger svg {
|
||||
@@ -439,7 +449,7 @@ const services = [
|
||||
/* ============================================
|
||||
SCROLL PROGRESS
|
||||
============================================ */
|
||||
|
||||
|
||||
.scroll-progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -453,7 +463,7 @@ const services = [
|
||||
/* ============================================
|
||||
RESPONSIVE
|
||||
============================================ */
|
||||
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.nav-desktop {
|
||||
display: none;
|
||||
@@ -482,13 +492,13 @@ const services = [
|
||||
// Scroll effect
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrollY = window.scrollY;
|
||||
|
||||
|
||||
if (scrollY > 80) {
|
||||
nav?.classList.add('scrolled');
|
||||
} else {
|
||||
nav?.classList.remove('scrolled');
|
||||
}
|
||||
|
||||
|
||||
// Scroll progress
|
||||
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
|
||||
const progress = (scrollY / docHeight) * 100;
|
||||
@@ -505,33 +515,18 @@ const services = [
|
||||
});
|
||||
|
||||
// Mobile dropdown toggle
|
||||
document.querySelectorAll('.mobile-dropdown-trigger').forEach(trigger => {
|
||||
trigger.addEventListener('click', () => {
|
||||
trigger.parentElement?.classList.toggle('open');
|
||||
document.querySelectorAll('.mobile-dropdown-trigger').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
btn.parentElement?.classList.toggle('open');
|
||||
});
|
||||
});
|
||||
|
||||
// Close mobile menu on link click
|
||||
mobileNav?.querySelectorAll('.mobile-link').forEach(link => {
|
||||
// Close mobile nav on link click
|
||||
document.querySelectorAll('.nav-mobile-overlay .mobile-link').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
toggle?.classList.remove('active');
|
||||
mobileNav?.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
});
|
||||
|
||||
// Magnetic effect for nav links
|
||||
document.querySelectorAll('[data-magnetic]').forEach(el => {
|
||||
el.addEventListener('mousemove', (e) => {
|
||||
const rect = el.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left - rect.width / 2;
|
||||
const y = e.clientY - rect.top - rect.height / 2;
|
||||
|
||||
(el as HTMLElement).style.transform = `translate(${x * 0.15}px, ${y * 0.15}px)`;
|
||||
});
|
||||
|
||||
el.addEventListener('mouseleave', () => {
|
||||
(el as HTMLElement).style.transform = 'translate(0, 0)';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
/**
|
||||
* MOREMINIMORE - PAGE HERO COMPONENT
|
||||
* Magazine-style hero with overlapping floating card
|
||||
* MOREMINIMORE - PAGE HERO COMPONENT (LIGHT THEME)
|
||||
* White bg + dark text + yellow accent line
|
||||
*/
|
||||
|
||||
interface Props {
|
||||
@@ -21,7 +21,7 @@ const {
|
||||
<div class="hero-bg">
|
||||
<div class="bg-dots"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="hero-content container">
|
||||
{badge && (
|
||||
<span class="hero-badge">{badge}</span>
|
||||
@@ -32,33 +32,32 @@ const {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<!-- Floating card that overlaps next section (magazine style) -->
|
||||
<div class="hero-float-card">
|
||||
<p>Transform your business with digital solutions</p>
|
||||
<a href="/contact" class="btn-float">Get Started →</a>
|
||||
<!-- Yellow accent line at bottom (no dark wave) -->
|
||||
<div class="hero-accent">
|
||||
<div class="accent-bar"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* ============================================
|
||||
PAGE HERO BASE
|
||||
PAGE HERO BASE — LIGHT THEME
|
||||
============================================ */
|
||||
|
||||
|
||||
.page-hero {
|
||||
position: relative;
|
||||
min-height: 50vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-dark);
|
||||
background: var(--color-white);
|
||||
overflow: hidden;
|
||||
padding-bottom: 80px;
|
||||
padding: 140px 0 80px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
BACKGROUND
|
||||
BACKGROUND (subtle yellow dots on white)
|
||||
============================================ */
|
||||
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -68,33 +67,32 @@ const {
|
||||
.bg-dots {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: radial-gradient(circle at 1px 1px, rgba(254, 212, 0, 0.06) 1px, transparent 0);
|
||||
background-image: radial-gradient(circle at 1px 1px, rgba(254, 212, 0, 0.15) 1px, transparent 0);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
CONTENT
|
||||
============================================ */
|
||||
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
padding: 80px var(--gutter) 120px;
|
||||
padding: 40px var(--gutter) 60px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
padding: 8px 20px;
|
||||
background: rgba(254, 212, 0, 0.15);
|
||||
border: 1px solid rgba(254, 212, 0, 0.3);
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
border-radius: var(--radius-full);
|
||||
font-family: var(--font-display);
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
@@ -104,74 +102,56 @@ const {
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-white);
|
||||
color: var(--color-black);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: var(--color-gray-600);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
FLOATING CARD - Magazine Overlap
|
||||
BOTTOM ACCENT LINE
|
||||
============================================ */
|
||||
|
||||
.hero-float-card {
|
||||
|
||||
.hero-accent {
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 90%;
|
||||
max-width: 700px;
|
||||
background: var(--color-white);
|
||||
border-radius: 24px;
|
||||
padding: 32px 48px;
|
||||
box-shadow: 0 30px 100px rgba(0,0,0,0.15);
|
||||
z-index: 5;
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 6px;
|
||||
background: var(--color-gray-200);
|
||||
}
|
||||
|
||||
.hero-float-card p {
|
||||
font-size: 18px;
|
||||
color: var(--color-gray-600);
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.btn-float {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 32px;
|
||||
.accent-bar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
border-radius: 30px;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
transition: all 0.3s ease;
|
||||
transform-origin: left;
|
||||
animation: accentDraw 1.2s var(--ease-out-expo) 0.3s forwards;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
.btn-float:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 15px 40px rgba(254, 212, 0, 0.35);
|
||||
@keyframes accentDraw {
|
||||
to { transform: scaleX(1); }
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
RESPONSIVE
|
||||
============================================ */
|
||||
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.page-hero {
|
||||
min-height: 45vh;
|
||||
padding-bottom: 100px;
|
||||
padding: 120px 0 60px;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
padding: 60px var(--gutter) 100px;
|
||||
padding: 20px var(--gutter) 40px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
@@ -181,21 +161,5 @@ const {
|
||||
.hero-subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.hero-float-card {
|
||||
width: 92%;
|
||||
padding: 24px 28px;
|
||||
bottom: -25px;
|
||||
}
|
||||
|
||||
.hero-float-card p {
|
||||
font-size: 15px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.btn-float {
|
||||
padding: 12px 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,76 +1,168 @@
|
||||
---
|
||||
/**
|
||||
* MOREMINIMORE - PORTFOLIO CARD COMPONENT (LIGHT THEME)
|
||||
*/
|
||||
|
||||
interface Props {
|
||||
name: string;
|
||||
url: string;
|
||||
category: string;
|
||||
category_label: string;
|
||||
industry?: string;
|
||||
thumbnail: string;
|
||||
description: string;
|
||||
what_we_did?: string;
|
||||
result?: string;
|
||||
}
|
||||
|
||||
const { name, url, category, category_label, thumbnail, description } = Astro.props;
|
||||
const { name, url, category, category_label, industry, thumbnail, description, what_we_did, result } = Astro.props;
|
||||
---
|
||||
|
||||
<a href={url} target="_blank" rel="noopener" class="portfolio-card" data-category={category}>
|
||||
<a href={url || '#'} target="_blank" rel="noopener noreferrer" class="portfolio-card" data-category={category}>
|
||||
<div class="portfolio-image">
|
||||
<img src={thumbnail} alt={name} loading="lazy" />
|
||||
<div class="portfolio-overlay">
|
||||
<span class="visit-btn">
|
||||
เยี่ยมชมเว็บไซต์
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-info">
|
||||
{industry && <span class="portfolio-industry">{industry}</span>}
|
||||
<span class="portfolio-category">{category_label}</span>
|
||||
<h3 class="portfolio-name">{name}</h3>
|
||||
<p class="portfolio-desc">{description}</p>
|
||||
{what_we_did && <p class="portfolio-did">{what_we_did}</p>}
|
||||
{result && <p class="portfolio-result">→ {result}</p>}
|
||||
{!what_we_did && description && <p class="portfolio-desc">{description}</p>}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
/* ============================================
|
||||
PORTFOLIO CARD (LIGHT THEME)
|
||||
============================================ */
|
||||
|
||||
.portfolio-card {
|
||||
display: block;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-radius: 16px;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
transition: all 0.4s ease;
|
||||
transition: all 0.4s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
.portfolio-card:hover {
|
||||
transform: translateY(-8px);
|
||||
background: rgba(255,255,255,0.08);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.portfolio-image {
|
||||
position: relative;
|
||||
aspect-ratio: 16/10;
|
||||
overflow: hidden;
|
||||
background: var(--color-bg-soft);
|
||||
}
|
||||
|
||||
.portfolio-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
.portfolio-card:hover .portfolio-image img { transform: scale(1.05); }
|
||||
.portfolio-info { padding: 24px; }
|
||||
.portfolio-category {
|
||||
|
||||
.portfolio-card:hover .portfolio-image img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Yellow overlay on hover */
|
||||
.portfolio-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(254, 212, 0, 0.95);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.portfolio-card:hover .portfolio-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.visit-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: var(--color-black);
|
||||
color: var(--color-white);
|
||||
padding: 14px 28px;
|
||||
border-radius: var(--radius-full);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.visit-btn svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* Info section */
|
||||
.portfolio-info {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.portfolio-industry {
|
||||
display: inline-block;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.portfolio-name {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.portfolio-category {
|
||||
display: inline-block;
|
||||
background: var(--color-bg-soft);
|
||||
color: var(--color-gray-600);
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin-left: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.portfolio-name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.portfolio-did,
|
||||
.portfolio-desc {
|
||||
font-size: 14px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
.portfolio-result {
|
||||
font-size: 14px;
|
||||
color: var(--color-black);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
/**
|
||||
* MOREMINIMORE - SERVICE CARD COMPONENT
|
||||
* Clean cards with images
|
||||
* MOREMINIMORE - SERVICE CARD COMPONENT (LIGHT THEME)
|
||||
*/
|
||||
|
||||
interface Props {
|
||||
@@ -19,15 +18,14 @@ const { title, subtitle, image, link } = Astro.props;
|
||||
<!-- Image -->
|
||||
<div class="card-image">
|
||||
<img src={image || "/images/services/default.jpg"} alt={title} loading="lazy" />
|
||||
<div class="card-overlay"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content -->
|
||||
<div class="card-content">
|
||||
<h3 class="card-title">{title}</h3>
|
||||
{subtitle && <p class="card-subtitle">{subtitle}</p>}
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Arrow -->
|
||||
<div class="card-arrow">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
@@ -39,9 +37,9 @@ const { title, subtitle, image, link } = Astro.props;
|
||||
|
||||
<style>
|
||||
/* ============================================
|
||||
SERVICE CARD
|
||||
SERVICE CARD (LIGHT THEME)
|
||||
============================================ */
|
||||
|
||||
|
||||
.service-card {
|
||||
display: block;
|
||||
}
|
||||
@@ -53,7 +51,7 @@ const { title, subtitle, image, link } = Astro.props;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.4s var(--ease-out-expo);
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
}
|
||||
|
||||
.card-inner::before {
|
||||
@@ -75,8 +73,9 @@ const { title, subtitle, image, link } = Astro.props;
|
||||
}
|
||||
|
||||
.service-card:hover .card-inner {
|
||||
box-shadow: var(--shadow-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-8px);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.service-card:hover .card-arrow {
|
||||
@@ -87,7 +86,7 @@ const { title, subtitle, image, link } = Astro.props;
|
||||
/* ============================================
|
||||
IMAGE
|
||||
============================================ */
|
||||
|
||||
|
||||
.card-image {
|
||||
position: relative;
|
||||
aspect-ratio: 16/10;
|
||||
@@ -105,22 +104,10 @@ const { title, subtitle, image, link } = Astro.props;
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.card-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, transparent 50%, rgba(26, 26, 46, 0.6) 100%);
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.service-card:hover .card-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
CONTENT
|
||||
============================================ */
|
||||
|
||||
|
||||
.card-content {
|
||||
padding: 28px 24px;
|
||||
}
|
||||
@@ -134,10 +121,6 @@ const { title, subtitle, image, link } = Astro.props;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.service-card:hover .card-title {
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
@@ -145,9 +128,9 @@ const { title, subtitle, image, link } = Astro.props;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
ARROW
|
||||
ARROW (yellow, visible on hover)
|
||||
============================================ */
|
||||
|
||||
|
||||
.card-arrow {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
@@ -175,7 +158,7 @@ const { title, subtitle, image, link } = Astro.props;
|
||||
/* ============================================
|
||||
RESPONSIVE
|
||||
============================================ */
|
||||
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.card-content {
|
||||
padding: 24px 20px;
|
||||
@@ -185,4 +168,4 @@ const { title, subtitle, image, link } = Astro.props;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -18,11 +18,11 @@ const {
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content={description} />
|
||||
<meta name="theme-color" content="#1a1a2e" />
|
||||
<meta name="theme-color" content="#fed400" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body style="margin: 0; background: #ffffff;">
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user