2026.es.pycon.org/src/style/global.css at 76c4150f02d66e6fb84a8b246f79b09aa00e5cd0 · python-spain/2026.es.pycon.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
@import 'tailwindcss';

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  /* Adjust based on your header height */
}

@theme {
  /* Fonts */
  --font-outfit: 'Outfit Variable', sans-serif;

  --font-size-xs: 1rem;
  --font-size-sm: 1.125rem;
  --font-size-base: 1.25rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 1.875rem;
  --font-size-2xl: 2.25rem;
  --font-size-3xl: 2.625rem;
  --font-size-4xl: 3rem;
  --font-size-5xl: 3.375rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;
  --font-size-8xl: 6rem;
  --font-size-9xl: 8rem;

  /* Font Weights */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Colors */
  --color-pycon-yellow: #ffc72c;
  --color-pycon-yellow-100: #ffc72c;
  --color-pycon-yellow-75: #ffd560;
  --color-pycon-yellow-50: #ffe395;
  --color-pycon-yellow-25: #fff1ca;

  --color-pycon-orange: #ff8200;
  --color-pycon-orange-100: #ff8200;
  --color-pycon-orange-75: #ffa13f;
  --color-pycon-orange-50: #ffc07f;
  --color-pycon-orange-25: #ffdfbf;

  --color-pycon-red: #f9423a;
  --color-pycon-red-100: #f9423a;
  --color-pycon-red-75: #fa716b;
  --color-pycon-red-50: #fca09c;
  --color-pycon-red-25: #fdcfcd;

  --color-pycon-mute: #cc6600;
  --color-pycon-mute-100: #cc6600;

  --color-pycon-gray: #4a4a48;
  --color-pycon-gray-100: #4a4a48;

  --color-pycon-black: #1d1d1b;
  --color-pycon-black-100: #1d1d1b;
  --color-pycon-black-75: #555554;
  --color-pycon-black-50: #8e8e8d;
  --color-pycon-black-25: #c6c6c6;

  --color-pycon-white: #ffffff;

  /*DS colors*/
  --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;

  --color-tier-community: #4a6fa5;
  --color-contrast-tier-community: #ffffff;
}

@layer base {
  :root {
    --bg-color: #1d1d1b;
    --text-color: #ffffff;
    --bg-symbol: url('/images/symbol-black-dark.svg');
    color-scheme: dark;
  }

  :root.light {
    --bg-color: #ffffff;
    --text-color: #1d1d1b;
    --bg-symbol: url('/images/symbol-black-light.svg');
    color-scheme: light;
  }
}