-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyles.css
380 lines (361 loc) · 17.5 KB
/
styles.css
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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
@font-face {
font-family: 'Inter var experimental';
font-display: swap;
font-weight: 100 900;
font-style: oblique 0deg -10deg;
src: url("fonts/Inter.var.woff2") format("woff2-variations"),
url("fonts/Inter.var.woff2") format("woff2");
}
/* https://zahidco.com/jotun-shade-card */
/* https://www.jotun.com/dk/da/b2c/colour-inspiration/colours/ */
/* https://lady.inspirasjonsblogg.jotun.no/bli-kjent-med-de-nye-gronnfargene/ */
/* https://www.jotun.com/me/en/decorative/interior/colours/colourcards/jotun-colour-collection-identity */
:root {
/* white */
--jotun-7236-chi: #f3f4ee; /* https://www.jotun.com/dk/da/decorative/interior/colours/7236-jazz-white-interior */
--jotun-9917-klassiskhvit: #f0efe9; /* https://www.jotun.com/dk/da/decorative/interior/colours/9918-classic-white-interior */
--jotun-1624-letthet: #f2f1e8; /* https://www.jotun.com/dk/da/decorative/interior/colours/1624-skylight-interior */
--jotun-8282-hvitpepper: #e4e2d6; /* https://www.jotun.com/dk/da/b2c/colour-inspiration/colours/interior/2930001117001791_Interior.aspx */
--jotun-8395-hvitkomfort: #ebe9de; /* https://www.jotun.com/dk/da/b2c/colour-inspiration/colours/interior/2930002214401791_Interior.aspx */
--jotun-1376-perle: #e4e0d3; /* https://www.jotun.com/dk/da/decorative/interior/colours/1376-mist-interior */
/* greige and gray */
--jotun-1928-sommersne: #e4e2d7; /* rgb(228,226,215) https://www.jotun.com/dk/da/decorative/interior/colours/1928-summer-snow-interior */
--jotun-1024-tidslos: #e0ddd2; /* https://www.jotun.com/dk/da/decorative/interior/colours/1024-timeless-interior */
--jotun-8394-hvitpoesi: #dfdfd7; /* rgb(223,223,215) https://www.jotun.com/dk/da/decorative/interior/colours/8394-white-poetry-interior */
--jotun-1027-dempet: #d4d3cb; /* https://www.jotun.com/dk/da/b2c/colour-inspiration/colours/interior/1100150200501791_Interior.aspx */
--jotun-1391-lysklitgra: #d4d3c8; /* https://www.jotun.com/dk/da/decorative/interior/colours/1391-bare-interior */
--jotun-8470-smoothwhite: #cecbc0; /* https://www.interiorbutikker.no/l/a10-hjem-malt-i-jotun-smooth-white-8470/ https://www.jotun.com/dk/da/decorative/interior/colours/8470-smooth-white-interior */
--jotun-1973-antikgra: #bebcb2; /* https://www.jotun.com/dk/da/decorative/interior/colours/1973-objective-interior */
--jotun-10182-hvitlin: #cfcac1; /* https://www.jotun.com/no/no/decorative/interior/colours/10182-white-linen-interior */
--jotun-9904-skumring: #e1e1dd; /* https://www.jotun.com/dk/da/decorative/interior/colours/9904-twilight-interior */
--jotun-2098-streif: #d5d5d2; /* https://www.jotun.com/dk/da/b2c/colour-inspiration/colours/interior/1100000144501791_Interior.aspx */
--jotin-9915-morgendis: #d4d4cf; /* https://www.jotun.com/dk/da/decorative/interior/colours/9915-oxford-river-interior */
--jotun-0520-empire: #cbcbc8; /* https://www.jotun.com/dk/da/b2c/colour-inspiration/colours/interior/1904000002001791_Interior.aspx */
--jotun-1877-valmuefro: #96938b; /* https://www.jotun.com/dk/da/decorative/interior/colours/1877-pebblestone-interior */
--jotun-8256-koksgra: #65665f; /* https://www.jotun.com/dk/da/b2c/colour-inspiration/colours/exterior/1907000010601791_Exterior.aspx */
--jotun-1462-graskifer: #84817a; /* https://www.jotun.com/dk/da/decorative/interior/colours/1462-evening-sky-interior */
/* mint */
--jotun-7237-nostalgi: #d2ddca; /* rgb(210,221,202) https://www.jotun.com/dk/da/b2c/colour-inspiration/colours/interior/1100000025101791_Interior.aspx */
--jotun-8238-pearsensation: #dbdfc4; /* https://www.jotun.com/me/en/decorative/exterior/colours/8238-8238 */
/* alive */
--jotun-8118-lovsal: #c5c6b8; /* https://www.jotun.com/dk/da/decorative/interior/colours/8118-crisp-interior */
--jotun-8281-palelinden: #c6c6b6; /* https://www.jotun.com/no/no/decorative/interior/colours/8281-pale-linden-interior */
--jotun-7626-airygreen: #d8dbcf; /* https://www.jotun.com/no/no/decorative/interior/colours/7626-airy-green-interior */
--jotun-7627-refresh: #cacfc3; /* https://www.jotun.com/me/en/decorative/interior/colours/7627-refresh-interior */
--jotun-7637-exhale: #b7bdb3; /* https://www.jotun.com/dk/da/decorative/interior/colours/7637-exhale-interior */
--jotun-7555-softmint: #c9d0c5; /* https://www.jotun.com/dk/da/decorative/interior/colours/7555-soft-mint-interior */
--jotun-7053-lærdal: #aaac9b; /* https://www.jotun.com/dk/da/decorative/exterior/colours/7053-laerdal-exterior */
--jotun-7628-treasure: #a3a798; /* https://www.jotun.com/me/en/decorative/interior/colours/7628-treasure-interior */
--jotun-6350-softteal: #9aa49e; /* https://www.jotun.com/dk/da/decorative/interior/colours/6350-soft-teal-interior */
--jotun-7629-antiquegreen: #8a8f81; /* https://www.jotun.com/me/en/decorative/interior/colours/7629-antique-green-interior */
--jotun-8222-krydderurt: #cac5a9; /* https://www.jotun.com/dk/da/decorative/interior/colours/8222-jurassic-grey-interior */
--jotun-8303-hvitlyng: #d7d3c1; /* https://www.jotun.com/dk/da/decorative/interior/colours/8303-white-heather-interior */
--jotun-8003-blekvier: #e3e1d0; /* https://www.jotun.com/dk/da/decorative/interior/colours/8003-peppermint-interior */
--jotun-8109-aprilgron: #a4a178; /* https://www.jotun.com/dk/da/decorative/interior/colours/8109-april-green-interior */
--jotun-8493-greentea: #9f9b7c; /* https://www.jotun.com/dk/da/decorative/interior/colours/8493-green-tea-interior */
--jotun-8565-hope: #afad88; /* https://www.jotun.com/dk/da/decorative/interior/colours/8565-hope-interior */
--jotun-8302-lauerbaer: #b0ae96; /* https://www.jotun.com/no/no/decorative/interior/colours/8302-laurel-interior */
--jotun-8426-dewygreen: #989a89; /* https://www.jotun.com/dk/da/decorative/exterior/colours/8426-dewy-green-exterior */
--jotun-1369-sol: ##ebd2a3; /* https://www.jotun.com/dk/da/decorative/interior/colours/1369-sun-interior */
/* misc */
--jotun-1832-skandinavisklys: #e7dfcd; /* https://www.jotun.com/no/no/decorative/interior/colours/1832-milky-way-interior */
--jotun-8279-haze: #c7c9c2; /* https://www.jotun.com/dk/da/b2c/colour-inspiration/colours/interior/2930000632801791_Interior.aspx */
--jotun-1926-snedrabe: #c8c6bc; /* https://www.jotun.com/dk/da/b2c/colour-inspiration/colours/interior/2930000634401791_Interior.aspx */
--jotun-5081-fabrikk: #bbc0c0; /* https://www.jotun.com/dk/da/b2c/colour-inspiration/colours/interior/1100000157001791_interior.aspx */
--jotun-9911-neutral: #bdbdb9; /* https://www.jotun.com/dk/da/decorative/interior/colours/9911-platinum-interior */
--jotun-9913-matrix: #7b7a79; /* https://www.jotun.com/dk/da/decorative/interior/colours/9913-matrix-interior */
--jotun-4744-sophisticatedblue: #454a4d; /* https://www.jotun.com/dk/da/decorative/interior/colours/4744-sophisticated-blue-interior */
--jotun-9938-dempetsort: #494948; /* https://www.jotun.com/dk/da/decorative/interior/colours/9938-blackened-black-interior */
--jotun-1877-valmuefro: #96938b; /* https://www.jotun.com/dk/da/decorative/interior/colours/1877-pebblestone-interior */
--jotun-10249-sober: #79736d; /* https://www.jotun.com/dk/da/decorative/interior/colours/10249-vandyke-brown-interior */
--jotun-1434-elegant: #605d58; /* https://www.jotun.com/dk/da/decorative/interior/colours/1434-elegant-interior */
--jotun-6325-balance: #717e79; /* https://www.jotun.com/dk/da/decorative/interior/colours/6325-balance-interior */
--jotun-1927-kjerne: #d1cec6; /* https://www.jotun.com/dk/da/decorative/interior/colours/1927-stone-interior */
--ncs-2502b-veddingegra: #b2b7ba; /* https://ncscolour.com/product/s-2502-b/ AND https://www.pinterest.com/pin/314759461457483262/ */
--jotun-1875-sans: #e6dfce; /* https://www.jotun.com/dk/da/decorative/interior/colours/1875-sense-interior */
--jotun-1276-soft: #dcd1ba; /* https://www.jotun.com/dk/da/decorative/interior/colours/1276-soft-interior */
--jotun-0486-silke: #eae7db; /* https://www.jotun.com/dk/da/decorative/interior/colours/0486-early-rain-interior */
--jotun-12125-impression: #bba78e; /* https://www.jotun.com/no/no/decorative/interior/colours/12125-impression-interior */
--jotun-11174-curiousmind: #b7a992; /* https://www.jotun.com/dk/da/decorative/interior/colours/11174-curious-mind-interior */
--jotun-10246-velvet: #d6bd90; /* https://www.jotun.com/me/en/decorative/interior/colours/10246-velvet-interior */
--jotun-1624-skylight: #f2f1e8; /* https://www.jotun.com/me/en/decorative/interior/colours/1624-skylight-interior */
--jotun-6378-iconic: #a1aba6; /* https://www.jotun.com/dk/da/decorative/interior/colours/6378-iconic-interior */
--jotun-6379-cityscape: #8c9893; /* https://www.jotun.com/dk/da/decorative/interior/colours/6379-cityscape-interior */
--jotun-12123-contemporarywhite: #e1daca; /* https://www.jotun.com/dk/da/decorative/interior/colours/12123-contemporary-white-interior */
--jotun-1624-letthet: #f2f1e8; /* https://www.jotun.com/dk/da/decorative/interior/colours/1624-skylight-interior */
--jotun-5503-naturalblue: #88959a; /* https://www.jotun.com/dk/da/decorative/interior/colours/5503-natural-blue-interior */
--jotun-4894-oceanair: #9daaaf; /* https://www.jotun.com/me/en/decorative/interior/colours/4894-ocean-air-interior */
--jotun-5452-nordicbreeze: #bbc6c8; /* https://www.jotun.com/dk/da/decorative/interior/colours/5452-nordic-breeze-interior */
--jotun-8478-palegreen: #babaa5; /* https://www.jotun.com/no/no/decorative/interior/colours/8478-pale-green-interior */
--jotun-20119-transparentpink: #dacec0; /* https://www.jotun.com/dk/da/decorative/interior/colours/20119-transparent-pink-interior */
--jotun-12806-rusticpink: #cab7a7; /* https://www.jotun.com/dk/da/decorative/interior/colours/12086-rustic-pink-interior */
--jotun-12120-desertpink: #bf9f86; /* https://www.jotun.com/me/en/decorative/interior/colours/12120-desert-pink-interior */
--jotun-12083-devine: #d2bea9; /* https://www.jotun.com/me/en/decorative/interior/colours/12083-devine-interior */
--jotun-2024-senses: #bea795; /* https://www.jotun.com/dk/da/decorative/interior/colours/2024-senses-interior */
--jotun-2511-moerkkvarts: #bcaba3; /* https://www.jotun.com/dk/da/b2c/colour-inspiration/colours/interior/2930001177501791_Interior.aspx */
--jotun-2202-sukkertop: #b9ada7; /* https://www.jotun.com/no/no/b2c/colour-inspiration/colours/interior/1100300500901791_Interior.aspx */
--jotun-7626-airygreen: #d8dbcf; /* https://www.jotun.com/dk/da/decorative/interior/colours/7626-airy-green-interior */
--jotun-1462-eveningsky: #84817a; /* https://www.jotun.com/me/en/decorative/exterior/colours/1462-evening-sky */
--jotun-1233-mohair: #a49a8b; /* https://www.jotun.com/dk/da/decorative/interior/colours/1233-mohair-interior */
--jotun-10678-space: #d6cfbf; /* https://www.jotun.com/dk/da/decorative/interior/colours/10678-space-interior */
--jotun-1303-observe: #cebda2; /* https://www.jotun.com/dk/da/decorative/interior/colours/1303-observe-interior */
--jotun-12075-soothingbeige: #cac0af; /* https://www.jotun.com/dk/da/decorative/interior/colours/12075-soothing-beige-interior */
--jotun-12076-modernbeige: #bfb3a3; /* https://www.jotun.com/dk/da/decorative/interior/colours/12076-modern-beige-interior */
--jotun-12079-gleam: #e4dbc4; /* https://www.jotun.com/me/en/decorative/interior/colours/12079-gleam-interior */
--jotun-12080-softradience: #d9ccaf; /* https://www.jotun.com/me/en/decorative/interior/colours/12080-soft-radiance-interior */
--jotun-12176-silhouette: #bfb49c; /* https://www.jotun.com/no/no/decorative/interior/colours/12126-silhouette-interior */
--jotun-11174-curiousmind: ##b7a992; /* https://www.jotun.com/dk/da/decorative/interior/colours/11174-curious-mind-interior */
--jotun-11173-humbleyellow: #d3c5ab; /* https://www.jotun.com/dk/da/decorative/interior/colours/11173-humble-yellow-interior */
--jotun-10961-rawcanvas: #beaf97; /* https://www.jotun.com/dk/da/decorative/interior/colours/10961-raw-canvas-interior */
--jotun-10679-washedlinen: #c9c3b6; /* https://www.jotun.com/dk/da/decorative/interior/colours/10679-washed-linen-interior */
--jotun-10341-kalk: #d9d3c7; /* https://www.jotun.com/dk/da/decorative/interior/colours/10341-limestone-interior */
--jotun-1622-reflection: #ebe9e1; /* https://www.jotun.com/me/en/decorative/interior/colours/1622-reflection-interior */
--jotun-1931-kokos: #e3ddcd; /* https://www.jotun.com/dk/da/b2c/colour-inspiration/colours/interior/2930001566001791_Interior.aspx */
--jotun-10341-kalk: #d9d3c7; /* https://www.jotun.com/dk/da/decorative/interior/colours/10341-limestone-interior */
--jotun-9938-dempetsort: #494948; /* https://www.jotun.com/dk/da/decorative/exterior/colours/9938-dempet-sort-exterior */
--jotun-12182-gentlewhisper: #d2cbbf; /* https://www.jotun.com/dk/da/decorative/interior/colours/12182-gentle-whisper-interior */
}
:root {
--gangen: var(--jotun-1928-sommersne);
--gangen-light: var(--jotun-7236-chi);
--allroom: var(--jotun-1024-tidslos);
--allroom-dark: var(--jotun-10679-washedlinen);
--allroom-light: var(--jotun-7236-chi);
--allroom-accent: var(--jotun-7237-nostalgi);
--stuen: var(--jotun-12123-contemporarywhite);
--stuen-dark: var(--jotun-12075-soothingbeige);
--stuen-dark: var(--jotun-11173-humbleyellow);
--stuen-dark: var(--jotun-12176-silhouette);
--stuen-light: var(--jotun-0486-silke);
--kajs: var(--jotun-8118-lovsal);
--kajs-dark: var(--jotun-6379-cityscape);
--kajs-light: var(--jotun-8303-hvitlyng);
--fars: var(--jotun-8470-smoothwhite);
--fars-dark: var(--jotun-1877-valmuefro);
--fars-light: var(--jotun-8394-hvitpoesi);
--lokum: var(--jotun-10341-kalk);
--lokum-light: var(--jotun-9917-klassiskhvit);
}
:root {
--dark: var(--jotun-9938-dempetsort);
--height: 100vh; /* tweaked JS */
}
.gangen {
background-color: var(--gangen);
}
.allroom {
background-color: var(--allroom);
}
.stuen {
background-color: var(--stuen);
}
.kajs {
background-color: var(--kajs);
}
.kajs-alt1 {
background-color: var(--kajs-alt1);
}
.kajs-alt2 {
background-color: var(--kajs-alt2);
}
.kajs-alt3 {
background-color: var(--kajs-alt3);
}
.lokum {
background-color: var(--lokum);
}
.fars {
background-color: var(--fars);
}
/* .......................................................................... */
*,
*:before,
*:after {
box-sizing: content-box;
}
html,
body,
main {
margin: 0;
padding: 0;
overflow: hidden;
height: var(--height);
}
body {
font-family: "Inter var experimental", sans-serif;
color: var(--dark);
}
main {
overflow-y: scroll;
overflow-x: hidden;
scroll-snap-type: y mandatory;
}
section {
position: relative;
min-height: var(--height);
scroll-snap-align: center;
}
section:not(:first-child) {
border-top: 1px solid var(--dark);
}
nav {
display: grid;
min-height: var(--height);
grid-template-columns: 1fr 1fr 1fr;
background-color: var(--dark);
list-style: none;
grid-column-gap: 1px;
grid-row-gap: 1px;
}
nav a {
text-decoration: none;
position: relative;
color: var(--dark);
font-size: 24px;
}
nav a span {
position: absolute;
bottom: 12%;
right: 12%;
}
img {
display: block;
}
.photo {
display: inline-block;
box-shadow: 8px 8px 24px rgba(0,0,0,0.25);
border-radius: 2px;
padding: 20px;
position: absolute;
z-index: 1;
bottom: calc(0.1 * var(--height));
right: 10vw;
margin: 0;
}
.photo img {
object-fit: cover;
}
.photo figcaption {
white-space: nowrap;
padding-top: 20px;
text-align: right;
font-size: 0;
}
.photo button {
appearance: none;
display: inline-block;
color: var(--dark);
font-family: inherit;
background-color: transparent;
border: 1px solid transparent;
border-radius: 2px;
padding: 4px 10px;
font-size: 16px;
}
.photo button.mark {
border-color: var(--jotun-4894-oceanair);
}
.photo picture,
.photo picture img {
min-width: 100%;
max-width: 40vw;
max-height: calc(calc(0.8 * var(--height)) - 80px);
border-radius: 2px;
}
.photo picture + picture {
display: none;
}
section:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 31.8vw;
}
section.gangen .photo {
background-color: var(--gangen-light);
}
section.allroom .photo {
background-color: var(--allroom-light);
}
section.allroom:before {
background-color: var(--allroom-dark);
}
section.stuen:before {
background-color: var(--stuen-dark);
}
section.stuen .photo {
background-color: var(--stuen-light);
}
section.kajs .photo {
background-color: var(--kajs-light);
}
section.kajs-alt .photo {
background-color: var(--kajs-alt-light);
}
section.kajs-alt1 .photo {
background-color: var(--kajs-alt1-light);
}
section.kajs-alt2 .photo {
background-color: var(--kajs-alt2-light);
}
section.kajs-alt3 .photo {
background-color: var(--kajs-alt3-light);
}
section.fars .photo {
background-color: var(--fars-light);
}
section.lokum .photo {
background-color: var(--lokum-light);
}
section.kajs:before {
background-color: var(--kajs-dark);
}
section.kajs-alt:before {
background-color: var(--kajs-alt-dark);
}
section.kajs-alt1:before {
background-color: var(--kajs-alt1-dark);
}
section.kajs-alt2:before {
background-color: var(--kajs-alt2-dark);
}
section.kajs-alt3:before {
background-color: var(--kajs-alt3-dark);
}
section.fars:before {
background-color: var(--fars-dark);
background-image: url('images/kirkenes.webp');
background-repeat: repeat-y;
background-size : contain;
}
section.kajs:before,
section.kajs-alt1:before,
section.kajs-alt2:before,
section.kajs-alt3:before {
background-image: url('images/akustikpanel.webp');
background-repeat: repeat-y;
background-size: contain;
background-position: -8px 0;
}
section.kajs-alt1,
section.kajs-alt2,
section.kajs-alt3 {
display: none;
}
.toggle {
position: absolute;
top: 1vw;
right: 1vw;
appearance: none;
display: inline-block;
color: var(--dark);
font-family: inherit;
background-color: transparent;
border: 1px solid transparent;
border-radius: 2px;
padding: 4px 10px;
font-size: 16px;
cursor: pointer;
padding: 8px 12px;
}