@charset "utf-8"; /* ===================================================================== ERGOSPHERE - NEED ADVICE (need-advice.html) namespaced .na_ Sibling of one-file.html (.of_), business-case.html (.bc_), the Workbook (.cb_), verification.html (.vv_). The page's job: a practitioner with a real problem believes, within one screen, that nobody here is selling anything, and then describes the problem. The signature element is the exchange: an invented question in the four-part shape the form asks for, beside the reply it would get in the four-part shape every reply takes. The form at the bottom is that question, empty. The type does the positioning. Every other page on the site sets its headings in uppercase Poppins. This one does not shout: sentence case, weight 300 and 400, and the first line of the page dims itself (the disclaimer is spoken quietly, the offer is spoken clearly). Palette, written literally so the page survives a CMS that strips custom properties. #0a1628 deep navy - ground #0d1a2d raised navy - alternating sections #070e1b darkest navy - the closing block #1a2332 GUNMETAL - the documented company secondary, used here in its proper structural role as the one banded surface, behind the limits. #8fa3bd pewter - this page's accent. Gunmetal's own hue (blue-grey, ~215) lifted until it carries text: 7.03:1 on the navy ground. The other themed pages take a saturated hue because they sell to a segment (cyan company, green Students, gold Defence, purple Partners). This page is the one that is not selling, so it takes the company's own neutral rather than a segment badge. #b9c9db pewter light - hover, 10.74:1 #6f8299 pewter deep - pressed Grey must never read as disabled. Buttons stay filled pewter with #0a1628 text, never ghost outlines, and the banded surface carries a pewter hairline because #1a2332 sits only 1.15:1 off the ground. Display: Poppins. Body: Mulish. Labels in the exchange, the form's small print and the terms line: IBM Plex Mono. Link AFTER ergosphere-mobile.css in need-advice.html . No inline style or script on the page: the reply reveal, the lane toggle and the form submit live in js/ergosphere-need-advice.js. ===================================================================== */ .na_section { position: relative; overflow: hidden; width: 100%; clear: both; float: left; } .na_ground { background: #0a1628; padding: 92px 0; } .na_raised { background: #0d1a2d; padding: 92px 0; } .na_wrap { max-width: 760px; margin: 0 auto; position: relative; z-index: 2; clear: both; } .na_wrap_wide { max-width: 1120px; margin: 0 auto; position: relative; z-index: 2; clear: both; } .na_page .grax_tm_topbar .logo img { max-height: 100px; } .na_page .grax_tm_mobile_menu .logo img { max-height: 80px; } /* the page's buttons take the page's accent */ .na_page .btn_primary { background: #8fa3bd; color: #0a1628; border: 0; cursor: pointer; font-family: 'Poppins', sans-serif; } .na_page .btn_primary:hover { background: #b9c9db; color: #0a1628; transform: none; } .na_page .btn_primary:active { background: #6f8299; } .na_page .btn_primary:disabled { opacity: .6; cursor: wait; } /* ---------- page title, the standard site component ---------- The base theme colours every span inside .grax_tm_title_holder via .grax_tm_all_wrap[data-color="blue"] (0,3,0) - which catches the accent spans AND .section_number. Match on .na_page to outrank it, exactly as .stu_page and .dfc_page do. */ .na_page.grax_tm_all_wrap[data-color] .grax_tm_title_holder span, .na_page.grax_tm_all_wrap[data-color] .section_number { color: #8fa3bd; } /* the standfirst sits under the title, so it centres with it and the hero's left-aligned block starts below */ .na_hero .grax_tm_title_holder { margin-bottom: 46px; } .na_hero .na_wrap { text-align: center; } .na_hero .na_terms, .na_hero .na_hero_links { justify-content: center; } /* visible keyboard focus, page-wide */ .na_section a:focus-visible, .na_section button:focus-visible, .na_section summary:focus-visible, .footer_section a:focus-visible { outline: 2px solid #8fa3bd; outline-offset: 3px; border-radius: 2px; } /* ---------- shared type ---------- */ .na_kicker { display: block; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #8fa3bd; font-weight: 500; margin: 0 0 18px; } .na_h2 { font-family: 'Poppins', sans-serif; font-size: 34px; font-weight: 300; color: #fff; text-transform: none; letter-spacing: 0; line-height: 1.25; margin: 0 0 22px; } .na_h2 strong { font-weight: 500; } .na_intro { font-size: 17.5px; line-height: 1.85; color: rgba(255,255,255,.74); margin: 0 0 44px; max-width: 760px; } .na_intro a, .na_prose a { color: #b9c9db; text-decoration: none; border-bottom: 1px solid rgba(143,163,189,.4); } .na_intro a:hover, .na_prose a:hover { border-color: #8fa3bd; color: #fff; } .na_prose p { font-size: 17px; line-height: 1.9; color: rgba(255,255,255,.78); margin: 0 0 22px; } .na_prose p:last-child { margin-bottom: 0; } /* ---------- the credential line under the hero terms ---------- */ .na_cred { margin: 22px 0 0; font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,.62); max-width: 660px; margin-left: auto; margin-right: auto; } .na_cred strong { color: #b9c9db; font-weight: 500; } /* ---------- what people bring: three shapes ---------- */ .na_kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; } .na_kind { position: relative; padding: 30px 28px 32px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: rgba(255,255,255,.02); } .na_kind_n { display: block; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 2px; color: #8fa3bd; margin: 0 0 14px; } .na_kind h3 { font-family: 'Poppins', sans-serif; font-size: 19px; font-weight: 400; color: #fff; text-transform: none; letter-spacing: 0; line-height: 1.35; margin: 0 0 12px; } .na_kind p { font-size: 15.5px; line-height: 1.8; color: rgba(255,255,255,.72); margin: 0; } /* ===================================================================== HERO - the thesis. The first sentence dims itself; the offer is the brightest thing on the screen. ===================================================================== */ .na_hero { background: #0a1628; padding: 178px 0 104px; text-align: left; } .na_hero_glow { position: absolute; left: 50%; top: 40%; width: 1200px; height: 760px; transform: translate(-50%,-50%); background: radial-gradient(ellipse, rgba(143,163,189,.075), rgba(143,163,189,.025) 42%, transparent 66%); pointer-events: none; z-index: 0; } .na_hero .na_wrap { max-width: 900px; } .na_title { margin: 0; text-transform: none; letter-spacing: 0; } .na_title .na_t_quiet { display: block; font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 27px; line-height: 1.4; color: rgba(255,255,255,.55); margin: 0 auto 26px; max-width: 640px; } .na_title .na_t_offer { display: block; font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 42px; line-height: 1.24; color: #fff; letter-spacing: -.2px; max-width: 820px; margin: 0 auto; } .na_title em { font-style: normal; color: #8fa3bd; } .na_terms { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 0; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.62); } .na_terms li { display: inline-flex; align-items: center; } .na_terms li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #8fa3bd; margin: 0 16px; opacity: .85; } .na_hero_links { margin-top: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; } .na_quiet { font-family: 'Poppins', sans-serif; font-size: 14px; letter-spacing: .3px; color: rgba(255,255,255,.7); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 2px; } .na_quiet:hover { color: #fff; border-color: #8fa3bd; } /* ===================================================================== THE EXCHANGE - an invented question beside the reply it would get. ===================================================================== */ .na_exchange { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 28px; align-items: start; } /* the question. Quiet, bordered, in the four parts the form asks for. */ .na_q { border: 1px solid rgba(255,255,255,.13); border-radius: 12px; padding: 28px 30px 30px; background: rgba(255,255,255,.02); position: sticky; top: 110px; } .na_q_head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); } .na_q_from { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: #fff; } .na_q_lane, .na_r_time { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.45); white-space: nowrap; } .na_q dl { margin: 0; } .na_q dt { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 6px; } .na_q dd { margin: 0 0 20px; font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,.74); } .na_q dd:last-child { margin-bottom: 0; } /* the reply. The warm one on the page. */ .na_r { border: 1px solid rgba(143,163,189,.32); border-radius: 12px; padding: 30px 36px 32px; background: linear-gradient(180deg, rgba(143,163,189,.07), rgba(143,163,189,.03) 60%, rgba(143,163,189,.05)); box-shadow: 0 30px 80px -40px rgba(143,163,189,.25); } .na_r_head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 26px; padding-bottom: 18px; border-bottom: 1px solid rgba(143,163,189,.22); } .na_r_re { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 13.5px; color: #fff; letter-spacing: .2px; } .na_r_part { display: grid; grid-template-columns: 158px minmax(0,1fr); column-gap: 26px; padding: 18px 4px; border-top: 1px solid rgba(255,255,255,.06); width: 100%; text-align: left; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; font: inherit; color: inherit; align-items: start; border-radius: 8px; transition: background .2s ease, padding .2s ease; } .na_r_part:hover, .na_r_part:focus-visible { background: rgba(143,163,189,.07); } .na_part_h { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: #8fa3bd; margin: 5px 0 0; line-height: 1.6; display: block; } .na_part_s { margin: 0; font-size: 16.5px; line-height: 1.85; color: rgba(255,255,255,.86); display: block; } .na_more { display: inline-block; margin-left: 10px; vertical-align: baseline; white-space: nowrap; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: #8fa3bd; border-bottom: 1px solid rgba(143,163,189,.45); padding-bottom: 1px; } .na_more::after { content: " →"; } .na_r_part:hover .na_more, .na_r_part:focus-visible .na_more { color: #b9c9db; border-color: #b9c9db; } /* the question card's trigger */ .na_q_sum { margin: 0 0 22px; font-size: 15.5px; line-height: 1.8; color: rgba(255,255,255,.78); } .na_open { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; width: 100%; padding: 13px 16px; cursor: pointer; background: transparent; border: 1px solid rgba(143,163,189,.35); border-radius: 8px; font-family: 'Poppins', sans-serif; font-size: 14.5px; color: #b9c9db; transition: background .2s ease, border-color .2s ease, color .2s ease; } .na_open::after { content: "→"; color: #8fa3bd; } .na_open:hover, .na_open:focus-visible { background: rgba(143,163,189,.1); border-color: #8fa3bd; color: #fff; } .na_open_meta { margin-left: auto; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.45); } .na_r_part:first-of-type { border-top: 0; padding-top: 0; } .na_r_close { margin: 6px 0 0; padding-top: 20px; border-top: 1px solid rgba(143,163,189,.22); font-size: 16.5px; line-height: 1.85; color: rgba(255,255,255,.86); } .na_r_sig { margin: 22px 0 0; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 1px; color: rgba(255,255,255,.5); } .na_r_sig b { color: #b9c9db; font-weight: 500; } /* the reveal: the reply's parts arrive one after another once the panel is on screen. Reduced motion, or a browser without observers, gets the whole reply at once. */ .na_r .na_r_part, .na_r .na_r_close, .na_r .na_r_sig { opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease; } .na_r.is-in .na_r_part, .na_r.is-in .na_r_close, .na_r.is-in .na_r_sig, .na_r.is-static .na_r_part, .na_r.is-static .na_r_close, .na_r.is-static .na_r_sig { opacity: 1; transform: none; } .na_r.is-in .na_r_part:nth-of-type(2) { transition-delay: .25s; } .na_r.is-in .na_r_part:nth-of-type(3) { transition-delay: .5s; } .na_r.is-in .na_r_part:nth-of-type(4) { transition-delay: .75s; } .na_r.is-in .na_r_close { transition-delay: 1s; } .na_r.is-in .na_r_sig { transition-delay: 1.2s; } .na_exchange_note { margin: 26px 0 0; font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,.5); } /* ===================================================================== TWO LANES - email by default, Teams when it warrants one. ===================================================================== */ .na_lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; } .na_lane { position: relative; padding: 30px 32px 32px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: rgba(255,255,255,.02); } .na_lane.is-default { border-color: rgba(143,163,189,.5); background: rgba(143,163,189,.04); } .na_lane h3 { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 400; color: #fff; margin: 0 0 12px; } .na_lane p { font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.74); margin: 0; } .na_lane_tag { display: inline-block; margin: 0 0 16px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.5); } .na_lane.is-default .na_lane_tag { color: #8fa3bd; } .na_lanes_note { margin: 28px 0 0; font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.85); max-width: 720px; } /* ===================================================================== THE LIMITS - the one warm band on the page is the one where we say no. ===================================================================== */ .na_limits { background: #1a2332; padding: 96px 0; border-top: 1px solid rgba(143,163,189,.22); border-bottom: 1px solid rgba(143,163,189,.22); } .na_limits::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,40,.55), rgba(10,22,40,0) 22%, rgba(10,22,40,0) 78%, rgba(13,26,45,.55)); pointer-events: none; } .na_limits .na_kicker { color: #b9c9db; } .na_limits_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 56px; margin-top: 44px; } .na_limits h3 { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.55); margin: 0 0 18px; } .na_limits ul { list-style: none; margin: 0; padding: 0; } .na_in li { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.84); margin: 0 0 10px; } .na_in li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: #8fa3bd; } .na_out li { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 22px; line-height: 1.4; color: #fff; margin: 0 0 14px; padding-left: 22px; position: relative; } .na_out li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 1px; background: rgba(255,255,255,.45); } .na_promise { margin: 56px 0 0; padding: 6px 0 6px 30px; border-left: 3px solid #8fa3bd; font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 29px; line-height: 1.4; color: #fff; max-width: 860px; } .na_promise_why { margin: 18px 0 0 33px; font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.6); } /* ===================================================================== THE FORM - the question, empty. Four fields, then how to reply, then who to reply to. ===================================================================== */ .na_form { margin-top: 8px; } .na_field { margin: 0 0 24px; } .na_field label, .na_lanepick legend { display: block; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500; color: #fff; margin: 0 0 8px; letter-spacing: 0; } .na_field label small, .na_lanepick legend small { display: block; font-family: 'Mulish', sans-serif; font-weight: 400; font-size: 13.5px; color: rgba(255,255,255,.52); margin-top: 3px; line-height: 1.5; } /* plugins.css styles bare inputs site-wide and paints them white on focus; the !important flags below are what keep these ones dark. */ .na_form input[type="text"], .na_form input[type="email"], .na_form textarea, .na_form select { display: block; width: 100%; box-sizing: border-box; font-family: 'Mulish', sans-serif !important; font-size: 15.5px !important; line-height: 1.6 !important; letter-spacing: 0 !important; color: #fff !important; background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 6px !important; padding: 13px 15px !important; height: auto !important; min-height: 0; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; } .na_form textarea { min-height: 110px; resize: vertical; } .na_form input::placeholder, .na_form textarea::placeholder { color: rgba(255,255,255,.32); opacity: 1; } .na_form input[type="text"]:focus, .na_form input[type="email"]:focus, .na_form textarea:focus, .na_form select:focus { outline: none; border-color: #8fa3bd !important; background: rgba(143,163,189,.05) !important; box-shadow: 0 0 0 3px rgba(143,163,189,.18); } .na_form select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 44px !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; } .na_form select option { background: #0d1a2d; color: #fff; } .na_form select:invalid { color: rgba(255,255,255,.45) !important; } .na_row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } /* how to reply: two radio cards */ .na_lanepick { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; } .na_lanepick legend { padding: 0; } .na_lanepick_opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .na_lane_opt { position: relative; display: block; cursor: pointer; margin: 0; } .na_lane_opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .na_lane_opt span.na_lane_card { display: block; padding: 16px 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(255,255,255,.03); transition: border-color .25s ease, background .25s ease; } .na_lane_opt b { display: block; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500; color: #fff; margin: 0 0 3px; } .na_lane_opt small { display: block; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.55); } .na_lane_opt:hover span.na_lane_card { border-color: rgba(255,255,255,.35); } .na_lane_opt input:checked + span.na_lane_card { border-color: #8fa3bd; background: rgba(143,163,189,.07); } .na_lane_opt input:checked + span.na_lane_card b { color: #b9c9db; } .na_lane_opt input:focus-visible + span.na_lane_card { outline: 2px solid #8fa3bd; outline-offset: 3px; } .na_lane_hint { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.62); } .na_lane_hint a { color: #b9c9db; text-decoration: none; border-bottom: 1px solid rgba(143,163,189,.4); } /* the opt-in: unticked by default, and says so */ .na_optin { display: grid; grid-template-columns: 22px 1fr; column-gap: 14px; align-items: start; margin: 6px 0 34px; cursor: pointer; } .na_optin input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: #8fa3bd; cursor: pointer; } .na_optin input:focus-visible { outline: 2px solid #8fa3bd; outline-offset: 3px; } .na_optin span { font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.82); } .na_optin small { display: block; font-size: 13.5px; color: rgba(255,255,255,.5); } .na_submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; } .na_submit_note { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.5); } .na_gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .na_status { padding: 16px 20px; border-radius: 8px; margin: 0 0 26px; font-size: 15.5px; line-height: 1.65; } .na_status[hidden] { display: none; } .na_status.is-ok { background: rgba(143,163,189,.09); border: 1px solid rgba(143,163,189,.45); color: #fff; } .na_status.is-err { background: rgba(248,113,113,.09); border: 1px solid rgba(248,113,113,.45); color: #f87171; } .na_status a { color: inherit; text-decoration: underline; } .na_disclaimer { margin-top: 48px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); } .na_disclaimer p { font-size: 14.5px; line-height: 1.75; color: rgba(255,255,255,.58); margin: 0 0 10px; } .na_disclaimer p:last-child { margin-bottom: 0; } /* ===================================================================== BY TEAMS - the calendar. Collapsed by the script until the Teams lane is chosen; without the script it is simply there. ===================================================================== */ .na_teams.is-collapsed { display: none; } .na_teams .calendly-inline-widget { min-width: 280px; width: 100%; height: 700px; margin-top: 8px; border-radius: 12px; overflow: hidden; } /* ===================================================================== CLOSING - why free, and the one quiet link to the product. ===================================================================== */ .na_finale { background: #070e1b; padding: 100px 0 96px; } .na_finale_glow { position: absolute; left: 50%; top: 50%; width: 900px; height: 600px; transform: translate(-50%,-50%); background: radial-gradient(ellipse, rgba(143,163,189,.07), transparent 62%); pointer-events: none; z-index: 0; } .na_finale_alt { margin: 40px 0 0; font-size: 15px; color: rgba(255,255,255,.55); } .na_finale_alt a { color: rgba(255,255,255,.8); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); } .na_finale_alt a:hover { color: #fff; border-color: #8fa3bd; } /* ===================================================================== RESPONSIVE ===================================================================== */ /* ===================================================================== EXCHANGE LIGHTBOX - the same idiom as the Originals lightbox (.eso_ in ergosphere-imagery.css), in this page's pewter. The detail lives here so the section itself stays a summary. ===================================================================== */ .na_lb { position: fixed; inset: 0; z-index: 99990; display: none; align-items: center; justify-content: center; padding: 26px; } .na_lb.is-shown { display: flex; } .na_lb_backdrop { position: absolute; inset: 0; background: rgba(4,10,20,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease; } .na_lb.is-open .na_lb_backdrop { opacity: 1; } .na_lb_card { position: relative; width: min(780px, 100%); max-height: min(88vh, 860px); display: flex; flex-direction: column; overflow: hidden; background: #0b1626; border: 1px solid rgba(143,163,189,.28); border-radius: 18px; box-shadow: 0 60px 140px -30px rgba(0,0,0,.9), 0 0 80px rgba(143,163,189,.1); opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .3s ease, transform .3s cubic-bezier(.22,.8,.3,1); } .na_lb.is-open .na_lb_card { opacity: 1; transform: none; } .na_lb_x { position: absolute; top: 14px; right: 14px; z-index: 5; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; background: rgba(10,20,34,.85); border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: rgba(255,255,255,.7); transition: color .2s ease, border-color .2s ease, transform .2s ease; } .na_lb_x svg { width: 16px; height: 16px; } .na_lb_x:hover { color: #fff; border-color: #8fa3bd; transform: rotate(90deg); } .na_lb_scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; } .na_lb_main { padding: 44px 46px 38px; transition: opacity .18s ease; } .na_lb_main.is-swapping { opacity: 0; } .na_lb_kicker { display: block; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; letter-spacing: 2.4px; text-transform: uppercase; color: #8fa3bd; margin: 0 0 14px; } .na_lb_main h3 { font-family: 'Poppins', sans-serif; font-size: 28px; font-weight: 400; color: #fff; text-transform: none; letter-spacing: 0; line-height: 1.3; margin: 0 0 24px; } .na_lb_body p { font-size: 16.5px; line-height: 1.88; color: rgba(255,255,255,.86); margin: 0 0 18px; } .na_lb_body p:last-child { margin-bottom: 0; } .na_lb_dl { margin: 0; } .na_lb_dl dt { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: #8fa3bd; margin: 0 0 7px; } .na_lb_dl dd { margin: 0 0 22px; font-size: 16px; line-height: 1.82; color: rgba(255,255,255,.82); } .na_lb_dl dd:last-child { margin-bottom: 0; } .na_lb_nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02); } .na_lb_arrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; background: transparent; border: 0; border-radius: 8px; color: rgba(255,255,255,.62); font-family: 'Poppins', sans-serif; font-size: 13.5px; max-width: 42%; transition: color .2s ease, background .2s ease; } .na_lb_arrow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .na_lb_arrow svg { width: 16px; height: 16px; flex: 0 0 auto; } .na_lb_arrow:hover:not(:disabled) { color: #fff; background: rgba(143,163,189,.1); } .na_lb_arrow:disabled { opacity: .3; cursor: default; } .na_lb_prev { justify-content: flex-start; } .na_lb_next { justify-content: flex-end; margin-left: auto; } .na_lb_dots { display: flex; gap: 8px; } .na_lb_dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.22); border: 0; transition: background .2s ease, transform .2s ease; } .na_lb_dots button.is-on { background: #8fa3bd; transform: scale(1.3); } @media (max-width: 768px) { .na_lb { padding: 14px; } .na_lb_main { padding: 40px 24px 28px; } .na_lb_main h3 { font-size: 23px; } .na_lb_body p, .na_lb_dl dd { font-size: 15.5px; } .na_lb_arrow span { display: none; } } @media (prefers-reduced-motion: reduce) { .na_lb_backdrop, .na_lb_card, .na_lb_main { transition: none; } .na_lb_x:hover { transform: none; } } @media (max-width: 1000px) { .na_exchange { grid-template-columns: 1fr; gap: 20px; } .na_q { position: static; } .na_r_part { grid-template-columns: 1fr; row-gap: 6px; } .na_part_h { margin-top: 0; } } @media (max-width: 768px) { .na_hero { padding: 136px 0 70px; } .na_title .na_t_quiet { font-size: 19px; margin-bottom: 18px; } .na_title .na_t_offer { font-size: 28px; } .na_kinds { grid-template-columns: 1fr; gap: 14px; } .na_terms { font-size: 11px; letter-spacing: 1.2px; } .na_terms li + li::before { margin: 0 10px; } .na_ground, .na_raised, .na_limits { padding: 66px 0; } .na_h2 { font-size: 26px; } .na_intro { font-size: 16.5px; margin-bottom: 32px; } .na_q, .na_r { padding: 22px 20px; } .na_q_head, .na_r_head { flex-direction: column; gap: 6px; } .na_part_s, .na_r_close { font-size: 15.5px; } .na_lanes, .na_limits_grid, .na_row2, .na_lanepick_opts { grid-template-columns: 1fr; } .na_lanes_note { font-size: 17px; } .na_out li { font-size: 19px; } .na_promise { font-size: 22px; padding-left: 20px; } .na_promise_why { margin-left: 23px; } .na_finale { padding: 72px 0 66px; } .na_teams .calendly-inline-widget { height: 820px; } } @media (prefers-reduced-motion: reduce) { .na_section *, .na_section { animation: none !important; transition: none !important; } .na_r .na_r_part, .na_r .na_r_close, .na_r .na_r_sig { opacity: 1; transform: none; } }