TerraExplorer/index.css at main · webpmp/TerraExplorer · 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
/* TerraExplorer AI custom styles */
.font-garamond {
  font-family: 'EB Garamond', serif;
}

.parchment-drop-cap::first-letter {
  font-family: "IM Fell Double Pica", serif;
  float: left;
  font-size: 3rem; /* text-5xl approximate */
  line-height: 0.75;
  padding-top: 0.25rem; /* pt-1 */
  margin-right: 0.5rem; /* mr-2 */
  font-weight: bold;
  color: #8b5a2b;
}


/* ─── Section Header Inline Divider ───────────────────────────────────────── */
.info-panel-section-header {
  overflow: hidden;
}

.section-header-rule {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 1px;
  margin-right: -100%;
  margin-left: 0.5rem; /* gap-2 equivalent (8px) */
}

/* ─── Parchment panel stacking architecture ────────────────────────────────── */

.parchment-panel {
  position: relative;
  isolation: isolate;
}

.parchment-content {
  position: relative;
  z-index: 1;
}

/* ─── Parchment scrollbar hiding — preserves scrolling behavior while hiding scrollbar track & thumb ─ */

.parchment-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.parchment-scrollbar::-webkit-scrollbar {
  display: none;
}


/* ─── Parchment paper-effect background layer — shared across all parchment panels ─ */

.parchment-background {
  position: absolute;
  inset: 0;
  background-color: #f3e8cd;
  background-image:
    /* Fine paper grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='paperNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.08'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperNoise)' opacity='0.65'/%3E%3C/svg%3E"),
    /* Darker parchment perimeter */
    radial-gradient(
      ellipse at center,
      rgba(255, 250, 230, 0.08) 35%,
      rgba(125, 75, 25, 0.12) 65%,
      rgba(95, 55, 20, 0.28) 100%
    );
  box-shadow:
    inset 0 0 50px rgba(95, 55, 20, 0.30),
    inset 0 0 14px rgba(75, 45, 15, 0.22);
  filter: url(#tattered-deckle-edge);
  z-index: 0;
  pointer-events: none;
}

/*
  EDGE DUST
  Multiple warm parchment/sepia shades.
  Different particle sizes and shapes.
*/
.parchment-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    /* TOP EDGE */
    radial-gradient(ellipse 2px 1px at 4% 4%, rgba(88, 61, 32, 0.38) 0%, transparent 100%),
    radial-gradient(circle 1.2px at 10% 7%, rgba(125, 91, 52, 0.32) 0%, transparent 100%),
    radial-gradient(ellipse 3px 1.5px at 18% 3%, rgba(102, 70, 37, 0.30) 0%, transparent 100%),
    radial-gradient(circle 1.8px at 27% 6%, rgba(139, 103, 61, 0.34) 0%, transparent 100%),
    radial-gradient(ellipse 1px 2.5px at 36% 3%, rgba(78, 54, 29, 0.30) 0%, transparent 100%),
    radial-gradient(ellipse 4px 1.5px at 46% 5%, rgba(116, 80, 42, 0.28) 0%, transparent 100%),
    radial-gradient(circle 2.2px at 57% 3%, rgba(94, 65, 34, 0.34) 0%, transparent 100%),
    radial-gradient(ellipse 2px 3px at 67% 6%, rgba(136, 99, 56, 0.30) 0%, transparent 100%),
    radial-gradient(circle 1px at 78% 3%, rgba(72, 50, 27, 0.34) 0%, transparent 100%),
    radial-gradient(ellipse 3px 1px at 89% 5%, rgba(121, 86, 47, 0.30) 0%, transparent 100%),
    radial-gradient(circle 1.6px at 97% 4%, rgba(101, 69, 35, 0.36) 0%, transparent 100%),
    /* BOTTOM EDGE */
    radial-gradient(circle 2.5px at 5% 96%, rgba(111, 77, 40, 0.34) 0%, transparent 100%),
    radial-gradient(ellipse 3px 1px at 14% 98%, rgba(82, 57, 30, 0.30) 0%, transparent 100%),
    radial-gradient(ellipse 1px 3px at 24% 95%, rgba(137, 101, 59, 0.32) 0%, transparent 100%),
    radial-gradient(circle 1.2px at 35% 97%, rgba(102, 70, 36, 0.36) 0%, transparent 100%),
    radial-gradient(ellipse 4px 1.5px at 46% 95%, rgba(120, 84, 45, 0.28) 0%, transparent 100%),
    radial-gradient(circle 2.5px at 57% 98%, rgba(78, 54, 29, 0.34) 0%, transparent 100%),
    radial-gradient(ellipse 2px 1px at 68% 96%, rgba(143, 106, 63, 0.30) 0%, transparent 100%),
    radial-gradient(ellipse 1px 3px at 78% 98%, rgba(94, 65, 34, 0.34) 0%, transparent 100%),
    radial-gradient(circle 1.8px at 89% 95%, rgba(126, 91, 49, 0.32) 0%, transparent 100%),
    radial-gradient(ellipse 3px 1.5px at 97% 97%, rgba(87, 60, 31, 0.36) 0%, transparent 100%),
    /* LEFT EDGE & TOP-LEFT CORNER */
    radial-gradient(circle 1.5px at 1% 2%, rgba(105, 73, 38, 0.35) 0%, transparent 100%),
    radial-gradient(ellipse 2px 1.5px at 2.5% 8%, rgba(118, 82, 43, 0.32) 0%, transparent 100%),
    radial-gradient(circle 1.2px at 3% 15%, rgba(134, 98, 57, 0.30) 0%, transparent 100%),
    radial-gradient(ellipse 2px 3px at 5% 27%, rgba(90, 62, 32, 0.34) 0%, transparent 100%),
    radial-gradient(ellipse 3px 1px at 2% 40%, rgba(118, 82, 43, 0.32) 0%, transparent 100%),
    radial-gradient(circle 1.7px at 4% 53%, rgba(143, 106, 63, 0.28) 0%, transparent 100%),
    radial-gradient(ellipse 1px 3px at 2% 66%, rgba(82, 57, 30, 0.36) 0%, transparent 100%),
    radial-gradient(circle 2.2px at 5% 81%, rgba(109, 75, 39, 0.32) 0%, transparent 100%),
    /* RIGHT EDGE */
    radial-gradient(ellipse 2px 1px at 97% 18%, rgba(96, 66, 34, 0.36) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 95% 31%, rgba(137, 101, 59, 0.30) 0%, transparent 100%),
    radial-gradient(ellipse 3px 2px at 98% 44%, rgba(113, 78, 41, 0.34) 0%, transparent 100%),
    radial-gradient(circle 1px at 96% 57%, rgba(77, 53, 28, 0.36) 0%, transparent 100%),
    radial-gradient(ellipse 2px 3px at 98% 71%, rgba(128, 93, 51, 0.32) 0%, transparent 100%),
    radial-gradient(ellipse 4px 1px at 95% 84%, rgba(101, 69, 36, 0.30) 0%, transparent 100%);
  opacity: 0.95;
  pointer-events: none;
}

/*
  Larger, softer discoloration.
*/
.parchment-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 8px 6px at 2% 3%, rgba(95, 65, 32, 0.12) 0%, transparent 100%),
    radial-gradient(ellipse 12px 5px at 7% 12%, rgba(105, 73, 38, 0.10) 0%, transparent 100%),
    radial-gradient(ellipse 6px 11px at 94% 24%, rgba(139, 101, 58, 0.075) 0%, transparent 100%),
    radial-gradient(ellipse 17px 5px at 12% 91%, rgba(82, 57, 30, 0.085) 0%, transparent 100%),
    radial-gradient(ellipse 6px 15px at 88% 88%, rgba(119, 83, 44, 0.09) 0%, transparent 100%),
    radial-gradient(ellipse 11px 4px at 52% 3%, rgba(151, 111, 66, 0.075) 0%, transparent 100%);
  pointer-events: none;
}