in index.html to turn this on and off. */ .tiles.soft{grid-template-columns:1fr 1fr;gap:clamp(26px,3.6vw,44px)} @media(min-width:900px){.tiles.soft{grid-template-columns:repeat(3,1fr)}} .tiles.soft .tile{text-align:center} .tiles.soft .tile h3{margin-top:18px;font-size:clamp(18px,2.2vw,23px)} .tiles.soft .tile .hand{ display:block;margin-top:4px; font-family:'Sunshine','Segoe Script',cursive;font-size:clamp(17px,2vw,21px); line-height:1.3;color:var(--caramel-dp);opacity:.9; } .tiles.soft .tile .it{margin-top:2px} .tiles.soft .tile p{margin-left:auto;margin-right:auto} .tiles.soft .tile .go{margin-top:12px} .tiles.soft .flag{top:20px;left:20px} /* ── the token chooser on a reward jar ─────────────────────────────────── */ .token-row{list-style:none;display:flex;flex-wrap:wrap;gap:16px 18px;margin-top:14px} .token-row button{ background:none;border:0;padding:0;cursor:pointer;font-family:inherit; display:grid;justify-items:center;gap:8px;width:76px; font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink); opacity:.62;transition:opacity .2s,color .2s; } .token-row button .disc{ display:grid;place-items:center;width:52px;height:52px;border-radius:50%; background:var(--cream-2);border:1px solid var(--line-l); transition:transform .25s,border-color .25s,box-shadow .25s; } .token-row button .nm{display:block;line-height:1.35;min-height:2.5em} .token-row button:hover{opacity:1} .token-row button:hover .disc{transform:scale(1.07)} .token-row button[aria-pressed="true"]{opacity:1;color:var(--caramel-dp)} .token-row button[aria-pressed="true"] .disc{ border-color:var(--caramel-dp);box-shadow:0 0 0 3px rgba(198,166,138,.28); } .token-row button:focus-visible .disc{outline:2px solid var(--caramel-dp);outline-offset:4px} /* ── the shop's jump row ─────────────────────────────────────────────────── Small links above the bands so nobody has to scroll past three collections to reach the one they came for. It sticks under the header as you go. */ .jump{ position:sticky;top:0;z-index:30; background:rgba(240,232,220,.94);backdrop-filter:blur(8px); border-bottom:1px solid var(--line-l); } .jump ul{ list-style:none;display:flex;flex-wrap:wrap;gap:6px 26px; padding:14px 0;margin:0;justify-content:center; } .jump a{ display:inline-flex;align-items:baseline;gap:7px;text-decoration:none; font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--ink);opacity:.6;padding:4px 0; border-bottom:1px solid transparent;transition:opacity .2s,border-color .2s,color .2s; } .jump a span{font-size:9px;letter-spacing:0;opacity:.5} .jump a:hover{opacity:1} .jump a[aria-current="true"]{opacity:1;color:var(--caramel-dp);border-bottom-color:currentColor} .jump a.soon{opacity:.38} .jump a:focus-visible{outline:2px solid var(--caramel-dp);outline-offset:3px} @media(max-width:600px){ .jump ul{gap:4px 16px;padding:11px 0} .jump a{font-size:9px;letter-spacing:.14em} } /* the bands are jump targets, so they must clear the two sticky bars */ .coll-band{scroll-margin-top:112px} /* Every product card is the same width in every band, whether the collection holds two pieces or four. A two-product band used to get wide columns and a four-product band narrow ones, which made the images different sizes down the page. */ @media(min-width:700px) and (max-width:999px){ .coll-band .prod-grid{grid-template-columns:1fr 1fr} } @media(min-width:1000px){ .coll-band .prod-grid.three{grid-template-columns:repeat(3,1fr)} } /* ══════════════════════════════════════════════════════════════════════ THE HOME PAGE HERO The wordmark and the headline in the middle, one cut-out piece leaning in from each corner. Four in five people used to land here and leave without ever reaching the shop; the fix was not better words, it was showing the actual pieces before anyone has to scroll or read. Cream ground rather than the old cocoa, because a piece cut out of its background needs light behind it to read as an object. Everything is sized off the width of the hero, so the whole arrangement scales together. To move a piece, change the corner values on its pc class. To swap which piece sits where, change the src in index.html. The cutouts are in images/cut/ as .webp with transparent backgrounds. ══════════════════════════════════════════════════════════════════════ */ /* One ground for the hero and the best sellers together. The clipping lives here rather than on the hero, so a piece leaning out of the hero carries on into the band below instead of being sliced at the join. */ .cream-field{ position:relative;overflow:hidden;background:var(--cream);color:var(--ink); } /* Light pooling near the top, the way it does on a cloth by a window, so the words sit in the brightest part and the edges fall away. */ .cream-field::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(85% 42% at 50% 24%, rgba(255,253,250,.72) 0%, rgba(255,253,250,.28) 44%, rgba(255,253,250,0) 74%), radial-gradient(80% 40% at 50% 100%, rgba(198,166,138,.13) 0%, rgba(198,166,138,0) 72%); } /* A woven grain over the top, drawn by the browser from the line below: no image to load, and nothing photographed to go out of date. */ .cream-field::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; opacity:.055;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px 200px; } /* the hero itself is now just the middle of that field */ .hero.shop-hero{ background:transparent;color:var(--ink);position:relative;overflow:visible; padding:clamp(34px,5vw,64px) 0; display:flex;align-items:center; /* shorter than it used to be: the product cutouts in the corners are gone, so the words no longer need the room, and the Lolly Letters band underneath comes into view sooner */ min-height:clamp(460px,62vh,660px); } /* the best sellers sit on the same ground, so no band of its own */ .cream-field .home-shop{background:transparent;position:relative;z-index:2} .hero.shop-hero .wrap{position:relative;z-index:3;padding-top:0;padding-bottom:0;width:100%} /* ── the four pieces ── */ /* Capped and centred, and deliberately narrower than the page: on a wide screen the corners would otherwise drift out to the edges and leave the words marooned in the middle. Widen this one number to spread the pieces apart again. */ .sh-pieces{ position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%); width:100%;max-width:1180px;z-index:1;pointer-events:none; } .sh-pieces .pc{ position:absolute;width:auto;max-width:none;height:auto; filter:drop-shadow(0 16px 26px rgba(43,33,28,.20)); } /* sized off the HEIGHT of the hero, not its width: these are tall pieces, and on a wide screen a width-based size makes them enormous */ /* the two jars sit fully inside the top edge, because a jar with its lid sliced off reads as a mistake. The boards below are allowed to run off the bottom, which reads as a crop. */ .sh-pieces .pc1{left:-6%; top:6%; height:48%; transform:rotate(-16deg)} .sh-pieces .pc2{right:-7%; top:5%; height:50%; transform:rotate(15deg)} .sh-pieces .pc3{left:-9%; bottom:-12%; height:50%; transform:rotate(13deg)} /* the lilac jar mirrors the pink one across the page rather than leaning the same way, so the four pieces read as scattered instead of stacked */ .sh-pieces .pc4{right:-9%; bottom:-11%; height:50%; transform:rotate(16deg)} /* A fifth piece filling the gap down the left side, leaning in from off the edge and sitting BEHIND the other four — z-index:0 on purpose. The sheer fabric in its photograph lies across the jar's right-hand edge, so the cutout follows the fabric rather than the acrylic there. Tucking that edge under the notes board hides it. If you ever reshoot this jar with nothing draped over it, the piece can come forward. It is also the one that goes if the pile ever looks crowded: delete this rule and its line in index.html. */ .sh-pieces .pc5{left:-19%; top:31%; height:45%; transform:rotate(-7deg); z-index:-1} /* ── the words ── */ .hero.shop-hero .sh-words{ max-width:34rem;margin:0 auto;text-align:center;position:relative;z-index:3; } .hero.shop-hero .mark{ font-family:'Prata',serif;font-size:clamp(17px,2.1vw,23px); letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--cocoa-2); } /* max-width:none because the dark hero caps its paragraphs at 44ch, which at this size would fold the line in half */ .hero.shop-hero .eb, .hero.shop-hero .made{max-width:none} .hero.shop-hero .eb{ display:block;margin-top:9px;font-size:clamp(8.5px,1vw,10px); letter-spacing:.28em;text-indent:.28em;text-transform:uppercase; color:var(--caramel-dp);opacity:.9; } .hero.shop-hero .rule{ display:block;width:46px;height:1px;margin:clamp(16px,2vw,22px) auto; background:var(--caramel);opacity:.7; } .hero.shop-hero h1{ font-family:'Prata',serif;font-weight:400;color:var(--cocoa-2); font-size:clamp(34px,5.6vw,62px);line-height:1.1;margin:0;max-width:none; } .hero.shop-hero h1 em{ display:block;font-style:italic;color:var(--caramel-dp);margin-top:2px; } .hero.shop-hero .hrt{ display:block;width:20px;height:auto;margin:clamp(14px,1.8vw,20px) auto 0; color:var(--caramel-dp);opacity:.75; } .hero.shop-hero .cats{ margin-top:clamp(14px,1.8vw,20px);font-size:clamp(9px,1vw,10.5px); letter-spacing:.24em;text-indent:.24em;text-transform:uppercase; line-height:2.1;opacity:.62;max-width:none; } .hero.shop-hero .cats i{font-style:normal;opacity:.45;margin:0 3px} .hero.shop-hero .cta-pair{ margin-top:clamp(18px,2.2vw,26px); display:flex;gap:9px;flex-direction:column;align-items:center; } .hero.shop-hero .cta-pair .btn{ min-width:min(300px,78vw);text-align:center; padding-top:12px;padding-bottom:12px; } /* the outline button sits over the pieces, so it needs a ground of its own rather than letting a board show through the middle of it */ .hero.shop-hero .cta-pair .btn:not(.solid){background:var(--cream)} /* warm brown here rather than the near-black used elsewhere: on a cream ground beside cut acrylic it reads softer, and it is the caramel already in the palette rather than a new colour */ .hero.shop-hero .cta-pair .btn.solid{ background:var(--caramel-dp);border-color:var(--caramel-dp);color:var(--cream); } .hero.shop-hero .cta-pair .btn.solid:hover, .hero.shop-hero .cta-pair .btn.solid:focus-visible{ background:var(--cocoa-2);border-color:var(--cocoa-2); } .hero.shop-hero .made{ margin-top:16px;font-size:9.5px;letter-spacing:.22em;text-indent:.22em; text-transform:uppercase;opacity:.45; } /* On a phone the pieces shrink into the corners rather than crowding the words, and the buttons go full width. */ @media(max-width:760px){ .hero.shop-hero{min-height:0;padding:clamp(56px,14vw,84px) 0 clamp(20px,6vw,36px)} /* On a phone the pieces sit at the very corners, above and below the words rather than beside them, so they stay a decent size and most of each one is actually on the screen. */ .sh-pieces{max-width:none} /* four corners is already a full frame on a phone, so the fifth sits out */ .sh-pieces .pc5{display:none} .sh-pieces .pc1{left:-6%; top:0; height:24%} .sh-pieces .pc2{right:-8%; top:-1%; height:25%} .sh-pieces .pc3{left:-9%; bottom:-6%; height:24%} .sh-pieces .pc4{right:-8%; bottom:-5%; height:24%} .hero.shop-hero .sh-words{max-width:19.5rem} .hero.shop-hero .sh-words{max-width:22rem} .hero.shop-hero h1{font-size:clamp(29px,8.4vw,40px)} .hero.shop-hero .cta-pair .btn{min-width:0;width:100%} } @media(max-width:420px){.hero.shop-hero .cats{line-height:2.3}} /* ══ THE SHOP, ON THE FRONT PAGE ════════════════════════════════════════ Every piece with its price, one click from the top of the site. Same card as the shop page, so nothing has to be kept in step by hand. On a phone it goes two across for the same reason the shop bands do: nine products one per screen is a very long scroll. */ .home-shop{padding-top:clamp(38px,5vw,64px)} .home-shop .sec-head{text-align:center;margin-bottom:clamp(30px,4vw,46px)} .home-shop .sec-head .eb{justify-content:center} .home-shop .sec-head h2, .home-shop .sec-head .note{margin-left:auto;margin-right:auto} .home-shop .prod p{margin-left:auto;margin-right:auto} .home-shop-foot{text-align:center;margin-top:clamp(34px,4.4vw,56px)} @media(max-width:699px){ .home-shop .prod-grid{grid-template-columns:1fr 1fr;gap:22px 14px} .home-shop .prod h3{font-size:15.5px;margin-top:13px;line-height:1.25} .home-shop .prod .it{font-size:11px;margin-top:3px} .home-shop .prod .price{font-size:14px;margin-top:7px} .home-shop .prod .instal{font-size:10.5px;margin-top:5px} /* an odd last piece would sit alone in the left column with a gap beside it, so it takes the full width and centres instead */ .home-shop .prod-grid .prod:last-child:nth-child(odd){ grid-column:1 / -1;max-width:64%;margin-left:auto;margin-right:auto; } } /* ══ THE OPTION DROPDOWNS ═══════════════════════════════════════════════ Every choice on a product page is one of these: a closed box showing what is chosen, and a list underneath showing each option with a small picture of it. Built in site.js under THE OPTION DROPDOWNS. */ .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} .sel{position:relative;display:block;margin-top:10px} .sel-btn{ width:100%;display:flex;align-items:center;gap:11px;text-align:left; font-family:inherit;font-size:14px;font-weight:300;color:var(--ink); background:var(--white);border:1px solid var(--line-l);padding:10px 12px; cursor:pointer;transition:border-color .2s; } .sel-btn:hover{border-color:var(--caramel)} .sel-btn:focus-visible{outline:none;border-color:var(--caramel-dp)} .sel[data-open="true"] .sel-btn{border-color:var(--caramel-dp)} .sel-caret{width:12px;height:8px;flex:0 0 auto;margin-left:auto;opacity:.5; transition:transform .18s} .sel[data-open="true"] .sel-caret{transform:rotate(180deg)} .sel-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; line-height:1.3} /* the little picture: a colour circle, a token, a letter set in the font */ .sel-face{flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center; justify-content:center;overflow:hidden} .sel-face svg{width:100%;height:100%;display:block} .sel-face .dot{width:22px;height:22px;border-radius:50%;display:block; box-shadow:inset 0 0 0 1px rgba(43,33,28,.16)} .sel-list{ position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px); max-height:298px;overflow:auto;list-style:none;margin:0;padding:5px 0; background:var(--white);border:1px solid var(--line-l); box-shadow:0 14px 34px rgba(43,33,28,.16); } .sel-list li{ display:flex;align-items:center;gap:11px;padding:8px 12px;cursor:pointer; font-size:14px;font-weight:300;line-height:1.3; } .sel-list li:hover,.sel-list li:focus{background:var(--cream);outline:none} .sel-list li[aria-selected="true"]{background:var(--cream)} .sel-list li[aria-selected="true"] .sel-name::after{ content:"✓";margin-left:8px;color:var(--caramel-dp);font-size:12px} .sel-list .sel-note{margin-left:auto;font-size:11px;opacity:.5;font-style:italic; white-space:nowrap} @media(max-width:520px){ .sel-list .sel-note{display:none} .sel-list{max-height:250px} } /* ══ THE NAME PREVIEW ═══════════════════════════════════════════════════ No drawing of the piece any more, just the wording itself set in the font and the colour chosen, so nobody has to guess what Madina looks like with their child's name in it. Hidden until something is typed. */ .name-prev{ margin-top:14px;background:var(--white);border:1px solid var(--line-l); padding:22px 18px;text-align:center;overflow:hidden; } .name-prev .word{ display:block;line-height:1.18;word-break:break-word; font-size:38px;transition:color .25s; } .name-prev .cap{ display:block;margin-top:12px;font-family:'Poppins',sans-serif;font-size:9.5px; letter-spacing:.24em;text-transform:uppercase;opacity:.42;color:var(--ink); } @media(max-width:520px){.name-prev{padding:18px 14px}.name-prev .word{font-size:30px}} /* a colourway circle: the jar on one half, the tokens on the other */ .sel-face .dot.duo{box-shadow:inset 0 0 0 1px rgba(43,33,28,.22)} /* the name preview stands on its own now, so it needs its own top margin when the block above it is a heading rather than a dropdown */ #namePrev{margin-top:20px} /* ══ THE COLLECTION BOXES ═══════════════════════════════════════════════ The shop page is a set of named boxes, one per collection, cut with the same scalloped edge as the photographs. No picture inside on purpose: a collection holds several pieces and one photo can only ever sell one of them. Built in shop.html under THE COLLECTIONS. */ .coll-boxes{padding:clamp(30px,4.5vw,56px) 0 clamp(48px,6vw,84px)} /* minmax(0,1fr), not 1fr: a box with an aspect-ratio would otherwise claim a minimum width off its own content and push the row wider than the page */ .box-grid{display:grid;gap:clamp(20px,3vw,34px)} @media(min-width:640px){.box-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1000px){.box-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .coll-box{ position:relative;text-decoration:none;color:var(--ink); /* the box centres its own words: a percentage height on the inner block would collapse against min-height and drop the text out of the shape */ display:flex;align-items:center;justify-content:center; /* a minimum height rather than a fixed ratio, so a long collection name makes its box taller and the whole row grows with it, instead of the words spilling out of the scalloped edge */ min-height:clamp(186px,15vw,232px);min-width:0; padding:clamp(20px,2.2vw,30px); /* opacity is in here as well as transform: this rule sits after .rv in the file, so a transition naming only transform would cancel the fade the boxes arrive with and they would snap onto the page instead */ transition:transform .35s cubic-bezier(.3,1,.4,1), opacity .65s ease; } /* the scalloped fill and its outline, the same two shapes the photo frames use, so nothing new has to be drawn */ .coll-box .bx,.coll-box .ln{position:absolute;inset:0;pointer-events:none} .coll-box .bx{ background:var(--white); -webkit-mask:url(../images/wave.svg) center/100% 100% no-repeat; mask:url(../images/wave.svg) center/100% 100% no-repeat; } .coll-box .ln{ background:var(--frame-line,#4A3830); -webkit-mask:url(../images/wave-line.svg) center/100% 100% no-repeat; mask:url(../images/wave-line.svg) center/100% 100% no-repeat; } .coll-box .in{ position:relative;z-index:2;width:100%; display:flex;flex-direction:column;align-items:center; text-align:center;gap:7px; } .coll-box .it{font-style:italic;color:var(--caramel-dp);font-size:12.5px} .coll-box .nm{ font-family:'Prata',serif;font-weight:400;color:var(--cocoa-2); font-size:clamp(20px,2.5vw,27px);line-height:1.2;max-width:14ch; } .coll-box .hand{ font-family:'Hailey','Segoe Script',cursive;font-size:15px; color:var(--caramel-dp);opacity:.85;max-width:22ch;line-height:1.3; } .coll-box .go{ margin-top:6px;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase; text-indent:.22em;color:var(--ink);opacity:.5; } /* ── THE BOWS ────────────────────────────────────────────────────────── Bigger than the ones on the photographs, in chocolate rather than the frame brown, and lifted clear of the box with a soft shadow so they read as sitting in front of it rather than printed on it. Which boxes get one is decided by i % 3 in shop.html: drop that condition for a bow on every box, or change the number for fewer. */ .coll-box .cnr-bow{ width:clamp(74px,30%,124px);color:var(--cocoa); top:-9%;left:-6%;transform:rotate(-16deg);z-index:6; filter:drop-shadow(0 5px 7px rgba(43,33,28,.24)); transition:transform .35s cubic-bezier(.3,1,.4,1); } .coll-box:hover .cnr-bow{transform:rotate(-8deg) scale(1.05)} /* Once the boxes sit three across, the right-hand one leans the other way so a row never looks stamped out by machine. Only from 1000px up: in a single column a mirrored bow would hang off the edge of a phone. */ @media(min-width:1000px){ .box-grid > .coll-box:nth-child(3n) .cnr-bow{ left:auto;right:-6%;transform:rotate(16deg) scaleX(-1); } .box-grid > .coll-box:nth-child(3n):hover .cnr-bow{ transform:rotate(8deg) scaleX(-1) scale(1.05); } } @media(max-width:520px){ .coll-box .cnr-bow{width:66px;top:-15px;left:-8px} } /* the "new arrival" stamp — sits in the same corner the bow would use, for whichever collection currently carries isNew in catalogue.js */ .coll-box .new-sign{ position:absolute;width:clamp(64px,26%,100px); top:-9%;left:-6%;color:var(--caramel-dp);z-index:6; transform:rotate(-11deg); filter:drop-shadow(0 5px 7px rgba(43,33,28,.22)); transition:transform .35s cubic-bezier(.3,1,.4,1); } .coll-box .new-sign svg{width:100%;height:100%;display:block} .coll-box:hover .new-sign{transform:rotate(-6deg) scale(1.06)} @media(max-width:520px){ .coll-box .new-sign{width:58px;top:-14px;left:-8px} } .coll-box:hover{transform:translateY(-4px)} .coll-box:hover .nm{color:var(--caramel-dp)} .coll-box:focus-visible{outline:2px solid var(--caramel-dp);outline-offset:6px} /* a collection with nothing in it yet reads as quiet, not broken */ .coll-box.soon{cursor:default} .coll-box.soon .bx{background:var(--cream)} .coll-box.soon .nm,.coll-box.soon .it{opacity:.55} .coll-box.soon:hover{transform:none} @media(max-width:520px){ .coll-box{aspect-ratio:1.5;padding:22px} .coll-box .hand{font-size:14px} } @media(prefers-reduced-motion:reduce){.coll-box{transition:none}} /* the instalment line sits tight under the total, part of the same number */ .instal.under-total{ margin-top:6px;text-align:right;font-size:12.5px; padding-bottom:12px;border-bottom:1px solid var(--line-l); } .drawer .instal.under-total{border-bottom:0;padding-bottom:4px} /* ══ THE BOWS BEHIND THE BOXES ══════════════════════════════════════════ Chocolate bows scattered over the shop page, behind the collection boxes. The boxes are solid, so a bow that lands under one simply does not show; what you see are the ones in the gaps and the margins, which is what makes it read as scattered by hand rather than tiled by a machine. Each bow takes four numbers: --t how far down the section, --l how far across, both per cent --s its size, --r how far it leans Change those to move one. Add another by copying an .f line and adding a matching