python-spain · francescarpi · Mar 8, 2026 · Mar 8, 2026
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -205,7 +205,9 @@ const { items } = menuTexts[currentLang]
       </ul>
 
       <!-- Mobile utility controls (outside nav for proper semantics) -->
-      <div class="flex items-center justify-between py-2 border-t border-pycon-black/10 dark:border-white/10 mt-2">
+      <div
+        class="flex items-center justify-between py-2 border-t border-pycon-black/10 dark:border-white/10 mt-2"
+      >
         <LanguagePicker variant="mobile" lang={currentLang} />
         <ThemeToggle />
       </div>

diff --git a/src/components/home/SectionSponsors.astro b/src/components/home/SectionSponsors.astro
@@ -32,10 +32,45 @@ const main = filterSponsorsByTier('main')
   <CenteredPanel text={t['sponsors.description']} />
 
   <div class="w-full flex flex-col gap-8">
-    <SponsorsGroup lang={lang} title={t['sponsors.main']} sponsors={main} tierId="main" />
-    <SponsorsGroup lang={lang} title={t['sponsors.platinum']} sponsors={platinum} tierId="platinum" />
-    <SponsorsGroup lang={lang} title={t['sponsors.gold']} sponsors={gold} tierId="gold" />
-    <SponsorsGroup lang={lang} title={t['sponsors.silver']} sponsors={silver} tierId="silver" />
-    <SponsorsGroup lang={lang} title={t['sponsors.bronze']} sponsors={bronze} tierId="bronze" />
+    <SponsorsGroup
+      lang={lang}
+      title={t['sponsors.main']}
+      sponsors={main}
+      bgColor="bg-tier-main"
+      textColor="text-contrast-tier-main"
+      size={200}
+    />
+    <SponsorsGroup
+      lang={lang}
+      title={t['sponsors.platinum']}
+      sponsors={platinum}
+      bgColor="bg-tier-platinum"
+      textColor="text-contrast-tier-platinum"
+      size={150}
+    />
+    <SponsorsGroup
+      lang={lang}
+      title={t['sponsors.gold']}
+      sponsors={gold}
+      bgColor="bg-tier-gold"
+      textColor="text-contrast-tier-gold"
+      size={120}
+    />
+    <SponsorsGroup
+      lang={lang}
+      title={t['sponsors.silver']}
+      sponsors={silver}
+      bgColor="bg-tier-silver"
+      textColor="text-contrast-tier-silver"
+      size={100}
+    />
+    <SponsorsGroup
+      lang={lang}
+      title={t['sponsors.bronze']}
+      sponsors={bronze}
+      bgColor="bg-tier-bronze"
+      textColor="text-contrast-tier-bronze"
+      size={80}
+    />
   </div>
 </div>
diff --git a/src/components/home/sponsors/SponsorsGroup.astro b/src/components/home/sponsors/SponsorsGroup.astro
@@ -1,29 +1,24 @@
 ---
-import type { ISponsor, TSponsorTier } from '../../../types/sponsors'
+import type { ISponsor } from '../../../types/sponsors'
 import { texts } from '../../../i18n/home'
-import { TIER_COLORS } from '../../../constants'
 
 interface Props {
-  tierId: TSponsorTier
   lang: string
   title: string
   sponsors: ISponsor[]
+  bgColor: string
+  textColor: string
+  size: number
 }
 
-const { title, sponsors, lang, tierId } = Astro.props
+const { title, sponsors, lang, bgColor, textColor, size } = Astro.props
 const t = texts[lang as keyof typeof texts]
-
-const IMG_WITH_BY_TIER: Record<TSponsorTier, number> = {
-  main: 200,
-  platinum: 150,
-  gold: 120,
-  silver: 100,
-  bronze: 80,
-}
 ---
 
 <div class="w-full">
-  <h4 style={`background-color: ${TIER_COLORS[tierId]};`} class="p-2 text-black rounded">{title}</h4>
+  <h4 class={`p-2 text-black rounded ${bgColor} ${textColor}`}>
+    {title}
+  </h4>
   {
     sponsors.length > 0 ? (
       <div class="flex flex-wrap gap-4 mt-4">
@@ -37,7 +32,7 @@ const IMG_WITH_BY_TIER: Record<TSponsorTier, number> = {
             <img
               src={sponsor.logo}
               alt={t['sponsors.altlogo'].replace('{name}', sponsor.name)}
-              width={IMG_WITH_BY_TIER[tierId]}
+              width={size}
             />
             <small>{sponsor.name}</small>
           </a>

diff --git a/src/constants.ts b/src/constants.ts
diff --git a/src/i18n/sponsors/ca.ts b/src/i18n/sponsors/ca.ts
@@ -206,39 +206,39 @@ export const ca = {
     no_taxes: 'sense IVA',
     items: [
       {
-        id: 'bronze',
+        color: 'text-tier-bronze',
         name: 'Bronze',
         emoji: '🟤',
         price: 'Preu 1.000€',
         limit: 'Il·limitat',
         bg: 'rgba(180, 83, 9, 0.1)',
       },
       {
-        id: 'silver',
+        color: 'text-tier-silver',
         name: 'Plata',
         emoji: '⚪',
         price: 'Preu 3.000€',
         limit: '10 disp.',
         bg: 'rgba(107, 114, 128, 0.1)',
       },
       {
-        id: 'gold',
+        color: 'text-tier-gold',
         name: 'Or',
         emoji: '🌟',
         price: 'Preu 6.000€',
         limit: '5 disp.',
         bg: 'rgba(234, 179, 8, 0.1)',
       },
       {
-        id: 'platinium',
+        color: 'text-tier-platinium',
         name: 'Platí',
         emoji: '🏆',
         price: 'Preu 8.000€',
         limit: '2 disp.',
         bg: 'rgba(34, 197, 94, 0.1)',
       },
       {
-        id: 'main',
+        color: 'text-tier-main',
         name: 'Principal',
         emoji: '🏰',
         price: 'Preu Personalitzat',

diff --git a/src/i18n/sponsors/en.ts b/src/i18n/sponsors/en.ts
@@ -206,39 +206,39 @@ export const en = {
     no_taxes: 'VAT not included',
     items: [
       {
-        id: 'bronze',
+        color: 'text-tier-bronze',
         name: 'Bronze',
         emoji: '🟤',
         price: 'Price €1,000',
         limit: 'Unlimited',
         bg: 'rgba(180, 83, 9, 0.1)',
       },
       {
-        id: 'silver',
+        color: 'text-tier-silver',
         name: 'Silver',
         emoji: '⚪',
         price: 'Price €3,000',
         limit: '10 avail.',
         bg: 'rgba(107, 114, 128, 0.1)',
       },
       {
-        id: 'gold',
+        color: 'text-tier-gold',
         name: 'Gold',
         emoji: '🌟',
         price: 'Price €6,000',
         limit: '5 avail.',
         bg: 'rgba(234, 179, 8, 0.1)',
       },
       {
-        id: 'platinum',
+        color: 'text-tier-platinum',
         name: 'Platinum',
         emoji: '🏆',
         price: 'Price €8,000',
         limit: '2 avail.',
         bg: 'rgba(34, 197, 94, 0.1)',
       },
       {
-        id: 'main',
+        color: 'text-tier-main',
         name: 'Main',
         emoji: '🏰',
         price: 'Price Custom',

diff --git a/src/i18n/sponsors/es.ts b/src/i18n/sponsors/es.ts
@@ -206,39 +206,39 @@ export const es = {
     no_taxes: 'sin IVA',
     items: [
       {
-        id: 'bronze',
+        color: 'text-tier-bronze',
         name: 'Bronce',
         emoji: '🟤',
         price: 'Precio 1.000€',
         limit: 'Ilimitado',
         bg: 'rgba(180, 83, 9, 0.1)',
       },
       {
-        id: 'silver',
+        color: 'text-tier-silver',
         name: 'Plata',
         emoji: '⚪',
         price: 'Precio 3.000€',
         limit: '10 disp.',
         bg: 'rgba(107, 114, 128, 0.1)',
       },
       {
-        id: 'gold',
+        color: 'text-tier-gold',
         name: 'Oro',
         emoji: '🌟',
         price: 'Precio 6.000€',
         limit: '5 disp.',
         bg: 'rgba(234, 179, 8, 0.1)',
       },
       {
-        id: 'platinum',
+        color: 'text-tier-platinum',
         name: 'Platino',
         emoji: '🏆',
         price: 'Precio 8.000€',
         limit: '2 disp.',
         bg: 'rgba(34, 197, 94, 0.1)',
       },
       {
-        id: 'main',
+        color: 'text-tier-main',
         name: 'Principal',
         emoji: '🏰',
         price: 'Precio Personalizado',

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -34,9 +34,11 @@ const { title, description = 'PyconES 2026' } = Astro.props
         if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
           return localStorage.getItem('theme')
         }
+
         if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
           return 'dark'
         }
+
         return 'light'
       })()
 

diff --git a/src/pages/[lang]/sponsors.astro b/src/pages/[lang]/sponsors.astro
@@ -2,7 +2,6 @@
 import Layout from '../../layouts/Layout.astro'
 import { SPONSORS_EMAIL } from '../constants'
 import { texts } from '../../i18n/sponsors'
-import { TIER_COLORS } from '../../constants'
 
 export function getStaticPaths() {
   return [{ params: { lang: 'es' } }, { params: { lang: 'en' } }, { params: { lang: 'ca' } }]
@@ -350,17 +349,17 @@ const {
         <h2 class="text-center text-3xl font-bold mb-8">{tiers.title}</h2>
 
         <div class="table-scroll overflow-x-auto pb-4 mb-8 border border-white/10 rounded-lg bg-pycon-black">
-          <table class="pricing-table w-full border-separate border-spacing-0 min-w-[900px]">
+          <table class="pricing-table w-full border-separate border-spacing-0 min-w-225">
             <thead>
               <tr class="bg-pycon-black">
                 <th
                   scope="col"
-                  class="w-[200px] p-4 text-center border-b border-r border-white/10 align-bottom pb-6 sticky left-0 z-10"
+                  class="w-50 p-4 text-center border-b border-r border-white/10 align-bottom pb-6 sticky left-0 z-10"
                   >{tiers.column1}</th
                 >
                 {
                   tiers.items.map(
-                    (t: { name: string; price: string; limit: string; emoji: string; id: string }) => (
+                    (t: { name: string; price: string; limit: string; emoji: string; color: string }) => (
                       <th
                         scope="col"
                         class="p-4 text-center border-b border-white/10 align-bottom pb-6"
@@ -369,11 +368,7 @@ const {
                         <div class="text-2xl mb-1" aria-hidden="true">
                           {t.emoji}
                         </div>
-                        <div
-                          class="text-xl font-bold"
-                          style={`color: ${TIER_COLORS[t.id]}`}
-                          aria-hidden="true"
-                        >
+                        <div class={`text-xl font-bold ${t.color}`} aria-hidden="true">
                           {t.name}
                         </div>
                         <div class="text-white text-2xl font-bold my-1" aria-hidden="true">
@@ -547,4 +542,4 @@ const {
       </section>
     </div>
   </div>
-</Layout>
+</Layout>
diff --git a/src/style/global.css b/src/style/global.css
@@ -4,7 +4,8 @@
 
 html {
   scroll-behavior: smooth;
-  scroll-padding-top: 6rem; /* Adjust based on your header height */
+  scroll-padding-top: 6rem;
+  /* Adjust based on your header height */
 }
 
 @theme {
@@ -70,24 +71,33 @@ html {
   --color-pycon-white: #ffffff;
 
   /*DS colors*/
-  --color-pantone-151c: --color-pycon-orange-100;
-  --color-pantone-123c: --color-pycon-yellow-100;
-  --color-pantone-warm-red: --color-pycon-red-100;
-  --color-pantone-black-c: --color-pycon-black-100;
-  --color-pantone-yellow-100: --color-pycon-yellow;
-  --color-pantone-yellow-75: --color-pycon-yellow-75;
-  --color-pantone-yellow-50: --color-pycon-yellow-50;
-  --color-pantone-yellow-25: --color-pycon-yellow-25;
-  --color-pantone-warm-red-100: --color-pycon-red;
-  --color-pantone-warm-red-75: --color-pycon-red-75;
-  --color-pantone-warm-red-50: --color-pycon-red-50;
-  --color-pantone-warm-red-25: --color-pycon-red-25;
-
-  --color-tier-main: --color-pycon-yellow;
-  --color-tier-platinum: --color-pycon-orange;
-  --color-tier-gold: --color-pycon-red;
-  --color-tier-silver: --color-pycon-mute;
-  --color-tier-bronze: --color-pycon-gray;
+  --color-pantone-151c: var(--color-pycon-orange-100);
+  --color-pantone-123c: var(--color-pycon-yellow-100);
+  --color-pantone-warm-red: var(--color-pycon-red-100);
+  --color-pantone-black-c: var(--color-pycon-black-100);
+  --color-pantone-yellow-100: var(--color-pycon-yellow);
+  --color-pantone-yellow-75: var(--color-pycon-yellow-75);
+  --color-pantone-yellow-50: var(--color-pycon-yellow-50);
+  --color-pantone-yellow-25: var(--color-pycon-yellow-25);
+  --color-pantone-warm-red-100: var(--color-pycon-red);
+  --color-pantone-warm-red-75: var(--color-pycon-red-75);
+  --color-pantone-warm-red-50: var(--color-pycon-red-50);
+  --color-pantone-warm-red-25: var(--color-pycon-red-25);
+
+  --color-tier-main: var(--color-pycon-yellow);
+  --color-contrast-tier-main: #1d1d1b;
+
+  --color-tier-platinum: var(--color-pycon-orange);
+  --color-contrast-tier-platinum: #ffffff;
+
+  --color-tier-gold: var(--color-pycon-red);
+  --color-contrast-tier-gold: #ffffff;
+
+  --color-tier-silver: var(--color-pycon-mute);
+  --color-contrast-tier-silver: #ffffff;
+
+  --color-tier-bronze: var(--color-pycon-gray);
+  --color-contrast-tier-bronze: #ffffff;
 }
 
 @layer base {
@@ -97,6 +107,7 @@ html {
     --bg-symbol: url('/images/symbol-black-dark.svg');
     color-scheme: light dark;
   }
+
   .dark {
     --bg-color: #1d1d1b;
     --text-color: #ffffff;