fix: use background color as constats

Author: ryoppippi

2025/src/components/Header.astro

@@ -1,5 +1,7 @@
 ---
 import LanguagePicker from '../components/LanguagePicker.astro'
+
+import { MAIN_BACKGROUND_COLOR } from '@/consts';
 ---
 
 <header class="hero">
@@ -9,10 +11,10 @@ import LanguagePicker from '../components/LanguagePicker.astro'
   </div>
 </header>
 
-<style>
+<style define:vars={{ mainBackgroundColor: MAIN_BACKGROUND_COLOR }}>
 /* Hero Section */
 .hero {
-  background: linear-gradient(110deg, #9ebd13 0%, #069700 100%);
+  background: linear-gradient(110deg, #9ebd13 0%, var(--mainBackgroundColor) 100%);
   color: #fff;
   text-align: center;
 

2025/src/consts/index.ts

@@ -3,5 +3,6 @@ import { base } from "astro:config/client"
 
 import { DOMAIN } from "./_domain.js" with { type: "macro" }
 
-
 export const BASE_URL = ufo.joinURL(DOMAIN, base)
+
+export const MAIN_BACKGROUND_COLOR = `#069700`;

2025/src/pages/en.astro

@@ -2,6 +2,8 @@
 import Layout from '../layouts/Layout.astro';
 import VenueMap from '../components/VenueMap.astro';
 import AnnouncementSlides from '../components/AnnouncementSlides.astro';
+
+import { MAIN_BACKGROUND_COLOR } from '@/consts';
 ---
 
 <Layout lang="en">
@@ -80,7 +82,7 @@ import AnnouncementSlides from '../components/AnnouncementSlides.astro';
   </section>
 </Layout>
 
-<style>
+<style define:vars={{ mainBackgroundColor: MAIN_BACKGROUND_COLOR }}>
 h3 {
   font-size: 1.2rem;
 }
@@ -122,7 +124,7 @@ section + section {
 /* Contact Button */
 .btn {
   display: inline-block;
-  background-color: #069700;
+  background-color: var(--mainBackgroundColor);
   color: #fff;
   padding: 12px 20px;
   border-radius: 4px;

2025/src/pages/ja.astro

@@ -2,6 +2,8 @@
 import Layout from '../layouts/Layout.astro';
 import VenueMap from '../components/VenueMap.astro';
 import AnnouncementSlides from '../components/AnnouncementSlides.astro';
+
+import { MAIN_BACKGROUND_COLOR } from '@/consts';
 ---
 
 <Layout>
@@ -83,7 +85,7 @@ import AnnouncementSlides from '../components/AnnouncementSlides.astro';
   </section>
 </Layout>
 
-<style>
+<style define:vars={{ mainBackgroundColor: MAIN_BACKGROUND_COLOR }}>
 h3 {
   font-size: 1.2rem;
 }
@@ -96,21 +98,6 @@ h3 {
   padding: 24px 0;
 }
 
-/* Hero Section */
-.hero {
-  background: linear-gradient(110deg, #9ebd13 0%, #069700 100%);
-  color: #fff;
-  text-align: center;
-
-  h1 {
-    font-size: 4rem;
-    margin-bottom: 16px;
-    font-family: "Cardo", serif;
-    font-weight: 400;
-    font-style: italic;
-  }
-}
-
 /* Section Title */
 .section-title {
   font-size: 2.4rem;
@@ -139,7 +126,7 @@ section + section {
 /* Contact Button */
 .btn {
   display: inline-block;
-  background-color: #069700;
+  background-color: var(--mainBackgroundColor);
   color: #fff;
   padding: 12px 20px;
   border-radius: 4px;