:root{ /* Support runs the grain HARD. Two layers at different scales, because a single tile reads as a repeating pattern once you notice it, and two coprime scales read as a surface. Layer one is the coloured speckle at 160px: alpha coverage is ~44% of samples against ~12% before, which is what takes it from a faint tint to visible tooth. Layer two is a finer monochrome dust at 90px sitting on top. Everywhere else on the site uses .s--grain--soft, which is a tenth of this. */ --mi-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='discrete' tableValues='0.52 0.46 0.20 0.13'/%3E%3CfeFuncG type='discrete' tableValues='0.60 0.46 0.21 0.13'/%3E%3CfeFuncB type='discrete' tableValues='0.23 0.46 0.19 0.12'/%3E%3CfeFuncA type='discrete' tableValues='0 0 0.20 0 0 0.28 0 0.14 0 0 0.25 0 0.12 0 0.31 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E"); --mi-dust:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='d' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.2' numOctaves='1' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0.13 0 0 0 0.07 0 0 0.18 0 0 0.10 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23d)'/%3E%3C/svg%3E"); } /* ── the page ground ─────────────────────────────────────────────────── The Support page steps off the lime and onto speckled paper: black, yellow, grey and white flecks over off-white, with the MI mark tiled faintly behind everything. Two fixed layers so it does not scroll with the content and never tiles against a section edge. Marks first, speckle over the top, so the grain sits on the paper. No CSS rotation on this layer: a transformed fixed layer stops repainting on scroll in Chrome and the page goes blank below the fold. Marks sit upright instead, which also makes the MI read as MI. */ /* The ground goes on , which propagates to the page canvas and paints reliably at any scroll position. It must NOT be a fixed pseudo-element: a fixed layer carrying either a transform or an SVG filter stops repainting on scroll in Chrome and the page goes blank below the fold. */ html{background-color:#0A0A0A; background-image:var(--mi-dust),var(--mi-noise); background-repeat:repeat,repeat; background-size:256px 256px,256px 256px} body{background:transparent} /* sections let the paper through; the dark block stays as the one anchor */ .s--dark{background:transparent} .s--dark + .s--dark{border-top:0} .mi-field{position:relative} .mi-field > *{position:relative;z-index:1} /* ── product grid ───────────────────────────────────────────────────── */ /* Four across, so the eight pieces sit as two full rows. The step down is 4 -> 2 -> 1 and deliberately skips 3: eight divides evenly by four, two and one, so no width ever leaves a single card stranded on its own row. */ .shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,22px)} @media(max-width:1000px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.shelf{grid-template-columns:1fr}} .tee{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r); overflow:hidden;display:flex;flex-direction:column; box-shadow:0 1px 0 rgba(10,10,10,.04)} .s--dark .tee{background:var(--dark);border-color:var(--dline)} .tee .shot{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center; position:relative;border-bottom:1px solid var(--line)} .s--dark .tee .shot{border-bottom-color:var(--dline)} .tee .shot svg{width:52%;height:auto;opacity:.9} /* real product photo from Shopify; the mark is the fallback when there isn't one */ .tee .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .tee .shot:has(img) svg{display:none} .tee .meta{padding:var(--s-3);display:flex;flex-direction:column;gap:8px;flex:1} .tee h3{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.025em; line-height:1.2;text-wrap:balance} .tee .sub{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--t-38)} .s--dark .tee .sub{color:var(--dt-35)} .tee .price{font-family:var(--stamp);font-size:26px;font-weight:400; letter-spacing:0;line-height:1;margin-top:auto;padding-top:2px} .tee .sizes{display:flex;flex-wrap:wrap;gap:5px} .tee .sizes button{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em; padding:6px 9px;border:1px solid var(--line);background:transparent;color:inherit; cursor:pointer;border-radius:3px} .s--dark .tee .sizes button,.s--dark .tee .colors button{border-color:var(--dline)} .tee .sizes button[aria-pressed="true"],.tee .colors button[aria-pressed="true"]{background:var(--dark);color:var(--lime); border-color:var(--dark)} .s--dark .tee .sizes button[aria-pressed="true"],.s--dark .tee .colors button[aria-pressed="true"]{background:var(--lime);color:var(--dark); border-color:var(--lime)} .tee .add{margin-top:4px;font-family:var(--display);font-weight:700;font-size:12.5px; letter-spacing:0;text-transform:none} /* "3 colours" instead of three more chips on a postcard-sized card */ .tee .colorcount{align-self:flex-start;display:flex;align-items:center;gap:6px; background:none;border:0;padding:2px 0;cursor:pointer; font-family:var(--display);font-size:11.5px;font-weight:600;color:var(--t-60)} /* only the word-count fallback keeps the underline; a row of dots does not need to look like a link to read as one */ .tee .colorcount--words{text-decoration:underline;text-underline-offset:3px} .tee .colorcount .dot{width:15px;height:15px;border-radius:50%;flex:none; /* a ring, not a border, so White and Oat Gray still read as discs on paper and the ring never eats into the colour itself */ box-shadow:0 0 0 1px rgba(10,10,10,.28)} .s--dark .tee .colorcount .dot{box-shadow:0 0 0 1px rgba(255,255,255,.34)} .tee .colorcount:hover .dot{box-shadow:0 0 0 1px var(--dark)} .s--dark .tee .colorcount:hover .dot{box-shadow:0 0 0 1px var(--lime)} .s--dark .tee .colorcount{color:var(--dt-55)} .tee .opens{cursor:pointer} .tee h3.opens:hover{text-decoration:underline;text-underline-offset:3px} /* ── cart drawer ────────────────────────────────────────────────────── */ .cart-open{position:fixed;right:18px;bottom:18px;z-index:40;background:var(--dark); color:var(--lime);border:0;border-radius:999px;padding:15px 22px;cursor:pointer; font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;box-shadow:0 8px 26px rgba(10,10,10,.3)} .cart{position:fixed;inset:0;z-index:50;display:none} .cart[data-open="true"]{display:block} .cart .veil{position:absolute;inset:0;background:rgba(10,10,10,.55)} .cart .panel{position:absolute;right:0;top:0;bottom:0;width:min(400px,100%); background:var(--paper);display:flex;flex-direction:column} .cart .hd{padding:var(--s-3);border-bottom:1px solid var(--line); display:flex;justify-content:space-between;align-items:center} .cart .hd h2{font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:-.03em} .cart .close{background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:11px; font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t-60)} .cart .items{flex:1;overflow-y:auto;padding:var(--s-3);display:flex;flex-direction:column;gap:var(--s-3)} .cart .line{display:grid;grid-template-columns:1fr auto;gap:3px 12px; padding-bottom:var(--s-3);border-bottom:1px solid var(--line)} .cart .line .nm{font-weight:600;font-size:15px;line-height:1.3} .cart .line .vr{grid-column:1;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em; text-transform:uppercase;color:var(--t-38)} .cart .line .pr{font-family:var(--mono);font-weight:700;font-size:14px; font-variant-numeric:tabular-nums;text-align:right} .cart .line .rm{grid-column:2;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em; text-transform:uppercase;background:none;border:0;color:var(--t-38);cursor:pointer; text-align:right;padding:0} .cart .ft{padding:var(--s-3);border-top:1px solid var(--line)} .cart .tot{display:flex;justify-content:space-between;align-items:baseline; margin-bottom:var(--s-3);font-family:var(--display);font-weight:700;font-size:14px} .cart .tot .v{font-size:21px;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .cart .ft .btn{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:0; text-transform:none} .cart .empty{color:var(--t-60);font-size:15px} .cart .note{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--t-38);margin-top:10px;text-align:center} /* ── product detail ───────────────────────────────────────────────────── Opened from a card. Everything Shopify holds about the piece, including the fabric and care copy that comes down with the product body. */ .pdp{position:fixed;inset:0;z-index:60;display:none} .pdp[data-open="true"]{display:flex;align-items:center;justify-content:center;padding:16px} .pdp .veil{position:fixed;inset:0;background:rgba(10,10,10,.62)} .pdp .sheet{position:relative;background:#FFFFFF;width:min(1000px,100%);max-height:90vh; /* dvh where it exists: on phones 100vh is the tall URL-bar-hidden viewport, so a vh-sized sheet is taller than what you can actually see and the centring pushes its top edge, and the Close button with it, off screen. */ max-height:90dvh;overflow-y:auto; background:var(--paper);border-radius:var(--r);display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} /* A glass disc rather than a labelled button: it sits over photography as often as over the sheet, so it carries its own translucent ground and a white rim instead of borrowing the surface it happens to land on. */ .pdp .close{position:absolute;top:12px;right:14px;z-index:2; width:40px;height:40px;padding:0;display:grid;place-items:center; background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.46); border-radius:999px;cursor:pointer;color:#FFFFFF; -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px); box-shadow:0 2px 10px rgba(10,10,10,.32); transition:background .15s ease,border-color .15s ease} .pdp .close svg{width:16px;height:16px;display:block} .pdp .close:hover{background:rgba(255,255,255,.3);border-color:#FFFFFF} .pdp .close:focus-visible{outline:2px solid var(--lime);outline-offset:2px} .pdp .gal{padding:var(--s-4);border-right:1px solid var(--line)} .pdp .main{aspect-ratio:1/1;background:var(--bg-dk,#EEEAE5);border-radius:var(--r); overflow:hidden;display:flex;align-items:center;justify-content:center} .pdp .main img{width:100%;height:100%;object-fit:cover} .pdp .thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap} .pdp .thumbs button{width:58px;height:58px;padding:0;border:1px solid var(--line); border-radius:4px;overflow:hidden;background:none;cursor:pointer} .pdp .thumbs button[aria-pressed="true"]{border-color:var(--dark);border-width:2px} .pdp .thumbs img{width:100%;height:100%;object-fit:cover;display:block} .pdp .info{padding:var(--s-4);display:flex;flex-direction:column;gap:12px} .pdp .info .sub{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--t-38)} .pdp .info h2{font-family:var(--display);font-weight:900;font-size:clamp(21px,2.6vw,27px); letter-spacing:-.03em;line-height:1.12;margin:0} .pdp .info .price{font-family:var(--stamp);font-size:30px;line-height:1} .pdp .opt{display:flex;flex-direction:column;gap:7px} .pdp .opt .lbl{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--t-38)} .pdp .colors,.pdp .sizes{display:flex;flex-wrap:wrap;gap:6px} .pdp .colors button,.pdp .sizes button{padding:8px 12px;border:1px solid var(--line); background:transparent;color:inherit;cursor:pointer;border-radius:3px;font-size:12.5px} .pdp .colors button{font-family:var(--display);font-weight:600} .pdp .sizes button{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em} .pdp .colors button[aria-pressed="true"],.pdp .sizes button[aria-pressed="true"]{ background:var(--dark);color:var(--lime);border-color:var(--dark)} .pdp .sizes button:disabled{opacity:.32;cursor:not-allowed;text-decoration:line-through} .pdp .add{margin-top:4px;font-family:var(--display);font-weight:700;font-size:13px; letter-spacing:0;text-transform:none;align-self:flex-start} .pdp .specs{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:6px 0 0; padding-top:var(--s-3);border-top:1px solid var(--line);font-size:13px} .pdp .specs dt{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--t-38);align-self:center} .pdp .specs dd{margin:0} .pdp .desc{font-size:13.5px;line-height:1.55;color:var(--t-60); padding-top:var(--s-3);border-top:1px solid var(--line)} .pdp .desc ul{padding-left:18px;margin:8px 0} .pdp .desc li{margin-bottom:3px} .pdp .desc table{border-collapse:collapse;font-size:12px;margin:8px 0;width:100%} .pdp .desc td,.pdp .desc th{border:1px solid var(--line);padding:4px 7px;text-align:left} .pdp .desc img{max-width:100%;height:auto} @media(max-width:760px){ /* Full-bleed on a phone: stretch the sheet to the dialog rather than centring it, so it starts at the top of the visible viewport instead of hanging above it. .pdp is fixed inset:0, which tracks the browser chrome as it collapses, so height:100% is honest where 100vh is not. */ .pdp[data-open="true"]{padding:0;align-items:stretch;justify-content:stretch} .pdp .sheet{grid-template-columns:1fr;width:100%;max-height:none;height:100%; border-radius:0;-webkit-overflow-scrolling:touch} /* Fixed, not absolute: absolute pins Close to the top of the sheet's scrolling content, so it rides away the moment the sheet is scrolled. Fixed keeps it against the viewport, clear of the notch, all the way down. */ .pdp .close{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px; width:46px;height:46px;background:rgba(255,255,255,.22); box-shadow:0 3px 14px rgba(10,10,10,.4)} .pdp .close svg{width:18px;height:18px} .pdp .gal{border-right:0;border-bottom:1px solid var(--line);padding-top:60px} .pdp .info{padding-bottom:calc(var(--s-4) + env(safe-area-inset-bottom,0px))} } /* ── the founders, at the top ─────────────────────────────────────────── Real photographs go in as founder-1.jpg … founder-3.jpg beside this file. Until they exist the img removes itself and the frame shows the filename it is waiting for, so an unfinished page can never look finished. */ .faces{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(14px,2.2vw,26px); margin-top:var(--s-5)} .face{margin:0;width:clamp(92px,11vw,124px)} .face .frame{position:relative;aspect-ratio:1/1;border-radius:50%;overflow:hidden; background:#fff;border:2px solid var(--dark);display:flex;align-items:center; justify-content:center;text-align:center;padding:8px} .face .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* Initials in the brush face, standing in for photography. Sized in cq units against the circle rather than px so the letter keeps its proportion at every breakpoint instead of drifting small inside a fluid frame. */ .face .frame{container-type:inline-size} .face .mono-initial{font-family:var(--stamp);font-weight:400;font-size:44cqw; line-height:1;color:var(--dark);padding-top:.10em;letter-spacing:0; -webkit-text-stroke:.045em var(--lime);paint-order:stroke fill} .face figcaption{margin-top:9px;text-align:center;display:flex;flex-direction:column;gap:2px} .face figcaption b{font-size:13.5px;font-weight:800;letter-spacing:-.01em} .face figcaption span{font-size:11.5px;color:var(--t-60);line-height:1.3} .faces .hail{font-family:var(--display);font-size:clamp(15px,1.9vw,19px);font-weight:600; margin:0 0 var(--s-3) 4px;letter-spacing:-.02em} .faces .hail b{font-family:var(--stamp);font-weight:400;font-size:1.35em; display:inline-block;margin-left:4px} @media(max-width:620px){ .faces{gap:12px} .faces .hail{width:100%;margin:var(--s-2) 0 0} } /* cards in the money section, now that the page has no black block */ .card{background:#FFFFFF} /* ── dark ground overrides ────────────────────────────────────────────── The Support page runs on black now, so every surface I had set to white for the paper version flips here. Product photos keep their own light backgrounds, which is what makes the shelf read as lit tiles on black. */ .tee{background:var(--dark);border-color:var(--dline);box-shadow:none} .tee .sub{color:var(--dt-35)} .tee .colorcount{color:var(--dt-55)} .tee .sizes button{border-color:var(--dline)} .tee .sizes button[aria-pressed="true"]{background:var(--lime);color:var(--dark); border-color:var(--lime)} .card{background:var(--dark);border-color:var(--dline)} /* founders */ .face .frame{background:var(--lime);border-color:#FFFFFF} .face .mono-initial{color:var(--dark);-webkit-text-stroke-color:#FFFFFF} .face figcaption span{color:rgba(255,255,255,.72);font-weight:600} /* cart drawer */ .cart .panel{background:var(--dark);color:var(--dt-90)} .cart .hd{border-bottom-color:var(--dline)} .cart .close{color:var(--dt-55)} .cart .line{border-bottom-color:var(--dline)} .cart .line .vr{color:var(--dt-35)} .cart .line .rm{color:var(--dt-35)} .cart .ft{border-top-color:var(--dline)} .cart .empty{color:var(--dt-55)} .cart .note{color:var(--dt-35)} /* product detail */ /* ── header, this page only ───────────────────────────────────────────── The nav is lime everywhere else. On black it has to invert, or it reads as a stripe of another site pasted across the top. */ /* The nav has to carry the SAME two layers at the SAME scales as the page ground, or the header reads as a different material bolted to the top: one layer at 200px against two at 90 and 160 is a visibly coarser grain, and the border underlined the join. Phase still shifts as a sticky bar scrolls over a document-scrolled ground, but matching the scales means the texture reads as continuous even when the offset does not line up. */ .nav{--nav-panel:rgba(10,10,10,.94);--nav-panel-line:rgba(255,255,255,.16);background-color:#0A0A0A; background-image:var(--mi-dust),var(--mi-noise); background-repeat:repeat,repeat; background-size:256px 256px,256px 256px;backdrop-filter:none; border-bottom:1px solid rgba(255,255,255,.09); --mark-fill:var(--lime);--mark-edge:var(--dark)} .nav .logo{color:#FFFFFF} .nav .links a{color:var(--dt-55)} .nav .links a:hover{color:#FFFFFF} .nav .links a.on{color:#FFFFFF;border-bottom-color:var(--lime)} .nav .btn{background:var(--lime);color:var(--dark);border-color:var(--lime)} .nav-toggle{border-color:rgba(255,255,255,.28)} .nav-toggle span{background:#FFFFFF} /* The open menu on a phone was still the lime panel from the system sheet, with this page's white link colour on top of it: white on lime, which is about a 1.1:1 contrast and simply not there. The panel is part of the header, so it inverts with the header. Same two texture layers at the same scales, for the same reason the bar carries them. */ @media(max-width:880px){ .nav .links{background-color:#0A0A0A; background-image:var(--mi-dust),var(--mi-noise); background-repeat:repeat,repeat; background-size:256px 256px,256px 256px; border-bottom:1px solid rgba(255,255,255,.09); box-shadow:0 14px 28px rgba(0,0,0,.5)} .nav .links a{color:var(--dt-90);border-bottom-color:rgba(255,255,255,.12)} .nav .links a.on{color:var(--lime);border-bottom-color:rgba(255,255,255,.12)} } /* Every subtitle on this page gets the hero treatment: smaller, tighter, white and bold. Grey body copy at a loose line height is hard work on a grainy black ground, and the notes were mono uppercase on top of that. */ .lede{font-size:15px;line-height:1.35;font-weight:700;color:#FFFFFF; letter-spacing:-.012em;max-width:46ch} .body{font-size:15px;line-height:1.4;font-weight:600;color:#FFFFFF; letter-spacing:-.01em} .note{font-family:var(--display);font-size:13px;line-height:1.4;font-weight:600; letter-spacing:-.005em;text-transform:none;color:var(--dt-55)} .card p{font-size:14px;line-height:1.45;font-weight:500;color:var(--dt-90)} /* RULE 4: header and footer always match. This page overrides .nav to the grained dark ground, so it must override .foot to the same thing. A lime footer under a dark header made the page look like two documents. */ .foot{background-color:#0A0A0A; background-image:var(--mi-dust),var(--mi-noise); background-repeat:repeat,repeat; background-size:256px 256px,256px 256px; border-top:1px solid rgba(255,255,255,.09)} .foot .lbl,.foot a{color:var(--dt-35)} .foot a:hover{color:#FFFFFF} /* ── founder profiles ────────────────────────────────────────────────── Three columns, each a face over a role over a short bio. The plain .faces row centred small captions under circles, which is fine for a credit line and useless for a profile. */ .faces--profile{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px);align-items:start} /* .face carries width:clamp(92px,11vw,124px) for the plain credit row, which was squeezing each bio to about four words a line inside a grid column three times that wide. */ .faces--profile .face{display:block;width:auto} .faces--profile .frame{width:clamp(76px,9vw,104px);margin:0 0 var(--s-3)} .faces--profile figcaption{text-align:left;display:block} .faces--profile figcaption b{display:block;font-size:15px;letter-spacing:-.01em; margin-bottom:3px} .faces--profile .role{display:block;font-family:var(--mono);font-size:9.5px; font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--lime);margin-bottom:9px} .faces--profile .bio{display:block;font-size:14px;line-height:1.5; letter-spacing:-.005em;color:var(--dt-55);max-width:34ch} @media(max-width:760px){ .faces--profile{grid-template-columns:1fr;gap:var(--s-4)} .faces--profile .bio{max-width:46ch} } /* three records side by side */ .pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px); margin-top:var(--s-5)} .pcards .pcard{margin:0} @media(max-width:880px){.pcards{grid-template-columns:1fr}} /* ── grain, once ─────────────────────────────────────────────────────── This page carries its dense grain on the page ground, and the design system adds a per-band layer to every .s as well. Both together doubled it and washed out the type, worst on the profile cards, which were translucent enough to show the ground straight through their text. The page ground wins here; the band layer is switched off. ------------------------------------------------------------------- */ .s::before{display:none} /* opaque, so text sits on a clean field instead of on the speckle */ /* A file you can see through, not a solid card. The blur behind it softens the grain under the type without hiding it, which is what makes the panel readable while still feeling like it is sitting ON the surface rather than punched out of it. */ .pcard{background:rgba(10,10,10,.66); border:1px solid rgba(222,255,99,.26);border-radius:14px; box-shadow:0 20px 44px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05) inset; -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)} .pcard .ph{background:rgba(222,255,99,.07);border-bottom-color:rgba(222,255,99,.22)} /* field labels as pills so they read as metadata rather than as faint text */ .pcard .pf{grid-template-columns:auto 1fr;gap:14px;align-items:start; border-top-color:rgba(255,255,255,.08)} .pcard .pk{background:rgba(222,255,99,.16);color:var(--lime); border:1px solid rgba(222,255,99,.30);border-radius:100px; padding:3px 10px 2px;font-size:8.5px;letter-spacing:.12em; justify-self:start;white-space:nowrap} .pcard .pv{color:#FFFFFF;padding-top:2px} /* the bare cards have no panel of their own, so their copy needs help standing off a grained ground */ .t-bare .card p{color:rgba(255,255,255,.72); text-shadow:0 1px 3px rgba(0,0,0,.85)} .t-bare .card h3{text-shadow:0 1px 4px rgba(0,0,0,.9)} /* ── readable on grain ───────────────────────────────────────────────── Every running-text token in the system is tuned for ink on paper, so on this page they all inherited a muted grey and then had speckle put behind them. On a dark grained ground the copy needs to be white and needs a shadow to sit on top of the texture rather than in it. ------------------------------------------------------------------- */ .s--dark .lede, .s--dark .body, .s--dark .note, .s--dark p{color:rgba(255,255,255,.88);text-shadow:0 1px 3px rgba(0,0,0,.85)} .s--dark .lbl{color:rgba(255,255,255,.62);text-shadow:0 1px 3px rgba(0,0,0,.85)} .s--dark .t-bare .card p{color:rgba(255,255,255,.86)} .s--dark .note--sm{color:rgba(255,255,255,.72)} /* the shelf cards keep their own white ground, so leave their type alone */ .tee p,.tee .sub,.cart p,.pdp p{text-shadow:none} /* ── photo arrows on the card ────────────────────────────────────────── Sit inside .shot, above the image, and only appear on hover or focus on a fine pointer. On touch they stay visible, because there is no hover to reveal them and an invisible control is no control. ------------------------------------------------------------------- */ .tee .shot{overflow:hidden} .shotnav{position:absolute;inset:0;z-index:2;pointer-events:none} .sn{position:absolute;top:50%;transform:translateY(-50%);z-index:3; pointer-events:auto;width:34px;height:34px;border-radius:50%; border:1px solid rgba(10,10,10,.18);background:rgba(255,255,255,.92); color:var(--dark);font-size:19px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0 2px 3px; box-shadow:0 2px 10px rgba(10,10,10,.18);opacity:0;transition:opacity .15s} .sn--prev{left:9px} .sn--next{right:9px} .tee:hover .sn,.tee:focus-within .sn{opacity:1} @media (hover:none),(pointer:coarse){ .sn{opacity:1} } .sn:hover{background:#fff} .shotdots{position:absolute;left:0;right:0;bottom:9px;z-index:3; display:flex;justify-content:center;gap:5px;pointer-events:none} .shotdots i{width:5px;height:5px;border-radius:50%; background:rgba(10,10,10,.28);display:block} .shotdots i[data-on="true"]{background:var(--dark)} /* ── the face on the record ──────────────────────────────────────────── All three portraits sit the head above the middle of the frame, so a plain centred crop would cut foreheads. object-position pulls the crop upward instead of asking anyone to re-cut the files. ------------------------------------------------------------------- */ .pwho{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3)} .pwho .pname{margin-bottom:0} .pface{width:clamp(58px,7.5vw,76px);height:clamp(58px,7.5vw,76px);flex:none; border-radius:50%;object-fit:cover;object-position:center 16%; border:1px solid rgba(222,255,99,.5); box-shadow:0 0 0 4px rgba(10,10,10,.55),0 6px 18px rgba(0,0,0,.5); background:#141414} @media(max-width:560px){ .pwho{gap:var(--s-2)} } /* ── matched faces ───────────────────────────────────────────────────── Three portraits shot in three different rooms: one warm grey, one cool grey, one blue-grey. Desaturating them removes the argument between those backgrounds without touching the faces, and a soft edge mask feathers each one into the grain instead of stamping a hard disc onto it. Cheaper and more reversible than cutting the subjects out, and a replacement photo needs no preparation to match. ------------------------------------------------------------------- */ .pface{filter:grayscale(1) contrast(1.06) brightness(.97); -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%); mask-image:radial-gradient(circle at 50% 50%, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%); border:0;box-shadow:none;background:transparent} /* the ring moves onto a wrapper, so the mask fades the photo while the outline itself stays crisp */ .pwho{position:relative} /* ── the face, in colour, on lime ────────────────────────────────────── Greyscale settled the three backgrounds but made everyone look sombre, which is the wrong note for a page asking people to buy a t-shirt. The people keep their colour now. The disc behind them is lime with the same grain as the page, and the photo's edge feathers into it, so the three different studio backgrounds resolve into one brand colour instead of three shades of grey. ------------------------------------------------------------------- */ .pface-disc{position:relative;display:block;flex:none; width:clamp(58px,7.5vw,76px);height:clamp(58px,7.5vw,76px); border-radius:50%;overflow:hidden; background-color:var(--lime); background-image:var(--mi-dust);background-size:110px 110px; box-shadow:0 0 0 1px rgba(222,255,99,.55),0 6px 18px rgba(0,0,0,.5)} .pface{width:100%;height:100%; filter:saturate(1.12) contrast(1.04); -webkit-mask-image:radial-gradient(circle at 50% 46%, #000 54%, rgba(0,0,0,.6) 76%, transparent 97%); mask-image:radial-gradient(circle at 50% 46%, #000 54%, rgba(0,0,0,.6) 76%, transparent 97%)} /* ── the three profiles read as one table ─────────────────────────────── Each card used to stack its own fields, so a long BEFORE on one pushed that card's NOW and BORN below the others and the three read as three unrelated blocks. A subgrid chain hands the row heights up to .pcards, so every ROLE sits on one line, every NOW on another, however long the text in any single cell is. Two links in the chain, because .pbody sits between the card and its fields. Row gap goes to zero: with seven rows a gap would open a gutter between every field. Column gap is restated so the cards keep their spacing. Only above the stacking breakpoint, where there is more than one column to line up against. ------------------------------------------------------------------- */ @media(min-width:881px){ @supports (grid-template-rows:subgrid){ /* header, the face-and-name block, then one row per field */ .pcards{grid-template-rows:auto auto repeat(5,auto); row-gap:0;column-gap:clamp(16px,2.4vw,26px)} .pcards .pcard{grid-row:1/-1;display:grid;grid-template-rows:subgrid} .pcards .pcard .pbody{grid-row:2/-1;display:grid;grid-template-rows:subgrid} /* the field rule keeps its own top border, which now lands on the shared line rather than wherever that card happened to reach */ .pcards .pcard .pf{align-content:start} } } /* ── the detail sheet stays light ────────────────────────────────────── The page runs on black, but this sheet does not follow it. The size chart and care table come from Shopify inside the product description, set in black type with no background of their own, so on a dark sheet they disappeared entirely. The sheet is the one surface here that has to render someone else's HTML, so it keeps a white ground. ------------------------------------------------------------------- */ .pdp .sheet{background:#FFFFFF;color:var(--dark)} .pdp .close{background:rgba(10,10,10,.06);border:1px solid var(--line);color:var(--dark)} .pdp .close:hover{background:rgba(10,10,10,.12);border-color:var(--dark)} .pdp .desc,.pdp .desc td,.pdp .desc th{color:var(--dark)} /* ── paging the photos ───────────────────────────────────────────────── Six thumbnails under a photo is a list, not a control. These step through the same images the thumbs hold, so the two stay in sync without a second source of truth for which shot is showing. ------------------------------------------------------------------- */ .pdp .main{position:relative} .pdp .pager{position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:38px;height:38px;border-radius:50%;border:1px solid var(--line); background:rgba(255,255,255,.92);color:var(--dark);cursor:pointer; display:flex;align-items:center;justify-content:center; box-shadow:0 2px 10px rgba(10,10,10,.14);transition:background .12s} .pdp .pager:hover{background:#FFFFFF;border-color:var(--dark)} .pdp .pager:focus-visible{outline:2px solid var(--lime);outline-offset:2px} .pdp .pager--prev{left:10px} .pdp .pager--next{right:10px} .pdp .pager svg{width:15px;height:15px;display:block} .pdp .pager[hidden]{display:none} /* ── the profiles, lighter ────────────────────────────────────────────── These were near-black panels with lime type on a black ground: heavy, technical, and reading a lot more severe than the people on them. Same structure, warm white ground instead, with the grain carried onto the card itself so it does not sit on the page as a flat cut-out. Lime drops to the labels and the name, where it does the work of an accent rather than of a whole colour scheme. ------------------------------------------------------------------- */ .pcard{background-color:#FCFBF5; background-image:var(--mi-dust);background-size:256px 256px; border:1px solid rgba(10,10,10,.10);border-radius:20px; box-shadow:0 14px 38px rgba(0,0,0,.42); -webkit-backdrop-filter:none;backdrop-filter:none} /* header: a soft lime band rather than a dark one */ .pcard .ph{background:rgba(222,255,99,.55); border-bottom:1px solid rgba(10,10,10,.10)} .pcard .pid{color:var(--dark)} .pcard .pseal{color:rgba(10,10,10,.52);opacity:1} /* the name keeps the brush face, now ink-stroked on paper */ .pcard .pname{color:var(--lime);-webkit-text-stroke:.055em var(--dark)} /* labels become solid lime chips, which reads friendlier than an outline */ .pcard .pk{background:var(--lime);color:var(--dark); border:1px solid rgba(10,10,10,.14)} .pcard .pv{color:var(--dark)} .pcard .pf{border-top-color:rgba(10,10,10,.10)} /* the portrait ring follows the card, not the old dark panel */ .pcard .pface-disc{border-color:rgba(10,10,10,.14)} .pcard .pface{filter:grayscale(.25) contrast(1.02)} /* This page's nav runs on black, so the block shadow has to invert with it or it vanishes into the bar. */ .nav{--btn-shadow:#FFFFFF} /* Add to cart was still set in the display face from before the buttons moved to the brush. Slightly larger than the site default, because the card is small and Knewave sets small on the eye. */ .tee .add{font-family:var(--stamp);font-weight:400;text-transform:none; font-size:15px;letter-spacing:0;line-height:1;padding:12px 18px 10px}