/* ========================================================================== ADIMATE style guide - the page chrome The bar, the breadcrumb and the block plate, shared by every subpage. It lives here rather than in each page because the two pages had drifted to byte-identical copies of it: the same 3825 characters, maintained twice. The next edit would have landed in one of them. The page-specific styles stay in their own file. This is only what every subpage has in common, and what a new one gets for free. ========================================================================== */ /* BOTH weights: the design uses SemiBold 600 for labels and Regular 400 for the UI - Menu face, which the stylesheet name is set in. Loading only 600 left the browser to fake the regular, and a faked weight at 12px is visibly heavier than the design. */ @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600&display=swap'); * { box-sizing: border-box; } /* THE SCROLLBAR MUST NOT MOVE THE PAGE. * * COLORS is long enough to scroll and TIMELINE is not, so switching between * them added and removed a scrollbar - and with it about fifteen pixels of * viewport. Everything centred shifted sideways on every navigation, which * reads as the layout being unstable rather than as a scrollbar appearing. * * scrollbar-gutter reserves the space whether or not there is anything to * scroll, so the centre line stays where it is. `stable both-edges` keeps the * page symmetrical - reserving on one side only would centre the content half * a scrollbar off. */ html { scrollbar-gutter: stable both-edges; } /* THE PAGE SITS ON --ui-main (#333333), not on --ui-bg (#222222). Changed by naming a different token rather than by editing --ui-bg: that token is the design's UI/BG and still means #222222 in Figma, so moving its value here would make the token file disagree with the file it was read from - and this page exists to prove the two agree. If the page really should be #222222 again, this is the one line to flip; if UI/BG itself is meant to become #333333, change it in Figma and the token file follows. */ body { margin: 0; background: var(--ui-main); color: var(--tx-light); font: var(--ui-tab); } /* ---- NAV (283:15158) ---------------------------------------------------- A 59px bar on --bx/disabled with a 1px --bx/enabled edge, holding a 1100px container. THE BOTTOM EDGE IS TWO LINES, in this order: 1px --bx/stroke-hover, then 1px --bx/enabled beneath it. A lighter line lifting the bar and a darker one settling it - which is why a single --bx/stroke-hover rule looked so stark earlier, and why a single dark one looked like nothing at all. The light half is the bar's own bottom border; the dark half belongs to the wrapper, so the two cannot drift apart. */ .nav { border-bottom: 1px solid var(--bx-enabled); } .nav-in { display: flex; align-items: center; justify-content: center; height: 59px; background: var(--bx-disabled); border: 1px solid var(--bx-enabled); border-bottom-color: var(--bx-stroke-hover); } /* 1280, the same measure as the block below. It was 1282 - the block's 1280 of content plus its own 1px border - which lined the OUTER edges up and pushed everything inside the bar a pixel wider than the content it sits above. ADIMATE and HOME overhung on the left, the tabs on the right. Aligning the CONTENT is what matters; a hairline border is not part of the measure. box-sizing: border-box is already global, so the block's border eats into its 1280 rather than adding to it - which is why 1280 here now matches exactly. */ .container { width: 1280px; max-width: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-left { display: flex; align-items: center; gap: 10px; white-space: nowrap; } .nav-left .brand { font: 600 14px/14px 'Chakra Petch', 'Segoe UI', system-ui, sans-serif; color: var(--hl-blue); } .nav-left .sub { font: var(--ui-tab); color: var(--tx-dark); } /* The button is 104 wide with 14/8 padding - a fixed width in the design, so it stays fixed here rather than hugging its label. */ .btn { width: 104px; padding: 8px 14px; background: var(--bx-enabled); border: 1px solid var(--bx-stroke); color: var(--tx-light); font: var(--ui-tab); text-align: center; text-decoration: none; display: block; } /* SEVERAL TABS NOW, not one. The bar held a single COLORS button, so from the timeline page there was no way anywhere - which is what "the menus are different" really was: not two designs, but one that could only reach one page. */ .tabs { display: flex; gap: 10px; } /* The current tab is the blue chip the block heads use, so "where am I" is answered by the same colour everywhere on the page. */ .btn.on { background: var(--hl-blue); border-color: var(--hl-blue-light); color: var(--tx-black); } .btn:hover:not(.on) { border-color: var(--bx-stroke-hover); } /* The footer is reserved, not designed: an empty band that holds its place so the pages need no further edits when it is drawn. */ .ft { display: flex; justify-content: center; border-top: 1px solid var(--bx-enabled); } .ft .container { padding: 20px 0; } /* ---- breadcrumb (284:15182) --------------------------------------------- */ .bc { display: flex; flex-direction: column; align-items: center; } .bc .container { padding: 20px 0; } .bc-left { display: flex; align-items: center; gap: 10px; white-space: nowrap; font: var(--ui-tab); } .bc-left a { color: var(--tx-light); text-decoration: none; } .bc-left i { font-style: normal; color: var(--tx-dark); } .bc-left b { font-weight: 600; color: var(--tx-light); } /* The right-hand slot of the breadcrumb row, 54px in the design when empty - it now names the stylesheet, so it sizes to its text instead. */ .bc-right { min-width: 54px; height: 10px; text-align: right; font: var(--ui-tab); color: var(--tx-dark); } /* ========================================================================== PAGE CHROME - the 1280 box and its blue header. These lived in each style-guide page, copied byte for byte. Four pages repeating them meant the fifth would copy a stale version, and the one that did - the ICONS sheet - carried the markup and none of the CSS, so it came out 601 wide with no border and a plain-text header. .frame is the whole box: 1280 wide, padded, with its own fill. A page that holds SEVERAL panels instead uses .layout for the width and .block for each panel - that is a different shape, not a different name for this one. ========================================================================== */ .box { display: flex; flex-direction: column; align-items: center; padding-bottom: 200px; } /* box-sizing so the 1280 is the OUTSIDE, as Figma draws it: the 21px padding leaves the 1238 the header bar and the grids are measured at. Without it the frame came out 1280 plus its padding and sat wider than the page. */ .frame { width: 1280px; max-width: 100%; padding: 21px; box-sizing: border-box; background: var(--tm-darklight); border: 1px solid var(--bx-stroke); display: flex; flex-direction: column; gap: 20px; } .bhead { display: flex; align-items: center; justify-content: space-between; } .head { align-self: flex-start; padding: 8px 12px; background: var(--hl-blue); border: 1px solid var(--hl-blue-light); color: var(--tx-black); font: var(--ui-tab); } .sheet { font: var(--ui-menu); color: var(--tx-light); white-space: nowrap; }