/** Shopify CDN: Minification failed Line 1059:0 Unexpected "}" **/ /* ============================================================ AŞKIM: Luxury Turkish Abaya House Design system & global styles Palette: warm cream + burgundy + soft gold (understated) Type: Canela (headings) / Avenir Next (body) with premium fallbacks ============================================================ */ /* ---------- Fonts ---------- The client's brand fonts are Canela + Avenir Next (paid licences). Until the licensed web-font files are added to /assets/fonts, the closest premium free matches are used automatically: Canela -> Cormorant Garamond Avenir Next -> Jost To activate the real fonts, drop the .woff2 files in /assets/fonts and uncomment the @font-face blocks at the bottom of this file. */ /* Fonts are loaded via in each page's (faster than @import). See the <link rel="stylesheet" ...fonts.googleapis...> tag in the HTML head. */ :root { /* Colour: from the Aşkım brand board */ --cream: #F8F3EC; /* #F8F3EC */ --cream-2: #F1E9DC; --cream-3: #E7DCCB; --ivory: #FCF9F3; --burgundy: #6B1F2B; /* #6B1F2B */ --burgundy-2: #551621; --wine: #7E2A38; --taupe: #BBA89A; /* #BBA89A */ --mocha: #8C7A6B; --gold: #8A6D34; /* darkened for WCAG AA text contrast on cream (4.6:1) */ --gold-soft: #C8B081; /* decorative gold only: lines, arches, motifs */ --espresso: #2B2B2B; /* #2B2B2B */ --ink: #4A423B; --muted: #6E6459; /* darkened for WCAG AA text contrast on cream (5.1:1) */ --line: rgba(43,43,43,0.12); --line-soft: rgba(43,43,43,0.07); /* Type: brand fonts Canela / Avenir Next with close free fallbacks */ --display: 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif; --body: 'Avenir Next', 'Manrope', ui-sans-serif, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif; /* A third ground, so the site is not cream from top to bottom. Warm near-black, sampled off the burgundy rather than a neutral grey. */ --ink-deep: #1E1315; --ink-deep-2: #2A1A1D; /* Rhythm. Three section heights, not one. A page that breathes unevenly reads as designed; a page with identical gaps reads as a template. */ --maxw: 1280px; --gutter: clamp(20px, 5vw, 72px); --section: clamp(72px, 10vw, 150px); --section-tight: clamp(48px, 6vw, 88px); --section-loose: clamp(96px, 14vw, 210px); --radius: 2px; /* Optical tracking. Large display type needs to be pulled in, small capitals need to be opened out. One value for both is why type often looks almost right and never quite right. */ --track-display: -0.018em; --track-caps: 0.28em; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --slow: 1.1s; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--body); font-weight: 300; color: var(--ink); background: var(--cream); line-height: 1.65; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, video, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { list-style: none; } /* ---------- Type scale ---------- */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; color: var(--espresso); line-height: 1.14; letter-spacing: 0.005em; text-wrap: balance; } /* The bigger the type, the tighter it is set. */ .display-xl { font-size: clamp(3.2rem, 9vw, 8rem); line-height: 0.95; letter-spacing: var(--track-display); } .display-l { font-size: clamp(2.4rem, 5.5vw, 4.6rem); line-height: 0.99; letter-spacing: -0.014em; } .display-m { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.06; letter-spacing: -0.008em; } .display-s { font-size: clamp(1.4rem, 2.2vw, 1.95rem);line-height: 1.16; letter-spacing: -0.004em; } /* A quieter title, for pages that are documents rather than statements. */ .display-doc{ font-size: clamp(1.7rem, 2.6vw, 2.35rem);line-height: 1.12; letter-spacing: -0.006em; } .kicker { font-family: var(--body); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); } .lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--ink); } .muted { color: var(--muted); } .serif-quote { font-family: var(--display); font-style: italic; } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { max-width: 860px; } .section { padding-block: var(--section); } .section--loose { padding-block: var(--section-loose); } .section--tight { padding-block: var(--section-tight); } /* A section that follows a full-width band does not need its own top gap. */ .crafted + .section { padding-top: var(--section-loose); } .section-tight { padding-block: clamp(48px, 7vw, 96px); } .center { text-align: center; } .bg-cream-2 { background: var(--cream-2); } .bg-ivory { background: var(--ivory); } .bg-burgundy { background: var(--burgundy); color: var(--cream); } .bg-burgundy h1, .bg-burgundy h2, .bg-burgundy h3 { color: var(--ivory); } .bg-burgundy .kicker { color: var(--gold-soft); } .stack-sm > * + * { margin-top: 0.8rem; } .stack > * + * { margin-top: 1.4rem; } .stack-lg > * + * { margin-top: 2.2rem; } /* Divider: thin gold rule with a small tulip mark */ .rule { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--gold); } .rule::before, .rule::after { content: ""; height: 1px; width: min(120px, 22vw); background: linear-gradient(90deg, transparent, var(--gold-soft)); } .rule::after { background: linear-gradient(90deg, var(--gold-soft), transparent); } .rule svg { width: 18px; height: 18px; opacity: 0.9; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.7em; font-family: var(--body); font-weight: 400; font-size: 0.74rem; letter-spacing: 0.28em; text-transform: uppercase; padding: 1.05em 2.4em; border-radius: var(--radius); transition: all 0.5s var(--ease); position: relative; white-space: nowrap; } .btn-solid { background: var(--burgundy); color: var(--cream); } .btn-solid:hover { background: var(--burgundy-2); transform: translateY(-2px); box-shadow: 0 16px 34px -16px rgba(87,22,32,0.6); } .btn-outline { border: 1px solid var(--espresso); color: var(--espresso); } .btn-outline:hover { background: var(--espresso); color: var(--cream); } .btn-ghost-light { border: 1px solid rgba(255,253,249,0.55); color: var(--ivory); } .btn-ghost-light:hover { background: var(--ivory); color: var(--espresso); border-color: var(--ivory); } /* Solid cream block with burgundy type: Meryem's request for the hero's second button */ .btn-cream { background: var(--cream); color: var(--burgundy); border: 1px solid var(--cream); } .btn-cream:hover { background: var(--ivory); border-color: var(--ivory); box-shadow: 0 14px 30px -14px rgba(0,0,0,0.45); } .link-underline { position: relative; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; padding-bottom: 4px; } .link-underline::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease); } .link-underline:hover::after { transform: scaleX(1); transform-origin: left; } /* ============================================================ HEADER / NAV (injected by components.js) ============================================================ */ /* Meryem's request: the bar across the top is burgundy at all times, and the type on it stays cream at all times. It no longer turns cream on scroll, which is what made the navigation hard to read over the hero photograph. */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; background: var(--burgundy); transition: box-shadow 0.6s var(--ease); } .site-header .bar { display: flex; align-items: center; justify-content: space-between; height: 98px; padding-inline: var(--gutter); transition: height .45s var(--ease); } .site-header a, .site-header button { color: var(--cream); } .site-header.solid { box-shadow: 0 1px 0 rgba(0,0,0,0.20), 0 12px 34px -24px rgba(0,0,0,0.7); } /* Compressed state. The bar loses a third of its height and the mark comes down with it, so the page gains back roughly 28px of screen without the navigation ever leaving. Colour does not change, by Meryem's instruction. */ .site-header.compact .bar { height: 66px; } .site-header.compact .brand-logo { height: 54px; } .brand-logo { transition: height .45s var(--ease); } @media (max-width: 640px) { .site-header .bar { height: 78px; padding-inline: 18px; } .site-header.compact .bar { height: 58px; } .site-header.compact .brand-logo { height: 44px; } .brand-logo { height: 62px; } } @media (prefers-reduced-motion: reduce) { .site-header .bar, .brand-logo { transition: none; } } .brand-word { font-family: var(--display); font-size: 1.75rem; letter-spacing: 0.16em; line-height: 1; padding-left: 0.16em; } /* Real logo image (the badge in the header, cream version in the footer) */ /* Meryem, twice: the mark needs to be bigger. The bar grew with it so the logo is not crowding the navigation. */ .brand-logo { height: 80px; width: auto; display: block; } .footer-brand .brand-logo { height: 84px; margin-bottom: 4px; } .nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); } /* Meryem asked for the navigation to be thicker. It was inheriting the body weight of 300, which is a reading weight, not a label weight. */ /* It was 300, a reading weight. Meryem asked for thicker, Zubair found 500 too heavy. 400 with slightly more tracking reads as a label without shouting. */ .nav a { font-size: 0.73rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; position: relative; padding: 6px 0; } .mobile-nav a { font-weight: 400; } .nav a::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); } .nav a:hover::after, .nav a[aria-current="page"]::after { transform:scaleX(1); transform-origin:left; } .nav-icons { display: flex; align-items: center; gap: 20px; } .icon-btn { display: inline-flex; } .icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.3; } .menu-toggle { display: none; width: 26px; height: 16px; position: relative; } .menu-toggle span { position: absolute; left: 0; width: 100%; height: 1.4px; background: currentColor; transition: transform .45s var(--ease), opacity .3s; } .menu-toggle span:nth-child(1){ top:0; } .menu-toggle span:nth-child(2){ top:7px; } .menu-toggle span:nth-child(3){ top:14px; } body.menu-open .menu-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); } body.menu-open .menu-toggle span:nth-child(2){ opacity: 0; } body.menu-open .menu-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* Mobile drawer */ .mobile-nav { position: fixed; inset: 0; z-index: 99; background: var(--cream); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; } body.menu-open .mobile-nav { opacity: 1; visibility: visible; } .mobile-nav a { font-family: var(--display); font-size: 2rem; color: var(--espresso); opacity: 0; transform: translateY(14px); transition: all .6s var(--ease); } body.menu-open .mobile-nav a { opacity: 1; transform: none; } .mobile-nav a:nth-child(1){ transition-delay:.08s } .mobile-nav a:nth-child(2){ transition-delay:.14s } .mobile-nav a:nth-child(3){ transition-delay:.20s } .mobile-nav a:nth-child(4){ transition-delay:.26s } .mobile-nav a:nth-child(5){ transition-delay:.32s } .mobile-nav a:nth-child(6){ transition-delay:.38s } .mobile-nav .m-social { margin-top: 26px; font-family: var(--body); font-size: .72rem; letter-spacing:.24em; text-transform:uppercase; color: var(--muted); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; height: 100svh; min-height: 620px; display: grid; place-items: center; overflow: hidden; background: var(--espresso); } .hero__media { position: absolute; inset: 0; } .hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; } /* Layering: fallback gradient (0) → poster image (1) → video (2, shown when ready) */ .hero__fallback { z-index: 0; } .hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .hero__media video { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity 1.2s var(--ease); } .hero__media video.ready { opacity: 1; } /* Real photo overlaid on a figure's placeholder. If it fails to load, onerror removes it and the placeholder shows */ .figure .fig-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; transition: transform 1.4s var(--ease); } .figure:hover .fig-img { transform: scale(1.05); } /* Fallback backdrop when no video/photo is present yet */ .hero__fallback { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, #5b1a24 0%, #3c141c 45%, #2a1116 100%); } .hero__fallback::after { content:""; position:absolute; inset:0; opacity:.5; background: radial-gradient(60% 50% at 50% 40%, rgba(201,172,126,.16), transparent 70%); } /* Two scrims. The vertical one seats the header and the scroll cue. The horizontal one gives the left-hand text column a dark ground to sit on, because the hero photograph is bright stone there and the small type was washing out. The right-hand two thirds of the photograph are left untouched. */ /* z-index 4 matters. The poster image and the video inside .hero__media sit at 1 and 2, and .hero__media does not create a stacking context, so they share the hero's. With the scrim at auto it painted UNDERNEATH the photograph and did nothing, which is why the hero text was washing out. */ .hero__scrim { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(95deg, rgba(20,10,12,.72) 0%, rgba(20,10,12,.64) 30%, rgba(20,10,12,.46) 50%, rgba(20,10,12,.12) 68%, rgba(20,10,12,0) 84%), linear-gradient(180deg, rgba(20,10,12,.42) 0%, rgba(20,10,12,.12) 34%, rgba(20,10,12,.15) 62%, rgba(20,10,12,.62) 100%); } @media (max-width: 640px) { /* The hero centres on a phone, so a left-hand wash would sit in the wrong place. */ .hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,.52) 0%, rgba(20,10,12,.40) 40%, rgba(20,10,12,.46) 66%, rgba(20,10,12,.70) 100%); } } .hero__inner { position: relative; z-index: 5; text-align: center; color: var(--ivory); padding-inline: var(--gutter); max-width: 900px; } .hero__inner .kicker { color: var(--gold-soft); } .hero h1 { color: var(--ivory); margin: 0.28em 0 0.24em; font-size: clamp(3.4rem, 6.6vw, 5.9rem); line-height: 0.96; letter-spacing: -0.012em; } .hero__tag { font-family: var(--display); font-style: italic; font-size: clamp(1.1rem, 2.2vw, 1.6rem); color: rgba(255,253,249,.92); } .hero__cta { margin-top: 2.4rem; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } .hero__arch { position:absolute; z-index:3; top:50%; left:50%; transform: translate(-50%,-50%); width: min(560px, 82vw); opacity:.5; color: var(--gold-soft); pointer-events:none; } .scroll-cue { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:6; color:var(--ivory); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; opacity:.8; } .scroll-cue .bar { width:1px; height:44px; background: linear-gradient(var(--gold-soft), transparent); animation: cue 2.4s var(--ease) infinite; transform-origin: top; } @keyframes cue { 0%,100%{ transform:scaleY(.3); opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } } /* Sound toggle */ .sound-toggle { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; background: rgba(42,35,32,.55); backdrop-filter: blur(6px); display: grid; place-items: center; color: var(--cream); transition: background .4s var(--ease), transform .4s var(--ease); } .sound-toggle:hover { transform: scale(1.06); background: var(--burgundy); } .sound-toggle .eq { display:flex; align-items:flex-end; gap:2px; height:15px; } .sound-toggle .eq i { width:2px; background: currentColor; height: 40%; border-radius:2px; } .sound-toggle.playing .eq i { animation: eq 1s ease-in-out infinite; } .sound-toggle .eq i:nth-child(2){ animation-delay:.2s } .sound-toggle .eq i:nth-child(3){ animation-delay:.4s } .sound-toggle .eq i:nth-child(4){ animation-delay:.1s } @keyframes eq { 0%,100%{ height:35% } 50%{ height:100% } } /* ============================================================ REUSABLE SECTIONS ============================================================ */ .section-head { max-width: 720px; } .section-head.center { margin-inline: auto; } .section-head .kicker { display:block; margin-bottom: 1.1rem; } .section-head h2 + p { margin-top: 1.2rem; } /* Editorial split */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: center; } .split.reverse .split__media { order: 2; } /* The founder story: the portrait carries more of the column than a half-and-half split, and the type sits against it rather than beside it. */ .split--story { grid-template-columns: 0.85fr 1.05fr; align-items: start; gap: clamp(32px, 6vw, 88px); } .split--story .stack { padding-top: clamp(0px, 2vw, 28px); } @media (max-width: 860px) { .split--story { grid-template-columns: 1fr; } } .split__media { position: relative; } .figure { position: relative; overflow: hidden; background: var(--cream-3); } .figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); } /* Photographs settle into their frame as they arrive, rather than simply fading. It is the one piece of motion on the site that is about the clothes rather than about the interface. */ .reveal .figure img, .reveal .col-card__media img, .reveal .p-card__media img, .reveal .j-card__media img { transform: scale(1.07); } .reveal.in .figure img, .reveal.in .col-card__media img, .reveal.in .p-card__media img, .reveal.in .j-card__media img { transform: none; transition: transform 1.5s var(--ease) .08s; } @media (prefers-reduced-motion: reduce) { .reveal .figure img, .reveal .col-card__media img, .reveal .p-card__media img, .reveal .j-card__media img { transform: none; } } .figure.tall { aspect-ratio: 4/5; } .figure.portrait { aspect-ratio: 3/4; } .figure.wide { aspect-ratio: 3/2; } .figure:hover img { transform: scale(1.05); } /* Placeholder shown when no photo yet */ .ph { position:absolute; inset:0; display:grid; place-items:center; text-align:center; background: linear-gradient(135deg, var(--cream-2), var(--cream-3)); color: var(--gold); } .ph__mark { font-family: var(--display); font-size: 2.6rem; letter-spacing:.18em; opacity:.55; } .ph__note { font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color: var(--muted); margin-top:8px; } /* Feature trio */ .trio { display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); } .pillar { text-align:center; } .pillar .num { font-family: var(--display); font-size: 1rem; color: var(--gold); letter-spacing:.3em; } .pillar h3 { margin:.8rem 0 .6rem; font-size: 1.5rem; } /* ============================================================ COLLECTION CARDS ============================================================ */ /* Four across, because there are four collections. At three it left an orphan. */ .collection-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.2vw, 32px); } .col-card { position: relative; display:block; } .col-card__media { position:relative; overflow:hidden; aspect-ratio: 3/4; background: var(--cream-3); } .col-card__media img { width:100%; height:100%; object-fit:cover; transition: transform 1.3s var(--ease); } .col-card:hover .col-card__media img { transform: scale(1.06); } /* Deeper and taller than before. The collection name and the Turkish meaning above it were washing out against the lighter photographs. */ .col-card__media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 16%, rgba(30,14,17,.30) 42%, rgba(30,14,17,.68) 72%, rgba(30,14,17,.88) 100%); opacity:1; transition:opacity .6s var(--ease); } .col-card__label { position:absolute; left:0; right:0; bottom:0; z-index:2; padding: clamp(18px,2vw,28px); color: var(--ivory); } /* The decorative gold is not strong enough for small type over a photograph. */ .col-card__label .meaning { font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color: rgba(255,253,249,.94); text-shadow: 0 1px 10px rgba(20,8,10,.85); } /* The real garment photography is not shot yet, so the type over these cards has to survive whatever lands here. Gradient plus a soft shadow does that. */ .col-card__label h3 { text-shadow: 0 2px 18px rgba(20,8,10,.6); } .col-card__label h3 { color: var(--ivory); font-size: clamp(1.5rem,2.2vw,2rem); margin:.3rem 0 .35rem; } .col-card__label p { font-size:.86rem; color: rgba(255,253,249,.82); max-width: 34ch; opacity:0; transform: translateY(8px); transition: all .6s var(--ease); } .col-card:hover .col-card__label p { opacity:1; transform:none; } .col-card__cta { margin-top:.9rem; font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color: var(--gold-soft); opacity:0; transform: translateY(8px); transition: all .6s var(--ease) .05s; } .col-card:hover .col-card__cta { opacity:1; transform:none; } /* Product cards */ .product-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.6vw,44px); } /* Four across on the home page, matching the collection row above it. */ .product-grid--home { grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.2vw, 32px); } /* Heading and the scarcity line share a baseline, as on the Shop page. */ .pieces-head { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(18px, 4vw, 60px); flex-wrap: wrap; margin-bottom: clamp(30px, 3.6vw, 52px); } .pieces-head .kicker { display: block; margin-bottom: .7rem; } .pieces-head p { max-width: 34ch; font-size: .95rem; margin-bottom: .35rem; } @media (max-width: 1024px) { .product-grid--home { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .product-grid--home { grid-template-columns: repeat(2, 1fr); gap: 14px; } .product-grid--home .p-card h3 { font-size: 1.05rem; } .pieces-head { align-items: flex-start; } } .p-card__media { position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--cream-3); margin-bottom: 1rem; } .p-card__media img { width:100%;height:100%;object-fit:cover; transition: transform 1.2s var(--ease); } .p-card:hover .p-card__media img { transform: scale(1.05); } .p-tag { position:absolute; top:14px; left:14px; z-index:2; background: var(--cream); color: var(--burgundy); font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; padding:6px 12px; } .p-card h3 { font-size:1.35rem; } .p-card .price { font-family: var(--body); font-size:.92rem; letter-spacing:.05em; color: var(--espresso); margin-top:.35rem; font-variant-numeric: tabular-nums; } /* Was gold at .6rem, which measured as decoration rather than information. The collection a piece belongs to is worth reading. */ .p-card .p-meaning { font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color: var(--muted); margin-bottom:.45rem; } .p-card:hover .p-meaning { color: var(--gold); } /* Filters */ .filters { display:flex; flex-wrap:wrap; gap: 10px 26px; justify-content:center; } .filters button { font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color: var(--muted); padding:8px 2px; position:relative; transition: color .4s; } .filters button::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background: var(--burgundy); transform: scaleX(0); transform-origin:center; transition: transform .4s var(--ease); } .filters button.active, .filters button:hover { color: var(--espresso); } .filters button.active::after { transform: scaleX(1); } /* ============================================================ PRODUCT DETAIL ============================================================ */ .pdp { display:grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px,5vw,80px); align-items:start; } .pdp__gallery { display:grid; gap: 12px; } .pdp__info { position: sticky; top: 120px; } /* The price is the second thing read after the name, so it is set with the display face and given room, rather than looking like a data field. */ .pdp__info .price { font-family: var(--display); font-size: clamp(1.5rem, 2vw, 1.85rem); letter-spacing: .01em; color: var(--burgundy); } /* The three answers a buyer wants before they commit. */ .pdp__promises { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); display: grid; gap: .95rem; } .pdp__promises li { display: flex; align-items: flex-start; gap: .85rem; font-size: .88rem; line-height: 1.5; color: var(--ink); } .pdp__promises svg { width: 18px; height: 18px; flex: none; margin-top: .16rem; fill: none; stroke: var(--gold); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; } .swatches { display:flex; gap:12px; } .swatch { width:26px; height:26px; border-radius:50%; border:1px solid var(--line); position:relative; } /* Swatch colours come from the colour list in data.js, set inline. */ .size-row { display:flex; flex-wrap:wrap; gap:10px; } .size-row button { min-width:48px; padding:10px 6px; border:1px solid var(--line); font-size:.74rem; letter-spacing:.1em; transition: all .3s; } .size-row button:hover, .size-row button.active { border-color: var(--espresso); background: var(--espresso); color: var(--cream); } .acc { border-top:1px solid var(--line); } .acc__item { border-bottom:1px solid var(--line); } .acc__head { width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; text-align:left; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; } .acc__head .plus { position:relative; width:12px; height:12px; flex:none; } .acc__head .plus::before, .acc__head .plus::after { content:""; position:absolute; background: var(--espresso); transition: transform .4s var(--ease); } .acc__head .plus::before { top:5.5px; left:0; width:12px; height:1px; } .acc__head .plus::after { left:5.5px; top:0; width:1px; height:12px; } .acc__item.open .plus::after { transform: scaleY(0); } .acc__panel { overflow:hidden; height:0; transition: height .5s var(--ease); } .acc__panel-inner { padding-bottom:18px; font-size:.92rem; color: var(--ink); } /* WhatsApp button */ /* Was WhatsApp's own #25623b, which is the one colour on the site that does not belong to the brand. The channel is still obvious from the glyph. */ .btn-wa { background: var(--burgundy); color: var(--cream); } .btn-wa:hover { background: var(--burgundy-2); box-shadow: 0 14px 30px -14px rgba(87,22,32,0.55); } .btn-wa svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; } /* ============================================================ FAQ / EDITORIAL CONTENT PAGES ============================================================ */ /* ---- Page openings ------------------------------------------------------- Every page used to open the same way: a gold kicker, a very large centred serif headline, on flat cream. Nine pages, one template, which is what Meryem meant by "don't make every page look the same". There are now three openings, and which one a page uses says what kind of page it is before a word is read. --editorial a story or a statement. Large, left, room around it. --shop a place to buy. Compact, sits straight on top of the goods. --doc something to look up. Quiet, narrow, gets out of the way. -------------------------------------------------------------------------- */ .page-hero { padding-top: clamp(140px, 18vh, 220px); padding-bottom: clamp(40px, 6vw, 80px); text-align:center; } .page-hero .kicker { display:block; margin-bottom: 1rem; } /* Editorial: left aligned, generous, with a hairline that runs off toward the margin so the page does not sit in a neat centred box. */ .page-hero--editorial { text-align: left; padding-bottom: clamp(30px, 4vw, 56px); } .page-hero--editorial .wrap, .page-hero--editorial .wrap-narrow { margin-inline: 0; max-width: min(980px, 100%); } .page-hero--editorial .kicker { margin-bottom: 1.4rem; } .page-hero--editorial h1 { max-width: 16ch; } .page-hero--editorial .lead { margin-top: 1.6rem; max-width: 52ch; } .page-hero--editorial::after { content: ""; display: block; height: 1px; margin-top: clamp(28px, 3.4vw, 44px); background: linear-gradient(90deg, var(--gold-soft), rgba(200,176,129,0)); width: min(560px, 62%); margin-left: var(--gutter); } /* Shop: no ceremony. A title bar that sits directly above the filters, with the headline and the supporting line on one baseline. */ .page-hero--shop { text-align: left; padding-top: clamp(118px, 14vh, 164px); padding-bottom: clamp(20px, 2.4vw, 30px); } .page-hero--shop .wrap-narrow { margin-inline: 0; max-width: 100%; } .page-hero--shop .shop-title { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(20px, 4vw, 64px); flex-wrap: wrap; } .page-hero--shop h1 { font-size: clamp(2rem, 3.6vw, 3.1rem); margin: .5rem 0 0; } .page-hero--shop .lead { max-width: 44ch; font-size: 1rem; margin-bottom: .4rem; } /* The filter bar belongs to the title, so it sits directly under it rather than a full section gap away. */ .page-hero--shop + .section-tight { padding-top: clamp(22px, 2.6vw, 34px); } .page-hero--shop + .section-tight .shop-bar { margin-top: 0; } /* Document: a small title in a narrow measure. These pages are read, not admired, and they should not compete with the home page. */ .page-hero--doc { text-align: left; padding-top: clamp(116px, 14vh, 158px); padding-bottom: clamp(18px, 2.2vw, 28px); border-bottom: 1px solid var(--line-soft); } .page-hero--doc .wrap-narrow { margin-inline: 0; max-width: 860px; } .page-hero--doc .kicker { margin-bottom: .5rem; font-size: .64rem; } .page-hero--doc h1 { color: var(--espresso); } .page-hero--doc .lead { margin-top: .9rem; max-width: 60ch; font-size: 1rem; } .page-hero--doc + .section-tight { padding-top: clamp(34px, 4vw, 56px); } @media (max-width: 640px) { .page-hero--editorial::after { width: 62%; margin-left: var(--gutter); } .page-hero--shop .shop-title { align-items: flex-start; } } .faq-list { max-width: 820px; margin-inline:auto; } /* On a document page the body lines up under the title instead of being centred against it, and the closing band is tightened. A reference page should feel like a well set page of a book, not a landing page. */ .page-hero--doc ~ .section-tight .faq-list, .page-hero--doc ~ .section-tight .rich, .page-hero--doc ~ .section-tight .size-tables { margin-inline: 0; max-width: 860px; } .page-hero--doc ~ .section-tight { padding-bottom: clamp(44px, 6vw, 84px); } .page-hero--doc ~ .section-tight.bg-cream-2, .page-hero--doc ~ .bg-cream-2 { padding-block: clamp(40px, 5vw, 68px); } .page-hero--doc ~ .bg-cream-2 .display-m, .page-hero--doc ~ .bg-cream-2 .display-s { font-size: clamp(1.3rem, 2vw, 1.7rem); } /* The accordion rules run the full measure on a document page. */ .page-hero--doc ~ .section-tight .acc__head { font-size: .78rem; letter-spacing: .14em; padding: 20px 0; } .page-hero--doc ~ .section-tight .acc__panel-inner { max-width: 68ch; } .rich h3 { font-size: 1.4rem; margin: 2rem 0 .6rem; } .rich p { margin-bottom: 1rem; max-width: 68ch; } .rich p.first { margin-top: .4rem; } .rich strong { font-weight: 500; color: var(--espresso); } /* Size guide table */ .tbl { width:100%; border-collapse: collapse; font-size:.95rem; } .tbl th, .tbl td { padding: 16px 18px; text-align:left; border-bottom:1px solid var(--line); } .tbl th { font-family: var(--body); font-weight:400; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color: var(--gold); } .tbl tr:hover td { background: var(--cream-2); } .tbl caption { text-align:left; font-family: var(--display); font-size:1.3rem; color: var(--espresso); padding-bottom: 14px; } /* Info cards (shipping) */ .info-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,40px); } .info-card { background: var(--ivory); padding: clamp(26px,3vw,40px); border:1px solid var(--line-soft); } .info-card h3 { font-size:1.3rem; margin-bottom:.6rem; } .info-card .num { font-family: var(--display); color: var(--gold); font-size:1rem; letter-spacing:.3em; } /* ============================================================ CONTACT ============================================================ */ .field { position: relative; margin-bottom: 30px; } .field label { position:absolute; left:0; top:12px; font-size:.95rem; color: var(--muted); pointer-events:none; transition: all .35s var(--ease); } .field input, .field textarea, .field select { width:100%; background: transparent; border:none; border-bottom:1px solid var(--line); padding:12px 0; font-family: var(--body); font-size:1rem; color: var(--espresso); } .field textarea { resize: vertical; min-height: 90px; } .field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color: var(--burgundy); } .field input:focus + label, .field textarea:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label { top:-14px; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold); } .field select { color: var(--espresso); } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--burgundy-2); color: rgba(255,253,249,.8); padding-top: clamp(56px,7vw,96px); } .site-footer h4 { color: var(--gold-soft); font-family: var(--body); font-weight:400; font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; margin-bottom: 1.4rem; } .site-footer a { color: rgba(255,253,249,.8); transition: color .35s; } .site-footer a:hover { color: var(--ivory); } .footer-top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(28px,4vw,60px); padding-bottom: clamp(40px,5vw,70px); } .footer-brand .brand-word { color: var(--ivory); font-size: 2.4rem; } .footer-brand p { margin-top: 1rem; max-width: 34ch; font-size:.92rem; } .footer-col ul li { margin-bottom: .7rem; font-size:.9rem; } .footer-news input { width:100%; background:transparent; border:none; border-bottom:1px solid rgba(255,253,249,.3); color: var(--ivory); padding:10px 0; font-family:var(--body); } .footer-news input::placeholder { color: rgba(255,253,249,.45); } .footer-news button { margin-top:14px; } .footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding: 28px 0; border-top:1px solid rgba(255,253,249,.14); font-size:.72rem; letter-spacing:.06em; color: rgba(255,253,249,.55); } .footer-bottom .socials { display:flex; gap:18px; } .footer-bottom .socials a { font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; } /* ============================================================ SCROLL REVEAL ============================================================ */ /* --reveal-delay is set per card by main.js so a row of cards arrives one after another. It is 0 for everything else. */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease) var(--reveal-delay, 0ms), transform 1s var(--ease) var(--reveal-delay, 0ms); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .1s } .reveal.d2 { transition-delay: .2s } .reveal.d3 { transition-delay: .3s } .reveal.d4 { transition-delay: .4s } @media (prefers-reduced-motion: reduce) { .reveal { opacity:1 !important; transform:none !important; } * { scroll-behavior: auto !important; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 980px) { .split, .pdp { grid-template-columns: 1fr; } .split.reverse .split__media { order: 0; } .pdp__info { position: static; } .trio, .collection-grid, .product-grid, .info-grid { grid-template-columns: repeat(2, 1fr); } .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .nav, .nav-icons .search-lbl { display: none; } .menu-toggle { display: block; } .trio, .product-grid, .info-grid, .footer-top { grid-template-columns: 1fr; } /* Meryem: too much scrolling. Four collection cards stacked one per screen took 2.6 screens on its own. Two across shows all four in one glance. */ .collection-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .col-card__label { padding: 14px; } .col-card__label h3 { font-size: 1.15rem; } .col-card__label .meaning { font-size: .54rem; letter-spacing: .2em; } .hero { min-height: 560px; } .btn { padding: 1em 1.9em; } } /* ============================================================ MOCKUP SECTIONS (hero-left · crafted strip · IG · community) ============================================================ */ /* Left-aligned hero content (over full-bleed film) */ .hero__inner--left { justify-self: start; text-align: left; margin: 0; } .hero__inner--left .hero__cta { justify-content: flex-start; } .hero__inner--left h1 { margin: .3em 0 .4em; } .hero__lead { font-size: clamp(1rem, 1.5vw, 1.2rem); color: rgba(255,253,249,.97); max-width: 40ch; } /* The decorative gold is too weak for small type over a photograph. */ .hero__inner--left .kicker { color: rgba(255,253,249,.88); } @media (max-width: 640px){ .hero__inner--left { text-align: center; justify-self: center; } .hero__inner--left .hero__cta { justify-content: center; } .hero__lead { margin-inline: auto; } } /* Crafted in Türkiye strip */ /* Beige, at Meryem's request. Type and marks are unchanged; only the ground moved. The marks and labels darkened to hold their contrast on a light surface, since the decorative gold does not carry on beige. */ .crafted { background: var(--cream-3); color: var(--espresso); } .crafted__inner { display: flex; align-items: center; gap: clamp(24px, 4vw, 60px); padding-block: clamp(30px, 4vw, 48px); flex-wrap: wrap; } .crafted__title { font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.04; color: var(--ivory); flex: 0 0 auto; } .crafted__items { display: flex; flex: 1; gap: clamp(10px, 1.6vw, 26px); flex-wrap: wrap; justify-content: space-between; } /* Six items across, no standing title: Meryem's version of this band */ .crafted__items--six { width: 100%; gap: clamp(14px, 2vw, 34px); } .crafted__items--six .crafted__item { min-width: 104px; } .crafted__item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; flex: 1; min-width: 92px; } /* Ground is beige now, so the marks use the readable gold, not the decorative one. */ .crafted__item svg { width: 27px; height: 27px; stroke: var(--gold); fill: none; stroke-width: 1.2; } .crafted__item span { font-size: .61rem; letter-spacing: .17em; text-transform: uppercase; color: var(--ink); line-height: 1.4; } /* Instagram feed strip */ .ig-head { display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; } .ig-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .ig-strip a { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--cream-3); display: block; } .ig-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .ig-strip a::after { content: ""; position: absolute; inset: 0; background: rgba(43,43,43,.18); opacity: 0; transition: opacity .5s var(--ease); } .ig-strip a:hover img { transform: scale(1.09); } .ig-strip a:hover::after { opacity: 1; } .ig-strip .ph__mark { font-size: 1.4rem; } @media (max-width: 900px){ .ig-strip { grid-template-columns: repeat(4, 1fr); } .ig-strip a:nth-child(n+5){ display:none; } } @media (max-width: 520px){ .ig-strip { grid-template-columns: repeat(3, 1fr); } .ig-strip a:nth-child(n+4){ display:none; } } /* Community / newsletter band */ .news-band { max-width: 540px; margin: 1.6rem auto 0; display: flex; gap: 12px; } .news-band input { flex: 1; background: transparent; border: none; border-bottom: 1px solid var(--line); padding: 13px 4px; font-family: var(--body); font-size: .98rem; color: var(--espresso); } .news-band input::placeholder { color: var(--muted); letter-spacing: .04em; } .news-band input:focus { outline: none; border-color: var(--burgundy); } @media (max-width: 520px){ .news-band { flex-direction: column; } } /* Circular monogram */ .monogram { width: 92px; height: 92px; color: var(--gold-soft); } .footer-brand .monogram { color: var(--gold-soft); margin-bottom: 18px; } /* Featured large collection cards (home) sit fine on the shared .col-card grid */ /* ============================================================ PREMIUM ELEVATION (motion · texture · card craft · journal · pdp gallery · filters · concierge): added in the polish pass ============================================================ */ /* ---- Film-grain / paper texture (fixed, never intercepts clicks) ---- */ .grain { position: fixed; inset: 0; z-index: 500; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } @media (prefers-reduced-motion: reduce){ .grain { display: none; } } /* ---- Heading line-reveal (built by JS: each line masked & slid up) ---- */ .reveal-title .line { display: block; overflow: hidden; } .reveal-title .line__in { display: block; transform: translateY(112%); transition: transform 1.05s var(--ease); } .reveal-title.in .line__in { transform: none; } .reveal-title.in .line:nth-child(2) .line__in { transition-delay: .09s; } .reveal-title.in .line:nth-child(3) .line__in { transition-delay: .18s; } .reveal-title.in .line:nth-child(4) .line__in { transition-delay: .27s; } /* Softer, richer scroll reveal (adds a gentle blur lift) */ .reveal { filter: blur(6px); } .reveal.in { filter: blur(0); } /* ---- Magnetic CTA + button-in-button trailing icon ---- */ .btn { will-change: transform; } .btn-arrow { padding-right: .5em; } .btn__ico { display: inline-grid; place-items: center; width: 2em; height: 2em; margin-left: .2em; border-radius: 50%; background: rgba(255,253,249,.16); font-size: .9em; line-height: 1; transition: transform .55s var(--ease), background .55s var(--ease); } .btn-outline .btn__ico, .btn-solid.on-light .btn__ico { background: rgba(43,43,43,.08); } .btn:hover .btn__ico { transform: translate(3px,-1px); } .btn:active { transform: scale(.985); } /* ---- Double-bezel nested card craft ---- */ .card-shell { padding: 8px; border-radius: 20px; background: rgba(43,43,43,.025); box-shadow: inset 0 0 0 1px rgba(43,43,43,.05); transition: transform .7s var(--ease), box-shadow .7s var(--ease); } .card-shell:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(43,43,43,.08), 0 30px 60px -34px rgba(43,27,20,.4); } .card-shell .col-card__media, .card-shell .p-card__media { border-radius: 13px; } /* Softer diffused shadow utility */ .soft-shadow { box-shadow: 0 40px 80px -50px rgba(43,27,20,.55); } /* Gentle card lift (no heavy frame, keeps the full-bleed luxury look) */ .col-card, .p-card, .j-card { transition: transform .7s var(--ease); } .col-card:hover, .p-card:hover, .j-card:hover { transform: translateY(-5px); } .ph--alt { background: linear-gradient(135deg, var(--cream-3), var(--taupe)) !important; } /* ---- Product card: hover-to-preview second image ---- */ .p-card__media .img-b { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); } .p-card:hover .p-card__media .img-b { opacity: 1; } .p-card__media .ph + .ph { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); background: linear-gradient(135deg, var(--cream-3), var(--taupe)); } .p-card:hover .p-card__media .ph + .ph { opacity: 1; } .quick { position:absolute; left:14px; right:14px; bottom:14px; z-index:3; text-align:center; background: rgba(252,249,243,.92); backdrop-filter: blur(4px); color: var(--espresso); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; padding:12px; opacity:0; transform: translateY(10px); transition: all .6s var(--ease); } .p-card:hover .quick { opacity:1; transform:none; } /* ============================================================ PDP GALLERY (sticky, multi-image, lightbox) ============================================================ */ .pdp__gallery { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; } .pdp__gallery .figure { cursor: zoom-in; } .pdp__gallery .figure:first-child { grid-column: 1 / -1; } /* One photograph plus one invitation should read as two full-width blocks, not as an L shape with a gap in it. */ .pdp__gallery .figure:nth-child(2):last-child { grid-column: 1 / -1; aspect-ratio: 16/7; } @media (max-width: 980px){ .pdp__gallery { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .pdp__gallery { grid-template-columns: 1fr; } } .lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 5vw; background: rgba(30,18,20,.82); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; } .lightbox.open { opacity: 1; visibility: visible; } .lightbox figure { max-width: min(680px, 90vw); width: 100%; aspect-ratio: 3/4; background: var(--cream-3); overflow: hidden; transform: scale(.96); transition: transform .6s var(--ease); } .lightbox.open figure { transform: none; } .lightbox img { width: 100%; height: 100%; object-fit: cover; } .lightbox__close { position: absolute; top: 26px; right: 30px; color: var(--cream); font-size: 1.6rem; width: 44px; height: 44px; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); color: var(--cream); width: 54px; height: 54px; font-size: 1.4rem; opacity: .8; } .lightbox__nav:hover { opacity: 1; } .lightbox__nav.prev { left: 2vw; } .lightbox__nav.next { right: 2vw; } .complete-look .product-grid { grid-template-columns: repeat(3,1fr); } /* ============================================================ SHOP FILTERS ============================================================ */ .shop-bar { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: clamp(30px,4vw,52px); } .shop-bar__group { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; } .f-select { position: relative; } .f-select select { appearance: none; background: transparent; border: none; font-family: var(--body); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--espresso); padding: 6px 26px 6px 0; cursor: pointer; } .f-select::after { content: ""; position: absolute; right: 6px; top: 50%; width: 7px; height: 7px; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .f-select select:focus { outline: none; color: var(--burgundy); } .shop-count { font-variant-numeric: tabular-nums; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--espresso); } .swatch-filter { display: flex; gap: 10px; align-items: center; } .swatch-filter button { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); position: relative; transition: transform .3s var(--ease); } .swatch-filter button.active { transform: scale(1.18); box-shadow: 0 0 0 1px var(--espresso); } .swatch-filter button[data-c="all"]{ background: conic-gradient(#1c1a19,#cbb99f,#6f6a4d,#6E1F2B,#efe7d8,#1c1a19); } /* ============================================================ JOURNAL / LOOKBOOK ============================================================ */ .journal-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,3vw,44px); } .journal-grid.feature { grid-template-columns: 1.4fr 1fr 1fr; } .j-card { display: block; } .j-card__media { position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--cream-3); margin-bottom: 1.1rem; } .j-card__media img { width:100%;height:100%;object-fit:cover; transition: transform 1.3s var(--ease); } .j-card:hover .j-card__media img { transform: scale(1.05); } .j-card .j-cat { font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color: var(--gold); } .j-card h3 { font-size: clamp(1.3rem,1.8vw,1.7rem); margin:.5rem 0 .5rem; line-height:1.12; } .j-card p { font-size:.9rem; color: var(--muted); max-width: 42ch; } .j-card .j-read { margin-top:.9rem; font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color: var(--burgundy); } .article { max-width: 760px; margin-inline: auto; } .article p { font-size: 1.06rem; line-height: 1.9; color: var(--ink); margin-bottom: 1.5rem; } /* Burgundy drop cap. Was scoped to journal articles; Meryem asked for one on Our Story too, so it now works on any paragraph marked .drop. */ p.drop::first-letter { font-family: var(--display); font-size: 3.4em; float: left; line-height: .8; padding: 6px 12px 0 0; color: var(--burgundy); } .article h3 { font-size: 1.6rem; margin: 2.4rem 0 .8rem; } .article .figure { margin: 2.4rem 0; } .article blockquote { font-family: var(--display); font-style: italic; font-size: clamp(1.4rem,2.2vw,1.9rem); color: var(--espresso); text-align: center; margin: 2.6rem 0; line-height: 1.4; } @media (max-width: 900px){ .journal-grid, .journal-grid.feature, .complete-look .product-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .journal-grid, .journal-grid.feature, .complete-look .product-grid { grid-template-columns: 1fr; } .shop-bar { flex-direction: column; align-items: flex-start; } } /* ============================================================ CONCIERGE / APPOINTMENT ============================================================ */ .concierge { background: var(--burgundy); color: var(--cream); } .concierge .kicker { color: var(--gold-soft); } .appt-card { background: var(--ivory); padding: clamp(28px,3.5vw,52px); } .appt-perks { display:flex; flex-direction:column; gap:18px; } .appt-perks li { display:flex; gap:14px; align-items:flex-start; font-size:.95rem; color: rgba(252,249,243,.85); } .appt-perks svg { width:20px;height:20px;stroke:var(--gold-soft);fill:none;stroke-width:1.2;flex:none;margin-top:2px; } /* Page-load gentle veil */ .page-veil { position: fixed; inset: 0; z-index: 400; background: var(--cream); pointer-events: none; opacity: 1; transition: opacity 1s var(--ease); } .page-veil.lifted { opacity: 0; } @media (prefers-reduced-motion: reduce){ .page-veil { display: none; } .reveal-title .line__in { transform: none; } .reveal { filter: none; } } /* ============================================================ AUDIT FIXES (a11y · SEO · UX · perf polish) ============================================================ */ /* ---- Visible keyboard focus (WCAG 2.4.7 / 2.4.11) ---- */ :focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; border-radius: 2px; } .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible, .news-band input:focus-visible, .footer-news input:focus-visible, .f-select select:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; } /* Light ring on dark surfaces */ .bg-burgundy :focus-visible, .concierge :focus-visible, .site-header:not(.solid) :focus-visible, .lightbox :focus-visible, .mobile-nav :focus-visible, .hero :focus-visible { outline-color: var(--gold-soft); } main:focus { outline: none; } /* ---- Skip link ---- */ .skip-link { position: absolute; left: -999px; top: 0; z-index: 600; background: var(--burgundy); color: var(--ivory); padding: 12px 18px; border-radius: 2px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; } .skip-link:focus { left: 12px; top: 12px; } /* ---- Screen-reader-only ---- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- Lock body scroll behind the mobile menu ---- */ body.menu-open { overflow: hidden; } /* ---- Tabular, lining numerals for prices ---- */ .price { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: .02em; } /* ---- Constrain editorial line-length ---- */ .split .stack p { max-width: 60ch; } .p-card h3, .j-card h3 { text-wrap: balance; } /* Cards in a row end together. When one description runs to three lines and its neighbours run to two, the links underneath sit at three different heights, which is the sort of thing that reads as careless. */ .journal-grid .j-card { display: flex; flex-direction: column; } .journal-grid .j-card p { flex: 1 1 auto; } .journal-grid .j-read { margin-top: auto; padding-top: .9rem; } /* ---- Larger tap targets (WCAG 2.5.8) ---- The marks themselves stay small, which is the point of them. What grows is the invisible area around each one, so a thumb finds it. The menu button in particular was 26x16, which is the main navigation on a phone. */ .menu-toggle, .icon-btn { position: relative; } .menu-toggle::after, .icon-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .swatch-filter button { position: relative; } .swatch-filter button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); } @media (max-width: 860px) { /* Footer links are stacked text on a phone; give each one room to be hit. */ .footer-col li a, .m-social a, .socials a { display: inline-block; padding-block: 10px; } .f-select select { min-height: 44px; } .size-row button { min-height: 44px; } .nav-icons { gap: 26px; } } /* ---- Larger tap targets (WCAG 2.5.8) ---- */ .swatch-filter { gap: 13px; } .swatch-filter button { width: 24px; height: 24px; } .swatch-filter button::after { content: ""; position: absolute; inset: -11px; } /* ---- Show hover-hidden content on touch devices ---- */ @media (hover: none) { .col-card__label p, .col-card__cta { opacity: 1; transform: none; } } /* ---- Close remaining reduced-motion gaps ---- */ @media (prefers-reduced-motion: reduce) { .scroll-cue .bar, .sound-toggle.playing .eq i { animation: none !important; } .figure img, .col-card__media img, .p-card__media img, .j-card__media img { transition: none !important; } } /* ---- Elevated placeholder tiles (arch watermark + radial glow + tonal variety) ---- */ .ph { overflow: hidden; background: radial-gradient(130% 100% at 28% 12%, rgba(200,176,129,.16), transparent 62%), linear-gradient(150deg, var(--cream-2), var(--cream-3)); } .ph::before { content: ""; position: absolute; right: -16%; bottom: -12%; width: 82%; height: 128%; opacity: .42; pointer-events: none; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 460'%3E%3Cpath d='M40 460 V200 C40 110 110 40 200 40 C290 40 360 110 360 200 V460' fill='none' stroke='%23C8B081' stroke-width='2'/%3E%3Cpath d='M75 460 V205 C75 132 130 76 200 76 C270 76 325 132 325 205 V460' fill='none' stroke='%23C8B081' stroke-width='1.3'/%3E%3C/svg%3E"); } .ph > div { position: relative; z-index: 1; } /* deterministic tonal variety so a grid never reads as "empty × 12" */ .collection-grid .col-card:nth-child(3n) .ph, .product-grid a:nth-child(3n) .ph { background: radial-gradient(130% 100% at 72% 16%, rgba(255,253,249,.22), transparent 60%), linear-gradient(150deg, var(--cream-3), var(--taupe)); } .collection-grid .col-card:nth-child(3n+2) .ph, .product-grid a:nth-child(3n+2) .ph { background: radial-gradient(130% 100% at 30% 14%, rgba(110,31,43,.10), transparent 60%), linear-gradient(150deg, var(--cream-2), #E3D3C2); } /* ============================================================ STICKY BUY BAR (phones only) ============================================================ */ .buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; align-items: center; justify-content: space-between; gap: 14px; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--burgundy); color: var(--cream); transform: translateY(110%); transition: transform .45s var(--ease); box-shadow: 0 -10px 30px -18px rgba(0,0,0,.7); } .buy-bar.in { transform: none; } .buy-bar__what { display: flex; flex-direction: column; min-width: 0; } .buy-bar__name { font-family: var(--display); font-size: 1.05rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .buy-bar__price { font-size: .82rem; letter-spacing: .04em; color: rgba(252,249,243,.82); font-variant-numeric: tabular-nums; } .buy-bar__cta { flex: none; padding: .85em 1.6em; font-size: .68rem; letter-spacing: .2em; min-height: 44px; } @media (max-width: 860px) { .buy-bar { display: flex; } } @media (prefers-reduced-motion: reduce) { .buy-bar { transition: none; } } /* The WhatsApp channel line under the email signup. */ .news-alt { margin-top: 1.2rem; font-size: .9rem; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: .55rem; flex-wrap: wrap; } .news-alt a { color: var(--burgundy); } /* ============================================================ OUR STORY: cream ground with a faint mark behind it The cream logo is used as a MASK and filled with burgundy, because the burgundy file carries its own square badge (which would show as a faint block) and the cream file on a cream page is invisible. ============================================================ */ .story-ground { position: relative; background: var(--cream); overflow: hidden; } .story-ground::before { content: ""; position: absolute; /* Centred on the text column rather than on the section. Centred on the section the photograph covered its left half, so only half the mark was visible. Sized against the section height so the whole lockup, wordmark included, sits inside the frame. */ top: 50%; left: 70%; transform: translate(-50%, -50%); height: min(80%, 560px); width: auto; aspect-ratio: 1; background: var(--burgundy); -webkit-mask: url("logo-cream.svg") center / contain no-repeat; mask: url("logo-cream.svg") center / contain no-repeat; opacity: .055; pointer-events: none; z-index: 0; } .story-ground > * { position: relative; z-index: 1; } @media (max-width: 860px) { .story-ground::before { left: 50%; height: min(46%, 360px); opacity: .05; } } /* ============================================================ SOCIAL MARKS One outline weight across all four, so they read as a set rather than four borrowed brand logos. They take their colour from the surface: cream on the burgundy footer, burgundy on the cream pages. ============================================================ */ .social-link { display: inline-flex; align-items: center; gap: .6rem; color: inherit; line-height: 1; transition: opacity .35s var(--ease), transform .35s var(--ease); } .social-ico { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .socials { display: flex; align-items: center; gap: 20px; } .socials .social-link { opacity: .78; } .socials .social-link:hover { opacity: 1; transform: translateY(-2px); } /* Contact page: burgundy on cream, with the name beside the mark. */ #socialRow .social-link { color: var(--burgundy); opacity: 1; } #socialRow .social-ico { stroke-width: 1.25; } /* Mobile menu keeps the names; there is room there. */ .m-social { display: flex; flex-direction: column; gap: 4px; } .m-social .social-link { padding-block: 10px; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; } /* The editorial photographs are moved by script, so the frame must clip them. */ .split__media .figure { overflow: hidden; } .split__media .figure img { will-change: transform; } /* Leaving a page fades rather than cutting. Paired with pageExit() in main.js, which falls back to a normal navigation if anything is unavailable. */ body { transition: opacity .26s var(--ease); } body.leaving { opacity: 0; } @media (prefers-reduced-motion: reduce) { .reveal { transition-delay: 0ms !important; } body, body.leaving { transition: none; opacity: 1; } .split__media .figure img { transform: none !important; } } /* ============================================================ MONOGRAM PATTERN The mark tiled faintly across the whole promise band. The tile is assets/img/monogram-tile.png: the arch-and-figure cropped out of the lockup with transparent margin on all four sides, so it repeats evenly across and down. Used as a mask and filled with cream, because the burgundy logo file carries its own square badge. ============================================================ */ .promise-band { position: relative; overflow: hidden; } .promise-band::before { content: ""; position: absolute; inset: 0; background-color: var(--cream); opacity: .085; pointer-events: none; -webkit-mask-image: url("monogram-tile.png"); mask-image: url("monogram-tile.png"); -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: 86px 86px; mask-size: 86px 86px; -webkit-mask-position: center; mask-position: center; } .promise-band > * { position: relative; z-index: 1; } @media (max-width: 640px) { .promise-band::before { -webkit-mask-size: 64px 64px; mask-size: 64px 64px; } } } /* ---- Product page copy ---- */ .p-headline { font-family: var(--display); font-size: clamp(1.15rem, 1.7vw, 1.4rem); color: var(--espresso); line-height: 1.3; margin-top: 1.2rem; } .colour-names { font-size: .82rem; color: var(--muted); margin-top: .6rem; letter-spacing: .02em; } .price-note { display: block; font-family: var(--body); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; } /* A single One Size button should read as information, not a choice. */ .size-row button[data-size="One Size"] { letter-spacing: .14em; padding-inline: 18px; } /* ---- Journal with two pieces ---- The grid was built for three. With two, they sat squeezed against the left and a third of the page was empty. These two fill the measure instead. */ .journal-grid:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 56px); max-width: 1040px; margin-inline: auto; } .journal-grid:has(> :last-child:nth-child(2)) .j-card__media { aspect-ratio: 4/5; } .journal-grid:has(> :last-child:nth-child(2)) h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); } @media (max-width: 760px) { .journal-grid:has(> :last-child:nth-child(2)) { grid-template-columns: 1fr; } } /* 3. Our Story reads long, so its body type is darker than the site default. --muted is correct for short captions; for six paragraphs it is too light. */ .story-ground .stack p.muted { color: var(--ink); } .story-ground .stack p { font-size: clamp(1rem, 1.25vw, 1.08rem); line-height: 1.72; } /* The two calls to action sit one above the other and fill the column. They used to wrap only because the old labels were long enough to force it; with shorter labels they ended up touching. */ .pdp__info .stack > .btn { display: flex; justify-content: center; width: 100%; } .pdp__info .stack > .btn + .btn { margin-top: 12px; } /* Room between the description and the colour block. */ .pdp__info .muted + .stack-sm { margin-top: 1.9rem; }