/* ========================================================================== PEMBEKAL PERALATAN TADIKA / PPT EDU SUPPLIES (002550066-P) (c) 2026 PPT EDU SUPPLIES 002550066-P is an ENTERPRISE registration, read at 700dpi off their own microtext. It is not the other suffix and this site must never say so. The banned string is not written here either: the browser downloads this file, so a comment ships as surely as a heading does. THE COMPOSITION, and why it is this and not the obvious one. The best designed thing this client owns is their spec sheet: 22 consecutive pages holding one fixed grid without deviation, where a product is stated as a drawing, four dimensioned elevations and a row of printed attributes. This page is that artefact turned on the company itself. It opens by stating the company the way their sheets state a product, indexes itself numerically, and presents the catalogue as a price list rather than as a grid of cards, because a price list is what a kindergarten buyer is actually reading. Nothing here is centred in a fixed column, no section repeats the heading, paragraph, chips, button order, no two sections share a density, and the largest object on the page is roughly forty times the height of the smallest type. That is deliberate: their equipment is physically large, so scale is the subject rather than a flourish. COLOUR. Every value is an exact-hit flat-fill pixel count from their own rendered catalogue pages, or a tint of one computed to a stated contrast ratio. Nothing outside this list is on the page. DASHES. No em dash, no en dash, no hyphen joining two ideas. The only hyphens are inside phone numbers, the registration number, the street address, and captions quoted verbatim from their catalogue. NO LINES. No rule, divider, underline or hairline anywhere. Sections are separated by colour and space. ========================================================================== */ @view-transition{navigation:auto} /* THE TWO TYPEFACES ARE INLINED AS DATA URIs, and that is not a style choice. @font-face requests are CORS-checked, and on a file:// page Chrome refuses them: opening this site by double-clicking a page lost BOTH typefaces and fell back to the system stack. Same root cause as the search failing, found in the same console. 15,256 bytes of woff2, 20,344 as base64, and two fewer requests. */ @font-face{font-family:"Gabarito";src:url("data:font/woff2;base64,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") format("woff2"); font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Poppins";src:url("data:font/woff2;base64,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") format("woff2"); font-weight:400;font-style:normal;font-display:swap} :root{ --beige:#F1E7DD; /* 10.8M px, their signature surface */ --white:#FFFFFF; /* 63.0M px, the ground of every page */ --cream:#EEE9E2; /* 2.0M px, the spec sheet panel */ --play:#ECE3C7; /* 451k px, Playground Catalogue */ --ink:#373636; /* 1.13M px, product names and body */ --mute:#5A5857; /* ink lightened. 4.94:1 on the palest ground we print on, #C3DCE3. Was #605E5D, whose comment claimed 4.94 but measured 4.50 on that ground, 4.51 on #E1D8B6 and 4.53 on #D2D8E9: three hairline passes on one page. Session G already ruled on this exact case when it rejected 4.51 as "not a margin worth having" and cut #5C4A38 for the projects band. Computed, not eyedropped, on every ground this token actually lands on. Never used on a dark ground; those carry rgba(255,255,255,...) instead. paper 6.90 · white 7.07 · #DCE4E5 5.48 */ --price:#B50526; /* every Normal Price line. PRICES ONLY */ --rule:#74A1D0; /* 605k px, the spec sheet top rule */ --taupe:#A79A89; /* 443k px, their band fill */ --forest:#003C20; /* Playground Catalogue headings */ --zest:#FF741F; /* the script word Collection */ --zest-t:#AA4D15; /* zest darkened to 4.55:1 on beige */ /* ================================================================== SESSION AC. FOUR GROUNDS, NOT FIFTEEN. Every value below was correctly measured off a real product, and every one of those measurements is kept in the comments because it is the record of where the colour came from. What was wrong was not the sampling, it was the lightening. Each ground was walked up until --mute and --price cleared 4.5:1 on it, which put all fifteen of them between 79.8% and 91.0% lightness. Measured as contrast ratios against each other they came out at 1.01 to 1.4, and 1.01 is not a difference, it is the same colour twice. On the two long pages the effect was literal: learning.html ran one unbroken 26,359px band and storage.html one of 14,639px, out of 34,008 and 23,011. So the fifteen collapse onto four, and the four are chosen so the step between them is measurable rather than nominal: --g-paper #FFFFFF their page white, 63.0M px across four books --g-warm #F1E7DD beige, their signature surface, 10.8M px --g-cool #C3DCE3 from #5CBBD8, the globe. The darkest ground this type system allows: --mute lands at 4.94 and --price at 4.87 on it, so going one step deeper would break body text. --g-deep #003C20 forest, PLY p5, the word PLAYGROUND And the honest limit, computed rather than hoped for: white/warm is 1.22, white/cool 1.43, warm/cool 1.17. Three light grounds cannot give a page arrival, only rhythm, because anything light enough to carry this body text sits within 1.4 of everything else that is. Forest against the other three is 8.80 to 12.60. The dark ground is therefore not decoration, it is the only real step available, and it is not new here: index.html has carried two mid-page forest bands and contact.html a forest masthead since session G. Nothing was invented. Four of the fifteen sampled values survive as the four grounds; the other eleven now point at whichever of the four their own hue already belonged to. ================================================================== */ --g-paper:#FFFFFF; --g-warm:#F1E7DD; --g-cool:#C3DCE3; --g-deep:#003C20; /* filled fields, each sampled from the products in its own section. The measured source stays on the left of every comment; the token now resolves to whichever of the four grounds that hue belongs to. */ --g-play:var(--g-warm); /* from #C8A93F, the frames' plywood and yellow */ --g-spec:var(--g-cool); /* from #4059A4, their elevation drawing blue */ --g-class:var(--g-cool); /* from #5CBBD8, the globe, 8194 px cluster */ --g-proj:var(--g-warm); /* from #DEBC98, the warm interior light */ --g-carp:var(--g-cool); /* from #3FCE52, the green on the Counting Bee and Country Side Roadmap carpets, edu p32. Was #D6E6D8 */ --g-mat:var(--g-warm); /* from #F75A53, the red Eva Mat, edu p16. Was #EDD7D6 */ /* SESSION K. Grounds measured off the images each page actually ships, by tools/k_ground.py, which reads the built HTML, takes every in
, discards the studio sweep, the shadow and the steel, and returns the largest cluster of real product colour with the files it came from. The lightness is then walked down until --mute AND --price both clear 4.5:1 on that exact ground, so the value is set by the contrast requirement. Every figure below is computed, not eyedropped, and traceable to a photograph a visitor can see on the same page. It also corrected a colour that was simply wrong: floors.html carried a GREEN carpet band, sampled from the green inside two carpets. Measured across all thirteen, the carpets are BLUE: #3D94D1 at 12.2% and #2A60AB at 11.5%, from Counting Bee, Colours, Universe, The Galaxy and Hopscoth. The page is now the colour its own products are. */ --g-learn:var(--g-warm); /* from #CC3325, 10.3% of saturated pixels across the 55 photographs on learning.html: the red plastic of Bolt & Nuts, Bullets Blocks, Lacing Numbers, Big Flowers. Was #F5DBD8 */ --g-learn-2:var(--g-cool);/* from #DED03A, 7.8%, the yellow of the same range. Was #F5F3D8. It follows --g-learn directly down the page, so it takes the cool ground: two warm tints in sequence is where the corridor came from. */ --g-shelf:var(--g-warm); /* from #BF9965, 36.3% across the 30 photographs on storage.html: the birch every shelf is made of. Was #F5E9D8 */ --g-tray:var(--g-cool); /* from #334B92, 6.0%, the deep blue of the plastic trays in the Nature Series shelves, edu p2. Was #D8DFF5 */ --g-fl-carp:var(--g-cool);/* from #3D94D1, 12.2%, the blue across the 13 carpets. Was #D8E9F5 */ --g-fl-mat:var(--g-warm); /* from #D62836, 8.3%, the red on Alphabet Animals, Rainbow Alphabet, Hopscoth and Sunshine. Was #F5D8DB */ --g-post:var(--g-warm); /* from #C3A64C, 7.4% across the 25 photographs on play.html: the yellow of the seesaw seats, the swing frames, the hoops and the smiling trampoline. Was #F5EED8 */ --g-stor:var(--g-warm); /* from #E0F102, the lime on the Multi-coloured Series shelves, edu p8. Was #E9EAD1 */ --g-inst:var(--g-cool); /* from #1CA8FF, the blue on the metal playgrounds, edu p25. Was #D3E2EB. The note that used to sit here said this was the third pale blue on the site and that this was accepted. There is now one pale blue, which is the better answer to the same problem. */ --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px; --s7:168px; --settle:cubic-bezier(0.65,0.05,0,1); --fast:0.3s; --open:0.45s; --slow:0.75s; --r-ui:3px; /* Type. Two genuinely large moments, everything else small. The gap between 28px and 64px is the design, not an oversight. */ --t-huge:clamp(2.5rem,6vw,5rem); --t-big:clamp(2rem,4.4vw,3.5rem); --t-mid:1.75rem; /* --t-sub is 20px and it is not new, it is named. Session AF counted every rendered character on all fourteen pages at 390 and found seventeen distinct sizes, of which five carried 98.1% of the text: 14, 17, 20, 28 and 32. 14, 17, 28 and 32 already had names here. 20 did not, so it was written as a literal 1.25rem in nine rules and, having no name, it collected neighbours: 18px product names on therapy, 22px on boards, index and projects, 24px prices on therapy and floors. Those are 6%, 10% and 20% from a size that was already there doing the same job. A step nobody can name is a step nobody can keep. */ --t-sub:1.25rem; --body:1.0625rem; --meta:0.875rem; --fig:0.875rem; /* --fig WAS 0.75rem, which is 12px, and 72 elements on the two live pages were rendering at it: every code, every label, every caption, the menu descriptions and the enquiry-list items. The footer alone was raised to 14px in session 7 and was reported as "nothing on the site is 12px any more", which was not true anywhere else. 14px is the floor now and it is set once here so no page can drop below it. --fig and --meta are the same size on purpose: what separates a label from body text is the uppercase and the tracking, not the size. */ --room:clamp(20px,4.6vw,72px); --bar:0px; /* set from the measured dock height by site.js, never guessed */ } *,*::before,*::after{box-sizing:border-box} *{-webkit-tap-highlight-color:transparent} /* scroll-behavior was `smooth` until session AB. Measured at 390px with a 4x CPU throttle, an in-page jump took 1,550ms to arrive on index.html and on learning.html, because smooth animates the whole distance and these pages are 17,048px and 33,779px tall. With it off the same jump lands in about 100ms. That one word was the single largest source of the "very laggy" complaint: frame rate was already a locked 16.7ms, so nothing was dropping frames, the page was simply taking a second and a half to go anywhere. Section jumps and back-to-top are now instant. Reduced-motion users already had `auto`, so they were the only people getting the fast version. */ html{-webkit-text-size-adjust:100%;scroll-behavior:auto;overflow-x:clip} /* overflow-x:hidden on body alone did not stop the document scrolling sideways at 1024 and 1440 once page two put an object off the right edge. clip on the root does, and unlike hidden it does not turn the root into a scroll port. AND THE BODY MUST NOT CARRY overflow-x AT ALL. This is the regression that broke the landing page and it cost the client a working page for a day, so it is written down rather than merely fixed. overflow-x:hidden forces overflow-y to compute to auto. That makes a scroll container. Every position:sticky descendant then resolves against a scrollport that never itself scrolls, so it silently stops sticking. The four step sequence was pinned inside a 3600px block: the pin died, the panel scrolled past in one screen, its animation played to an empty room, and it left 2700px of blank beige behind it. One declaration, three symptoms, none of them visible in the source. Measured, not guessed: the sticky element's top read -395, -995, -1595 and -2195 at four scroll offsets with the line in, and 0 at all four with it out. If sideways scroll ever returns, fix it on the element that overflows or on the root. Never on body. */ body{margin:0;background:var(--beige);color:var(--ink); font-family:"Poppins",ui-sans-serif,system-ui,sans-serif;font-size:var(--body); line-height:1.55;-webkit-font-smoothing:antialiased;padding-bottom:var(--bar)} h1,h2,h3,b,strong,.btn,.rm,.code,.n{font-family:"Gabarito","Poppins",sans-serif;font-weight:700} h1,h2,h3{margin:0;line-height:.98;letter-spacing:-.03em;color:var(--ink);text-wrap:balance} p{margin:0} img{display:block;max-width:100%;height:auto} a{color:inherit} button{font:inherit;color:inherit;border:0;background:none} a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none} ::selection{background:var(--zest);color:var(--forest)} /* white on zest is 2.70:1 and genuinely hard to read; forest is 4.66:1 */ :focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:var(--r-ui); box-shadow:0 0 0 5px rgba(0,60,32,.16)} .on-dark :focus-visible{outline-color:#FFF;box-shadow:0 0 0 5px rgba(255,255,255,.3)} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .wrap{padding-inline:var(--room)} .rm{color:var(--price);font-variant-numeric:tabular-nums} .code{font-size:var(--fig);letter-spacing:.09em;color:var(--mute);font-variant-numeric:tabular-nums} /* ===================== HEADER ===================== THE HEADER IS IN NORMAL FLOW AND RESERVES ITS OWN SPACE. It used to be position:absolute over the top of whatever came first, which meant every page had to remember to leave a hole for it. Page one did not: the white WhatsApp control sat on top of the words "Supermarket Playhouse" and cut them off mid-word, with "Playground Collection" running underneath it. That was reported twice, on two different pages, which is the signature of a shared component rather than a page bug. In flow it cannot overlap anything, on any page, at any width, ever. It carries the ground colour of the field it opens onto so the page still reads as one uninterrupted band of colour from the very top edge. Nothing downstream needs to compensate for it and no page needs a magic number. */ /* THE BAR IS A GRID, NOT A FLEX ROW, so the search field can be given a whole row of its own on a narrow screen instead of being squeezed between the logo and the menu button. In a flex row at 390px the field collapsed to about 110px and its prompt text truncated to "Search pro...", which is why it kept being reported as missing: it was present and it did not look like a search field. Measured at 390 before the change: 110px wide. After: 350px, on its own row, full width. */ .hdr{position:relative;z-index:70;display:grid;align-items:center; grid-template-columns:auto minmax(0,1fr) auto auto auto; grid-template-areas:"logo find wa list menu"; gap:var(--s2);min-height:88px;padding-inline:var(--room);padding-block:14px} .hdr .logo{grid-area:logo} .hdr .find-field{grid-area:find} .hdr .wa{grid-area:wa} .hdr .menuBtn{grid-area:menu} .hdr .listBtn{grid-area:list} @media(max-width:900px){ .hdr{grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"logo list menu" "find find find";row-gap:12px} } /* THE ROUTE TO THE ENQUIRY LIST, IN THE HEADER OF EVERY PAGE. The list itself is position:fixed at the foot of the window and these pages run to 33,000px, so the moment somebody scrolled it was gone. Ashyun added products and then asked out loud where his list was, and he commissioned the site. This is in normal flow at the top, so it is one tap away at 320 and at 1440 alike, and it always carries the count. It is never hidden: an empty state that shows 0 also teaches that the feature is there, and a hidden grid item leaves a track whose gaps still render, so the header would have jumped 16px the first time anything was added. */ .listBtn{display:inline-flex;align-items:center;gap:10px;min-height:52px; text-decoration:none; padding:0 var(--s2);border:0;border-radius:var(--r-ui);cursor:pointer; background:rgba(255,255,255,.18);color:#FFF;white-space:nowrap; font-family:"Gabarito",sans-serif;font-weight:700;font-size:var(--meta); transition:background var(--fast) var(--settle),color var(--fast) var(--settle)} .on-light .listBtn{background:rgba(55,54,54,.09);color:var(--ink)} .listBtn .lb-n{font-family:"Poppins",sans-serif;font-weight:700; font-variant-numeric:tabular-nums;min-width:1.4em;text-align:center; border-radius:var(--r-ui);padding:2px 6px;font-size:var(--meta)} .listBtn[data-n="0"] .lb-n{color:rgba(255,255,255,.66);background:none;padding:2px 0} .on-light .listBtn[data-n="0"] .lb-n{color:var(--mute)} /* full it is their own price red, which is the one saturated colour on the site and is already what a count means here */ .listBtn[data-n="1"] .lb-n{background:var(--price);color:#FFF} @media (hover:hover){ .listBtn:hover{background:#FFF;color:var(--forest)} .on-light .listBtn:hover{background:var(--ink);color:#FFF} .on-light .listBtn:hover[data-n="0"] .lb-n{color:rgba(255,255,255,.72)} } @media (hover:none){ .listBtn:hover{background:rgba(255,255,255,.18);color:#FFF} .on-light .listBtn:hover{background:rgba(55,54,54,.09);color:var(--ink)} } /* below 560 the words go and the count stays: the count is the information */ @media(max-width:560px){ .listBtn .lb-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .listBtn{padding:0 12px;gap:0} .listBtn::before{content:"";width:19px;height:19px;flex:none;background:currentColor; -webkit-mask:var(--lb-ico) center/contain no-repeat;mask:var(--lb-ico) center/contain no-repeat} } :root{--lb-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E")} .hdr.on-dark{background:var(--forest)} .hdr.on-light{background:var(--beige)} /* the logo no longer pushes everything else to the right edge: the search field takes that space, because search belongs next to the identity and not at the end of a row of controls */ .logo{display:flex;align-items:center;text-decoration:none;min-height:48px;flex:none; border-radius:var(--r-ui);transition:opacity var(--fast) var(--settle)} .logo img{height:44px;width:auto} /* The logo is the way home from every page, so it has to read as a control and not as a printed letterhead. It carries the word Home beside it. */ .logo .home{font-family:"Gabarito",sans-serif;font-weight:700;font-size:var(--fig); letter-spacing:.14em;text-transform:uppercase;margin-left:var(--s2); color:rgba(255,255,255,.72);white-space:nowrap} .hdr.on-light .logo .home{color:var(--mute)} @media (hover:hover){ .logo:hover .home{color:#FFF} .hdr.on-light .logo:hover .home{color:var(--ink)} } @media(max-width:760px){.logo .home{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}} .menuBtn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 var(--s2); border:0;border-radius:var(--r-ui);background:rgba(255,255,255,.18);color:#FFF; font-family:"Gabarito",sans-serif;font-weight:700;font-size:var(--meta);cursor:pointer; transition:background var(--fast) var(--settle),color var(--fast) var(--settle)} @media (hover:hover){ .menuBtn:hover{background:#FFF;color:var(--forest)} .on-light .menuBtn:hover{background:var(--ink);color:#FFF} } @media (hover:none){ .menuBtn:hover{background:rgba(255,255,255,.18);color:#FFF} .on-light .menuBtn:hover{background:rgba(55,54,54,.09);color:var(--ink)} } /* The compact bar's menu control draws the same three bars off the same rule rather than a second set six pixels different. One glyph, one stroke, two places. */ .menuBtn .bars,.secnav-menu .bars{display:block;width:18px;height:2px;background:currentColor;position:relative} .menuBtn .bars::before,.menuBtn .bars::after, .secnav-menu .bars::before,.secnav-menu .bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor} .menuBtn .bars::before,.secnav-menu .bars::before{top:-6px} .menuBtn .bars::after,.secnav-menu .bars::after{top:6px} .hdr .wa{border:0;background:#FFF;color:var(--forest)} @media (hover:hover){.hdr .wa:hover{background:var(--zest);color:var(--ink)}} @media (hover:none){.hdr .wa:hover{background:#FFF;color:var(--forest)}} @media(max-width:900px){.hdr .wa{display:none}.logo img{height:38px}} /* ===================== 07 THE PRICE LIST ===================== Their Education Catalogue is a price list, so this is a price list. A row per item carrying the thumbnail, the code, the name, the size and the price, which is the four things a kindergarten buyer is actually reading. A grid of equal cards with a button under each is the shape this replaces. */ .list-sec{background:var(--g-class);padding-block:var(--s5) var(--s6)} .list-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,18em);gap:var(--s4); align-items:end;margin-bottom:var(--s4)} @media(max-width:860px){.list-head{grid-template-columns:1fr;gap:var(--s2)}} .list-head h2{font-size:var(--t-big);max-width:13em} .list-head p{font-size:var(--meta);color:var(--mute)} .plist{display:grid;gap:2px} .prow{display:grid;grid-template-columns:96px minmax(0,4.75rem) minmax(0,1fr) minmax(0,9.5rem) minmax(0,6.5rem) auto; gap:var(--s2);align-items:center;background:rgba(255,255,255,.5);padding:var(--s2); transition:background var(--fast) var(--settle)} @media (hover:hover){.prow:hover{background:#FFF}} .prow .th{width:96px;height:72px;display:grid;place-items:center} .prow .th img{max-width:100%;max-height:72px;width:auto;height:auto} .prow .nm{font-family:"Gabarito",sans-serif;font-weight:700;font-size:var(--body); line-height:1.15;letter-spacing:-.018em} .prow .sz{font-size:var(--meta);color:var(--mute);font-variant-numeric:tabular-nums} .prow .rm{font-size:var(--t-mid);letter-spacing:-.026em;line-height:1} @media(max-width:900px){ .prow{grid-template-columns:76px minmax(0,1fr) auto;grid-template-areas: "th nm rm" "th sz rm" "th add add";row-gap:6px} .prow .nm{min-width:0;overflow-wrap:anywhere} .prow .th{grid-area:th;width:76px;height:76px} .prow .code{display:none} .prow .nm{grid-area:nm}.prow .sz{grid-area:sz}.prow .rm{grid-area:rm;text-align:right} .prow .add{grid-area:add;justify-self:start} } @media(max-width:400px){ .prow{grid-template-columns:64px minmax(0,1fr);grid-template-areas: "th nm" "th sz" "th rm" "add add";gap:var(--s1);padding:var(--s2) var(--s1)} .prow .th{width:64px;height:64px} .prow .rm{grid-area:rm;text-align:left;font-size:var(--t-mid)} .prow .add{grid-area:add;justify-self:stretch;margin-top:6px} } .list-note{margin-top:var(--s3);font-size:var(--meta);color:var(--mute);max-width:34em} /* 39em was 83ch at meta size */ .list-note b{color:var(--ink)} /* A SEARCH RESULT CARRIES THE PRODUCT, NOT A REFERENCE TO IT. It used to be one thin line: a code, a name, a size, a price, a button. That is a row out of an index, and it was rebuilt because a buyer reading it cannot tell a bookshelf from a bag rack. A result now carries the same four things the printed catalogue puts against a product -- the photograph, the code, the size and the price -- plus the material on the 22 rows that print one, and it says so in words where the book prints nothing. It still names which page the product lives on, which the catalogue row does not need to. It inherits nothing from .prow's areas: those name a thumbnail cell the old result did not have, and at 390px the add button landed left of the product name. Every width below was opened and looked at. */ .find-res .prow{ grid-template-columns:96px minmax(0,1fr) minmax(0,10.5rem) auto; grid-template-areas:"th meat rm add" "th where where where"; row-gap:10px;column-gap:var(--s2);align-items:start;padding-block:var(--s2)} .find-res .prow .th{grid-area:th;width:96px;min-height:76px;display:grid; place-items:center;align-self:start} .find-res .prow .th img{max-width:96px;max-height:96px;width:auto;height:auto; border-radius:var(--r-ui)} /* Where there is no photograph the cell SAYS SO. A grey box reads as a broken image, and 46% of the range has no photograph in any of the four books. */ .find-res .prow .th.nopic i{font-style:normal;font-family:"Poppins",sans-serif; font-size:var(--meta);line-height:1.3;color:var(--mute);text-align:center; display:block} .find-res .prow .meat{grid-area:meat;min-width:0;display:grid;gap:6px;align-content:start} /* grid-area:auto IS LOAD-BEARING, and it was found by measuring. The catalogue row sets `.prow .nm{grid-area:nm}`, and .nm is now a child of .meat rather than of .prow. .meat has no area called "nm", so the name claimed an implicit column of its own: the card laid out as picture, facts, and then the product name wrapping down a 70px gutter, one or two letters to a line. Measured, not guessed -- .meat computed to `182px 70px`. Any element moved inside a new grid container has to have its inherited area released. */ .find-res .prow .nm,.find-res .prow .facts{grid-area:auto} .find-res .prow .nm{font-family:"Gabarito",sans-serif;font-weight:700; font-size:var(--body);letter-spacing:-.02em;line-height:1.18; overflow-wrap:anywhere;color:var(--ink)} .find-res .prow .facts{display:flex;flex-wrap:wrap;gap:4px var(--s2)} .find-res .prow .f{font-family:"Poppins",sans-serif;font-size:var(--meta); color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap} .find-res .prow .f i{font-style:normal;color:var(--mute);margin-right:6px} .find-res .prow .f.none{color:var(--mute)} .find-res .prow .f.f-size{white-space:normal} .find-res .prow .rm{grid-area:rm;text-align:right;display:grid;gap:2px; justify-items:end;align-content:start} .find-res .prow .rm b{font-family:"Gabarito",sans-serif;font-weight:700; font-size:var(--t-mid);letter-spacing:-.026em;line-height:1;color:var(--price)} .find-res .prow .rm i,.find-res .noprice i{font-style:normal;display:block; font-family:"Poppins",sans-serif;font-size:var(--meta);color:var(--mute)} .find-res .noprice{color:var(--ink);font-family:"Poppins",sans-serif;font-weight:400; font-size:var(--meta);letter-spacing:0;text-align:right} .find-res .prow .add-wrap{grid-area:add;justify-self:end} .find-res .prow .where{grid-area:where;font-size:var(--meta);color:var(--mute); text-decoration:none;align-self:center} @media (hover:hover){.find-res .prow .where:hover{color:var(--ink)}} @media (hover:none){.find-res .prow .where:hover{color:var(--mute)}} .find-more{margin-top:var(--s3);font-size:var(--meta);color:var(--mute)} @media(max-width:900px){ .find-res .prow{grid-template-columns:84px minmax(0,1fr) auto; grid-template-areas:"th meat meat" "th rm add" "where where where"; row-gap:10px;align-items:start} .find-res .prow .th{width:84px} .find-res .prow .th img{max-width:84px;max-height:84px} .find-res .prow .rm{text-align:left;justify-items:start;align-self:center} .find-res .noprice{text-align:left} } /* 320 IS THE FLOOR AND IT IS WHERE A CARD WITH A PICTURE, FOUR FACTS AND A CONTROL BREAKS FIRST. The picture drops to 64px, the price and the button take a row of their own, and the facts wrap instead of forcing the row wide. */ @media(max-width:560px){ /* THE BOX MOVED, NOT THE TYPE. This cell used to be 64px wide with the "no photograph in their catalogue" note set at 12px inside it. 12px is below the 14px floor, and measuring the note at 12px in Poppins showed the word "photograph" alone is 74px, so the note was ALREADY being clipped by 10px at the size that broke the rule. Raising the note to the floor makes that word 83px, so the column is 84px and the note fits on its own terms. Photographs are untouched: max-width stays 64px and the cell centres them, so the picture a reader sees is exactly the size it was. */ .find-res .prow{grid-template-columns:84px minmax(0,1fr); grid-template-areas:"th meat" "rm rm" "add add" "where where"; row-gap:8px;column-gap:12px} .find-res .prow .th{width:84px;min-height:64px} .find-res .prow .th img{max-width:64px;max-height:64px} .find-res .prow .facts{gap:2px 12px} .find-res .prow .add-wrap{justify-self:stretch} .find-res .prow .add{width:100%;justify-content:center} } /* THE WAY IN FOR SOMEBODY WHO HAS NOT TYPED ANYTHING. Four rooms this company has actually finished, then the categories with the number of products really in each. No borders: each control is told apart by having a ground of its own, which is the rule this project works to. */ .browse{padding-block:var(--s2) var(--s4)} .browse h3{font-family:"Gabarito",sans-serif;font-weight:700;font-size:var(--t-mid); letter-spacing:-.02em;margin-top:var(--s4)} .browse h3:first-child{margin-top:0} .br-rooms{margin-top:var(--s3);display:grid;gap:var(--s2); grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))} .br-room{text-align:left;border:0;border-radius:var(--r-ui);cursor:pointer; background:rgba(55,54,54,.07);color:var(--ink);padding:var(--s2); display:grid;gap:6px;align-content:start;min-height:48px; transition:background var(--fast) var(--settle)} .br-room b{font-family:"Gabarito",sans-serif;font-weight:700;font-size:var(--body); letter-spacing:-.02em} .br-room .br-n{font-family:"Poppins",sans-serif;font-size:var(--meta);color:var(--price)} .br-room .br-why{font-family:"Poppins",sans-serif;font-size:var(--meta); color:var(--mute);line-height:1.4} .br-cats{margin-top:var(--s3);display:flex;flex-wrap:wrap;gap:10px} .br-cat{border:0;border-radius:var(--r-ui);cursor:pointer;min-height:48px; background:rgba(55,54,54,.07);color:var(--ink);padding:0 var(--s2); display:inline-flex;align-items:center;gap:10px; font-family:"Gabarito",sans-serif;font-weight:700;font-size:var(--meta); transition:background var(--fast) var(--settle)} .br-cat .br-n{font-family:"Poppins",sans-serif;font-weight:400;color:var(--mute); font-variant-numeric:tabular-nums} @media (hover:hover){ .br-room:hover,.br-cat:hover{background:rgba(55,54,54,.13)} } @media (hover:none){ .br-room:hover,.br-cat:hover{background:rgba(55,54,54,.07)} } .br-note{margin-top:var(--s3);font-size:var(--meta);color:var(--mute);max-width:44em; line-height:1.5} /* every chip carries the number of products it would leave you with */ .find-chips .cn{margin-left:8px;font-family:"Poppins",sans-serif;font-weight:400; font-variant-numeric:tabular-nums;opacity:.72} /* ===================== 11 CONTACT ===================== CONTRAST, MEASURED IN THE BROWSER RATHER THAN ASSERTED. Ashyun said he could barely see the type here. Every value in this block was passing AA on paper: the lowest was 12px at 60% white over #003C20, which composites to #66857A and computes 5.51:1 against the ground, where AA asks 4.5. So the ratio was never the whole problem. The problem was 12px of 400 weight at 60% opacity on a dark field, which is legible to a measuring script and tiring to a person. Passing a threshold is not the same as being readable. What changed: nothing on this footer is 12px any more, nothing is below 75% white, and the labels that were 60% are now 82%. New floor is 8.05:1 at 14px. The one deliberately quiet line, the copyright, is 14px at 75%, 7.4:1. These are computed, not estimated, and the harness re-reads them. */ .ft{background:var(--forest);color:rgba(255,255,255,.9);padding-block:var(--s6) var(--s4)} .ft h2{color:#FFF;font-size:var(--t-big);max-width:11em} .ft-lede{margin-top:var(--s3);max-width:25em;font-size:var(--body);color:rgba(255,255,255,.9)} .ft-acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)} .ft .btn{background:#FFF;border-color:#FFF;color:var(--forest)} @media (hover:hover){.ft .btn:hover{background:var(--zest);border-color:var(--zest);color:var(--ink)}} .ft .btn-2{background:transparent;border-color:rgba(255,255,255,.55);color:#FFF} @media (hover:hover){.ft .btn-2:hover{background:#FFF;border-color:#FFF;color:var(--forest)}} .ft-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--s5)} @media(max-width:860px){.ft-grid{grid-template-columns:1fr}} /* Footer column headings were h4 directly under the section's h2, which skips h3 and gives a screen reader reading by headings a hierarchy with a hole in it. They are h3 now on all 13 pages; the h4 selector stays so nothing that still ships an h4 loses its styling. Purely structural, nothing moves. */ .ft h3.ft-col,.ft h4{margin:0 0 var(--s2);font-size:var(--meta);letter-spacing:.12em;text-transform:uppercase; color:rgba(255,255,255,.82);font-family:"Gabarito",sans-serif;font-weight:700} .ft ul{list-style:none;margin:0;padding:0;font-size:var(--body)} .ft li{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;min-height:44px} .ft ul a{display:inline-flex;align-items:center;min-height:44px;color:#FFF} .ft .who{color:rgba(255,255,255,.82);font-size:var(--meta)} .ft p{color:rgba(255,255,255,.9)} .ft-base{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s2); justify-content:space-between;font-size:var(--meta);color:rgba(255,255,255,.75)} /* ===================== BUTTONS, DOCK, OVERLAY ===================== */ /* EVERY CONTROL IS A FILLED FIELD. No control on this site is drawn with a line. The secondary button and the add button were 2px outlines, 48 drawn borders between them on the landing page alone, and an outline is a line whatever it is doing. A quieter fill carries the same "this is secondary" signal, gives the colour some area, and removes the last rules on the page. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:52px; padding:0 var(--s3);border-radius:var(--r-ui);border:0;background:var(--ink); color:var(--beige);text-decoration:none;font-size:var(--meta);cursor:pointer; transition:background var(--fast) var(--settle),color var(--fast) var(--settle)} .btn-2{background:rgba(55,54,54,.10);color:var(--ink)} /* A primary button on the forest ground is white with forest text. That was only ever written per page — .pg-home .mast, .gym, .range, .ft, .ovl-foot — so 404.html's on-dark band kept the base charcoal fill and put #373636 on #003C20, a button you could barely find. This is the rule those five were each re-stating; they now agree with it rather than carrying it alone. */ .on-dark .btn{background:#FFF;border-color:#FFF;color:var(--forest)} .on-dark .btn-2,.ft .btn-2{background:rgba(255,255,255,.18);color:#FFF} .btn svg{width:17px;height:17px;flex:none} .add{min-height:44px;padding:0 var(--s2);border-radius:var(--r-ui);border:0; background:rgba(55,54,54,.10);color:var(--ink);font-size:var(--fig);font-family:"Gabarito",sans-serif; font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px; transition:background var(--fast) var(--settle),color var(--fast) var(--settle)} .add[aria-pressed="true"]{background:var(--forest);color:#FFF} @media (hover:hover){ .btn:hover{background:var(--forest);color:#FFF} .btn-2:hover{background:var(--ink);color:var(--beige)} .on-dark .btn-2:hover,.ft .btn-2:hover{background:#FFF;color:var(--forest)} .add:hover{background:var(--ink);color:#FFF} .add[aria-pressed="true"]:hover{background:var(--forest);color:#FFF} } @media (hover:none){ .btn:hover,.btn-2:hover,.add:hover{background:inherit} .btn:hover{background:var(--ink);color:var(--beige)} .btn-2:hover{background:rgba(55,54,54,.10);color:var(--ink)} .add:hover{background:rgba(55,54,54,.10);color:var(--ink)} .add[aria-pressed="true"]:hover{background:var(--forest);color:#FFF} } .add .tick2{display:none;width:13px;height:13px} .add[aria-pressed="true"] .tick2{display:block} .add[aria-pressed="true"] .plus{display:none} .add .plus{width:13px;height:13px} .dock{position:fixed;left:0;right:0;bottom:0;z-index:75;background:var(--forest);color:#FFF; transform:translateY(110%);transition:transform var(--slow) var(--settle)} .dock[data-open="1"]{transform:none} .dock-in{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) 0;flex-wrap:wrap} .dock .count{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px; border-radius:var(--r-ui);background:var(--zest);color:var(--forest);font-size:var(--meta); /* was --ink on --zest, computed 4.46:1, which misses AA at 14px bold by 0.04. --forest on --zest computes 4.66:1 and passes, and it is a colour already in the palette rather than a new one mixed to clear a threshold. */ font-family:"Gabarito",sans-serif;font-weight:700;padding:0 9px} .dock .lbl{font-size:var(--fig);font-family:"Gabarito",sans-serif;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:rgba(255,255,255,.74);margin-right:auto} /* The panel, Clear, Print and the send button all moved to enquiry.html in session AE, so their rules are gone rather than left here matching nothing. What the bar still needs is under THE BAR IS A ROUTE TO THE LIST, further down this file. */ /* ===================== THE MENU ===================== THE COMPOSITION PROBLEM, WHICH IS THE REAL ONE. Two destinations in a full-screen green field left roughly ninety percent of it empty, so it read as broken rather than as spare. Centring the list only moved the hole. What fixes it is not centring but MEASURE: the list is held in a column the width of its own longest line, sat against the left edge of the type area, and the field is closed up around it. Empty space that has an edge reads as margin. Empty space with the list floating in the middle of it reads as a loading failure. At two entries the rows are large and the column is short, and the panel ends just below the last row rather than running to the bottom of the screen. At twelve, the same column keeps its width, the rows step down one size, and it splits into two columns above 900px. Nothing has to be re-laid out when pages ship: the list grows into the room already reserved for it. */ /* THIRD ATTEMPT, AND THE PREVIOUS TWO WERE BOTH FIGHTING THE WRONG THING. Attempt one put two entries in the corner of a full screen green field. Attempt two centred them in the same field. Attempt three set them in a column the width of their own longest line. All three still read as mostly empty, because THE FULL SCREEN FIELD IS WHAT CREATES THE EMPTINESS. Two destinations do not need a whole viewport and no arrangement of two things inside 1440x900 will ever fill it. So the surface is gone. The menu is a panel anchored to the top right, as wide as it needs and only as tall as its contents, and it slides in from the right edge it belongs to. At two entries it is about 560x480 and has no void in it at all. At twelve it grows downward and scrolls past 100vh, and the two column setting past six entries keeps it from becoming a long strip. Below 700px it takes the full width, which is what a sheet does on a phone. */ .ovl{position:fixed;top:0;right:0;z-index:95;background:var(--forest);color:#FFF; width:min(27rem,100vw);max-height:100vh; transform:translate3d(100%,0,0); transition:transform var(--fast) var(--settle),visibility var(--fast); overflow-y:auto;display:flex;flex-direction:column;visibility:hidden} .ovl-scrim{position:fixed;inset:0;z-index:94;background:rgba(0,18,10,.82); opacity:0;visibility:hidden;transition:opacity var(--fast) var(--settle),visibility var(--fast)} .ovl-scrim[data-open="1"]{opacity:1;visibility:visible} @media(max-width:700px){.ovl{width:100vw}} .ovl[data-open="1"]{transform:translate3d(0,0,0);visibility:visible; transition:transform var(--open) var(--settle),visibility 0s} .ovl-top{display:flex;align-items:center;justify-content:flex-end;gap:var(--s2); min-height:88px;padding-block:14px;flex:none} .closeX{min-width:52px;height:52px;border-radius:var(--r-ui);background:rgba(255,255,255,.18); cursor:pointer;display:inline-flex;align-items:center;justify-content:center; gap:10px;padding:0 var(--s2);color:#FFF;line-height:1; font-family:"Gabarito",sans-serif;font-weight:700;font-size:var(--meta)} .closeX .x{font-size:22px;line-height:1} @media (hover:hover){.closeX:hover{background:#FFF;color:var(--forest)}} @media (hover:none){.closeX:hover{background:rgba(255,255,255,.18);color:#FFF}} /* the list is as wide as its longest line and no wider, and the panel stops under it. This is what makes two entries look deliberate. */ .ovl-body{flex:0 1 auto;display:block;padding-block:var(--s2) var(--s5)} .ovl ul{list-style:none;margin:0;padding:0;width:max-content;max-width:100%; display:grid;gap:var(--s1)} .ovl-count{display:block;font-family:"Gabarito",sans-serif;font-weight:700; font-size:var(--fig);letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.75);margin-bottom:var(--s3)} .ovl li{opacity:0;transform:translate3d(26px,0,0); transition:opacity var(--fast) var(--settle),transform var(--fast) var(--settle)} .ovl[data-open="1"] li{opacity:1;transform:none;transition-delay:calc(var(--i) * 60ms + 120ms)} .ovl li a,.ovl li .here{display:grid;grid-template-columns:2.75rem 1fr;gap:var(--s2); align-items:baseline;padding:10px 0;text-decoration:none;color:#FFF; font-family:"Gabarito",sans-serif;font-weight:700; font-size:clamp(1.75rem,4.4vw,3.25rem);line-height:1.02;letter-spacing:-.028em; transition:color var(--fast) var(--settle)} .ovl li .no{font-size:var(--meta);letter-spacing:.06em;color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums} .ovl li .here{color:var(--zest)} .ovl li em{display:block;font-style:normal;font-size:var(--meta);color:rgba(255,255,255,.78); font-family:"Poppins",sans-serif;font-weight:400;letter-spacing:0;margin-top:4px; line-height:1.5;max-width:26em} @media (hover:hover){.ovl li a:hover{color:var(--zest)}} @media (hover:none){.ovl li a:hover{color:#FFF}} /* at twelve entries: two columns of six, and the rows step down one size */ .ovl-foot{margin-top:auto;padding-block:var(--s3) var(--s4);display:flex;flex-wrap:wrap; gap:var(--s3);align-items:center;justify-content:space-between;flex:none} .ovl-foot span{font-size:var(--meta);color:rgba(255,255,255,.78)} .ovl-foot .btn{background:#FFF;color:var(--forest)} /* REDUCED MOTION: the panel still arrives from the right, it just arrives instantly rather than travelling. A fade is not a substitute for direction, and turning motion off should not change what the thing is. */ @media(prefers-reduced-motion:reduce){ .ovl{transition:visibility 0s} .ovl,.ovl[data-open="1"]{transition-duration:0s} .ovl li{opacity:1;transform:none;transition:none} .ovl[data-open="1"] li{transition-delay:0s} } /* ===================== MOTION ===================== */ @keyframes settleUp{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}} @keyframes riseIn{from{opacity:0;transform:translate3d(0,58px,0)}to{opacity:1;transform:none}} @keyframes chipIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}} @keyframes fromLeft{from{opacity:0;transform:translate3d(-30px,0,0)}to{opacity:1;transform:none}} @keyframes photoIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}} /* buildUp animated clip-path until session AB. clip-path cannot be handed to the compositor, so all nine tiles using it repainted every frame for as long as they were on screen, on a scroll timeline that never ends. Rewritten onto transform and opacity, which composite. 34px because the ladder already runs 14 (chip) / 16 (row) / 26 (settle) / 58 (hero) and these blocks sit between a row and the hero. */ @keyframes buildUp{from{opacity:0;transform:translate3d(0,34px,0)}to{opacity:1;transform:none}} /* driftPan replaced stripPan in session AA. The band is now a track of two identical sequences, so -50% to 0 is one seamless period and the strip TRAVELS LEFT TO RIGHT forever instead of panning 26% once per scroll. Time-based rather than scroll-driven on Ashyun's direct instruction, and it also ends the Firefox stillness session Z measured and left open. */ @keyframes driftPan{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}} @keyframes rowIn{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}} /* ========================================================================== SHARED COMPONENTS ADDED IN SESSION 6, for the twelve page site. Everything above this line is lifted unchanged from the approved page one so that no page drifts from it. Everything below is new and shared by all pages. ========================================================================== */ /* ---------- THE MENU ---------- It is a list of destinations. That is its whole job and nothing else lives in it. Earlier versions carried group headings over groups of one, a second Home that duplicated the one already in the bar, and a block of search, WhatsApp and office details, which turned an overlay into a page. Opened on a phone it read as empty, because two links floated in a large dark field with no mass anywhere. Ashyun has raised this five times. Rules it is built to, and they do not change as pages ship: - every page that exists is in here, and nothing that does not exist is - one tap from any page to any other page - no headings, no copy, no controls that are not a destination - the page you are on is marked and is not a link to itself - it groups only once there are enough entries that grouping helps someone find one faster. Two entries do not need a taxonomy over them. */ /* THE OPENING. A menu comes from somewhere, so it arrives from the right and the entries follow it in. A cross fade is the default and reads as nothing happening. One curve, one direction, 0.45s in and 0.3s out, because leaving should be quicker than arriving. The green field wipes across first and the destinations rise into it 60ms apart, so the list assembles rather than appearing complete. prefers-reduced-motion drops all of it to opacity. */ .ovl{will-change:transform} .ovl[data-open="1"] .ovl-top{animation:ovlTop var(--open) var(--settle) .06s both} @keyframes ovlTop{from{opacity:0;transform:translate3d(0,-14px,0)}to{opacity:1;transform:none}} /* THE COMPOSITION, second attempt, and the reasoning is different this time. The first attempt centred the list in the field. That moved the hole from the bottom to the top and the bottom, and it still read as ninety percent empty, because a block floating in the middle of a large colour has no edge to belong to. What it needs is not centring but a MEASURE. The list is set in a column as wide as its own longest line, aligned to the same left edge as every other page on the site, and the panel closes up under the last row instead of running to the foot of the screen. Empty space with an edge is margin. The same column takes twelve entries without any re-layout: the rows step down one size and split into two columns above 900px. */ .ovl-nav{width:100%} .ovl-nav ul{list-style:none;margin:0;padding:0;columns:auto; width:max-content;max-width:100%;display:grid;gap:2px} .ovl-nav li{border:0} .ovl-nav li a,.ovl-nav li .here{display:grid; grid-template-columns:2.75rem minmax(0,1fr);gap:0 var(--s2);align-items:baseline; padding:var(--s2) 0;text-decoration:none;color:#FFF; font-family:"Gabarito",sans-serif;font-weight:700;letter-spacing:-.03em; font-size:clamp(2rem,5.6vw,3.5rem);line-height:1.02; transition:color var(--fast) var(--settle)} .ovl-nav .num{font-size:var(--meta);letter-spacing:.1em;color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums;grid-column:1} .ovl-nav em{grid-column:2;display:block;font-style:normal;font-size:var(--meta); color:rgba(255,255,255,.78);font-family:"Poppins",sans-serif;font-weight:400; letter-spacing:0;margin-top:6px;line-height:1.5;max-width:26em} /* the page you are standing on is stated, and is not a link back to itself */ .ovl-nav .here{color:var(--zest);cursor:default} .ovl-nav .here .num{color:var(--zest)} .ovl-nav .here .tag{grid-column:2;justify-self:start;font-family:"Poppins",sans-serif; font-weight:400;font-size:var(--meta);letter-spacing:0;color:#FFF; padding:3px 10px;border-radius:var(--r-ui);background:rgba(255,255,255,.2);margin-top:8px} @media (hover:hover){.ovl-nav li a:hover{color:var(--zest)}} @media (hover:none){.ovl-nav li a:hover{color:#FFF}} /* twelve entries: two columns of six, one size down. No re-layout needed. */ /* twelve entries in a 34rem panel: one column, one size down, and the panel scrolls. Two columns inside a panel this wide would crowd, which is the fault the twelve-entry setting exists to avoid. */ /* AND THE ROWS WERE 36px TALL. Measured at 390 and at 1440, every row in this list rendered a 36px tap target on a 38px pitch, with 90px between groups. 36px is under every comfortable minimum on a phone and this is the list somebody uses to leave the page they are lost on, so it is the worst place on the site to be asking for a precise tap. The type did not need to change and the pitch barely does: 1.5rem at line-height 1.02 is 24.5px of text, so the padding went from 6px to 11px and the row is 46px on a 48px pitch. Twelve rows is 120px more, on a panel that already scrolled at 390 before this change, so nothing is newly hidden. */ .ovl-nav ul.many li a,.ovl-nav ul.many li .here{font-size:1.5rem;padding:11px 0} .ovl-nav ul.many em{display:none} /* ---------- search ---------- The one thing the site does that the printed catalogue cannot. It is in the header of every page and it opens over the page rather than navigating away, so a buyer never loses their place. */ /* THE SEARCH CONTROL LOOKS LIKE A SEARCH FIELD, because it is the one thing this site does that the printed catalogue cannot, and Ashyun went looking for it and could not find it. It used to be a bordered ghost button reading "Search the range", third in a row of three identical bordered controls, and at 520px and below its label was hidden so it became an unlabelled circle. A person looking for search looks for a box with a magnifier and some grey prompt text in it. So that is what it is now: white field, dark magnifier, prompt text naming what can be typed into it. It never loses its label. */ /* IT IS AN INPUT NOW, NOT A BUTTON THAT LOOKS LIKE ONE. It was a