mfb-design/theme.css at master · MyFirstBitcoin/mfb-design · 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/* Generated from tokens.json - DO NOT EDIT BY HAND. Tailwind 4 @theme. */
@theme {
  --color-purple-300: #422C70;
  --color-mfb-purple-300: #422C70;
  --color-purple-400: #2B1C58;
  --color-mfb-purple-400: #2B1C58;
  --color-purple-200: #5E378E;
  --color-mfb-purple-200: #5E378E;
  --color-orange-300: #F7941F;
  --color-mfb-orange-300: #F7941F;
  --color-orange-400: #EF7B00;
  --color-mfb-orange-400: #EF7B00;
  --color-orange-200: #FBB040;
  --color-mfb-orange-200: #FBB040;
  --color-black: #000000;
  --color-mfb-black: #000000;
  --color-white: #FFFFFF;
  --color-mfb-white: #FFFFFF;
  --color-gray-900: #25252B;
  --color-mfb-gray-900: #25252B;
  --color-gray-800: #4F4F5D;
  --color-mfb-gray-800: #4F4F5D;
  --color-gray-700: #6C6C7D;
  --color-mfb-gray-700: #6C6C7D;
  --color-gray-600: #88889C;
  --color-mfb-gray-600: #88889C;
  --color-gray-500: #ADADBE;
  --color-mfb-gray-500: #ADADBE;
  --color-gray-400: #C0C0D0;
  --color-mfb-gray-400: #C0C0D0;
  --color-gray-300: #D8D8E7;
  --color-mfb-gray-300: #D8D8E7;
  --color-gray-200: #EAEAF4;
  --color-mfb-gray-200: #EAEAF4;
  --color-gray-100: #F3F3FA;
  --color-mfb-gray-100: #F3F3FA;
  --font-heading: "IBM Plex Sans", Arial, sans-serif;
  --font-body: "IBM Plex Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --font-sans: "IBM Plex Sans", Arial, sans-serif;
  --text-h1: 70px;
  --text-h2: 58px;
  --text-h3: 48px;
  --text-h4: 40px;
  --text-h5: 36px;
  --text-h6: 32px;
  --text-body: 18px;
  --text-label: 22px;
  --text-quote: 40px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-normal: 400;
  --color-heading-on-light: #000000;
  --color-body-on-light: #000000;
  --color-muted-on-light: #6C6C7D;
  --color-link-on-light: #422C70;
  --color-link-underline-on-light: #F7941F;
  --color-border-on-light: #EAEAF4;
  --color-highlighter-on-light: #F7941F;
  --color-logo-on-light: #422C70;
  --color-heading-on-dark: #FFFFFF;
  --color-body-on-dark: #FFFFFF;
  --color-muted-on-dark: #C0C0D0;
  --color-link-on-dark: #F7941F;
  --color-highlighter-on-dark: #F7941F;
  --color-logo-on-dark: #FFFFFF;
  --color-heading-on-orange: #000000;
  --color-body-on-orange: #000000;
  --color-link-on-orange: #000000;
  --color-highlighter-on-orange: #FFFFFF;
  --color-logo-on-orange: #000000;
  --color-mfb-dark-surface: #2B1C58;
  --color-mfb-dark-surface-raised: #422C70;
  --color-mfb-dark-text: #FFFFFF;
  --color-mfb-dark-text-muted: #C0C0D0;
  --color-mfb-dark-line: #88889C;
  --color-mfb-dark-link: #F7941F;
  --color-mfb-dark-accent: #F7941F;
  --color-mfb-dark-on-accent: #000000;
  --color-mfb-dark-focus: #F7941F;
  --color-mfb-dark-primary: #5E378E;
  --color-mfb-dark-on-primary: #FFFFFF;
  --color-mfb-dark-primary-edge: #C0C0D0;
  --text-h1-fluid: clamp(44px, 6vw, 70px);
  --text-h2-fluid: clamp(36px, 5vw, 58px);
  --text-h3-fluid: clamp(30px, 4vw, 48px);
  --text-h4-fluid: clamp(26px, 3.2vw, 40px);
  --text-h5-fluid: clamp(22px, 2.6vw, 36px);
  --text-h6-fluid: clamp(20px, 2.2vw, 32px);
  --text-quote-fluid: clamp(22px, 2.8vw, 40px);
  --text-label-fluid: clamp(16px, 1.6vw, 22px);
  --leading-h1: 1;
  --leading-h2: 1;
  --leading-h3: 1;
  --leading-h4: 1;
  --leading-h5: 1.1;
  --leading-h6: 1.1;
  --leading-body: 1.2;
  --leading-body-long: 1.7;
  --leading-label: 1.2;
  --leading-quote: 1;
  --tracking-h1: 0em;
  --tracking-h2: 0em;
  --tracking-h3: 0em;
  --tracking-h4: 0em;
  --tracking-h5: 0em;
  --tracking-h6: 0em;
  --tracking-body: 0em;
  --tracking-label: 0em;
  --tracking-quote: 0em;
  --spacing-mfb-heading-to-body: 40px;
  --spacing-mfb-quote-to-label: 48px;
  --spacing-mfb-gutter: clamp(20px, 4vw, 64px);
  --spacing-mfb-section: clamp(64px, 9vw, 128px);
  --spacing-mfb-section-tight: clamp(48px, 6vw, 96px);
  --spacing-mfb-header-gap: clamp(32px, 4vw, 56px);
  --spacing-mfb-block-end: clamp(32px, 4vw, 48px);
  --radius-mfb-sm: 4px;
  --radius-mfb-md: 8px;
  --radius-mfb-lg: 12px;
  --shadow-mfb-media: 0px 20px 60px -20px color-mix(in srgb, #2B1C58 25%, transparent);
  --shadow-mfb-media-control: 0px 12px 32px -8px color-mix(in srgb, #000000 40%, transparent);
  --shadow-mfb-overlay: 0px 40px 80px -20px color-mix(in srgb, #000000 50%, transparent);
  --ease-mfb-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-mfb-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-duration-mfb-fast: 180ms;
  --transition-duration-mfb-med: 320ms;
  --transition-duration-mfb-slide: 520ms;
  --transition-duration-mfb-reveal: 700ms;
  --container-mfb-page: 80rem;
  --container-mfb-wide: 90rem;
  --container-mfb-measure: 45rem;
}