Portfolio/tailwind.css at main · PreLabHomework/Portfolio · 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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
/* ============================================================
   TAILWIND V4 FOUNDATION (v10-W1)
   Preflight is deliberately not imported. styles.css and cv.css are
   unlayered legacy CSS, and unlayered rules outrank every layered rule
   regardless of specificity, so a preflight reset here could only change
   elements the legacy sheets do not already claim. Importing theme and
   utilities only keeps every unconverted component rendering untouched.
   ============================================================ */

/* Layer order is declared explicitly so it never depends on <link> order.
   legacy sits lowest: styles.css and cv.css open with @layer legacy, so
   Tailwind utilities can now override them. */
@layer legacy, theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

@source "./index.html";
@source "./cv.html";
@source "./cv.js";
@source "./js/**/*.js";

@theme {
  /* ── v11 Hero Info (Doctrine) ───────────────────────────── */
  --color-hi-name: #48d4f2;
  --color-hi-result: #ff8f3a;
  --color-hi-key: #f4c33d;
  --color-hi-bone: #eef2f6;
  --color-hi-dim: #a3aebd;
  --color-hi-ink: #070d18;
  --font-hi-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-hi-body: "Jost", "Futura", "Trebuchet MS", sans-serif;

  /* ── identity ───────────────────────────────────────────── */
  --color-acc: #f9a826;
  --color-acc2: #25c7f7;
  --color-ink: #08101a;

  /* Per-hero accents stay owned by js/data.js and arrive at runtime as
     --sec-acc / --sec-acc2 on the section element. These bridge tokens let
     Tailwind utilities consume that value instead of duplicating the pairs. */
  --color-hero: var(--screen-acc, var(--sec-acc, #f9a826));
  --color-hero2: var(--screen-acc2, var(--sec-acc2, #25c7f7));

  /* ── navy atmosphere ramp ───────────────────────────────── */
  --color-bg: #080d14;
  --color-panel: rgba(9, 15, 24, 0.72);
  --color-panel-strong: rgba(12, 19, 31, 0.92);
  --color-line: rgba(255, 255, 255, 0.16);
  --color-line-soft: rgba(255, 255, 255, 0.08);
  --color-text: #f5f8fd;
  --color-muted: #b9c3d1;
  --color-dim: #788497;
  --color-danger: #ff4b58;
  --color-ok: #22c55e;
  --color-petra-line: rgba(227, 146, 78, 0.28);
  --color-petra-glow: rgba(236, 129, 60, 0.24);

  /* ── type stacks ────────────────────────────────────────── */
  --font-display: "Oswald", "Bahnschrift Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --font-ui: "Inter Tight", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;

  /* ── OW label tracking ──────────────────────────────────── */
  --tracking-tab: 0.04em;
  --tracking-label: 0.18em;
  --tracking-kicker: 0.32em;
  --tracking-lock: 0.4em;

  /* ── motion, values taken from the shipped build ────────── */
  --ease-ow: cubic-bezier(0.2, 0.9, 0.18, 1);
  --ease-wipe-in: cubic-bezier(0.6, 0, 0.2, 1);
  --ease-wipe-out: cubic-bezier(0.8, 0, 0.55, 1);
  --motion-tap: 120ms;
  --motion-hover: 150ms;
  --motion-plate: 160ms;
  --motion-swap: 220ms;
  --motion-preview: 260ms;
  --motion-lock: 320ms;
  --motion-arrive: 420ms;
  --motion-flash: 520ms;
  --motion-rise: 560ms;

  /* ── cut geometry, one dialect ──────────────────────────── */
  --plate-cut-4: 4px;
  --plate-cut-7: 7px;
  --plate-cut-8: 8px;
  --plate-cut-9: 9px;
  --plate-cut-10: 10px;
  --plate-cut-12: 12px;
  --plate-cut-14: 14px;
  --notch-cut-10: 10px;
  --notch-cut-14: 14px;
  --notch-cut-16: 16px;
  --notch-cut-18: 18px;
  --notch-cut-28: 28px;
  --skew-ow: -14deg;
}

/* Parallelogram plate: top-left and bottom-right corners sheared. */
@utility plate-cut-* {
  --plate-cut-size: --value(--plate-cut-*);
  clip-path: polygon(
    var(--plate-cut-size) 0,
    100% 0,
    calc(100% - var(--plate-cut-size)) 100%,
    0 100%
  );
}

/* Notched plate: top-right and bottom-left corners chamfered. */
@utility notch-cut-* {
  --notch-cut-size: --value(--notch-cut-*);
  clip-path: polygon(
    0 0,
    calc(100% - var(--notch-cut-size)) 0,
    100% var(--notch-cut-size),
    100% 100%,
    var(--notch-cut-size) 100%,
    0 calc(100% - var(--notch-cut-size))
  );
}

@utility skew-ow {
  transform: skewX(var(--skew-ow));
}

/* v11 Hero Info: two effects Tailwind utilities cannot express cleanly */
@layer components {
  .hi-head-fill {
    background: linear-gradient(180deg, #ffffff 0%, #c9d2dc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .hi-ult {
    box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9),
      0 0 22px 6px color-mix(in srgb, var(--screen-acc, #f9a826) 55%, transparent),
      0 0 44px 8px color-mix(in srgb, var(--screen-acc, #f9a826) 28%, transparent);
  }
  @media (prefers-reduced-motion: no-preference) {
    .hi-ult { animation: hi-breathe 3.2s ease-in-out infinite; }
  }
}
@keyframes hi-breathe {
  50% {
    box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9),
      0 0 28px 8px color-mix(in srgb, var(--screen-acc, #f9a826) 70%, transparent),
      0 0 52px 12px color-mix(in srgb, var(--screen-acc, #f9a826) 34%, transparent);
  }
}

/* v12: columns only scroll as a last resort; keep the bar quiet */
@layer components {
  .hi-col { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.25) transparent; }
}

/* v13: roster badges match the hero page portrait hexagon */
@layer components {
  .slot-portrait .slot-hex {
    width: 50px; height: 56px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--slot-acc) 24%, #0a121e);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    transition: background-color 140ms ease;
  }
  .slot:hover .slot-portrait .slot-hex,
  .slot.is-active .slot-portrait .slot-hex { background: var(--slot-acc); }
  .slot-portrait svg.slot-gi { width: 28px; height: 28px; color: #fff; fill: currentColor; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.5)); }
  .slot-name { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 800; }

  /* roster preview panel: no boxes, labeled values like the hero pages */
  .preview h2 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 800; }
  .preview p, .preview .pv-sub { font-family: "Jost", "Futura", sans-serif; }
  .pv-stats { display: flex; flex-wrap: wrap; gap: 12px 30px; }
  .pv-stats .pv-stat, .pv-stat {
    background: none; border: 0; clip-path: none; box-shadow: none; padding: 0; transform: none;
    display: flex; flex-direction: column-reverse; gap: 2px;
  }
  .pv-stats .pv-stat:hover { transform: none; }
  .pv-stat span { font: 500 12px/1.25 "Jost", sans-serif; letter-spacing: 0; text-transform: none; color: #a3aebd; }
  .pv-stat strong { font: italic 800 24px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.01em; color: #fff; }
  .pv-tagline {
    background: none; clip-path: none; padding: 0;
    font: 600 13px/1.3 "Jost", sans-serif; letter-spacing: 0.02em; color: var(--acc);
  }
}