/* ============================================================================= micro.css — the small movements ============================================================================= Hover and press feedback on the controls a reader actually touches: buttons, segmented chips, menu rows, cards, footer links. Nothing decorative, nothing that moves on its own, nothing that moves anything a reader is trying to read. ----------------------------------------------------------------------------- THREE RULES IT KEEPS, AND THE THIRD IS THE ONE THAT MATTERS. 1. IT ONLY MOVES WHAT YOU ARE POINTING AT. A page where things drift, pulse or breathe unprompted is a page that is harder to read, and this estate is mostly text somebody is reading. Every rule below is behind :hover, :focus or :active — the animation IS the acknowledgement, and there is nothing to acknowledge until you arrive. 2. IT IS SMALL. One or two pixels, a hundred and sixty milliseconds, on the house easing curve. The test is that you should notice a control feels alive without being able to say what moved. Anything bigger reads as a website showing off, which is a different product from this one. 3. IT NEVER RUNS ON A POINTER THAT CANNOT HOVER, AND NEVER AGAINST A READER WHO HAS ASKED FOR STILLNESS. Two gates, and both are absolute: @media (hover: hover) — a phone "hovers" on tap, so without this the whole sheet fires on touch and every button sticks in its hover state after the finger leaves. prefers-reduced-motion: reduce — a system-level accessibility request. Vestibular disorders are real and this is not a preference to weigh against a nice effect. It wins outright, over the admin switch too. ----------------------------------------------------------------------------- THE SWITCH. Everything is scoped to html:not([data-micro="off"]) — ABSENCE MEANS ON, and that is deliberate. Six of the estate's pages carry this sheet but not site.js, so nothing ever sets the attribute on them; scoped to ="on" they would have been the only pages in the building where the buttons sat still, for a reason no reader could see. Off is the state that has to be asserted, because off is the state somebody chose. site.js sets it from the reader's own choice first and the site default second. Off, not one rule below matches and the page is exactly what it was — this sheet adds no layout, no colour and no geometry of its own, only movement, so removing the movement removes the whole of it. TRANSFORMS AND OPACITY ONLY. Both are compositor properties: they do not reflow, do not repaint, and cost nothing on a phone. A hover that animated width or padding would relayout the page under the pointer. ============================================================================= */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { html:not([data-micro="off"]) { /* ------------------------------------------------------------ buttons The bubble: a button lifts a pixel and settles a little bigger under the pointer, then presses back down flat. site.css already lifts .btn by 1px; this adds the scale and, more importantly, the PRESS — a control that moves on hover but not on click feels broken in a way readers cannot name. */ .btn, button.btn, a.btn { transition: transform .16s var(--ease, ease), background-color .16s var(--ease, ease), border-color .16s var(--ease, ease), color .16s var(--ease, ease), box-shadow .16s var(--ease, ease); } .btn:hover { transform: translateY(-1px) scale(1.018); } .btn:active { transform: translateY(0) scale(.985); transition-duration: .07s; } /* --------------------------------------------------- segmented controls A segment shifts rather than bubbles: they sit in a row, and a scaling segment overlaps its neighbours. The one already chosen does not move at all — it is not offering itself, it is reporting a state. */ .seg__b { transition: transform .16s var(--ease, ease), background-color .16s var(--ease, ease), border-color .16s var(--ease, ease), color .16s var(--ease, ease); } .seg__b:hover:not([aria-pressed="true"]):not([aria-selected="true"]) { transform: translateY(-1px); } .seg__b:active { transform: translateY(.5px); transition-duration: .07s; } /* ------------------------------------------------------------- chips */ .chip, .rn-chip, .s-chip, .ss__scope { transition: transform .16s var(--ease, ease), border-color .16s var(--ease, ease), color .16s var(--ease, ease), background-color .16s var(--ease, ease); } .chip:hover, .rn-chip:hover, .s-chip:hover, .ss__scope:hover { transform: translateY(-1px); } .chip:active, .rn-chip:active, .s-chip:active, .ss__scope:active { transform: translateY(.5px); transition-duration: .07s; } /* -------------------------------------------------------------- cards A card is a large target, so it gets the smallest movement of anything here: scaling a 400-pixel card by even 1% is a visible jump, and a card full of text that grows under the pointer is text that moves while it is being read. It lifts, and its shadow deepens to say the lift is real. */ .room, .card, .rn-sc, .ss__ans, .tf-card, .bk-card { transition: transform .18s var(--ease, ease), border-color .18s var(--ease, ease), box-shadow .18s var(--ease, ease); } .room:hover, .card:hover, .rn-sc:hover, .ss__ans:hover, .tf-card:hover, .bk-card:hover { transform: translateY(-2px); } .room:active, .card:active, .rn-sc:active, .ss__ans:active, .tf-card:active, .bk-card:active { transform: translateY(-1px); transition-duration: .08s; } /* ---------------------------------------------------------- menu rows Six thousand nine hundred of these across the estate, in a scrolling drawer. They shift SIDEWAYS, not up: a vertical lift in a dense vertical list reads as the list re-flowing. The arrow that already lives at the right of each row travels with it. */ .menu__row { transition: transform .15s var(--ease, ease), background-color .15s var(--ease, ease), color .15s var(--ease, ease); } .menu__row:hover { transform: translateX(2px); } .menu__row:active { transform: translateX(1px); transition-duration: .07s; } /* ------------------------------------------------------ footer + text An underline that grows from the left rather than appearing all at once. This is the only rule here a reader is likely to consciously notice, and it is on the least important links on the page, which is the right way round. */ .foot__l a, .foot a:not(.btn) { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size .22s var(--ease, ease), color .16s var(--ease, ease); } .foot__l a:hover, .foot a:not(.btn):hover { background-size: 100% 1px; } /* --------------------------------------------------------------- nav The navbar's own links, which are the most-used controls on the estate and therefore get the least movement of all: a hairline, not a shift. */ .nav__links a { transition: color .16s var(--ease, ease), opacity .16s var(--ease, ease); } .nav__links a:active { opacity: .7; } /* ---------------------------------------------------- focus, always Keyboard focus gets the SAME acknowledgement as the pointer. A set of hover effects that a keyboard reader never sees is a set of effects built for half the audience. */ .btn:focus-visible { transform: translateY(-1px) scale(1.018); } .room:focus-visible, .card:focus-visible, .rn-sc:focus-visible, .ss__ans:focus-visible, .tf-card:focus-visible { transform: translateY(-2px); } .menu__row:focus-visible { transform: translateX(2px); } } }