veriworkly/apps/portfolio/app/globals.css at 5c0403d9dfccfb93de6763258f440db8792cbed6 · VeriWorkly/veriworkly · 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
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5
 * genre: modern-minimal · macrostructure: Editorial product tour + Workbench · tone: structured confidence · anchor hue: blue
 * contrast: pass (46-50) · nav: N1 · footer: Ft1 · tokens: pass (58) · mobile: pass (36, 59, 61-69)
 */
@import "tailwindcss";
@import "./tokens.css";

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
}
.surface-grid {
  background-image:
    linear-gradient(to right, var(--color-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-line) 1px, transparent 1px);
  background-size: 28px 28px;
}
.paper-noise {
  background:
    radial-gradient(circle at 10% 0%, var(--color-accent-soft), transparent 26rem),
    var(--color-paper);
}
.reveal {
  animation: reveal var(--dur-slow) var(--ease-out) both;
}
.reveal-delay {
  animation-delay: 120ms;
}
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}
button:active,
a:active {
  opacity: 0.72;
}
button:disabled,
input:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
h1,
h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
  html,
  body {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}