/* Extracted from the Falcon 5012 prototype. No external dependencies. All component classes, variables, IDs and queries are namespaced. */ .h3-platform-elements { --h3pe-blue:#009edb;--h3pe-blue-dark:#0077aa;--h3pe-navy:#081626;--h3pe-ink:#162432;--h3pe-muted:#586774;--h3pe-line:#dce3e8;--h3pe-pale:#f2f6f8;--h3pe-cyan:#53d1f3; width: 100%; min-width: 0; color: var(--h3pe-ink); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; background: #fff; text-align: left; } .h3-platform-elements, .h3-platform-elements *, .h3-platform-elements *::before, .h3-platform-elements *::after { box-sizing: border-box; } .h3-platform-elements button { margin: 0; border-radius: 0; text-transform: none; letter-spacing: normal; box-shadow: none; } .h3-platform-elements * { box-sizing:border-box } .h3-platform-elements button, .h3-platform-elements a { -webkit-tap-highlight-color:transparent } .h3-platform-elements button { font:inherit } .h3-platform-elements button { cursor:pointer } .h3-platform-elements a { color:inherit;text-decoration:none } .h3-platform-elements button { border:0 } .h3-platform-elements button:focus-visible, .h3-platform-elements a:focus-visible, .h3-platform-elements [tabindex]:focus-visible { outline:3px solid var(--h3pe-blue);outline-offset:5px } .h3-platform-elements button { color:inherit } .h3-platform-elements .h3pe-eyebrow { font-size:11px;letter-spacing:1.8px;font-weight:700;display:block;color:var(--h3pe-blue-dark);line-height:1.5 } .h3-platform-elements .h3pe-platform-tabs { display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--h3pe-line) } .h3-platform-elements .h3pe-platform-tabs button { background:#fff;padding:21px 16px 19px 0;display:flex;gap:11px;align-items:center;text-align:left;font-size:13px;color:#647380;position:relative;line-height:1.4 } .h3-platform-elements .h3pe-tab-num { font-size:10px;color:#7c8d9b } .h3-platform-elements .h3pe-platform-tabs button>span:last-child { margin-left:auto;font-size:17px;margin-right:8px } .h3-platform-elements .h3pe-platform-tabs button[aria-selected=true] { color:var(--h3pe-blue-dark);font-weight:600 } .h3-platform-elements .h3pe-platform-tabs button[aria-selected=true]:after { content:'';position:absolute;bottom:-1px;left:0;right:0;height:3px;background:var(--h3pe-blue) } .h3-platform-elements .h3pe-platform-tabs button:hover { background:#f8fbfc } .h3-platform-elements .h3pe-element-panel { display:grid;grid-template-columns:1fr 1fr;gap:60px;background:var(--h3pe-pale);padding:40px 48px;min-height:372px;align-items:center;margin-top:25px } .h3-platform-elements .h3pe-element-art { position:relative;max-width:370px;width:100%;margin:auto } .h3-platform-elements .h3pe-mini-label { font-size:9px;letter-spacing:2px;color:#718293;margin-bottom:20px } .h3-platform-elements .h3pe-mini-hosts { display:flex;justify-content:space-around } .h3-platform-elements .h3pe-mini-host { border:1px solid #aebdcb;padding:9px 25px;font-size:10px;letter-spacing:1px;border-radius:3px;background:#fff;transition:.25s } .h3-platform-elements .h3pe-mini-down { display:flex;justify-content:space-around;height:24px } .h3-platform-elements .h3pe-mini-down i { width:1px;background:#a0b5c3 } .h3-platform-elements .h3pe-mini-chassis { padding:22px 20px 12px;border:1px solid #bdcbd5;border-radius:4px;position:relative;background:#eaf0f4 } .h3-platform-elements .h3pe-mini-chassis-label { position:absolute;top:-8px;background:#f2f6f8;padding:0 8px;font-size:9px;letter-spacing:1.5px } .h3-platform-elements .h3pe-mini-fabric { border:1px solid var(--h3pe-blue);color:var(--h3pe-blue-dark);background:#e1f4fc;text-align:center;font-size:11px;padding:11px;transition:.25s } .h3-platform-elements .h3pe-mini-lines { height:21px;width:82%;margin:auto;border-left:1px solid #a0b5c3;border-right:1px solid #a0b5c3 } .h3-platform-elements .h3pe-mini-gpus { display:flex;gap:10px } .h3-platform-elements .h3pe-mini-gpus span { flex:1;border:1px solid #afbfcb;background:white;text-align:center;font-size:10px;padding:11px 0;transition:.25s } .h3-platform-elements .h3pe-mini-manager { border-top:1px dashed #a9b9c7;margin-top:15px;font-size:9px;padding-top:8px;color:#687f91;display:flex;justify-content:space-between } .h3-platform-elements .h3pe-mini-caption { font-size:9px;color:#718293;display:block;margin-top:12px } .h3-platform-elements .h3pe-element-art[data-h3pe-active=expansion] .h3pe-mini-gpus span, .h3-platform-elements .h3pe-element-art[data-h3pe-active=hosts] .h3pe-mini-host { border-color:var(--h3pe-blue);background:#d5f1fc;color:var(--h3pe-blue-dark) } .h3-platform-elements .h3pe-element-art[data-h3pe-active=management] .h3pe-mini-manager { background:#d5f1fc;color:var(--h3pe-blue-dark);border-color:var(--h3pe-blue);padding:8px } .h3-platform-elements .h3pe-element-art:not([data-h3pe-active=fabric]) .h3pe-mini-fabric { background:#fff;border-color:#afbfcb;color:#536776 } .h3-platform-elements .h3pe-element-content h3 { font-size:26px;line-height:1.2;font-weight:500;letter-spacing:-.5px;margin:12px 0 15px } .h3-platform-elements .h3pe-element-content>p { font-size:14px;color:var(--h3pe-muted);margin:0 0 22px;line-height:1.7 } .h3-platform-elements .h3pe-element-takeaway { border-left:2px solid var(--h3pe-blue);padding-left:15px;margin-bottom:22px } .h3-platform-elements .h3pe-element-takeaway>span { font-size:9px;color:#6b7a85;letter-spacing:1.5px } .h3-platform-elements .h3pe-element-takeaway p { font-size:13px;margin:5px 0;line-height:1.7 } .h3-platform-elements .h3pe-text-link { display:inline-flex;align-items:center;justify-content:space-between;gap:14px;color:var(--h3pe-blue-dark);font-size:13px;font-weight:600;background:none;padding:0 } .h3-platform-elements .h3pe-text-link:hover { text-decoration:underline } .h3-platform-elements .h3pe-text-link span { font-size:20px } @media(max-width:1150px) { .h3-platform-elements .h3pe-element-panel { gap:35px;padding:32px } } @media(max-width:850px) { .h3-platform-elements .h3pe-platform-tabs button { font-size:11px;padding-right:10px;gap:7px } .h3-platform-elements .h3pe-platform-tabs button>span:last-child { display:none } .h3-platform-elements .h3pe-element-panel { padding:30px 25px;gap:25px } .h3-platform-elements .h3pe-element-content h3 { font-size:23px } .h3-platform-elements .h3pe-mini-host { padding:8px 20px } } @media(max-width:600px) { .h3-platform-elements .h3pe-eyebrow { font-size:9px;letter-spacing:1.5px } .h3-platform-elements .h3pe-platform-tabs { grid-template-columns:1fr 1fr;border-top:1px solid var(--h3pe-line);border-bottom:0;gap:0 } .h3-platform-elements .h3pe-platform-tabs button { border-bottom:1px solid var(--h3pe-line);font-size:11px;min-height:67px;gap:7px;padding:15px 7px 15px 0 } .h3-platform-elements .h3pe-platform-tabs button:nth-child(even) { padding-left:12px } .h3-platform-elements .h3pe-tab-num { font-size:9px } .h3-platform-elements .h3pe-element-panel { grid-template-columns:1fr;padding:25px 22px;gap:27px;margin-top:22px } .h3-platform-elements .h3pe-element-art { max-width:320px } .h3-platform-elements .h3pe-mini-label { font-size:8px;margin-bottom:14px } .h3-platform-elements .h3pe-mini-caption { font-size:8px } .h3-platform-elements .h3pe-element-content h3 { font-size:25px } .h3-platform-elements .h3pe-element-content>p { font-size:13px } .h3-platform-elements .h3pe-element-takeaway p { font-size:12px } .h3-platform-elements .h3pe-element-content .h3pe-text-link { font-size:12px } } @media(max-width:600px) { .h3-platform-elements .h3pe-element-content .h3pe-text-link { min-height:44px } .h3-platform-elements .h3pe-platform-tabs button { scroll-margin-top:120px } } /* Keep the component's keyboard focus ring visible in host layouts. */ .h3-platform-elements [role="tab"] { min-height: 44px; } @media (prefers-reduced-motion: reduce) { .h3-platform-elements *, .h3-platform-elements *::before, .h3-platform-elements *::after { transition: none !important; animation: none !important; } } /* --------------------------------------------------------------------------- Site integration. Everything above is the delivered component, left as-is so a future drop-in can be diffed against it; these rules adapt it to this site. The component shipped with its own Arial stack and a 16px base. The page runs on myriad-pro at a 14px root, so the type was both a different face and out of step with the sections around it. Inheriting the family and expressing sizes in rem puts it back on the page's own scale — including the breakpoint steps in main.css, where the root drops to 13px and then 12px. --------------------------------------------------------------------------- */ .h3-platform-elements { font-family: inherit; font-size: 1rem; } .h3-platform-elements .h3pe-platform-tabs button { font-size: 1rem; } .h3-platform-elements .h3pe-eyebrow { font-size: .82rem; letter-spacing: .14em; } .h3-platform-elements .h3pe-element-content h3 { font-size: 1.85rem; font-weight: 600; letter-spacing: normal; } .h3-platform-elements .h3pe-element-content > p { font-size: 1.05rem; } .h3-platform-elements .h3pe-element-takeaway > span { font-size: .78rem; letter-spacing: .12em; } .h3-platform-elements .h3pe-element-takeaway p { font-size: 1rem; } .h3-platform-elements .h3pe-text-link { font-size: 1rem; } /* Diagram labels. These annotate the artwork rather than read as copy, so they were first set well below body size — up from the delivered 9-10px, which was illegible next to this page's text, but still small. Every one of them is now 1.3x that, per request: .72 -> .936, .78 -> 1.014, .85 -> 1.105. The factor is written out rather than folded into round numbers so the relationship stays visible. */ .h3-platform-elements .h3pe-mini-label, .h3-platform-elements .h3pe-mini-caption, .h3-platform-elements .h3pe-mini-chassis-label { font-size: .936rem; } .h3-platform-elements .h3pe-mini-host, .h3-platform-elements .h3pe-mini-gpus span, .h3-platform-elements .h3pe-mini-manager { font-size: 1.014rem; } .h3-platform-elements .h3pe-mini-fabric { font-size: 1.105rem; } @media (max-width: 850px) { .h3-platform-elements .h3pe-platform-tabs button { font-size: .88rem; } .h3-platform-elements .h3pe-element-content h3 { font-size: 1.6rem; } } @media (max-width: 600px) { .h3-platform-elements .h3pe-platform-tabs button { font-size: .88rem; } .h3-platform-elements .h3pe-element-content h3 { font-size: 1.55rem; } .h3-platform-elements .h3pe-element-content > p { font-size: 1rem; } .h3-platform-elements .h3pe-element-takeaway p { font-size: .95rem; } .h3-platform-elements .h3pe-element-content .h3pe-text-link { font-size: .95rem; } } /* Tab labels centred in their columns. Three things push them left as delivered, and all three have to go: the flex row packs to the start, the label carries text-align left, and the ↗ is shoved to the far edge with margin-left:auto so the pair never sits together. With that cleared, the label and its arrow centre as one group. The asymmetric padding goes too — 0 on the right at every width, plus an extra 12px on the left of the even columns below 600px, all of which existed to hold a left-aligned label against a right-aligned arrow. Below 850px the arrow is hidden anyway, so only the label is being centred there. The selected tab's 3px underline is unaffected: it is absolutely positioned across the whole cell, not to the text. */ .h3-platform-elements .h3pe-platform-tabs button { justify-content: center; text-align: center; padding-left: 16px; padding-right: 16px; } .h3-platform-elements .h3pe-platform-tabs button > span:last-child { margin-left: 0; margin-right: 0; } @media (max-width: 850px) { .h3-platform-elements .h3pe-platform-tabs button { padding-left: 10px; padding-right: 10px; } } @media (max-width: 600px) { .h3-platform-elements .h3pe-platform-tabs button, .h3-platform-elements .h3pe-platform-tabs button:nth-child(even) { padding-left: 7px; padding-right: 7px; } } /* Tab strip on the section's own colour instead of white. The component paints white on its root as well as on each button, so both have to let go of it; the panel below keeps its own --h3pe-pale and is unaffected. Every colour in the strip had to move with it. On #dbe4ef the delivered values fail: the unselected label #647380 drops to 3.80:1, the selected #0077aa to 3.88:1, and the rule under the strip, --h3pe-line #dce3e8, to 1.01:1 — invisible. The replacements are the ones the specification switcher on the same page already uses, so the two tablists now read alike: #4a5560 unselected at 5.93:1, #1a2332 on hover and when selected at 12.29:1. The selected tab's 3px underline moves off --h3pe-blue, which measures 2.37:1 here and misses the 3:1 that non-text needs, onto the darker --h3pe-blue-dark at 3.88:1. The variable itself is left alone: it also draws the focus ring, the fabric border and the takeaway rule, all of which sit on the panel where it still reads. Hover takes a slightly deeper shade of the section rather than the delivered #f8fbfc, which is all but white and would flash as a pale patch on a coloured field. */ #platform-elements .h3-platform-elements { background: none; --h3pe-line: #aec0d4; } #platform-elements .h3-platform-elements .h3pe-platform-tabs button { background: none; color: #4a5560; } #platform-elements .h3-platform-elements .h3pe-platform-tabs button:hover { background: #cbd9ea; color: #1a2332; } #platform-elements .h3-platform-elements .h3pe-platform-tabs button[aria-selected="true"] { color: #1a2332; } #platform-elements .h3-platform-elements .h3pe-platform-tabs button[aria-selected="true"]:after { background: var(--h3pe-blue-dark); } /* One connector line per GPU, instead of the two the component shipped with. Those two were the left and right borders of .h3pe-mini-lines, a box 82% of the chassis width — so they marked that box's edges, not any GPU. Measured on the page they landed at x 359 and 628 against GPU centres of 367, 451, 536 and 620: 8px out on both of the outer boxes, and nothing at all above the middle two. Adding two exact lines beside two that are 8px off would have made the offset obvious, so all four are redrawn. Each line now hangs off its own GPU box, which puts it on that box's centre by construction and keeps doing so at any width or GPU count. The 21px matches the strip they cross, which is the gap the component already had between the fabric and the row; .h3pe-mini-lines keeps that job and gives up its borders. */ #platform-elements .h3-platform-elements .h3pe-mini-lines { border-left: 0; border-right: 0; } #platform-elements .h3-platform-elements .h3pe-mini-gpus span { position: relative; } #platform-elements .h3-platform-elements .h3pe-mini-gpus span::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 21px; background: #a0b5c3; } /* Diagram and takeaway text brought up to 4.5:1. Five colour pairs in the delivered component measured short, across all four tabs: #718293 on #f2f6f8 3.63 "Platform at a glance" and the caption under the diagram #687f91 on #eaf0f4 3.63 "Integrated management", unselected #6b7a85 on #f2f6f8 4.07 "Why it matters" #0077aa on #d5f1fc 4.22 the highlighted GPUs, hosts and management row #0077aa on #e1f4fc 4.40 the highlighted switching fabric Each colour is darkened along its own hue only as far as it takes to clear 4.5:1 with a little room, so the diagram keeps its look. The two highlight fixes are written against the highlighted states alone: --h3pe-blue-dark itself is left as it is, because everywhere else it sits on the pale panel and already passes (4.58:1). */ #platform-elements .h3-platform-elements .h3pe-mini-label, #platform-elements .h3-platform-elements .h3pe-mini-caption { color: #627180; } /* 4.61:1 */ #platform-elements .h3-platform-elements .h3pe-mini-manager { color: #5a6e7e; } /* 4.61:1 */ #platform-elements .h3-platform-elements .h3pe-element-takeaway > span { color: #64717c; } /* 4.60:1 */ #platform-elements .h3-platform-elements .h3pe-element-art[data-h3pe-active=expansion] .h3pe-mini-gpus span, #platform-elements .h3-platform-elements .h3pe-element-art[data-h3pe-active=hosts] .h3pe-mini-host, #platform-elements .h3-platform-elements .h3pe-element-art[data-h3pe-active=management] .h3pe-mini-manager { color: #0070a1; } /* 4.65:1 on #d5f1fc */ #platform-elements .h3-platform-elements .h3pe-element-art[data-h3pe-active=fabric] .h3pe-mini-fabric { color: #0073a5; } /* 4.64:1 on #e1f4fc */ /* The drawing's parts select their tab when clicked (js/platform-elements.js); a pointer and a blue outline on hover say so. */ .h3-platform-elements [data-h3pe-target] { cursor: pointer; transition: outline-color .2s; outline: 2px solid transparent; outline-offset: 3px; border-radius: 3px; } .h3-platform-elements [data-h3pe-target]:hover { outline-color: rgba(0, 174, 239, .55); } /* Phones: the tab strip sticks under the page's own sticky bars while the panel is on screen (it is inside .h3-platform-elements, so it lets go when the panel ends), on the section's colour. Not on a wide screen, where the panel is short enough to need no switcher in view. */ @media (max-width: 767px) { #platform-elements .h3-platform-elements .h3pe-platform-tabs { position: sticky; top: calc(var(--header-height, 55px) + var(--tab-nav-height, 52px) - 1px); z-index: 5; background: #dbe4ef; } } /* Phones: one row that scrolls sideways instead of the 2 x 2 grid, each tab at its label's width and 44px tall, the next one peeking past the edge. */ @media (max-width: 600px) { #platform-elements .h3-platform-elements .h3pe-platform-tabs { display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-top: 0; border-bottom: 1px solid var(--h3pe-line); } #platform-elements .h3-platform-elements .h3pe-platform-tabs::-webkit-scrollbar { display: none; } /* [role=tab]: one notch more than falcon-type.css, which loads after this file */ #platform-elements .h3-platform-elements .h3pe-platform-tabs button[role=tab], #platform-elements .h3-platform-elements .h3pe-platform-tabs button[role=tab]:nth-child(even) { flex: 0 0 auto; min-height: 44px; padding: .7rem 1rem; border-bottom: 0; font-size: 14px; white-space: nowrap; } }