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
/* ============================================================
   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 {
  /* ── 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));
}