pythonasia/src/styles/globals.css at 9097c403b8dcaed8043dd0aef6a97b8a8e41461a · pythonph/pythonasia · 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
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap');

:root {
  /* === Orange / Accent === */
  --orange-1: #BD4B06;
  --orange-2: #F26D1D;
  --orange-3: #FFA218;

  /* === Neutral === */
  --white: #FFFFFF;
  --offwhite-1: #FFF9F2;
  --offwhite-2: #FFF4E6;
  --offwhite-3: #FFF3E5;

  /* === Browns === */
  --brown-1: #84400F;
  --brown-2: #7C5E3B;
  --brown-3: #B04301;

  /* === Light Backgrounds === */
  --bg-cream-1: #F8EBE5;
  --bg-cream-2: #FFE7D5;
  --bg-cream-3: #F8F0E5;

  /* === Stroke / Borders === */
  --stroke-1: #C9AC8A;
}

@font-face {
  font-family: 'Bantayog';
  src: url('/static/fonts/Bantayog-Light.otf') format('opentype');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Bantayog';
  src: url('/static/fonts/Bantayog-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Bantayog';
  src: url('/static/fonts/Bantayog-Semilight.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}


@font-face {
  font-family: 'Niwanguno';
  src: url('/static/fonts/NiwangUno-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}


@font-face {
  font-family: 'TD Pinoy';
  src: url('/static/fonts/TD_Pinoy.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}


.font-bantayog {
  font-family: 'Bantayog', sans-serif;
}

.font-niwanguno {
  font-family: 'Niwanguno', sans-serif;
}

.font-td_pinoy {
  font-family: 'TD Pinoy ', sans-serif;
}

.font-nunito {
  font-family: 'Nunito', sans-serif;
}

.bg-orange-1 { background-color: var(--orange-1); }
.bg-orange-2 { background-color: var(--orange-2); }
.bg-white { background-color: var(--white); }
.bg-offwhite-1 { background-color: var(--offwhite-1); }
.bg-offwhite-2 { background-color: var(--offwhite-2); }
.bg-offwhite-3 { background-color: var(--offwhite-3); }
.bg-cream-1 { background-color: var(--bg-cream-1); }
.bg-cream-2 { background-color: var(--bg-cream-2); }
.bg-cream-3 { background-color: var(--bg-cream-3); }
.bg-transparent {background-color: transparent;}

.text-orange-2 { color: var(--orange-2); }
.text-orange-3 { color: var(--orange-3); }
.text-brown-1 { color: var(--brown-1); }
.text-brown-2 { color: var(--brown-2); }
.text-brown-3 { color: var(--brown-3); }
.text-white { color: var(--white); }


.border-stroke-1 { border-color: var(--stroke-1); }

/* Buttons */
.bg-primary-btn { background-color: var(--orange-2); color: var(--white); }
.bg-secondary-btn { background-color: var(--white); color: var(--brown-1); }