/* ALLIN MAKI · components: buttons, links, icon buttons, frames, stamps */ /* ---- Button (Apron c-jJYqoH) ------------------------------------------- */ .btn { display: grid; place-items: center; width: auto; border-radius: var(--r-pill); margin-inline: auto; text-align: center; color: var(--ink); transition-property: background-color, border-color; transition-duration: var(--t-hover); font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 100%; letter-spacing: 0.16px; min-width: 210px; min-height: 68px; padding: var(--s-20) var(--s-36); } .btn--sm { min-width: 152px; min-height: 52px; padding: var(--s-12) var(--s-32); } .btn--hug { width: max-content; } .btn--primary { background-color: var(--accent); } .btn--primary:hover { background-color: var(--accent-hover); } .btn--primary:active { background-color: var(--accent-active); } .btn--secondary { background-color: rgba(255,255,255,0); background-clip: padding-box; border: 1px solid var(--ink-a20); } .btn--secondary:hover { background-color: var(--ink-a10); border-color: var(--ink-a10); } .btn--secondary:active { background-color: var(--ink-a20); border-color: var(--ink-a20); } .btn--secondary.on-dark { color: var(--white); border-color: var(--white); } .btn--secondary.on-dark:hover { background-color: var(--white-a15); border-color: var(--white); } .btn--secondary.on-dark:active { background-color: var(--white-a30); border-color: var(--white); } /* The other language. Two letters, so it drops the button's 152px minimum and sits as a quiet pill beside Contact. It is never translated: a Spanish reader looks for EN and an English reader looks for ES. */ .lang { min-width: 0; padding-inline: var(--s-16); font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; } .of-lang { display: grid; place-items: center; min-height: 32px; padding-inline: var(--s-10); border: 1px solid var(--ink-a20); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-a60); } .of-lang:hover { background-color: var(--ink-a10); color: var(--ink); } /* A small flag in front of the two letters, so the switch is found by eye before it is read. It is decoration only: the letters, lang and hreflang are what a reader, a screen reader and a search engine go by, so the flag is aria-hidden and changes nothing for SEO. Spain for ES, the United Kingdom for EN. */ .lang, .of-lang { grid-auto-flow: column; align-items: center; gap: var(--s-6); } .lang__flag { display: block; width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px var(--ink-a10); } .of-lang .lang__flag { width: 15px; height: 10px; } /* On a phone the switch sits in the bar beside the burger, small and always in view. It used to be the last button at the foot of the menu, where it was only found by somebody who scrolled the whole menu. */ .lang--bar { display: grid; grid-auto-flow: column; align-items: center; gap: var(--s-6); min-height: 32px; padding-inline: var(--s-10); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--ink); } .lang--bar:hover { background-color: var(--ink-a10); } .lang--bar .lang__flag { width: 18px; height: 12px; } /* Menu item: the word is real text in the markup, because a reader that runs no CSS still has to see what the link says. The weight jumps to 700 on hover, and ::after holds a bold copy of the same word at zero height under the first column so the column is already that wide and nothing shifts. It takes the word from data-label rather than from the element, because the Collections item carries a chevron as well as a word. */ .btn--menu { min-width: 0; min-height: 0; padding: 0; margin: 0; border-radius: 0; grid-auto-flow: column; gap: var(--s-2); align-items: center; white-space: nowrap; } .btn--menu::after { grid-area: 2 / 1; display: block; content: attr(data-label); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; white-space: nowrap; } .btn--menu:is(:hover, :active, [aria-expanded="true"]) { font-weight: 700; } .btn--menu svg { width: 16px; height: 16px; } /* ---- Text link with soft background on hover (Apron c-cBgMqL) ---------- */ /* inline, not inline-flex. An inline-flex box cannot break across lines, so a link longer than its column becomes one rigid box wider than the page: a Spanish sentence on a 360 pixel screen found it, 12 pixels out through the side, and English would have got there eventually. The flex is only there for the arrow variant, which has an icon to line up, so it lives there now. The negative margin is an optical hang, so that the hover background lines up with the text rather than sitting proud of it. */ .link { display: inline; font-weight: 600; padding-inline: 0.285714em; padding-block: 0.111111em; border-radius: var(--r-4); transition: background-color var(--t-link); margin-inline: -0.375em; } .link--arrow { display: inline-flex; align-items: center; gap: var(--s-4); } .link:hover { background-color: var(--ink-a05); } .link:active { background-color: var(--ink-a10); } .link.on-dark:hover { background-color: var(--white-a15); } .link--arrow { font-weight: 500; } .link--arrow svg { width: 16px; height: 14px; } /* ---- Icon buttons ------------------------------------------------------- */ .icon-btn { position: relative; display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--r-4); color: var(--white-a60); transition: background-color var(--t-link), color var(--t-link); } /* 24px is a fine icon and a poor target. The overlay takes the hit area to 42px without moving the icon or the bar it sits in. */ .icon-btn::after { content: ""; position: absolute; inset: -9px; } .icon-btn:hover { color: rgba(255,255,255, .80); background-color: var(--ink-a05); } .icon-btn:active { color: var(--white); background-color: var(--ink-a10); } .icon-btn svg { width: 16px; height: 16px; } .icon-btn--dark { color: var(--ink-a40); } .icon-btn--dark:hover { color: rgba(0,0,0,.6); } .icon-btn--dark:active { color: rgba(0,0,0, .80); } .circle-btn { width: 40px; height: 40px; flex-shrink: 0; border: 2px solid var(--ink); border-radius: var(--r-pill); display: grid; place-items: center; transition: background-color var(--t-hover); } .circle-btn:hover { background-color: var(--ink-a05); } .circle-btn:disabled { opacity: .3; pointer-events: none; } .circle-btn svg { width: 16px; height: 16px; } /* ---- Photo frame (polaroid edge, Apron c-ekcmIg) ------------------------ */ .frame { filter: drop-shadow(var(--shadow-frame)); } .frame__inner { position: relative; display: inline-block; transform: translateZ(0); background-color: var(--white); } .frame__inner::after { content: ""; position: absolute; inset: -1px; border: 8px solid var(--white); } .frame__inner img { display: block; width: 100%; height: auto; } /* ---- Stamp (Apron ships a PNG; this is the same object in HTML) --------- */ .stamp { display: inline-grid; justify-items: center; gap: 0; padding: 22px 34px 26px; border-radius: 26px; background: var(--accent); color: var(--ink); font-family: var(--font-display); text-align: center; line-height: 0.9; filter: drop-shadow(var(--shadow-drop)); user-select: none; } .stamp__top { font-family: var(--font-body); font-weight: 500; font-size: 30px; letter-spacing: 0.06em; text-transform: uppercase; } .stamp__big { font-weight: 800; font-size: 92px; letter-spacing: -0.01em; margin-top: 8px; } .stamp__bot { font-family: var(--font-body); font-weight: 500; font-size: 30px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 10px; } .stamp--tint { background: var(--tint); } /* ---- UI mock cards used inside folding cards ---------------------------- */ .mock { background: var(--white); border-radius: var(--r-16); padding: var(--s-24); width: 100%; max-width: 404px; font-family: var(--font-body); color: var(--ink); } /* No shadow at rest. A white panel on a pale fleece card already separates by tone, and the system budgets shadow for the collage frames, the stamps and the floating story card. Five .mock panels per page made a third spend into the loudest thing on the page. Found by the private-label system critic. */ .mock__title { font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: -0.4px; } .mock__rows { display: grid; gap: 12px; padding-block: 16px; } .mock__row { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; line-height: 24px; color: rgba(0,0,0, .80); } /* .t-small */ .mock__row .mono { font-family: var(--font-mono); font-size: 15px; white-space: nowrap; } .mock__total { display: flex; justify-content: flex-end; font-family: var(--font-display); font-weight: 800; font-size: 38px; padding-block: 14px 18px; } /* .t-h3 */ .mock__total sup { font-size: 0.55em; vertical-align: top; margin-left: 2px; } .mock__btn { display: grid; place-items: center; height: 52px; border-radius: var(--r-8); background: var(--accent); font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; } .mock__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(0,0,0, .60); } .mock .rule-dotted { color: rgba(0,0,0, .40); } .tag { /* floating "+£500⁰⁰" tag */ position: absolute; display: inline-flex; align-items: baseline; background: var(--white); border-radius: var(--r-16); padding: 14px 20px; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; box-shadow: var(--shadow-card); } .tag sup { font-size: .5em; margin-left: 2px; } @media (max-width: 767px) { .tag { font-size: 22px; padding: 10px 14px; } .tag[style*="right:-10px"] { right: 0 !important; } .tag[style*="left:-16px"] { left: 0 !important; } } .pill-big { /* the "0%" oval */ display: grid; place-items: center; width: 404px; max-width: 100%; aspect-ratio: 404 / 232; background: var(--accent); border-radius: var(--r-pill); /* 120px is four characters wider than the pill itself once the pill is down to a phone's width, and "100%" pushed out through both ends of it. The middle term is the pill's own width in the fold card: the page gutter and the card padding come off the viewport first. */ font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-size: clamp(44px, calc(30vw - 28px), 120px); } /* ---- Emphasis block ------------------------------------------------------ The strongest statement on a page. Emphasis comes from a deeper ground, not from a border plus a shadow: the system budgets shadow for the collage frames, the stamps and the floating story card, and nowhere else. Replaces four copied blocks (ordering, compliance, workshop, private-label) that each carried a white ground, a 4px accent border AND a drop shadow. */ /* The ground follows the measure. The box was 1050 and every child was capped at 47ch, so the component was structurally guaranteed to leave about a third of itself empty, and it did it four times on the site, each time under the page's strongest sentence. Capping the ground makes it the one deliberately narrow object on a page of wide ones; the two variants that genuinely use the width take it back below. */ /* ONE VISIBLE EDGE DOWN THE PAGE. Measured on /mini at 1512 on 23 September, the boxes a reader can see the sides of sat at 780, 860, 940, 1160 and 1,360 pixels wide, each one centred and none of them agreeing with the next. That is what "not strak" was: a ragged left edge running down a page whose blocks are all on the same axis. The card, the gallery, the cards and the table are all --stack-w now, and where a box was narrow because its words want a short line, the words are held in rather than the box. */ .callout { max-width: var(--stack-w); margin-inline: auto; margin-block: var(--s-16) var(--s-64); padding: var(--s-28) var(--s-32); background: var(--tint); border-radius: var(--r-20); } .callout > .t-p { max-width: 68ch; } .callout--liability, .callout--fur, .callout--split { max-width: var(--stack-w); } /* The claim and the detail, side by side, rather than the claim buried at the front of a paragraph that leaves a third of its own ground empty. The lead sentence is already its own element in the markup, so this is structure and not a rewrite. */ .callout__lead { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; letter-spacing: 0.01em; margin: 0; } @media (min-width: 1000px) { .callout--split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: var(--s-48); align-items: start; } .callout--split > * { max-width: none; } .callout--split .callout__lead { max-width: 16ch; } .callout--split .t-p { max-width: 47ch; } } .callout > * { max-width: 47ch; } /* ~73 rendered characters, under the 75 cap */ .callout b { font-weight: 700; } @media (min-width: 768px) { .callout { padding: var(--s-32) var(--s-40); } } /* ===== hoisted from the page stylesheets ===== */ /* Three-up and two-up card grids, from css/compliance.css. .switch__grid is the same object at one, two and four columns; these are three and two. They are here rather than there because ordering.html marks up a .pair and does not load compliance.css, so it was getting no grid, no gap and no measure at all: one paragraph a hundred and sixty characters wide under a heading capped at eighteen. */ .trio, .pair { display: grid; gap: var(--s-16); grid-template-columns: minmax(0, 1fr); max-width: var(--stack-w); margin-inline: auto; } @media (min-width: 620px) { .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 768px) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .trio .usp__b, .pair .usp__b, .pair .docs { max-width: 46ch; } .tiers { max-width: var(--stack-w); margin-inline: auto; background: var(--tint-card); border-radius: var(--r-20); padding: var(--s-8) var(--s-8) var(--s-20); overflow-x: auto; /* the table scrolls, never the page */ } .tiers__table { width: 100%; min-width: 680px; border-collapse: collapse; } .tiers__table th, .tiers__table td { text-align: left; padding: var(--s-16) var(--s-16); } .tiers__table thead th { /* 13, not 10: these are column labels and they were smaller than every load-bearing use of mono on the pages that carry them. vertical-align so a two-line head does not centre against four one-line ones and lose the header row's baseline. */ font-family: var(--font-mono); font-weight: 400; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: rgba(0, 0, 0, .60); vertical-align: bottom; padding-block: var(--s-16) var(--s-12); } /* the system's dotted rule, drawn as a row background so a table separates its rows the same way every other object on the site separates anything */ .tiers__table tbody tr { background-image: radial-gradient(circle, var(--ink-a20) 1px, transparent 1.1px); background-size: 8px 2px; background-repeat: repeat-x; background-position: left top; } .tiers__table tbody th { font-weight: 700; font-size: 16px; } .tiers__table td { font-size: 15px; color: rgba(0, 0, 0, .80); } .tiers__table .mono { font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; } .tiers__caption { padding: var(--s-16) var(--s-16) 0; max-width: 47ch; color: var(--ink-a70); } .tiers__note { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(0, 0, 0, .40); padding: var(--s-16) var(--s-16) 0; max-width: 70ch;} /* The photographs on a size page. Square, because every catalogue photograph is 900 by 900, and as many across as the width allows rather than a fixed three: at 360 that is two, and two 15 cm alpacas side by side is the size they actually are. The caption is the shade and its collection, which is what a buyer is reading the grid for. */ .gallery { list-style: none; margin: var(--s-24) 0 0; padding: 0; display: grid; gap: var(--s-16); /* auto-FIT, not auto-fill, and a ceiling on the track. auto-fill keeps the empty tracks, so three swatches in a five track row sat against the left edge under a centred heading, which is what /baby-alpaca looked like. auto-fit collapses the empty ones; the ceiling stops three items then stretching to a third of the page each, and justify-content centres what is left over. A last row that is short still packs left, which is what a grid should do. */ grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 240px)); justify-content: center; max-width: var(--stack-w); margin-inline: auto; } /* The first one is twice the size of the rest. Thirteen identical squares is a contact sheet, and a page about one product should open on that product rather than on a list of it. From 620 only: two columns wide out of two on a phone is the whole grid. */ @media (min-width: 620px) { .gallery > li:first-child { grid-column: span 2; grid-row: span 2; } } .gallery li { display: grid; gap: var(--s-8); align-content: start; } .gallery picture { display: block; border-radius: var(--r-16); overflow: hidden; background: var(--tint-card); } .gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .gallery__cap { font-size: 13px; line-height: 1.35; color: rgba(0, 0, 0, .60); } /* A cell standing in for a photograph nobody has taken yet: the shade's fleece square, over its own hex so the cell still reads as that colour if the crop never arrives. It is deliberately not the first cell's double size on a line sheet where every cell is a swatch, because two swatches at different sizes look like one of them means something. */ .gallery__swatch picture { background: var(--a, var(--tint-card)); } .gallery__swatch img { mix-blend-mode: multiply; } @media (min-width: 620px) { .gallery:not(:has(> li:not(.gallery__swatch))) > li:first-child { grid-column: span 1; grid-row: span 1; } } @media (min-width: 768px) { .gallery { gap: var(--s-20); grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 260px)); } } .specs { display: grid; gap: var(--s-16); max-width: var(--stack-w); margin-inline: auto; margin-block-start: var(--s-24); } /* Side by side from 900, not 768: at 768 each list is 316px wide and half its values wrapped under a two-dot leader, or on the Spanish page ran over their labels. One list across the width reads every row on one line. */ @media (min-width: 900px) { .specs { grid-template-columns: 1fr 1fr; gap: var(--s-24); } } /* Two columns is for two lists. A page with one list was getting the left half of the row and sitting hard against the left edge under a centred heading, which reads as a block that was put down and forgotten. That was fixed by giving it 560 in the middle, and the fix was half right: it was no longer hard left, but it was then the one card on the page whose sides did not line up with the gallery, the table and the cards under it, starting 300 pixels in from all of them. One list takes the whole row. */ .specs:has(> .specs__list:only-child) { grid-template-columns: minmax(0, 1fr); } /* The ground moves off the rows and onto the list, and the rows stop stretching. As a stretched item beside a taller sibling, a five-row list was silently padding every row by ten pixels to finish level with a six-row one, so two panels drew the same dotted rule at 49px and at 59px, side by side, and not one rule met its opposite. A short list should simply end higher. */ .specs__list { /* and the panel ends with them: with the ground on the list, a five-row list stretched to a six-row sibling left a band of bare tint under its last row. A short list should be short all the way down. */ align-self: start; display: grid; grid-auto-rows: max-content; align-content: start; margin: 0; border-radius: var(--r-16); overflow: hidden; background: var(--tint-card); } .specs__list > div + div { background-image: radial-gradient(circle, var(--ink-a20) 1px, transparent 1.1px); background-size: 8px 2px; background-repeat: repeat-x; background-position: left top; } /* Label and value share the row by what each needs. Both start at their longest word and the room left is split evenly, capped at each one's full length, so a short label stays on one line and the value wraps beside it, and only a label too long for half the row (DOCUMENTOS DE EXPORTACIÓN) wraps as well. The label's track then takes whatever is still over, so the leader runs up to the value. With minmax(0, 1fr) auto a long value squeezed the label to nothing and its words ran over the value: FREIGHT under "Your forwarder, or post to your door" at 390, PAYMENT 1 under "50% with order confirmation" in the two columns at 768, MARCA PROPIA on the Spanish page. */ .specs__list > div { display: grid; grid-template-columns: auto minmax(min-content, max-content); gap: var(--s-16); align-items: baseline; padding: var(--s-14, 14px) var(--s-20); } .specs__list dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(0, 0, 0, .60); } /* A leader, because the label is hard left and the figure hard right with up to three hundred pixels of nothing between them, and because the labels are different lengths, so ten rows had ten differently sized holes in them. The dotted rule is the site's own connective mark and it was being drawn between rows and never inside one, which is the reading the eye actually needs. */ @media (min-width: 620px) { .specs__list dt { display: grid; grid-template-columns: minmax(min-content, max-content) minmax(16px, 1fr); align-items: center; gap: var(--s-12); } .specs__list dt::after { content: ""; height: 2px; background-image: radial-gradient(circle, var(--ink-a20) 1px, transparent 1.1px); background-size: 8px 2px; background-repeat: repeat-x; } } .specs__list dd { margin: 0; text-align: right; font-family: var(--font-mono); font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; text-wrap: balance; /* a value that wraps never leaves one word behind */ } /* ---- Tier table and spec lists ------------------------------------------- Hoisted out of three page stylesheets that each carried their own copy. The table is wider than a phone and scrolls inside .tiers; three critics in a row read a still frame as "half the columns are cut off", because nothing said it could scroll. The two radial gradients are pinned to the scroll container so they appear only while there is more to see and fade out at each end: a scroll cue with no JavaScript and no extra markup. */ .tiers { background: linear-gradient(to right, var(--tint-card) 30%, rgba(248, 239, 223, 0)) left center / 44px 100% no-repeat local, linear-gradient(to left, var(--tint-card) 30%, rgba(248, 239, 223, 0)) right center / 44px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .13), rgba(0, 0, 0, 0)) left center / 16px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .13), rgba(0, 0, 0, 0)) right center / 16px 100% no-repeat scroll; background-color: var(--tint-card); } /* ===== The six blocks of P1-10 ================================================= tools/page-blocks.js writes these and nothing else does. Each one is built out of what is already here, so nothing below invents a colour, a font or a spacing step: they are all tokens. ========================================================================== */ /* Breadcrumb. Sits between the header and the page, quiet, and wraps rather than scrolls on a telephone: a trail that runs off the side is no trail. */ .crumbs { padding-block: var(--s-16) 0; padding-inline: var(--gutter); } .crumbs ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4) var(--s-8); margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--ink-a60); } .crumbs li { display: flex; align-items: baseline; gap: var(--s-4) var(--s-8); min-width: 0; } .crumbs li + li::before { content: "/"; color: var(--ink-a30); } .crumbs a { color: var(--ink-a60); text-decoration: none; } .crumbs a:hover { color: var(--ink); text-decoration: underline; } .crumbs [aria-current="page"] { color: var(--ink); } /* The two doors. The same closing pair on every page, under whatever the page had to say for itself. .cta__actions inside it already stacks on a phone. */ /* .btn carries margin-inline: auto, which in a flex row means every button gets an automatic margin on both sides and the row pushes them apart. Inside .cta that is invisible, because .cta__inner is a centred column and the row is only as wide as its buttons. In the doors the row is a block child of .container, so it took the full 1,360 and flung one button into each corner: the loose order button Ingmar found at the foot of the rug page. The row is its content's width now, and centred. */ .doors { padding-block: var(--s-48) var(--s-80); } .doors .cta__actions { width: max-content; max-width: 100%; margin-inline: auto; } /* A line sheet: the facts of one line, and the way on to its neighbours. */ .linesheet { padding-block: 0 var(--s-48); } .linesheet > .container { display: grid; gap: var(--s-32); } .shades { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-16); margin: 0; padding: 0; list-style: none; } .shades li { display: inline-flex; align-items: center; gap: var(--s-8); padding: var(--s-4) var(--s-12) var(--s-4) var(--s-4); border: 1px solid var(--ink-a10); border-radius: var(--r-pill); font-size: 14px; } .shades__dot { width: 20px; height: 20px; border-radius: var(--r-pill); border: 1px solid var(--ink-a15); flex: none; } .siblings { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-12); } .siblings a { padding: var(--s-8) var(--s-16); border: 1px solid var(--ink-a20); border-radius: var(--r-pill); font-size: 14px; text-decoration: none; } .siblings a:hover { border-color: var(--ink); } /* The documents. Nothing is rendered at all while every path is still null, so this styles a list that exists only once there is something in it. */ .downloads { padding-block: var(--s-48); } .downloads ul { display: grid; gap: var(--s-8); margin: var(--s-16) 0 0; padding: 0; list-style: none; } /* The size and price table on a line sheet. Deliberately not .cat-facts: that one is the collection page's four column chart, with its widths written down as 20/30/14/36 per cent and nowrap in every cell, which is right for the card it lives in and runs 31 pixels off a 360 pixel phone the moment there are six columns. Measured. And not .specs either, which is already a two column grid further up this file. */ /* A card, and not a table dropped on the page. It was drawn for the narrow column of a placeholder line sheet, where it sits inside a frame that gives it its air; on a written page it stood edge to edge against the paragraph above it and the three notes under it ran together into one grey block. Same table, given the room the rest of the page has. */ /* 860 and not the full 1050 the rest of the page runs at. Four columns spread over a stack width is a row of figures with a hand's breadth between each one, and a reader stops being able to tell which price belongs to which order size. A table wants the width its columns want and no more. */ /* The card is --stack-w like every other card on the page. What was capped at 860 was the card, which left it standing narrower than the three cards directly under it; the cap belongs on the table inside, so that four columns of money do not spread across the whole width while the card's edge still lines up with everything else. */ .sizetable { min-width: 0; display: grid; gap: var(--s-14); max-width: var(--stack-w); margin-inline: auto; background: var(--tint-card); border-radius: var(--r-16); padding: var(--s-24); margin-block: var(--s-24); } .sizetable__h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); } /* Six columns of money do not fit a 360 pixel phone. The four alpaca sizes against three tiers is exactly that table, and it was never measured until /monsterfluff stopped being a placeholder, because tools/fits.js only walks pages that are written. The table scrolls inside its own card and the page never does, which is what .tiers already does on /retailers. The min-width is only set where the squeeze is real: 390 and 430 fit without it, and trimming padding to win five pixels instead is how "By agreement" ran out of its column on a machine with different fonts. */ .sizetable__scroll { min-width: 0; overflow-x: auto; max-width: 900px; margin-inline: auto; width: 100%; } .sizetable__h, .sizetable__note { max-width: 900px; margin-inline: auto; width: 100%; } @media (max-width: 400px) { .sizetable__scroll > table { min-width: 340px; } } .sizetable table { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: left; } .sizetable thead th { font-family: var(--font-mono); font-weight: 400; font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-muted); padding: 0 var(--s-8) var(--s-8) 0; border-bottom: 1px solid var(--ink-a15); } .sizetable thead th:first-child { width: 26%; } .sizetable tbody th, .sizetable tbody td { padding: var(--s-12) var(--s-8) var(--s-12) 0; border-bottom: 1px solid var(--ink-a10); font-size: 13px; line-height: 1.3; vertical-align: top; } .sizetable tbody tr:last-child th, .sizetable tbody tr:last-child td { border-bottom: 0; } .sizetable tbody th { font-weight: 700; } .sizetable tbody th span { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 9.5px; letter-spacing: .1em; color: var(--ink-muted); } /* tabular figures, but no nowrap: "$58 to $64" in a column a phone can spare eighty pixels for has to be allowed to become two lines. */ .sizetable .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* A lead time is a phrase and not a figure: the page face, which is narrower per character than the mono one, and room to wrap onto a second line. */ .sizetable .lead { font-size: 12.5px; line-height: 1.35; } .sizetable .num span { display: block; color: var(--ink-muted); font-size: 11px; } /* The notes stack rather than run together: there are three of them under a size sheet and they say different things. The grid gap above spaces them. */ .sizetable__note { font-size: 12px; line-height: 1.5; color: rgba(0, 0, 0, .60); margin: 0; } .sizetable__note + .sizetable__note { margin-top: calc(var(--s-8) - var(--s-14)); } @media (max-width: 480px) { .sizetable thead th { font-size: 9px; } .sizetable tbody th, .sizetable tbody td { font-size: 12px; padding-right: var(--s-6); } } /* A placeholder page's own section. py-120 top and bottom put 120 pixels between the note and the table under it; this is the same air above and a quarter of it below. */ .stub { padding-block: var(--s-80) var(--s-24); } /* The company line under the footer: legal name, registration number and registered address, on every page. Switched off in data/site-facts.json until Ingmar turns it on, so this styles something no page carries yet. */ .company { padding: var(--s-16) var(--gutter) var(--s-32); font-family: var(--font-mono); font-size: 11px; line-height: 1.6; letter-spacing: .02em; color: var(--ink-a60); } .company p { margin: 0; } /* ---- Prose --------------------------------------------------------------- A column of running text, which the guides are made of and which six product pages use for the one section that argues rather than lists. It lived in css/guide.css for half a day, which only the guides load, so /distributors and /alpaca-gifts went live with their prose running the full width of the page. Twelve of the twenty-five pages use it, which makes it a component. */ .guide { max-width: 68ch; margin-inline: auto; display: grid; gap: var(--s-20); min-width: 0; } /* Paragraphs carry the page face at its body size. text-wrap: pretty so a paragraph does not end on a single word, the same reasoning as the balance on the headings and cheap enough to apply to every one of them. */ .guide p { font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 1.62; letter-spacing: 0.17px; color: rgba(0, 0, 0, .78); text-wrap: pretty; } @media (min-width: 768px) { .guide p { font-size: 19px; line-height: 1.6; } } /* A run-in heading inside the prose, under the section's own t-h2. It is not a card title, so it keeps the page face and earns its weight from size. */ .guide h3 { font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: 0.01em; margin-block-start: var(--s-12); } @media (min-width: 768px) { .guide h3 { font-size: 26px; } } /* A list a reader scans rather than reads. The marker is drawn rather than left to the browser, because ul is reset to no list-style in base.css and putting it back here would be a second answer to that. */ .guide ul { display: grid; gap: var(--s-10); } .guide li { position: relative; padding-left: var(--s-24); font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: rgba(0, 0, 0, .78); } .guide li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-a40, rgba(0, 0, 0, .40)); } @media (min-width: 768px) { .guide li { font-size: 19px; } } /* The first paragraph of a guide, which is the answer on its own. Slightly larger and darker, so a reader who wants only the answer can stop there. */ .guide__answer { font-size: 19px; color: var(--ink); font-weight: 500; } @media (min-width: 768px) { .guide__answer { font-size: 22px; } }