bluesalon-new-simple/Blue Salon - Editorial Concept.dc.html at main · lalm648/bluesalon-new-simple · 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
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
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap">
<link rel="stylesheet" href="_ds/blue-salon-design-system-2e96cc8e-316e-4712-8b81-ecf6a8190b5f/tokens/fonts.css">
<link rel="stylesheet" href="_ds/blue-salon-design-system-2e96cc8e-316e-4712-8b81-ecf6a8190b5f/tokens/colors.css">
<link rel="stylesheet" href="_ds/blue-salon-design-system-2e96cc8e-316e-4712-8b81-ecf6a8190b5f/tokens/typography.css">
<link rel="stylesheet" href="_ds/blue-salon-design-system-2e96cc8e-316e-4712-8b81-ecf6a8190b5f/tokens/spacing.css">
<link rel="stylesheet" href="_ds/blue-salon-design-system-2e96cc8e-316e-4712-8b81-ecf6a8190b5f/tokens/elevation.css">
<style>
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: #faf8f4;
    color: #36414e;
    font-family: "Qatar", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .bs-serif { font-family: "Cormorant Garamond", Georgia, serif; }
  ::selection { background: rgba(194,162,94,.25); }
  @keyframes bsFade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes bsFadeIn { from { opacity: 0; } to { opacity: 1; } }
  input::placeholder { color: #a7b0bb; }
</style>
</helmet>

<div style="background:#faf8f4; min-height:100vh; overflow-x:hidden;">

  <!-- ============ HERO VARIATION SWITCHER (design tool) ============ -->
  <div style="position:fixed; left:50%; transform:translateX(-50%); bottom:24px; z-index:120; display:flex; align-items:center; gap:2px; background:#ffffff; border:1px solid rgba(194,162,94,.40); border-radius:999px; padding:8px 10px 8px 16px; box-shadow:0 10px 30px rgba(0,42,87,.14); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;">
    <span style="color:#9aa3ad; padding-right:14px; border-right:1px solid #e2e7ec; margin-right:6px;">Hero</span>
    <button onClick="{{ heroA }}" style="{{ swA }}">Full&nbsp;bleed</button>
    <button onClick="{{ heroB }}" style="{{ swB }}">Split</button>
    <button onClick="{{ heroC }}" style="{{ swC }}">Magazine</button>
  </div>

  <!-- ============ SEARCH OVERLAY ============ -->
  <sc-if value="{{ searchOpen }}">
    <div style="position:fixed; inset:0; z-index:300;">
      <div onClick="{{ closeSearch }}" style="position:absolute; inset:0; background:rgba(14,23,34,.32);"></div>
      <div style="position:relative; background:#faf8f4; padding:54px 0 64px; border-bottom:1px solid rgba(194,162,94,.30);">
        <div style="max-width:1320px; margin:0 auto; padding:0 48px;">
          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
            <span style="font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#9a7b3f;">Search</span>
            <button onClick="{{ closeSearch }}" aria-label="Close" style="background:none; border:0; cursor:pointer; color:#0e1722; display:flex; padding:6px;">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3"><line x1="6" y1="6" x2="18" y2="18"></line><line x1="18" y1="6" x2="6" y2="18"></line></svg>
            </button>
          </div>
          <input type="text" autofocus placeholder="Search the maison" style="width:100%; border:0; border-bottom:1px solid #cdd4dc; background:transparent; outline:none; font-family:'Cormorant Garamond',Georgia,serif; font-weight:300; font-size:38px; color:#0e1722; padding:14px 0;">
          <div style="display:flex; gap:38px; margin-top:34px; flex-wrap:wrap;">
            <span style="font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#9aa3ad;">Top searches</span>
            <div style="display:flex; gap:28px; flex-wrap:wrap;">
              <sc-for list="{{ topSearches }}" as="term" hint-placeholder-count="5">
                <span style="font-size:14px; color:#36414e; cursor:pointer; border-bottom:1px solid transparent; padding-bottom:2px;" style-hover="border-bottom:1px solid #9a7b3f; color:#0e1722;">{{ term }}</span>
              </sc-for>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sc-if>

  <!-- ============ HEADER ============ -->
  <header data-screen-label="Header" style="position:relative; z-index:50; background:#faf8f4;">
    <div style="border-bottom:1px solid rgba(194,162,94,.16);">
      <div style="max-width:1320px; margin:0 auto; padding:0 48px; height:40px; display:flex; align-items:center; justify-content:space-between; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#586473;">
        <span>Qatar's luxury department store · since 1981</span>
        <div style="display:flex; align-items:center; gap:26px;">
          <span style="cursor:pointer;">Doha</span>
          <span style="cursor:pointer;">EN / عربي</span>
          <span style="cursor:pointer;">QAR</span>
        </div>
      </div>
    </div>

    <div style="max-width:1320px; margin:0 auto; padding:0 48px;">
      <div style="display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:30px 0 28px;">
        <div style="justify-self:start;">
          <button onClick="{{ openSearch }}" style="display:inline-flex; align-items:center; gap:11px; background:none; border:0; cursor:pointer; color:#0e1722; font-family:inherit; font-size:11px; letter-spacing:.20em; text-transform:uppercase;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.5" y2="16.5"></line></svg>
            <span>Search</span>
          </button>
        </div>
        <a href="#" style="justify-self:center; display:flex; align-items:center;">
          <img src="assets/logo-horizontal.svg" alt="Blue Salon" style="height:30px; width:auto; display:block;">
        </a>
        <div style="justify-self:end; display:flex; align-items:center; gap:24px; color:#0e1722;">
          <a href="#" aria-label="Account" style="color:inherit; display:flex;">
            <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7"></path></svg>
          </a>
          <a href="#" aria-label="Wishlist" style="color:inherit; display:flex;">
            <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M12 20s-7-4.6-9.2-9C1.3 8.1 2.6 5 5.7 5 7.8 5 9 6.3 12 9c3-2.7 4.2-4 6.3-4 3.1 0 4.4 3.1 2.9 6-2.2 4.4-9.2 9-9.2 9z"></path></svg>
          </a>
          <a href="#" aria-label="Bag" style="color:inherit; display:flex; position:relative;">
            <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M6 8h12l-1 12H7L6 8z"></path><path d="M9 8V6.5C9 4.6 10.3 3.5 12 3.5S15 4.6 15 6.5V8"></path></svg>
            <span style="position:absolute; top:-7px; right:-9px; font-size:9px; letter-spacing:0; color:#9a7b3f;">2</span>
          </a>
        </div>
      </div>
    </div>

    <nav style="border-top:1px solid rgba(194,162,94,.16);">
      <div style="max-width:1320px; margin:0 auto; padding:0 48px; height:56px; display:flex; align-items:center; justify-content:center; gap:46px;">
        <sc-for list="{{ navItems }}" as="item" hint-placeholder-count="8">
          <a href="#" style="font-size:11.5px; letter-spacing:.20em; text-transform:uppercase; color:#1d2733; text-decoration:none; padding:6px 0; border-bottom:1px solid transparent; transition:border-color .3s ease, color .3s ease;" style-hover="color:#003976; border-bottom:1px solid #c2a25e;">{{ item }}</a>
        </sc-for>
      </div>
    </nav>
  </header>

  <!-- ============ HERO ============ -->
  <main>
    <sc-if value="{{ isA }}" hint-placeholder-val="{{ true }}">
      <section data-screen-label="Hero · Full bleed" style="position:relative; width:100%; height:84vh; min-height:600px; background:#c6b9a3; overflow:hidden;">
        <div style="position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(20,16,10,.28) 100%);"></div>
        <span style="position:absolute; top:26px; right:30px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(28,24,18,.55);">Blue Salon · Summer 2026</span>
        <div style="position:absolute; left:0; right:0; bottom:76px;">
          <div style="max-width:1320px; margin:0 auto; padding:0 48px;">
            <div style="max-width:600px;">
              <p style="font-size:11px; letter-spacing:.30em; text-transform:uppercase; color:#5b5340; margin:0;">The Summer Edit</p>
              <h1 class="bs-serif" style="font-weight:300; font-size:clamp(52px,6.4vw,98px); line-height:1.0; letter-spacing:-.01em; color:#161310; margin:20px 0 0;">An address for<br>the extraordinary</h1>
              <p style="max-width:400px; margin:28px 0 0; font-size:16px; line-height:1.65; color:#3c372e;">A considered edit of the world's most desirable houses — fashion, jewellery, watches and beauty, gathered in one place.</p>
              <a href="#" style="display:inline-flex; align-items:center; gap:12px; margin-top:34px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#161310; text-decoration:none; border-bottom:1px solid #161310; padding-bottom:7px; transition:gap .3s ease;" style-hover="gap:20px;">Discover the edit
                <svg width="22" height="9" viewBox="0 0 22 9" fill="none" stroke="currentColor" stroke-width="1.2"><line x1="0" y1="4.5" x2="20" y2="4.5"></line><path d="M16 1l4 3.5-4 3.5"></path></svg>
              </a>
            </div>
          </div>
        </div>
      </section>
    </sc-if>

    <sc-if value="{{ isB }}">
      <section data-screen-label="Hero · Split" style="width:100%; height:84vh; min-height:600px; display:grid; grid-template-columns:1fr 1.12fr;">
        <div style="display:flex; flex-direction:column; justify-content:center; padding:0 clamp(48px,6vw,96px); background:#faf8f4;">
          <p style="font-size:11px; letter-spacing:.30em; text-transform:uppercase; color:#9a7b3f; margin:0;">The Summer Edit</p>
          <h1 class="bs-serif" style="font-weight:300; font-size:clamp(46px,4.6vw,76px); line-height:1.03; letter-spacing:-.01em; color:#0e1722; margin:24px 0 0;">An address for the extraordinary</h1>
          <p style="max-width:360px; margin:26px 0 0; font-size:16px; line-height:1.65; color:#586473;">A considered edit of the world's most desirable houses, gathered in one place.</p>
          <a href="#" style="display:inline-flex; align-items:center; gap:12px; margin-top:34px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#003976; text-decoration:none; border-bottom:1px solid #003976; padding-bottom:7px; width:fit-content; transition:gap .3s ease;" style-hover="gap:20px;">Discover the edit
            <svg width="22" height="9" viewBox="0 0 22 9" fill="none" stroke="currentColor" stroke-width="1.2"><line x1="0" y1="4.5" x2="20" y2="4.5"></line><path d="M16 1l4 3.5-4 3.5"></path></svg>
          </a>
        </div>
        <div style="position:relative; background:#16273b; overflow:hidden;">
          <span style="position:absolute; bottom:24px; left:28px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(250,248,244,.55);">Blue Salon · Summer 2026</span>
        </div>
      </section>
    </sc-if>

    <sc-if value="{{ isC }}">
      <section data-screen-label="Hero · Magazine" style="position:relative; width:100%; height:88vh; min-height:640px; background:#faf8f4; overflow:hidden;">
        <div style="position:absolute; right:0; top:0; width:60%; height:100%; background:#cdbfa9; overflow:hidden;">
          <span style="position:absolute; bottom:24px; right:28px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(28,24,18,.5);">Blue Salon · Summer 2026</span>
        </div>
        <div style="position:absolute; left:0; top:0; height:100%; width:48%; display:flex; flex-direction:column; justify-content:center; padding-left:clamp(48px,6vw,110px); padding-right:32px;">
          <p style="font-size:11px; letter-spacing:.30em; text-transform:uppercase; color:#9a7b3f; margin:0;">The Summer Edit · No. 01</p>
          <h1 class="bs-serif" style="font-weight:300; font-size:clamp(54px,6.8vw,104px); line-height:.98; letter-spacing:-.015em; color:#0e1722; margin:22px 0 0;">An address<br>for the<br><span style="font-style:italic;">extraordinary</span></h1>
          <p style="max-width:330px; margin:28px 0 0; font-size:15px; line-height:1.65; color:#586473;">The season, curated. A single destination for the houses that define modern luxury.</p>
          <a href="#" style="display:inline-flex; align-items:center; gap:12px; margin-top:32px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#003976; text-decoration:none; border-bottom:1px solid #003976; padding-bottom:7px; width:fit-content; transition:gap .3s ease;" style-hover="gap:20px;">Discover the edit
            <svg width="22" height="9" viewBox="0 0 22 9" fill="none" stroke="currentColor" stroke-width="1.2"><line x1="0" y1="4.5" x2="20" y2="4.5"></line><path d="M16 1l4 3.5-4 3.5"></path></svg>
          </a>
        </div>
      </section>
    </sc-if>

    <!-- ============ CURATED WORLDS ============ -->
    <section data-screen-label="Curated Worlds" style="max-width:1320px; margin:0 auto; padding:130px 48px 0;">
      <div style="display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:54px;">
        <div>
          <p style="font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#9a7b3f; margin:0;">Explore</p>
          <h2 class="bs-serif" style="font-weight:300; font-size:clamp(34px,3.4vw,52px); line-height:1.05; color:#0e1722; margin:16px 0 0;">The worlds of Blue Salon</h2>
        </div>
        <a href="#" style="font-size:11px; letter-spacing:.20em; text-transform:uppercase; color:#003976; text-decoration:none; border-bottom:1px solid rgba(0,57,118,.4); padding-bottom:5px; white-space:nowrap;">View all</a>
      </div>
      <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;">
        <sc-for list="{{ worlds }}" as="w" hint-placeholder-count="6">
          <a href="#" style="position:relative; display:block; height:440px; overflow:hidden; text-decoration:none;">
            <div style="position:absolute; inset:0; background:{{ w.tone }}; transition:transform .6s cubic-bezier(0.22,0.61,0.36,1);" style-hover="transform:scale(1.04);"></div>
            <div style="position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(10,8,5,.22) 100%); pointer-events:none;"></div>
            <div style="position:absolute; left:28px; bottom:28px; pointer-events:none;">
              <p style="font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:{{ w.metaColor }}; margin:0 0 8px;">Discover</p>
              <h3 class="bs-serif" style="font-weight:300; font-size:34px; line-height:1; color:{{ w.textColor }}; margin:0;">{{ w.name }}</h3>
            </div>
          </a>
        </sc-for>
      </div>
    </section>

    <!-- ============ FEATURED DESIGNERS ============ -->
    <section data-screen-label="The Houses" style="max-width:1100px; margin:0 auto; padding:130px 48px 0; text-align:center;">
      <p style="font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#9a7b3f; margin:0;">Featured</p>
      <h2 class="bs-serif" style="font-weight:300; font-size:clamp(30px,3vw,46px); color:#0e1722; margin:16px 0 0;">A house of houses</h2>
      <div style="width:46px; height:1px; background:#c2a25e; margin:34px auto 0;"></div>
      <div style="display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:28px 56px; margin-top:48px;">
        <sc-for list="{{ designers }}" as="d" hint-placeholder-count="12">
          <a href="#" class="bs-serif" style="font-weight:400; font-size:27px; letter-spacing:.01em; color:#3a4250; text-decoration:none; white-space:nowrap; transition:color .3s ease;" style-hover="color:#003976;">{{ d }}</a>
        </sc-for>
      </div>
      <div style="width:46px; height:1px; background:#c2a25e; margin:48px auto 0;"></div>
    </section>

    <!-- ============ NEW ARRIVALS ============ -->
    <section data-screen-label="New Arrivals" style="max-width:1320px; margin:0 auto; padding:130px 48px 0;">
      <div style="display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:54px;">
        <div>
          <p style="font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#9a7b3f; margin:0;">Just in</p>
          <h2 class="bs-serif" style="font-weight:300; font-size:clamp(34px,3.4vw,52px); line-height:1.05; color:#0e1722; margin:16px 0 0;">New arrivals</h2>
        </div>
        <a href="#" style="font-size:11px; letter-spacing:.20em; text-transform:uppercase; color:#003976; text-decoration:none; border-bottom:1px solid rgba(0,57,118,.4); padding-bottom:5px; white-space:nowrap;">View all</a>
      </div>
      <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:32px;">
        <sc-for list="{{ products }}" as="p" hint-placeholder-count="4">
          <div style="display:block;">
            <a href="#" style="position:relative; display:block; height:400px; overflow:hidden; background:{{ p.tone }};">
              <div style="position:absolute; inset:0; background:{{ p.tone }}; transition:transform .6s cubic-bezier(0.22,0.61,0.36,1);" style-hover="transform:scale(1.03);"></div>
              <button onClick="{{ p.onWish }}" data-id="{{ p.id }}" aria-label="Add to wishlist" style="position:absolute; top:16px; right:16px; z-index:2; background:none; border:0; cursor:pointer; color:{{ p.heartColor }}; display:flex; padding:4px;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="{{ p.heartFill }}" stroke="currentColor" stroke-width="1.3"><path d="M12 20s-7-4.6-9.2-9C1.3 8.1 2.6 5 5.7 5 7.8 5 9 6.3 12 9c3-2.7 4.2-4 6.3-4 3.1 0 4.4 3.1 2.9 6-2.2 4.4-9.2 9-9.2 9z"></path></svg>
              </button>
            </a>
            <div style="padding-top:18px;">
              <p style="font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#586473; margin:0;">{{ p.vendor }}</p>
              <p style="font-size:15px; line-height:1.4; color:#1d2733; margin:9px 0 0; font-weight:400;">{{ p.name }}</p>
              <p class="bs-serif" style="font-size:19px; color:#0e1722; margin:11px 0 0; letter-spacing:.01em;">{{ p.price }}</p>
            </div>
          </div>
        </sc-for>
      </div>
    </section>

    <!-- ============ THE BLUE SALON EDIT ============ -->
    <section data-screen-label="The Blue Salon Edit" style="margin-top:140px;">
      <div style="max-width:1320px; margin:0 auto; padding:0 48px;">
        <div style="display:grid; grid-template-columns:1.25fr 1fr; align-items:stretch; gap:0;">
          <div style="position:relative; background:#16273b; min-height:560px; overflow:hidden;">
            <span style="position:absolute; bottom:24px; left:28px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(250,248,244,.5);">The Edit · Featured</span>
          </div>
          <div style="background:#f3efe8; display:flex; flex-direction:column; justify-content:center; padding:clamp(48px,5vw,80px);">
            <p style="font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#9a7b3f; margin:0;">The Blue Salon Edit</p>
            <h2 class="bs-serif" style="font-weight:300; font-size:clamp(34px,3.4vw,50px); line-height:1.08; color:#0e1722; margin:20px 0 0;">The art of giving, considered</h2>
            <p style="margin:26px 0 0; font-size:16px; line-height:1.7; color:#586473; max-width:420px;">From a single perfect object to a wardrobe reimagined — our stylists curate gifts that hold their meaning long after the occasion. A study in restraint, wrapped by hand.</p>
            <a href="#" style="display:inline-flex; align-items:center; gap:12px; margin-top:34px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#003976; text-decoration:none; border-bottom:1px solid #003976; padding-bottom:7px; width:fit-content; transition:gap .3s ease;" style-hover="gap:20px;">Read the story
              <svg width="22" height="9" viewBox="0 0 22 9" fill="none" stroke="currentColor" stroke-width="1.2"><line x1="0" y1="4.5" x2="20" y2="4.5"></line><path d="M16 1l4 3.5-4 3.5"></path></svg>
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- ============ SIGNATURE HOUSES ============ -->
    <section data-screen-label="Signature Houses" style="max-width:1320px; margin:0 auto; padding:140px 48px 0;">
      <div style="text-align:center; margin-bottom:54px;">
        <p style="font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#9a7b3f; margin:0;">Iconic</p>
        <h2 class="bs-serif" style="font-weight:300; font-size:clamp(34px,3.4vw,52px); color:#0e1722; margin:16px 0 0;">Signature houses</h2>
      </div>
      <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;">
        <sc-for list="{{ houses }}" as="h" hint-placeholder-count="4">
          <a href="#" style="position:relative; display:block; height:380px; overflow:hidden; text-decoration:none;">
            <div style="position:absolute; inset:0; background:{{ h.tone }}; transition:transform .6s cubic-bezier(0.22,0.61,0.36,1);" style-hover="transform:scale(1.04);"></div>
            <div style="position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none;">
              <h3 class="bs-serif" style="font-weight:400; font-size:30px; color:{{ h.textColor }}; margin:0; letter-spacing:.02em;">{{ h.brand }}</h3>
              <p style="font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:{{ h.metaColor }}; margin:14px 0 0;">{{ h.cat }}</p>
            </div>
          </a>
        </sc-for>
      </div>
    </section>

    <!-- ============ PRIVATE SERVICES ============ -->
    <section data-screen-label="Private Services" style="margin-top:140px; background:#08284a;">
      <div style="max-width:1320px; margin:0 auto; padding:104px 48px 110px;">
        <div style="text-align:center; margin-bottom:64px;">
          <p style="font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#c2a25e; margin:0;">At your service</p>
          <h2 class="bs-serif" style="font-weight:300; font-size:clamp(32px,3.2vw,48px); color:#faf8f4; margin:16px 0 0;">The private client experience</h2>
        </div>
        <div style="display:grid; grid-template-columns:repeat(5, 1fr); gap:0; border-top:1px solid rgba(194,162,94,.28);">
          <sc-for list="{{ services }}" as="s" hint-placeholder-count="5">
            <div style="padding:40px 26px 8px; border-right:1px solid rgba(194,162,94,.16);">
              <p class="bs-serif" style="font-size:22px; color:#c2a25e; margin:0; font-style:italic;">{{ s.n }}</p>
              <h3 style="font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:#faf8f4; margin:22px 0 0; font-weight:500;">{{ s.title }}</h3>
              <p style="font-size:13.5px; line-height:1.6; color:rgba(232,237,243,.62); margin:16px 0 0;">{{ s.desc }}</p>
            </div>
          </sc-for>
        </div>
      </div>
    </section>

    <!-- ============ JOURNAL ============ -->
    <section data-screen-label="Journal" style="max-width:1320px; margin:0 auto; padding:140px 48px 0;">
      <div style="display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:54px;">
        <div>
          <p style="font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#9a7b3f; margin:0;">The Journal</p>
          <h2 class="bs-serif" style="font-weight:300; font-size:clamp(34px,3.4vw,52px); line-height:1.05; color:#0e1722; margin:16px 0 0;">Stories from the maison</h2>
        </div>
        <a href="#" style="font-size:11px; letter-spacing:.20em; text-transform:uppercase; color:#003976; text-decoration:none; border-bottom:1px solid rgba(0,57,118,.4); padding-bottom:5px; white-space:nowrap;">All stories</a>
      </div>
      <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;">
        <sc-for list="{{ journal }}" as="j" hint-placeholder-count="3">
          <a href="#" style="display:block; text-decoration:none;">
            <div style="position:relative; height:340px; overflow:hidden;">
              <div style="position:absolute; inset:0; background:{{ j.tone }}; transition:transform .6s cubic-bezier(0.22,0.61,0.36,1);" style-hover="transform:scale(1.04);"></div>
            </div>
            <p style="font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:#9a7b3f; margin:22px 0 0;">{{ j.cat }} · {{ j.meta }}</p>
            <h3 class="bs-serif" style="font-weight:300; font-size:25px; line-height:1.2; color:#0e1722; margin:13px 0 0;">{{ j.title }}</h3>
          </a>
        </sc-for>
      </div>
    </section>

    <!-- ============ THE PRIVATE VIEW (NEWSLETTER) ============ -->
    <section data-screen-label="The Private View" style="margin-top:140px;">
      <div style="background:#f7f2ea; border-top:1px solid rgba(194,162,94,.24); border-bottom:1px solid rgba(194,162,94,.24);">
        <div style="max-width:760px; margin:0 auto; padding:104px 48px 110px; text-align:center;">
          <div style="display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:6px;">
            <span style="width:28px; height:1px; background:#c2a25e;"></span>
            <span style="font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#9a7b3f;">By invitation</span>
            <span style="width:28px; height:1px; background:#c2a25e;"></span>
          </div>
          <h2 class="bs-serif" style="font-weight:300; font-size:clamp(38px,4.2vw,60px); line-height:1.04; color:#0e1722; margin:18px 0 0;">The Private View</h2>
          <p style="font-size:16px; line-height:1.7; color:#586473; margin:24px auto 0; max-width:480px;">Our most considered arrivals, private previews and appointments — shared first with a small circle of clients. We write seldom, and only when it matters.</p>
          <div style="display:flex; align-items:flex-end; gap:18px; max-width:480px; margin:46px auto 0;">
            <div style="flex:1; text-align:left;">
              <label style="font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#9aa3ad;">Email address</label>
              <input type="email" placeholder="you@example.com" style="width:100%; border:0; border-bottom:1px solid #c2a25e; background:transparent; outline:none; font-family:inherit; font-size:16px; color:#0e1722; padding:12px 0 12px;">
            </div>
            <button style="white-space:nowrap; background:#003976; color:#fff; border:0; cursor:pointer; font-family:inherit; font-size:11px; letter-spacing:.20em; text-transform:uppercase; padding:15px 30px; border-radius:2px; transition:background .3s ease;" style-hover="background:#002a57;">Request invitation</button>
          </div>
        </div>
      </div>
    </section>

  </main>

  <!-- ============ FOOTER ============ -->
  <footer data-screen-label="Footer" style="background:#faf8f4;">
    <div style="max-width:1320px; margin:0 auto; padding:96px 48px 0;">
      <div style="display:grid; grid-template-columns:1.4fr repeat(4, 1fr); gap:48px;">
        <div>
          <img src="assets/logo-horizontal.svg" alt="Blue Salon" style="height:28px; width:auto; display:block;">
          <p style="font-size:14px; line-height:1.7; color:#586473; margin:26px 0 0; max-width:240px;">Qatar's first and foremost luxury department store, since 1981.</p>
        </div>
        <sc-for list="{{ footerCols }}" as="col" hint-placeholder-count="4">
          <div>
            <h4 style="font-size:11px; letter-spacing:.20em; text-transform:uppercase; color:#0e1722; margin:0 0 22px; font-weight:500;">{{ col.title }}</h4>
            <ul style="list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px;">
              <sc-for list="{{ col.links }}" as="link" hint-placeholder-count="5">
                <li><a href="#" style="font-size:13.5px; color:#586473; text-decoration:none; transition:color .3s ease;" style-hover="color:#003976;">{{ link }}</a></li>
              </sc-for>
            </ul>
          </div>
        </sc-for>
      </div>

      <div style="display:flex; align-items:center; gap:14px; margin-top:80px; padding-bottom:34px;">
        <span style="font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#0e1722;">Doha, Qatar</span>
        <span style="color:#cdd4dc;">·</span>
        <span style="font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#586473; cursor:pointer;">EN / عربي</span>
        <span style="color:#cdd4dc;">·</span>
        <span style="font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#586473; cursor:pointer;">QAR</span>
        <div style="flex:1;"></div>
        <div style="display:flex; gap:22px;">
          <a href="#" style="font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#586473; text-decoration:none;">Instagram</a>
          <a href="#" style="font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#586473; text-decoration:none;">Facebook</a>
          <a href="#" style="font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#586473; text-decoration:none;">TikTok</a>
        </div>
      </div>

      <div style="border-top:1px solid rgba(194,162,94,.16); padding:26px 0 40px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;">
        <span style="font-size:11px; color:#7c8794;">© 2026 Blue Salon · AbuIssa Holding. All rights reserved.</span>
        <div style="display:flex; gap:26px;">
          <a href="#" style="font-size:11px; color:#7c8794; text-decoration:none;">Privacy</a>
          <a href="#" style="font-size:11px; color:#7c8794; text-decoration:none;">Terms</a>
          <a href="#" style="font-size:11px; color:#7c8794; text-decoration:none;">Accessibility</a>
        </div>
      </div>
    </div>
  </footer>

</div>
</x-dc>
<script type="text/x-dc" data-dc-script>
class Component extends DCLogic {
  state = { hero: 'a', searchOpen: false, wishlist: {} };

  componentDidMount() {
    this._onKey = (e) => { if (e.key === 'Escape') this.setState({ searchOpen: false }); };
    document.addEventListener('keydown', this._onKey);
  }
  componentWillUnmount() {
    document.removeEventListener('keydown', this._onKey);
  }

  renderVals() {
    const hero = this.state.hero;
    const wl = this.state.wishlist;

    const swBase = 'background:none;border:0;cursor:pointer;font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;padding:0 13px;transition:color .3s ease;';
    const sw = (k) => swBase + (hero === k ? 'color:#0e1722;' : 'color:#9aa3ad;');

    const worlds = [
      { key: 'women',     name: 'Women',     tone: '#e6dccb' },
      { key: 'men',       name: 'Men',       tone: '#dcd3c4' },
      { key: 'beauty',    name: 'Beauty',    tone: '#efe6d8' },
      { key: 'watches',   name: 'Watches',   tone: '#16273b' },
      { key: 'jewellery', name: 'Jewellery', tone: '#e8d8c2' },
      { key: 'home',      name: 'Home',      tone: '#d6cfc3' },
    ].map((w) => {
      const dark = w.key === 'watches';
      return Object.assign({}, w, {
        textColor: dark ? '#faf8f4' : '#161310',
        metaColor: dark ? 'rgba(250,248,244,.7)' : 'rgba(22,19,16,.55)',
      });
    });

    const designers = [
      'Saint Laurent', 'Loro Piana', 'Valentino', 'Brunello Cucinelli',
      'Loewe', 'Balenciaga', 'Bottega Veneta', 'Tom Ford',
      'Montblanc', 'Messika', 'Diptyque', 'La Mer',
    ];

    const onWish = (e) => {
      const id = e.currentTarget.getAttribute('data-id');
      e.preventDefault();
      this.setState((s) => ({ wishlist: Object.assign({}, s.wishlist, { [id]: !s.wishlist[id] }) }));
    };

    const products = [
      { id: 'p1', vendor: 'MCM',           name: 'Visetos Shoulder Bag',       price: 'QAR 4,250', tone: '#ece3d4' },
      { id: 'p2', vendor: 'Saint Laurent', name: 'Cassandre Card Case',        price: 'QAR 2,090', tone: '#e6dccb' },
      { id: 'p3', vendor: 'Montblanc',     name: 'Meisterstück Fountain Pen',  price: 'QAR 1,780', tone: '#e2dcd1' },
      { id: 'p4', vendor: 'Messika',       name: 'Move Pavé Diamond Bracelet', price: 'QAR 9,800', tone: '#eee6da' },
    ].map((p) => {
      const w = !!wl[p.id];
      return Object.assign({}, p, {
        onWish,
        heartFill: w ? 'currentColor' : 'none',
        heartColor: w ? '#9a7b3f' : '#1d2733',
      });
    });

    const houses = [
      { brand: 'Rolex',    cat: 'Watches',        tone: '#16273b' },
      { brand: 'Cartier',  cat: 'Fine Jewellery', tone: '#e8d8c2' },
      { brand: 'La Mer',   cat: 'Beauty',         tone: '#e4ebe6' },
      { brand: 'Valentino',cat: 'Women',          tone: '#ead8ce' },
    ].map((h) => {
      const dark = h.brand === 'Rolex';
      return Object.assign({}, h, {
        textColor: dark ? '#faf8f4' : '#161310',
        metaColor: dark ? 'rgba(250,248,244,.7)' : 'rgba(22,19,16,.55)',
      });
    });

    const services = [
      { n: '01', title: 'Personal Shopper',       desc: 'A dedicated advisor to curate your selection, in store or remotely.' },
      { n: '02', title: 'Private Styling',        desc: 'By-appointment sessions in our private client suite at Al Sadd.' },
      { n: '03', title: 'Gift Concierge',         desc: 'Considered gifting, wrapped and delivered by hand.' },
      { n: '04', title: 'Same-Day Delivery',      desc: 'Within Doha, on orders placed before noon.' },
      { n: '05', title: 'Authenticity Guarantee', desc: 'Every piece sourced directly from the house.' },
    ];

    const journal = [
      { cat: 'Style',   meta: '5 min', title: 'The new season palette',           tone: '#e6dccb' },
      { cat: 'Houses',  meta: '8 min', title: 'In conversation: the watchmakers',  tone: '#16273b' },
      { cat: 'Gifting', meta: '4 min', title: 'A considered guide to gifting',     tone: '#efe6d8' },
    ];

    const footerCols = [
      { title: 'Maison',      links: ['Our Story', 'The Al Sadd Flagship', 'Store Locator', 'Careers', 'Sustainability'] },
      { title: 'Shop',        links: ['Women', 'Men', 'Beauty', 'Watches', 'Jewellery', 'Home', 'Gifts'] },
      { title: 'Services',    links: ['Personal Shopper', 'Private Styling', 'Gift Concierge', 'Same-Day Delivery', 'Blue Salon Club'] },
      { title: 'Client Care', links: ['Contact Us', 'Shipping', 'Returns & Exchanges', 'Authenticity', 'FAQ'] },
    ];

    return {
      isA: hero === 'a', isB: hero === 'b', isC: hero === 'c',
      heroA: () => this.setState({ hero: 'a' }),
      heroB: () => this.setState({ hero: 'b' }),
      heroC: () => this.setState({ hero: 'c' }),
      swA: sw('a'), swB: sw('b'), swC: sw('c'),
      searchOpen: this.state.searchOpen,
      openSearch: () => this.setState({ searchOpen: true }),
      closeSearch: () => this.setState({ searchOpen: false }),
      topSearches: ['Rolex', 'Cartier Love bracelet', 'Loro Piana', 'Diptyque candles', 'Gifts for her'],
      navItems: ['Women', 'Men', 'Beauty', 'Watches', 'Jewellery', 'Home', 'Gifts', 'The Edit'],
      worlds, designers, products, houses, services, journal, footerCols,
    };
  }
}
</script>
</body>
</html>