stack-hack-site/style.css at draft1 · TAMU-ColorStack/stack-hack-site · 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
/* ==========================================================================
   Stack Hack 2026 — custom styles
   Fonts, caution-stripe pattern, hero decorative blobs, and small helpers
   that are awkward to express purely with Tailwind utility classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Web fonts
   The Figma references these families. Drop the matching files into
   assets/fonts/ (see assets/README.md). Until then the fallback stacks
   below keep the layout looking close.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Les Flos Sans";
  src: url("assets/fonts/LesFlosSans.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Les Flos Sage";
  src: url("assets/fonts/LesFlosSage.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Les Flos Chaos";
  src: url("assets/fonts/LesFlosChaos.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("assets/fonts/Metropolis-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("assets/fonts/Metropolis-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --maroon: #6b0000;
  --maroon-dark: #3a0000;
  --gold: #f0a500;
  --cream: #fdf4e7;
  --section-alt: #fff8f0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--cream);
}

/* Display font stacks (fallbacks until brand fonts are supplied) */
.font-display-sans {
  font-family: "Les Flos Sans", "Oswald", "Barlow Condensed", "Inter", sans-serif;
}
.font-display-sage {
  font-family: "Les Flos Sage", "Oswald", "Barlow Condensed", "Inter", sans-serif;
}
.font-display-chaos {
  font-family: "Les Flos Chaos", "Oswald", "Barlow Condensed", "Inter", sans-serif;
}
.font-condensed {
  font-family: "Barlow Condensed", "Oswald", "Inter", sans-serif;
}
.font-metropolis {
  font-family: "Metropolis", "Inter", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Hero decorative rounded squares ("blob field")
   -------------------------------------------------------------------------- */
.blob {
  position: absolute;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.open .faq-answer {
  max-height: 240px;
}
.faq-item.open .faq-toggle {
  transform: rotate(45deg);
}
.faq-toggle {
  transition: transform 0.25s ease;
}

/* --------------------------------------------------------------------------
   Hero blocks — gentle floating drift
   Animates the standalone `translate` property so it composes with each
   blob's inline `transform: rotate(...)` (rotation is preserved).
   -------------------------------------------------------------------------- */
@keyframes blobFloat {
  0%   { translate: 0 0; }
  50%  { translate: 6px -18px; }
  100% { translate: 0 0; }
}
.blob {
  animation: blobFloat 9s ease-in-out infinite;
  /* `translate` = floating drift (keyframes), `rotate` = inline rotation,
     `transform` = mouse parallax (set by JS) — three composable channels. */
  transition: transform 0.4s ease-out;
  will-change: translate, transform;
}
.blob:nth-child(1) { animation-duration: 11s; animation-delay: -2s; }
.blob:nth-child(2) { animation-duration: 8s;  animation-delay: -4s; }
.blob:nth-child(3) { animation-duration: 12s; animation-delay: -1s; }
.blob:nth-child(4) { animation-duration: 10s; animation-delay: -6s; }
.blob:nth-child(5) { animation-duration: 9s;  animation-delay: -3s; }
.blob:nth-child(6) { animation-duration: 7s;  animation-delay: -5s; }

/* --------------------------------------------------------------------------
   Scroll-reveal (elements fade + rise into view)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Respect reduced-motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}