diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro index 919e75b..6899668 100644 --- a/src/components/BlogCard.astro +++ b/src/components/BlogCard.astro @@ -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 && {title}}
- {formattedDate} + {category}

{title}

{excerpt}

- อ่านต่อ → +
+ {formattedDate} + อ่านต่อ → +
@@ -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; } - \ No newline at end of file + + .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); + } + diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 83c8e02..d571f11 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -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 = [ --- - + - + - + ผลงาน บทความ เกี่ยวกับเรา @@ -84,14 +84,14 @@ const services = [ - +
\ No newline at end of file + diff --git a/src/components/PortfolioCard.astro b/src/components/PortfolioCard.astro index 120d5f0..ba0c68a 100644 --- a/src/components/PortfolioCard.astro +++ b/src/components/PortfolioCard.astro @@ -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; --- - +
{name} +
+ + เยี่ยมชมเว็บไซต์ + + + + +
+ {industry && {industry}} {category_label}

{name}

-

{description}

+ {what_we_did &&

{what_we_did}

} + {result &&

→ {result}

} + {!what_we_did && description &&

{description}

}
\ No newline at end of file + + .portfolio-result { + font-size: 14px; + color: var(--color-black); + font-weight: 600; + line-height: 1.5; + margin-top: 4px; + } + diff --git a/src/components/ServiceCard.astro b/src/components/ServiceCard.astro index bf5427a..ca4615b 100644 --- a/src/components/ServiceCard.astro +++ b/src/components/ServiceCard.astro @@ -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;
{title} -
- +

{title}

{subtitle &&

{subtitle}

}
- +
@@ -39,9 +37,9 @@ const { title, subtitle, image, link } = Astro.props; \ No newline at end of file + diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index e0f6a96..1fa05ec 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -18,11 +18,11 @@ const { - + {title} - + - \ No newline at end of file + diff --git a/src/styles/global.css b/src/styles/global.css index e13c669..7a68042 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,32 +1,35 @@ /* ============================================ - MOREMINIMORE - KINETIC TYPOGRAPHY DESIGN SYSTEM - A unique design where typography IS the hero + MOREMINIMORE - LIGHT EDITORIAL DESIGN SYSTEM + Light bg + yellow accent + dark text + Audited for color conflicts (no button matches bg) ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700;800;900&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap'); /* ============================================ - CSS CUSTOM PROPERTIES + CSS CUSTOM PROPERTIES — LIGHT THEME ============================================ */ :root { /* Brand Colors */ - --color-primary: #fed400; - --color-primary-dark: #e6c100; - --color-primary-light: #fff176; - --color-dark: #1a1a2e; - --color-dark-light: #252542; - --color-black: #000000; - --color-white: #ffffff; + --color-primary: #fed400; /* yellow accent */ + --color-primary-dark: #e6c100; /* hover state */ + --color-primary-light: #fff5b3; /* tint for subtle backgrounds */ + + --color-black: #0a0a0a; /* primary text */ + --color-white: #ffffff; /* pure white */ + --color-bg: #ffffff; /* default page bg */ + --color-bg-alt: #fafafa; /* alt section bg (was gray-100) */ + --color-bg-soft: #f5f5f5; /* card bg (was gray-100) */ + --color-gray-100: #f5f5f5; - --color-gray-200: #e5e5e5; - --color-gray-400: #9ca3af; - --color-gray-600: #6b7280; - - /* Typography */ - --font-display: 'Kanit', sans-serif; - --font-body: 'Noto Sans Thai', sans-serif; - + --color-gray-200: #e5e5e5; /* subtle borders */ + --color-gray-300: #d1d5db; /* stronger borders */ + --color-gray-400: #9ca3af; /* muted icons */ + --color-gray-500: #6b7280; /* secondary text */ + --color-gray-600: #4b5563; /* body text (slightly lighter than black) */ + --color-gray-700: #374151; /* strong body text */ + /* Spacing */ --space-xs: 8px; --space-sm: 16px; @@ -35,29 +38,29 @@ --space-xl: 64px; --space-2xl: 96px; --space-3xl: 128px; - + /* Layout */ --container-max: 1400px; --gutter: 32px; --section-padding: 120px; - + /* Animation */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1); - + --duration-fast: 0.2s; --duration-normal: 0.4s; --duration-slow: 0.8s; --duration-slower: 1.2s; - - /* Shadows */ - --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); - --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12); - --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.2); - --shadow-glow: 0 0 40px rgba(254, 212, 0, 0.4); - + + /* Shadows (tuned for light bg) */ + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); + --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08); + --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12); + --shadow-glow: 0 0 40px rgba(254, 212, 0, 0.3); + /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; @@ -101,27 +104,8 @@ a:hover { text-decoration: none !important; } -/* Cursor Trail Container */ -.cursor-container { - position: fixed; - inset: 0; - pointer-events: none; - z-index: 9999; - overflow: hidden; -} - -.particle { - position: absolute; - width: 8px; - height: 8px; - background: var(--color-primary); - border-radius: 50%; - pointer-events: none; - mix-blend-mode: difference; -} - /* ============================================ - TYPOGRAPHY - THE CORE OF THE DESIGN + TYPOGRAPHY ============================================ */ h1, h2, h3, h4, h5, h6 { @@ -129,62 +113,11 @@ h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; + color: var(--color-black); } -/* Giant Typography - Primary Visual Element */ -.text-display-xl { - font-family: var(--font-display); - font-size: clamp(60px, 12vw, 160px); - font-weight: 900; - line-height: 0.9; - letter-spacing: -0.03em; - text-transform: uppercase; -} - -.text-display-lg { - font-family: var(--font-display); - font-size: clamp(40px, 8vw, 100px); - font-weight: 900; - line-height: 1; - letter-spacing: -0.02em; -} - -.text-display-md { - font-family: var(--font-display); - font-size: clamp(28px, 5vw, 56px); - font-weight: 800; - line-height: 1.1; -} - -/* Kinetic Word Animation */ -.kinetic-word { - display: inline-block; - overflow: hidden; -} - -.kinetic-word-inner { - display: inline-block; - transform: translateY(100%); - opacity: 0; -} - -.kinetic-word.revealed .kinetic-word-inner { - animation: wordReveal 0.8s var(--ease-out-expo) forwards; -} - -@keyframes wordReveal { - 0% { - transform: translateY(100%) skewY(10deg); - opacity: 0; - } - 60% { - transform: translateY(-5%) skewY(-2deg); - opacity: 1; - } - 100% { - transform: translateY(0) skewY(0); - opacity: 1; - } +p { + color: var(--color-gray-700); } /* ============================================ @@ -198,154 +131,25 @@ h1, h2, h3, h4, h5, h6 { } /* ============================================ - SECTION STYLES + SECTION VARIANTS (light-first) ============================================ */ .section { padding: var(--section-padding) 0; position: relative; + background: var(--color-white); /* default light */ } -.section-dark { - background: var(--color-dark); - color: var(--color-white); -} - -.section-light { - background: var(--color-gray-100); -} - -.section-primary { - background: var(--color-primary); -} - -/* Seamless Section Transitions */ -.section-gradient-top { - position: relative; -} - -.section-gradient-top::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 100px; - background: linear-gradient(to bottom, var(--color-dark) 0%, transparent 100%); - z-index: 2; - pointer-events: none; -} - -.section-gradient-bottom { - position: relative; -} - -.section-gradient-bottom::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 100px; - background: linear-gradient(to top, var(--color-dark) 0%, transparent 100%); - z-index: 2; - pointer-events: none; -} +/* Explicit variants — call them with class on the section */ +.section--light { background: var(--color-white); } +.section--soft { background: var(--color-bg-alt); } +.section--yellow { background: var(--color-primary); } +.section--yellow .section-title, +.section--yellow .cta-title { color: var(--color-black); } +.section--yellow p { color: rgba(0, 0, 0, 0.7); } /* ============================================ - MAGAZINE STYLE - OVERLAP UTILITIES - ============================================ */ - -.overlap-top { - margin-top: -60px; - position: relative; - z-index: 10; -} - -.overlap-top-sm { - margin-top: -30px; -} - -.overlap-top-lg { - margin-top: -100px; -} - -.overlap-bottom { - margin-bottom: -60px; -} - -.floating-card { - position: relative; - z-index: 10; - margin-top: -40px; - background: var(--color-white); - border-radius: 24px; - box-shadow: 0 20px 60px rgba(0,0,0,0.08); -} - -.container-bleed { - width: 100%; - padding: 0 32px; -} - -.break-container { - width: 100vw; - margin-left: calc(50% - 50vw); -} - -/* ============================================ - ANIMATED ACCENT LINE - ============================================ */ - -.accent-line { - position: relative; - height: 6px; - background: var(--color-primary); - border-radius: 3px; - overflow: hidden; -} - -.accent-line::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); - animation: shimmer 2s ease-in-out infinite; -} - -@keyframes shimmer { - 0%, 100% { transform: translateX(-100%); } - 50% { transform: translateX(100%); } -} - -/* Draw Line Animation */ -.draw-line { - position: relative; - height: 4px; - background: var(--color-gray-200); - overflow: hidden; -} - -.draw-line::before { - content: ''; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 0; - background: var(--color-primary); - animation: drawLine 1s var(--ease-out-expo) forwards; -} - -@keyframes drawLine { - to { width: 100%; } -} - -/* ============================================ - BUTTONS - MAGNETIC EFFECT + BUTTONS — all light-bg safe (no same-color conflicts) ============================================ */ .btn { @@ -354,242 +158,93 @@ h1, h2, h3, h4, h5, h6 { align-items: center; justify-content: center; gap: 12px; - padding: 20px 40px; + padding: 18px 36px; font-family: var(--font-display); - font-size: 16px; + font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; - border: none; + border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; overflow: hidden; - transition: transform var(--duration-normal) var(--ease-out-expo), - box-shadow var(--duration-normal) var(--ease-out-expo); + transition: all 0.3s var(--ease-out-expo); + text-decoration: none; + white-space: nowrap; } +/* Primary: YELLOW bg, BLACK text — works on white/light/soft/dark + (yellow is the brand; never matches the background) */ .btn-primary { background: var(--color-primary); color: var(--color-black); - box-shadow: var(--shadow-glow); + border-color: var(--color-primary); + box-shadow: 0 4px 20px rgba(254, 212, 0, 0.25); } - .btn-primary:hover { - box-shadow: 0 0 60px rgba(254, 212, 0, 0.6); + 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); } +/* Dark: BLACK bg, WHITE text — for accent on yellow/light + (BLACK never matches yellow, never matches white bg) */ .btn-dark { - background: var(--color-dark); + background: var(--color-black); + color: var(--color-white); + border-color: var(--color-black); +} +.btn-dark:hover { + background: var(--color-gray-700); + border-color: var(--color-gray-700); + transform: translateY(-2px); +} + +/* Outline-dark: transparent, BLACK border + text — on white/yellow + (never same color as bg since transparent) */ +.btn-outline-dark { + background: transparent; + color: var(--color-black); + border-color: var(--color-black); +} +.btn-outline-dark:hover { + background: var(--color-black); color: var(--color-white); } -.btn-dark:hover { - background: var(--color-dark-light); -} - -.btn-outline { +/* Outline-light: transparent, WHITE border + text — for use on dark only + ⚠️ ONLY use on dark sections; never on white/light bg */ +.btn-outline-light { background: transparent; - border: 3px solid currentColor; + color: var(--color-white); + border-color: var(--color-white); } - -/* Shine Effect on Buttons */ -.btn::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient( - 90deg, - transparent, - rgba(255, 255, 255, 0.5), - transparent - ); - transition: left 0.6s ease; -} - -.btn:hover::before { - left: 100%; -} - -/* ============================================ - CARDS - TILT EFFECT - ============================================ */ - -.tilt-card { - position: relative; - transform-style: preserve-3d; - perspective: 1000px; -} - -.tilt-card-inner { - position: relative; - padding: 40px; +.btn-outline-light:hover { background: var(--color-white); - border-radius: var(--radius-xl); - box-shadow: var(--shadow-md); - transition: transform 0.3s ease, box-shadow 0.3s ease; - transform-style: preserve-3d; + color: var(--color-black); } -.tilt-card:hover .tilt-card-inner { - box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2); -} - -/* Card Entrance Animations */ -.card-enter { - opacity: 0; -} - -.card-enter-left { - animation: slideInLeft 0.8s var(--ease-out-expo) forwards; -} - -.card-enter-right { - animation: slideInRight 0.8s var(--ease-out-expo) forwards; -} - -.card-enter-up { - animation: slideInUp 0.8s var(--ease-out-expo) forwards; -} - -@keyframes slideInLeft { - from { - opacity: 0; - transform: translateX(-80px) skewX(5deg); - } - to { - opacity: 1; - transform: translateX(0) skewX(0); - } -} - -@keyframes slideInRight { - from { - opacity: 0; - transform: translateX(80px) skewX(-5deg); - } - to { - opacity: 1; - transform: translateX(0) skewX(0); - } -} - -@keyframes slideInUp { - from { - opacity: 0; - transform: translateY(60px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* ============================================ - SCROLL REVEAL ANIMATIONS - ============================================ */ - -.reveal { - opacity: 0; - transform: translateY(60px); - transition: opacity 0.8s var(--ease-out-expo), - transform 0.8s var(--ease-out-expo); -} - -.reveal.visible { - opacity: 1; - transform: translateY(0); -} - -.reveal-left { - opacity: 0; - transform: translateX(-60px); - transition: opacity 0.8s var(--ease-out-expo), - transform 0.8s var(--ease-out-expo); -} - -.reveal-left.visible { - opacity: 1; - transform: translateX(0); -} - -.reveal-right { - opacity: 0; - transform: translateX(60px); - transition: opacity 0.8s var(--ease-out-expo), - transform 0.8s var(--ease-out-expo); -} - -.reveal-right.visible { - opacity: 1; - transform: translateX(0); -} - -.reveal-scale { - opacity: 0; - transform: scale(0.9); - transition: opacity 0.8s var(--ease-out-expo), - transform 0.8s var(--ease-out-expo); -} - -.reveal-scale.visible { - opacity: 1; - transform: scale(1); -} - -/* ============================================ - COUNTER ANIMATION - ============================================ */ - -.counter { - font-family: var(--font-display); - font-size: clamp(60px, 10vw, 120px); - font-weight: 900; - line-height: 1; +/* Outline-yellow: transparent, YELLOW border + text — on dark sections */ +.btn-outline-yellow { + background: transparent; color: var(--color-primary); + border-color: var(--color-primary); +} +.btn-outline-yellow:hover { + background: var(--color-primary); + color: var(--color-black); } -.counter-value { - display: inline-block; +.btn-lg { + padding: 22px 48px; + font-size: 16px; } -/* ============================================ - FLOATING ELEMENTS - ============================================ */ - -.float { - animation: floatAnimation 4s ease-in-out infinite; -} - -.float-slow { - animation: floatAnimation 8s ease-in-out infinite; -} - -.float-fast { - animation: floatAnimation 2s ease-in-out infinite; -} - -@keyframes floatAnimation { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-20px); } -} - -.float-rotate { - animation: floatRotate 6s ease-in-out infinite; -} - -@keyframes floatRotate { - 0%, 100% { - transform: translateY(0) rotate(0deg); - } - 33% { - transform: translateY(-30px) rotate(5deg); - } - 66% { - transform: translateY(-15px) rotate(-5deg); - } +.btn-sm { + padding: 12px 24px; + font-size: 13px; + letter-spacing: 1.5px; } /* ============================================ @@ -611,45 +266,98 @@ h1, h2, h3, h4, h5, h6 { color: var(--color-black); } -.badge-dark { - background: var(--color-dark); - color: var(--color-white); -} - -/* Pulsing Badge */ -.badge-pulse { - animation: badgePulse 2s ease-in-out infinite; -} - -@keyframes badgePulse { - 0%, 100% { - box-shadow: 0 0 0 0 rgba(254, 212, 0, 0.4); - } - 50% { - box-shadow: 0 0 0 15px rgba(254, 212, 0, 0); - } +/* Ghost badge — used on light bg; transparent + dark text + border */ +.badge-ghost { + background: transparent; + color: var(--color-gray-700); + border: 1px solid var(--color-gray-300); } /* ============================================ - PARALLAX BACKGROUND TEXT + CARDS — light theme (works on every light bg) ============================================ */ -.parallax-text { - position: absolute; - font-family: var(--font-display); - font-size: clamp(150px, 25vw, 350px); - font-weight: 900; - text-transform: uppercase; - white-space: nowrap; - pointer-events: none; - user-select: none; - opacity: 0.03; - color: var(--color-black); - will-change: transform; +.card { + background: var(--color-white); + border: 1px solid var(--color-gray-200); + border-radius: var(--radius-xl); + padding: 32px; + transition: all 0.3s var(--ease-out-expo); + box-shadow: var(--shadow-sm); +} +.card:hover { + border-color: var(--color-primary); + transform: translateY(-4px); + box-shadow: var(--shadow-md); } /* ============================================ - NAVIGATION + FORM ELEMENTS — light theme (no dark form) + ============================================ */ + +.form-group { + position: relative; + margin-bottom: 24px; +} + +.form-label { + display: block; + font-size: 13px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; + color: var(--color-gray-700); + margin-bottom: 8px; +} + +.form-input, +.form-textarea, +.form-select { + width: 100%; + padding: 16px 20px; + font-family: var(--font-body); + font-size: 16px; + background: var(--color-white); + color: var(--color-black); + border: 2px solid var(--color-gray-200); + border-radius: var(--radius-md); + transition: all 0.3s ease; + outline: none; + font-weight: 400; +} + +.form-input::placeholder, +.form-textarea::placeholder { + color: var(--color-gray-400); +} + +.form-input:focus, +.form-textarea:focus, +.form-select:focus { + border-color: var(--color-primary); + box-shadow: 0 0 0 3px rgba(254, 212, 0, 0.15); +} + +.form-textarea { + resize: vertical; + min-height: 120px; +} + +.form-select { + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%230a0a0a' stroke-width='2'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 20px center; + padding-right: 48px; +} + +.form-submit { + width: 100%; + margin-top: 8px; +} + +/* ============================================ + NAVIGATION — light theme ============================================ */ .nav { @@ -658,32 +366,44 @@ h1, h2, h3, h4, h5, h6 { left: 0; right: 0; z-index: 1000; - padding: 24px 0; - transition: all 0.4s var(--ease-out-expo); + padding: 16px 0; + background: var(--color-white); + border-bottom: 1px solid var(--color-gray-200); + transition: all 0.3s var(--ease-out-expo); } .nav.scrolled { - padding: 16px 0; - background: rgba(26, 26, 46, 0.9); + padding: 12px 0; + background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); + box-shadow: var(--shadow-sm); } .nav-link { position: relative; + padding: 12px 16px; font-family: var(--font-display); - font-size: 14px; + font-size: 13px; 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, +.nav-link.active { + color: var(--color-primary-dark); } .nav-link::after { content: ''; position: absolute; - bottom: -4px; + bottom: -2px; left: 0; width: 0; height: 3px; @@ -698,69 +418,31 @@ h1, h2, h3, h4, h5, h6 { .nav-cta { background: var(--color-primary); - color: var(--color-black); + color: var(--color-black) !important; + border-radius: var(--radius-md); + margin-left: 16px; padding: 12px 24px; - border-radius: var(--radius-md); + border: 2px solid var(--color-primary); } +.nav-cta:hover { + background: var(--color-primary-dark); + border-color: var(--color-primary-dark); + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(254, 212, 0, 0.3); +} + +.nav-cta::after { display: none; } + /* ============================================ - FORM ELEMENTS - ============================================ */ - -.form-group { - position: relative; - margin-bottom: 24px; -} - -.form-label { - position: absolute; - left: 20px; - top: 50%; - transform: translateY(-50%); - font-size: 16px; - color: var(--color-gray-600); - pointer-events: none; - transition: all 0.3s var(--ease-out-expo); -} - -.form-input { - width: 100%; - padding: 20px; - font-family: var(--font-body); - font-size: 16px; - background: var(--color-gray-100); - border: 2px solid transparent; - border-radius: var(--radius-md); - transition: all 0.3s ease; -} - -.form-input:focus { - outline: none; - border-color: var(--color-primary); - background: var(--color-white); -} - -.form-input:focus + .form-label, -.form-input:not(:placeholder-shown) + .form-label { - top: -12px; - left: 16px; - font-size: 12px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 1px; - background: var(--color-white); - padding: 4px 8px; - color: var(--color-primary); -} - -/* ============================================ - FOOTER + FOOTER — light theme ============================================ */ .footer { - background: var(--color-dark); - color: var(--color-white); + background: var(--color-white); + color: var(--color-black); padding: 80px 0 40px; + border-top: 1px solid var(--color-gray-200); } .footer-title { @@ -769,41 +451,49 @@ h1, h2, h3, h4, h5, h6 { font-weight: 700; text-transform: uppercase; letter-spacing: 3px; - color: var(--color-primary); + color: var(--color-black); margin-bottom: 24px; } -.social-link { - display: flex; +.footer-link { + display: inline-flex; align-items: center; - justify-content: center; - width: 48px; - height: 48px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.1); - transition: all 0.3s var(--ease-out-expo); + gap: 8px; + font-size: 15px; + color: var(--color-gray-600); + transition: all 0.3s ease; } -.social-link:hover { - background: var(--color-primary); - transform: translateY(-4px); +.footer-link:hover { + color: var(--color-primary-dark); } -.social-link svg { - width: 20px; - height: 20px; - fill: var(--color-white); - transition: fill 0.3s ease; +.footer-link:hover .link-arrow { + opacity: 1; + transform: translateX(0); } -.social-link:hover svg { - fill: var(--color-black); +.link-arrow { + opacity: 0; + transform: translateX(-10px); + transition: all 0.3s ease; } /* ============================================ UTILITIES ============================================ */ +.text-primary { color: var(--color-primary); } +.text-black { color: var(--color-black); } +.text-muted { color: var(--color-gray-500); } + +.bg-primary { background: var(--color-primary); } +.bg-light { background: var(--color-white); } +.bg-soft { background: var(--color-bg-alt); } + +.text-center { text-align: center; } +.text-uppercase { text-transform: uppercase; letter-spacing: 2px; } + .sr-only { position: absolute; width: 1px; @@ -816,16 +506,6 @@ h1, h2, h3, h4, h5, h6 { border: 0; } -.text-primary { color: var(--color-primary); } -.text-dark { color: var(--color-dark); } -.text-muted { color: var(--color-gray-600); } - -.bg-primary { background: var(--color-primary); } -.bg-dark { background: var(--color-dark); } - -.text-center { text-align: center; } -.text-uppercase { text-transform: uppercase; letter-spacing: 2px; } - /* ============================================ RESPONSIVE ============================================ */ @@ -842,42 +522,8 @@ h1, h2, h3, h4, h5, h6 { --section-padding: 60px; --gutter: 16px; } - .btn { width: 100%; - padding: 18px 32px; + padding: 16px 28px; } } - -/* ============================================ - LOADING ANIMATION - ============================================ */ - -.loader { - position: fixed; - inset: 0; - background: var(--color-dark); - display: flex; - align-items: center; - justify-content: center; - z-index: 10000; - transition: opacity 0.5s ease, visibility 0.5s ease; -} - -.loader.hidden { - opacity: 0; - visibility: hidden; -} - -.loader-text { - font-family: var(--font-display); - font-size: clamp(40px, 8vw, 80px); - font-weight: 900; - color: var(--color-primary); - animation: loaderPulse 1s ease-in-out infinite; -} - -@keyframes loaderPulse { - 0%, 100% { opacity: 1; transform: scale(1); } - 50% { opacity: 0.5; transform: scale(0.95); } -} \ No newline at end of file