/* ========================================================================== Takahashi Properties — design tokens Everything here is read off assets/img/takahashi-logo.gif, which is a cherry blossom inside a rotated-square frame, the frame stroked in a blush-to-rose gradient, with 高橋 and TAKAHASHI PROPERTIES set in warm taupe, light weight, very wide tracking. That gives the whole site its vocabulary: · the rotated square is the recurring mark — the brand glyph, the status marker, the divider ornament · the blush-to-rose gradient is the accent, not a flat pink · wide-tracked light caps are the label voice · warm taupe is the second colour, never grey blush #F3BCC6 the pale petal rose #E8789F the saturated edge of the frame taupe #8A7361 the wordmark ========================================================================== */ :root { color-scheme: dark; /* Ground — near-black, and the colour is not the point. Four grounds were rejected in a row for looking generated: a neutral #0d080b lit by coloured glows, a #130a10 plum, a #1a0c11 oxblood ("barely looks different"), a #16100d sumi ("too brown"). Turning the hue dial was never going to fix it. What all four had in common is that they were flat fills. A page with no surface reads as generated whatever colour it is, because nothing made of anything is perfectly even. So the ground is taken back to an almost-neutral black and given a real material instead — see the washi textures below. The hue that remains is a whisper, just enough that it is not a cold screen grey. */ --bg: #0c0b0c; /* The surfaces are translucent — shoji, not card stock. Everything that makes the ground a material (the washi grain, the ink drift, the printed lattice) used to stop dead at every panel edge, so the page was a textured field with flat rectangles laid on it. At these alphas the sheet runs underneath the whole UI instead, and the blossom passes behind a panel as a soft blush rather than being cut off by it. They are NOT very transparent, and that is the point. Each one is mixed so that over the bare ground it composites to almost exactly the tone it had when it was opaque — the lightness of the UI is unchanged; only its opacity is. Deeper surfaces are held more solid, because they are usually stacked on another surface and the alphas compound. A petal crossing behind a panel arrives at 10-14% strength, which is a ghost rather than a shape. Anything below about 0.8 lets it read as a petal again and the text starts swimming. */ --surface: rgba(25, 21, 24, 0.86); --surface-2: rgba(34, 29, 33, 0.88); --surface-3: rgba(45, 39, 44, 0.90); --surface-glass: rgba(21, 19, 21, 0.72); /* Hairlines are metallic pink, and not especially faint. There are more edges in this app than anything else — every panel, row, field and divider — so lifting their alpha puts pink across the whole page at once, which no amount of accent-coloured components can do. These are the fallback colour only. Almost every edge is now drawn in the real foil instead — see "Foil edges" in components.css — and these survive for the fine internal hairlines that stay 1px, and as the border-color under a ring that has not painted yet. */ --line: rgba(240, 152, 182, 0.42); --line-soft: rgba(240, 152, 182, 0.20); --line-strong: rgba(246, 176, 200, 0.62); /* How thick a structural edge is — every panel, card, pill, field and divider that draws a foil line. One token so the whole app moves together. Fine internal hairlines (--line-soft: table rows, the rules inside the done list) deliberately stay at 1px: at 2px a row separator stops being a separator and starts being a grid. */ --edge-w: 2px; /* How strong the foil is on an edge. One dial for every border in the app, so the rings on the cards and the border-image on the straight rules stay in step with each other. */ --foil-edge: 0.55; /* Text — four steps, the lightest reserved for figures. Each is tinted toward the blush so type sits in the palette instead of on top of it; the dimmer three carry it strongly enough to read as warm. */ --text: #faf0f3; --text-dim: #cbb0ba; --text-faint: #9a828d; --text-ghost: #6e5a64; /* Accent: the petal, and the gradient the frame is stroked with */ --blush: #f3bcc6; --rose: #e8789f; --accent: #f0b3bd; --accent-soft: #f7d2d9; --accent-ink: #1a0d12; /* on a filled accent — 11.1:1 */ --accent-wash: rgba(240, 179, 189, 0.17); --accent-line: rgba(240, 179, 189, 0.42); --accent-grad: linear-gradient(118deg, #f7d2d9 0%, #f0b3bd 38%, #e8789f 100%); --accent-rule: linear-gradient(90deg, rgba(232,120,159,0) 0%, rgba(240,179,189,0.5) 22%, rgba(232,120,159,0.85) 50%, rgba(240,179,189,0.5) 78%, rgba(232,120,159,0) 100%); /* The wordmark taupe, lifted enough to read on the dark ground */ --taupe: #c4a892; --taupe-dim: #9a8371; --taupe-wash: rgba(196, 168, 146, 0.08); /* Semantic — muted, so nothing on the page glows */ --pos: #86c9a4; --warn: #dcb075; --neg: #e0949a; /* Atmosphere: one soft wash from above, and grain. There used to be four radial glows placed around the edges — that arrangement of coloured blobs bleeding in from the corners is the single most generated-looking thing a dark page can do, and it is gone. One light, from one direction, is what a room actually looks like. */ --sky: rgba(243, 188, 198, 0.055); /* Washi — the page's surface, in three layers, because real paper is never one uniform noise: fibre strands lying across the sheet, and a second set lying down it. Anisotropic turbulence — low frequency one way, higher the other — stretches the noise into strands. One set alone combs the whole page in a single direction and reads as brushed metal; crossing two sets makes it a sheet. cloud the slow unevenness of a hand-formed sheet, where the pulp settled thicker in some places than others. Low frequency, large tile. tooth the fine grain you only see close up. All are desaturated to grey and composited with soft-light, so they modulate the ground both lighter and darker. Added as white noise instead, they would read as dust on a screen rather than as a surface. Tiles are large and stitched so the repeat is not visible. */ --tex-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.22' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.9' intercept='-0.14'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23f)'/%3E%3C/svg%3E"); --tex-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='x'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.24 0.03' numOctaves='2' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.8' intercept='-0.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='560' height='560' filter='url(%23x)'/%3E%3C/svg%3E"); --tex-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23c)'/%3E%3C/svg%3E"); --tex-tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23t)'/%3E%3C/svg%3E"); /* Sumi nagashi — ink settling unevenly into the sheet. Three things had to change from the first attempt: visible it was composited with soft-light, and soft-light against a near-black backdrop barely moves it. The noise now drives the ALPHA of a fill, which acts on the ground directly and needs no blend mode at all. no edges its contrast was stretched with a steep linear transfer, which CLIPS at 0 and 1 — and a clipped contour is a hard line, which is exactly what was cutting across the page. A heavy blur after the transfer means no contour survives. no lift a wash that only adds light greys the whole page, which is the thing we spent four grounds escaping. So it is drawn twice: white where the noise runs above its mean, black where it runs below. The two cancel, the average tone is unchanged, and only the variation shows. Drawn once at cover size rather than tiled, so there is no seam either. */ --tex-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='900' viewBox='0 0 1200 900'%3E%3Cfilter id='il' x='-25%25' y='-25%25' width='150%25' height='150%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0017' numOctaves='3' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.965 0 0 0 0 0.977 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.9' intercept='-0.45'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='26'/%3E%3C/filter%3E%3Cfilter id='id' x='-25%25' y='-25%25' width='150%25' height='150%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0017' numOctaves='3' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='-2' intercept='1'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='26'/%3E%3C/filter%3E%3Crect x='-300' y='-300' width='1800' height='1500' filter='url(%23il)'/%3E%3Crect x='-300' y='-300' width='1800' height='1500' filter='url(%23id)'/%3E%3C/svg%3E"); --ink: 0.24; /* Shippō — "seven treasures", printed on Japanese paper and cloth for centuries. Circles of radius 43.84 on a square lattice of spacing 62, the lattice turned 45° so the flowers sit on the diagonals. The rotation is baked into the tile rather than applied to .lattice, because .lattice carries the wear mask and that mask is registered to the ink. Turning the element would turn the wear with it and the marks would no longer land in the light. Rotating a square lattice 45° leaves a square lattice, but its axis aligned period grows to s√2 = 87.68: mapping (62i, 62j) through the rotation gives 43.84·(i−j, i+j), whose coordinates are either both even or both odd, which is the corners AND the centre of an 87.68 tile. So the tile is five circles rather than four. The centres of the four neighbouring tiles sit exactly one radius outside each edge, tangent, so they contribute nothing and are left out. THE RADIUS IS THE WHOLE PATTERN, and it stays 43.84 = 62/√2 whatever the tile does, since turning a circle does not change it. At s/√2 a circle crosses its four nearest neighbours exactly midway between them, so four arcs meet at a point and cut the four-petal flower out of every cell, while the next four out come precisely tangent and add nothing. Getting this wrong does not distort the pattern, it doubles it: the first version used radius = s, which pushes that second ring into overlap as well, runs twice as many arcs through every cell and reads as two patterns laid over each other rather than as shippō. It replaced an asanoha hemp-leaf lattice. Two reasons it is better here: it is built from arcs rather than points, which is the rule the rest of the app follows — nothing comes to a point except the brand glyph — and the flower it cuts out of every cell is quietly the same blossom the logo and the petal field are made of. This is a MASK, not an image — plain white strokes at full alpha. The colour lives in the foil underneath, because a metallic finish cannot come from a stroke colour: one flat tint per line is the opposite of metal. So the stroke here carries WIDTH only; its strength is --lattice-strength and its colour is --tex-foil. */ --tex-shippo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='87.68' height='87.68' viewBox='0 0 87.68 87.68' fill='none'%3E%3Cg stroke='white' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='43.84'/%3E%3Ccircle cx='87.68' cy='0' r='43.84'/%3E%3Ccircle cx='0' cy='87.68' r='43.84'/%3E%3Ccircle cx='87.68' cy='87.68' r='43.84'/%3E%3Ccircle cx='43.84' cy='43.84' r='43.84'/%3E%3C/g%3E%3C/svg%3E"); /* Rolled pink foil — what the lattice is actually printed in. A metal finish is not a colour, it is a sequence of highlights and shadows: the same surface catching light differently across its length. So this is a band of bright, mid rose and deep rose repeated at an angle, and the lattice mask cuts the pattern out of it. Every arc on the page is therefore a slightly different pink, and a circle can run from highlight to shadow along its own curve — which is the thing that reads as metal rather than as pink line-work. It is sized to the element, so exactly one sweep crosses the viewport and no two parts of the page catch the light the same way. Do not tile it: a repeating sheen is a texture, not a finish. */ --tex-foil: linear-gradient(104deg, #fff2f6 0%, #f0b3bd 9%, #cf5b85 17%, #ffe3ea 26%, #e8789f 35%, #b94a71 44%, #ffdbe6 53%, #f3bcc6 62%, #d9628c 71%, #fff2f6 80%, #e8789f 90%, #c9527d 100%); /* How present the printed lattice is. It used to live in the stroke's own alpha; now that the stroke is a mask it lives here, and it is the one dial to turn. Kept low, and the stroke back at 1px. A 2px line at 0.26 pulled the eye off the figures — the lattice is the paper, not the content, and the foil now has somewhere better to be: the borders. */ --lattice-strength: 0.17; /* The same foil for the UI's own edges. Straight rules take it through border-image, which cannot be given an opacity, so this one carries its alpha baked in and runs left to right — border-image slices the bottom row of the image for a bottom border, and a horizontal sweep keeps its whole range in every row. */ --foil-rule: linear-gradient(90deg, rgba(255,242,246,0.50) 0%, rgba(232,120,159,0.42) 12%, rgba(185,74,113,0.34) 24%, rgba(255,227,234,0.52) 36%, rgba(243,188,198,0.44) 48%, rgba(207,91,133,0.36) 60%, rgba(255,219,230,0.50) 72%, rgba(232,120,159,0.42) 84%, rgba(217,98,140,0.38) 100%); /* The mask that keeps the lattice from being uniform. A block-printed pattern on a hand-formed sheet never takes evenly — the ink sits into some areas and barely catches in others. This is very low frequency, so the variation happens at a far larger scale than the 60px tile: it breaks the regularity without ever exposing the repeat. Alpha is floored well above zero, so the pattern fades but never vanishes in patches. */ --tex-bloom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0013' numOctaves='3' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.45' intercept='0.18'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='1400' height='1400' filter='url(%23b)'/%3E%3C/svg%3E"); /* Wear — where the printed lattice has rubbed off the sheet. A second mask on .lattice, composited with the bloom. Two noises, multiplied: envelope the SAME turbulence the ink wash is built from — fractalNoise, 0.0017, seed 11, on the same 1200x900 viewBox, drawn at the same cover size. So it is not merely similar to the ink, it is registered to it: where that noise runs high the ink's light pass lifts the ground, and it is exactly there that this lets wear happen. Note the feColorMatrix that lifts RED into alpha before the transfer. feTurbulence writes INDEPENDENT noise into each of R, G, B and A, and the ink drives both its passes off the red channel. Transferring on alpha instead — same seed, same frequency — is a completely different random field, and the wear lands nowhere near the light. That was the first version of this and it put every mark in the dark. grain a much finer noise carrying five octaves, which is what gives the wear its range — some areas barely touched, others rubbed through, and every scale in between. That range is the whole difference between reading as wear and reading as noise. Each is stretched to near-bimodal BEFORE they are multiplied. Multiplying two raw turbulences puts the product in a narrow band around 0.25, so any threshold lands far out in the tail and nothing visible happens; stretched first, the product is high only where both are high, and the coverage is predictable. The result is inverted into holes in an otherwise opaque mask. Frequency and blur are what decide whether this reads as wear at all. Low frequency and a heavy blur just fade the pattern out in clouds, which is what the bloom mask already does. It has to be fine enough and sharp enough to break the individual arcs into skips. Three numbers control how heavy it is, and the last one matters most: intercept -2.62 on the envelope: how much of the sheet may wear intercept -2.82 on the grain: how much of that actually does -0.65 in the final feColorMatrix alpha, the DEPTH a worn spot reaches. At -1 the mask falls to zero and the print is deleted; at -0.65 it bottoms out at 0.35 and the print is thinned instead. Depth is the right dial for "too heavy". Raising the thresholds alone leaves the surviving marks just as absolute and only makes them rarer, which reads as a few bald patches rather than as a worn sheet. */ --tex-wear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='900' viewBox='0 0 1200 900'%3E%3Cfilter id='w' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0017' numOctaves='3' seed='11' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0' result='e0'/%3E%3CfeComponentTransfer in='e0' result='e'%3E%3CfeFuncA type='linear' slope='6' intercept='-2.62'/%3E%3C/feComponentTransfer%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03 0.03' numOctaves='5' seed='41' result='g0'/%3E%3CfeComponentTransfer in='g0' result='g'%3E%3CfeFuncA type='linear' slope='6' intercept='-2.82'/%3E%3C/feComponentTransfer%3E%3CfeComposite in='e' in2='g' operator='arithmetic' k1='1' k2='0' k3='0' k4='0'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -0.65 1'/%3E%3CfeGaussianBlur stdDeviation='0.7'/%3E%3C/filter%3E%3Crect x='-200' y='-200' width='1600' height='1300' filter='url(%23w)'/%3E%3C/svg%3E"); --washi: 0.62; /* Rounded throughout — nothing in the UI comes to a point except the brand glyph itself. */ --radius-sm: 9px; --radius: 14px; --radius-lg: 20px; --radius-xl: 26px; --radius-pill: 999px; /* One face. Nunito Sans has genuinely rounded terminals and open counters, so it reads warm at every size and never looks brittle. The mono is kept only for bank memos and sheet-formula citations, where character alignment is the point. */ --font-ui: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-kanji: 'Zen Maru Gothic', 'Yu Gothic', 'Hiragino Maru Gothic ProN', sans-serif; --topline: 74px; --max: 1120px; /* The five petal silhouettes — cherry blossom, so each one carries the cleft at its broad end that makes a sakura petal read as a sakura petal, and tapers to a point opposite it. Most are curled, because a petal seen falling is rarely flat on. The cleft is kept shallow and off-centre on purpose. Cut it deep and symmetrical and the silhouette stops being a petal and becomes a heart, which is what the first pass at these did. Used as masks, so each petal takes its colour from its own background rather than having one baked in. Their natural proportions differ, and petals.js sizes each one to its own aspect so none is stretched. */ --petal-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 100'%3E%3Cpath d='M35 99C17 89 3 69 3 47 3 28 10 11 21 8c8-2 12 6 15 14 4-7 11-13 19-11 9 3 12 18 12 36 0 22-14 42-32 52z'/%3E%3C/svg%3E"); --petal-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 100'%3E%3Cpath d='M14 97C4 79 7 53 21 34 31 21 44 9 54 7c8-2 12 7 10 17 6-7 15-10 20-3 6 10 1 34-15 52-16 18-42 26-55 24z'/%3E%3C/svg%3E"); --petal-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 100'%3E%3Cpath d='M74 97C84 79 81 53 67 34 57 21 44 9 34 7c-8-2-12 7-10 17-6-7-15-10-20-3-6 10-1 34 15 52 16 18 42 26 55 24z'/%3E%3C/svg%3E"); --petal-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 56'%3E%3Cpath d='M2 34C16 16 40 4 62 4c11 0 20 4 24 9 3 4-2 8 0 12 3 5 10 7 11 13 1 8-11 14-27 15C42 55 13 45 2 34z'/%3E%3C/svg%3E"); --petal-5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 100'%3E%3Cpath d='M27 99C12 86 2 65 3 43 4 23 10 7 18 6c5-1 7 6 8 12 2-7 5-13 9-12 8 2 15 18 16 38 1 22-9 42-24 55z'/%3E%3C/svg%3E"); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --lift: 0 28px 64px -20px rgba(0, 0, 0, 0.78), 0 4px 14px -6px rgba(0, 0, 0, 0.55); --lift-sm: 0 10px 26px -12px rgba(0, 0, 0, 0.6); /* The 1px highlight along a surface's top edge — what makes a panel feel like a physical plane rather than a coloured rectangle. Tinted blush and lifted well above the old 0.045 white, because this is now what makes the edges read as metal rather than as pink line-work: a bright catch along the top against a deeper rose all the way round is the whole of how a rolled edge looks. It is an inset shadow, so Chrome rasterises it with the same clean rounded-rect antialiasing as the border it sits inside. */ --bevel: inset 0 1px 0 rgba(255, 226, 236, 0.14); } /* There is one theme. The portal is dark, and the blush reads as blossom against it — on white the same pink washes out to 1.9:1 and the accent has to rotate to a deep rose, which is a different brand. */