-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathvariables.css
133 lines (105 loc) · 3.47 KB
/
variables.css
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
body {
/*----- LOADING SCREEN -----*/
--Loading-Screen-FadeOut-Speed:400ms; /* ms only, no s */
/*----- HEADINGS -----*/
--Heading-Size-S: 0.75rem;
--Heading-Size-M: 1.25rem;
--Heading-Size-L: 1.375rem;
--Heading-Size-XL: 2rem;
--Heading-Size-XXL: 2.5rem;
--Heading-Size-XXXL: 3rem;
--Heading-Letter-Spacing:0px;
/*----- BODY TEXT -----*/
font-family: bodyFont;
--Body-Text-S: 0.75rem;
--Body-Text-M: 0.875rem;
--Body-Text-L: 1rem;
--Body-Text-Letter-Spacing-XS:0.02em;
--Body-Text-Letter-Spacing-S:0.03em;
--Body-Text-Letter-Spacing-M:0.06em;
/*----- LINE HEIGHT -----*/
--Line-Height-XS: 1;
--Line-Height-S: 1.2;
--Line-Height-M: 1.5;
--Line-Height-L: 1.8;
/*----- COLORS -----*/
--Text-Color-1:#000;
--Text-Color-2:#313131;
--Text-Color-3:#939393;
--Text-Color-4: #6D6D6D;
--Nav-Links-Color:#464646;
--Background-1: #fff;
--Background-1-RGB: 255, 255, 255;
--Background-2: #e8e8e8;
--Background-2-RGB: 232, 232, 232;
--Accent-1: #411e94; /* dark purple */
--Accent-1-RGB: 65,30,148;
--Accent-2: #89C4C9; /* light blue */
--Accent-2-RGB: 137,196,201;
--Line-Color: #e6e6e6 ;
--Off-White: #F9F9F9;
/*----- GLOBAL SETTINGS -----*/
--Rainbow-Borders-Width: 3px;
--Rainbow-Borders-Width-XL: 10px;
/*----- LAYOUT SETTINGS -----*/
--Screen-Margin-Y: 8vh;
--Screen-Margin-X: 9vw;
--Container-Width: 66.4vw;
/*----- TOP BAR -----*/
--Nav-Logo-Width: 160px;
--Nav-Links-Touch-Padding: 10px;
--Nav-Links-Spacing: 3.75rem;
/*----- HEADER -----*/
--Header-Height: calc(var(--Container-Width) * 0.6);
--Header-Border-Radius:50px;
--Header-Inner-Margins: 48px;
--Header-Text-Row-Spacing: 2rem;
--Header-Text-Translate: 80px;
/*----- SECTION: GAPS -----*/
--Sections-Divider-Width:83vw;
--Sections-Spacing-Y:5rem;
--Sections-Max-Width: 933px;
/*----- SECTION: FEATURES -----*/
--Features-Grid-Top-Gap:2rem;
--Features-Grid-Width:75vw;
--Features-Spacing:2.3rem;
--Features-Border-Radius:20px;
--Features-Box-Padding:1.4rem;
--Features-Front-Image-Height:6rem;
--Features-Flip-Speed:0.75s;
/*----- SECTION: VIDEO -----*/
--Video-Gradient-Width:72.5694444vw;
--Video-Gradient-Border-Radius:50px;
--Video-Left-Gap:-7vw;
--Video-Vertical-Gap:3.5rem;
--Video-Width:54vw;
--Video-Border-Radius:20px;
--Video-Avatar-Width:5.5rem;
--Video-Hover-Speed:0.3s;
/*----- SECTION: TEAM -----*/
--Team-Section-Width:var(--Container-Width);
--Team-Section-Top-Gap:2rem;
--Team-Grid-Spacing-X:4rem;
--Team-Grid-Spacing-Y:4rem;
--Team-Photos-Size:7rem;
--Team-Photos-Hover-Speed:0.25s;
--Team-Photos-And-Text-Spacing:1rem;
--Team-Link-Icons-Size:var(--Heading-Size-L);
/*----- FOOTER -----*/
--Footer-Padding-X:7.5rem;
--Footer-Padding-Y:5rem;
--Footer-BG:#1E1E1E;
--Footer-Text:#fff;
--Footer-Tagline-Width:25%;
--Footer-Quote-Mark-Width:calc(var(--Heading-Size-XXL));
--Footer-Column-Spacing: 8vw;
--Contact-Form-Fields-Width:234px;
--Contact-Form-Fields-Padding-X:1.8em;
--Contact-Form-Fields-Padding-Y:0.8em;
--Contact-Form-Fields-Spacing:1rem;
--Contact-Form-Fields-Right-Gap:2.5rem;
--Contact-Form-Logo-Width: 150px;
--Contact-Form-Button-Width:100px;
--Contact-Form-Button-Padding-X:0.420em;
--Contact-Form-Button-Padding-Y:0.420em;
}