/* ============================================================================ Blocsme — landing Design system lifted from the product (pulse.html): SF stack, a fixed type scale, a fixed spacing scale, warm graphite canvas, one orange that only ever means "this just happened". ========================================================================= */ /* ============================================================================ SF Pro, self-hosted The stack used to start with -apple-system, which meant the type was only ever SF on Apple hardware — everywhere else the page fell back to Segoe or Roboto and the whole scale shifted. These are the real faces, subset to the Latin ranges the product uses, so the page sets identically on every machine. 8 weights, 184 KB total. Chinese is not subset here; PingFang SC / Noto Sans SC still resolve per glyph through the fallback chain. ========================================================================= */ /* SF Arabic, the face Apple sets its own Arabic interfaces in, shipped from here rather than asked for by name — so an Arabic page looks the same on a Windows machine as it does on a Mac. One variable file carries every weight the site uses (1–1000 on wght) and an optical size axis (17–80) that Safari and Chrome move on their own as the type gets bigger: the 84px headline gets display proportions, the 13px caption gets text ones, from the same file. Subset to Arabic, its presentation forms and the punctuation that sits in an Arabic line — 220 KB for the script, against 856 KB for the whole font. */ @font-face{ font-family:"SF Arabic"; font-weight:1 1000; font-style:normal; font-display:swap; src:url("../assets/fonts/SF-Arabic.woff2") format("woff2-variations"), url("../assets/fonts/SF-Arabic.woff2") format("woff2"); } /* The same SF Pro, with the Cyrillic the Latin subset left out. These are separate files behind a unicode-range, so a page in English or Arabic never asks for them — the browser fetches a face only when a glyph on the page falls inside its range. 220 KB across eight weights, paid for by Russian readers only. */ @font-face{ font-family:"SF Pro Text"; font-weight:400; font-style:normal; font-display:swap; src:url("../assets/fonts/SF-Pro-Text-Regular-Cyrillic.woff2") format("woff2"); unicode-range:U+0400-045F,U+0460-052F,U+1C80-1C88,U+20B4,U+2116,U+2DE0-2DFF,U+A640-A69F; } @font-face{ font-family:"SF Pro Text"; font-weight:500; font-style:normal; font-display:swap; src:url("../assets/fonts/SF-Pro-Text-Medium-Cyrillic.woff2") format("woff2"); unicode-range:U+0400-045F,U+0460-052F,U+1C80-1C88,U+20B4,U+2116,U+2DE0-2DFF,U+A640-A69F; } @font-face{ font-family:"SF Pro Text"; font-weight:600; font-style:normal; font-display:swap; src:url("../assets/fonts/SF-Pro-Text-Semibold-Cyrillic.woff2") format("woff2"); unicode-range:U+0400-045F,U+0460-052F,U+1C80-1C88,U+20B4,U+2116,U+2DE0-2DFF,U+A640-A69F; } @font-face{ font-family:"SF Pro Text"; font-weight:700; font-style:normal; font-display:swap; src:url("../assets/fonts/SF-Pro-Text-Bold-Cyrillic.woff2") format("woff2"); unicode-range:U+0400-045F,U+0460-052F,U+1C80-1C88,U+20B4,U+2116,U+2DE0-2DFF,U+A640-A69F; } @font-face{ font-family:"SF Pro Display"; font-weight:500; font-style:normal; font-display:swap; src:url("../assets/fonts/SF-Pro-Display-Medium-Cyrillic.woff2") format("woff2"); unicode-range:U+0400-045F,U+0460-052F,U+1C80-1C88,U+20B4,U+2116,U+2DE0-2DFF,U+A640-A69F; } @font-face{ font-family:"SF Pro Display"; font-weight:600; font-style:normal; font-display:swap; src:url("../assets/fonts/SF-Pro-Display-Semibold-Cyrillic.woff2") format("woff2"); unicode-range:U+0400-045F,U+0460-052F,U+1C80-1C88,U+20B4,U+2116,U+2DE0-2DFF,U+A640-A69F; } @font-face{ font-family:"SF Pro Display"; font-weight:700; font-style:normal; font-display:swap; src:url("../assets/fonts/SF-Pro-Display-Bold-Cyrillic.woff2") format("woff2"); unicode-range:U+0400-045F,U+0460-052F,U+1C80-1C88,U+20B4,U+2116,U+2DE0-2DFF,U+A640-A69F; } @font-face{ font-family:"SF Pro Display"; font-weight:800; font-style:normal; font-display:swap; src:url("../assets/fonts/SF-Pro-Display-Heavy-Cyrillic.woff2") format("woff2"); unicode-range:U+0400-045F,U+0460-052F,U+1C80-1C88,U+20B4,U+2116,U+2DE0-2DFF,U+A640-A69F; } @font-face{ font-family:"SF Pro Text"; font-weight:400; font-style:normal; font-display:swap; src:url("../assets/fonts/SF-Pro-Text-Regular.woff2") format("woff2"); } @font-face{ font-family:"SF Pro Text"; font-weight:500; font-style:normal; font-display:swap; src:url("../assets/fonts/SF-Pro-Text-Medium.woff2") format("woff2"); } @font-face{ font-family:"SF Pro Text"; font-weight:600; font-style:normal; font-display:swap; src:url("../assets/fonts/SF-Pro-Text-Semibold.woff2") format("woff2"); } @font-face{ font-family:"SF Pro Text"; font-weight:700; font-style:normal; font-display:swap; src:url("../assets/fonts/SF-Pro-Text-Bold.woff2") format("woff2"); } @font-face{ font-family:"SF Pro Display"; font-weight:500; font-style:normal; font-display:swap; src:url("../assets/fonts/SF-Pro-Display-Medium.woff2") format("woff2"); } @font-face{ font-family:"SF Pro Display"; font-weight:600; font-style:normal; font-display:swap; src:url("../assets/fonts/SF-Pro-Display-Semibold.woff2") format("woff2"); } @font-face{ font-family:"SF Pro Display"; font-weight:700; font-style:normal; font-display:swap; src:url("../assets/fonts/SF-Pro-Display-Bold.woff2") format("woff2"); } @font-face{ font-family:"SF Pro Display"; font-weight:800; font-style:normal; font-display:swap; src:url("../assets/fonts/SF-Pro-Display-Heavy.woff2") format("woff2"); } /* ---------------------------------------------------------------------------- PingFang SC, self-hosted Apple's Chinese companion to SF Pro. A full weight is ~11 MB, so these are subset to the Han characters the products actually print — regenerate with tools/build-pingfang.py after any Chinese copy change, exactly as with tools/build-zh.py. local() first means an Apple machine uses the installed face and downloads nothing. The Latin faces stay ahead of this one in the stack, so only Han glyphs fall through to it. ------------------------------------------------------------------------- */ @font-face{ font-family:"PingFang SC"; font-weight:400; font-style:normal; font-display:swap; src:local("PingFang SC"), url("../assets/fonts/PingFangSC-Regular.woff2") format("woff2"); } @font-face{ font-family:"PingFang SC"; font-weight:500; font-style:normal; font-display:swap; src:local("PingFang SC Medium"), local("PingFang SC"), url("../assets/fonts/PingFangSC-Medium.woff2") format("woff2"); } @font-face{ font-family:"PingFang SC"; font-weight:600; font-style:normal; font-display:swap; src:local("PingFang SC Semibold"), url("../assets/fonts/PingFangSC-Medium.woff2") format("woff2"); } @font-face{ font-family:"PingFang SC"; font-weight:700; font-style:normal; font-display:swap; src:local("PingFang SC Semibold"), url("../assets/fonts/PingFangSC-Bold.woff2") format("woff2"); } @font-face{ font-family:"PingFang SC"; font-weight:800; font-style:normal; font-display:swap; src:url("../assets/fonts/PingFangSC-Heavy.woff2") format("woff2"); } :root{ --font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Type scale — every font-size on the page is one of these. 11 uppercase label · 12 caption · 13 secondary · 14 body · 15 body emphasis 17 card title · 20 section title · 23 panel head · 28 page headline 34 record title · 44 display figure — plus three marketing display steps that the product itself never needs. Nothing in between. Spacing scale — every padding, margin and gap is one of these. 2 4 6 8 10 12 14 16 18 20 inside a component · 24 32 between components 40 48 64 80 96 120 between blocks. */ --bg: #161617; --canvas: #161617; /* the ground a section sits on; on dark it is --bg itself */ --bg-deep: #0A0A0B; --bg-elevated: #1C1C1E; --bg-raised: #242426; --fill: rgba(235,235,245,.08); --fill-hover: rgba(235,235,245,.13); --fill-active: rgba(235,235,245,.20); --track: rgba(235,235,245,.18); --label: #F5F5F7; --label-2: #A1A1A6; --label-3: #8E8E93; /* the product's caption grey, lifted to clear 4.5:1 on this canvas */ --separator: rgba(255,255,255,.09); --separator-strong: rgba(255,255,255,.16); --ink: #F5F5F7; --ink-hover: #D2D2D7; --on-ink: #1D1D1F; --focus: #F5F5F7; --measure: 430px; /* one column width for both halves of the auth pages */ --live: #FF7A1A; /* "this just happened" — never decoration */ --live-soft: rgba(255,122,26,.16); --live-on-soft: #FFA25E; --recent: #32D74B; /* a record checked or changed recently */ --bad: #FF453A; /* only ever a rejected entry — 5.4:1 on the canvas */ --brand: #FF8A33; --brand-ink: #14100C; --grad: linear-gradient(135deg,#F9B233 0%,#F87A1E 45%,#E93A0E 100%); --grad-90: linear-gradient(90deg,#F9B233 0%,#F87A1E 45%,#E93A0E 100%); --hatch: rgba(245,245,247,.18); --hatch-pattern: repeating-linear-gradient(45deg, var(--hatch) 0 2.5px, transparent 2.5px 7px); --shadow-pop: 0 18px 48px -10px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.12); --shadow-panel: 0 40px 90px -50px rgba(0,0,0,.9); --gutter: 24px; --maxw: 1200px; --ease: cubic-bezier(.2,.8,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); } /* ---------- reset ---------- */ *, *::before, *::after{ box-sizing:border-box; } /* overflow-x lives here, not on body. A box with one axis not visible computes the other to auto, so body{overflow-x:hidden} quietly made BODY the scroll container — and on iOS Safari a scrolling body stops being the viewport for position:fixed. The nav then sat below a band of page content (the gap at the top of the window) and momentum scrolling jumped. The wide tracks clip themselves (.pslider, .zoom, .revs), so this is only a safety net. */ html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--bg); color:var(--label); font-family:var(--font-text); font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; letter-spacing:-.024em; } h1,h2,h3,h4,p,figure,blockquote,ul,ol{ margin:0; } /* Headlines set their own line breaks where the phrasing needs one, and let the browser even out the rest. Without this a display line ends on a stranded word — "300+ project updates a / day.", "anyone asks you about / it." — at whatever width the last word happens not to fit. */ h1, h2, h3, .d1, .d2, .d3, .d4{ text-wrap:balance; } .lead, .hero-sub{ text-wrap:pretty; } /* An authored
is a wide-screen luxury. Below the width where each clause still fits on its own line, the hard break causes the very bug it was written to prevent: the first clause wraps a second time and leaves one word stranded. So the break is dropped and text-wrap:balance above evens the lines out instead. Display sizes need more room, hence the second step. */ .bw{ display:none; } @media (min-width:760px){ .bw{ display:inline; } } .d1 .bw, .hero-h .bw{ display:none; } @media (min-width:1040px){ .d1 .bw, .hero-h .bw{ display:inline; } } /* --------------------------------------------------------------------------- Chinese PingFang SC is Apple's Chinese companion to SF Pro — same designers, same optical weight, so a mixed line of Latin and Han does not look like two fonts fighting. Windows gets Microsoft YaHei UI, Android the Source Han / Noto Sans CJK cut of the same idea. The Latin faces stay FIRST in the stack so digits, "Blocsme" and "$2.7T" keep rendering in SF and only the Han characters fall through to the CJK face. Two things have to change with the face. Han characters are full-width squares: the negative tracking that makes a 64px Latin headline tight jams them together, so tracking goes to zero and lets the glyphs breathe. And Han has no x-height to rest on, so body copy needs more leading than Latin to stay readable — 1.5 becomes 1.75. ------------------------------------------------------------------------- */ html[lang^="zh"]{ --font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif; --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif; } html[lang^="zh"] body{ line-height:1.75; } html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3, html[lang^="zh"] h4, html[lang^="zh"] .d1, html[lang^="zh"] .d2, html[lang^="zh"] .d3, html[lang^="zh"] .d4{ letter-spacing:0; line-height:1.3; } /* A figure that is a word becomes Han here ("Early" -> "提前"), and Han takes no negative tracking. The numerals stay Latin on either language, so .fig itself keeps its own. */ html[lang^="zh"] .fig.is-word{ letter-spacing:0; text-indent:0; } /* Chinese paragraphs take no tracking, but a display figure is not prose: its numerals stay Latin in either language and keep their own set. The word variant above is the one that becomes Han. */ html[lang^="zh"] p:not(.fig), html[lang^="zh"] li{ letter-spacing:0; } /* A break put in to fit an English headline to its column; the Chinese runs shorter and reads better unbroken. */ html[lang^="zh"] br.en-only{ display:none; } /* An uppercase eyebrow does nothing to Han — there is no case — and the wide tracking only pulls the characters apart. */ html[lang^="zh"] .eyebrow{ letter-spacing:.04em; } /* Han has no spaces, so a long unbroken run overflows a narrow column unless the browser is told it may break between characters. */ html[lang^="zh"]{ word-break:normal; line-break:strict; overflow-wrap:anywhere; } /* --------------------------------------------------------------------------- ARABIC --------------------------------------------------------------------------- The face is SF Arabic — the one Apple draws its own interfaces in, and the companion to the SF Pro this site is set in, so a mixed line of Arabic and Latin does not look like two fonts arguing. It is a system font on Apple platforms and is not ours to ship, so it is asked for by name and the stack falls through: Geeza Pro on older Apple systems, Segoe UI on Windows, Noto Sans Arabic everywhere else. The Latin faces stay in front of it so digits, Blocsme and $2.7T still render in SF Pro and only Arabic letterforms fall through to the Arabic face. Three things change with the script. Tracking goes to zero. Arabic is cursive: letters join, and negative tracking does not tighten a word, it pulls the joins apart and breaks the stroke that runs through it. Leading goes up, 1.5 -> 1.7. Arabic has no x-height to sit on and carries marks above and below the baseline, so lines set for Latin collide. And the numerals stay Western. These are figures a buyer compares against a contract — $415.5M, 24,000, 90% — and the whole product writes them one way. ------------------------------------------------------------------------- */ html[lang^="ar"]{ --font-text: "SF Pro Text", "SF Arabic", -apple-system, BlinkMacSystemFont, "Geeza Pro", "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, sans-serif; --font-display: "SF Pro Display", "SF Arabic", -apple-system, BlinkMacSystemFont, "Geeza Pro", "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, sans-serif; } /* --------------------------------------------------------------------------- RUSSIAN --------------------------------------------------------------------------- Same face, same scale. Two adjustments, both because Cyrillic is wider and more open than Latin at the same size: the negative tracking comes off the headlines, where -.04em closes the counters of о, е and с into blots, and the body gets a little more leading because Russian words are longer and lines run on. An uppercase eyebrow keeps its tracking — Cyrillic caps take it as well as Latin does. ------------------------------------------------------------------------- */ html[lang^="ru"] h1, html[lang^="ru"] h2, html[lang^="ru"] h3, html[lang^="ru"] h4, html[lang^="ru"] .d1, html[lang^="ru"] .d2, html[lang^="ru"] .d3, html[lang^="ru"] .d4{ letter-spacing:-.018em; } html[lang^="ru"] body{ line-height:1.6; } html[lang^="ru"] p, html[lang^="ru"] li{ letter-spacing:-.008em; } /* Subheads sit tighter than body text. Cyrillic at 18–32px carries more sidebearing than the Latin it was set for, so the smaller headings and the section ledes read loose at the display tracking. */ html[lang^="ru"] h3, html[lang^="ru"] h4, html[lang^="ru"] .d3, html[lang^="ru"] .d4, html[lang^="ru"] .zc-card-h, html[lang^="ru"] .faq-item summary, html[lang^="ru"] .case-h, html[lang^="ru"] .shead h2{ letter-spacing:-.026em; } html[lang^="ru"] .lead{ letter-spacing:-.016em; } /* The break stays. Its two sides are two separate strings in the dictionary, so hiding it runs the sentences together with no space between them — which is exactly what it did. */ html[lang^="ar"]{ font-optical-sizing:auto; } html[lang^="ar"] body{ line-height:1.7; } /* Arabic needs more leading than Latin, not a lot more. 1.45 was set to clear the marks above and below the baseline and cleared the headline as well — at 84px that is a 38px gap between two lines of a single sentence, and the hero stopped reading as one block. The display sizes come back close to the Latin figure; the smaller headings keep a little more, because that is where the marks actually collide. */ html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] .d1, html[lang^="ar"] .d2{ letter-spacing:0; line-height:1.18; } html[lang^="ar"] h3, html[lang^="ar"] h4, html[lang^="ar"] .d3, html[lang^="ar"] .d4{ letter-spacing:0; line-height:1.3; } html[lang^="ar"] p, html[lang^="ar"] li, html[lang^="ar"] .lead{ letter-spacing:0; } /* A figure is not prose: its numerals are Latin in every language and keep the tracking they were drawn with. A figure that is a *word* becomes Arabic, and Arabic takes none. */ html[lang^="ar"] .fig.is-word{ letter-spacing:0; text-indent:0; } /* A figure keeps Western numerals and therefore its own direction, isolated so it cannot drag the punctuation around it. But an isolated LTR run inside an RTL block still lands on the block's start edge only if it is told to: on its own it stacked to the left of its cell while every label beside it sat right, which is what made the stat row look unaligned. */ html[lang^="ar"] .num{ direction:ltr; unicode-bidi:isolate; text-align:right; } [dir="rtl"] .figcell b, [dir="rtl"] .figcell span, [dir="rtl"] .fig, [dir="rtl"] .sig-num b, [dir="rtl"] .rstats b, [dir="rtl"] .live-value, [dir="rtl"] .live-delta, [dir="rtl"] .foot-tel, [dir="rtl"] .foot-mail{ text-align:right; } /* a phone number is an LTR run; without the isolate the leading + jumps */ [dir="rtl"] .foot-tel{ direction:ltr; unicode-bidi:isolate; } /* An uppercase eyebrow does nothing to Arabic — there is no case — and the wide tracking only breaks the joins. */ html[lang^="ar"] .eyebrow{ letter-spacing:.02em; text-transform:none; } /* The breaks stay. They were put in to fit an English headline to its column, and the Arabic runs to a similar measure — but more to the point, the two sides of such a break are two separate strings in the dictionary, and hiding the break between them ran the sentences together with no space at all. */ /* ---------- right to left ---------- Most of the mirroring is free: the stylesheet asks for inline-start and inline-end rather than left and right, so the box model turns itself round. What is left is everything the cascade cannot flip on its own — a gradient with a direction baked into it, a shape drawn with a border, a transform in pixels, an icon that points somewhere. */ /* the arrowhead is drawn, not laid out: it is turned, not moved */ [dir="rtl"] .mp-req-arrow{ transform:scaleX(-1); } /* ---------- the shelves are marquees, not layout ---------- A drifting shelf is positioned in pixels by script, from a left origin, and duplicated so it can loop without a seam. Turning that round is not a mirror, it is a different animation: in RTL the track lays itself out from the right edge, runs off into negative space, and the two copies land on top of each other — which is exactly what it did. The track keeps its own direction and each card turns instead, so the cards read right to left and the shelf still loops. The same holds for the two tickers, whose keyframes translate by a fixed percentage. */ [dir="rtl"] .pslider, [dir="rtl"] .pslider-track, [dir="rtl"] .marquee, [dir="rtl"] .marquee-track, [dir="rtl"] .markets, [dir="rtl"] .markets-track, [dir="rtl"] .revs, [dir="rtl"] .revs-track{ direction:ltr; } [dir="rtl"] .tile, [dir="rtl"] .rev-card, [dir="rtl"] .marquee-track span, [dir="rtl"] .markets-track > span{ direction:rtl; } /* The shelf is pulled to the full width with a negative inline margin computed from the viewport. In RTL that margin resolves against the other edge, which is what pushed the reviews off their axis and left a strip of the section showing through beside them. Physical margins, because this is geometry. */ [dir="rtl"] .revs{ margin-inline:0; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } /* ---------- the skyline ---------- The city is drawn into a canvas with its light and its density weighted to one side, to sit behind a headline that starts on the other. The headline changed sides, so the drawing does: one flip of the element, which costs nothing and keeps every frame the script draws. */ [dir="rtl"] .hero-bg, [dir="rtl"] .final-bg{ transform:scaleX(-1); } /* a chevron, a caret, an arrow in a button — glyphs that mean "onward" */ [dir="rtl"] .btn svg use[href="#i-arrow"], [dir="rtl"] .sec-cta svg use[href="#i-arrow"]{ transform-box:fill-box; transform-origin:center; transform:scaleX(-1); } /* the overlapping avatars stack the other way */ [dir="rtl"] .faces span + span{ margin-inline-start:-9px; } /* the quotation mark hangs off the reading edge */ [dir="rtl"] .rev-q::before{ transform:scaleX(-1); } ul,ol{ padding:0; list-style:none; } img,svg,video{ display:block; max-width:100%; } button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; } a{ color:inherit; text-decoration:none; } :focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; } ::selection{ background:var(--live); color:var(--brand-ink); } .num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } .ellipsis{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ---------- layout primitives ---------- */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .wrap-wide{ max-width:1400px; } .section{ padding-block:96px; position:relative; } .section-tight{ padding-block:64px; } @media (max-width:860px){ .section{ padding-block:64px; } .section-tight{ padding-block:48px; } } /* ---------- type ---------- */ .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--label-2); } .eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--live); flex:0 0 auto; } .d1{ font-family:var(--font-display); font-size:clamp(40px, 6.4vw, 84px); line-height:1.0; font-weight:700; letter-spacing:-.04em; } .d2{ font-family:var(--font-display); font-size:clamp(32px, 4.4vw, 56px); line-height:1.03; font-weight:700; letter-spacing:-.034em; } .d3{ font-family:var(--font-display); font-size:clamp(26px, 3vw, 40px); line-height:1.08; font-weight:700; letter-spacing:-.028em; } .d4{ font-family:var(--font-display); font-size:23px; line-height:1.2; font-weight:700; letter-spacing:-.022em; } .lead{ font-size:clamp(17px, 1.5vw, 20px); line-height:1.55; color:var(--label-2); letter-spacing:-.027em; } .muted{ color:var(--label-2); } .dim{ color:var(--label-3); } .hot{ color:var(--live); } .grad-text{ background:var(--grad-90); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ---------- buttons ---------- */ .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 22px; border-radius:12px; font-size:15px; font-weight:600; white-space:nowrap; transition:background-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease), opacity .15s; letter-spacing:-.016em; } .btn:active{ transform:scale(.98); } .btn-primary{ background:var(--ink); color:var(--on-ink); } .btn-primary:hover{ background:var(--ink-hover); } .btn-brand{ background:var(--grad); color:var(--brand-ink); } .btn-brand:hover{ opacity:.9; } .btn-ghost{ background:var(--fill); color:var(--label); } .btn-ghost:hover{ background:var(--fill-hover); } .btn-sm{ height:38px; padding:0 16px; font-size:14px; border-radius:10px; letter-spacing:-.011em; } .btn-lg{ height:54px; padding:0 28px; font-size:17px; border-radius:14px; letter-spacing:-.024em; } /* A large CTA whose label carries the whole offer. `nowrap` on .btn keeps a short label on one line; a label this long would simply push the page sideways on a phone, so this one is allowed to set to two lines and grows from the 54px floor instead of being pinned to it. */ .btn-wrap{ white-space:normal; height:auto; min-height:54px; padding:12px 24px; line-height:1.25; text-align:center; max-width:100%; } @media (max-width:560px){ .btn-lg{ white-space:normal; height:auto; min-height:54px; padding:12px 22px; line-height:1.25; text-align:center; max-width:100%; } } /* ---------- reveal on scroll ---------- */ .rv{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); } .rv.is-in{ opacity:1; transform:none; } .rv-d1{ transition-delay:.07s; } .rv-d2{ transition-delay:.14s; } .rv-d3{ transition-delay:.21s; } .rv-d4{ transition-delay:.28s; } @media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* ============================================================================ NAV ========================================================================= */ .nav{ position:fixed; inset:0 0 auto 0; z-index:60; height:64px; display:flex; align-items:center; background:rgba(22,22,23,0); border-bottom:1px solid transparent; transition:background-color .25s var(--ease), border-color .25s var(--ease), backdrop-filter .25s; } .nav.is-stuck{ background:rgba(22,22,23,.78); border-bottom-color:var(--separator); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); } .nav-in{ display:flex; align-items:center; gap:24px; width:100%; max-width:1400px; margin-inline:auto; padding-inline:var(--gutter); } .brand{ display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; } .brand-mark{ width:26px; height:26px; border-radius:8px; flex:0 0 auto; } .brand-word{ height:15px; width:auto; color:var(--label); } .nav-links{ display:flex; align-items:center; gap:4px; margin-inline-start:12px; } .nav-links a{ height:34px; padding:0 12px; border-radius:8px; display:inline-flex; align-items:center; font-size:14px; font-weight:500; color:var(--label-2); transition:color .12s, background-color .12s; letter-spacing:-.011em; } .nav-links a:hover{ color:var(--label); background:var(--fill); } .nav-cta{ margin-inline-start:auto; display:flex; align-items:center; gap:10px; } /* the offer in full while the bar has room for it, the short form once it doesn't */ .cta-short{ display:none; } @media (max-width:1080px){ .cta-long{ display:none; } .cta-short{ display:inline; } } @media (max-width:900px){ .nav-links{ display:none; } } /* all three controls stay on a phone; the bar tightens instead of dropping one. The wordmark is the one thing on the bar that is not a control, so it is what gives way — the mark alone still reads as the brand. */ @media (max-width:520px){ .nav-in{ gap:12px; } .nav-cta{ gap:6px; } .nav-cta .btn-sm{ padding:0 11px; font-size:13px; letter-spacing:-.006em; } .lang-btn{ gap:5px; padding:0 8px; } .lang-btn svg:last-child{ display:none; } } /* ============================================================================ HERO ========================================================================= */ .hero{ position:relative; padding-top:136px; padding-bottom:0; overflow:hidden; } /* The block city sits under everything, and the radial glow sits over it as haze rather than under it as a backdrop — which is the only reason both are here. */ .hero-bg{ position:absolute; left:0; right:0; top:0; height:780px; z-index:0; pointer-events:none; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 13%, #000 50%, transparent 93%); mask-image:linear-gradient(180deg, transparent 0, #000 13%, #000 50%, transparent 93%); } /* the opacity is on the canvas, not the wrapper: on the wrapper it takes the scrim below down with it, and the scrim is what keeps the copy readable */ .hero-bg canvas{ display:block; width:100%; height:100%; opacity:.88; } /* The stops are in pixels, not per cent, because the copy is: it is bounded by a max-width, so its right edge sits at roughly the same place on every screen. Solid to where the secondary type ends, then open as fast as it can. It has to be solid there, not merely dim. A lit --live tower is brighter than --label-2 text is, so anywhere one can pass behind that text the contrast is about 1.8:1 whatever the canvas opacity — the only fix is to not put the city there at all. Past that edge it can be as bright as it likes. */ .hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--bg) 0, var(--bg) 720px, rgba(22,22,23,.45) 820px, rgba(22,22,23,.1) 930px, transparent 1020px); } @media (max-width:860px){ /* the copy runs the whole width here, so the city is texture or nothing */ .hero-bg canvas{ opacity:.5; } .hero-bg::after{ background:linear-gradient(90deg, var(--bg) 0, rgba(22,22,23,.9) 30%, rgba(22,22,23,.74) 100%); } } .hero::before{ content:""; position:absolute; left:50%; top:-260px; width:min(1200px,140%); height:760px; transform:translateX(-50%); pointer-events:none; z-index:1; background:radial-gradient(50% 50% at 50% 50%, rgba(255,122,26,.13), transparent 70%); filter:blur(20px); } .hero > .wrap{ position:relative; z-index:2; } .hero-in{ position:relative; z-index:2; } .hero-badge{ display:inline-flex; align-items:center; gap:9px; height:30px; padding:0; padding-inline:10px 13px; border-radius:15px; background:var(--live-soft); color:var(--live-on-soft); font-size:12px; font-weight:600; letter-spacing:.01em; } .hero h1{ margin-top:22px; max-width:17ch; } /* Inside the headline a figure is not a separate display element — it is the same line of type, so it takes the headline's size and weight instead of the stat shelf's. All it keeps is what a numeral run actually needs: tabular, lining figures, and a shade more negative tracking, because numerals set wider than letters at the same size. */ .hero h1 .fig{ font-size:inherit; font-weight:inherit; line-height:inherit; letter-spacing:-.046em; text-indent:0; font-variant-numeric:tabular-nums lining; } .hero-sub{ margin-top:22px; max-width:56ch; } .hero-acts{ margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; } .hero-note{ margin-top:16px; font-size:13px; color:var(--label-3); display:flex; align-items:center; gap:8px; flex-wrap:wrap; letter-spacing:-.006em; } .hero-note .sep{ width:3px; height:3px; border-radius:50%; background:var(--label-3); } @media (max-width:860px){ .hero-bg{ height:560px; } } /* ---------- hero product shot: the search / map interface ---------- */ .shot{ position:relative; margin-top:56px; border-radius:20px 20px 0 0; overflow:hidden; border:1px solid var(--separator-strong); border-bottom:0; background:var(--bg-elevated); transform:perspective(2000px) rotateX(3deg) translateY(14px) scale(.985); transform-origin:50% 0; opacity:0; transition:transform 1.1s var(--ease-out), opacity .8s var(--ease-out); } .shot.is-in{ transform:perspective(2000px) rotateX(0) translateY(0) scale(1); opacity:1; } /* the shot dissolves into the figures band under it — the fade has to end in the colour that is actually behind it, or the gap reads as a hole */ /* the shot fades out rather than being cut off, and casts nothing downward — the band below it should read as the next thing, not as something in shadow */ .shot::after{ content:""; position:absolute; inset:auto 0 0 0; height:200px; pointer-events:none; background:linear-gradient(180deg, transparent, var(--bg) 92%); } .shot-bar{ display:flex; align-items:center; gap:10px; height:44px; padding-inline:14px; border-bottom:1px solid var(--separator); background:var(--bg-raised); } .shot-dots{ display:flex; gap:6px; } .shot-dots i{ width:10px; height:10px; border-radius:50%; background:var(--fill-active); } .shot-url{ flex:1; max-width:340px; margin-inline:auto; height:26px; border-radius:7px; background:var(--bg); display:flex; align-items:center; justify-content:center; gap:7px; font-size:12px; color:var(--label-3); } /* ============================================================================ THE PRODUCT REPLICAS — shared chrome ========================================================================= */ .ui{ background:var(--bg); color:var(--label); font-size:14px; letter-spacing:-.011em; } .ui-toolbar{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--separator); background:var(--bg-elevated); } .ui-search{ flex:1; min-width:0; max-width:420px; height:30px; border-radius:8px; background:var(--fill); display:flex; align-items:center; gap:8px; padding-inline:10px; font-size:13px; color:var(--label-3); white-space:nowrap; overflow:hidden; letter-spacing:-.006em; } .ui-search svg{ flex:0 0 auto; } .kbd{ margin-inline-start:auto; padding:1px 5px; border-radius:4px; background:var(--fill); font-size:11px; color:var(--label-3); } .chip{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:8px; background:var(--fill); color:var(--label-2); font-size:12px; font-weight:500; white-space:nowrap; transition:background-color .12s, color .12s; } .chip:hover{ background:var(--fill-hover); color:var(--label); } .chip.is-on{ background:var(--fill-hover); color:var(--label); } .chip .d{ width:6px; height:6px; border-radius:50%; background:var(--recent); } .chip .d.hot{ background:var(--live); } /* stage + progress — the product's own record vocabulary */ .stage{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:var(--label); white-space:nowrap; min-width:0; } .stage svg{ color:var(--label-2); flex:0 0 auto; } /* Stage names run much longer in Russian ("Тендер на проектирование" against "Design tender"), so the label truncates wherever it is placed rather than spilling over whatever sits beside it. */ .stage > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; } .progress{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:var(--label-2); white-space:nowrap; flex:0 0 auto; } .progress .num{ min-width:32px; text-align:end; } .bar{ width:44px; height:4px; border-radius:2px; background:var(--track); overflow:hidden; } .bar i{ display:block; height:100%; border-radius:inherit; background:var(--label); transition:width 1.2s var(--ease-out); } .is-recent{ color:var(--label); font-weight:600; } .is-recent::before{ content:""; display:inline-block; width:6px; height:6px; margin-inline-end:6px; border-radius:50%; background:var(--recent); vertical-align:1px; } /* ---------- project tile — lifted from the product's Discover view ---------- */ /* The same card the product uses: a surface you can see, not an outline you have to read. The hover lifts the surface rather than the edge. */ .tile{ position:relative; display:flex; flex-direction:column; min-width:0; height:100%; border-radius:14px; overflow:hidden; background:var(--bg-elevated); color:inherit; text-decoration:none; cursor:pointer; transition:background-color .15s, box-shadow .15s, transform .25s var(--ease); } .tile:hover{ background:var(--bg-raised); box-shadow:0 10px 30px -18px rgba(0,0,0,.9); } /* 3:2, not 16:9. A letterbox is the wrong shape for a photograph of a tower: whatever the crop, the roofline — the part that identifies the building — falls outside it. The extra third of height costs 47px of card. */ .tile-media{ display:block; position:relative; flex:0 0 auto; aspect-ratio:3/2; background:var(--fill); } .tile-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .tile-media.hatch{ display:grid; place-items:center; background-image:var(--hatch-pattern); } .hatch-lock{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; background:var(--bg); color:var(--label-2); font-size:12px; font-weight:500; } .tile-flag{ position:absolute; inset-inline-start:10px; top:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:7px; background:var(--recent); color:#08240F; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } .tile-body{ display:flex; flex-direction:column; flex:1; min-height:0; gap:8px; padding:12px 14px 14px; } .tile-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; align-items:start; } .tile-title{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; min-height:2.7em; font-size:14px; font-weight:600; line-height:1.35; letter-spacing:-.011em; } .tile-value{ font-size:14px; font-weight:600; line-height:1.35; white-space:nowrap; letter-spacing:-.011em; } .tile-meta{ display:flex; min-width:0; font-size:13px; color:var(--label-2); letter-spacing:-.006em; } .tile-status{ display:flex; align-items:center; gap:10px; min-width:0; } .tile-status .progress{ margin-inline-start:auto; } .tile-foot{ margin-top:auto; padding-top:10px; border-top:1px solid var(--separator); } .tile-teaser, .tile-updated{ display:block; font-size:12px; line-height:1.5; color:var(--label-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ============================================================================ HERO SHOT — search + map ========================================================================= */ .srch{ display:grid; grid-template-columns:330px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); height:640px; } .srch-filters{ grid-column:1 / -1; display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--separator); overflow:hidden; } .srch-list{ border-inline-end:1px solid var(--separator); overflow:hidden; display:flex; flex-direction:column; } .srch-count{ padding:12px 14px 8px; } .srch-count b{ display:block; font-size:14px; font-weight:600; letter-spacing:-.011em; } .srch-count span{ display:block; font-size:12px; color:var(--label-3); } .srch-rows{ flex:1; min-height:0; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 56px),transparent); mask-image:linear-gradient(180deg,#000 calc(100% - 56px),transparent); } .srow{ position:relative; display:grid; grid-template-columns:52px minmax(0,1fr); gap:11px; padding:11px 14px; } .srow + .srow{ border-top:1px solid var(--separator); } .srow:hover{ background:rgba(235,235,245,.05); } .srow-thumb{ width:52px; height:52px; border-radius:8px; object-fit:cover; background:var(--fill); } .srow-thumb.hatch{ background-image:var(--hatch-pattern); } .srow-main{ min-width:0; display:flex; flex-direction:column; gap:4px; } .srow-top{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:baseline; } .srow-name{ font-size:13px; font-weight:600; line-height:1.3; letter-spacing:-.006em; } .srow-val{ font-size:13px; font-weight:600; white-space:nowrap; letter-spacing:-.006em; } .srow-sub{ font-size:12px; color:var(--label-2); } .srow-status{ display:flex; align-items:center; gap:8px; margin-top:2px; } .srow-new{ position:absolute; inset-inline-start:6px; top:6px; z-index:2; height:18px; padding:0 6px; border-radius:5px; background:var(--recent); color:#0A2A12; font-size:10px; font-weight:700; letter-spacing:.03em; display:inline-flex; align-items:center; } .srch-map{ position:relative; overflow:hidden; background:var(--bg-deep) radial-gradient(110% 80% at 52% 46%, rgba(255,255,255,.045), transparent 64%); } .srch-map canvas{ position:absolute; inset:0; width:100%; height:100%; } /* ---------- the records, sitting on the map ---------- Round, and inert: the map is a demonstration, not a control, so it takes no pointer input at all and the only thing that moves is the scripted cursor. */ .map-pins{ position:absolute; inset:0; pointer-events:none; } .pin-anchor{ position:absolute; width:0; height:0; z-index:1; } .pin-anchor.is-hot{ z-index:2; } .pin-anchor.is-on{ z-index:3; } .pin-dot{ position:absolute; left:0; top:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:var(--label); box-shadow:0 0 0 3px rgba(10,10,11,.8), 0 1px 4px rgba(0,0,0,.6); transition:transform .18s var(--ease), background-color .18s; } .pin-anchor.is-hot .pin-dot{ background:var(--live); } .pin-anchor.is-on .pin-dot{ transform:scale(1.4); background:var(--live); } .pin-anchor.is-tap .pin-dot{ transform:scale(.85); } /* the ring only leaves a record that moved today */ .pin-anchor.is-hot::after{ content:""; position:absolute; left:0; top:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; border:1px solid var(--live); animation:pin-ping 2.8s var(--ease) infinite; } @keyframes pin-ping{ 0%{ transform:scale(1); opacity:.8 } 70%,100%{ transform:scale(3.6); opacity:0 } } /* ---------- what the pins do not show ---------- The product's own cluster badge: the count is the whole message, so it is given the room to be read, and the badge grows with what it holds. */ .map-clusters{ position:absolute; inset:0; pointer-events:none; } .cl-anchor{ position:absolute; width:0; height:0; } .cluster{ position:absolute; left:0; top:0; transform:translate(-50%,-50%) scale(.82); display:inline-flex; align-items:center; justify-content:center; gap:6px; height:28px; min-width:28px; padding:0 10px; border-radius:14px; background:var(--bg-raised); color:var(--label); box-shadow:0 1px 3px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.16); font-variant-numeric:tabular-nums; white-space:nowrap; opacity:0; transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay:calc(var(--i) * .06s); } .is-in .cluster{ opacity:1; transform:translate(-50%,-50%) scale(1); } .cluster b{ font-size:12px; font-weight:700; letter-spacing:-.01em; } .cluster.is-md{ height:32px; min-width:32px; padding:0 11px; border-radius:16px; } .cluster.is-md b{ font-size:13px; letter-spacing:-.006em; } .cluster.is-lg{ height:38px; min-width:38px; padding:0 13px; border-radius:19px; } .cluster.is-lg b{ font-size:15px; letter-spacing:-.016em; } .cluster.is-xl{ height:46px; min-width:46px; padding:0 16px; border-radius:23px; } .cluster.is-xl b{ font-size:18px; letter-spacing:-.025em; } @media (prefers-reduced-motion:reduce){ .cluster{ opacity:1; transform:translate(-50%,-50%); } } /* the preview card is the product's own project tile */ .mc{ position:absolute; z-index:4; width:272px; pointer-events:none; opacity:0; transform:scale(.96); transform-origin:0 50%; filter:drop-shadow(0 18px 40px rgba(0,0,0,.65)); transition:opacity .22s var(--ease), transform .22s var(--ease-out), left .32s var(--ease-out), top .32s var(--ease-out); } .mc.is-on{ opacity:1; transform:scale(1); } .mc .tile{ background:var(--bg-elevated); border-color:var(--separator-strong); } @media (max-width:560px){ .mc{ width:230px; } } /* the view switch, and how the shot folds down on a narrow screen — these sit with the search panel and were lost when the pin styles were swapped in */ .srch-views{ display:flex; gap:2px; margin-inline-start:auto; padding:2px; border-radius:9px; background:var(--fill); } .srch-views b{ height:24px; padding:0 10px; border-radius:7px; display:inline-flex; align-items:center; font-size:12px; font-weight:500; color:var(--label-3); } .srch-views b.is-on{ background:var(--bg-raised); color:var(--label); } @media (max-width:860px){ .srch{ grid-template-columns:minmax(0,1fr); height:480px; } .srch-list{ display:none; } } @media (max-width:560px){ .shot-url{ display:none; } .ui-toolbar{ padding:8px 10px; } .srch-filters{ padding:8px 10px; } .srch{ height:400px; } } /* ============================================================================ THE THREE OBJECTIONS No badge, no "proof" label, no boxes. The objection is set quiet and large, the answer arrives in full white, and the evidence closes the column under a hairline. The contrast does the arguing. ========================================================================= */ .case{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px; align-items:center; } .case.is-flip .case-vis{ order:-1; } @media (max-width:940px){ .case{ grid-template-columns:minmax(0,1fr); gap:36px; } .case.is-flip .case-vis{ order:0; } } .case-text{ max-width:52ch; } .case-idx{ display:flex; align-items:center; gap:10px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--label-3); } .case-idx .num{ color:var(--live); } .case-idx::after{ content:""; flex:1; height:1px; background:var(--separator); } /* the objection, in the manufacturer's own words — quiet, and given room */ .case-q{ position:relative; margin-top:26px; padding-inline-start:26px; font-size:clamp(19px,1.9vw,25px); line-height:1.4; font-weight:400; letter-spacing:-.015em; color:var(--label-2); } .case-q::before{ content:"\201C"; position:absolute; inset-inline-start:-2px; top:-.12em; font-family:var(--font-display); font-size:2.4em; line-height:1; color:var(--separator-strong); } .case-q cite{ display:block; margin-top:16px; font-size:12px; font-style:normal; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--label-3); } .case-h{ margin-top:40px; } .case-b{ margin-top:18px; font-size:17px; line-height:1.6; color:var(--label-2); letter-spacing:-.024em; } /* the evidence: a fact under a hairline, not a badge */ .case-f{ position:relative; margin-top:28px; padding-top:22px; border-top:1px solid var(--separator); font-size:14px; line-height:1.6; color:var(--label-3); letter-spacing:-.011em; } .case-f::before{ content:""; position:absolute; inset-inline-start:0; top:-1px; width:52px; height:1px; background:var(--live); } /* ---------- stakeholder tree ---------- */ .tree{ padding:22px; border-radius:18px; border:1px solid var(--separator); background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); } .tree-head{ display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--separator); margin-bottom:6px; } .tree-head b{ font-size:13px; font-weight:600; letter-spacing:-.006em; } .tree-head span{ margin-inline-start:auto; font-size:12px; color:var(--label-3); } .tnode{ position:relative; display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:11px; align-items:center; padding:11px 4px; } .tnode + .tnode{ border-top:1px solid var(--separator); } .tnode[data-lvl="1"]{ padding-inline-start:22px; } .tnode[data-lvl="2"]{ padding-inline-start:44px; } .tnode::before{ content:""; position:absolute; inset-inline-start:10px; top:0; bottom:0; width:1px; background:var(--separator); opacity:0; } .tnode[data-lvl="1"]::before,.tnode[data-lvl="2"]::before{ opacity:1; } .tnode[data-lvl="2"]::before{ inset-inline-start:32px; } .tnode-av{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; background:var(--fill); color:var(--label-2); font-size:11px; font-weight:700; letter-spacing:.02em; } .tnode.is-you .tnode-av{ background:var(--grad); color:var(--brand-ink); } .tnode-main{ min-width:0; } .tnode-role{ display:block; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--label-3); } .tnode-name{ display:block; font-size:14px; font-weight:600; line-height:1.35; margin-top:2px; letter-spacing:-.011em; } .tnode-who{ display:block; font-size:12px; color:var(--label-2); margin-top:2px; } .tnode-ch{ display:flex; gap:5px; flex:0 0 auto; } .tnode-ch i{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--fill); color:var(--label-2); } .tnode.is-you .tnode-ch i{ background:var(--live-soft); color:var(--live-on-soft); } .tree-foot{ margin-top:14px; padding-top:14px; border-top:1px solid var(--separator); font-size:12px; color:var(--label-3); } /* ============================================================================ LIVE FEED — the product's own "Right now across blocsme.com" ========================================================================= */ .live{ --l-bg:#0A0A0B; --l-line:rgba(255,255,255,.08); --l-text:#F5F5F7; --l-text-2:rgba(235,235,245,.64); --l-text-3:rgba(235,235,245,.55); --l-fill:rgba(255,255,255,.07); --l-fill-hover:rgba(255,255,255,.13); --l-bar:rgba(255,255,255,.2); --l-scroll:rgba(255,255,255,.18); position:relative; overflow:hidden; border-radius:18px; background:var(--l-bg); color:var(--l-text); box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 40px 90px -50px rgba(0,0,0,.9); } .live-head{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:14px 20px; border-bottom:1px solid var(--l-line); } .live-badge{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; height:22px; padding:0; padding-inline:8px 10px; border-radius:11px; background:var(--live-soft); color:var(--live-on-soft); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .beacon{ position:relative; width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto; } .beacon::after{ content:""; position:absolute; inset:-3px; border-radius:50%; border:1px solid currentColor; animation:beacon 2.4s var(--ease) infinite; opacity:0; } @keyframes beacon{ 0%{ transform:scale(.6); opacity:.8 } 100%{ transform:scale(1.9); opacity:0 } } .live-title{ font-size:15px; font-weight:600; letter-spacing:-.01em; } .live-updated{ margin-inline-start:auto; font-size:13px; color:var(--l-text-2); white-space:nowrap; letter-spacing:-.006em; } .live-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--l-line); } .live-stat{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; min-width:0; padding:16px 20px; } .live-stat + .live-stat{ border-inline-start:1px solid var(--l-line); } .live-label{ font-size:12px; color:var(--l-text-2); white-space:nowrap; } .live-value{ margin-top:6px; font-family:var(--font-display); font-size:clamp(26px,2.4vw,34px); line-height:1; font-weight:700; letter-spacing:-.03em; white-space:nowrap; } .live-delta{ margin-top:8px; font-size:12px; color:var(--l-text-2); white-space:nowrap; } .live-delta b{ font-weight:600; color:var(--l-text); } .spark{ display:flex; align-items:flex-end; gap:2px; width:84px; height:40px; flex:0 0 auto; } .spark i{ flex:1; min-height:2px; border-radius:1px; background:var(--l-bar); transition:height .6s var(--ease); } .spark i:last-child{ background:var(--live); } .bump{ animation:bump .5s var(--ease); } @keyframes bump{ 0%{ transform:translateY(0) } 35%{ transform:translateY(-4px) } 100%{ transform:translateY(0) } } @media (max-width:860px){ .live-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } .live-stat:nth-child(odd){ border-inline-start:0; } .live-stat:nth-child(n+3){ border-top:1px solid var(--l-line); } .spark{ display:none; } } .live-body{ display:grid; grid-template-columns:minmax(0,1fr) 372px; height:470px; } .map-stage{ position:relative; min-width:0; overflow:hidden; background:radial-gradient(120% 90% at 55% 45%, rgba(255,255,255,.04), transparent 62%); } .map-canvas{ position:absolute; inset:0; width:100%; height:100%; } .map-flag{ position:absolute; z-index:2; pointer-events:none; max-width:250px; padding:8px 10px; border-radius:10px; background:rgba(30,30,32,.94); border:1px solid rgba(255,122,26,.45); box-shadow:0 12px 30px -12px rgba(0,0,0,.7); font-size:12px; line-height:1.35; transform:translate(-50%,-120%); opacity:0; transition:opacity .3s var(--ease); } .map-flag.is-on{ opacity:1; animation:flag-in .35s var(--ease); } .map-flag b{ display:block; font-size:13px; font-weight:600; color:var(--l-text); letter-spacing:-.006em; } .map-flag span{ display:block; color:var(--l-text-2); } @keyframes flag-in{ from{ opacity:0; transform:translate(-50%,-112%) } } .feed{ display:flex; flex-direction:column; min-height:0; border-inline-start:1px solid var(--l-line); } .feed-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 16px 8px; } .feed-title{ font-size:15px; font-weight:600; letter-spacing:-.016em; } .feed-all{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:7px; background:var(--l-fill); color:var(--l-text-2); font-size:12px; font-weight:500; } .feed-filter{ display:flex; gap:4px; padding:0 12px 10px; border-bottom:1px solid var(--l-line); overflow-x:auto; scrollbar-width:none; } .feed-filter::-webkit-scrollbar{ display:none; } .feed-chip{ height:26px; padding:0 10px; border-radius:7px; font-size:12px; font-weight:500; color:var(--l-text-2); white-space:nowrap; transition:background-color .12s, color .12s; } .feed-chip:hover{ background:var(--l-fill); color:var(--l-text); } .feed-chip[aria-pressed="true"]{ background:var(--l-fill-hover); color:var(--l-text); } .feed-list{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:6px 0 32px; scrollbar-width:thin; scrollbar-color:var(--l-scroll) transparent; -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(to bottom,#000 calc(100% - 44px),transparent); } .feed-list::-webkit-scrollbar{ width:6px; } .feed-list::-webkit-scrollbar-thumb{ background:var(--l-scroll); border-radius:3px; } .feed-item{ position:relative; display:grid; grid-template-columns:28px minmax(0,1fr) auto; column-gap:10px; padding:10px 16px; transition:background-color .12s; } .feed-item:hover{ background:var(--l-fill); } .feed-item::before{ content:""; position:absolute; inset-inline-start:0; top:11px; bottom:11px; width:2px; border-start-end-radius:2px; border-end-end-radius:2px; background:var(--live); opacity:0; transition:opacity 1.4s ease; } .feed-item.is-new::before{ opacity:1; } .feed-item.is-entering{ animation:feed-in .5s var(--ease); } @keyframes feed-in{ from{ opacity:0; transform:translateY(-8px) } } .feed-icon{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--l-fill); color:var(--l-text-2); } .feed-item.is-new .feed-icon{ background:var(--live-soft); color:var(--live-on-soft); } .feed-main{ min-width:0; } .feed-text{ font-size:13px; font-weight:500; line-height:1.4; letter-spacing:-.006em; } .feed-sub{ margin-top:2px; font-size:12px; color:var(--l-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .feed-sub .name{ color:var(--l-text-2); } .feed-time{ font-size:12px; color:var(--l-text-3); white-space:nowrap; } @media (max-width:980px){ .live-body{ grid-template-columns:minmax(0,1fr); height:auto; } .map-stage{ height:280px; } .feed{ border-inline-start:0; border-top:1px solid var(--l-line); height:420px; } } /* ============================================================================ PROJECTS SLIDER ========================================================================= */ /* the track is far wider than the page, so the shelf itself does the clipping — leaving it to body{overflow-x} would still inflate the document's width */ .pslider{ position:relative; margin-top:48px; overflow:hidden; } .pslider::before,.pslider::after{ content:""; position:absolute; top:0; bottom:0; width:12%; z-index:2; pointer-events:none; } .pslider::before{ left:0; background:linear-gradient(90deg,var(--bg),transparent); } .pslider::after{ right:0; background:linear-gradient(270deg,var(--bg),transparent); } .pslider-track{ display:flex; gap:16px; width:max-content; will-change:transform; } .pslider-track .tile{ width:282px; flex:0 0 auto; } @media (max-width:560px){ .pslider-track .tile{ width:244px; } } /* ============================================================================ SIGNALS ========================================================================= */ /* No drop shadow. On a light section it was a grey smear under a white card, which is what a shadow does when the surface below it is already bright. */ .sig-panel{ border-radius:18px; border:1px solid var(--separator); overflow:hidden; background:var(--bg); } .sig-top{ display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--separator); } .sig-top h3{ font-size:15px; font-weight:600; letter-spacing:-.016em; } .sig-top .when{ margin-inline-start:auto; font-size:12px; color:var(--label-3); } .sig-num{ padding:15px 18px; min-width:0; } .sig-num + .sig-num{ border-inline-start:1px solid var(--separator); } .sig-num b{ display:block; font-family:var(--font-display); font-size:clamp(26px,2.4vw,34px); font-weight:700; letter-spacing:-.03em; line-height:1; } .sig-num span{ display:block; margin-top:8px; font-size:12px; line-height:1.45; color:var(--label-2); } @media (max-width:760px){ .sig-num:nth-child(odd){ border-inline-start:0; } .sig-num:nth-child(n+3){ border-top:1px solid var(--separator); } } /* ---------- signals: photographs, a chart that grows, cards that arrive ---------- */ /* the cards land one after another, once the panel is on screen */ /* the lead story runs over its photograph */ /* a thumbnail is enough for the rest — out of flow, so a tall photo cannot stretch the card past its ratio the way a plain flex child would */ /* lead times, quarter by quarter — the chart is the sentence */ @media (prefers-reduced-motion:reduce){ } /* 50% black was written for a light card on a dark page, where it had the card's own white to sit on. On a light section it lands at 3.21:1, under the 4.5 floor for 12–14px — the palette's own caption grey is 4.9:1 and is the colour this was reaching for anyway. */ @media (max-width:940px){ } @media (max-width:620px){ } /* ============================================================================ WHAT THE BASE BUILDS ========================================================================= */ .figrow{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:48px; border:1px solid var(--separator); border-radius:16px; overflow:hidden; } .figcell{ padding:22px 24px; min-width:0; } .figcell + .figcell{ border-inline-start:1px solid var(--separator); } .figcell b{ display:block; font-family:var(--font-display); font-size:clamp(26px,2.8vw,38px); font-weight:700; letter-spacing:-.03em; line-height:1; } .figcell span{ display:block; margin-top:8px; font-size:13px; color:var(--label-2); letter-spacing:-.006em; } @media (max-width:760px){ .figrow{ grid-template-columns:repeat(2,minmax(0,1fr)); } .figcell:nth-child(odd){ border-inline-start:0; } .figcell:nth-child(n+3){ border-top:1px solid var(--separator); } } .mixbar{ display:flex; gap:2px; margin-bottom:28px; } .mixbar-part{ position:relative; min-width:74px; } .mixbar-fill{ display:block; height:10px; border-radius:2px; background:var(--label); transform-origin:left; } .mixbar-part:first-child .mixbar-fill{ border-radius:6px 2px 2px 6px; } .mixbar-part:last-child .mixbar-fill{ border-radius:2px 6px 6px 2px; } .mixbar-key{ display:flex; align-items:baseline; gap:5px; margin-top:9px; font-size:12px; color:var(--label-2); min-width:0; } .mixbar-key b{ font-weight:600; color:var(--label); } /* Once the group name goes, the share on its own needs about a third of the width the labelled part did — held at 74px the six parts add up wider than a phone, which widens the layout viewport and drags the nav out with it. */ @media (max-width:760px){ .mixbar-part .mixbar-name{ display:none; } .mixbar-part{ min-width:34px; } } .type-groups{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px; align-items:start; } .tgroup{ padding:16px 18px 18px; border-radius:14px; background:var(--bg-elevated); } .tgroup-head{ display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:11px; align-items:center; padding-bottom:10px; } .tgroup-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--fill); color:var(--label-2); } .tgroup-head > span{ min-width:0; } .tgroup-name{ display:block; font-size:14px; font-weight:600; line-height:1.3; letter-spacing:-.011em; } .tgroup-share{ display:block; margin-top:2px; font-size:12px; color:var(--label-3); } .tgroup-tot{ font-family:var(--font-display); font-size:20px; font-weight:600; letter-spacing:-.02em; } .trow{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; font-size:13px; letter-spacing:-.006em; } .trow-name{ position:relative; z-index:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--label); } .trow-n{ position:relative; z-index:1; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; } .trow-bg{ position:absolute; inset-inline-start:-6px; top:4px; bottom:4px; z-index:0; border-radius:5px; background:var(--fill); width:0; transition:width 1s var(--ease-out); } /* Both the type rows and the ten reasons are a way into the product rather than a figure to read, so they carry the affordance the project tiles already use instead of a new one. The row keeps its own paint order: the bar is the only thing that answers the pointer, which is why the hover lands on .trow-bg. */ a.trow, a.reason{ color:inherit; text-decoration:none; cursor:pointer; } a.trow .trow-bg{ transition:width 1s var(--ease-out), background-color .15s; } /* The bar is the only thing that answers the pointer. The figure stays put: orange is reserved for live state on this page, and a number that changes colour under the cursor reads as a value changing. */ a.trow:hover .trow-bg{ background:var(--fill-hover); } /* No card-level background here. --bg-row-hover is only defined under .is-light / .panel-light / .panel-dark and this section is a plain .section, so the declaration that used to sit here never resolved — it looked like a hover and was dead. The badge alone carries the state, in the neutral fill rather than the orange it used to take: orange is live state on this page, and ten of these lighting up under the cursor was the whole complaint. Specificity beats the .reason:hover rule further down, so order is moot. */ a.reason{ transition:background-color .15s; } a.reason:hover .reason-n{ background:var(--fill-hover); color:var(--label); } a.trow:focus-visible, a.reason:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:8px; } /* ============================================================================ ZERO COMMISSION Three columns, read across: what each one takes out of the same contract. Ours carries the brand and the only bright figures on the panel. ========================================================================= */ /* Ours inverts — the same move the page already uses for a standout surface (the pull-quote card, the primary button). A brand wash read as a different product; white against five dark columns cannot be missed. */ /* ============================================================================ 10 REASONS ========================================================================= */ .reasons{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--separator); border-radius:18px; overflow:hidden; } .reason{ background:var(--bg); padding:26px 24px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start; } .reason-n{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto; background:var(--fill); color:var(--label-2); font-family:var(--font-display); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.011em; } .reason:hover .reason-n{ background:var(--live-soft); color:var(--live-on-soft); } .reason h3{ font-size:17px; font-weight:600; letter-spacing:-.015em; line-height:1.3; } .reason p{ margin-top:8px; font-size:14px; line-height:1.55; color:var(--label-2); letter-spacing:-.011em; } @media (max-width:760px){ .reasons{ grid-template-columns:minmax(0,1fr); } } /* ============================================================================ WHO IT IS FOR — the lane The argument is a trade route, so it is drawn as one: a real map of the eight Gulf markets and the Chinese manufacturing centres they buy from, the network between them baked once, and a pulse travelling one route at a time. Under it, the two ends named — and the reader's end inverted, since they are one of them. ========================================================================= */ /* No frame. The map is the picture, not a component in a card — a border and a radius around it turned a world into a widget. It runs the full width of the column, on the page's own ground. */ .lane{ margin-top:40px; } /* the direction the pulses travel, stated once — the head is on the Gulf end, because that is the end everything on this map is going to */ /* The box matches what the projection actually draws for this bbox. Set wider than the map, fitExtent letterboxes it: at 104/38 there were 206px of nothing down each side and the world sat in the middle like a stamp. */ .lane-map{ position:relative; aspect-ratio:1.88; } /* A radius can only be seen if there is something to round. The canvas was transparent — dots floating on the page — so clipping its corners clipped nothing. It gets its own ground, one step up from the section, and the corner reads. */ .lane-map canvas{ display:block; width:100%; height:100%; /* the section itself is now --bg-elevated, so the map needs the darker ground to read as a separate surface rather than dissolving into it */ background:var(--bg-deep); border-radius:28px; } @media (max-width:860px){ /* The ratio stays at the desktop 1.88. The map is drawn cover-style inside a bbox whose own ratio is 1.37, so a taller box does not show more map — it shows more LATITUDE, and the latitude either side of the frame is open sea. At 1.5 the band above Kazakhstan and the water below the Gulf came into view as empty strips, which reads as the dots being cut off top and bottom. Same framing as the desktop, just smaller. */ .lane-foot{ grid-template-columns:minmax(0,1fr); } } /* ---------- what "seller" actually covers ---------- */ .tags{ margin-top:14px; display:flex; flex-wrap:wrap; gap:6px; } .chip.is-more{ background:transparent; border:1px dashed var(--separator-strong); color:var(--label-3); } .chip.is-more:hover{ background:transparent; color:var(--label-2); } @media (max-width:860px){ } /* ============================================================================ QUESTIONS The same accordion the pricing page uses — one component, both pages. On the landing each answer closes on the fact that settles it, set apart from the answer but not labelled: a claim that announces itself as proof reads as the opposite. ========================================================================= */ .faq{ max-width:780px; margin:40px auto 0; border-top:1px solid var(--separator); } .faq-item{ border-bottom:1px solid var(--separator); } .faq-item summary{ position:relative; display:flex; align-items:center; gap:16px; padding:20px 34px 20px 0; cursor:pointer; list-style:none; font-size:16px; font-weight:600; letter-spacing:-.01em; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; border-radius:6px; } .faq-sign{ position:absolute; inset-inline-end:4px; top:50%; width:13px; height:13px; margin-top:-6px; } .faq-sign::before, .faq-sign::after{ content:""; position:absolute; left:0; top:6px; width:13px; height:1.5px; background:var(--label-2); border-radius:1px; transition:transform .2s var(--ease); } .faq-sign::after{ transform:rotate(90deg); } .faq-item[open] .faq-sign::after{ transform:rotate(0); } .faq-a{ padding:0 34px 22px 0; } .faq-a p{ font-size:15px; line-height:1.6; color:var(--label-2); letter-spacing:-.016em; } /* scoped past `.faq-a p`, which would otherwise win on specificity */ .faq-a .faq-fact{ margin-top:16px; padding-top:14px; border-top:1px solid var(--separator); font-size:13px; line-height:1.55; color:var(--label-3); letter-spacing:-.006em; } .faq-a .faq-fact b{ font-family:var(--font-display); font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--label); } /* ============================================================================ FINAL CTA + FOOTER ========================================================================= */ /* The closing block repeats the hero's promise, so it repeats its background — but the copy is centred here, so the city is pushed out to both edges instead of to one. Same skyline, different seed: it should rhyme, not repeat. */ .final{ overflow:hidden; } .final-bg{ position:absolute; left:0; right:0; top:0; height:640px; z-index:0; pointer-events:none; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 15%, #000 58%, transparent 96%); mask-image:linear-gradient(180deg, transparent 0, #000 15%, #000 58%, transparent 96%); } .final-bg canvas{ display:block; width:100%; height:100%; opacity:.88; } /* same reasoning as the hero, measured out from the centre because the copy is */ .final-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0, rgba(22,22,23,.5) calc(50% - 570px), rgba(22,22,23,.95) calc(50% - 430px), var(--bg) calc(50% - 350px), var(--bg) calc(50% + 350px), rgba(22,22,23,.95) calc(50% + 430px), rgba(22,22,23,.5) calc(50% + 570px), transparent 100%); } /* the canvas is positioned, so the copy has to be too or it paints underneath */ .final > .wrap, .final-slider{ position:relative; z-index:2; } @media (max-width:860px){ .final-bg{ height:480px; } } .final-in{ text-align:center; } .final h2{ max-width:20ch; margin-inline:auto; } .final p{ margin-top:20px; max-width:56ch; margin-inline:auto; } .final-acts{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } .final-note{ margin-top:18px; max-width:none; font-size:13px; color:var(--label-3); letter-spacing:-.006em; } /* ============================================================================ FOOTER Brand on its own column, then the three offices on one baseline. Headings carry the brand; everything under them is quiet. ========================================================================= */ .foot{ border-top:1px solid var(--separator); padding-block:60px 28px; } .foot-grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px; } /* 11 uppercase label · 13 secondary · 14 body — the page's own scale */ .foot h4{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--label); } .foot-col > h4 + *{ margin-top:20px; } .foot ul{ display:grid; gap:12px; } .foot ul a{ font-size:14px; color:var(--label-2); transition:color .12s; letter-spacing:-.011em; } .foot ul a:hover{ color:var(--label); } .foot-tag{ margin-top:20px; max-width:28ch; font-size:14px; line-height:1.6; color:var(--label-2); letter-spacing:-.011em; } .social{ display:flex; gap:8px; margin-top:26px; } .social a{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; border:1px solid var(--separator); color:var(--label-2); transition:border-color .12s, color .12s, background-color .12s; } .social a:hover{ border-color:var(--separator-strong); background:var(--fill); color:var(--label); } .foot-mail{ display:block; font-size:14px; color:var(--label-2); transition:color .12s; letter-spacing:-.011em; } .foot-tel{ display:block; margin-top:10px; font-size:14px; color:var(--label-2); transition:color .12s; letter-spacing:-.011em; } .foot-mail:hover, .foot-tel:hover{ color:var(--label); } .foot-col p:not(.foot-tag){ margin-top:14px; font-size:13px; line-height:1.6; color:var(--label-3); letter-spacing:-.006em; } .foot-base{ margin-top:56px; padding-top:22px; border-top:1px solid var(--separator); display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; font-size:12px; color:var(--label-3); } .foot-markets{ margin-inline-start:auto; } @media (max-width:1080px){ .foot-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:44px; } .foot-brand{ grid-column:span 3; } } @media (max-width:720px){ .foot-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 28px; } .foot-brand{ grid-column:span 2; } } @media (max-width:480px){ .foot-grid{ grid-template-columns:minmax(0,1fr); } .foot-brand{ grid-column:auto; } .foot-markets{ margin-inline-start:0; } /* One column on a phone: ragged-left columns under a centred page read as a mistake, so the whole footer centres with it. */ .foot-col, .foot-base{ text-align:center; } .foot-tag{ margin-inline:auto; } .foot ul{ justify-items:center; } .social{ justify-content:center; } .foot-base{ justify-content:center; } } /* ---------- section head helper ---------- */ .shead{ max-width:64ch; } .shead h2{ margin-top:18px; } .shead p{ margin-top:20px; } .shead-center{ margin-inline:auto; text-align:center; } .shead-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:end; max-width:none; } .shead-split p{ margin-top:0; } @media (max-width:860px){ .shead-split{ grid-template-columns:minmax(0,1fr); gap:20px; align-items:start; } } /* ---------- marquee ---------- */ .marquee{ overflow:hidden; border-block:1px solid var(--separator); padding-block:16px; } .marquee-track{ display:flex; width:max-content; gap:0; animation:mq 44s linear infinite; } .marquee-track span{ display:inline-flex; align-items:center; gap:22px; padding-inline-end:22px; font-size:13px; font-weight:500; color:var(--label-3); white-space:nowrap; letter-spacing:-.006em; } .marquee-track i{ width:4px; height:4px; border-radius:50%; background:var(--live); flex:0 0 auto; } @keyframes mq{ to{ transform:translateX(-50%) } } .marquee:hover .marquee-track{ animation-play-state:paused; } /* ============================================================================ ADDITIONS ========================================================================= */ /* ---------- language picker ---------- */ .lang{ position:relative; } .lang-btn{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 10px; border-radius:8px; color:var(--label-2); font-size:13px; font-weight:500; transition:background-color .12s, color .12s; letter-spacing:-.006em; } .lang-btn:hover, .lang-btn[aria-expanded="true"]{ background:var(--fill); color:var(--label); } /* The entries became links to real pages, and this was still written for the buttons they used to be — so nothing matched, the