/* ===== styles/base.css ===== */ /* =========================================================================== The skeleton, and nothing with a personality in it. =========================================================================== This file holds what is true of both shops: the reset, the box model, the layout primitives, and the NAMES of the tokens. It sets almost no values. The two brands are not variations of one another. ithos is built to the shape of a Polish wooden-lamp shop the owner chose — white, Montserrat, terracotta, a four-column grid of square frames. cathelier is built to the shape of a Portuguese laser-cut shop she chose separately — cream, a brush serif, round occasion badges. Someone landing on one from the other should feel they changed website. So every value lives in brands/ithos.css or brands/cathelier.css, and this file only promises that the names exist. If a colour or a typeface appears below, it is a bug. ------------------------------------------------------------------------- */ /* --- the typefaces, served from this domain ------------------------------ Not from fonts.gstatic.com. A font request to Google is a transfer of the visitor's IP address to a third party: it has to be named in the privacy policy and, on several readings, consented to. Served from here, the site contacts nobody — which is why it needs no cookie banner at all. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/assets/fonts/montserrat-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/assets/fonts/montserrat-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('/assets/fonts/cormorant-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('/assets/fonts/cormorant-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('/assets/fonts/cormorant-300-italico-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Klee One'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/kleeone-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Klee One'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/kleeone-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Klee One'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/kleeone-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Klee One'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/kleeone-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Grandstander'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/assets/fonts/grandstander-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Grandstander'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/assets/fonts/grandstander-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* --- reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { /* Reserved so that hiding the scrollbar while the menu is open does not shift the whole page 15px sideways on a machine with classic scrollbars. On macOS overlay scrollbars it costs nothing. */ scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; overflow-x: clip; /* no page scrolls sideways, ever */ scroll-behavior: smooth; /* The header is sticky, so without this every anchor lands BEHIND it. Measured before adding it: /contact/#faq put the heading 85px under the bar -- completely hidden, with the page looking as if the link had gone nowhere. The value is the RESTING header plus a little air, not the shrunk one: a jump from the top of a page happens while the header is still at full height, and over-clearing when it is shrunk only leaves a gap. Each brand raises it where its header is taller. */ scroll-padding-block-start: 94px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { min-height: 100dvh; font-family: var(--font-body); font-size: var(--size-body); line-height: 1.7; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } input, button, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; } [hidden] { display: none !important; } h1, h2, h3, h4 { font-weight: inherit; line-height: 1.2; text-wrap: balance; } p { text-wrap: pretty; } /* Keyboard focus must stay visible. It is also the one ring that must never read as "this item is selected" — on the first build the drawer threw focus at the first menu link on open, and the owner read the ring as a selection and asked why. Focus goes somewhere neutral; the ring stays. */ :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .skip { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 200; padding: .75rem 1.25rem; background: var(--ink); color: var(--bg); transform: translateY(-120%); } .skip:focus { transform: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- layout primitives ---------------------------------------------------- The gutter is set once, here, and every page inherits it. A page that wants to bleed to the edges pulls back with negative margin rather than removing the padding, so nothing can end up flush against the glass by accident. */ :root { --gutter: clamp(1rem, 4vw, 2.5rem); --shell: 1222px; /* the model shop's content width */ } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .shell--narrow { max-width: 46rem; } .bleed { margin-inline: calc(var(--gutter) * -1); } .stack > * + * { margin-block-start: var(--stack, 1rem); } .measure { max-width: 62ch; } /* --- the product grid ----------------------------------------------------- Four across on a desktop, two on a phone. The owner asked for exactly this and named the number: "4 em cada total de ecrã". Three in between, because four at tablet width makes a 170px frame that shows nothing. */ .grid-products { display: grid; gap: var(--grid-gap, 30px); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (width >= 48rem) { .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Four across only once there is room for four to be BIG. * * The owner asked for the products to carry more weight. On a 1280 laptop four * columns gave a 273px frame; three give 390px, which is half again as much * photograph for the same screen. Four returns above 90rem, where each one is * still 340px — wider than the four-up ever was on a laptop. * * The phone is untouched: two columns, four lamps on a screen, which is the * number she asked for by name. */ @media (width >= 90rem) { .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Every product frame is 1:1. This is the single most visible thing the owner asked for, and the reason scripts/square.py exists. */ /* 3:4 e não 1:1. Dois terços das fotografias do estúdio são 2:3, e um quadrado deitava fora um terço de cada uma -- o foguetão sem bico, a girafa sem pés. O número está aqui, em scripts/cards.py (que corta) e em src/lib/photo.mjs (a proporção que o HTML declara), e scripts/guards.mjs compara os três com os ficheiros no disco. A variável existe para os sítios que precisam de outra forma, como a fotografia da oficina, os declararem em vez de a repetirem. É um NÚMERO (largura/altura) e não `3 / 4`: `aspect-ratio` aceita os dois, mas `calc()` só aceita o número, e a galeria da ficha precisa dele para calcular a sua largura máxima. Um nome, não dois. */ .frame { aspect-ratio: var(--frame-ratio, .75); overflow: hidden; background: var(--frame-bg); } /* is a wrapper with no size of its own, and an inside it sizes against THAT, not against the frame. Without these two lines the square frames were the photograph's natural width and the hero stopped short of the right edge. */ .frame > picture, .hero__photo > picture { display: block; width: 100%; height: 100%; } .frame img, .hero__photo img { width: 100%; height: 100%; object-fit: cover; } /* --- tables that refuse to shrink ---------------------------------------- */ .table-wrap { overflow-x: auto; } /* ===== styles/brands/ithos.css ===== */ /* =========================================================================== ithos — built to the shape of the shop the owner chose as her model. =========================================================================== Measured from that shop rather than guessed at: body Montserrat 14px, #212121 on white product name Montserrat 500, 14px, #333 price Montserrat 600, 14px, #A5523B button Montserrat 600, 13px, uppercase, white on #A5523B grid 4 columns, 30px gap, 1:1 frames from 600px sources swatches 35px boxes holding 27px images content width 1222px One substitution in the whole file. Their headline face is Canela, which is licensed; Cormorant Garamond at 300 is the nearest free relative — the same high contrast, the same long delicate serifs, the same air at large sizes. ------------------------------------------------------------------------- */ [data-brand='ithos'] { --bg: #FFFFFF; --head-bg: rgb(255 255 255 / .92); /* a barra depois de descer: fosca, não opaca */ --bg-soft: #FAF7F4; --bg-trust: #FBF6F1; --ink: #212121; --ink-soft: #565656; --muted: #6E6E6E; /* the model shop uses #777, which is 4.48:1 on white — it fails by two hundredths, and two hundredths is still a fail */ --line: #E8E3DD; --line-soft: #F1ECE6; --accent: #A5523B; /* the terracotta on prices and buttons */ --accent-deep: #8C4230; --accent-ink: #FFFFFF; --frame-bg: #F6F1EC; /* The cover panel. 72% and not more so the photograph reads through it, and not less because the worst case has to hold: composited over a BLACK photograph this cream lands at #B8B1AA, and #4A3226 on that is 5.58:1. Over the actual terracotta it is far better -- 5.58 is the floor, not the measurement. scripts/battery samples the real pixels and checks. */ /* O véu da capa: a cor aqui, a opacidade de origem aqui, e a que a dona escolhe no painel (covers.json "veil") por cima, no style da capa. O guards.mjs confere as duas contra a regra dos 4,5:1 sobre branco. */ --cover-veil-rgb: 16 10 7; --cover-veil-a: .58; --cover-ink: #FFFFFF; --font-body: 'Montserrat', system-ui, sans-serif; --font-display: 'Cormorant Garamond', Georgia, serif; --size-body: 14px; --radius: 0px; /* that shop is square-cornered throughout */ } /* --- type ----------------------------------------------------------------- */ /* The serif is for the HERO LINE AND NOTHING ELSE. * * That is the correction that came out of reading the model shop properly. * Its section headings are Montserrat 22/600 and its product titles are * Montserrat 34/500 — the serif appears exactly once per page, over the * photograph, and that is what makes it feel like a moment instead of a * typeface choice. I had it on every heading, which spends it. */ [data-brand='ithos'] h1, [data-brand='ithos'] h2 { font-family: var(--font-body); font-weight: 600; letter-spacing: normal; color: #242424; } [data-brand='ithos'] h1 { font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.15rem); } [data-brand='ithos'] h2 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.375rem); } [data-brand='ithos'] h3 { font-family: var(--font-body); font-weight: 500; font-size: 1rem; } /* A faixa da campanha (portes grátis), como a da cathelier, nas cores daqui. */ :where([data-brand='ithos']) .announce { background: var(--bg-trust); color: var(--ink-soft); font-family: var(--font-body); font-size: 13px; letter-spacing: .04em; } [data-brand='ithos'] .display { font-family: var(--font-display); font-weight: 300; } /* The product title, at their size and weight. */ [data-brand='ithos'] .product__detail h1 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.125rem); font-weight: 500; color: #333; } [data-brand='ithos'] .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } [data-brand='ithos'] .lede { font-size: 15px; color: var(--muted); line-height: 1.8; } /* On a phone the catalogue's opening paragraph is the only thing standing between the fold and the products. The owner asked for four lamps on a screen and named the number, so it is measured, not estimated: at 375x812 the budget is 812 minus two card heights, and this paragraph has to live inside what is left. */ @media (width < 30rem) { [data-brand='ithos'] .lede { font-size: 13.5px; line-height: 1.65; } [data-brand='ithos'] h1 { font-size: 1.65rem; } } /* --- header --------------------------------------------------------------- Burger left, wordmark dead centre, cart right. The centring is absolute and not a grid column: with a grid, the logo shifted left when the cart counter went from one digit to two. */ /* The owner asked for this twice: the mark large, and without the "handmade in Portugal" line under it. Both are honoured in the asset itself — assets/brand/ithos-wordmark.svg has the strapline path removed and the viewBox tightened, so nothing here has to crop it. */ /* --- the footer is WARM, and it is the one thing that stops a white shop reading as a spreadsheet. Theirs is this exact peach. */ [data-brand='ithos'] .foot { background: #FCE1C5; border-block-start: 0; } [data-brand='ithos'] .foot__group, [data-brand='ithos'] .foot__base { border-color: rgb(140 66 48 / .18); } [data-brand='ithos'] .foot__mark img { block-size: 64px; } /* Everything that prints on the peach, in one list. The last two times a new class appeared in the footer it inherited a grey chosen against white and went straight to 4.06:1 — under the minimum, and invisible to anyone reading the CSS rather than measuring it. */ [data-brand='ithos'] .foot__group a, [data-brand='ithos'] .foot__contact a, [data-brand='ithos'] .foot__end, [data-brand='ithos'] .foot__end a, [data-brand='ithos'] .foot__note, [data-brand='ithos'] .foot__cost { color: #6B4A38; } /* 6.28:1 on the peach */ [data-brand='ithos'] .foot__group summary, [data-brand='ithos'] .foot__withdraw a { color: #3A2219; border-color: rgb(140 66 48 / .35); } [data-brand='ithos'] .foot__social a { border-color: rgb(140 66 48 / .28); color: #6B4A38; } [data-brand='ithos'] .foot__social a:hover { color: var(--accent-deep); border-color: var(--accent-deep); } /* The word beside the three lines, in this shop's voice: spaced upper case. It sat at 12px, one step above the 11px eyebrow, and read as a caption on a control rather than as the control's name. */ [data-brand='ithos'] .open-menu__word { font-weight: 400; color: var(--ink-soft); } /* Removing the link bar took 28px off the ithos header (112 -> 84, measured at 1280 and 1440), because its second grid row went with it. Some of that comes back as a bigger wordmark rather than as empty air: with nothing else in the middle track, the mark IS the header. */ @media (width >= 64rem) { /* --head-h lives on the ROOT and not on .head__row, because the cover reads it too: it is what the cover is pulled up by so the bar can float on it. One declaration, two readers, no way to disagree. */ [data-brand='ithos'] { --head-h: 96px; scroll-padding-block-start: 106px; } [data-brand='ithos'] .head__mark img { height: clamp(64px, 5.5vw, 76px); } } /* --- product card --------------------------------------------------------- Frame, swatches, name, price — in that order, which is the order that shop uses and the order the owner pointed at. The swatches are the "bolinhas" she asked for: little squares of the actual finish, so nobody has to read the words "itho rato" to know what they are choosing. */ /* --- buttons -------------------------------------------------------------- */ /* --- section headings ----------------------------------------------------- */ /* ===== styles/brands/cathelier.css ===== */ /* =========================================================================== cathelier — built to the shape of the second shop the owner chose. =========================================================================== Measured from that shop rather than guessed at: body Klee One 400, 14px in copy, letter-spacing 0.72px navigation Klee One 400, 21.6px, SENTENCE CASE — not uppercase, not letter-spaced. This is the part the owner picked out by name. headings Grandstander at weight 100. Not 500. The whole character of that shop is a hairline display face over a brush serif, and at 500 it reads as a different shop entirely. header a three-column grid, logo left, nav centre, icons right ink #6B4E3C, with #634A3A under it structure announcement bar, centred crest, full-bleed seasonal banner, a row of ROUND occasion badges, then featured collections Both of its typefaces are free, so unlike the ithos side there is no substitution here: this is the same lettering. And this is deliberately nothing like the ithos world. Someone arriving here from the lamps should feel they changed website — same workshop, different shop. Where ithos is white, square-cornered and terracotta, this is cream, round, and brown. */ [data-brand='cathelier'] { --bg: #FFF8F2; --head-bg: rgb(255 248 242 / .92); /* a barra depois de descer: fosca, não opaca */ --bg-soft: #FFFFFF; --bg-trust: #F7EDE3; --ink: #6B4E3C; /* The model shop's own muted brown is rgb(107 78 60 / .62), and on its cream that is 2.96:1 — 54 separate failures on one page. These are the same brown at the opacity that actually passes, flattened to a solid value so the answer does not change with whichever of the three backgrounds it lands on. Measured by painting the colour onto a canvas and reading it back: reading it with a regular expression breaks on color-mix(). */ --ink-soft: #7A5C48; /* 5.6:1 on cream */ --muted: #816757; /* 4.5:1 on the darkest of the three grounds */ --line: #EADDCF; --line-soft: #F2E7DA; --accent: #634A3A; /* Same 72% panel, but the cover ink is DARKER than the body ink on purpose: --ink (#6B4E3C) over the worst-case panel is 3.58:1, which fails. #4A3527 is 5.44:1 on the same worst case. A brand colour that works on the page does not automatically work over a photograph. */ /* O véu da capa: a cor aqui, a opacidade de origem aqui, e a que a dona escolhe no painel (covers.json "veil") por cima, no style da capa. O guards.mjs confere as duas contra a regra dos 4,5:1 sobre branco. */ --cover-veil-rgb: 16 10 7; --cover-veil-a: .58; --cover-ink: #FFFFFF; --accent-deep: #4B372A; --accent-ink: #FFF8F2; --frame-bg: #F7EFE6; --sibling-bg: #FFFFFF; /* A LETRA É A DA ITHOS desde 18 out 2026 (a dona: «o tipo de letra do cathelier preferia que fosse igual ao do ithos»). Era Klee One no texto e Grandstander nos títulos, as da loja que ela tinha escolhido como modelo; as notas sobre elas, por cima, ficam como história. */ --font-body: 'Montserrat', system-ui, sans-serif; --font-display: 'Cormorant Garamond', Georgia, serif; --size-body: 14px; --radius: 14px; /* that shop is round-cornered throughout */ --pill: 999px; --grid-gap: 22px; } [data-brand='cathelier'] body { line-height: 1.75; } /* --- type ----------------------------------------------------------------- */ [data-brand='cathelier'] h1, [data-brand='cathelier'] h2, [data-brand='cathelier'] h3 { /* Os títulos como os da ithos: Montserrat a 600 (o serifado fica para os momentos, .display). */ font-family: var(--font-body); font-weight: 600; letter-spacing: normal; /* No colour here, and that is the point. A brand rule with an attribute selector outranks `.hero__title`, so setting it painted the hero headline brown on brown: 1.08:1, which is invisible. Headings INHERIT, the body sets the colour, and a dark panel can therefore still turn its own text white. Measured, not looked at — it looked like a shadow. */ } [data-brand='cathelier'] h1 { font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.15rem); } [data-brand='cathelier'] h2 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.375rem); } [data-brand='cathelier'] h3 { font-size: 1rem; font-weight: 500; } [data-brand='cathelier'] .display { font-family: var(--font-display); font-weight: 300; } [data-brand='cathelier'] .eyebrow { font-family: var(--font-body); font-size: 13px; font-weight: 400; letter-spacing: .045em; text-transform: none; color: var(--muted); } [data-brand='cathelier'] .lede { font-size: 16px; color: var(--ink-soft); line-height: 1.85; } /* --- the announcement bar -------------------------------------------------- That shop runs one above everything, and it is where a seasonal line lives: "Christmas orders close on the 10th" and nothing else. */ /* --- header ---------------------------------------------------------------- Sentence case, Klee One, and no letter-spacing to speak of. The uppercase spaced-out version I had before belongs to the other brand; this one reads like handwriting on a label, which is the whole point. */ [data-brand='cathelier'] .head__mark img { height: clamp(40px, 5vw, 54px); } /* Sentence case and the body face, like everything else in this shop — the spaced upper case beside it belongs to the other brand. */ [data-brand='cathelier'] .open-menu__word { font-family: var(--font-body); font-size: 16px; letter-spacing: .03em; text-transform: none; color: var(--ink-soft); } @media (width >= 64rem) { /* On the root, not on .head__row: the cover reads it too (see ithos.css). */ [data-brand='cathelier'] { --head-h: 92px; scroll-padding-block-start: 102px; } [data-brand='cathelier'] .head__mark img { height: clamp(50px, 4.2vw, 62px); } } [data-brand='cathelier'] .drawer__nav a { font-size: 1.15rem; letter-spacing: .03em; } /* --- the round occasion badges ---------------------------------------------- The row of circles under the banner, which is how that shop's whole navigation works and exactly how the owner described hers: by date and by occasion, not by what the thing is made of. */ :where([data-brand='cathelier']) .occasions { /* SEM BARRA DE ROLAGEM À VISTA. A dona fotografou-a: uma barra cinzenta de sistema por baixo dos círculos, larga e escura, a competir com eles por atenção num sítio onde nada mais tem cromados. O que diz que a fila anda é o círculo cortado ao meio na beira, como na tira das miniaturas dos cartões. */ scrollbar-width: none; /* NUM TELEMÓVEL É UMA TIRA QUE SE ARRASTA, NÃO UMA GRELHA. Medido a 375px: com cinco colunas cada uma dá 66px, e nenhuma destas etiquetas cabe lá -- CHRISTMAS em maiúsculas espaçadas mede cerca de 90px. O texto saía da célula, encavalitava-se no vizinho e empurrava a PÁGINA INTEIRA para o lado. Com quatro colunas cabe menos ainda e dez ocasiões caem em 4/4/2, com meia fila vazia. Encurtar os nomes não resolve: CHRISTMAS é o nome da ocasião e é longo. Por isso abaixo de 48rem isto é uma tira horizontal com rolamento próprio -- o padrão que qualquer loja usa para navegação por categoria, todas as dez continuam alcançáveis, e o rolamento fica DENTRO da tira em vez de ficar no documento. A partir de 48rem volta a ser a fila única da referência. */ display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; padding-block: clamp(1.5rem, 4vw, 2.75rem); /* A tira sangra até às margens para se ver que há mais do lado de lá. */ margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } :where([data-brand='cathelier']) .occasions > * { flex: 0 0 96px; scroll-snap-align: start; } :where([data-brand='cathelier']) .occasions::-webkit-scrollbar { display: none; } @media (width >= 48rem) { :where([data-brand='cathelier']) .occasions { display: grid; gap: 1.75rem 0; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); overflow-x: visible; margin-inline: 0; padding-inline: 0; } :where([data-brand='cathelier']) .occasions > * { flex: none; } } /* `align-content: start`: a grelha da fila estica cada círculo à altura do mais alto, e sem isto as duas filas de dentro repartiam a sobra -- um rótulo de uma linha ficava a meio caminho de um de quatro. Com ela, todos penduram do mesmo sítio, logo abaixo do círculo. */ :where([data-brand='cathelier']) .occasion { display: grid; justify-items: center; align-content: start; gap: .55rem; text-decoration: none; text-align: center; } :where([data-brand='cathelier']) .occasion__badge { width: clamp(56px, 12vw, 74px); aspect-ratio: 1; border-radius: 999px; display: grid; place-items: center; overflow: hidden; /* Cheio e não pálido, com o desenho a branco e um anel claro à volta -- é a referência que a dona mandou, e é medido: branco sobre --accent dá 8,17:1, muito acima dos 3:1 de que um desenho precisa. Sem anel à volta: a dona pediu-o fora depois de o ver. */ background: var(--accent); border: 0; color: #FFFFFF; transition: background-color .2s ease, transform .2s ease; } :where([data-brand='cathelier']) .occasion:hover .occasion__badge { background: var(--accent-deep); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { :where([data-brand='cathelier']) .occasion__badge { transition: none; } :where([data-brand='cathelier']) .occasion:hover .occasion__badge { transform: none; } } :where([data-brand='cathelier']) .occasion__badge img { width: 100%; height: 100%; object-fit: cover; } /* O DESENHO EM PERCENTAGEM DO CÍRCULO, não num tamanho fixo. Estava a 30px dentro de um disco que vai de 56 a 74: ocupava 40% do círculo na largura maior e não se percebia o que era. Em percentagem cresce e encolhe com o disco, e a proporção desenho/círculo é a mesma em todos os ecrãs. O atributo width/height que occasionArt() escreve fica como tamanho intrínseco -- serve de reserva antes de a folha de estilos chegar. */ :where([data-brand='cathelier']) .occasion__badge svg { inline-size: 62%; block-size: 62%; } :where([data-brand='cathelier']) .occasion__name { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); line-height: 1.35; max-width: 11ch; } :where([data-brand='cathelier']) .occasion:hover .occasion__name { color: var(--accent-deep); } /* --- a fila de ocasiões na home --------------------------------------------- A navegação desta loja é por ocasião -- a dona descreveu-a assim e o site foi construído à volta disso. A fila é a primeira coisa por baixo da capa, que é onde uma navegação serve para alguma coisa, e cada círculo leva à lista completa já filtrada: as dez páginas de ocasião deixaram de existir. */ :where([data-brand='cathelier']) .occasions-lead { padding-block: clamp(.5rem, 2vw, 1rem); background: var(--bg-trust); } /* --- collection blocks ------------------------------------------------------ */ :where([data-brand='cathelier']) .collection { padding-block: clamp(2rem, 5vw, 3.5rem); } :where([data-brand='cathelier']) .collection__head { text-align: center; max-width: 46rem; margin-inline: auto; } :where([data-brand='cathelier']) .collection__head .eyebrow { display: block; margin-block-end: .5rem; } /* «Ver as 20 peças de Natal», por baixo das quatro irmãs na ficha de uma peça. */ :where([data-brand='cathelier']) .collection__mais { margin: 2rem 0 0; text-align: center; } /* --- cards, round instead of square ----------------------------------------- */ [data-brand='cathelier'] .frame { border-radius: var(--radius); } [data-brand='cathelier'] .card__name { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--ink); text-align: center; letter-spacing: .03em; } [data-brand='cathelier'] .card__price { color: var(--accent); text-align: center; font-size: 13px; } /* A tira das miniaturas centra-se, como tudo o resto neste cartão -- na ithos o nome alinha à esquerda e a tira acompanha-o. `safe` e não `center` seco: num contentor que rola, centrar conteúdo que não cabe empurra o princípio para fora do alcance, e `safe` volta ao início nesse caso. */ [data-brand='cathelier'] .card__thumbs.ready { justify-content: safe center; } /* A QUARTA COLUNA CHEGA MAIS CEDO NESTA LOJA. A grelha partilhada guarda as quatro colunas para as 90rem porque a dona pediu peso às fotografias da ithos -- vinte e seis candeeiros, cada um uma coisa diferente, e a fotografia é o produto. Aqui são quarenta e uma peças e a leitura é outra: percorre-se a lista à procura da forma certa. Medido: às 1280, que é o portátil mais comum, três colunas davam um cartão de 366px e 627px de altura -- uma fila por ecrã. Com a quarta às 64rem o mesmo ecrã dá 267px e 498px, e às 1024 dá 214px, que continua bem acima dos 170px que o comentário da grelha partilhada aponta como o mínimo em que uma fotografia deixa de se ver. Sem `:where()`, de propósito: esta regra TEM de ganhar à de base.css, e ganhar por especificidade é mais seguro do que ganhar pela ordem dos ficheiros. O telemóvel não se toca: duas colunas, como está. */ @media (width >= 64rem) { [data-brand='cathelier'] .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } } [data-brand='cathelier'] .filter { font-family: var(--font-body); font-size: 14px; letter-spacing: .03em; text-transform: none; } [data-brand='cathelier'] .btn { border-radius: var(--pill); font-family: var(--font-body); font-size: 15px; font-weight: 400; letter-spacing: .04em; text-transform: none; } [data-brand='cathelier'] .field input, [data-brand='cathelier'] .field textarea, [data-brand='cathelier'] .field select { border-radius: 10px; } [data-brand='cathelier'] .choice { border-radius: 10px; } [data-brand='cathelier'] .reassure { border-radius: var(--radius); } [data-brand='cathelier'] .foot__group summary { font-family: var(--font-body); font-size: 15px; font-weight: 400; letter-spacing: .03em; text-transform: none; } /* --- a piece with no photograph yet ------------------------------------------ Forty-one pieces are written and not one has been photographed. Rather than a broken image or a grey box, the frame shows the piece's name set the way it would be engraved. It is honest about being a placeholder, it keeps the grid working, and it disappears by itself the moment a photograph lands. */ :where([data-brand='cathelier']) .awaiting { display: grid; place-items: center; padding: 1rem; text-align: center; background: repeating-linear-gradient(103deg, rgb(107 78 60 / .045) 0 2px, transparent 2px 9px), var(--frame-bg); } :where([data-brand='cathelier']) .awaiting span { font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--muted); max-width: 14ch; line-height: 1.4; } :where([data-brand='cathelier']) .collection--alt { background: var(--bg-soft); } /* --- the announcement line ------------------------------------------------- */ :where([data-brand='cathelier']) .announce { margin: 0; padding-block: .75rem; text-align: center; background: var(--bg-trust); color: var(--ink-soft); font-family: var(--font-body); font-size: 15px; letter-spacing: .03em; } /* --- questions, on the home page ------------------------------------------ Two columns of pills. That shop puts them here rather than only on a contact page, and it is right to: the questions people have about a personalised piece are the reason they do not order one. */ :where([data-brand='cathelier']) .ask { padding-block: clamp(2rem, 5vw, 3.5rem); } :where([data-brand='cathelier']) .ask__grid { display: grid; gap: .75rem; margin-block-start: 1.75rem; } @media (width >= 56rem) { :where([data-brand='cathelier']) .ask__grid { grid-template-columns: 1fr 1fr; gap: .75rem 1.25rem; } } :where([data-brand='cathelier']) .ask__item { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; } :where([data-brand='cathelier']) .ask__item summary { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.15rem; cursor: pointer; list-style: none; font-family: var(--font-body); font-size: 15px; color: var(--ink); } :where([data-brand='cathelier']) .ask__item summary::-webkit-details-marker { display: none; } :where([data-brand='cathelier']) .ask__item summary::after { content: '⌄'; margin-inline-start: auto; color: var(--muted); } :where([data-brand='cathelier']) .ask__item[open] summary::after { content: '⌃'; } :where([data-brand='cathelier']) .ask__item svg { flex: none; color: var(--accent); } :where([data-brand='cathelier']) .ask__item > div { padding: 0 1.15rem 1.15rem; font-size: 14px; line-height: 1.8; color: var(--ink-soft); } :where([data-brand='cathelier']) .ask__item > div p + p { margin-block-start: .75rem; } /* --- the product page ------------------------------------------------------ A big, light title, the way that shop sets them: Grandstander at 100, half again the size everything else on the page uses. At 500 and 24px it read as a paragraph heading; the point of a hairline face is that it can be large without shouting. */ [data-brand='cathelier'] .product__detail h1 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.125rem); font-weight: 500; line-height: 1.2; } [data-brand='cathelier'] .product__price { font-family: var(--font-body); font-size: 21px; font-weight: 400; } [data-brand='cathelier'] .field > label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; } :where([data-brand='cathelier']) .field__req { color: var(--muted); letter-spacing: 0; text-transform: none; font-size: 12px; } [data-brand='cathelier'] .product__form { gap: .9rem; } /* An inside an

is inline: it gets the glyphs' box, not the heading's line box, so it measured 22px tall — below the 24px minimum, on a link that is the only way out of 41 pages. */ [data-brand='cathelier'] .collection__head h2 a { color: inherit; text-decoration: none; display: inline-block; min-height: 28px; } [data-brand='cathelier'] .collection__head h2 a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; } /* --- a faixa dos pedidos especiais -------------------------------------------- Só aparece no separador «Custom orders», por cima das peças por medida. O `hidden` que a esconde vence este `display` por causa da regra global `[hidden] { display: none !important }` em base.css -- sem ela, declarar `display` aqui deixava-a sempre à vista. */ :where([data-brand='cathelier']) .custom-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.25rem; margin-block-start: 1.5rem; padding: 1.1rem 1.25rem; background: var(--bg-soft); border-radius: 14px; text-align: center; } :where([data-brand='cathelier']) .custom-note p { margin: 0; max-inline-size: 46ch; } /* ===== styles/shop.css ===== */ /* =========================================================================== The furniture: the parts that behave the same in both shops. =========================================================================== Everything here reads its colours and typefaces from the brand tokens, so a drawer on the ithos side and a drawer on the cathelier side share a skeleton and share no appearance. */ /* --- the cover ------------------------------------------------------------ One picture filling the first screen, with a few words over it and the bar floating on top of both. TWO SHAPES, AND THEY ARE THE FILM'S SHAPES When the cover carries a film, the picture under it is that film's own first frame, cut to the same two shapes the film is cut to and switching at the same width -- otherwise the cover would jump between two framings at the moment the film began. Without a film it is the brand's photograph, and the 4:5 master is the tallest shape any screen asks for, because `object-fit: cover` takes a wide band out of a tall picture and never the other way round. THE WORDS SIT ON A FLAT VEIL, NOT ON THE PICTURE Text straight on a picture has no contrast that can be measured: the ground is whatever the picture is at that pixel, and it changes the day the owner swaps the file. A gradient is worse than nothing, because a guard reads the declared colour -- the strong end -- and passes while the weak end is unreadable. So the whole cover carries ONE flat veil, and the worst ground it can ever be is itself over white. See src/lib/cover.mjs for the numbers and scripts/guards.mjs for the arithmetic that checks them. */ .cover { position: relative; isolation: isolate; display: grid; } /* AS QUATRO CAMADAS, COM A ORDEM DECLARADA E NÃO DEIXADA AO ACASO. Sem estes z-index a ordem era EMERGENTE, e mudava sozinha a meio de uma transição: um elemento com `opacity` abaixo de 1 cria um contexto de empilhamento e é pintado com os posicionados, ACIMA do véu; no instante em que a opacidade chega exactamente a 1 deixa de o criar e cai para BAIXO dele. O filme aparecia claro durante os 0,9s do desvanecimento e escurecia de repente no último quadro -- que foi exactamente o que a dona descreveu. Medido: a 0,99 a capa vinha sem véu, a 1,0 vinha com ele. Os quatro são itens de grelha, e `z-index` aplica-se a itens de grelha sem precisarem de `position` -- é o que torna isto declarável em vez de remendado com `position: relative` em cada um. */ .cover__media, .cover__film, .cover__veil, .cover__words { grid-area: 1 / 1; } .cover__media { z-index: 0; } .cover__film { z-index: 1; } .cover__veil { z-index: 2; } .cover__media { display: block; inline-size: 100%; aspect-ratio: 4 / 5; /* On a phone the cover should be the screen, not a postcard on it. 150vw is the floor; the viewport cap stops a short landscape phone from pushing everything else below the fold entirely. Note what the floor does to the SHAPE: on a 390x844 phone it wins at 585px, so the frame is really 2:3 and not 4:5, which is the shape the tall film is cut to. */ min-block-size: min(70svh, 150vw); max-block-size: calc(100svh - var(--head-h) - var(--anuncio-h, 0px) - 3rem); overflow: hidden; } .cover__img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--cover-focus, 50% 50%); } /* The film sits between the photograph and the veil. It starts invisible and with no source at all: until shop.js turns it on, this is an empty box over the picture, and the cover looks exactly as it does with no JavaScript. The fade is what stops the first frame arriving as a jump-cut -- and it is skipped for anyone who asked for less motion, who never gets this far. */ /* O FILME NÃO DIMENSIONA A CAPA. É a fotografia que lhe dá a forma, e o filme é despejado lá dentro. Estava `inline-size: 100%; block-size: 100%`, e um `block-size` em percentagem numa linha de grelha automática conta como `auto` para efeitos de dimensionamento: assim que os metadados do vídeo chegam, o elemento passa a ter proporção intrínseca (16:9) e contribui com a altura toda dela. A fotografia ao lado está travada pelo `max-block-size: calc(100svh - 3rem)` e não acompanha. Medido num ecrã de 1905x1005: a capa abria com 957px, tudo a bater certo; no instante em que os metadados do filme chegavam, a capa saltava para 1072 e a fotografia ficava nos 957 -- 115px em que só havia véu por cima do fundo da página. É a barra escura que aparecia em baixo antes de o filme entrar. `position: absolute` tira-o da conta: um item posicionado não contribui para a altura da linha. O `inset: 0` sobre a área de grelha 1/1 dá-lhe exactamente a caixa da capa, seja ela qual for. */ .cover__film { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; pointer-events: none; } .cover__film[data-on] { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .cover__film { transition: opacity .9s ease; } } /* THE ONE FLAT GROUND ON THE COVER. Everything readable on this screen -- the headline, the button's label, and the whole header bar floating above it -- is read against THIS and nothing else. It is one colour at one opacity over the entire cover, which is what makes the worst case arithmetic instead of hope: the brightest thing any picture or film can put underneath is white, and scripts/guards.mjs checks the composite over white rather than over this particular photograph. It must never become a gradient. A gradient's declared colour is its strong end, so a guard reads the strong end and passes while the weak end is unreadable -- the failure this veil exists to make impossible. */ /* A cor e a opacidade em separado: a opacidade pode vir do style da capa (a que a dona escolhe no painel), e uma variável só se resolve onde é usada -- um --cover-veil já composto na raiz levava a opacidade da raiz. */ .cover__veil { background: rgb(var(--cover-veil-rgb) / var(--cover-veil-a)); } .cover__words { position: relative; z-index: 3; display: grid; place-items: center; text-align: center; /* A barra já não está por cima da capa, por isso as palavras centram-se na caixa toda. */ padding: clamp(1rem, 4vw, 3rem); } .cover__block { display: grid; justify-items: center; gap: clamp(1.1rem, 3vw, 1.75rem); /* In rem and NOT in ch. `ch` resolves against the font of the element it is written on, and this block inherits the 14px body size: 26ch here measured 241px, which put every single word of a 64px headline on its own line. */ inline-size: min(100%, 44rem); } /* TWO classes, and that is a correctness requirement rather than tidiness. Both brand files carry `[data-brand='…'] h1 { font-size: … }`, which at (0,1,1) outranks a lone `.cover__title` at (0,1,0) -- the old cover's font-size was dead code for exactly that reason, and the headline quietly took the brand's body-copy h1 size. (0,2,0) is what it takes to win. */ .cover .cover__title { margin: 0; color: var(--cover-ink); /* Também pela altura do ecrã (8svh): num portátil baixo a capa encolhe para deixar ver o que vem a seguir, e um título de quatro linhas ao tamanho de um ecrã alto saía por baixo dela, com o botão. */ font-size: clamp(2rem, min(6.5vw, 8svh), 4rem); line-height: 1.04; text-wrap: balance; } .cover__btn { margin: 0; } @media (width >= 48rem) { .cover__media { aspect-ratio: 4 / 3; min-block-size: 0; max-block-size: calc(100svh - var(--head-h) - var(--anuncio-h, 0px) - 3rem); } .cover__img { object-position: var(--cover-focus-wide, 50% 50%); } } @media (width >= 64rem) { .cover__media { aspect-ratio: 16 / 9; } } /* A CAPA JÁ NÃO É O ECRÃ INTEIRO (a dona, 18 out 2026: «gostava que na parte * inferior se conseguisse ver "os mais vendidos", para se perceber que há * coisas para baixo»). Em setembro ela tinha pedido o contrário -- o filme a * ocupar a janela toda --, e a capa passou a ter a altura da janela numa faixa * de feitios (10/7 a 11/5) onde o filme largo mantinha 80% de si. Medido agora: * num portátil de 1440x800 a capa acabava no fundo da janela e o título das * mais vendidas começava 80px abaixo dela, fora do ecrã. * * Por isso a faixa saiu, e com ela a altura mínima de um ecrã inteiro (e a guarda que * a refazia). Fica a regra que já existia por baixo dela: a capa tem a forma do * filme largo (16:9, ou 4:3 entre 48 e 64rem) e NUNCA passa da janela menos * 9rem -- o espaço para o título da secção seguinte se ver. No telemóvel nada * muda: a capa alta já deixava ver o título (medido a 390x664 e a 430x932). */ @media (width >= 48rem) { /* Com a barra fora da capa, o que fica para o título seguinte é o resto da janela depois da barra e da capa: 5rem, o mesmo que os 9rem de antes davam com a barra (4rem) por cima. */ .cover__media { max-block-size: calc(100svh - var(--head-h) - var(--anuncio-h, 0px) - 5rem); } /* NA CATHELIER, OS SEPARADORES À VISTA (a dona, 20 out 2026: «no cathelier também não se veem aqueles ícones»). A seguir à capa da página inicial vem a fila dos círculos (Natal, Nascimento, Nomes…), e os 5rem só deixavam ver o cimo deles: medido a 1440x790, a fila acaba 160px abaixo do topo da secção. A capa guarda 11rem para ela; num ecrã muito baixo não desce dos 22rem, para o título e o botão continuarem a caber. */ .cover:has(+ .occasions-lead) .cover__media { max-block-size: max(22rem, calc(100svh - var(--head-h) - var(--anuncio-h, 0px) - 11rem)); } } .hero__cta { display: inline-flex; align-items: center; min-height: 26px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; } /* --- breadcrumbs ---------------------------------------------------------- */ .crumbs { padding-block: .5rem .25rem; font-size: 12px; color: var(--muted); } .crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; } .crumbs li + li::before { content: '/'; margin-inline-end: .4rem; color: var(--line); } .crumbs a, .crumbs span { text-decoration: none; display: inline-flex; align-items: center; min-height: 26px; } .crumbs a:hover { color: var(--accent); } /* --- header, basket counter, cards, buttons: SHAPE ONLY -------------------- These came out of brands/ithos.css, where they had no brand scope and therefore governed cathelier too. That is how `.head__mark { position: absolute }` survived: the cathelier header was told to put its mark in grid column 1 while a rule in the other brand's file had already taken it out of the grid entirely. The navigation then printed straight through the wordmark, which is what the owner photographed. base.css promises that a brand file holds values and this one holds shape. It is a promise worth keeping. */ /* --head-h is declared on the ROOT and not on .head__row, because two different things read it: the bar's own height, and the negative top margin that pulls the cover up underneath the bar so it can float on it. Written once, read twice, and therefore unable to disagree. The brand files raise it on wide screens, also on the root. The SHRUNK value stays on the row, which is right: shrinking is a state of the bar, and the cover never sees it because by the time the bar has shrunk the cover is off the screen. */ html { --head-h: 84px; } /* A faixa da campanha dentro da barra (shell.mjs, header): uma linha de altura fixa, para o espaço que se guarda por baixo da barra ser uma conta e não uma medição. Recolhe-se quando a barra encolhe ao descer. */ html:has(.head .announce) { --anuncio-h: 34px; } .head .announce { box-sizing: border-box; height: var(--anuncio-h); margin: 0; padding: 0 1rem; overflow: hidden; display: flex; align-items: center; justify-content: center; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; line-height: 1; } /* Recolher é encolher a barra: só para quem não pediu menos movimento (a guarda das barras mede isto); para os outros a faixa fica sempre. */ @media (prefers-reduced-motion: no-preference) { .head[data-anim='yes'] .announce { transition: height var(--head-move) var(--head-ease); } .head[data-shrunk='yes'] .announce { height: 0; } } /* A barra já não ocupa espaço, por isso o espaço dela é devolvido aqui -- e a partir de --head-h, que é a altura EM REPOUSO. Ligá-lo à altura encolhida faria a página inteira subir 34px a meio do gesto, que é precisamente o defeito que sair do fluxo veio evitar. Nas duas páginas com capa também: a capa passava por baixo da barra, e a barra, com as letras brancas, obrigava o véu a ficar nos 56% para o «Menu» se ler sobre a luz de um candeeiro. A dona achou o vídeo muito escuro (18 out 2026) e pôs o véu no mínimo; com a barra fora da capa, o véu só tem de segurar o título grande, e desce até 44%. */ body { padding-block-start: calc(var(--head-h) + var(--anuncio-h, 0px)); } /* A BARRA DEPOIS DE DESCER: VIDRO FOSCO, NÃO UM BLOCO BRANCO. Quatro coisas em vez de uma, e é o conjunto que faz a diferença: fundo a 92% em vez de opaco, desfoque do que passa por trás, uma sombra baixa em vez de só um fio, e tudo no mesmo relógio. A curva já era esta. Os 92% não são gosto, são o que a aritmética permite. A pior coisa que passa por trás da barra é a parte escura da capa, que em pixels é quase preta, e o chão da barra nunca desce abaixo de `alfa × --bg`. A 92% a tinta mais fraca do cabeçalho lê 6,13:1 na ithos e 4,84:1 na cathelier; scripts/guards.mjs calcula-o e mata a construção se deixar de dar. */ /* FORA DO FLUXO, E É ISSO QUE FAZ O RESTO FUNCIONAR. Com `sticky` a barra ocupava espaço, e encolhê-la mudava a altura do documento -- por isso o encolher tinha de viver longe, aos 240px e com 90px de histerese: para não baloiçar numa página curta, e para o «Skip to content», que aterra a y=123, não o disparar. Fora do fluxo esse custo desaparece, e é por isso que tudo passa a poder acontecer junto e cedo: o fundo, a sombra, a altura da barra e o logótipo mexem no MESMO gesto e no mesmo relógio. O espaço que ela deixava é devolvido no `body`. */ .head { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50; background: var(--head-bg, var(--bg)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgb(0 0 0 / .06); border-block-end: 1px solid var(--line-soft, var(--line)); } .head__row { min-height: var(--head-h); } /* --- the bar has no ground of its own until you move ------------------------ AT THE TOP THE BAR IS NOT A BAR, IT IS FOUR CONTROLS STANDING ON THE COVER. Two states, and the second one is the safe one. `data-scrolled` is written on the ROOT by a one-line script in the head -- before the first paint, and reading the real scroll position, so a reload part-way down a page does not start with a transparent bar over the text. Its absence is what a browser with no JavaScript sees, and absence means the bar keeps its background: the rule below needs data-scrolled='no' to be there, not merely not 'yes'. A bar that loses its ground only when a script says so can never be left floating illegibly over the page body by a script that failed to load. Nas páginas com capa a barra já não clareia (letras brancas sobre o filme): desde 19 out 2026 a capa começa por baixo dela, e o que está por trás da barra transparente é o fundo da página, como em todas as outras. */ html[data-scrolled='no'] .head { background: transparent; /* blur(0px) e não `none`: `none` não interpola, e o desfoque entraria de uma vez enquanto o fundo ainda vinha a caminho. */ -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); box-shadow: 0 0 0 rgb(0 0 0 / 0); border-block-end-color: transparent; } .head__sibling-mark { display: inline-flex; align-items: center; } /* Sized per SHAPE and not per brand-that-owns-it: the door in the ithos shop shows the cathelier lockup, which is wide (117x54), and the door in the cathelier shop shows the ithos one, which is nearly square (119x120). One height for both would make one of them a postage stamp. */ .head__sibling-mark img { inline-size: auto; block-size: 30px; } [data-brand='ithos'] .head__sibling-mark img { block-size: 20px; } /* A LÍNGUA. Duas letras por língua, a actual sublinhada e sem ligação (é onde se está). Pequeno, porque quase ninguém muda -- mas cada letra é um alvo de 28px, acima do mínimo de 24, e as de fora têm o contraste do texto normal. No menu repete-se em ponto grande, que é onde se procura num telemóvel. */ .linguas { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 600; letter-spacing: .08em; } .linguas :is(a, span) { display: inline-grid; place-items: center; min-inline-size: 28px; min-block-size: 28px; padding-inline: 3px; color: var(--ink-soft); text-decoration: none; } .linguas a:hover { color: var(--accent); } .linguas [aria-current] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .35em; } .linguas--gaveta { display: flex; gap: .25rem; flex: none; padding: .75rem var(--gutter) 1.25rem; border-block-start: 1px solid var(--line-soft, var(--line)); font-size: .9rem; } .linguas--gaveta :is(a, span) { min-inline-size: 44px; min-block-size: 44px; } /* The state changes instantly; only the FADE is motion, so only the fade sits behind the gate. A reader who asked for less motion still gets a bar that is transparent at the top and solid below it -- they just get it at once. */ @media (prefers-reduced-motion: no-preference) { .head[data-anim='yes'], .head[data-anim='yes'] :is(.icon-btn, .open-menu__word, .head__sibling) { transition: background-color var(--head-move) var(--head-ease), border-block-end-color var(--head-move) var(--head-ease), box-shadow var(--head-move) var(--head-ease), -webkit-backdrop-filter var(--head-move) var(--head-ease), backdrop-filter var(--head-move) var(--head-ease), color var(--head-move) var(--head-ease), opacity var(--head-move) var(--head-ease); } } /* --- the header shrinks on the way down ------------------------------------ EXACTLY TWO THINGS MOVE, AND THEY MOVE ON ONE CLOCK. Everything else in the bar -- the three lines, the word beside them, the door to the other brand, the basket -- is centred by the grid, so it rides the row's height and needs no timing of its own. Only the row's min-height and the wordmark's height actually change, and until now only the first of them was animated: the wordmark went from 61px to 40px IN ONE FRAME while the bar glided around it for 200ms. The biggest thing in the header was the one thing that jumped, which is what the owner was seeing. One duration and one curve for both, and that is a correctness requirement rather than a preference. A block's height is max(min-height, content), and with both endpoints moving under the SAME easing the gap between them is a straight blend of two positive numbers and can never close mid-flight. Give the two different curves and the content can take over the height part-way down, which is a stutter nobody would be able to explain. The transitions hang off data-anim, not off .head, so they can be switched off for the two moments when a size change is not a shrink: the first decision after load, and a window being dragged (the wordmark's resting height is a vw clamp, so every pixel of a drag is a new computed height and a transition would have it trailing the rest of the bar for the whole gesture). */ /* Duas durações e duas curvas, porque são dois gestos diferentes. O encolher é um movimento e quer uma curva que trave no fim (ease-out). O fundo a aparecer é uma mudança de TOM, e a mesma curva punha-lhe 80% da mudança nos primeiros 80ms: media-se como uma transição e via-se como um salto. Mais tempo e uma curva simétrica, e o gesto lê-se. Nota honesta sobre o que acontece a meio: enquanto o fundo atravessa, a tinta atravessa com ele, e há uma fracção de segundo em que texto claro está sobre um fundo a meio caminho. É inerente a cruzar um chão escuro com um claro -- não há ordem de fade que o evite -- e os dois ESTADOS, que são o que a norma mede, passam os dois com folga. */ /* UM RELÓGIO SÓ, e isso é requisito de correcção e não arrumação. Eram dois -- 220ms para o tamanho e 350ms para a cor -- e com os dois gestos a acontecerem agora ao mesmo tempo isso via-se: a barra acabava de encolher enquanto o fundo ainda vinha a caminho. Uma duração e uma curva para tudo o que mexe, e o gesto lê-se como um só. */ .head { --head-move: 350ms; --head-ease: cubic-bezier(.4, 0, .2, 1); } .head[data-anim='yes'] .head__row { transition: min-height var(--head-move) var(--head-ease); } /* Height AND opacity in ONE declaration. A second `transition` on the same element replaces this one rather than adding to it, and this selector carries an element name -- (0,3,1) -- so any list-of-classes rule written later would lose and the wordmark would cross-fade in one frame. */ .head[data-anim='yes'] :is(.head__mark, .head__sibling-mark) img { transition: height var(--head-move) var(--head-ease), filter var(--head-move) var(--head-ease); } /* The shrink itself is motion, so a reader who asked for less of it does not get a header that changes size at all -- doing it instantly instead of smoothly would be worse, not better. BOTH rules have to sit inside this gate, and the brand files must not carry copies: `[data-brand='ithos'] .head[data-shrunk='yes'] .head__row` outranks an ungated rule here, so gating only this file would leave ithos sliding 96 -> 62 and stopping dead at 76 -- the worst of both. The brand copies are deleted; this one rule serves both, because (0,3,0) beats the brands' (0,2,0) resting values. */ @media (prefers-reduced-motion: no-preference) { .head[data-shrunk='yes'] .head__row { --head-h: 62px; } .head[data-shrunk='yes'] .head__mark img { height: 40px; } } /* An SVG with a viewBox and no intrinsic size collapses to nothing when it is given `width: auto` and no height. Moving these rules between files dropped the height and the ithos wordmark went to zero pixels wide — the link was still there, the file still resolved, and every guard passed. Only looking at the page found it, which is why there is now a battery check that the mark has a size. */ .head__mark img { width: auto; height: clamp(46px, 7vw, 64px); } [data-brand='cathelier'] .head__mark img { height: clamp(40px, 5vw, 54px); } /* the shrunk height lives with the other shrink rule, inside the prefers-reduced-motion gate further up */ .drawer__mark { height: 34px; width: auto; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); } .icon-btn:hover { color: var(--accent); } .cart-count { min-width: 20px; height: 20px; padding-inline: 5px; display: grid; place-items: center; margin-inline-start: -8px; margin-block-start: -14px; background: var(--accent); color: var(--accent-ink); border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .cart-count[data-empty='yes'] { display: none; } .card { display: flex; flex-direction: column; } .card__media { display: block; text-decoration: none; } /* The name is now the card's only link, and a bare line of text is a 20px target -- the whole card used to be the link, so this was never a question before. Block and a little padding puts it over the 24px floor and makes the whole name row clickable, which is what a reader aims at anyway. */ .card__link { text-decoration: none; color: inherit; display: block; padding-block: 3px; } .card__frame { position: relative; } /* O vídeo do cartão: por cima da fotografia, enquanto o rato está no cartão (shop.js, videosDosCartoes). Começa invisível; o dos cartões à vista já vem carregado, e aparece quase de imediato (a dona queria-o instantâneo). */ .card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity .12s ease; } .card[data-a-tocar='yes'] .card__video { opacity: 1; } /* --- the slow drift from one photograph to the next ------------------------- TWO LAYERS, AND ONLY ONE OF THEM IS EVER THE CARD. Layer A is the the build wrote. It is in normal flow, its opacity is never set, and it rests at scale 1. It IS the card. It is never parked at opacity 0 and never absolutely positioned -- the resting state has to be the correct state, the same lesson the side panel above carries. Layer B does not exist in the HTML at all. The script clones A when it first needs a second photograph and REMOVES it again when the card comes to rest, so a card nobody has hovered is byte-for-byte what the server sent. Only B's opacity moves. A stays fully opaque underneath it, which is why the dissolve has no dip: fade two layers against each other and the picture sags at the halfway mark, because two 50% images do not add up to one. */ .card__frame > picture { transition: scale var(--shot-zoom, 1500ms) cubic-bezier(.4, 0, .6, 1); } .card__frame > picture.over { position: absolute; inset: 0; opacity: 0; transition: opacity var(--shot-fade, 500ms) linear; } .card__frame > picture.over.up { opacity: 1; } /* Set by the script while a step is being set up: the incoming layer has to be placed without animating into place. */ .card__frame > picture.still { transition: none !important; } .card[data-showing='yes'] .card__frame > picture:not(.over) { scale: var(--shot-scale, 1.05); } /* Going in is slow on purpose; coming back is not. A pointer that leaves should let go of the picture at once, not creep back over a second and a half seconds after the reader has moved on. */ .card:not([data-showing]) .card__frame > picture { transition-duration: 400ms; } @media (prefers-reduced-motion: reduce) { .card__frame > picture, .card__frame > picture.over { transition: none; } .card[data-showing='yes'] .card__frame > picture:not(.over) { scale: 1; } } /* --- the other photographs, underneath -------------------------------------- A PARTIR DE TODAS AS LARGURAS, agora também no telemóvel, a pedido da dona. Estiveram só a partir de 48rem por três razões, e vale a pena dizer o que aconteceu a cada uma: num telemóvel não há ponteiro para pousar (verdade, e continua a ser -- a deriva automática continua presa a um ponteiro fino; mas TOCAR numa miniatura sempre funcionou, é um acto deliberado); a tira acrescenta uma faixa a cada cartão de uma grelha de duas colunas (verdade, e é o preço do que foi pedido); e punha sessenta e sete imagens a mais na página (falso desde que os botões passaram a ir vazios -- o script só constrói a tira do cartão que está prestes a ser visto). ABAIXO DE 48rem A TIRA CORRE DE LADO EM VEZ DE ENCOLHER. Medido: a 390px o cartão tem 164px e a 320px tem 129px. Seis miniaturas a encolher dentro de 164px dão 24,0px -- exactamente o mínimo de um alvo de toque, sem folga nenhuma -- e dentro de 129px nem quatro lá cabem. Encolher até caber era passar por baixo do chão, por isso ficam do tamanho que devem ter e é a tira que rola. É o mesmo padrão da fila de ocasiões da cathelier. A altura não muda com o número de fotografias, que é o que mantém os nomes de dois cartões vizinhos alinhados. A partir de 48rem a coluna é larga e encolher é melhor do que rolar: mostra as seis de uma vez em vez de esconder duas atrás de um gesto. A fila vazia num candeeiro de uma só fotografia é de propósito: cinco dos vinte e seis têm uma, e sem ela o nome deles ficava mais acima do que o de quem está ao lado. */ /* Hidden until the script has filled it: an empty strip is a band of nothing under every card, and without a script there is no strip to fill. The card then reads exactly as it did before this existed. */ .card__thumbs { display: none; --shot-size: 32px; } /* A FILA VAZIA TEM DE OCUPAR O LUGAR, E NÃO OCUPAVA. O comentário acima sempre disse que a fila num candeeiro de uma só fotografia era de propósito, mas `.card__thumbs--none` ficava preso no `display: none` da linha de cima e media ZERO: o nome do Caracol estava cinquenta pixels acima do nome do Ouriço, ao lado dele, na mesma linha da grelha. A intenção estava escrita e não estava a acontecer. Quem a marca como pronta é o script, tal como às outras, senão sem JavaScript era o contrário -- os de uma fotografia é que ficavam mais altos. */ .card__thumbs.ready { display: flex; gap: 4px; margin-block-start: 8px; min-height: calc(var(--shot-size) / var(--frame-ratio, .75)); } .card__thumb { /* A mesma forma da fotografia grande: um botão quadrado sobre um ficheiro 3:4 voltava a cortá-lo, e a tira deixava de parecer a mesma fotografia em pequeno. */ aspect-ratio: var(--frame-ratio, .75); padding: 0; border: 1px solid var(--line); background: none; border-radius: var(--radius, 0); overflow: hidden; cursor: pointer; opacity: .62; transition: opacity .2s ease, border-color .2s ease; } /* Um botão ainda sem fotografia guarda o lugar e não desenha nada: um contorno vazio a piscar antes da imagem chegar é pior do que espaço. */ .card__thumb:empty { border-color: transparent; } .card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .card__thumb:hover, .card__thumb:focus-visible { opacity: 1; } .card__thumb.is-on { opacity: 1; border-color: var(--accent); } @media (prefers-reduced-motion: reduce) { .card__thumb { transition: none; } } @media (width < 48rem) { .card__thumbs.ready { overflow-x: auto; overflow-y: hidden; /* A barra de rolagem roubava a altura à tira e desalinhava os nomes. */ scrollbar-width: none; scroll-snap-type: x proximity; } .card__thumbs.ready::-webkit-scrollbar { display: none; } .card__thumb { flex: 0 0 var(--shot-size, 32px); scroll-snap-align: start; /* A tira corta o que sai dela, e um anel de foco desenhado por fora era cortado com o resto. Para dentro, fica visível. */ outline-offset: -2px; } } @media (width >= 48rem) { .card__thumbs { --shot-size: 48px; } /* Encolhem, mas nunca abaixo do alvo de toque; e quando nem assim cabem (o Conjunto 12 desejos, 19 out 2026, com nove fotografias), a tira rola, como no telemóvel, em vez de as miniaturas saírem do cartão. */ .card__thumbs.ready { gap: 6px; margin-block-start: 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .card__thumbs.ready::-webkit-scrollbar { display: none; } .card__thumb { flex: 0 1 var(--shot-size); min-width: 26px; outline-offset: -2px; } } .card__swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 12px; } /* `display` is the load-bearing word. Width and height do not apply to a non-replaced INLINE element, so these were 0x0 boxes with a hairline round them -- the rule looked right and drew nothing. */ .swatch { display: inline-block; width: 27px; height: 27px; border: 1px solid var(--line); border-radius: var(--radius, 0); background-size: cover; background-position: center; } .swatch[aria-pressed='true'] { outline: 1px solid var(--accent); outline-offset: 2px; } .card__name { margin-block-start: 10px; line-height: 1.5; } .card__price { margin-block-start: 4px; font-variant-numeric: tabular-nums; color: var(--accent); } .card__from { font-weight: 400; color: var(--muted); font-size: 12px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding-inline: 2rem; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: var(--radius, 0); text-decoration: none; transition: background .18s ease, border-color .18s ease; } .btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); } .btn--wide { width: 100%; } .btn[aria-disabled='true'] { opacity: .45; cursor: not-allowed; } .section { padding-block: clamp(2.5rem, 6vw, 5rem); } .section--soft { background: var(--bg-soft); } .section__head { text-align: center; margin-block-end: clamp(1.5rem, 4vw, 2.75rem); } /* --- header and drawer: three tracks, never overlapping ------------------- The logo lives in a column of its own. Before this it was absolutely centred while the navigation sat in normal flow beside it, and at the width where the navigation reached the middle the two printed on top of each other. The drawer's close button had a subtler version of the same fault: `.icon-btn:last-of-type` matches by TAG, not by class, so the only