/* ============================================================================= Faragiri, main stylesheet. Structure is engraved hairlines and circles on a night ground. One field from the masthead to the last line of the footer: no band of paper anywhere, and therefore no seam anywhere. Colour is wayfinding and nothing else. ========================================================================== */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 24px)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ /* The ground is painted on the body, not on a section, so it runs behind the header, behind the footer and behind the overscroll bounce on iOS. A scene that stops at a section boundary is a picture of a scene. */ background: radial-gradient(120% 62% at 50% -8%, var(--wash-1) 0%, transparent 62%), radial-gradient(80% 44% at 92% 108%, var(--wash-2) 0%, transparent 64%), var(--paper); color:var(--ink); font-family:var(--f-text); font-size:calc(17px * var(--script-scale)); line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; min-height:100svh; } img,svg,video{display:block;max-width:100%;height:auto} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} a{color:inherit;text-decoration:none} ::selection{background:color-mix(in srgb, var(--p-ai) 42%, transparent);color:#fff} :focus-visible{outline:2.5px solid var(--p-ai);outline-offset:3px;border-radius:3px} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:28px} @media (max-width:760px){.wrap{padding-inline:20px}} .skip-link{position:absolute;inset-inline-start:16px;top:-60px;z-index:200; background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:4px} .skip-link:focus{top:12px} /* ---------- headings ---------- */ /* The wdth axis went with Bricolage Grotesque. Faragiri Sans has one axis -- weight -- so the density the old headings got from condensing to 82..92% now comes from weight and from the tracking below it. Leaving the dead font-variation-settings in place would have been harmless and misleading: a rule that looks like it is doing something and is not. */ h1,h2,h3,h4{ font-family:var(--f-display);font-weight:var(--w-name);line-height:1.06; text-wrap:balance;letter-spacing:-.022em; } h1{font-size:clamp(38px,5.6vw,64px);font-weight:var(--w-display);letter-spacing:-.038em} h2{font-size:clamp(27px,3.6vw,40px);font-weight:var(--w-head)} h3{font-size:21px;letter-spacing:-.015em} p+p{margin-top:14px} .eyebrow{ font-family:var(--f-mono);font-size:11.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--ink-3);display:block; } .lede{font-size:calc(18px * var(--script-scale));color:var(--ink-2);max-width:62ch} /* ---------- masthead ---------- */ /* THE BAR IS THE ORRERY, FOLDED FLAT. The scene below this bar is a set of dark bodies with lit limbs hanging in a washed sky. The bar used to be none of that: flat grey mono labels and eight flat-fill dots, which is the chrome of a documentation site sitting on top of an observatory. Nothing was broken -- it simply did not belong to the page it was introducing. Everything below now speaks the scene's own language: the dots are bodies drawn with the same three ramps the orbs use, the bar is lit by the world you are standing in, and hovering a pillar swings that light onto its hue. Still transparent over the sky, with only a wash and a hairline to hold it. A solid bar here is the old seam again, six pixels tall and at the top of every page. STILL NO backdrop-filter: a sticky blurred bar re-filters everything behind it on every scrolled frame, which is the single most expensive thing a page like this can do -- and behind this one there is a near black sky and a scatter of one pixel stars, so it was paying that on every phone in order to blur almost nothing. Gradients rasterise once and then ride the compositor. The masthead has two postures. At the top of a page it is at ease: full height, the wordmark spelled out. Once the page has moved it exhales -- .is-away, set by a sentinel observer in atlas.js -- and the bar narrows, the name folds into the mark, and the wash deepens so eleven pixels of type never fight a paragraph scrolling under them. The state is a class, so with scripts off the bar simply stays at ease, which is a posture and not a fault. */ /* The bar's own light. Registered rather than declared so it can be TRANSITIONED -- a plain custom property holding a colour snaps, and the whole point of this token is that the light travels when you move along the rail. Same device atlas.css already uses for --lit-c. */ @property --mast-lit{ syntax:""; inherits:true; initial-value:#E1E1E1 } .mast{ position:sticky;top:0;z-index:60; /* Seeded from the page's own world; the :has() rules further down hand it to whichever pillar the pointer is over. */ --mast-lit:var(--world,var(--d-core)); background: /* the world's light, spilling down from the top edge */ radial-gradient(62% 300% at 50% -8%, color-mix(in srgb, var(--mast-lit) 15%, transparent) 0%, transparent 68%), linear-gradient(180deg, color-mix(in srgb, var(--paper) 96%, transparent), color-mix(in srgb, var(--paper) 82%, transparent) 62%, color-mix(in srgb, var(--paper) 40%, transparent) 88%, transparent); } .mast.is-away{ background: radial-gradient(58% 260% at 50% -8%, color-mix(in srgb, var(--mast-lit) 13%, transparent) 0%, transparent 66%), linear-gradient(180deg, var(--paper) 0%, var(--paper) 58%, color-mix(in srgb, var(--paper) 90%, transparent) 80%, color-mix(in srgb, var(--paper) 46%, transparent) 93%, transparent); } /* The horizon. A hairline, but not a grey one: it carries a whisper of the same light, strongest under the middle of the bar and gone at both ends. It stays quiet on purpose -- the reading wire below it is the element that is allowed to be bright, and a loud horizon would leave the wire nothing to say. */ .mast::after{ content:"";position:absolute;inset-inline:0;bottom:0;height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--mast-lit) 22%, rgb(255 255 255 / .11)) 24%, color-mix(in srgb, var(--mast-lit) 34%, rgb(255 255 255 / .13)) 50%, color-mix(in srgb, var(--mast-lit) 22%, rgb(255 255 255 / .11)) 76%, transparent); } /* Moving along the rail swings the bar's light onto that world -- by pointer or by keyboard, because a reader tabbing the rail is walking the same path and should get the same answer. The eight ids are hardcoded here for the same reason the shelf selectors and the mark hardcode them: they are this site's architectural constants, and a ninth pillar is a deliberate edit everywhere, not a silent one. */ .mast:has(.fg-nav__item[data-world="language"]:is(:hover,:focus-visible)) {--mast-lit:var(--d-language)} .mast:has(.fg-nav__item[data-world="design"]:is(:hover,:focus-visible)) {--mast-lit:var(--d-design)} .mast:has(.fg-nav__item[data-world="media"]:is(:hover,:focus-visible)) {--mast-lit:var(--d-media)} .mast:has(.fg-nav__item[data-world="code"]:is(:hover,:focus-visible)) {--mast-lit:var(--d-code)} .mast:has(.fg-nav__item[data-world="systems"]:is(:hover,:focus-visible)) {--mast-lit:var(--d-systems)} .mast:has(.fg-nav__item[data-world="ai"]:is(:hover,:focus-visible)) {--mast-lit:var(--d-ai)} .mast:has(.fg-nav__item[data-world="marketing"]:is(:hover,:focus-visible)) {--mast-lit:var(--d-marketing)} .mast:has(.fg-nav__item[data-world="business"]:is(:hover,:focus-visible)) {--mast-lit:var(--d-business)} /* WordPress pins its toolbar over the top of the viewport for a logged in reader; without this offset the sticky bar hides under it. */ body.admin-bar .mast{top:var(--wp-admin--admin-bar--height,32px)} /* The scroll sentinel the masthead watches. A real box -- display:none has no geometry and an observer watching one never fires. */ .mast__sentinel{position:absolute;top:0;inset-inline-start:0;width:1px;height:26px; opacity:0;pointer-events:none} /* The reading wire. The hairline under the masthead fills with the current world's own light as the page is read -- the travelling light of the orrery, applied to the document itself. Scroll driven, so it costs no listener and no script; a browser without scroll timelines keeps the plain hairline and loses an ornament, not a control. The fade at both ends is symmetric, so it needs no RTL flip. */ .mast__wire{display:none} @supports (animation-timeline: scroll()){ .mast__wire{ display:block;position:absolute;inset-inline:0;bottom:-1px;height:2px; /* Brightest at its leading edge. The gradient scales with the element, so under the scaleX animation the full-strength end always rides the wire's front: a comet's head at the reader's position, its tail the part of the page already read. Physical angle, so RTL flips it below with the transform-origin it already flips. */ background:linear-gradient(90deg, color-mix(in srgb, var(--world,var(--d-core)) 52%, transparent), var(--world,var(--d-core))); box-shadow:0 0 14px color-mix(in srgb, var(--world,var(--d-core)) 55%, transparent); --wire-fade:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:var(--wire-fade);-webkit-mask-image:var(--wire-fade); transform:scaleX(0);transform-origin:0 50%; animation:fg-wire linear both; animation-timeline:scroll(root); pointer-events:none;opacity:.9; } [dir="rtl"] .mast__wire{transform-origin:100% 50%; background:linear-gradient(-90deg, color-mix(in srgb, var(--world,var(--d-core)) 52%, transparent), var(--world,var(--d-core)))} } @keyframes fg-wire{to{transform:scaleX(1)}} .mast__in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:var(--head-h)} .mast__kit{display:flex;align-items:center;gap:8px;flex:0 0 auto} /* ---------- the wordmark ---------- */ /* The mark carries a halo now, in the bar's own light. It is the one place the travelling light lands on something that is not a pillar, which is the right place for it: the mark IS the whole set, so it wears whatever the set is currently showing you. */ .brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;position:relative} .brand svg{ overflow:visible; filter:drop-shadow(0 0 9px color-mix(in srgb, var(--mast-lit) 42%, transparent)); transition:filter .45s ease; } .brand:hover svg,.brand:focus-visible svg{ filter:drop-shadow(0 0 15px color-mix(in srgb, var(--mast-lit) 68%, transparent)); } .brand__name{font-family:var(--f-display);font-weight:var(--w-head);font-size:20.5px; letter-spacing:-.03em;color:var(--ink);display:block;white-space:nowrap;overflow:hidden} /* On hover the mark turns: the satellites orbit, which is what satellites do. The whole svg rotates -- the open ring travelling with its worlds reads as the orrery running, and needs no new markup. The rotation is on a wrapper property so it composes with the drop-shadow above rather than replacing it. */ @media (prefers-reduced-motion:no-preference){ .mast{transition:background .3s ease, --mast-lit .5s cubic-bezier(.22,.7,.28,1)} .brand:hover svg,.brand:focus-visible svg{animation:fg-orbit 9s linear infinite} @keyframes fg-orbit{to{rotate:1turn}} } /* The exhale, on pointer screens only: a phone's bar holds its height so the menu sheet always knows where the bar ends. */ @media (min-width:761px){ .brand__name{max-inline-size:150px} .mast.is-away .mast__in{height:54px} .mast.is-away .brand__name{max-inline-size:0;opacity:0} } @media (prefers-reduced-motion:no-preference){ .mast__in{transition:height .32s ease} .brand__name{transition:max-inline-size .32s ease,opacity .22s ease} } /* ---------- the constellation dock ---------- */ /* Eight links, the same eight on every page, set in the masthead's own mono so the row reads as chrome rather than as content that happens to be at the top. And each word now unfolds: hover or focus opens that world's shelf, a full width slice of the same sky holding its blurb, its counts, and a real link to every topic written in this language. THE DOTS ARE BODIES, NOT DOTS. They were 6px of flat fill -- the pillar's hue with nothing done to it -- while the same eight worlds forty pixels below were spheres: a lit limb at the upper left, the hue across the middle, and the void eating the lower edge. Two drawings of one set, and the cheap one was the one on every page. The ramp below is the orb's ramp, at 8px. It costs the same as the flat fill did -- one gradient, rasterised once -- and it is the difference between a legend and a menu. The row scrolls rather than wraps, at every width. Eight short English words fit in a 1180px masthead, but this theme ships twenty four locales and "Marketing" is "Vermarktung" in one of them; a row that wraps would silently push the masthead to two rows on exactly the locales nobody is testing. Scrolling degrades; wrapping breaks the layout. */ .fg-nav{display:flex;align-items:stretch;align-self:stretch;min-width:0;flex:0 1 auto} .fg-nav__row{ list-style:none;margin:0;padding:0; display:flex;align-items:stretch;gap:0;min-width:0; overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none; overscroll-behavior-inline:contain; } /* The scrollbar is hidden, so a row that overflows would end in a word sliced down the middle with nothing saying it can be scrolled. The mask fades both edges out instead -- the one cue that survives having no scrollbar -- and it is symmetric, so it needs no RTL flip. The trick is that it only exists when there is something to scroll. The animation's timeline is the row's own inline scroll; on a row that fits, that timeline is inert, the animation never applies, and the eighth pillar keeps its last letter. This used to be an always-on trailing fade, which dimmed the end of "Business" on every desktop that had room for it -- a cue for a state the page was not in. A browser without scroll timelines simply never masks, which fails toward legibility. */ @supports (animation-timeline: scroll()){ .fg-nav__row{ animation:fg-railmask linear both; animation-timeline:scroll(self inline); } } @keyframes fg-railmask{ from,to{ mask-image:linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent); } } .fg-nav__row::-webkit-scrollbar{display:none} /* A masked element clips its own focus ring, so a keyboard user tabbing to the last pillar would see the outline sliced off. Drop the mask while focus is inside the row: the cue has done its job by then anyway. */ .fg-nav__row:focus-within{animation:none;mask-image:none;-webkit-mask-image:none} /* The item fills the masthead's whole height so the pointer never crosses dead ground between the word and its shelf -- a hover menu that closes in the gap on the way to itself is the oldest failure this pattern has. */ .fg-nav__li{display:flex;align-items:center;flex:0 0 auto} .fg-nav__item{ position:relative;display:flex;align-items:center;gap:8px;flex:0 0 auto; align-self:stretch;padding-inline:11px;border-radius:0; font-family:var(--f-mono);font-size:11.5px;letter-spacing:.11em; text-transform:uppercase;white-space:nowrap;color:var(--ink-2); transition:color .24s ease; } /* The body. Three ramps: a lit limb, the hue, and the void taking the far edge -- the orrery's own drawing, at 8px. */ .fg-nav__item::before{ content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%; background:radial-gradient(circle at 32% 28%, color-mix(in srgb, #fff 44%, var(--dot)) 0%, var(--dot) 46%, color-mix(in srgb, var(--dot) 26%, var(--void)) 88%); box-shadow:0 0 7px -1px color-mix(in srgb, var(--dot) 50%, transparent); opacity:.66; transition:opacity .24s ease, box-shadow .34s ease; } /* The wax is the one part of this that is movement rather than light, so it is the one part that asks first. A reader on reduced motion still gets the whole signal -- the body goes to full opacity and blooms -- it simply does not grow. */ @media (prefers-reduced-motion:no-preference){ .fg-nav__item::before{transition:opacity .24s ease, box-shadow .34s ease, scale .34s cubic-bezier(.22,1.12,.36,1)} .fg-nav__item:hover::before,.fg-nav__item:focus-visible::before{scale:1.2} } /* The ground light under a word. A wash in that world's hue, rising from the bar's bottom edge -- the same light the shelf below it will open with, so the hover and the panel are one gesture rather than two. Negative z-index, deliberately: .fg-nav__item is positioned but sets no z-index, so it creates no stacking context and this pseudo settles to the bottom of the masthead's -- above the bar's own background, below every word in it. Painted behind the type rather than over it, which is the whole reason it can be this strong without touching legibility. */ .fg-nav__item::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(64% 118% at 50% 122%, color-mix(in srgb, var(--dot) 30%, transparent) 0%, transparent 74%); opacity:0;transition:opacity .28s ease; } .fg-nav__item:hover,.fg-nav__item:focus-visible{color:var(--ink)} .fg-nav__item:hover::before,.fg-nav__item:focus-visible::before{ opacity:1; box-shadow:0 0 13px -1px color-mix(in srgb, var(--dot) 80%, transparent); } .fg-nav__item:hover::after,.fg-nav__item:focus-visible::after{opacity:1} /* Where you are, said once and quietly: the body lights, takes a thin orbit ring, and the word goes to full ink. No pill and no underline -- a filled shape up here reads as a button, and this is a position, not an action. */ .fg-nav__item.is-on{color:var(--ink)} .fg-nav__item.is-on::before{ opacity:1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 17%, transparent), 0 0 13px -1px color-mix(in srgb, var(--dot) 70%, transparent); } .fg-nav__item.is-on::after{opacity:.55} /* ---------- a world's shelf ---------- */ /* The panels are siblings of the scrolling row, not children of it -- the row's trailing edge mask would fade a child panel's edge off with it (a mask applies to everything an element paints, positioned descendants included). Absolute against the masthead itself, which is the nearest positioned ancestor, so top:100% is "under the bar" whatever height the bar is in. Shown by CSS alone. :has() pairs each panel with its word by pillar id; the ids are this site's eight architectural constants, hardcoded exactly as the mark hardcodes their hues. Keyboard focus opens the same panel (the links inside are display:none until then, so a closed shelf costs the tab order nothing), and Escape is handled by script as a courtesy, not a requirement. THE SHELF IS THE SAME SKY. It used to be a flat --paper-2 slab with a single tint at the top: a dropdown, borrowed from somewhere else, opening out of an observatory. It is now built from the layered washes the .fg-sky uses, lit along its top edge in the world's own hue, so opening a pillar reads as the scene continuing rather than a panel arriving. */ .fg-nav__panel{ position:absolute;inset-inline:0;top:100%;z-index:5; display:none; max-height:min(72vh,520px);overflow-y:auto;overscroll-behavior:contain; background: radial-gradient(52% 100% at 22% 0%, color-mix(in srgb, var(--dot) 13%, transparent) 0%, transparent 62%), radial-gradient(46% 88% at 88% 8%, color-mix(in srgb, var(--dot) 7%, transparent) 0%, transparent 58%), linear-gradient(180deg, color-mix(in srgb, var(--dot) 5%, var(--paper-2)) 0%, var(--paper-2) 180px), var(--paper-2); border-block-end:1px solid var(--rule); box-shadow:var(--shadow-2); } /* The lit top edge: the shelf's own horizon, in the world's hue. A border cannot hold a gradient, so it is a pseudo -- and it doubles as the seam between the bar and the shelf, which is the one place a hard line belongs. */ .fg-nav__panel::before{ content:"";position:absolute;inset-inline:0;top:0;height:1px;pointer-events:none; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--dot) 55%, transparent) 18%, color-mix(in srgb, var(--dot) 78%, transparent) 50%, color-mix(in srgb, var(--dot) 55%, transparent) 82%, transparent); } @media (prefers-reduced-motion:no-preference){ .fg-nav__panel{ opacity:1;translate:0 0; transition-property:display,opacity,translate; transition-duration:.18s; transition-timing-function:cubic-bezier(.22,.7,.28,1); transition-delay:.12s; transition-behavior:allow-discrete; } } /* Keyboard entry. Walking focus from the word into its shelf crosses an instant where neither holds it -- the word has blurred, the first link has not yet been reached -- and at that instant the shelf computes closed and the move dies on a display:none target. atlas.js pins the shelf open for the crossing; the pin is lifted the moment focus leaves the shelf. */ .fg-nav__panel.is-kbd{display:block} @starting-style{ .fg-nav__panel{opacity:0;translate:0 -9px} } @media (min-width:761px){ .fg-nav:has(.fg-nav__item[data-world="language"]:is(:hover,:focus-visible)) .fg-nav__panel--language, .fg-nav:has(.fg-nav__item[data-world="design"]:is(:hover,:focus-visible)) .fg-nav__panel--design, .fg-nav:has(.fg-nav__item[data-world="media"]:is(:hover,:focus-visible)) .fg-nav__panel--media, .fg-nav:has(.fg-nav__item[data-world="code"]:is(:hover,:focus-visible)) .fg-nav__panel--code, .fg-nav:has(.fg-nav__item[data-world="systems"]:is(:hover,:focus-visible)) .fg-nav__panel--systems, .fg-nav:has(.fg-nav__item[data-world="ai"]:is(:hover,:focus-visible)) .fg-nav__panel--ai, .fg-nav:has(.fg-nav__item[data-world="marketing"]:is(:hover,:focus-visible)) .fg-nav__panel--marketing, .fg-nav:has(.fg-nav__item[data-world="business"]:is(:hover,:focus-visible)) .fg-nav__panel--business, .fg-nav__panel:is(:hover,:focus-within){display:block;transition-delay:0s} } /* Escape, from the keyboard, puts focus back on the pillar's word -- and focus on the word is what holds a shelf open. atlas.js sets this class for exactly that moment; !important because it must beat the :has() chain above whatever the reader's focus is doing. Cleared on the next pointer move, focus leaving the dock, or ArrowDown asking for the shelf back. */ .fg-nav.is-held .fg-nav__panel{display:none!important} .fg-nav__sheet{ display:grid;grid-template-columns:minmax(210px,272px) 1fr;gap:10px 46px; padding-block:30px 34px; } .fg-nav__about{border-inline-end:1px solid var(--rule);padding-inline-end:38px} .fg-nav__name{ display:flex;align-items:center;gap:12px; font-family:var(--f-display);font-weight:var(--w-head);font-size:22px; letter-spacing:-.02em;color:var(--ink); } /* The world, as a body. The same ramp the rail's dot wears, at planet size -- so the shelf opens on a picture of the thing you just pointed at. */ .fg-nav__name::before{ content:"";width:26px;height:26px;border-radius:50%;flex:none; background:radial-gradient(circle at 32% 28%, color-mix(in srgb, #fff 38%, var(--dot)) 0%, var(--dot) 44%, color-mix(in srgb, var(--dot) 24%, var(--void)) 84%); box-shadow:0 0 18px -3px color-mix(in srgb, var(--dot) 66%, transparent); } .fg-nav__blurb{margin-top:12px;font-size:13.5px;line-height:1.65;color:var(--ink-2);max-width:34ch} .fg-nav__meta{ display:flex;gap:16px;margin-top:15px; font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-3); } /* The way in. It was a bare tinted word; it is now the one filled shape in the shelf, because it is the one thing in it that is an action rather than a destination among seventy six others. Filled in the world's own light, with the ground colour as its ink -- --on-fill exists for exactly this. */ .fg-nav__enter{ display:inline-flex;align-items:center;gap:8px;margin-top:20px; padding:8px 15px;border-radius:99px; font-family:var(--f-mono);font-size:11px;letter-spacing:.1em; text-transform:uppercase; color:var(--dot-p,var(--ink)); border:1px solid color-mix(in srgb, var(--dot) 34%, transparent); background:color-mix(in srgb, var(--dot) 10%, transparent); transition:background-color .22s ease,border-color .22s ease,color .22s ease; } .fg-nav__enter:hover,.fg-nav__enter:focus-visible{ background:color-mix(in srgb, var(--dot) 20%, transparent); border-color:color-mix(in srgb, var(--dot) 58%, transparent); color:var(--ink); } .fg-nav__enter .fg-nav__arrow{transition:translate .2s ease} .fg-nav__enter:hover .fg-nav__arrow{translate:3px 0} /* The arrow is drawn pointing forward in LTR; forward is the other way here. */ [dir="rtl"] .fg-nav__arrow{transform:scaleX(-1)} [dir="rtl"] .fg-nav__enter:hover .fg-nav__arrow{translate:-3px 0} .fg-nav__topics{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:2px 16px;align-content:start; } .fg-nav__topic{ display:flex;align-items:center;gap:10px;min-width:0; padding:8px 11px;border-radius:9px; font-size:14px;color:var(--ink-2); transition:background-color .16s ease,color .16s ease; } /* A topic is a smaller body of the same world. Same ramp again, at 6px: the shelf is one system seen at three sizes -- 26px for the world, 8px on the rail, 6px per topic. */ .fg-nav__topic::before{ content:"";width:6px;height:6px;border-radius:50%;flex:none; background:radial-gradient(circle at 32% 28%, color-mix(in srgb, #fff 40%, var(--dot)) 0%, var(--dot) 46%, color-mix(in srgb, var(--dot) 26%, var(--void)) 88%); opacity:.5;transition:opacity .16s ease,box-shadow .2s ease; } .fg-nav__topic b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* The count wears the atlas's own voice -- the same figure the orb under this name carries on the map. unstyled from strikethrough, as everywhere. */ .fg-nav__topic s{ text-decoration:none;margin-inline-start:auto;flex:none; font-family:var(--f-mono);font-size:10px;color:var(--ink-3);opacity:.7; } .fg-nav__topic:hover,.fg-nav__topic:focus-visible{ background:color-mix(in srgb, var(--dot) 11%, transparent);color:var(--ink); } .fg-nav__topic:hover::before,.fg-nav__topic:focus-visible::before{ opacity:1;box-shadow:0 0 9px color-mix(in srgb, var(--dot) 75%, transparent); } /* One column once the shelf is narrower than its two ideas. */ @media (max-width:1020px){ .fg-nav__sheet{grid-template-columns:1fr;gap:18px} .fg-nav__about{border-inline-end:0;padding-inline-end:0} .fg-nav__blurb{max-width:56ch} } /* The orrery, the hero and the index below it live in atlas.css: together they are one scene and splitting them across two files only hides that. */ /* ---------- node page ---------- */ .node-head{padding-block:40px 8px} .node-head h1{margin-bottom:14px} .node-head .lede{margin-bottom:4px} /* A reading panel, not a page. Prose needs a ground of its own to sit on or it floats in the sky and every line has to fight the wash behind it -- so the article is lifted a step out of the night and ruled at the top, which is also what tells you the map has ended and the text has started. */ .node-body{ max-width:70ch;margin-block:34px 8px;padding:34px 0 6px; border-top:1px solid var(--rule); font-size:calc(17.5px * var(--script-scale));line-height:1.75;color:var(--ink-2); } .node-body h2{margin-top:40px;margin-bottom:12px;color:var(--ink)} .node-body h3{margin-top:28px;margin-bottom:8px;color:var(--ink)} .node-body p+p{margin-top:16px} .node-body strong{color:var(--ink)} .node-body a{color:var(--p-ai);border-bottom:1.5px solid color-mix(in srgb,var(--p-ai) 42%,transparent)} .node-body a:hover{border-bottom-color:var(--p-ai)} .node-body ul,.node-body ol{padding-inline-start:22px;margin-top:14px;display:flex; flex-direction:column;gap:8px} /* Set apart by rule, colour and size rather than by slant. The slant was the only italic on the site and it was pulling down a second Instrument Sans face on every page to render it -- a whole font file for one element that most pages do not contain. */ .node-body blockquote{ margin:26px 0;padding-inline-start:22px; border-inline-start:2px solid var(--p-ai); color:var(--ink);font-size:1.06em;line-height:1.6; } .node-body code{ font-family:var(--f-mono);font-size:.88em; background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:1px 6px; } /* stub shown when a node has no body yet. Honest, not a fake empty state. */ .node-stub{ border:1px dashed var(--rule-2);border-radius:8px; background:color-mix(in srgb, var(--surface) 62%, transparent); padding:22px 24px;max-width:66ch;margin-block:30px; } .node-stub p{font-size:15.5px;color:var(--ink-2)} .node-stub strong{color:var(--ink)} /* ---------- footer: the horizon ---------- */ /* The bottom of the same picture the masthead is the top of. A planet's limb rises out of the page's bottom edge, rim-lit in the current world's hue -- the same --world the masthead's light falls from -- and the eight pillars sit along its arc as bodies. The Faragiri mark, drawn at the scale of ground. Words in flow, geometry in the sky. Every string here lives in an ordinary wrapping row, because twenty four locales means no label has a knowable width; only the aria-hidden bodies are pinned to the arc. Their dips below are hardcoded to the limb's own curve -- eight architectural constants placed like the mark places its satellites, not computed, authored. */ /* Registered so it can travel: hovering a world's link swings the horizon's light the way the masthead's --mast-lit swings along the rail. */ @property --foot-lit{ syntax:""; inherits:true; initial-value:#E1E1E1 } .foot{ position:relative;overflow:hidden;margin-top:64px; --foot-lit:var(--world,var(--d-core)); padding-block:42px 200px; } /* The top hairline carries the same whisper of light the masthead's horizon does -- one picture, framed by two edges that agree. */ .foot::before{ content:"";position:absolute;inset-inline:0;top:0;height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--foot-lit) 22%, rgb(255 255 255 / .11)) 24%, color-mix(in srgb, var(--foot-lit) 34%, rgb(255 255 255 / .13)) 50%, color-mix(in srgb, var(--foot-lit) 22%, rgb(255 255 255 / .11)) 76%, transparent); } /* ----- the sky ----- */ .foot__sky{position:absolute;inset:0;pointer-events:none} /* The limb. A circle far larger than the viewport, sunk so only its top 150px surfaces -- translate percentages resolve against the element's own size, so calc(100% - 150px) keeps the visible sliver constant at every screen width while max() keeps the curvature from going flat on a phone. Inside the rim it is --void, the same darkness the orbs are made of: a body, not a panel. */ .foot__limb{ position:absolute;left:50%;bottom:0; width:max(170vw,1250px);aspect-ratio:1;border-radius:50%; translate:-50% calc(100% - 150px); background: radial-gradient(140% 60% at 50% 0%, color-mix(in srgb, var(--foot-lit) 9%, transparent) 0%, transparent 42%), var(--void); border:1px solid color-mix(in srgb, var(--foot-lit) 36%, var(--hair)); box-shadow: inset 0 30px 52px -28px color-mix(in srgb, var(--foot-lit) 44%, transparent), 0 -22px 80px -18px color-mix(in srgb, var(--foot-lit) 25%, transparent); } /* The eight bodies, on the arc. An evenly spaced row whose ends dip to follow the limb's curve; the dips are the chord geometry of the drawn circle, put down by hand the way every other eight-fold constant on this site is. The row is flex, so RTL mirrors the order by itself and the symmetric dips need no flip. */ .foot__ring{ position:absolute;left:50%;bottom:118px;translate:-50% 0; width:min(760px,86vw);display:flex;justify-content:space-between; } .foot__ring i{ width:10px;height:10px;border-radius:50%;flex:0 0 auto; translate:0 var(--dip,0px); background:radial-gradient(circle at 32% 28%, color-mix(in srgb, #fff 44%, var(--dot)) 0%, var(--dot) 46%, color-mix(in srgb, var(--dot) 26%, var(--void)) 88%); box-shadow:0 0 9px -1px color-mix(in srgb, var(--dot) 55%, transparent); opacity:.72; transition:opacity .3s ease, box-shadow .3s ease; } .foot__ring i:nth-child(1),.foot__ring i:nth-child(8){--dip:56px} .foot__ring i:nth-child(2),.foot__ring i:nth-child(7){--dip:28px} .foot__ring i:nth-child(3),.foot__ring i:nth-child(6){--dip:10px} .foot__ring i:nth-child(4),.foot__ring i:nth-child(5){--dip:1px} /* Each body breathes on its own beat -- var(--i) staggers the phase, so the arc shimmers rather than pulsing in lockstep. Light only, never movement, and only for readers who have not asked for stillness. */ @media (prefers-reduced-motion:no-preference){ .foot{transition:--foot-lit .5s cubic-bezier(.22,.7,.28,1)} .foot__ring i{ animation:fg-foot-breathe 7.5s ease-in-out infinite; animation-delay:calc(var(--i,0) * -.94s); transition:opacity .3s ease, box-shadow .3s ease, scale .34s cubic-bezier(.22,1.12,.36,1); } } @keyframes fg-foot-breathe{50%{opacity:.95}} /* Hovering a world's word flares that world's body and hands the horizon its light -- the masthead's gesture, answered from below. The eight ids are the site's architectural constants, hardcoded here exactly as they are there. */ .foot:has(.foot__world[data-world="language"]:is(:hover,:focus-visible)) {--foot-lit:var(--d-language)} .foot:has(.foot__world[data-world="design"]:is(:hover,:focus-visible)) {--foot-lit:var(--d-design)} .foot:has(.foot__world[data-world="media"]:is(:hover,:focus-visible)) {--foot-lit:var(--d-media)} .foot:has(.foot__world[data-world="code"]:is(:hover,:focus-visible)) {--foot-lit:var(--d-code)} .foot:has(.foot__world[data-world="systems"]:is(:hover,:focus-visible)) {--foot-lit:var(--d-systems)} .foot:has(.foot__world[data-world="ai"]:is(:hover,:focus-visible)) {--foot-lit:var(--d-ai)} .foot:has(.foot__world[data-world="marketing"]:is(:hover,:focus-visible)) {--foot-lit:var(--d-marketing)} .foot:has(.foot__world[data-world="business"]:is(:hover,:focus-visible)) {--foot-lit:var(--d-business)} .foot:has(.foot__world[data-world="language"]:is(:hover,:focus-visible)) .foot__ring i[data-world="language"], .foot:has(.foot__world[data-world="design"]:is(:hover,:focus-visible)) .foot__ring i[data-world="design"], .foot:has(.foot__world[data-world="media"]:is(:hover,:focus-visible)) .foot__ring i[data-world="media"], .foot:has(.foot__world[data-world="code"]:is(:hover,:focus-visible)) .foot__ring i[data-world="code"], .foot:has(.foot__world[data-world="systems"]:is(:hover,:focus-visible)) .foot__ring i[data-world="systems"], .foot:has(.foot__world[data-world="ai"]:is(:hover,:focus-visible)) .foot__ring i[data-world="ai"], .foot:has(.foot__world[data-world="marketing"]:is(:hover,:focus-visible)) .foot__ring i[data-world="marketing"], .foot:has(.foot__world[data-world="business"]:is(:hover,:focus-visible)) .foot__ring i[data-world="business"]{ opacity:1;scale:1.55;animation:none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 18%, transparent), 0 0 16px -1px color-mix(in srgb, var(--dot) 85%, transparent); } /* ----- the words ----- */ .foot__in{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px} /* The eight worlds, one wrapping centred row. The masthead's row scrolls because a bar has one line to give; down here there is vertical room, so a locale whose words run long simply takes a second line. Same mono voice, same bodies, so the two rows read as one instrument. */ .foot__worlds{ display:flex;flex-wrap:wrap;justify-content:center; column-gap:6px;row-gap:8px;list-style:none;margin:0;padding:0; } .foot__world{ display:flex;align-items:center;gap:8px;padding:5px 11px;border-radius:999px; font-family:var(--f-mono);font-size:11.5px;letter-spacing:.11em; text-transform:uppercase;white-space:nowrap;color:var(--ink-2); transition:color .24s ease; } .foot__world::before{ content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%; background:radial-gradient(circle at 32% 28%, color-mix(in srgb, #fff 44%, var(--dot)) 0%, var(--dot) 46%, color-mix(in srgb, var(--dot) 26%, var(--void)) 88%); box-shadow:0 0 7px -1px color-mix(in srgb, var(--dot) 50%, transparent); opacity:.66; transition:opacity .24s ease, box-shadow .34s ease; } @media (prefers-reduced-motion:no-preference){ .foot__world::before{transition:opacity .24s ease, box-shadow .34s ease, scale .34s cubic-bezier(.22,1.12,.36,1)} .foot__world:hover::before,.foot__world:focus-visible::before{scale:1.2} } .foot__world:hover,.foot__world:focus-visible{color:var(--ink)} .foot__world:hover::before,.foot__world:focus-visible::before{ opacity:1; box-shadow:0 0 13px -1px color-mix(in srgb, var(--dot) 80%, transparent); } .foot__world.is-on{color:var(--ink)} .foot__world.is-on::before{ opacity:1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 17%, transparent), 0 0 13px -1px color-mix(in srgb, var(--dot) 70%, transparent); } /* The languages, flat where the switcher folds them away. The end of a page is the one place "read this in your own language" is a next step rather than an interruption. Text face, not mono: these names are twenty four scripts, and the mono carries only Latin. */ .foot__langs ul{ display:flex;flex-wrap:wrap;justify-content:center; column-gap:20px;row-gap:9px;list-style:none;margin:0;padding:0; } .foot__lang{ font-size:13px;color:var(--ink-3);white-space:nowrap; transition:color .2s ease; } .foot__lang:hover,.foot__lang:focus-visible{color:var(--ink)} .foot__lang.is-on{ color:var(--ink-2); text-decoration:underline;text-underline-offset:5px; text-decoration-color:color-mix(in srgb, var(--foot-lit) 55%, transparent); } .foot__lang--all{color:var(--ink-2);font-weight:var(--w-name)} /* ----- the brand, standing on the horizon ----- */ /* One row, not a stack: mark and tagline at the start, the date and the way back up at the end. The footer's height budget belongs to the sky below it, so the words above stay on a single line wherever the viewport allows and fold to a centred column only on a phone. */ .foot__base{ display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px; width:100%;margin-top:4px;padding-top:20px; border-top:1px solid color-mix(in srgb, var(--rule) 72%, transparent); } .foot__mark{display:flex;align-items:center;gap:10px;color:var(--ink)} .foot__mark svg{ width:29px;height:29px;overflow:visible; filter:drop-shadow(0 0 11px color-mix(in srgb, var(--foot-lit) 45%, transparent)); transition:filter .45s ease; } .foot__mark b{font-family:var(--f-display);font-weight:var(--w-head);font-size:18px; letter-spacing:-.03em;color:var(--ink)} .foot__tag{font-family:var(--f-display);font-weight:var(--w-name);font-size:14.5px; color:var(--ink-2);max-width:38ch} .foot__meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-3);margin-inline-start:auto} /* Back to the top. A real fragment link -- #top is the one target every browser honours with no element and no script -- dressed as a small pill that lifts toward where it is pointing. */ .foot__up{ display:inline-flex;align-items:center;gap:7px; padding:8px 16px;border:1px solid var(--rule-2);border-radius:999px; font-family:var(--f-mono);font-size:11px;letter-spacing:.11em; text-transform:uppercase;color:var(--ink-2); background:color-mix(in srgb, var(--surface) 55%, transparent); transition:color .2s ease, border-color .2s ease, box-shadow .3s ease; } .foot__up:hover,.foot__up:focus-visible{ color:var(--ink); border-color:color-mix(in srgb, var(--foot-lit) 45%, var(--rule-2)); box-shadow:0 0 18px -6px color-mix(in srgb, var(--foot-lit) 55%, transparent); } @media (prefers-reduced-motion:no-preference){ .foot__up{transition:color .2s ease, border-color .2s ease, box-shadow .3s ease, translate .25s cubic-bezier(.22,1.12,.36,1)} .foot__up:hover,.foot__up:focus-visible{translate:0 -2px} } /* On a phone the limb keeps its minimum width -- the arc must stay an arc -- but surfaces less, and the bodies close ranks with it. */ @media (max-width:760px){ .foot{padding-block:36px 160px} .foot__limb{translate:-50% calc(100% - 108px)} .foot__ring{bottom:82px;width:88vw} .foot__ring i:nth-child(1),.foot__ring i:nth-child(8){--dip:38px} .foot__ring i:nth-child(2),.foot__ring i:nth-child(7){--dip:19px} .foot__ring i:nth-child(3),.foot__ring i:nth-child(6){--dip:7px} /* The row has no line to share on a phone; back to the centred column. */ .foot__base{flex-direction:column;gap:10px;text-align:center;padding-top:18px} .foot__meta{margin-inline-start:0} } /* ---------- rtl ---------- */ [dir="rtl"] .node-body ul,[dir="rtl"] .node-body ol{padding-inline-start:22px} /* ---------- the language switcher ---------- A
disclosure, so the browser owns the open and close behaviour and the whole thing works with scripts off. The summary is styled as a pill; the menu below it is absolutely positioned so opening it does not push the rail around. THIS CONTROL CARRIES THE WHOLE SITE. Twenty four language trees are one site only because every page links to its own translations, and this is where it says so. It had been drawn as the smallest, greyest thing in the bar -- a 1px --rule outline around 11.5px of --ink-3 -- which is roughly the treatment you would give a "print this page" link. It is now a lit object: the globe is a body with the world's light behind it, the current language is named in its own script at reading size, and the menu it opens is a slice of the same sky as everything else. Everything here is logical -- inset-inline-end, padding-inline, text-align start -- because this control is the one most likely to be used from a right to left page. A physical `right` would put the Persian menu off the wrong edge of the screen. */ .locale-switch{position:relative} .locale-switch__now{ display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none; font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em; color:var(--ink-2); height:34px;padding-inline:13px; border:1px solid var(--rule);border-radius:99px; background:color-mix(in srgb, var(--surface) 42%, transparent); transition:color .2s ease, border-color .2s ease, background-color .2s ease; } .locale-switch__now::-webkit-details-marker{display:none} .locale-switch__now::marker{content:""} .locale-switch__now:hover, .locale-switch[open] .locale-switch__now{ color:var(--ink); border-color:color-mix(in srgb, var(--mast-lit) 42%, var(--rule-2)); background:var(--surface); } /* The globe sits in its own small halo, in the bar's travelling light. It is the one piece of chrome that should feel planetary without being a planet: this control is about the whole set of trees, not about one world. */ .locale-switch__globe{ display:flex;align-items:center;justify-content:center;flex:none; width:19px;height:19px;border-radius:50%; color:var(--ink-2); background:radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--mast-lit) 26%, transparent) 0%, transparent 72%); transition:color .2s ease; } .locale-switch__now:hover .locale-switch__globe, .locale-switch[open] .locale-switch__globe{color:var(--ink)} @media (prefers-reduced-motion:no-preference){ .locale-switch__globe svg{transition:rotate .6s cubic-bezier(.22,.7,.28,1)} .locale-switch__now:hover .locale-switch__globe svg{rotate:22deg} } /* The name is in its own script and must not be uppercased: there is no such operation for Persian, Arabic, Hebrew or CJK, and applying it to Greek or Cyrillic strips the accents that make the words readable. */ .locale-switch__label{ text-transform:none;letter-spacing:0; font-family:var(--f-text);font-size:13.5px;font-weight:500; } /* ---------- the language panel ---------- Twenty three names, so this is not a dropdown any more. A dropdown is a list you read top to bottom looking for one row, and it works up to about seven of them. At twenty three it became a 420px column that scrolled -- the reader's own language was usually below the fold, the control covered a third of the page to say so, and the names, which are the one thing on this site that cannot be translated and do not need to be, were set at 15px in a grey column. So the panel is the atlas root's wall, pocket sized: the same twenty three names, in the same order the sun reaches them, laid out as a field rather than a queue. Nothing scrolls on a laptop, every name is the same size as every other -- no language is a second class row of this control -- and the reader finds theirs by its shape, in its own script, which is faster than reading a column of words most of them cannot read. It is centred in the VIEWPORT, not under the button. A panel this wide hung off a control near the right edge either runs off the screen or drags the eye into a corner; centred, it reads as the page handing over to a chooser, which is what is happening. Centring is also the one alignment that is identical in both directions, so the Persian panel and the English one are the same object -- which the old inset-inline-end menu was not. */ .locale-switch__menu{ /* The bar's own height, plus the admin bar when WordPress is showing one. Fixed rather than absolute because the panel is centred on the window and the button it hangs from is not in the middle of it. */ --sw-top:calc(var(--head-h) + 9px); position:fixed;z-index:60; inset-block-start:var(--sw-top); inset-inline:0;margin-inline:auto; inline-size:min(910px, calc(100vw - 26px)); max-block-size:calc(100svh - var(--sw-top) - 18px); overflow-y:auto;overscroll-behavior:contain; background: /* the world's light, entering from the top edge exactly as it does on the masthead above it -- the panel is a piece of the same sky */ radial-gradient(78% 52% at 50% 0%, color-mix(in srgb, var(--mast-lit) 15%, transparent) 0%, transparent 68%), radial-gradient(46% 40% at 8% 100%, color-mix(in srgb, var(--mast-lit) 8%, transparent) 0%, transparent 70%), var(--surface); border:1px solid var(--rule-2);border-radius:20px; padding:16px 16px 18px;box-shadow:var(--shadow-2); isolation:isolate; } body.admin-bar .locale-switch__menu{ --sw-top:calc(var(--head-h) + 9px + var(--wp-admin--admin-bar--height,32px)); } @media (min-width:761px){ /* The bar exhales as the reader scrolls; the panel follows it up. */ .mast.is-away .locale-switch__menu{--sw-top:calc(54px + 9px)} body.admin-bar .mast.is-away .locale-switch__menu{ --sw-top:calc(54px + 9px + var(--wp-admin--admin-bar--height,32px)); } } /* The panel's own lit edge, the shelf's rule at panel scale. */ .locale-switch__menu::before{ content:"";position:absolute;inset-inline:26px;top:0;height:1px;pointer-events:none; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--mast-lit) 70%, transparent) 50%, transparent); } /* The sweep. One pass, left to right, lightening the names it crosses and then gone -- the wall's gesture, at the speed of an opening rather than of a page at rest. It is a light, so it does not intercept the pointer. */ .locale-switch__sweep{ position:absolute;inset-block:0;inset-inline-start:0;inline-size:38%; pointer-events:none;z-index:-1;opacity:0; background:linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--mast-lit) 13%, transparent) 42%, color-mix(in srgb, var(--mast-lit) 20%, transparent) 56%, transparent 100%); } .locale-switch__head{ display:flex;align-items:center;gap:10px; font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--ink-3);padding:2px 6px 14px;margin:0; } /* The rule between the label and the count, so the head reads as one line of chrome rather than two floating words. */ .locale-switch__head::after{ content:"";flex:1 1 auto;height:1px;order:1; background:linear-gradient(90deg, var(--rule), transparent); } .locale-switch__head s{ order:2;text-decoration:none;color:var(--ink-3); font-variant-numeric:tabular-nums;letter-spacing:.06em; } /* Flex, not grid, for one reason: twenty three does not divide by six. A grid leaves the last row hanging off the start edge with an empty cell beside it, which on a centred panel reads as a layout that has come loose. Wrapped flex with justify-content:center closes the short row into the middle, so the field is symmetrical whatever the count -- and the count changes every time a locale is added or a leaf is only written in two languages. Fixed basis rather than 1fr so a row of five does not print wider tiles than a row of six. */ .locale-switch__menu ul{ list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap;justify-content:center;gap:7px; } .locale-switch__menu li{flex:0 1 138px;display:flex} .locale-switch__menu li>*{flex:1 1 auto} /* Each tile carries one of the eight worlds' lights, cycling in the order the sun reaches the languages. It is decoration and it is honest decoration: the hue says nothing about the language, and it is invisible until the pointer arrives, so it never competes with the names while the reader is scanning them. What it buys is that hovering across the panel walks the atlas's own palette -- the same eight colours as the rail above it and the ring below -- instead of lighting twenty three tiles the same grey. The wall on the atlas root stays monochrome, and that is not an inconsistency: there the two weights ARE the content -- set solid means written, outlined means being written. Here every locale is published and the state is uniform, so colour is free to be what it is on the rest of the site: which world you are touching. */ .locale-switch__menu li{--tile:var(--mast-lit)} .locale-switch__menu li:nth-child(8n+1){--tile:var(--d-language)} .locale-switch__menu li:nth-child(8n+2){--tile:var(--d-design)} .locale-switch__menu li:nth-child(8n+3){--tile:var(--d-media)} .locale-switch__menu li:nth-child(8n+4){--tile:var(--d-code)} .locale-switch__menu li:nth-child(8n+5){--tile:var(--d-systems)} .locale-switch__menu li:nth-child(8n+6){--tile:var(--d-ai)} .locale-switch__menu li:nth-child(8n+7){--tile:var(--d-marketing)} .locale-switch__menu li:nth-child(8n+8){--tile:var(--d-business)} /* A tile, not a row. The name is the whole of it: no icon, no code, no English gloss -- see the header of template-parts/switcher.php for why the second line is gone. What is left is the one thing a reader looking for their own language actually scans for, at a size where its letterforms are legible in every one of these scripts. */ .locale-switch__item{ position:relative;isolation:isolate; /* Column, so the rare qualifier sits UNDER the name rather than beside it. Beside it, "Español Latin America" has a min-content width half again the basis, flex refuses to shrink a tile below its min-content, and that one tile printed its whole row a language short -- five tiles on the first row and six on the other three, for a qualifier that appears twice in twenty three. Stacked, every tile is the same width and the two Español tiles are the only two-line ones, which is exactly the distinction the qualifier is there to draw. */ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; min-inline-size:0; min-block-size:52px;padding:10px 12px; border-radius:13px;text-decoration:none;color:var(--ink-2); border:1px solid transparent; background:color-mix(in srgb, var(--surface-2) 62%, transparent); text-align:center; } @media (prefers-reduced-motion:no-preference){ .locale-switch__item{ transition:background-color .18s ease, color .18s ease, border-color .18s ease, translate .18s cubic-bezier(.22,.7,.28,1), box-shadow .18s ease; } } .locale-switch__item:hover, .locale-switch__item:focus-visible{ color:var(--ink); background: radial-gradient(120% 130% at 50% 118%, color-mix(in srgb, var(--tile) 24%, transparent) 0%, transparent 72%), var(--surface-2); border-color:color-mix(in srgb, var(--tile) 56%, var(--rule-2)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tile) 16%, transparent), 0 12px 30px -16px color-mix(in srgb, var(--tile) 72%, transparent); } @media (prefers-reduced-motion:no-preference){ .locale-switch__item:hover, .locale-switch__item:focus-visible{translate:0 -2px} } /* Where you already are. The lit core, the same body the rail uses for the pillar you are standing in, so "you are here" is one shape across the site. On a tile it sits in the corner rather than at the end of the name: a tile has no end, and a mark that moves with the length of the word reads as punctuation. */ /* The core's own light, not the tile's and not the masthead's. "You are here" has to be one unmistakable signal, and the eight world hues are all in play on hover a few millimetres away; an achromatic mark is the one that cannot be read as "this tile is lit". It is the same reason the core of the ring is achromatic -- see the note beside --d-core in tokens.css. */ .locale-switch__item.is-on{ color:var(--ink); background:color-mix(in srgb, var(--d-core) 9%, var(--surface-2)); border-color:color-mix(in srgb, var(--d-core) 34%, var(--rule-2)); } .locale-switch__item.is-on::after{ content:"";position:absolute;inset-block-start:8px;inset-inline-end:8px; width:6px;height:6px;border-radius:50%; background:radial-gradient(circle at 32% 28%, color-mix(in srgb, #fff 46%, var(--d-core)) 0%, var(--d-core) 46%, color-mix(in srgb, var(--d-core) 26%, var(--void)) 88%); box-shadow:0 0 9px -1px color-mix(in srgb, var(--d-core) 70%, transparent); } .locale-switch__item b{font-weight:600;font-size:16.5px;line-height:1.24} /* A language's name is written in its own script whatever page it carries it. var(--f-text) is the CURRENT locale's stack, so on an English page فارسی fell through FaragiriSans -- whose unicode-range holds no Arabic -- into 'FaragiriSans Fallback', a metric-override face whose Latin ascent/descent mangles Arabic letterforms. The stack below names both licensed families first; the ranges in fonts.css route each name to its own face and the cross-script file is only downloaded on the pages that actually show a foreign name. The tail is the platform's own faces for the scripts this site licenses no face for -- Hebrew, Devanagari and the three CJK locales. It only ever mattered here: this panel is the one place all twenty three names are set at size on one surface, so a Latin fallback chosen for its metrics stops being invisible and starts being the thing the reader is looking at. The same rule feeds the footer's language row, which prints the same names. */ .locale-switch__item b,.foot__lang,.fg-lring__item b{ font-family:'Faragiri Sans','IRANYekanX','Helvetica Neue',Arial, 'Geeza Pro','Noto Sans Arabic', 'Noto Sans Hebrew','Arial Hebrew', 'Noto Sans Devanagari','Kohinoor Devanagari','Devanagari Sangam MN', 'PingFang SC','Hiragino Sans','Apple SD Gothic Neo', 'Noto Sans CJK SC','Microsoft YaHei',sans-serif; } /* The disambiguator, on the rare tile that needs one. It used to print for every row and it was an English word on every locale's page; see the header of template-parts/switcher.php. It now appears only where two entries would otherwise show the same native name, it is English on purpose and tagged lang="en", and it stays LTR and quiet: a label for someone choosing between two identical tiles, not a second title. */ .locale-switch__item s{ text-decoration:none; font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em; color:var(--ink-3);white-space:nowrap; } /* On a phone the panel is nearly the whole screen, so the only thing worth optimising is whether the reader has to scroll to find their own language. Two columns of twenty three at the desktop tile height came to 753px against 760px of room -- seven pixels short, so every phone scrolled to reveal one row. A shorter tile and a slightly smaller name close that gap and the whole set lands on one screen, which is the entire point of a panel rather than a list. */ @media (max-width:520px){ .locale-switch__menu{padding:14px 13px 15px} .locale-switch__menu ul{gap:6px} .locale-switch__menu li{flex:0 1 118px} .locale-switch__item{min-block-size:44px;padding:8px 9px;border-radius:11px} .locale-switch__item b{font-size:15.5px} .locale-switch__head{padding:0 4px 11px} } /* The opening. The panel drops, then the names arrive behind the sweep in the order the sun reaches them -- west first, Japan last -- which is the same order they are written in and the only motion on this control that carries a fact. --i is set per tile in the template; the cap keeps the last tile inside a third of a second however many locales there eventually are. */ @media (prefers-reduced-motion:no-preference){ .locale-switch[open] .locale-switch__menu{ animation:fg-drop .24s cubic-bezier(.22,.7,.28,1); } .locale-switch[open] .locale-switch__sweep{ animation:fg-sw-sweep .82s cubic-bezier(.4,0,.2,1) .06s 1; } .locale-switch[open] .locale-switch__item{ animation:fg-sw-rise .34s cubic-bezier(.22,.7,.28,1) backwards; animation-delay:calc(min(var(--i,1), 24) * 11ms); } } @keyframes fg-drop{from{opacity:0;translate:0 -7px}} @keyframes fg-sw-rise{from{opacity:0;translate:0 6px}} @keyframes fg-sw-sweep{ 0% {opacity:0; translate:-42% 0} 18% {opacity:1} 82% {opacity:1} 100%{opacity:0; translate:300% 0} } /* ---------- the pocket atlas ---------- */ /* Phone navigation. The button is the site's own diagram -- eight dots on a ring, one per pillar in its own light -- and open, the same eight bodies rearrange into a cross. The sheet under it is not a drawer over the page: it is the night itself, the same ground and the same washes the body wears, held full screen for a moment. The bar stays where it was, floating in the sheet's own sky, so the control that opened it is the control that closes it. */ .fg-menu{display:none} @media (max-width:760px){ .fg-menu{display:block} .fg-nav{display:none} /* The sheet paints at the bottom of the masthead's own stacking order; the bar's controls are raised one step so they keep floating over it. The lens stays: on a phone it is a bare circle beside the pill, and one tap. */ .brand,.locale-switch,.fg-menu__btn,.fg-find-btn--mast{position:relative;z-index:2} } .fg-menu__btn{ list-style:none;cursor:pointer; display:flex;align-items:center;justify-content:center; width:40px;height:40px;border:1px solid var(--rule);border-radius:50%; transition:border-color .2s ease,background-color .2s ease; } .fg-menu__btn::-webkit-details-marker{display:none} .fg-menu__btn::marker{content:""} .fg-menu__btn:hover{border-color:var(--rule-2);background:var(--surface)} .fg-menu[open] .fg-menu__btn{border-color:var(--rule-2);background:var(--surface)} .fg-menu__ring{position:relative;width:22px;height:22px;display:block} .fg-menu__ring i{ position:absolute;top:50%;left:50%;width:5px;height:5px;margin:-2.5px; border-radius:50%;background:var(--dot); /* Eight bearings, 45 degrees apart, starting at the top -- the mark's own layout. left rather than inset-inline-start on purpose: this is geometry around a centre, and mirroring the *anchor* while the angles stay put would fold the ring onto itself in RTL. */ transform:rotate(calc(var(--i) * 45deg - 90deg)) translateX(9px); } @media (prefers-reduced-motion:no-preference){ .fg-menu__ring{animation:fg-orbit 26s linear infinite} .fg-menu[open] .fg-menu__ring{animation:none} .fg-menu__ring i{transition:transform .38s cubic-bezier(.55,0,.2,1) calc(var(--i) * 14ms)} } /* Open, the ring is a cross: the same eight bodies, four to a stroke. */ .fg-menu[open] .fg-menu__ring i:nth-child(1){transform:rotate(45deg) translateX(-7.5px)} .fg-menu[open] .fg-menu__ring i:nth-child(3){transform:rotate(45deg) translateX(-2.5px)} .fg-menu[open] .fg-menu__ring i:nth-child(5){transform:rotate(45deg) translateX(2.5px)} .fg-menu[open] .fg-menu__ring i:nth-child(7){transform:rotate(45deg) translateX(7.5px)} .fg-menu[open] .fg-menu__ring i:nth-child(2){transform:rotate(-45deg) translateX(-7.5px)} .fg-menu[open] .fg-menu__ring i:nth-child(4){transform:rotate(-45deg) translateX(-2.5px)} .fg-menu[open] .fg-menu__ring i:nth-child(6){transform:rotate(-45deg) translateX(2.5px)} .fg-menu[open] .fg-menu__ring i:nth-child(8){transform:rotate(-45deg) translateX(7.5px)} .fg-menu__sheet{ position:fixed;inset:0;z-index:1; overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; background: radial-gradient(120% 46% at 50% -6%, var(--wash-1) 0%, transparent 60%), radial-gradient(90% 38% at 92% 108%, var(--wash-2) 0%, transparent 62%), var(--paper); padding:calc(var(--head-h) + 14px) 20px calc(28px + env(safe-area-inset-bottom,0px)); display:flex;flex-direction:column;gap:16px; } body.admin-bar .fg-menu__sheet{padding-top:calc(var(--head-h) + 14px + var(--wp-admin--admin-bar--height,32px))} @media (prefers-reduced-motion:no-preference){ .fg-menu[open] .fg-menu__sheet{animation:fg-sheet .28s ease backwards} .fg-menu[open] .fg-menu__world{animation:fg-rise .55s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(50ms + 42ms * var(--i))} } @keyframes fg-sheet{from{opacity:0}} @keyframes fg-rise{from{opacity:0;transform:translateY(16px)}} .fg-menu__worlds{list-style:none;margin:0;padding:0} .fg-menu__world{border-block-end:1px solid var(--rule)} .fg-menu__head{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px} .fg-menu__link{ display:flex;align-items:center;gap:14px;flex:1 1 auto;min-width:0; padding-block:14px;color:var(--ink); } .fg-menu__link b{ font-family:var(--f-display);font-weight:var(--w-name);font-size:19px; letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* A small planet, not a dot: the same three ramps the orrery's bodies wear -- a lit limb, the hue, and the void at the edge -- drawn in one gradient. */ .fg-menu__orb{ width:30px;height:30px;border-radius:50%;flex:none; background:radial-gradient(circle at 32% 28%, color-mix(in srgb, #fff 36%, var(--dot)) 0%, var(--dot) 44%, color-mix(in srgb, var(--dot) 24%, var(--void)) 84%); box-shadow:0 0 16px -3px color-mix(in srgb, var(--dot) 62%, transparent); } .fg-menu__link.is-on .fg-menu__orb{ outline:2px solid color-mix(in srgb, var(--dot) 55%, transparent);outline-offset:3px; } .fg-menu__more summary{ list-style:none;cursor:pointer; display:flex;align-items:center;gap:6px;padding:14px 8px; font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3); } .fg-menu__more summary::-webkit-details-marker{display:none} .fg-menu__more summary::marker{content:""} .fg-menu__more summary s{text-decoration:none} .fg-menu__more summary svg{transition:rotate .25s ease} .fg-menu__more[open] summary svg{rotate:180deg} .fg-menu__more{flex:0 0 auto} /* The topic list needs the row's full width, and the row is a flex line: the open list wraps under the head rather than growing beside it. */ .fg-menu__more[open]{flex:1 0 100%} .fg-menu__more[open] summary{width:max-content} .fg-menu__topics{ list-style:none;margin:0;padding:2px 0 16px;padding-inline-start:44px; display:flex;flex-wrap:wrap;gap:8px; } .fg-menu__topic{ display:inline-block;padding:7px 14px; border:1px solid var(--rule);border-radius:99px; font-size:13.5px;color:var(--ink-2); background:color-mix(in srgb, var(--surface) 55%, transparent); transition:color .16s ease,border-color .16s ease; } .fg-menu__topic:hover,.fg-menu__topic:active{ color:var(--ink);border-color:color-mix(in srgb, var(--dot) 55%, var(--rule)); } .fg-menu__foot{margin-top:6px} .fg-menu__foot a{ color:var(--ink-2);font-size:14.5px; border-block-end:1px solid var(--rule-2);padding-block-end:2px; } .fg-menu__foot a:hover{color:var(--ink);border-color:currentColor} /* ---------- the finder ---------- */ /* The triggers. Rendered hidden and armed by script -- a search control that cannot search yet is a broken promise in the most prominent spot on the page -- so the attribute must actually win over these display rules. */ .fg-find-btn[hidden]{display:none} /* THE TRIGGER LOOKS LIKE WHAT IT IS. It was a 32px circle holding a lens and a ⌘K chip: two glyphs in a ring, next to another ring holding a globe, so the two most useful controls in the bar were a matched pair of anonymous circles. It is now shaped like the field it opens -- lens, the invitation in words, the key that gets you there -- which is the one shape every reader on the web already knows how to read. The words are the same string the dialog itself is labelled with, so there is one name for this thing. Recessed rather than raised: an inset top shadow makes it read as a well cut into the bar. Raised would make it a button, and a button that opens a search box is one press further from the truth than a search box you can press. */ .fg-find-btn--mast{ display:inline-flex;align-items:center;gap:9px; height:34px;padding-inline:12px; border:1px solid var(--rule);border-radius:99px;color:var(--ink-3); background:color-mix(in srgb, var(--surface) 42%, transparent); box-shadow:inset 0 1px 2px rgb(0 0 0 / .28); transition:color .2s ease,border-color .2s ease,background-color .2s ease,box-shadow .2s ease; } .fg-find-btn--mast:hover,.fg-find-btn--mast:focus-visible{ color:var(--ink); border-color:color-mix(in srgb, var(--mast-lit) 42%, var(--rule-2)); background:var(--surface); box-shadow:inset 0 1px 2px rgb(0 0 0 / .34), 0 0 16px -6px color-mix(in srgb, var(--mast-lit) 70%, transparent); } .fg-find-btn--mast svg{flex:none;transition:color .2s ease} /* The invitation. Set in the text face, not the mono label face: it is a sentence offered to a reader, and it is the one string in the bar that a non-Latin script gets right for free by not being a tracked label. */ .fg-find-btn__hint{ font-family:var(--f-text);font-size:12.5px;letter-spacing:0;text-transform:none; white-space:nowrap;color:var(--ink-3);transition:color .2s ease; } .fg-find-btn--mast:hover .fg-find-btn__hint{color:var(--ink-2)} /* A real keycap: two tones and a thicker bottom edge, so it reads as a key and not as a bordered word. */ .fg-find-btn__kbd{ text-decoration:none;flex:none; font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em; color:var(--ink-3); background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--rule-2);border-block-end-width:2px;border-radius:5px; padding:1.5px 5px;margin-inline-start:2px; } /* The words go first when the bar runs out of room, then the key, and the control falls back to the lens alone -- which is where it started, and is still perfectly legible. 1240px is chosen against the widest rail this theme ships: at that width the eight pillars still fit without scrolling in every locale measured. */ @media (max-width:1240px){.fg-find-btn__hint{display:none}} @media (max-width:1120px){ .fg-find-btn__kbd{display:none} .fg-find-btn--mast{padding-inline:9px} } .fg-find-btn--sheet{ display:flex;align-items:center;gap:11px;width:100%; padding:13px 16px;border:1px solid var(--rule-2);border-radius:12px; color:var(--ink-3);font-size:14.5px;text-align:start; background:color-mix(in srgb, var(--surface) 60%, transparent); box-shadow:inset 0 1px 2px rgb(0 0 0 / .22); } /* The dialog itself. Native , so the focus trap, the Escape and the inert page behind it belong to the browser. It floats high rather than centred: a list that grows downward from a centred box walks its own input down the screen. It is the same sky as everything else -- washes over --paper-2 and a lit top edge -- rather than the flat panel it was. A search box is the one surface a reader summons deliberately, looks straight at, and dismisses; making it the only unlit rectangle on the site was the clearest sign the chrome and the scene had been designed by two different hands. */ .fg-find{ margin:auto;margin-block-start:min(13vh,130px); width:min(620px, calc(100vw - 32px)); background: radial-gradient(64% 52% at 22% 0%, color-mix(in srgb, var(--d-core) 9%, transparent) 0%, transparent 62%), radial-gradient(56% 44% at 90% 4%, color-mix(in srgb, var(--d-systems) 7%, transparent) 0%, transparent 60%), var(--paper-2); color:var(--ink); border:1px solid var(--rule-2);border-radius:18px; box-shadow:var(--shadow-2), 0 0 0 1px rgb(0 0 0 / .3); padding:0;overflow:hidden; position:relative; } .fg-find::backdrop{background:color-mix(in srgb, var(--void) 68%, transparent)} @media (prefers-reduced-motion:no-preference){ .fg-find[open]{animation:fg-findin .24s cubic-bezier(.22,.7,.28,1)} .fg-find::backdrop{animation:fg-fadein .24s ease} } @keyframes fg-findin{from{opacity:0;transform:translateY(-10px) scale(.985)}} @keyframes fg-fadein{from{opacity:0}} .fg-find__field{ position:relative; display:flex;align-items:center;gap:13px; padding:17px 20px;border-block-end:1px solid var(--rule); } /* The dialog's lit edge, matching the shelf's and the switcher menu's. */ .fg-find__field::before{ content:"";position:absolute;inset-inline:20px;top:0;height:1px;pointer-events:none; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--d-core) 46%, transparent) 50%, transparent); } .fg-find__lens{flex:none;color:var(--ink-3)} .fg-find__input{ flex:1;min-width:0;background:none;border:0;outline:0; color:var(--ink);font-family:var(--f-text);font-size:17.5px; } .fg-find__input::placeholder{color:var(--ink-3)} .fg-find__close{ flex:none;display:flex;align-items:center;justify-content:center; width:28px;height:28px;border:1px solid var(--rule);border-radius:50%; color:var(--ink-3);transition:color .2s ease,border-color .2s ease,background-color .2s ease; } .fg-find__close:hover{color:var(--ink);border-color:var(--rule-2);background:var(--surface)} .fg-find__list{ list-style:none;margin:0;padding:8px; max-height:min(48vh,380px);overflow-y:auto;overscroll-behavior:contain; } .fg-find__list:empty{display:none} .fg-find__opt{ position:relative; display:flex;align-items:center;gap:12px; padding:10px 13px;border-radius:11px;color:var(--ink-2); transition:background-color .14s ease,color .14s ease; } /* Every result carries the body of the world it lives in -- the same ramp the rail and the shelf use. A result list is the one place a reader meets nodes from all eight worlds at once, so it is the place the colour coding is worth the most: you can see which world an answer is in before you have read it. */ .fg-find__opt::before{ content:"";width:7px;height:7px;border-radius:50%;flex:none; background:radial-gradient(circle at 32% 28%, color-mix(in srgb, #fff 42%, var(--dot)) 0%, var(--dot) 46%, color-mix(in srgb, var(--dot) 26%, var(--void)) 88%); opacity:.6;transition:opacity .14s ease,box-shadow .2s ease; } .fg-find__opt b{font-weight:500;color:var(--ink);flex:none;max-width:60%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Where the node lives, so five nodes named Grammar stay five different answers. Same quiet voice as the switcher's region tag. */ .fg-find__opt s{ text-decoration:none;flex:1;min-width:0; font-size:12px;color:var(--ink-3); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .fg-find__opt.is-sel,.fg-find__opt:hover{ background:color-mix(in srgb, var(--dot) 11%, var(--surface-2)); color:var(--ink); } .fg-find__opt.is-sel::before,.fg-find__opt:hover::before{ opacity:1;box-shadow:0 0 10px -1px color-mix(in srgb, var(--dot) 78%, transparent); } /* The selected row wears its world's light down its leading edge -- the one mark that says "Enter opens this" without adding a word to the row. */ .fg-find__opt.is-sel::after{ content:"";position:absolute;inset-inline-start:0;top:8px;bottom:8px; width:2px;border-radius:2px;background:var(--dot); box-shadow:0 0 8px color-mix(in srgb, var(--dot) 70%, transparent); } .fg-find__status{padding:6px 22px 18px;font-size:13.5px;color:var(--ink-3)} .fg-find__status:empty{display:none} .fg-find__keys{ display:flex;gap:18px;margin:0; padding:11px 20px;border-block-start:1px solid var(--rule); font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-3); background:color-mix(in srgb, var(--void) 26%, transparent); } .fg-find__keys kbd{ font:inherit; background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--rule-2);border-block-end-width:2px;border-radius:5px; padding:1px 6px;margin-inline-end:3px; } @media (pointer:coarse){.fg-find__keys{display:none}} /* ---------- the atlas root ---------- */ .fg-root__hint{ margin-block-start:20px;font-size:calc(15px * var(--script-scale)); } .fg-root__hint a{ color:var(--ink);text-decoration:none; border-block-end:1px solid var(--rule-2);padding-block-end:2px; } .fg-root__hint a:hover{border-color:currentColor} .fg-locales{ list-style:none;margin:0;padding:0; display:grid;gap:10px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); } .fg-locale{ display:flex;flex-direction:column;gap:3px; padding:16px 18px;border:1px solid var(--rule);border-radius:12px; text-decoration:none;background:var(--surface); transition:border-color .2s ease,background-color .2s ease,transform .2s ease; } .fg-locale:hover{border-color:var(--rule-2);background:var(--surface-2);transform:translateY(-1px)} /* The native name is the heading of the card, so it is set in the face and at the scale that language needs -- not in the page's Latin display font, which would render فارسی in a fallback nobody chose. */ .fg-locale__native{font-family:var(--f-text);font-size:20px;font-weight:600;color:var(--ink);line-height:1.35} .fg-locale__name{ text-decoration:none;font-family:var(--f-mono);font-size:11px; letter-spacing:.05em;color:var(--ink-3); } .fg-locale__go{ font-style:normal;font-size:12.5px;color:var(--ink-3);margin-block-start:7px; } .fg-locale:hover .fg-locale__go{color:var(--ink-2)} .fg-planned{margin-block-start:26px;padding-block-start:20px;border-block-start:1px solid var(--rule)} .fg-planned__label{ font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-3);margin:0 0 8px; } .fg-planned__list{color:var(--ink-2);font-size:15px;line-height:1.8;margin:0 0 8px} .fg-planned__note{color:var(--ink-3);font-size:13px;line-height:1.6;margin:0;max-width:62ch} /* ---------- a node nobody has written in this language yet ---------- */ .node-stub--untranslated{border-inline-start:2px solid var(--rule-2);padding-inline-start:16px} .node-stub__out{ display:inline-block;margin-block-start:4px; color:var(--ink);text-decoration:none; border-block-end:1px solid var(--rule-2);padding-block-end:2px; } .node-stub__out:hover{border-color:currentColor}