1/* Gallery - Renaissance Edition */
2
3.skills-section {
4 position: relative;
5 padding: var(--spacing-xl) 0;
6 overflow: hidden;
7 background: var(--color-bg);
8}
9
10.skills-gallery {
11 display: block; /* Override grid from previous version */
12 position: relative;
13}
14
15/* The horizontal track */
16.gallery-track {
17 display: flex;
18 gap: var(--spacing-lg);
19 overflow-x: auto;
20 scroll-snap-type: x mandatory;
21 padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl);
22 -webkit-overflow-scrolling: touch;
23 scrollbar-width: none; /* Firefox */
24 cursor: grab;
25}
26
27.gallery-track:active {
28 cursor: grabbing;
29}
30
31.gallery-track::-webkit-scrollbar {
32 display: none; /* Chrome */
33}
34
35/* The Art Frame */
36.gallery-frame {
37 flex: 0 0 80vw;
38 max-width: 1100px;
39 scroll-snap-align: center;
40 position: relative;
41 background: var(--color-paper);
42 border: 1px solid var(--color-mist);
43 box-shadow:
44 0 4px 6px -1px rgba(0, 0, 0, 0.05),
45 0 20px 50px -10px rgba(0, 0, 0, 0.1);
46 border-radius: 2px; /* Sharp, like a frame */
47 overflow: hidden;
48 opacity: 0.4;
49 transform: scale(0.95);
50 transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
51}
52
53/* Active State (Center) */
54.gallery-frame.active {
55 opacity: 1;
56 transform: scale(1);
57 box-shadow:
58 0 20px 25px -5px rgba(0, 0, 0, 0.1),
59 0 40px 100px -20px rgba(0, 0, 0, 0.2);
60 border-color: var(--color-charcoal);
61 border-width: 1px;
62}
63
64/* Frame Content Layout */
65.gallery-content {
66 display: grid;
67 grid-template-columns: 1.2fr 1fr;
68 height: 600px; /* Fixed height for consistency */
69}
70
71@media (max-width: 900px) {
72 .gallery-frame {
73 flex: 0 0 90vw;
74 }
75 .gallery-content {
76 grid-template-columns: 1fr;
77 height: auto;
78 min-height: 600px;
79 }
80}
81
82/* Visual Side (Demo) */
83.gallery-visual {
84 background: var(--color-cream);
85 border-right: 1px solid var(--color-mist);
86 position: relative;
87 overflow: hidden;
88 display: flex;
89 align-items: center;
90 justify-content: center;
91 padding: var(--spacing-lg);
92}
93
94/* Info Side */
95.gallery-info {
96 padding: var(--spacing-xl);
97 display: flex;
98 flex-direction: column;
99 overflow-y: auto;
100}
101
102.gallery-header {
103 margin-bottom: var(--spacing-lg);
104}
105
106.gallery-title {
107 font-family: var(--font-display);
108 font-size: 2.5rem;
109 font-style: italic;
110 margin: 0 0 var(--spacing-xs);
111 color: var(--color-ink);
112}
113
114.gallery-meta {
115 font-family: var(--font-mono);
116 font-size: 0.75rem;
117 text-transform: uppercase;
118 letter-spacing: 0.1em;
119 color: var(--color-ash);
120}
121
122.gallery-desc {
123 font-size: 1.125rem;
124 line-height: 1.6;
125 color: var(--color-charcoal);
126 margin-bottom: var(--spacing-xl);
127 max-width: 45ch;
128}
129
130/* Tags within frame */
131.gallery-tags {
132 display: flex;
133 flex-wrap: wrap;
134 gap: var(--spacing-xs);
135 margin-top: auto;
136}
137
138.gallery-tag {
139 padding: 6px 12px;
140 border: 1px solid var(--color-mist);
141 border-radius: 4px;
142 font-size: 0.8125rem;
143 color: var(--color-ash);
144}
145
146/* Map Navigation */
147.gallery-map {
148 display: flex;
149 justify-content: center;
150 gap: 8px;
151 margin-top: var(--spacing-lg);
152}
153
154.gallery-dot {
155 width: 40px;
156 height: 2px;
157 background: var(--color-mist);
158 cursor: pointer;
159 transition: all 0.3s ease;
160 position: relative;
161 border: none;
162 padding: 0;
163 font: inherit;
164}
165
166.gallery-dot::after {
167 content: '';
168 position: absolute;
169 top: -10px;
170 bottom: -10px;
171 left: 0;
172 right: 0;
173}
174
175.gallery-dot:focus-visible {
176 outline: 2px solid var(--color-accent);
177 outline-offset: 4px;
178 border-radius: 1px;
179}
180
181.gallery-dot.active {
182 background: var(--color-accent);
183 height: 4px;
184}