@charset "utf-8"; /* ===================================================================== ERGOSPHERE - ONE FILE (one-file.html) namespaced .of_ Sibling of business-case.html (.bc_), verification.html (.vv_), the-name.html (.tn_). The page's job: a practitioner recognises their own working folder, then sees the same project as one file. The signature element is the Explorer window in the hero, rendered in HTML so it is crisp, editable and flips between the two states without a screenshot. Palette, written literally so the page survives a CMS that strips vars. #0a1628 deep navy - ground #0d1a2d raised navy - alternating sections #070e1b darkest navy - wells and the closing block #00d4ff site cyan - the accent. Company primary: this is a core-identity page, no audience accent #f5b249 amber - reserved for "which one is current?" marks Explorer window (Windows 11, dark): #202020 chrome #191919 list body #2b2b2b hover #e6e6e6 primary text #9d9d9d secondary text File type colours, used only on the icons and the mapping table: #21a366 Excel #2b7cd3 Word #3955a3 Visio #e5473b Acrobat #ea7600 Blender #e8c16a folder #00d4ff ErgoSphere project Display: Poppins. Body: Mulish. Filenames in prose: IBM Plex Mono. Inside the Explorer window only: Segoe UI, because that is what Explorer uses. Everywhere else the site's faces hold. Link AFTER ergosphere-mobile.css in one-file.html . No inline style or script on the page: the flip and the row reveal live in js/ergosphere-one-file.js. ===================================================================== */ .of_section { position: relative; overflow: hidden; width: 100%; clear: both; float: left; } .of_ground { background: #0a1628; padding: 84px 0; } .of_raised { background: #0d1a2d; padding: 84px 0; } .of_wrap { max-width: 760px; margin: 0 auto; position: relative; z-index: 2; clear: both; } .of_wrap_wide { max-width: 1120px; margin: 0 auto; position: relative; z-index: 2; clear: both; } .of_wrap + .of_wrap, .of_wrap_wide + .of_wrap, .of_wrap + .of_wrap_wide { margin-top: 44px; } /* site chrome: the logo sizing the other pages carry inline */ .of_page .grax_tm_topbar .logo img { max-height: 100px; } .of_page .grax_tm_mobile_menu .logo img { max-height: 80px; } /* ---------- shared type ---------- */ .of_kicker { display: block; font-family: 'Poppins', sans-serif; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: #00d4ff; font-weight: 500; margin-bottom: 14px; } .of_h2 { font-family: 'Poppins', sans-serif; font-size: 32px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 2px; line-height: 1.2; margin: 0 0 28px; } .of_h2 span { color: #00d4ff; } .of_essay p { font-size: 17px; line-height: 1.9; color: rgba(255,255,255,.78); margin: 0 0 24px; } .of_essay p:last-child { margin-bottom: 0; } .of_essay p strong { color: #fff; font-weight: 600; } .of_essay ul { list-style: none; margin: 0 0 24px; padding: 0; } .of_essay ul:last-child { margin-bottom: 0; } .of_essay ul li { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.8; color: rgba(255,255,255,.75); margin: 0 0 8px; } .of_essay ul li::before { content: ""; position: absolute; left: 4px; top: .78em; width: 8px; height: 8px; border-radius: 50%; background: rgba(0,212,255,.55); } .of_essay a { color: #00d4ff; text-decoration: none; border-bottom: 1px solid rgba(0,212,255,.4); } .of_essay a:hover { border-color: #00d4ff; } /* a filename, wherever it appears in prose. Page rule: every file is set as a file, with its icon, so the reader never has to parse a name. */ .of_file { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: .86em; color: #e6e6e6; white-space: nowrap; letter-spacing: .1px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 5px; padding: 3px 9px 3px 7px; max-width: 100%; } .of_file .of_ico { flex: 0 0 auto; } .of_ico { width: 16px; height: 16px; display: inline-block; vertical-align: middle; } .of_ico_lg { width: 22px; height: 22px; } /* pull-quote: the page's argument in one line */ .of_pull { border-left: 3px solid #00d4ff; padding: 8px 0 8px 28px; margin: 0 0 30px; font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 300; font-size: 25px; line-height: 1.45; color: #fff; } /* visible keyboard focus, page-wide */ .of_section a:focus-visible, .of_section button:focus-visible, .footer_section a:focus-visible { outline: 2px solid #00d4ff; outline-offset: 3px; border-radius: 2px; } /* ===================================================================== HERO - the folder. The headline is short because the window under it is the argument. ===================================================================== */ .of_hero { text-align: center; padding: 168px 0 96px; background: #0a1628; } .of_hero_glow { position: absolute; left: 50%; top: 62%; width: 1100px; height: 700px; transform: translate(-50%,-50%); background: radial-gradient(ellipse, rgba(0,212,255,.07), rgba(0,212,255,.03) 40%, transparent 66%); pointer-events: none; z-index: 0; } .of_title { font-family: 'Poppins', sans-serif; font-size: 56px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 4px; line-height: 1.08; margin: 0; } .of_title span { color: #00d4ff; } .of_lead { font-family: 'Poppins', sans-serif; font-weight: 300; font-style: italic; font-size: 21px; line-height: 1.55; color: rgba(255,255,255,.85); max-width: 700px; margin: 28px auto 0; } /* ---------- the flip: two radios styled as a segmented control ---------- */ .of_flip { display: inline-flex; margin: 44px auto 0; padding: 4px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); font-family: 'Poppins', sans-serif; } .of_flip input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .of_flip label { cursor: pointer; padding: 11px 26px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.6); margin: 0; transition: color .25s ease, background .25s ease, box-shadow .25s ease; user-select: none; display: inline-flex; align-items: center; gap: 10px; line-height: 1.2; } .of_flip label small { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 1px; color: rgba(255,255,255,.4); font-weight: 500; } .of_flip label:hover { color: #fff; } .of_flip input:checked + label { background: #00d4ff; color: #071018; box-shadow: 0 0 24px rgba(0,212,255,.25); } .of_flip input:checked + label small { color: rgba(7,16,24,.65); } .of_flip input:focus-visible + label { outline: 2px solid #fff; outline-offset: 3px; } .of_hero_note { margin: 20px auto 0; max-width: 620px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.45); line-height: 1.7; } /* ===================================================================== THE EXPLORER WINDOW. Windows 11 details view, dark. Every measurement here is chosen to read as the real thing at a glance: 30px rows, a 16px icon, four columns, folders sorted first. ===================================================================== */ .of_explorer { --x-chrome: #202020; --x-body: #191919; --x-hover: #2b2b2b; --x-line: rgba(255,255,255,.08); --x-text: #e6e6e6; --x-dim: #9d9d9d; margin: 34px auto 0; max-width: 1120px; text-align: left; font-family: 'Segoe UI', 'Segoe UI Variable Text', system-ui, -apple-system, sans-serif; font-size: 13px; color: var(--x-text); background: var(--x-body); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.6); } .of_explorer, .of_explorer * { box-sizing: border-box; } /* title bar with one tab */ .of_x_title { display: flex; align-items: center; justify-content: space-between; height: 40px; background: var(--x-chrome); padding: 0 0 0 8px; } .of_x_tab { display: inline-flex; align-items: center; gap: 8px; height: 32px; margin-top: 8px; padding: 0 14px; background: var(--x-body); border-radius: 8px 8px 0 0; font-size: 12.5px; color: var(--x-text); max-width: 60%; } .of_x_tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .of_x_tab i { font-style: normal; color: var(--x-dim); margin-left: 6px; } .of_x_winbtns { display: flex; height: 100%; } .of_x_winbtns i { display: flex; align-items: center; justify-content: center; width: 46px; height: 100%; font-style: normal; color: var(--x-text); font-size: 11px; } .of_x_winbtns i:last-child { font-size: 13px; } /* command bar */ .of_x_cmd { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px; background: var(--x-chrome); border-bottom: 1px solid var(--x-line); overflow: hidden; white-space: nowrap; } .of_x_cmd span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 4px; color: var(--x-text); font-size: 12.5px; } .of_x_cmd span.is-new { color: #fff; } .of_x_cmd svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .of_x_cmd .is-dim { color: var(--x-dim); } .of_x_cmd hr { width: 1px; height: 22px; margin: 0 6px; border: 0; background: rgba(255,255,255,.14); } /* address bar */ .of_x_addr { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; background: var(--x-chrome); border-bottom: 1px solid var(--x-line); } .of_x_navbtns { display: inline-flex; gap: 2px; color: var(--x-dim); } .of_x_navbtns b { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-weight: 400; font-size: 15px; border-radius: 4px; } .of_x_navbtns b.is-on { color: var(--x-text); } .of_x_crumbs { flex: 1 1 auto; display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; min-width: 0; background: var(--x-body); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; white-space: nowrap; } .of_x_crumbs .of_ico { margin-right: 4px; } .of_x_crumbs em { font-style: normal; color: var(--x-text); } .of_x_crumbs i { font-style: normal; color: var(--x-dim); padding: 0 3px; } .of_x_crumbs em:last-of-type { font-weight: 600; } .of_x_search { flex: 0 0 220px; display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 10px; background: var(--x-body); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; color: var(--x-dim); font-size: 12.5px; overflow: hidden; white-space: nowrap; } .of_x_search svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: 0 0 auto; } /* body: list and details pane. No navigation pane: Windows 11 lets you collapse it, and the filenames need the width. */ .of_x_body { display: flex; align-items: stretch; background: var(--x-body); min-height: 420px; } .of_x_list { flex: 1 1 auto; min-width: 0; position: relative; } .of_x_head, .of_x_row { display: grid; grid-template-columns: minmax(0,1fr) 140px 176px 76px; align-items: center; column-gap: 12px; padding: 0 14px; } .of_x_head { height: 32px; color: var(--x-dim); font-size: 12px; border-bottom: 1px solid var(--x-line); } .of_x_head span:last-child, .of_x_row .of_x_size { text-align: right; } .of_x_head span:first-child::after { content: " \02C4"; color: var(--x-dim); font-size: 10px; } .of_x_rows { list-style: none; margin: 0; padding: 4px 0 0; } .of_x_row { height: 30px; font-size: 12.5px; color: var(--x-text); border-radius: 4px; margin: 0 6px; padding: 0 8px; } .of_x_row:hover { background: var(--x-hover); } .of_x_row.is-sel { background: rgba(255,255,255,.1); } .of_x_name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .of_x_name .of_ico { flex: 0 0 auto; } .of_x_date, .of_x_type, .of_x_size { color: var(--x-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; } .of_x_row mark { background: none; color: #f5b249; font-weight: 600; } /* row reveal on load, driven by the script adding .is-in */ .of_x_row { opacity: 0; transform: translateY(4px); transition: opacity .28s ease, transform .28s ease, background .12s ease; } .of_x_row.is-in { opacity: 1; transform: none; } .of_x_rows.of_x_after .of_x_row.is-in { transition-delay: 0s; } /* the two states */ .of_x_before, .of_x_after { transition: opacity .3s ease; } .of_x_after { position: absolute; left: 0; right: 0; top: 32px; } .of_explorer[data-state="before"] .of_x_after { opacity: 0; pointer-events: none; visibility: hidden; } .of_explorer[data-state="after"] .of_x_before { opacity: 0; pointer-events: none; visibility: hidden; } .of_explorer[data-state="after"] .of_x_after { opacity: 1; visibility: visible; } .of_x_after .of_x_row.is-sel .of_x_name { color: #fff; font-weight: 600; } .of_x_after .of_x_row .of_x_type { color: #7fe6ff; } /* details pane */ .of_x_pane { flex: 0 0 250px; border-left: 1px solid var(--x-line); background: var(--x-chrome); padding: 22px 18px; font-size: 12.5px; position: relative; } .of_x_pane > div { transition: opacity .3s ease; } .of_x_pane_after { position: absolute; left: 18px; right: 18px; top: 22px; } .of_explorer[data-state="before"] .of_x_pane_after { opacity: 0; visibility: hidden; } .of_explorer[data-state="after"] .of_x_pane_before { opacity: 0; visibility: hidden; } .of_x_pane_head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; word-break: break-word; } .of_x_pane_head .of_ico { flex: 0 0 auto; } .of_x_pane_type { color: var(--x-dim); margin: 0 0 14px 32px; } .of_x_pane dl { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 5px; font-size: 11.5px; } .of_x_pane dt { color: var(--x-dim); white-space: nowrap; } .of_x_pane dd { margin: 0; color: var(--x-text); white-space: nowrap; } .of_x_pane dd.is-wrap { white-space: normal; } .of_x_pane h5 { margin: 18px 0 8px; font: 600 12px 'Segoe UI', system-ui, sans-serif; color: var(--x-dim); text-transform: none; letter-spacing: 0; } .of_x_pane ul { list-style: none; margin: 0; padding: 0; } .of_x_pane ul li { position: relative; padding: 3px 0 3px 14px; color: var(--x-text); font-size: 12px; line-height: 1.4; } .of_x_pane ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #00d4ff; } .of_x_pane ul li b { color: #fff; font-weight: 600; } .of_x_pane_after ul li small { display: block; color: var(--x-dim); font-size: 11px; } /* status bar */ .of_x_status { display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 14px; background: var(--x-chrome); border-top: 1px solid var(--x-line); color: var(--x-dim); font-size: 12px; } .of_x_status b { font-weight: 400; color: var(--x-text); } .of_x_status .of_x_views { display: inline-flex; gap: 4px; } .of_x_status .of_x_views i { display: inline-block; width: 14px; height: 12px; border: 1px solid var(--x-dim); border-radius: 2px; } .of_x_status .of_x_views i.is-on { background: rgba(255,255,255,.15); border-color: var(--x-text); } /* ===================================================================== MONDAY MORNING - the clock. Time is the structural device because it encodes the true thing: by mid afternoon there are seven files and no findings. Each entry is a time, a file created, and what it costs later. ===================================================================== */ .of_clock { margin: 40px 0 0; position: relative; } .of_clock::before { content: ""; position: absolute; left: 82px; top: 8px; bottom: 8px; width: 1px; background: rgba(0,212,255,.22); } .of_tick { position: relative; display: grid; grid-template-columns: 62px 1fr; column-gap: 40px; padding: 0 0 34px; } .of_tick:last-child { padding-bottom: 0; } .of_tick_time { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 15px; font-weight: 600; color: #00d4ff; letter-spacing: .5px; padding-top: 5px; text-align: right; font-variant-numeric: tabular-nums; } .of_tick_time::after { content: ""; position: absolute; left: 78px; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: #0a1628; border: 2px solid #00d4ff; box-sizing: border-box; } .of_tick_body { min-width: 0; } .of_tick_body .of_file { margin: 0 0 12px; font-size: 13.5px; } .of_tick_body h3 { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; margin: 0 0 10px; line-height: 1.4; } .of_tick_body p { font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.72); margin: 0; } .of_tick_cost { margin: 12px 0 0; padding: 10px 14px; border-left: 2px solid rgba(245,178,73,.6); background: rgba(245,178,73,.05); font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.7); } .of_tick_cost b { display: block; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: #f5b249; margin-bottom: 4px; font-weight: 600; } .of_tick.is-end .of_tick_time::after { background: #00d4ff; } .of_tick.is-end .of_tick_body p { color: #fff; font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 21px; line-height: 1.5; font-style: italic; } .of_tick.is-end .of_tick_body p strong { font-weight: 600; font-style: normal; } /* the tally under the clock */ .of_tally { margin: 44px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; } .of_tally div { flex: 1 1 140px; padding: 18px 14px 16px; text-align: center; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.025); } .of_tally div:first-child { border-radius: 10px 0 0 10px; } .of_tally div:last-child { border-radius: 0 10px 10px 0; } .of_tally div + div { border-left: 0; } .of_tally b { display: block; font-size: 32px; font-weight: 600; color: #fff; line-height: 1; letter-spacing: -.5px; } .of_tally small { display: block; margin-top: 10px; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.45); } .of_tally div.is-zero b { color: #f5b249; } .of_tally div.is-zero small { color: rgba(245,178,73,.85); } /* ===================================================================== WEEK TWELVE - the suffix ladder. A stripped Explorer list sorted by date modified, because that is how you look for the current one. ===================================================================== */ .of_ladder { margin: 36px 0 0; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; overflow: hidden; background: #191919; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 12.5px; color: #e6e6e6; } .of_ladder .of_x_head, .of_ladder .of_x_row { grid-template-columns: minmax(0,1fr) 150px 82px; } .of_ladder .of_x_head span:first-child::after { content: ""; } .of_ladder .of_x_head span:nth-child(2)::after { content: " \02C5"; color: #9d9d9d; font-size: 10px; } .of_ladder .of_x_row { opacity: 1; transform: none; } .of_ladder .of_x_rows { padding-bottom: 6px; } .of_ladder .of_x_row.is-q { background: rgba(245,178,73,.07); } .of_ladder .of_x_row.is-q .of_x_name::after { content: "sent?"; margin-left: 10px; font: 600 10px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 1.5px; text-transform: uppercase; color: #f5b249; border: 1px solid rgba(245,178,73,.5); border-radius: 3px; padding: 2px 6px; } .of_ladder_cap { margin: 12px 0 0; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.45); line-height: 1.7; } .of_questions { margin: 34px 0 0; padding: 0; list-style: none; counter-reset: q; } .of_questions li { position: relative; padding: 16px 0 16px 0; border-top: 1px solid rgba(255,255,255,.08); font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.5; color: #fff; } .of_questions li:last-child { border-bottom: 1px solid rgba(255,255,255,.08); } .of_questions li::before { content: "?"; display: inline-block; width: 26px; color: #f5b249; font-weight: 700; } /* ===================================================================== WAS / BECOMES - the mapping. Row heads are the filenames from the folder above, so the reader can check the flip line by line. ===================================================================== */ .of_map { margin: 40px 0 0; display: flex; flex-direction: column; gap: 12px; } .of_map_row { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1.4fr); align-items: start; column-gap: 18px; padding: 22px 26px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: rgba(255,255,255,.025); } .of_map_was { min-width: 0; } .of_map_was .of_file { font-size: 13px; margin-bottom: 8px; max-width: 100%; } .of_map_was .of_file span { overflow: hidden; text-overflow: ellipsis; } .of_map_was small { display: block; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.4); } .of_map_arrow { padding-top: 6px; text-align: center; color: #00d4ff; font-size: 20px; line-height: 1; } .of_map_arrow svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .of_map_now h3 { display: flex; align-items: center; gap: 10px; font-family: 'Poppins', sans-serif; font-size: 15.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; margin: 2px 0 8px; } .of_map_now h3 .of_ico { flex: 0 0 auto; } .of_map_now p { font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,.7); margin: 0; } .of_map_now p b { color: #fff; font-weight: 600; } .of_map_sum { margin: 30px 0 0; display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.5); } .of_map_sum b { font-size: 30px; color: #fff; font-weight: 600; letter-spacing: -.5px; margin-right: 8px; } .of_map_sum .is-one b { color: #00d4ff; } .of_map_sum .is-one { color: rgba(0,212,255,.85); } .of_map_sum i { font-style: normal; color: rgba(255,255,255,.3); font-size: 18px; } /* ===================================================================== REVISIONS - the delivery loop, drawn as a rail. A revision is an event in a register, not a filename, so the rail is a register row. ===================================================================== */ .of_rail { margin: 36px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; } .of_rail::before { content: ""; position: absolute; left: 10%; right: 10%; top: 17px; height: 1px; background: rgba(0,212,255,.3); } .of_rail_stop { position: relative; text-align: center; padding: 0 8px; } .of_rail_stop i { display: block; width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%; position: relative; z-index: 1; border: 1px solid rgba(0,212,255,.55); background: #0d1a2d; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-style: normal; font-size: 11px; font-weight: 600; line-height: 32px; color: #00d4ff; letter-spacing: .5px; } .of_rail_stop.is-issued i { background: #00d4ff; color: #071018; box-shadow: 0 0 22px rgba(0,212,255,.35); } .of_rail_stop.is-returned i { border-color: rgba(245,178,73,.7); color: #f5b249; } .of_rail_stop b { display: block; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #fff; margin-bottom: 6px; } .of_rail_stop span { display: block; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.6); } .of_rail_loop { margin: 22px 0 0; text-align: center; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(245,178,73,.85); } .of_facts { margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .of_fact { padding: 22px 24px; border: 1px solid rgba(255,255,255,.11); border-left: 3px solid #00d4ff; border-radius: 10px; background: rgba(255,255,255,.025); } .of_fact h3 { font-family: 'Poppins', sans-serif; font-size: 14.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; margin: 0 0 8px; } .of_fact p { font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,.66); margin: 0; } /* ===================================================================== CLOSING - platform over tool count. ===================================================================== */ .of_finale { background: #070e1b; padding: 100px 0 96px; text-align: center; } .of_finale_glow { position: absolute; left: 50%; top: 50%; width: 900px; height: 600px; transform: translate(-50%,-50%); background: radial-gradient(ellipse, rgba(0,212,255,.08), transparent 62%); pointer-events: none; z-index: 0; } .of_finale .of_h2 { font-size: 38px; } .of_finale_lead { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 20px; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 640px; margin: 0 auto; } .of_finale_lead strong { color: #fff; font-weight: 600; } .of_finale_lead a { color: #00d4ff; text-decoration: none; border-bottom: 1px solid rgba(0,212,255,.4); } .of_finale_lead a:hover { border-color: #00d4ff; } .of_cta_row { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .of_cta_row .btn_primary, .of_cta_row .btn_secondary { font-family: 'Poppins', sans-serif; } .of_finale_alt { margin: 26px auto 0; font-size: 15px; color: rgba(255,255,255,.6); } .of_finale_alt a { color: #00d4ff; text-decoration: none; border-bottom: 1px solid rgba(0,212,255,.4); } .of_finale_alt a:hover { border-color: #00d4ff; } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 1100px) { .of_x_pane { flex-basis: 224px; } .of_x_head, .of_x_row { grid-template-columns: minmax(0,1fr) 136px 150px 68px; } } @media (max-width: 960px) { .of_x_search { flex-basis: 150px; } .of_facts { grid-template-columns: 1fr; } .of_rail { grid-template-columns: repeat(5, minmax(0,1fr)); } .of_rail_stop span { font-size: 12.5px; } .of_map_row { grid-template-columns: 1fr; row-gap: 10px; padding: 20px 22px; } .of_map_arrow { text-align: left; padding: 0; } .of_map_arrow svg { transform: rotate(90deg); } } @media (max-width: 768px) { .of_hero { padding: 130px 0 66px; } .of_title { font-size: 34px; letter-spacing: 3px; } .of_lead { font-size: 18px; } .of_h2 { font-size: 25px; } .of_finale .of_h2 { font-size: 27px; } .of_pull { font-size: 20px; padding-left: 20px; } .of_ground, .of_raised { padding: 64px 0; } .of_flip label { padding: 10px 16px; font-size: 12px; letter-spacing: 1.2px; } .of_flip label small { display: none; } .of_explorer { font-size: 12.5px; border-radius: 8px; } .of_x_cmd { display: none; } .of_x_search { display: none; } .of_x_body { flex-wrap: wrap; min-height: 0; } .of_x_list { flex: 1 1 100%; } .of_x_head, .of_x_row { grid-template-columns: minmax(0,1fr) 138px; column-gap: 8px; } .of_x_date { font-size: 11.5px; } .of_x_type, .of_x_size, .of_x_head span:nth-child(3), .of_x_head span:nth-child(4) { display: none; } .of_x_pane { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--x-line); padding: 18px 16px; min-height: 0; } .of_x_pane_after { position: static; } .of_explorer[data-state="after"] .of_x_pane_before { display: none; } .of_explorer[data-state="before"] .of_x_pane_after { display: none; } .of_x_after { top: 32px; } .of_clock::before { left: 48px; } .of_tick { grid-template-columns: 38px 1fr; column-gap: 26px; } .of_tick_time { font-size: 13px; } .of_tick_time::after { left: 44px; } .of_tick_body h3 { font-size: 15px; } .of_tick_body p { font-size: 15px; } .of_tick.is-end .of_tick_body p { font-size: 18px; } .of_tick_body .of_file { white-space: normal; word-break: break-all; } .of_tally div { flex-basis: 100%; border-radius: 0; } .of_tally div:first-child { border-radius: 10px 10px 0 0; } .of_tally div:last-child { border-radius: 0 0 10px 10px; } .of_tally div + div { border-left: 1px solid rgba(255,255,255,.12); border-top: 0; } .of_ladder .of_x_head, .of_ladder .of_x_row { grid-template-columns: minmax(0,1fr) 138px; } .of_ladder .of_x_size, .of_ladder .of_x_head span:nth-child(3) { display: none; } .of_ladder .of_x_row.is-q .of_x_name::after { display: none; } .of_ladder .of_x_row.is-q .of_x_name { color: #f5b249; } .of_questions li { font-size: 16px; } .of_map_was .of_file { white-space: normal; word-break: break-all; } .of_map_sum b { font-size: 24px; } .of_rail { grid-template-columns: 1fr; gap: 18px; } .of_rail::before { left: 16px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto; } .of_rail_stop { display: grid; grid-template-columns: 34px 1fr; column-gap: 16px; text-align: left; padding: 0; } .of_rail_stop i { margin: 0; grid-row: 1 / span 2; text-align: center; } .of_rail_stop b { padding-top: 8px; } } @media (prefers-reduced-motion: reduce) { .of_section *, .of_section { animation: none !important; transition: none !important; } .of_x_row { opacity: 1; transform: none; } }