/* ========================================================================== SARACEN THREADS — DESIGN AUTHORITY v2.0 Chief Design Officer. Loads LAST. Nothing after it. THE POSITION This is not a shop. It is a dealer's room: a private gallery that handles the textiles of the Eastern courts. Objects hang on dark walls under pooled light, each one labelled, none of them crowded. Everything below serves that one sentence. THE GRAMMAR, AND WHY IT SPLITS IN TWO Indo-Saracenic and Mughal are not the same thing, and the gap between them is the system. MUGHAL is the OBJECT — the lobed medallion, the corner spandrels, the pendants, the wide band between two narrow ones. It already exists, on the loom, unchanged since the 1500s. We never redraw it and never recolour it. INDO-SARACENIC is the HOUSE — a nineteenth-century British style that took Mughal form and built English institutions with it. Which is the literal architecture of "an English house selling the textiles of the Eastern courts". It is the frame: cusped arch, jali screen, khatam star, aina-kari facet, hairline gold. The frame never competes with the content. The instant the ornament is as loud as the textile, we are selling wallpaper. FOUR RULES THAT ARE NOT NEGOTIABLE 1 Dark ground. Always. No pale section, no cream band, no light mode. 2 The object is the brightest thing on the screen. Everything else sits in the bottom third of the value range. That is how a spotlight works. 3 Gold is a metal, so it has range — tarnish at the edge, glint at the centre. Flat yellow reads cheap and always will. 4 One red. Madder, the dye in the goods. It is sealing wax, not paint. It appears at moments of consequence and nowhere else. ========================================================================== */ /* ========================================================================== 1 · TOKENS ========================================================================== */ :root{ /* ---- GROUNDS ------------------------------------------------------------ Warm blacks. Bistre and bitumen, never neutral. A cold black reads as software; a warm black reads as an old building with the lamps on. --ground-1 is LOCKED: the ad creative must use this exact value or the tap-to-load transition reads as a different website and she leaves. */ --ground-0:#0A0705; /* the void. plate mounts, the deepest recess */ --ground-1:#120C07; /* THE PAGE. locked. */ --ground-2:#1A1109; /* raised surfaces, bands, the drawer */ --ground-3:#241810; /* lifted: pressed, active, selected */ /* ---- GOLD — a metal, in five steps -------------------------------------- */ --gold-0:#4A3618; /* tarnish. edges, the far side of a bevel */ --gold-1:#6E5326; /* rules and borders at rest */ --gold-2:#A98B4B; /* base gold. the house colour. */ --gold-3:#D8C596; /* gold as text on dark */ --gold-4:#F0DCA8; /* the glint. highlights only, never a fill */ /* ---- INK ---------------------------------------------------------------- Reversed type blooms and thins on a phone, so every step is one lighter than it would be on paper, and nothing runs below 400 weight. */ --ink-0:#FBF6EC; /* the label. brightest type on the page. */ --ink-1:#F4ECDC; /* headings */ --ink-2:#E2D5BC; /* body */ --ink-3:#A8977A; /* meta, kickers, dimensions */ --ink-4:#6E6250; /* disabled, rule text */ /* ---- THE ONE RED — madder / lac ----------------------------------------- */ --lac-0:#3E1410; --lac-1:#6E2A22; --lac-2:#8F4235; /* ---- LINES -------------------------------------------------------------- A dealer's frame is a hairline. Anything thicker is a picture frame from a high street shop. */ --rule:rgba(169,139,75,.26); --rule-2:rgba(169,139,75,.44); --rule-faint:rgba(169,139,75,.12); --hair:1px; /* ---- TYPE --------------------------------------------------------------- */ --display:"Cormorant Garamond",Garamond,"Times New Roman",serif; --body:"Jost","Helvetica Neue",Arial,sans-serif; --t-hero:clamp(2.6rem,11vw,5.6rem); --t-xl:clamp(2rem,8vw,3.4rem); --t-lg:clamp(1.5rem,5.6vw,2.2rem); --t-md:clamp(1.2rem,4.4vw,1.55rem); --t-body:1rem; --t-small:.86rem; --t-label:.62rem; /* the wall label. tracked, never smaller than this. */ --track-label:.28em; --track-mark:.22em; /* ---- SPACE — one scale, nowhere overridden ------------------------------ */ --space-section:64px; --space-block:32px; --space-element:16px; --gutter:20px; --measure:64ch; /* ---- THE STACK — every fixed thing, in the order she meets them --------- */ --z-head:40; --z-shopbar:50; --z-consent:60; --z-drawer:80; --z-veil:100; /* ---- MOTION — a dealer moves slowly ------------------------------------- */ --ease:cubic-bezier(.22,.61,.36,1); --ease-long:cubic-bezier(.19,1,.22,1); } @media (min-width:900px){ :root{ --space-section:120px; --gutter:44px; } } @media (max-width:380px){ :root{ --gutter:16px; --space-section:52px; } } /* ========================================================================== 2 · THE PAGE ========================================================================== */ html{ overflow-x:hidden; -webkit-text-size-adjust:100% } body{ margin:0; font-family:var(--body); font-weight:400; font-size:var(--t-body); line-height:1.68; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; max-width:100%; /* the lamps. two pools of warmth so the ground is lit, not printed. */ } img,svg,video{ max-width:100%; display:block } img{ height:auto } a{ text-decoration:none } /* ========================================================================== 3 · TYPE ========================================================================== */ .d,h1,h2,h3{ font-family:var(--display); font-weight:300; line-height:1.1; letter-spacing:-.005em; margin:0; text-wrap:balance; } .d--hero{ font-size:var(--t-hero); font-weight:400; font-style:italic; line-height:1.02 } .d--xl{ font-size:var(--t-xl) } .d--lg{ font-size:var(--t-lg) } .d--md{ font-size:var(--t-md) } /* the kicker is a wall label, so it is typeset as one */ .kicker,.label{ font-family:var(--body); font-size:var(--t-label); font-weight:400; letter-spacing:var(--track-label); text-transform:uppercase; margin:0 0 var(--space-element); } p,li,dd{ margin:0 0 1rem; font-size:var(--t-body); line-height:1.7; overflow-wrap:break-word } .lede{ max-width:var(--measure); } .prose{ max-width:var(--measure); margin-inline:auto; font-size:var(--t-body); line-height:1.8 } .prose h1,.prose h2{ margin:2.4rem 0 1rem } .muted,small,.small{ font-size:var(--t-small) } em,i{ font-style:italic } strong,b{ font-weight:500; } /* a price is a fact, not a shout */ .price,.folio__price,.pdp__price{ font-family:var(--display); font-weight:400; font-size:var(--t-md); letter-spacing:.01em; white-space:nowrap; } /* ========================================================================== 4 · ORNAMENT — Indo-Saracenic, and only in the margin The hashia rule: a Mughal page carries its ornament in the margin and mounts the painting whole. We do the same. No ornament crosses a plate. ========================================================================== */ /* the khatam divider — the house mark as a section break */ .rule-khatam{ display:flex; align-items:center; gap:16px; margin:0 0 var(--space-block); } .rule-khatam::before,.rule-khatam::after{ content:""; height:var(--hair); flex:1; } .rule-khatam svg{ width:20px; height:20px; flex:none } /* jali — perforated stone. a texture, at the threshold of visibility. */ .jali{ position:relative } .jali::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-size:40px 40px; } /* the spot — an object should look lit, not placed */ .spot{ position:relative; isolation:isolate } .spot::before{ content:""; position:absolute; z-index:-1; inset:-14% -8% -20%; pointer-events:none; } /* ========================================================================== 5 · THE HEADER — one model, sticky, in the flow saracen.css had position:fixed and layout.css had position:sticky, both live. The bar overlapped content on some pages and reserved phantom space on others. Sticky wins; the fixed model is fully unwound here. ========================================================================== */ .head{ position:sticky !important; top:0; left:auto; right:auto; bottom:auto; width:100%; z-index:var(--z-head); padding-top:env(safe-area-inset-top,0px); border-bottom:var(--hair) solid var(--rule); /* no } .head__bar{ display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; gap:8px; padding:.9rem max(var(--gutter),env(safe-area-inset-left,0px)); } .head.is-stuck .head__bar{ padding-block:.6rem } .head__mark{ text-align:center; min-width:0 } .head__marktext{ font-family:var(--display); font-weight:400; font-size:clamp(.95rem,4vw,1.18rem); letter-spacing:var(--track-mark); text-transform:uppercase; white-space:nowrap; display:block; } .head__tag{ display:block; margin-top:3px; font-family:var(--body); font-size:.48rem; letter-spacing:var(--track-label); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media (max-width:400px){ .head__tag{ display:none } } .head__burger,.head__cart{ min-height:48px; min-width:48px; display:grid; place-items:center; border:0; padding:0; cursor:pointer; font-family:var(--body); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; } .head__burger span{ display:block; width:22px; height:var(--hair); margin:4px auto } .head__n{ display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:5px; padding:0 4px; font-size:.58rem; font-weight:500; border-radius:9px; } /* THE NAV — CEO order, 22 Sep. The fault was not the typeface. layout.css set `.head__nav{gap:8px}`, which loaded after the 2.6rem in saracen.css and won. The gap between items then sat at roughly the letter-spacing INSIDE them, so the word boundaries dissolved and four links read as one continuous phrase: THE FLOOR THE HOUSE DELIVERY CONTACT Keep the tracking — it is doing the right thing for the brand. Widen the gaps and add a separator. Spec: gap >= 3x the letter-spacing inside each item. At .72rem the tracking is .2em = 2.3px, so the floor is 7px; this runs at 2.6rem = 41.6px, which is 18x. The rule is a floor, not a target, and generosity here is free. */ .head__nav{ display:flex; justify-content:center; align-items:center; gap:2.6rem; /* >= 3x the .2em tracking, by a long way */ padding:0 var(--gutter) .9rem; } .head__nav a{ position:relative; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; min-height:44px; display:inline-flex; align-items:center; padding-inline:4px; /* 8px clear between adjacent targets */ } /* a low-contrast middot between items, never after the last */ .head__nav a + a::before{ content:"\00B7"; position:absolute; left:calc(-1.3rem - 2px); opacity:.55; letter-spacing:0; pointer-events:none; } .head__nav a:hover{ } .head__nav a[aria-current="page"]{ } /* Never a horizontal row on a phone. Below 620px the bar is hidden and the items live one-per-line behind the hamburger, which is what .drawer is. */ @media (max-width:619px){ .head__nav{ display:none !important } } /* ========================================================================== 6 · THE DRAWER Was z-index 55 under a z-index 60 header, so it opened underneath and the first item was permanently clipped. Transition delays only reached nth-child(4), so items 5 and 6 sat at opacity 0 forever. ========================================================================== */ .drawer{ position:fixed; inset:0; z-index:var(--z-drawer) !important; display:flex; flex-direction:column; justify-content:flex-start; gap:0; padding:max(96px,calc(env(safe-area-inset-top,0px) + 96px)) 8vw max(32px,env(safe-area-inset-bottom,0px)); overflow-y:auto; -webkit-overflow-scrolling:touch; } .drawer::after{ /* aina in the margin, barely there */ content:""; position:absolute; inset:0; pointer-events:none; background-size:120px 120px; opacity:.05; } .drawer a{ position:relative; z-index:1; font-family:var(--display); font-weight:300; font-size:clamp(1.5rem,7vw,2.2rem); padding:.55rem 0; min-height:56px; border-bottom:var(--hair) solid var(--rule); } .drawer a small{ display:block; margin-top:.2rem; font-family:var(--body); font-size:.55rem; letter-spacing:var(--track-label); text-transform:uppercase; } .drawer.is-open a:nth-child(5){ transition-delay:.44s } .drawer.is-open a:nth-child(6){ transition-delay:.51s } .drawer.is-open a:nth-child(7){ transition-delay:.58s } .drawer__close{ position:absolute; z-index:2; top:max(14px,calc(env(safe-area-inset-top,0px) + 14px)); right:var(--gutter); width:48px; height:48px; display:grid; place-items:center; border:0; padding:0; cursor:pointer; font-family:var(--body); font-size:1.5rem; line-height:1; } body.is-locked{ overflow:hidden } /* ========================================================================== 7 · THE RAIL — the bug that broke the shop .folios was defined SEVEN times across three stylesheets. Two set grid-template-columns (explicit tracks), three set grid-auto-columns (implicit). layout.css loads last and reimposed one explicit 1fr track on a container already switched to grid-auto-flow:column with overflow-x:auto. Item 1 took the explicit track, the rest went implicit, width went indefinite, track sizing collapsed to min-content — and min-content for a text node is the width of its widest single character. Hence product names rendering as vertical columns of letters, prices printing on top of each other, and taps landing on overlapping slivers instead of products. Flex, not grid. Flex cannot be half-overridden by a grid-template-columns declaration arriving from another file. ========================================================================== */ .folios{ display:flex !important; flex-wrap:wrap; gap:var(--space-block); grid-template-columns:none !important; grid-auto-columns:auto !important; grid-auto-flow:row !important; overflow:visible; margin:0; padding:0; } .folio{ display:block; flex:1 1 100%; min-width:0; /* the line that stops min-content collapse */ max-width:100%; } @media (max-width:619px){ .folios{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); padding-bottom:1.2rem; } .folios::-webkit-scrollbar{ display:none } .folio{ flex:0 0 78vw; max-width:320px; scroll-snap-align:center } } @media (min-width:620px){ .folio{ flex:0 1 calc(50% - var(--space-block)/2) } } @media (min-width:900px){ .folio{ flex:0 1 calc(25% - var(--space-block)*3/4) } } .swipe-hint{ font-family:var(--body); font-size:.54rem; letter-spacing:var(--track-label); text-transform:uppercase; margin:0 0 .8rem; } @media (min-width:620px){ .swipe-hint{ display:none } } /* the same disease, same cure, everywhere else it repeats */ .why,.vs,.sets,.rooms,.cards,.grid,.strip__in{ min-width:0 } .why>*,.vs>*,.sets>*,.rooms>*,.cards>*{ min-width:0 } /* ========================================================================== 8 · THE PLATE AND THE WALL LABEL A card carries a badge, a price and an add-to-cart. A gallery carries a plate and a label. This converts one into the other. The mount is commercial, not decorative. Ten of the fifteen palettes are pale-ground — The Winter Palace #CFC6B6, The Rose Salon #DED3CD, every white-base counterpane. Against a near-black page those glare while The Indigo Medallion sits back, and a rail mixing them looks broken rather than curated. A fixed dark mount equalises optical weight, so a white cloth and a navy panel hang as equals. ========================================================================== */ .folio__mount{ position:relative; border:var(--hair) solid var(--rule); padding:clamp(12px,3.2vw,20px); overflow:hidden; transition:border-color .5s var(--ease); } .folio__mount::after{ /* the hairline inner frame. the dealer's line. */ content:""; position:absolute; inset:7px; border:var(--hair) solid var(--rule-faint); pointer-events:none; } .folio:hover .folio__mount,.folio:focus-visible .folio__mount{ } .folio__art{ position:relative; /* was #F4EEE0 / #FAF6EC — a cream lightbox on a black page, and it was defined twice */ aspect-ratio:4/5; display:grid; place-items:center; overflow:hidden; } .folio__art img,.folio__art svg{ width:100%; height:100%; object-fit:cover } .folio__art::after{ /* the pooled light */ content:""; position:absolute; inset:0; pointer-events:none; } /* the label */ .folio__meta{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; /* price drops below the name rather than printing on top of it */ margin-top:1rem; padding-bottom:.55rem; border-bottom:var(--hair) solid var(--rule); } .folio__name{ font-family:var(--display); font-weight:300; font-size:clamp(1.15rem,4.4vw,1.42rem); line-height:1.18; margin:0; min-width:0; flex:1 1 auto; overflow-wrap:break-word; } .folio__price{ flex:0 0 auto } .folio__note{ margin:.75rem 0 0; font-size:var(--t-small); line-height:1.62; min-width:0; overflow-wrap:break-word; } /* the colourway dots are the only place a product's own colour is allowed to touch the page ground */ .folio__ways{ display:flex; gap:6px; margin-top:.9rem } .folio__ways i{ width:11px; height:11px; border-radius:50%; } /* ========================================================================== 9 · BUTTONS — a dealer does not shout ========================================================================== */ .btn,.cta,button.btn,a.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:1rem 2.4rem; font-family:var(--body); font-size:.68rem; font-weight:400; letter-spacing:var(--track-label); text-transform:uppercase; border:var(--hair) solid var(--gold-2); cursor:pointer; transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease); } .btn:hover,.cta:hover{ } .btn--fill,.btn--buy,.cta--buy{ font-weight:500; } .btn--fill:hover,.btn--buy:hover,.cta--buy:hover{ } .btn--light{ } .btn--light:hover{ } .btn--quiet{ } .cta--off{ opacity:.42; border-style:dashed; pointer-events:none; cursor:not-allowed } /* ========================================================================== 10 · PALE GROUNDS — struck Standing instruction: dark ground, cream and gold ornament, no exceptions. The House page dropped to a cream field halfway down, which is a different brand appearing mid-scroll. ========================================================================== */ .light,section.light,.band--light,.paper,.cream{ } .light h1,.light h2,.light h3,.light .d{ } .light .kicker,.light .muted,.light small{ } .light a{ } /* the one red, used correctly: a sealed band, not a page */ .blood,.band--blood,.strip--blood{ border-block:var(--hair) solid rgba(169,139,75,.22); } .dark,.gallery{ } /* ========================================================================== 11 · RHYTHM White space is what makes £499 look correct. Density reads as a discount site. When unsure, double it. ========================================================================== */ section{ padding-block:var(--space-section) } .wrap,.sec__in{ padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px)); } .strip{ padding-block:var(--space-block); display:block } .mt1{ margin-top:var(--space-element) } .mt2{ margin-top:var(--space-block) } .mt3{ margin-top:var(--space-section) } main>section:first-child{ padding-top:var(--space-block) } /* ========================================================================== 12 · THE COOKIE NOTICE Correction to v2.0. This section previously styled .consent__in / __t / __a, which is a full-width bottom bar that NO markup renders — tracking.php emits .consent__row / .consent__b, the small bottom-left notice. So v2.0 was styling dead code while overriding the live component's padding and border. The dead rule has now been deleted from shop.css and this block dresses the real one in the ramps instead of fighting its geometry. Two things here are deliberate and must not be "tidied": The two buttons are the same size, weight and colour. A dimmed Decline beside a bright Accept is the exact pattern the ICO writes to people about. Do not fill the Accept button. On a phone the notice SHIFTS UP above the buy bar rather than hiding. v2.0 set display:none when the buy bar was up, which removes a legal notice to make room for a button. Wrong, and worse UX than moving it 84px. ========================================================================== */ .consent{ border:var(--hair) solid var(--rule-2); font-size:.76rem; line-height:1.58; } .consent a{ text-decoration:underline; text-underline-offset:2px } .consent__row{ gap:.5rem; margin-top:.75rem } .consent__b{ font-family:var(--body); font-size:.64rem; font-weight:400; letter-spacing:var(--track-label); text-transform:uppercase; border:var(--hair) solid var(--gold-1); min-height:44px; padding:.55rem .7rem; transition:background .3s var(--ease),border-color .3s var(--ease); } @media (hover:hover){ .consent__b:hover{ } } @media (hover:none){ .consent__b:active{ } } /* the drawer is the one thing that outranks it, because it covers the screen */ body.is-locked .consent, .drawer.is-open ~ .consent{ opacity:0; pointer-events:none } /* ========================================================================== 12b · THE LAST THREE PALE GROUNDS Found on a sweep of the merged build. All three predate v2.0 and all three breach the standing instruction. .screen is the interesting one. It was a cream-to-sand gradient with the jali laid over it — a pale panel wearing a stone screen. That is backwards. A jali is lit FROM BEHIND. You read it as dark perforated stone against a glow, never as a pale field. The corrected version is darker AND more accurate, which is usually how these go. ========================================================================== */ .screen{ position:relative; overflow:hidden; } .screen::before{ /* the light behind the stone */ content:""; position:absolute; inset:-20%; pointer-events:none; } .screen__mesh{ /* the stone itself, not a decal */ position:absolute; inset:0; background-size:40px 40px; opacity:1; } .screen__msg{ position:relative; z-index:2; } .screen__msg .d,.screen__msg h2,.screen__msg h3{ } /* the hero call to action. Was a cream pill with a 3px madder border — the brightest object on the page, competing with the piece it sits under, inside a frame three times heavier than every other line in the system. */ .ivan__cta{ border:var(--hair) solid var(--gold-2) !important; padding:.85rem 1.8rem !important; min-height:48px; display:inline-flex; align-items:center; letter-spacing:var(--track-label); transition:background .4s var(--ease),border-color .4s var(--ease); } .ivan__cta:hover{ } /* the buy button is gold, not cream. Cream is what the goods are made of; gold is what the house is made of, and the button belongs to the house. */ .shopbar__b,.stickybuy__b{ border:0; font-weight:500; letter-spacing:var(--track-label); } .skip{ } /* ========================================================================== 12c · THE HERO GROUND A full screen of madder at 52% aina opacity, which is rule 4 broken as completely as it can be: the one red is sealing wax, not paint, and here it was the entire first frame. It also collided with the ad: the creative is built on --ground-1, so she tapped a near-black ad and landed on a red page. That mismatch reads as a different website and costs her between tap and paint, which is the most expensive place to lose someone. The ground is now the page ground. The red survives where it belongs — a deep pool low and off-centre, the way a lamp throws colour onto a wall, so the warmth is still there and the object is still the brightest thing on it. ========================================================================== */ .ivan{ } .ivan::before{ /* the mirror, at a whisper, not a sheath */ opacity:.14 !important; background-size:160px 160px !important; } .ivan::after{ /* seat the hero into the page below it */ content:""; position:absolute; left:0; right:0; bottom:0; height:22%; pointer-events:none; } .ivan .d,.ivan h1{ } /* ========================================================================== 17 · BRAND PHOTOGRAPHY These arrive as bright stock daylight and the house is a dark room, so every one is graded down before it ships and then seated here: a hairline frame, a vignette that ties the edges into the page, and a warm multiply so the image belongs to the same lamp as everything else. They are atmosphere. They never carry a provenance claim and never appear on a product page. See brand_image() in functions.php. ========================================================================== */ .bfig{ position:relative; margin:0; overflow:hidden; border:var(--hair) solid var(--rule); } .bfig img{ width:100%; height:100%; object-fit:cover; display:block; } .bfig::after{ /* seat it in the page */ content:""; position:absolute; inset:0; pointer-events:none; } .bfig--tall{ aspect-ratio:3/4 } .bfig--wide{ aspect-ratio:16/9 } .bfig--square{ aspect-ratio:1/1 } /* the plate treatment, for the one image that carries a section */ .bfig--plate{ padding:clamp(10px,2.6vw,18px); } .bfig--plate img{ border:var(--hair) solid var(--rule-faint) } /* No captions. A brand photograph is shown as it is — nothing underneath it explaining, qualifying or apologising for it. Which changes how the honesty rule is kept, and for the better: it is kept by not using a photograph that needs defending. The maker-at-the-wheel frame was removed for exactly that reason — it read as our workshop and needed a line underneath saying it was not. An image that requires a disclaimer is the wrong image. The rule lives in brand_image() where the customer never sees it, and in the choosing. */ .bfig figcaption,.bcap{ display:none } /* a photograph used as a section ground, well under the type */ .photoband{ position:relative; isolation:isolate; overflow:hidden } .photoband>.bfig{ position:absolute; inset:0; border:0; z-index:-1; } .photoband>.bfig img{ } .photoband>.bfig::after{ } /* ========================================================================== 18 · SCALE — the product page and the photo band Both faults in the screenshots are the same fault: things sized to fill the space available rather than sized to be read. ========================================================================== */ /* ---- 18.1 · THE PHOTO BAND ----------------------------------------------- It was filling the viewport. .photoband had no height of its own, the figure inside is absolute inset:0, and the section grew until the copy pushed it — so a 1417px photograph was being stretched across a full-bleed band and went soft. The picture is now re-exported wider AND the band is given a height, because a photograph should be a band across the page, not a second hero. The copy is what the section is for. */ .photoband{ min-height:clamp(380px, 52vh, 560px); display:grid; place-items:center; padding-block:clamp(56px, 8vw, 96px); } .photoband>.bfig{ position:absolute; inset:0; border:0; z-index:-1 } .photoband>.bfig img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; } .photoband .sec__in{ position:relative; z-index:1; max-width:44ch } /* ---- 18.2 · THE PRODUCT PAGE --------------------------------------------- The piece was running 3:4 portrait at the full column width, which on a laptop is roughly 790px tall before a word of copy — so the price, the sizes and the button all sat below the fold and she scrolled past the argument to reach them. It is capped to the viewport now and CONTAINED rather than cropped, because a panel mounted whole is the whole point. */ .pdp__stage img{ max-height:min(62vh, 620px); width:100%; height:auto; object-fit:contain !important; aspect-ratio:auto !important; } .pdp__stage{ display:grid; place-items:center; padding:clamp(10px,1.6vw,18px) } .pdp__thumbs{ margin-top:.6rem; gap:.45rem } .pdp__thumbs button{ aspect-ratio:1 } /* Body copy is left-aligned. It was centred, and centred prose in a narrow column gives a ragged left edge that the eye has to re-find on every line — which is why the bullet list read as four floating fragments with a diamond stranded out to the left of each one. Headings may centre. Sentences do not. */ .pdp__buy, .pdp__sub, .pdp__bullets, .pdp__bullets li, .pdp__ref, .pdp .size, .pdp .sizes{ text-align:left } .pdp__hook{ text-align:left; font-size:clamp(1.6rem,3.2vw,2.5rem); line-height:1.1 } .pdp__sub{ font-size:1rem; line-height:1.62; margin-top:.9rem; max-width:52ch } /* the bullets were a grid with a 0.55rem gap that read as 2rem because each line was centred and short. Tighter, flush left, diamond against the text. */ .pdp__bullets{ display:grid; gap:.42rem; margin-top:1.1rem } .pdp__bullets li{ padding-left:1.25rem; font-size:.9rem; line-height:1.5 } .pdp__bullets li::before{ left:0; top:.55em; width:7px; height:7px } /* ---- 18.3 · THE SIZE PICKER ---------------------------------------------- Four options at roughly 120px each is 480px of picker. They are choices, not sections. Halved, and the row reads across in one pass: size, then the centimetres under it, then the price hard right. */ .pdp .size,.sizes label,.size{ padding:.9rem 1.15rem !important; min-height:0; display:grid !important; grid-template-columns:22px minmax(0,1fr) auto; /* khatam · label · price */ align-items:center; gap:1rem; cursor:pointer; } .size__l{ display:block; min-width:0 } .size__n,.size__ft{ font-size:1.02rem; letter-spacing:.06em } .size__cm{ font-size:.72rem; letter-spacing:.05em; margin-top:.1rem } .size__p{ font-size:1.15rem } .size__tag{ font-size:.55rem; padding:.14rem .4rem; margin-left:.45rem } .sizes{ gap:.5rem !important; margin-top:.9rem !important } /* ---- 18.4 · THE UPSELL — belt and braces on the capitals ------------------ v2.0 keyed a form-label style on the bare `label` element and the upsell is