/* ============================================================= Sozou. Editorial bones, modern motion. A high-contrast serif for display, a geometric sans for everything functional, near-black on warm white, hairline rules, and a great deal of air. Then a motion layer over the top: things arrive as you reach them, surfaces have depth, and hover is an answer rather than a colour change. Two rules the motion follows, because animation that ignores them is worse than none: 1. NOTHING IS HIDDEN BY DEFAULT. Reveal states are applied by JS only once it has confirmed IntersectionObserver works. A stylesheet that starts elements at opacity:0 and relies on script to bring them back shows a blank page to anyone whose JS failed to load. 2. prefers-reduced-motion turns all of it off. Not "less of it" — off. Vestibular disorders are not a design taste. ============================================================= */ /* Palette sampled from the mark itself rather than taken from the brand document, because the two disagreed: the artwork is navy and the document lists a violet system. The artwork wins — it is what people will see. #0C2454 the enso and the kanji (4,406px of the mark) #486CFC the spark, the single bright dot (87px) The paper is COOL, not the warm cream this file started with. Warm cream against a cool navy produces a discord that is hard to name and easy to feel; every neutral here leans very slightly blue so the mark sits in the page instead of on top of it. */ :root { /* — paper — */ --bg: #FAFAFC; --bg-2: #F1F2F7; --surface: #FFFFFF; --hair: rgba(12, 36, 84, .12); --hair-2: rgba(12, 36, 84, .22); /* — ink — */ --ink: #16181F; --ink-2: #3F4453; --ink-3: #626878; --on-ink: #FAFAFC; /* — the brand. Navy carries structure; the spark is for emphasis only, because a spark used everywhere stops being one. — */ --navy: #0C2454; --navy-2: #18306C; --spark: #486CFC; --bronze: #0C2454; /* legacy alias, so nothing breaks mid-edit */ --bronze-2: #18306C; --bronze-soft: rgba(12, 36, 84, .07); --display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ls: .04em; --r: 5px; --pad: clamp(20px, 5vw, 64px); --maxw: 1180px; --measure: 34rem; --ease: cubic-bezier(.22, .7, .24, 1); --fast: 160ms; --mid: 340ms; --slow: 700ms; color-scheme: light; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* No page scrollbar (owner's call, 2026-09-14). A classic scrollbar is a 15px strip no page can draw under, so the header and the full-bleed work frame both stopped 15px short of the window's right edge. Scrolling is untouched: wheel, trackpad, keys and touch all still work, and the 1px progress line (motion.js) shows position. Scoped to the root only, so panels that scroll on their own (the Kikuemon chat log, long lists) keep their scrollbars. */ scrollbar-width: none; } html::-webkit-scrollbar { display: none; } /* Safari and older Chromium, which ignore scrollbar-width */ body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16.5px/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* clip, NOT hidden — and this one line decides whether the sticky header works at all. Setting overflow-x: hidden forces the computed overflow-y to `auto`, which makes a scroll container. position: sticky then has nothing to stick to and the bar scrolls away with the page; measured, its top was exactly -scrollY at every offset. `clip` suppresses the same horizontal overflow WITHOUT creating a scroll container, so sticky survives. Both are declared: a browser too old for `clip` falls back to `hidden` and loses only the sticky header, not the layout. */ overflow-x: hidden; overflow-x: clip; } h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 300; letter-spacing: -.015em; line-height: 1.06; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } .measure { max-width: var(--measure); } /* Off-screen but still read by a screen reader / found by find-in-page — for the one real

a page needs when its visible heading is an h2 (or, here, when the h1's section is deliberately a bare motion graphic). */ .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================= The bar ============================================================= */ /* Transparent at rest, glass once the page moves. At the top there is nothing behind the bar to separate it from, so the material is just a band of slightly-different white across the hero. The moment content starts passing underneath it, the blur earns its place. */ .bar { position: sticky; top: 0; z-index: 50; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background var(--mid) var(--ease), backdrop-filter var(--mid) var(--ease), transform 320ms var(--ease); /* No rule under the bar, scrolled or otherwise. The blur already separates it from what passes beneath, and a hairline on top of that draws a line the eye has to cross on every page. */ } /* NOT capped at --maxw. The bar spans the window so the mark sits against the left edge and the call to action against the right; boxing it into the 1180px content column would float both of them in the middle of a wide screen with empty gutters either side. The gutter is tight for the same reason. */ .bar-in { max-width: none; margin: 0; padding: 0 clamp(16px, 2.4vw, 30px); height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; } .wordmark { justify-self: start; font-family: var(--display); font-size: 1.42rem; letter-spacing: .005em; } .bar nav { display: flex; gap: clamp(16px, 2.4vw, 30px); } .bar nav a { position: relative; font-size: .9rem; color: var(--ink-3); padding: 4px 0; transition: color var(--fast) var(--ease); } .bar nav a:hover { color: var(--ink); } /* The underline grows from the left rather than fading in. Movement reads as a response; a fade reads as a rendering delay. */ .bar nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--mid) var(--ease); } .bar nav a:hover::after { transform: scaleX(1); } .bar-cta { justify-self: end; white-space: nowrap; } /* Phones: two rows. The one-row bar needs about 660px (mark, four links, the button), and below that the grid squeezed the nav on top of the wordmark and wrapped "Book a call" onto three lines. The four links stay visible on a second row rather than going behind a menu button: four short words fit across a 320px screen, and a link you can see beats one you have to open a menu to find. The mark and the call to action keep the first row at the usual 52px. The whole bar still hides on scroll-down, as one piece. */ @media (max-width: 760px) { .bar-in { height: auto; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 52px auto; grid-template-areas: "mark cta" "nav nav"; row-gap: 0; } .bar-in > .wordmark { grid-area: mark; } .bar-in > .bar-cta { grid-area: cta; } .bar nav { grid-area: nav; justify-content: center; gap: clamp(18px, 6vw, 32px); padding-bottom: 6px; } /* 8px above and below: a 32px-tall target, not the 26px a mouse gets. */ .bar nav a { font-size: .86rem; padding: 8px 0; } .bar nav a::after { bottom: 6px; } /* Anchors land below the taller bar, not under its second row. `html [id]` and not `[id]`: the base rule sits much later in this file and would win a tie on source order. */ html [id] { scroll-margin-top: calc(97px + 20px); } /* the two-row bar measures 97px */ } /* ============================================================= Buttons ============================================================= */ .btn { display: inline-flex; align-items: center; gap: 9px; font: 500 .9rem/1 var(--sans); padding: 13px 22px; border: 1px solid var(--ink); border-radius: var(--r); color: var(--ink); background: none; cursor: pointer; position: relative; overflow: hidden; transition: color var(--mid) var(--ease), border-color var(--mid) var(--ease); } /* The fill sweeps up from the bottom edge. One transform, composited, no layout work — which is why it stays smooth on a phone. */ .btn::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateY(101%); transition: transform var(--mid) var(--ease); /* 0, NOT -1. `.btn` is position:relative with z-index:auto, so it is not a stacking context — at -1 this pseudo paints BEHIND the parent's own background. On a transparent button you cannot tell; on .btn-primary, which has an opaque background, the sweep never appears at all, and :hover then sets the label to var(--ink) over a var(--ink) background: contrast 1:1, an invisible "Book a call". It looked fine only because motion.js puts an inline transform on magnetic buttons, and that DOES make a stacking context — so the bug hid from every mouse desktop and showed up under prefers-reduced-motion, with JS off, and on touch. At 0 the pseudo paints above the background and below .btn span (z 1), in both cases. */ z-index: 0; } .btn:hover { color: var(--on-ink); } .btn:hover::before { transform: translateY(0); } .btn span, .btn svg { position: relative; z-index: 1; } .btn-primary { background: var(--ink); color: var(--on-ink); } .btn-primary::before { background: var(--bg); } .btn-primary:hover { color: var(--ink); } .btn-ghost { border-color: transparent; padding-left: 4px; padding-right: 4px; } .btn-ghost::before { display: none; } .btn-ghost:hover { color: var(--bronze); } .btn-sm { padding: 9px 16px; font-size: .84rem; } /* ============================================================= Motion — reveal on approach Applied by motion.js only after it confirms support, so the default state of every element is visible. ============================================================= */ /* 40px and a slight scale, not 22px and opacity. The first version was measured working perfectly and still went unnoticed: too little travel, over too long, triggered too early. An effect nobody perceives is pure cost — it runs, it burns frames, and it buys nothing. The scale is what makes it read as ARRIVING rather than merely fading. */ html.motion [data-rise] { opacity: 0; transform: translate3d(0, 40px, 0) scale(.985); transition: opacity 620ms var(--ease), transform 620ms var(--ease); } html.motion [data-rise].in { opacity: 1; transform: none; } /* Staggering is a CSS variable the script sets, so the delay lives with the element rather than in a pile of nth-child rules. */ html.motion [data-rise] { transition-delay: calc(var(--i, 0) * 85ms); } /* ============================================================= Hero ============================================================= */ /* Full viewport. svh, not vh: on a phone the URL bar collapses on first scroll and 100vh is measured against the EXPANDED bar, so a vh hero is taller than the screen and the first thing anyone does is scroll past a slice of nothing. */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(52px + 3vh) 0 5vh; } /* A slow bronze wash that drifts as you scroll. Set by motion.js via --sy so it costs one custom property write per frame, not a reflow. */ /* This wash is what makes the transparent header mean anything. A transparent bar over a plain white page is indistinguishable from a white bar — measured: every layer beneath it was transparent down to the body, so it was revealing the same paper it would otherwise have painted. Something has to sit behind it. This does, and it deliberately starts ABOVE the hero's top edge so it passes under the bar rather than beginning below it. */ .hero::before { content: ""; position: absolute; top: -46%; right: -14%; width: 72vw; height: 72vw; max-width: 900px; max-height: 900px; background: radial-gradient(circle at 50% 50%, rgba(72, 108, 252, .22), rgba(72, 108, 252, .06) 45%, rgba(72, 108, 252, 0) 70%); transform: translate3d(0, calc(var(--sy, 0) * -.06px), 0); pointer-events: none; } /* A second, cooler wash from the left, so the top of the page reads as a field rather than one blob in a corner. */ .hero::after { content: ""; position: absolute; top: -30%; left: -18%; width: 58vw; height: 58vw; max-width: 720px; max-height: 720px; background: radial-gradient(circle at 50% 50%, rgba(12, 36, 84, .10), rgba(12, 36, 84, 0) 66%); transform: translate3d(0, calc(var(--sy, 0) * -.03px), 0); pointer-events: none; } /* overflow was hidden, which clipped both washes at the hero's own top edge — exactly the region the bar sits over. Visible lets them run up behind it. Sideways it has to be clipped here, though, because body's overflow-x:clip does not do it. While is overflow:visible, body's value is handed to the viewport rather than applied to body. Measured before this line: the ::before's right:-14% made the home page 428px wide on a 375px phone, and mobile Chrome widened the layout viewport to match, which parked every right-anchored fixed element (the Kikuemon launcher) ~40px off-screen. clip rather than hidden: clip leaves overflow-y visible, and hidden would turn the hero into a scroll container and cut the washes off at the top again. Safari 15 has no clip (iPhone 6s/7/SE1 and iPad Air 2 stop there), so it gets the old hidden instead: the washes cut at the top edge beats a page that drags sideways. */ .hero { overflow: hidden; } @supports (overflow-x: clip) { .hero { overflow: visible; overflow-x: clip; } } .hero > .wrap { position: relative; z-index: 1; } /* ============================================================= About page — hero enso + the portrait ============================================================= */ /* The about hero is a lockup and nothing else: the mark, "Sozou" under it, then the tagline. No button, no copy. Full height on phones too (the home hero drops to auto there), because here the mark IS the section. Every animated state below is scoped to .motion; without it (no JS, reduced motion) each layer's base style is its finished position, so the fallback is the lockup, flat and complete, not a blank. Once the intro has played it holds still: no idle drift, only the pointer tilt. */ /* Tucked up under the transparent header, as the home hero is, so it is exactly one screen: before, it started below the header yet was still 100svh tall AND padded for the header, which sat the lockup ~52px low and pushed the scroll cue off the bottom. The extra bottom padding keeps the cue clear of the tagline and lifts the lockup a little above centre. --ah-bar is the header's height (two rows on phones). */ .hero.about-hero { --ah-bar: 52px; margin-top: calc(-1 * var(--ah-bar)); min-height: 100svh; padding: calc(var(--ah-bar) + 2vh) 0 calc(3vh + 64px); } @media (max-width: 760px) { .hero.about-hero { --ah-bar: 91px; } } .about-hero .wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* The ring's own sweep angle. Registered so it can animate at all; the initial value is past 360deg so an un-animated ring is fully shown. A browser without @property never resolves var(--sweep), the mask is invalid, and the ring is simply drawn — the right fallback. */ @property --sweep { syntax: ''; inherits: false; initial-value: 380deg; } /* Wrappers, one job each, so no animation overwrites another's transform: scroll (recede as you leave) > tilt (pointer, eased) > scene (the arrival). Opacity, filter and mask live only on leaves, because on a preserve-3d element any of them flattens its children onto one plane. The stage is capped by height as well as width so the whole lockup (mark + name + tagline) fits a short laptop screen. */ .ah-stage { position: relative; width: min(64vw, 380px, 46svh); aspect-ratio: 1; container-type: inline-size; /* cqw below = % of the stage width */ perspective: 1300px; } .ah-scroll, .ah-tilt, .ah-scene { position: absolute; inset: 0; } .ah-scroll, .ah-tilt, .ah-scene, .ah-kanji, .ah-k { transform-style: preserve-3d; } .ah-tilt { transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); } .motion .ah-scroll { transform: translateZ(calc(var(--sy, 0) * -.3px)) rotateX(calc(var(--sy, 0) * .02deg)); } /* The brush — the real one, cut from mark.png by tools/make_enso_ring.py. The mask sweeps clockwise from 205deg, the heavy blob under the spark, which is where the stroke was actually started: loaded brush up the left side, dry-brush tail along the bottom. Centred on the ring, not the canvas (the art sits 1.3% left and 0.6% high). */ .ah-ring, .ah-ghost { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: conic-gradient(from 205deg at 48.7% 49.4%, #000 calc(var(--sweep) - 10deg), transparent var(--sweep)); mask-image: conic-gradient(from 205deg at 48.7% 49.4%, #000 calc(var(--sweep) - 10deg), transparent var(--sweep)); } /* A soft ink shadow further back: it is what the tilt slides the ring across, so the depth reads even at rest. */ .ah-ghost { transform: translateZ(-16cqw) scale(1.06); filter: blur(12px); opacity: .16; } .ah-spark { position: absolute; left: 23.2%; top: 80.2%; width: 22%; aspect-ratio: 1; margin: -11% 0 0 -11%; border-radius: 50%; background: radial-gradient(circle, rgba(72, 108, 252, .55) 0, rgba(72, 108, 252, .2) 30%, rgba(72, 108, 252, 0) 68%); transform: translateZ(4cqw); } .ah-spark::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; border: .35cqw solid rgba(72, 108, 252, .7); opacity: 0; } /* 想像, live, in the logo's own face (C:\Sozou\logo\bake.py set it in Zen Kaku Gothic New Bold). Size, gap and offset were measured against mark.png's pixels, flat, including the 3% the translateZ adds: width and centre within 0.1% of the ring, height 2.8% over (the browser's rendering of the face is a touch taller than FreeType's). Owner, 2026-09-29: first lighter (Regular), then "a more stylish modern" face, so the hero is now MURECHO 400 (a clean geometric Japanese sans), chosen over Zen Maru Gothic, Shippori Mincho and a brush script in a side-by-side; the in-text 想像 heading keeps Zen Kaku Gothic New 700. One link loads a two-glyph subset of each. */ .ah-kanji { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 400 18.7cqw/1 'Murecho', 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; transform: translateY(.95cqw) translateZ(9cqw); } .ah-k { position: relative; display: block; } .ah-k + .ah-k { margin-top: .01em; } .ah-k b { position: relative; display: block; font-weight: inherit; color: #162A5A; } .ah-k i { position: absolute; inset: 0; font-style: normal; color: #0B1530; transform: translateZ(calc(var(--z) * -.45cqw)); } /* "Sozou" in the display serif, as in the header wordmark, set large in the mark's navy; the tagline in the same face's italic. The name sits a little into the ring's transparent margin so the lockup reads as one. */ .ah-name { margin: clamp(2px, 1vh, 10px) 0 0; font: 400 clamp(2.3rem, 4.6vw, 3.3rem)/1 var(--display); letter-spacing: .02em; color: #162A5A; perspective: 600px; } .ah-name i { display: inline-block; font-style: normal; transform-origin: 50% 90%; } .ah-tag { margin: clamp(8px, 1.4vh, 14px) 0 0; font: italic 300 clamp(1.05rem, 1.6vw, 1.3rem)/1.3 var(--display); letter-spacing: .03em; color: var(--ink-2); } /* A thin line with a bead running down it: there is more below. */ .ah-cue { position: absolute; left: 50%; bottom: clamp(18px, 4vh, 36px); width: 1px; height: 44px; margin-left: -.5px; overflow: hidden; background: linear-gradient(rgba(12, 36, 84, 0), rgba(12, 36, 84, .26)); z-index: 1; } .ah-cue::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--navy); } /* ---- the sequence (motion only) ---- 0s the scene starts lying back, tipped and far off, and rises for 3.4s — slow enough that the brush visibly paints on a surface still turning to face you (an ease-out had it upright before a single stroke showed, and read as flat) .18s the spark lands .28s the brush sweeps round from it (2.1s) 1.35s 想, then 像, flip in from in front of the screen 2.25s+ S-o-z-o-u flip up letter by letter under the mark 2.4s the ring closes; a ripple leaves the spark 2.95s the tagline rises in after still; only the pointer tilt (about.js) moves it */ .motion .ah-scene { animation: ah-arrive 3.4s cubic-bezier(.45, 0, .15, 1) both; } @keyframes ah-arrive { from { transform: rotateX(62deg) rotateZ(-26deg) translateZ(-24cqw) scale(.86); } to { transform: none; } } .motion .ah-ring, .motion .ah-ghost { animation: ah-sweep 2.1s cubic-bezier(.55, .05, .35, 1) .28s both; } @keyframes ah-sweep { from { --sweep: 0deg; } to { --sweep: 380deg; } } .motion .ah-spark { animation: ah-land 1s cubic-bezier(.2, .9, .3, 1.3) .18s both; } .motion .ah-spark::after { animation: ah-ripple 1.6s cubic-bezier(.2, .7, .2, 1) 2.4s forwards; } @keyframes ah-land { from { opacity: 0; scale: .2; } 60% { opacity: 1; scale: 1.25; } to { opacity: 1; scale: 1; } } @keyframes ah-ripple { from { opacity: .9; scale: .4; } to { opacity: 0; scale: 3.2; } } /* The characters: the transform on .ah-k (3D, so the extrusion shows while it turns), the fade and blur on its layers (leaves). The fade is short and the turn long and soft, so they are solid while still visibly flipping; with a long fade the flip was over before they could be seen. */ .ah-k:first-child { --kd: 1.35s; } .ah-k:last-child { --kd: 1.6s; } .motion .ah-k { animation: ah-k-in 1.9s cubic-bezier(.3, .7, .2, 1) var(--kd) both; } .motion .ah-k > * { animation: ah-k-fade .55s ease-out var(--kd) both; } @keyframes ah-k-in { from { transform: translate3d(0, -4cqw, 50cqw) rotateX(-75deg) rotateY(25deg); } to { transform: none; } } @keyframes ah-k-fade { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: none; } } /* The name: each letter tips up off its baseline, the same flip the characters make, 70ms apart. Letters are leaves, so the blur and fade sit on them directly. */ .motion .ah-name i { animation: ah-letter .9s cubic-bezier(.2, .8, .2, 1) calc(2.25s + var(--i) * .07s) both; } @keyframes ah-letter { from { opacity: 0; transform: translateY(.35em) rotateX(-85deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } .motion .ah-tag { animation: ah-rise 1s cubic-bezier(.2, .8, .2, 1) 2.95s both; } @keyframes ah-rise { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } .motion .ah-cue { animation: ah-fade .8s ease-out 3.8s both; } .motion .ah-cue::after { animation: ah-cue 2.2s cubic-bezier(.6, 0, .4, 1) 4s infinite; } @keyframes ah-fade { from { opacity: 0; } } @keyframes ah-cue { to { top: 100%; } } /* Photo card on the left, pinned while the story scrolls on the right. One column on phones and narrow tablets, card centred on top. Its own wider wrap (the site's .wrap caps content at ~1050px) so the two columns can spread out; the story column is still capped at 50rem so lines stay readable. */ .about-wrap { max-width: 1300px; } .about-body { display: grid; grid-template-columns: 280px minmax(0, 50rem); gap: clamp(40px, 6vw, 100px); justify-content: center; align-items: start; padding-top: clamp(28px, 5vw, 72px); } .about-who { position: sticky; z-index: 2; /* the avatar's jump-out zoom paints over the story */ top: 96px; /* clears the header when it slides back */ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; } /* The avatar is a card with two faces: the photo on the front, a 3D cartoon of him on the back. The cartoon is ONE sprite of six frames side by side (hand in, raised, hand out, lowering, arm down, blink), so each frame is a background-position-x step: 0% 20% 40% 60% 80% 100%. Without JS it is just the photo: the cartoon only exists once about.js adds .aw-on. .is-digital turns the card round. */ .aw { position: relative; width: 180px; height: 180px; perspective: 900px; } .aw-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; } html.motion .aw-card { transition: transform .8s cubic-bezier(.3, .7, .2, 1); } .aw.is-digital .aw-card { transform: rotateY(180deg); } .aw.aw-still .aw-card { transition: none; } .aw-face { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--bg-2); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* No ring on the cartoon (owner). clip-path rather than overflow + radius: the character sways INSIDE the circle, and WebKit does not always clip a transformed child to a rounded corner. */ .aw-digital { display: none; box-shadow: none; transform: rotateY(180deg); background: #EEF1F9; clip-path: circle(50% at 50% 50%); } .aw-on .aw-digital { display: block; } /* Alive, not a still: the character breathes and sways a little inside the circle (.aw-live), and blinks now and then (.aw-frames.idle). Scaled up 8% so the sway never shows the picture's edge; pivoting low, like a body. */ .aw-live { position: absolute; inset: 0; transform: scale(1.08); transform-origin: 50% 72%; } .aw-frames { position: absolute; inset: 0; background: var(--sprite) 80% 0 / 600% 100% no-repeat; } html.motion .aw.is-digital .aw-live { animation: aw-sway 5s ease-in-out infinite; } html.motion .aw-frames.idle { animation: aw-blink 4.6s step-end infinite; } html.motion .aw-frames.waving { animation: aw-wave 2.4s step-end both; } .aw:not(.is-digital) .aw-frames { animation-play-state: paused; } @keyframes aw-sway { 0%, to { transform: scale(1.08) translateY(0) rotate(0deg); } 25% { transform: scale(1.085) translateY(-1.1%) rotate(-1.3deg); } 50% { transform: scale(1.095) translateY(-.3%) rotate(0deg); } 75% { transform: scale(1.085) translateY(-.9%) rotate(1.3deg); } } @keyframes aw-blink { 0% { background-position-x: 80%; } 88% { background-position-x: 100%; } 91.5%, to { background-position-x: 80%; } } /* Raise the hand, wave twice, lower it, rest (then about.js switches to idle). */ @keyframes aw-wave { 0% { background-position-x: 80%; } 5% { background-position-x: 60%; } 10% { background-position-x: 20%; } 18% { background-position-x: 40%; } 27% { background-position-x: 20%; } 36% { background-position-x: 0%; } 45% { background-position-x: 20%; } 54% { background-position-x: 40%; } 63% { background-position-x: 20%; } 72% { background-position-x: 0%; } 81% { background-position-x: 20%; } 88% { background-position-x: 60%; } 94%, to { background-position-x: 80%; } } /* The first time he appears (and only then) he jumps out at you: the whole avatar glides up toward the screen while he waves, then eases back into place. A one-second eased glide in (gentle start, no overshoot), a hold, a gentle glide back: 3.6s in all, which about.js knows as JUMP_MS. On .aw itself, so it never fights the card's own rotateY. The shadow is a ready-painted ::before whose OPACITY fades, not an animated box-shadow: opacity and transform stay on the compositor, a changing shadow repaints every frame and stutters. */ .aw::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 28px 44px -16px rgba(12, 36, 84, .45); opacity: 0; pointer-events: none; } .aw.jumping { z-index: 5; will-change: transform; animation: aw-jump 3.6s both; } .aw.jumping::before { animation: aw-lift 3.6s both; } /* The name sits just under the avatar, so the zoomed circle half-covers it; let it step aside while he is out. */ .about-who h2 { transition: opacity .35s var(--ease); } .about-who:has(.aw.jumping) h2 { opacity: 0; } @keyframes aw-jump { 0% { transform: none; animation-timing-function: cubic-bezier(.45, 0, .25, 1); } 28%, 75% { transform: translateY(-6%) scale(1.5); } 75% { animation-timing-function: cubic-bezier(.45, 0, .35, 1); } to { transform: none; } } @keyframes aw-lift { 0% { opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .25, 1); } 28%, 75% { opacity: 1; } 75% { animation-timing-function: cubic-bezier(.45, 0, .35, 1); } to { opacity: 0; } } /* Turns him round: a small round thumbnail under the LinkedIn link of the OTHER face — the resting cartoon while the photo shows, the photo while the cartoon does. No ring and no tooltip (owner); aria-label carries the name for screen readers. */ .aw-btn { position: relative; display: block; width: 42px; height: 42px; margin-top: 10px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: #EEF1F9; box-shadow: 0 6px 16px -8px rgba(12, 36, 84, .45); cursor: pointer; transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } .aw-btn[hidden] { display: none; } .aw-btn:hover { transform: scale(1.08); box-shadow: 0 8px 18px -8px rgba(12, 36, 84, .5); } .aw-btn:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; } .aw-btn-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Their own small images (heng-thumb-*.webp, 3x the button), not the 540px sprite frames shrunk thirteen times on the fly, which came out pixelated. */ .aw-btn[aria-pressed="true"] .aw-btn-digital, .aw-btn[aria-pressed="false"] .aw-btn-real { display: none; } html.motion .aw-btn.pop { animation: aw-pop .5s var(--ease) both; } @keyframes aw-pop { from { opacity: 0; transform: translateY(6px); } } /* The intro, only when about.js runs it (.aw-seq, and only under html.motion): the avatar arrives first and waves, then the story arrives as he turns round to the photo. Without it nothing here is hidden. */ .aw-seq .about-who { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .aw-seq.aw-seen .about-who { opacity: 1; transform: none; } /* The LinkedIn link belongs to the real him: it waits until the card has turned to the photo (owner). */ .aw-seq .about-li { opacity: 0; transition: opacity .6s var(--ease); } .aw-seq.aw-photo .about-li { opacity: 1; } .aw-seq .about-story > * { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); } .aw-seq.aw-told .about-story > * { opacity: 1; transform: none; } .about-who h2 { margin: 6px 0 0; font: 600 1.08rem/1.3 var(--sans); letter-spacing: -.005em; } .about-body .post { max-width: none; margin: 0; padding-top: 0; } @media (max-width: 860px) { .about-body { grid-template-columns: minmax(0, 34rem); gap: 28px; } .about-who { position: static; } } .about-li { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink-3); transition: color var(--fast) var(--ease); } .about-li svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .about-li:hover { color: var(--navy); } .about-wave { display: inline-block; font-size: 1.2em; line-height: 1; margin-right: .1em; } /* The in-text 想像 heading, in the logo's face (same two-glyph subset). */ .post h2.about-kj { font: 700 1.7rem/1.2 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', var(--sans); letter-spacing: .08em; color: #162A5A; } /* Full width under both columns, the rule spanning the same width. */ .post.about-cta { max-width: calc(280px + 50rem + clamp(40px, 6vw, 100px)); margin: 3.2em auto 0; padding-top: 2.4em; border-top: 1px solid var(--hair); text-align: center; } .post.about-cta h2 { margin-top: 0; } /* .post h2's margin loads later */ .about-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 1.5em 0 1.1em; } .about-cta-row svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .post .about-cta-alt { font-size: .86rem; color: var(--ink-3); } /* --- About: the statement under the hero, then how we work --- The statement follows the MM Carz About page's second section: one tall, airy beat with a headline, a short paragraph and an outline button. Its backdrop is not a photograph: a soft sky wash, with the logo's own brushstroke ring ghosted large behind the words (--ring is set inline so it keeps the hashed asset URL). It starts and ends on the page colour, so it melts out of the hero above and into the page below. */ .about-mission { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 100svh; padding: clamp(96px, 16vh, 170px) clamp(20px, 5vw, 56px); text-align: center; background: radial-gradient(ellipse 65% 42% at 26% 92%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, rgba(250, 250, 252, 0) 0%, #E8EEFD 32%, #CBDBFB 70%, rgba(250, 250, 252, 0) 100%); } .about-mission::before { content: ""; position: absolute; z-index: -1; top: 50%; right: -14%; width: min(118vw, 1240px, 108svh); /* never taller than the section, so its ends fade inside it */ aspect-ratio: 1; transform: translateY(-50%); background: var(--ring) center / contain no-repeat; opacity: .1; pointer-events: none; /* The ring is taller than the section, so its ends would be sliced off in a hard line at the seams; fade them instead. */ -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 24%, #000 76%, transparent 96%); mask-image: linear-gradient(to bottom, transparent 4%, #000 24%, #000 76%, transparent 96%); } .about-mission-in { max-width: 36rem; } .about-mission h2 { margin: 0; font: 500 clamp(1.5rem, 2.5vw, 2.1rem)/1.15 var(--sans); letter-spacing: -.04em; color: var(--ink); } .about-mission p { max-width: 30em; margin: 1.1rem auto 0; font-size: clamp(.95rem, 1.05vw, 1.02rem); line-height: 1.75; color: var(--ink-2); text-wrap: balance; } .about-mission p:last-child { margin-top: 2.2rem; } .kicker { font-size: .78rem; letter-spacing: var(--ls); color: var(--bronze); margin-bottom: 18px; } .hero h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 1.0; letter-spacing: -.022em; max-width: 15ch; text-wrap: balance; } .hero h1 em { font-style: italic; color: var(--navy); } .hero-sub { margin: clamp(22px, 3vw, 34px) 0 0; max-width: 46ch; font-size: 1.06rem; color: var(--ink-2); line-height: 1.7; } .hero-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } /* ============================================================= Sections ============================================================= */ section { padding: clamp(56px, 9vw, 118px) 0; } .sec-head { margin-bottom: clamp(30px, 5vw, 56px); } .sec-head h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); max-width: 20ch; text-wrap: balance; } .sec-head p { margin-top: 14px; max-width: 46ch; color: var(--ink-2); } /* /projects/ only: each business's heading is its full logo (the light- background lockup: coloured mark + black wordmark) with the name set beside it after a hairline (owner, 2026-09-28: "place the words next to the logo"). The img is alt="" because the name is right there as text. */ .sec-head .proj-logo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px clamp(14px, 2.4vw, 28px); margin: 0; max-width: none; } .proj-logo img { display: block; height: clamp(34px, 5.4vw, 66px); width: auto; max-width: 100%; } .proj-logo span { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 4.4vw, 3.1rem); line-height: 1.1; color: var(--ink); padding-left: clamp(14px, 2.4vw, 28px); border-left: 1px solid var(--hair); white-space: nowrap; } /* /projects/ (third pass, owner, 2026-09-28): each business is a .proj section — logo and name, the edge-to-edge gallery, then claim-and-proof rows where the proof takes the larger share. */ /* The first section sits well clear of the nav (owner, 2026-09-29: "lower the top section further down from the header" — an earlier pass had pulled it up). The head itself adds nothing; the section padding is the gap. Logo, name and line are centred (owner, 2026-09-29). The second business starts after space alone, no hairline (owner, 2026-09-29). */ .proj:first-child { padding-top: clamp(64px, 10vw, 136px); } .proj-head { padding-top: 0; text-align: center; } .proj-head p { max-width: 62ch; margin-left: auto; margin-right: auto; } .proj + .proj { padding-top: clamp(40px, 6vw, 80px); } /* The gallery: pages of the live site crossfading one into the next, then a montage of the app. Full-bleed (outside every .wrap, no chrome, no radius). The stage is exactly the stills' own 16:9, so every page shows WHOLE — never cropped (owner, 2026-09-29: "show the full viewport"). On a short, wide window that makes it taller than the screen; the reader scrolls. The slides are stacked. The one coming in (.is-on) fades up over the one going out (.was-on), which stays solid underneath until it is covered, so there is no dip to the dark ground halfway through. Everything else is visibility:hidden once faded, which also takes it out of the a11y tree. Without JS the first slide shows and the controls stay hidden. */ .proj-gal { margin-top: 0; } .proj-gal__stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0d0f14; touch-action: pan-y; container-type: size; } .proj-gal__slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s linear 1s; } .proj-gal__slide.was-on { opacity: 1; visibility: visible; z-index: 1; transition: none; } .proj-gal__slide.is-on { opacity: 1; visibility: visible; z-index: 2; transition: opacity 1s ease; } .proj-gal__slide > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } /* The montage: the app's icon and name, then its screens as a staggered row of phones. The stage is a size container, so the phones are sized against BOTH its width (a 16:9 stage) and its height (a stage capped by a short, wide window) and never spill out of either. Below 560 wide the whole stage is ~210px tall: the role line and the fourth phone go. */ .proj-gal__apps { display: flex; align-items: center; justify-content: center; gap: 3.2cqw; padding: 0 4cqw; background: radial-gradient(90% 120% at 18% 20%, rgba(0, 85, 200, .34), transparent 60%), radial-gradient(70% 110% at 92% 95%, rgba(200, 16, 46, .26), transparent 62%), #0b0e16; } .proj-gal__app { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4cqh; color: #fff; max-width: 17cqw; } .proj-gal__icon { display: block; width: clamp(40px, 16cqh, 150px); height: auto; border-radius: 22.5%; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); } .proj-gal__app b { font-family: var(--display); font-weight: 400; font-size: clamp(.95rem, 4.6cqh, 2.6rem); line-height: 1.05; margin-top: 1cqh; } .proj-gal__app span { font-size: clamp(.62rem, 1.9cqh, 1rem); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .62); } .proj-gal__phones { display: flex; align-items: center; gap: 1.8cqw; } .proj-gal__phone { display: block; height: min(31.4cqw, 66cqh); width: auto; border-radius: min(2.1cqw, 4.4cqh); box-shadow: 0 2.2cqw 4cqw -1.6cqw rgba(0, 0, 0, .75); transform: translateY(var(--dy, 0)); } .proj-gal__phone:nth-child(even) { --dy: 7cqh; } .proj-gal__phone:nth-child(odd) { --dy: -3.5cqh; } @container (max-width: 560px) { .proj-gal__app { max-width: 24cqw; } .proj-gal__app span, .proj-gal__phone:nth-child(4) { display: none; } } /* The phones rise into place as the montage comes up. */ .proj-gal__apps .proj-gal__phone { opacity: 0; translate: 0 5cqh; transition: opacity .8s ease, translate .9s cubic-bezier(.2, .7, .2, 1); } .proj-gal__apps.is-on .proj-gal__phone { opacity: 1; translate: 0 0; } .proj-gal__apps.is-on .proj-gal__phone:nth-child(2) { transition-delay: .12s; } .proj-gal__apps.is-on .proj-gal__phone:nth-child(3) { transition-delay: .24s; } .proj-gal__apps.is-on .proj-gal__phone:nth-child(4) { transition-delay: .36s; } /* Under the stage: the controls, then which page this is. Controls first so a longer label never shifts them, and all of it at the left — the far right is where the site's own fixed launcher sits. */ .proj-gal__bar { display: flex; align-items: center; justify-content: flex-start; gap: 8px 28px; flex-wrap: wrap; padding-top: 14px; } .proj-gal__now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: .86rem; color: var(--ink-3); min-width: 0; } .proj-gal__site { font-weight: 600; color: var(--ink); } .proj-gal__label { color: var(--ink-2); } .proj-gal__count { font-variant-numeric: tabular-nums; } .proj-gal__ctrl { display: flex; align-items: center; gap: 10px; } .proj-gal__ctrl[hidden] { display: none; } .proj-gal__dots { display: flex; align-items: center; } .proj-gal__dot { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } .proj-gal__dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); opacity: .38; transition: opacity .2s, width .3s ease; } .proj-gal__dot[aria-current="true"]::before { width: 18px; border-radius: 4px; opacity: 1; background: var(--ink); } .proj-gal__dot:hover::before { opacity: .8; } .proj-gal__pause { width: 30px; height: 30px; padding: 0; border: 1px solid var(--hair); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; } .proj-gal__pause svg { width: 12px; height: 12px; fill: currentColor; } .proj-gal__pause .i-play, .proj-gal.is-paused .proj-gal__pause .i-pause { display: none; } .proj-gal.is-paused .proj-gal__pause .i-play { display: block; } .proj-gal__dot:focus-visible, .proj-gal__pause:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .proj-gal__slide, .proj-gal__slide.is-on, .proj-gal__apps .proj-gal__phone { transition: none; } } .proj-h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin: clamp(48px, 7vw, 96px) 0 0; } /* Claim + proof. The proof column is the wide one (1.55fr) and the row sits in .wrap-wide (1520) instead of .wrap (1180), so a clip is ~900px on a laptop rather than ~560. Each clip keeps its own aspect — no forced crop; portrait proof (a chat panel, a phone screen) gets .proj-feat__media--phone instead. The grid children are .proj-feat__side (proof + its caption) and the text. */ .proj-feats { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 96px); margin: clamp(28px, 4vw, 48px) 0 clamp(24px, 4vw, 48px); } .proj-feat { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .proj-feat--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); } .proj-feat--flip .proj-feat__side { order: 2; } .proj-feat--flip .proj-feat__text { order: 1; } .proj-feat__side { min-width: 0; } .proj-feat__media { border-radius: 10px; overflow: hidden; border: 1px solid var(--hair); background: var(--surface); } .proj-feat__media video, .proj-feat__media img { display: block; width: 100%; height: auto; } .proj-feat__text { max-width: 30rem; } .proj-feat__text h3 { font-size: 1.2rem; font-weight: 600; margin: 0 0 10px; color: var(--ink); } .proj-feat__text p { color: var(--ink-2); line-height: 1.7; margin: 0; } /* Portrait proof shown whole on a dark ground, instead of being cropped into a landscape box or stretching its row to phone height. Dark because the chat capture's own edges are the dark page it floated over. */ .proj-feat__media--phone { display: flex; justify-content: center; align-items: center; padding: clamp(18px, 3vw, 36px); background: #0d0f14; border-color: transparent; } .proj-feat__media--phone video, .proj-feat__media--phone img { width: auto; max-width: 100%; height: clamp(440px, 42vw, 640px); border-radius: 14px; } /* What was blanked out of a capture of a live system — said, not hidden. */ .proj-cap { margin: 10px 2px 0; font-size: .8rem; line-height: 1.5; color: var(--ink-3); } /* The two "Visit" buttons, centred under the last section (the note they sat in was removed, owner 2026-09-29). */ .proj:last-of-type { padding-bottom: clamp(24px, 3vw, 40px); } .proj-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 clamp(56px, 8vw, 96px); } /* A full-width proof (a row of phones) with its claim above it. */ .proj-block { margin: 0; } .proj-block__text { display: flex; align-items: flex-start; gap: clamp(14px, 2vw, 22px); max-width: 46rem; margin-bottom: clamp(20px, 3vw, 36px); } /* The app's own home-screen icon beside its claim (owner, 2026-09-28). */ .proj-appicon { flex: none; display: block; width: clamp(56px, 6vw, 76px); height: auto; border-radius: 22.5%; box-shadow: 0 14px 30px -16px rgba(12, 36, 84, .55); } /* "Connected to Xero": the integration's own mark above the claim. */ .proj-with { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .proj-with img { display: block; width: 24px; height: 24px; } .proj-block__text h3 { font-size: 1.2rem; font-weight: 600; margin: 0 0 10px; color: var(--ink); } .proj-block__text p { color: var(--ink-2); line-height: 1.7; margin: 0; } .proj-block .proj-cap { margin-top: 18px; } /* App screens as a row of phones (--n of them, set inline). Each keeps its true phone proportion; the radius stands in for the handset; the row is capped so three phones don't blow up to a metre tall. Below 860 the row scrolls inside itself (snap per phone) and the page never scrolls sideways. */ .proj-phones { --n: 5; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); max-width: calc(var(--n) * 270px + (var(--n) - 1) * 28px); margin: 0; padding: 0; list-style: none; } .proj-phones li { margin: 0; } .proj-phones img { display: block; width: 100%; height: auto; border-radius: clamp(16px, 2.2vw, 30px); border: 1px solid var(--hair); box-shadow: 0 28px 60px -34px rgba(12, 36, 84, .45); } .proj-phones span { display: block; margin-top: 12px; font-size: .82rem; color: var(--ink-3); text-align: center; } @media (max-width: 860px) { .proj-feat, .proj-feat--flip { grid-template-columns: 1fr; } .proj-feat--flip .proj-feat__side, .proj-feat--flip .proj-feat__text { order: unset; } .proj-feat__media--phone video, .proj-feat__media--phone img { height: clamp(380px, 110vw, 560px); } .proj-phones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(62%, 260px); max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; } .proj-phones li { scroll-snap-align: start; } } .rule { height: 1px; background: var(--hair); border: 0; margin: 0; } /* --- the offer grid --- */ .offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; } .offer > article { background: var(--bg); padding: clamp(24px, 3vw, 36px); transition: background var(--mid) var(--ease); } .offer > article:hover { background: var(--surface); } .offer h3 { font-family: var(--sans); font-weight: 600; font-size: .95rem; letter-spacing: -.005em; margin-bottom: 10px; } .offer p { color: var(--ink-2); font-size: .94rem; line-height: 1.7; } .offer .num { font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--bronze); display: block; margin-bottom: 14px; } /* --- the case-study card, with depth --- The tilt is tiny on purpose. Big 3D tilts look like a demo of 3D tilts; two degrees reads as the surface responding to you. */ .card3d { position: relative; display: block; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); padding: clamp(28px, 4vw, 52px); transform-style: preserve-3d; transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease), border-color var(--mid) var(--ease); will-change: transform; } .card3d:hover { border-color: var(--hair-2); box-shadow: 0 30px 70px -40px rgba(12, 36, 84, .28); } .card3d > * { transform: translateZ(24px); } .case-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .tag { font-size: .74rem; letter-spacing: var(--ls); color: var(--bronze); background: var(--bronze-soft); border: 1px solid rgba(12, 36, 84, .20); border-radius: 999px; padding: 5px 12px; } .case h3 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 14px; } .case p { color: var(--ink-2); max-width: 52ch; line-height: 1.75; } .stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 56px); margin-top: clamp(26px, 4vw, 40px); padding-top: 24px; border-top: 1px solid var(--hair); } .stat b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1; font-variant-numeric: tabular-nums; } .stat span { display: block; margin-top: 6px; font-size: .8rem; color: var(--ink-3); } /* ============================================================= Research card row (home) The MM Carz "News & insights" row, measured off the live page on 2026-09-22 and matched: a band at least a screen tall, a centred head, then FOUR white cards running edge to edge, window side to window side, with nothing between them but a 10-16px gap, and one centred call to action under the row. The cards have no border, no radius and no lift; only the picture moves on hover, a slow zoom. What separates white cards from the page is the band behind them. MM Carz fades through warm greys; this fades through the site's own cool --bg-2, so the paper stays cool. Edge to edge because the grid sits OUTSIDE .wrap in home(). The head and the call to action stay inside it. Each card opens with its post's 16:9 feature image (`image:` in the post header). A post without one is set as type alone, not given an empty box. ============================================================= */ .rnews { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vh, 88px) 0; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 15%, var(--bg-2) 72%, var(--bg) 100%); } /* A flex column would shrink .wrap to its content; it has to span the band for margin:auto to centre the head and the call to action. */ .rnews > .wrap { width: 100%; } .rnews-head { text-align: center; max-width: 760px; margin: 0 auto clamp(34px, 5vh, 60px); } .rnews-head h2 { margin-bottom: clamp(9px, 1.3vh, 13px); } .rnews-head p { color: var(--ink-3); margin: 0; } .rnews-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); align-items: stretch; } /* home() shows up to four. With fewer, the row still spans the window, in as many equal columns as there are cards. A lone card is capped and centred rather than stretched into a banner. */ .rnews-grid[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rnews-grid[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rnews-grid[data-n="1"] { grid-template-columns: minmax(0, 480px); justify-content: center; } .rcard { display: flex; flex-direction: column; background: var(--surface); padding-bottom: clamp(30px, 3.4vh, 44px); } .rcard-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--hair); } .rcard-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); } .rcard:hover .rcard-media img { transform: scale(1.045); } .rcard-body { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; padding: clamp(22px, 2.6vh, 34px) clamp(20px, 2vw, 40px) 0; } .rcard h3 { font-family: var(--display); font-weight: 400; /* MM Carz sets 1-1.18rem in a sans-leaning serif; Cormorant's small x-height needs a step more to read at the same weight. */ font-size: clamp(1.12rem, 1.3vw, 1.3rem); line-height: 1.2; margin: 0 0 clamp(8px, 1.1vh, 11px); /* Clamped so a long title cannot make one card taller than its neighbours; the min-height keeps a one-line title from shortening its own card. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; } .rcard p { font-size: clamp(.8rem, .9vw, .86rem); line-height: 1.55; color: var(--ink-3); margin: 0 0 clamp(12px, 1.6vh, 16px); max-width: 30ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.1em; } .rcard-meta { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: .72rem; letter-spacing: var(--ls); color: var(--ink-3); margin-top: auto; /* pins meta + Read to the card foot */ padding-top: 4px; margin-bottom: clamp(16px, 2vh, 22px); } .rcard-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--hair-2); flex: 0 0 auto; } .rcard-more { font-size: .84rem; font-weight: 500; letter-spacing: .03em; color: var(--ink); padding-bottom: 3px; border-bottom: 1px solid var(--ink); transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease); } .rcard:hover .rcard-more { color: var(--spark); border-bottom-color: var(--spark); } .rnews-cta { /* flex, not inline-flex: an inline-level box ignores `margin: auto`, which is what left-aligned this under a centred heading. */ display: flex; align-items: center; gap: 10px; margin: clamp(28px, 4vh, 48px) auto 0; width: fit-content; font-size: .92rem; font-weight: 500; letter-spacing: .03em; color: var(--ink); padding-bottom: 5px; border-bottom: 1px solid var(--ink); transition: gap var(--mid) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); } .rnews-cta:hover { gap: 16px; color: var(--spark); border-bottom-color: var(--spark); } .rnews-cta svg { width: 19px; height: 11px; flex: 0 0 auto; } .rnews-empty { text-align: center; color: var(--ink-3); } /* A short pull from /about/, not a restatement of it. */ .about-snip-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(16px, 3vw, 28px); } .about-snip-mark { width: 68px; height: 68px; flex: none; mix-blend-mode: multiply; } .about-snip-body { max-width: 62ch; } .about-snip-lede { margin-top: 4px; font-size: 1.06rem; line-height: 1.75; color: var(--ink-2); } .about-snip-cta { margin: clamp(20px, 3vh, 28px) auto 0; } @media (max-width: 640px) { .about-snip-mark { width: 56px; height: 56px; } } /* The MM Carz breakpoints: two across below 1080px, one below 560px. The [data-n] in these selectors is what lets them beat the per-count rules. */ @media (max-width: 1080px) { .rnews-grid[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rnews-grid[data-n="1"] { grid-template-columns: minmax(0, 480px); } } @media (max-width: 560px) { .rnews-grid[data-n] { grid-template-columns: 1fr; } .rcard p { max-width: 40ch; } .rcard h3 { min-height: 0; } } /* ============================================================= Article ============================================================= */ .post { max-width: var(--measure); margin: 0 auto; padding-top: clamp(30px, 6vw, 70px); } .post h1 { font-size: clamp(2rem, 4.8vw, 3.1rem); margin: 8px 0 18px; } .post h2 { font-family: var(--sans); font-weight: 600; font-size: 1.08rem; letter-spacing: -.005em; margin: 2.4em 0 .7em; } .post p, .post ul, .post ol { margin: 0 0 1.2em; } .post ul, .post ol { padding-left: 1.15em; } .post li { margin-bottom: .45em; } .post .meta { font-size: .84rem; color: var(--ink-3); margin: 0; letter-spacing: var(--ls); } .post .lede { font-size: 1.14rem; color: var(--ink-2); margin: 0 0 2em; line-height: 1.72; } /* ============================================================= Research article (/research//, article() in build.py) The MM Carz single-insight page (theme style.css, .mm-article*, and the live page, measured 2026-09-22), in this site's own type and colours. Values carried over: the 16px-radius cover at 1.9:1 with its long soft shadow; the hero grid (cover up to 1024px, heading 320px+, gap 40-88px), stacking under 900px; the side padding clamp(24px, 4vw, 75px); the two-column read with a 460px rail (380px under 1180, stacked under 1024); the 40px round tool buttons; and the slim reading bar. The cover runs full-bleed and square-cornered on a phone held upright. Departures, each for a reason: the title is Cormorant, as every display line on this site is, set larger to match MM Carz's visual size; the article column is capped at 46rem because a 1,100px line is a chore to read; and the tint is fixed navy-to-paper rather than sampled from each picture, since the build never reads pixels. ============================================================= */ .art { --art-pad: clamp(24px, 4vw, 75px); --bar-h: 52px; padding-bottom: clamp(60px, 9vw, 120px); } .art-wrap { max-width: 2100px; margin: 0 auto; padding: 0 var(--art-pad); } /* The band runs up UNDER the transparent header: pulled up by the header's height and padded back down by the same, as MM Carz does. The tint is a masked layer that fades to TRANSPARENT at its foot, not a background that ends on the paper colour. The cursor glow (motion.js, .field-glow) sits behind
; an opaque band hid the glow above its bottom edge and let it show below, so moving the mouse over the tools drew a hard line across the page just above them. Faded out, there is no edge. */ .art-hero { position: relative; isolation: isolate; margin-top: calc(-1 * var(--bar-h)); padding: calc(var(--bar-h) + clamp(24px, 3vw, 44px)) 0 clamp(20px, 2.4vw, 32px); } .art-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(130% 160% at 12% -10%, color-mix(in srgb, var(--navy) 16%, #fff) 0%, color-mix(in srgb, var(--spark) 8%, #fff) 52%, color-mix(in srgb, var(--navy) 3%, #fff) 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); } .art-hero-in { display: grid; grid-template-columns: minmax(0, 1024px) minmax(320px, 1fr); gap: clamp(40px, 4.5vw, 88px); align-items: center; } .art-hero-in:not(:has(.art-cover)) { grid-template-columns: minmax(0, 760px); } .art-cover { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 1.9 / 1; background: var(--hair); box-shadow: 0 24px 60px -30px rgba(12, 22, 44, .44); } .art-cover img { display: block; width: 100%; height: 100%; object-fit: cover; } .art-cat { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--navy); margin-bottom: 16px; } .art-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 2.8vw, 2.6rem); line-height: 1.12; letter-spacing: -.005em; margin: 0 0 16px; } .art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-3); margin: 0; } .art-meta span[aria-hidden] { opacity: .5; } /* --- reader tools --- */ .art-actions { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 16px 14px; } .art-act { position: relative; height: 40px; min-width: 40px; padding: 0 11px; border: 0; border-radius: 20px; background: none; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 15px/1 var(--sans); transition: background var(--fast) var(--ease), color var(--fast) var(--ease); } .art-act[hidden] { display: none; } .art-act:hover { background: var(--bg-2); color: var(--ink); } .art-act svg { width: 20px; height: 20px; } /* The five drawings are not the same size inside their 24-unit box, so their tops and bottoms sat at different heights. Measured on the painted pixels (4x): the bubble and headphones were 2-3px shorter than the heart and the arrow, and the digits sat ~0.6px above the icons. Scaled and nudged so that tops, bottoms and centres line up. */ .art-act[data-act="comment"] svg { transform: translateY(-.3px) scale(1.17); } .art-act[data-act="listen"] svg { transform: scale(1.1); } .art-act-text { gap: 0; } /* "Aa" is one run of text so the two letters share a baseline (they used to be two flex items, each centred on its own line box). */ .art-aa { font-size: 19px; line-height: 1; position: relative; top: .5px; } .art-count { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; position: relative; top: 1px; } .art-count[hidden] { display: none; } .art-act[data-act="like"][aria-pressed="true"] { color: #B03A48; } .art-act[data-act="like"][aria-pressed="true"] svg { fill: currentColor; } .art-aa small { font-size: .72em; } .art-act[aria-pressed="true"] { color: var(--spark); } .art-act.is-copied::after, .art-rb-share.is-copied::after { content: "Link copied"; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); font: 600 10px/1 var(--sans); color: #fff; background: var(--ink); padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 6; } .art-rb-share.is-copied::after { bottom: auto; top: calc(100% + 4px); left: auto; right: 0; transform: none; } /* --- the read: article + rail --- */ .art-cols { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: clamp(48px, 8vw, 145px); align-items: start; padding-top: clamp(34px, 4vw, 56px); } .art-main { min-width: 0; max-width: 1100px; } @media (min-width: 1600px) { .art-main { max-width: none; } } .art-lede { font-size: 1.12rem; line-height: 1.7; color: var(--ink-2); margin: 0 0 1.4em; } .art-body { font-size: 15.5px; line-height: 1.74; color: var(--ink); } .art-body.is-lg { font-size: 17px; line-height: 1.76; } .art-body.is-xl { font-size: 19px; line-height: 1.8; } .art-body > p { margin: 0 0 1.3em; } .art-body h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.3vw, 1.9rem); line-height: 1.2; letter-spacing: -.005em; margin: 1.7em 0 .55em; } .art-body h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.2rem, 1.7vw, 1.4rem); margin: 1.5em 0 .5em; } .art-body ul, .art-body ol { margin: 0 0 1.35em; padding-left: 1.3em; } .art-body li { margin: 0 0 .5em; } .art-body a, .art-credit a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(12, 36, 84, .35); text-underline-offset: 3px; transition: text-decoration-color var(--fast) var(--ease); } .art-body a:hover, .art-credit a:hover { text-decoration-color: var(--navy); } .art-body blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--ink); font-family: var(--display); font-size: 1.3em; line-height: 1.45; } .art-body blockquote p { margin: 0; } .art-body strong { font-weight: 600; } .art-credit { margin: 2.2em 0 0; padding-top: 1.4em; border-top: 1px solid var(--hair); font-size: 13px; color: var(--ink-3); } /* the byline: a small "Written by" kicker (matches .art-more h2's label style), then two overlapping round faces and both names */ .art-author { margin: 2.4em 0 0; } .art-author-label { font: 600 12px/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink-3); margin: 0 0 10px; } .art-author-row { display: flex; align-items: center; gap: 12px; } .art-author-avs { display: flex; flex: none; } .art-author-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--bg-2); box-shadow: 0 0 0 2px var(--bg); } .art-author-av-co { margin-left: -16px; } .art-author-name { font: 600 15px/1.2 var(--sans); color: var(--ink); } .art-foot { margin: 1.6em 0 0; } .art-back { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink); } .art-back:hover { color: var(--spark); } .art-back svg { width: 22px; height: 13px; } /* --- the rail: comments, subscribe, more research (MM Carz's order) --- */ .art-rail { display: flex; flex-direction: column; gap: clamp(30px, 3vw, 44px); min-width: 0; } .art-rail[hidden], .art-comments[hidden] { display: none; } /* These are
s, and every section on the site gets up to 118px of padding top and bottom; in a rail that is a hole, not breathing room. */ .art-comments, .art-more { padding: 0; } /* comments — .mm-article__comments and friends, ported */ .art-chead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .art-ctitle { display: inline-flex; align-items: center; gap: 9px; font: 600 1.15rem/1.2 var(--sans); letter-spacing: -.01em; margin: 0; color: var(--ink); } .art-ctitle svg { width: 19px; height: 19px; color: var(--ink-3); } .art-cn { font-size: 13px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; } .art-cn[hidden] { display: none; } .art-csort { position: relative; } .art-csort-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 4px; font: 12.5px var(--sans); color: var(--ink-3); cursor: pointer; } .art-csort-btn:hover { color: var(--ink); } .art-csort-btn svg { width: 15px; height: 15px; } .art-csort-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 150px; padding: 6px; background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; box-shadow: 0 12px 30px -10px rgba(12, 22, 44, .28); } .art-csort-menu[hidden] { display: none; } .art-csort-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 11px; border-radius: 7px; font: 13px var(--sans); color: var(--ink); cursor: pointer; } .art-csort-menu button:hover { background: var(--bg-2); } .art-csort-menu button.is-active { color: var(--navy); font-weight: 600; } .art-cform { margin-bottom: 26px; } .art-composer { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; } .art-cav-wrap { position: relative; width: 40px; height: 40px; } .art-cav-btn { position: relative; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; } .art-cav-circle { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--navy) 14%, #fff); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; font: 700 16px/1 var(--sans); } .art-cav-edit { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg); } .art-cav-edit svg { width: 9px; height: 9px; } .art-avpop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 236px; padding: 12px; background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; box-shadow: 0 16px 38px -12px rgba(12, 22, 44, .32); } .art-avpop[hidden] { display: none; } .art-avpop-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); margin: 0 0 8px; } .art-avpop-label + .art-avpop-row { margin-bottom: 12px; } .art-avpop-row { display: flex; flex-wrap: wrap; gap: 6px; } .art-avpick { width: 32px; height: 32px; border: 1px solid var(--hair); border-radius: 50%; background: var(--bg-2); font-size: 16px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: transform .12s ease; } .art-avpick:hover { transform: scale(1.08); } .art-avpick.is-active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); } .art-avpick [data-avpick-letter] { font: 700 14px/1 var(--sans); color: var(--ink-3); } .art-avcolor { width: 26px; height: 26px; border: 0; border-radius: 50%; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: transform .12s ease; } .art-avcolor:hover { transform: scale(1.12); } .art-avcolor.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); } .art-cfield { min-width: 0; display: flex; flex-direction: column; gap: 12px; } .art-cinput { position: relative; } .art-cbody { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--hair-2); border-radius: 0; background: none; padding: 8px 34px 8px 2px; font: 16px/1.55 var(--sans); color: var(--ink); resize: none; min-height: 24px; overflow: hidden; } .art-cform.is-active .art-cbody { padding: 10px 34px 10px 2px; min-height: 48px; } .art-cbody:focus { outline: none; border-bottom-color: var(--ink); } /* The site-wide `.experience-site :focus-visible` ring (blue box, 5px out) is the same specificity as the rules above and loads after them, so it won. These fields say "focused" with their underline going dark instead. */ .art .art-cbody:focus-visible, .art .art-cextra input:focus-visible, .art .art-sub input[type="email"]:focus-visible { outline: none; } .art-cemoji { position: absolute; right: 2px; bottom: 4px; width: 26px; height: 26px; border: 0; background: none; border-radius: 50%; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .art-cemoji:hover { background: var(--bg-2); color: var(--ink); } .art-cemoji svg { width: 18px; height: 18px; } .art-emojipop { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; box-shadow: 0 12px 30px -10px rgba(12, 22, 44, .28); } .art-emojipop[hidden] { display: none; } .art-emojiitem { width: 30px; height: 30px; border: 0; background: none; border-radius: 8px; font-size: 17px; line-height: 1; cursor: pointer; } .art-emojiitem:hover { background: var(--bg-2); } .art-cextra { display: none; gap: 10px; } .art-cform.is-active .art-cextra { display: flex; } .art-cextra input { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--hair-2); background: none; padding: 7px 2px; font: 16px var(--sans); color: var(--ink); } .art-cextra input:focus { outline: none; border-bottom-color: var(--ink); } .art-cform-foot { display: none; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; } .art-cform.is-active .art-cform-foot { display: flex; } .art-cstatus { margin-right: auto; font-size: 12px; } .art-cstatus.is-ok { color: #2F7D6B; } .art-cstatus.is-err { color: #B03A48; } .art-cstatus[hidden] { display: none; } .art-ccancel { font: 600 12.5px var(--sans); color: var(--ink-3); background: none; border: 0; padding: 10px 12px; cursor: pointer; } .art-ccancel:hover { color: var(--ink); } .art-cbtn, .art-subbtn { font: 600 11px/1 var(--sans); text-transform: uppercase; letter-spacing: .14em; color: #fff; background: var(--navy); border: 0; border-radius: 8px; padding: 11px 20px; cursor: pointer; transition: opacity .2s ease; } .art-cbtn:hover, .art-subbtn:hover { opacity: .88; } .art-cbtn:disabled { opacity: .5; cursor: default; } .art-cempty { font-size: 13.5px; color: var(--ink-3); font-style: italic; margin: 0; } .art-clist { display: flex; flex-direction: column; gap: 20px; } .art-citem { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; } .art-cav { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-2); color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; font: 700 14px/1 var(--sans); } .art-cmain { min-width: 0; } .art-cmeta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; } .art-cauthor { font-size: 13.5px; font-weight: 600; color: var(--ink); } .art-ctime { font-size: 11.5px; color: var(--ink-3); } .art-ctext { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0; overflow-wrap: break-word; white-space: pre-line; overflow: clip; } .art-citem { overflow: clip; } .art-creport { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--ink-3); text-decoration: none; opacity: 0; transition: opacity var(--fast) var(--ease); } .art-citem:hover .art-creport, .art-creport:focus-visible { opacity: 1; } .art-creport:hover { color: var(--ink); text-decoration: underline; } @media (hover: none) { .art-creport { opacity: 1; } } /* subscribe — MM Carz's plain block: no card, a rule above it, an underlined field and a full-width button */ .art-sub { border-top: 1px solid var(--hair); padding: clamp(24px, 3vw, 32px) 0 0; } .art-sub h2 { font: 600 15px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 4px; } .art-sub p { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 0 0 14px; } .art-sub .field { display: block; } .art-sub .field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .art-sub input[type="email"] { width: 100%; border: 0; border-bottom: 1px solid var(--hair-2); background: none; padding: 8px 2px; font: 16px var(--sans); color: var(--ink); } .art-sub input[type="email"]:focus { outline: none; border-bottom-color: var(--ink); } /* Tight and left, not the full-width bar it used to be: the field above it already spans the rail, so a full-bleed button under it read as a stretch. The form is plain block flow, so a button with no explicit width just sizes to its label and sits at the left edge on its own. */ .art-subbtn { margin-top: 14px; width: auto; padding: 11px 26px; } .art-sub .form-msg { font-size: 12.5px; margin: 12px 0 0; } .art-sub .form-msg:empty { display: none; } /* more research — thumb, title, views and age */ .art-more h2 { font: 600 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); margin: 0 0 14px; } .art-more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .art-more a { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 14px; align-items: start; } .art-more-th { display: block; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: var(--hair); } .art-more-th img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); } .art-more a:hover .art-more-th img { transform: scale(1.05); } .art-more-tx { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .art-more-tx b { font-weight: 600; font-size: 13.5px; line-height: 1.32; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .art-more a:hover .art-more-tx b { color: var(--navy); } .art-more-tx > span { font-size: 12px; color: var(--ink-3); } .art-more-tx [data-rviews][hidden] { display: none; } /* topic pills over the list (MM Carz's "More from" bar): they scroll across, and a chevron shows on whichever side has more to reach */ .art-rcats { position: relative; margin: 0 0 16px; } .art-rcats[hidden] { display: none; } .art-rcats-track { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; } .art-rcats-track::-webkit-scrollbar { display: none; } .art-pill { flex: 0 0 auto; white-space: nowrap; cursor: pointer; font: 500 12px/1 var(--sans); color: var(--ink); background: var(--bg-2); border: 1px solid transparent; border-radius: 999px; padding: 8px 14px; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); } .art-pill:hover { background: var(--hair); } .art-pill.is-active { background: var(--ink); color: #fff; } .art .art-pill:focus-visible { outline-offset: 2px; } .art-rcats-nav { position: absolute; top: 0; z-index: 2; width: 40px; height: 100%; border: 0; padding: 0 2px; cursor: pointer; color: var(--ink); display: inline-flex; align-items: center; } .art-rcats-nav[hidden] { display: none; } .art-rcats-nav svg { width: 18px; height: 18px; } .art-rcats-prev { left: 0; justify-content: flex-start; background: linear-gradient(90deg, var(--bg) 42%, transparent); } .art-rcats-next { right: 0; justify-content: flex-end; background: linear-gradient(90deg, transparent, var(--bg) 42%); } /* --- the reading bar: takes the header's place while you read down --- */ .art-readbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: rgba(250, 250, 252, .9); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--hair); transform: translateY(-101%); transition: transform 300ms var(--ease); } .art-readbar.is-shown { transform: none; } .art-rb-in { height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 0 clamp(16px, 2.4vw, 30px); } .art-rb-mark { justify-self: start; display: inline-flex; align-items: center; gap: 8px; } .art-rb-mark img { mix-blend-mode: multiply; } .art-rb-mark b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; } .art-rb-title { max-width: min(52ch, 42vw); font-size: 14px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .art-rb-shares { justify-self: end; display: flex; align-items: center; gap: 2px; } .art-rb-share { position: relative; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); } .art-rb-share[hidden] { display: none; } .art-rb-share:hover { background: var(--bg-2); color: var(--ink); } .art-rb-share svg { width: 15px; height: 15px; } .art-rb-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--spark); transform: scaleX(0); transform-origin: left; } @media (max-width: 1180px) { .art-cols { grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(40px, 5vw, 80px); } } @media (max-width: 1024px) { .art-cols { grid-template-columns: 1fr; gap: clamp(44px, 6vw, 64px); } } @media (max-width: 900px) { .art-hero-in { grid-template-columns: 1fr; gap: 22px; } } /* The site header is two rows on phones (see .bar), 97px tall. */ @media (max-width: 760px) { .art { --bar-h: 97px; } } @media (max-width: 680px) { .art-rb-title { max-width: 100%; font-size: 12.5px; } .art-rb-in { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 0 6px 0 12px; } .art-rb-mark b { display: none; } } /* A phone held upright: the cover runs full-bleed and square-cornered, at the picture's own shape, and the gutters tighten to 20px. */ @media (orientation: portrait) and (max-width: 599px) { .art { --art-pad: 20px; } .art-cover { margin: 0 -20px; border-radius: 0; aspect-ratio: auto; box-shadow: none; } .art-cover img { height: auto; } .art-cols { padding-top: 12px; } .art-more a { grid-template-columns: 120px minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .art-readbar { transition: none; } .art-more-th img { transition: none; } } .post a:not(.btn) { color: var(--bronze); border-bottom: 1px solid rgba(12, 36, 84, .32); transition: border-color var(--fast) var(--ease); } .post a:not(.btn):hover { border-bottom-color: var(--bronze); } .post blockquote { margin: 1.8em 0; padding-left: 20px; border-left: 2px solid var(--bronze); color: var(--ink-2); font-style: italic; } .post pre { overflow-x: auto; background: var(--bg-2); border: 1px solid var(--hair); border-radius: var(--r); padding: 16px 18px; font-size: .85rem; line-height: 1.6; } .post code { font-family: var(--mono); font-size: .89em; } .post :not(pre) > code { background: var(--bg-2); padding: .13em .38em; border-radius: 3px; } /* ============================================================= Forms ============================================================= */ .formbox { max-width: var(--measure); margin: clamp(48px, 7vw, 88px) auto 0; padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--hair); } .formbox h2 { font-size: 1.6rem; margin-bottom: 8px; } .formbox p.sub { color: var(--ink-2); margin-bottom: 20px; font-size: .95rem; } /* Rules, not boxes. The label is the placeholder, so each field is one line of type over one hairline — the MM Carz contact treatment. The visible label is gone but an aria-label is on every input, because a placeholder disappears the moment you type and a field a screen reader cannot name is not a field. No border-radius: a rounded box is exactly what this is not. */ .field { display: block; margin-bottom: 18px; } .field span { display: block; font-size: .78rem; letter-spacing: var(--ls); color: var(--ink-3); margin-bottom: 6px; } .field input, .field textarea { width: 100%; font: inherit; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; padding: 10px 2px; transition: border-color var(--fast) var(--ease); } .field textarea { resize: vertical; min-height: 92px; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; } .field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); } /* The rule is the only affordance the field has, so it has to survive an invalid value being pointed at. */ .field input:user-invalid, .field textarea:user-invalid { border-bottom-color: #A3242B; } .row { display: flex; gap: 14px; flex-wrap: wrap; } .row .field { flex: 1 1 210px; } /* ============================================================= Common Questions The MM Carz homepage FAQ: a native
accordion in two columns, hairline-divided, chevron turning on open. Native
rather than a hand-rolled panel because it opens with no JS, is reachable by the browser's own find-in-page (a closed custom accordion hides its text from Ctrl-F), and is keyboard- operable for free. ============================================================= */ .faq-head { text-align: center; max-width: 760px; margin: 0 auto clamp(34px, 5vw, 60px); } .faq-eyebrow { display: block; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--ink-3); margin-bottom: clamp(12px, 1.8vw, 18px); } .faq-head h2 { margin: 0; } .faq-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 88px); align-items: start; } /* The rule belongs to each column, not to the list: the two columns end at different heights once anything is open, and one border across the top of a grid that no longer has aligned rows reads as a stray line. */ .faq-col { border-top: 1px solid var(--hair); } .faq-item { border-bottom: 1px solid var(--hair); } .faq-q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: clamp(18px, 3vw, 36px); padding: clamp(18px, 2.4vw, 26px) 0; font-size: 1rem; font-weight: 500; color: var(--ink); transition: opacity var(--fast) var(--ease); } /* Safari still paints its own triangle without this, and it sits outside the flex row rather than in it. */ .faq-q::-webkit-details-marker { display: none; } .faq-q::marker { content: ""; } .faq-q:hover { opacity: .62; } /* :focus-visible, not :focus-within — a mouse click focuses the too, and that used to draw the same ring as a keyboard tab (owner, 2026-09-28: "remove the blue border once clicked on a common question"). Keyboard users still get it; a click no longer does. */ .faq-q:focus-visible { outline: 2px solid var(--spark); outline-offset: 3px; } /* Chevron drawn from two borders rather than shipped as an icon: one element, no request, and it turns rather than swapping. */ .faq-ic { position: relative; flex: 0 0 15px; width: 15px; height: 15px; } .faq-ic::before { content: ""; position: absolute; left: 50%; top: 42%; width: 8px; height: 8px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: translate(-50%, -50%) rotate(45deg); transition: transform var(--mid) var(--ease), top var(--mid) var(--ease); } .faq-item[open] .faq-ic::before { top: 58%; transform: translate(-50%, -50%) rotate(-135deg); } .faq-a { color: var(--ink-2); padding: 0 0 clamp(20px, 2.8vw, 28px); max-width: 62ch; } .faq-a p { margin: 0; font-size: .95rem; line-height: 1.72; } /* Seventy-four language names in a row of body copy reads as a wall. Set a size down and let it breathe so it scans as a list rather than a sentence somebody has to finish. */ .faq-langs { display: block; margin: .5em 0; font-size: .89rem; color: var(--ink-3); } @media (max-width: 820px) { .faq-list { grid-template-columns: 1fr; column-gap: 0; } } @media (prefers-reduced-motion: reduce) { .faq-ic::before { transition: none; } } /* ============================================================= Book a call — two columns, calendar, time picker, segmented pills ============================================================= */ /* [hidden] is only a UA rule of `display: none`, and ANY class rule that sets display beats it on specificity. These set display (or may), so hiding them by attribute silently does nothing unless it is said again here. This is not cosmetic: the booking column ships hidden and is revealed by book.js, and the platform picker has to stay gone during a phone call. */ .bk-col[hidden], .bk-seg[hidden], .field[hidden] { display: none; } /* Wider than the --measure every other form box keeps: this one holds two columns with an "or" between them. The section's wrap is let out a little for it, so the gap can grow without taking the room out of the calendar. The heading and its line centre over both. */ #contact > .wrap { max-width: 1240px; } .bk-box { max-width: 1120px; } .bk-head { text-align: center; max-width: 40rem; margin: 0 auto clamp(30px, 4.5vw, 52px); } /* p.sub, not .sub: .formbox p.sub carries an element and outranks a bare class. */ .bk-head p.sub { margin-bottom: 0; } /* Pick a time | or | Send a message, one row. minmax(0, 1fr) rather than 1fr so the calendar's min-content cannot push its column past half. --bk-gap sits either side of the "or"; --bk-rule is where .bk-col-head draws its hairline (its line box plus its padding), so the divider can carry that line across. */ .bk-cols { --bk-gap: clamp(28px, 3.6vw, 60px); --bk-rule: calc(.9rem * 1.2 + 14px); /* = .bk-col-head font-size x line-height + padding-bottom */ display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--bk-gap); row-gap: 0; align-items: start; } /* The "or": a badge sitting on the column heads' hairline, carrying that line across the gap, with a thread down the middle that fades out well before the forms end. Decorative and aria-hidden, since each form already has its own name. */ .bk-or { --or: 40px; position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; width: var(--or); padding-top: calc(var(--bk-rule) + .5px - var(--or) / 2); } /* The line is cut in the middle (a transparent stretch either side of the word) rather than hidden behind a patch of page colour, so it also works on the tinted section background. 24px = half the 40px badge plus a little air. */ .bk-or::before { content: ""; position: absolute; top: var(--bk-rule); left: calc(-1 * var(--bk-gap)); right: calc(-1 * var(--bk-gap)); height: 1px; background: linear-gradient(to right, var(--hair) calc(50% - 24px), transparent calc(50% - 24px), transparent calc(50% + 24px), var(--hair) calc(50% + 24px)); } .bk-or::after { content: ""; flex: 1 1 auto; width: 1px; margin-top: 12px; background: linear-gradient(to bottom, var(--hair-2), transparent 75%); } /* No ring and no patch (the owner took both off): just the word. The hairline running across the gap stops either side of it (see ::before) instead of striking through it. */ .bk-or span { position: relative; flex: 0 0 auto; width: var(--or); height: var(--or); display: grid; place-items: center; font: italic 400 1.35rem/1 var(--display); color: var(--ink-3); padding-bottom: 3px; /* optical: an italic lowercase "or" sits low in its box */ } /* No JS means no booking column: the message form alone, at the width one form reads at, rather than stretched across the room left for two — and nothing to say "or" to. */ .bk-cols:has(> .bk-col[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: var(--measure); margin-inline: auto; } .bk-cols:has(> .bk-col[hidden]) > .bk-or { display: none; } /* Stacked, the "or" turns on its side: a rule, the word, a rule. */ @media (max-width: 900px) { .bk-cols { grid-template-columns: minmax(0, 1fr); max-width: var(--measure); margin-inline: auto; } .bk-or { flex-direction: row; gap: 16px; width: auto; align-self: auto; padding: 0; margin: clamp(44px, 10vw, 64px) 0; } .bk-or::before { position: static; flex: 1 1 auto; background: var(--hair); } .bk-or::after { width: auto; height: 1px; margin: 0; background: var(--hair); } } /* Each column lays its insides out against its OWN width. Whether the calendar fits beside the time picker depends on the column, and the column is a different share of the window either side of 900px. */ .bk-col { container-type: inline-size; } /* The Common Questions eyebrow, ruled underneath the way its columns are. */ /* Sentence case at the owner's request, not the uppercase eyebrow it started as, so it is set a little larger and without the tracking capitals need. Its size, line-height and padding feed --bk-rule on .bk-cols: change them together. */ .bk-col-head { font: 500 .9rem/1.2 var(--sans); letter-spacing: .01em; color: var(--ink-2); text-align: center; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); } .bk-col > button[type="submit"] { display: flex; width: fit-content; margin: 6px auto 0; } .bk-col .form-msg { text-align: center; } .bk-lede { color: var(--ink-3); font-size: .88rem; line-height: 1.6; text-align: center; margin: 0 0 20px; } .bk-grid { display: grid; /* The time track never drops under 190px: below that "Choose a time" wraps inside the field. The calendar gives up the width instead, down to the 440px column where the two stack. */ grid-template-columns: minmax(0, 250px) minmax(190px, 1fr); gap: clamp(18px, 3vw, 34px); margin-bottom: 24px; } .bk-calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .bk-month { font-size: .9rem; letter-spacing: var(--ls); } .bk-nav { width: 28px; height: 28px; display: grid; place-items: center; background: none; border: 1px solid var(--hair); border-radius: 50%; color: var(--ink-2); font-size: 1rem; line-height: 1; cursor: pointer; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); } .bk-nav:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); } .bk-nav:disabled { opacity: .3; cursor: default; } .bk-dow, .bk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .bk-dow span { text-align: center; font-size: .68rem; letter-spacing: var(--ls); color: var(--ink-3); padding-bottom: 5px; } .bk-day { aspect-ratio: 1; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; font: inherit; font-size: .82rem; color: var(--ink); cursor: pointer; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); } .bk-day:hover:not(:disabled):not(.on) { background: var(--bg-2); } .bk-day:disabled { color: var(--ink-3); opacity: .32; cursor: default; } .bk-day.on { background: var(--navy); color: var(--on-ink); } .bk-times-head { font-size: .78rem; letter-spacing: var(--ls); color: var(--ink-3); margin: 0 0 10px; } /* The times are a real