@charset "utf-8"; /* ===================================================================== ERGOSPHERE - MAKING THE CASE (business-case.html) namespaced .bc_ Sibling of verification.html (.vv_), the-name.html (.tn_), defence (.dfc_). Palette, written literally so the page survives a CMS that strips vars. #0a1628 deep navy - ground #0d1a2d raised navy - alternating sections #070e1b darkest navy - the ledger wells and the closing block #00d4ff site cyan - the accent. Company primary: this is a commercial page for every buyer, so no audience accent (green = Students, gold = Defence) #b3efff cyan tint - figures set in mono #f5b249 amber - reserved for the "illustrative only" flag Display: Poppins. Body: Mulish. Utility: IBM Plex Mono. Page rule, inherited from verification.html: every figure a finance manager might check (a rate, an hour count, a dollar value) is set in mono. Narrative stays in Mulish. Print rules live at the bottom of this file. The page is designed to be printed and forwarded, so the print block is not an afterthought. Link AFTER ergosphere-mobile.css in business-case.html . ===================================================================== */ .bc_section { position: relative; overflow: hidden; width: 100%; clear: both; float: left; } .bc_ground { background: #0a1628; padding: 84px 0; } .bc_raised { background: #0d1a2d; padding: 84px 0; } .bc_wrap { max-width: 760px; margin: 0 auto; position: relative; z-index: 2; clear: both; } .bc_wrap_wide { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; clear: both; } .bc_wrap + .bc_wrap, .bc_wrap_wide + .bc_wrap, .bc_wrap + .bc_wrap_wide { margin-top: 40px; } /* site chrome: the logo sizing the other pages carry inline */ .bc_page .grax_tm_topbar .logo img { max-height: 100px; } .bc_page .grax_tm_mobile_menu .logo img { max-height: 80px; } /* print-only masthead, invisible on screen */ .bc_printhead { display: none; } /* ---------- shared type ---------- */ .bc_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; } .bc_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; } .bc_h2 span { color: #00d4ff; } .bc_essay p { font-size: 17px; line-height: 1.9; color: rgba(255,255,255,.78); margin: 0 0 24px; } .bc_essay p:last-child { margin-bottom: 0; } .bc_essay p strong { color: #fff; font-weight: 600; } .bc_essay h3 { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; margin: 34px 0 10px; line-height: 1.4; } .bc_essay h3:first-child { margin-top: 0; } .bc_essay ul { list-style: none; margin: 0 0 24px; padding: 0; } .bc_essay ul:last-child { margin-bottom: 0; } .bc_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; } .bc_essay ul li::before { content: ""; position: absolute; left: 4px; top: .78em; width: 8px; height: 8px; border-radius: 50%; background: rgba(0,212,255,.55); } .bc_essay ul li strong { color: #fff; font-weight: 600; } /* every checkable figure on the page wears this */ .bc_mono { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: .9em; color: #b3efff; letter-spacing: .2px; white-space: nowrap; } .bc_essay .bc_mono, .bc_pull .bc_mono { background: rgba(0,212,255,.07); border: 1px solid rgba(0,212,255,.16); border-radius: 4px; padding: 1px 7px 2px; } /* pull-quote: the case in one sentence */ .bc_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 */ .bc_section a:focus-visible, .bc_section button:focus-visible, .footer_section a:focus-visible { outline: 2px solid #00d4ff; outline-offset: 3px; border-radius: 2px; } /* ===================================================================== HERO - the arithmetic, already worked out. That is the whole page in one line, so it is the first thing on it. ===================================================================== */ .bc_hero { text-align: center; padding: 168px 0 92px; background: #0a1628; } .bc_hero_rules { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0px, transparent 43px, rgba(0,212,255,.045) 43px, rgba(0,212,255,.045) 44px); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 38%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 80% 70% at 50% 38%, #000 20%, transparent 78%); } .bc_hero_glow { position: absolute; left: 50%; top: 40%; width: 900px; height: 900px; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(0,212,255,.07), rgba(0,212,255,.04) 40%, transparent 64%); pointer-events: none; z-index: 0; } .bc_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; } .bc_title span { color: #00d4ff; } .bc_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: 660px; margin: 28px auto 0; } /* the sum. One seat, divided by one hour, equals the question. */ .bc_sum { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 0; margin: 48px auto 0; max-width: 860px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; } .bc_sum_term { flex: 0 1 auto; padding: 18px 22px 16px; text-align: center; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.025); min-width: 150px; } .bc_sum_term b { display: block; font-size: 34px; font-weight: 600; color: #fff; line-height: 1; letter-spacing: -.5px; } .bc_sum_term small { display: block; margin-top: 10px; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.45); } .bc_sum_term.is-answer { border-color: rgba(0,212,255,.55); background: rgba(0,212,255,.06); box-shadow: 0 0 30px rgba(0,212,255,.10), inset 0 0 22px rgba(0,212,255,.04); } .bc_sum_term.is-answer b { color: #00d4ff; } .bc_sum_term.is-answer small { color: rgba(0,212,255,.8); } .bc_sum_op { flex: 0 0 auto; align-self: center; padding: 0 12px; font-size: 26px; font-weight: 500; color: rgba(255,255,255,.4); } .bc_sum_note { margin: 22px auto 0; max-width: 560px; 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; } .bc_cta_row { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .bc_print_btn { cursor: pointer; font-family: 'Poppins', sans-serif; line-height: 1.4; } .bc_print_btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* ===================================================================== THREE SOURCES - where the hours come from. Ordered cards, because the copy orders them by size; the order is the information. ===================================================================== */ .bc_sources { margin: 38px 0 0; display: flex; flex-direction: column; gap: 16px; } .bc_source { border: 1px solid rgba(255,255,255,.11); border-left: 3px solid #00d4ff; border-radius: 10px; background: rgba(255,255,255,.025); padding: 24px 30px; } .bc_source h3 { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; margin: 0 0 10px; } .bc_source p { font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,.68); margin: 0; } .bc_source p b { color: #fff; font-weight: 600; } .bc_source_size { display: inline-block; margin-left: 12px; vertical-align: middle; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(0,212,255,.8); border: 1px solid rgba(0,212,255,.35); border-radius: 4px; padding: 3px 9px 4px; } /* ===================================================================== THE LEDGER - the worked example, set like a costing sheet. Accounting conventions on purpose: figures right-aligned in mono, the licence shown in parentheses, a single rule above the total and a double rule under the net. A finance manager reads this without help. ===================================================================== */ .bc_flag { display: inline-block; margin: 0 0 18px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #f5b249; border: 1px solid rgba(245,178,73,.45); border-radius: 4px; padding: 4px 10px 5px; background: rgba(245,178,73,.05); } .bc_tablewrap { margin: 34px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: #070e1b; } .bc_ledger { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; } .bc_ledger caption { caption-side: top; text-align: left; padding: 18px 26px 4px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.5); } .bc_ledger th, .bc_ledger td { padding: 15px 26px; vertical-align: top; text-align: left; } .bc_ledger thead th { font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.14); padding-top: 14px; } .bc_ledger tbody td { border-top: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.72); line-height: 1.55; } .bc_ledger tbody tr:first-child td { border-top: 0; } .bc_ledger .num { text-align: right; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; color: #b3efff; white-space: nowrap; font-variant-numeric: tabular-nums; } .bc_ledger .basis { color: rgba(255,255,255,.5); font-size: 14px; } .bc_ledger tr.is-total td { border-top: 1px solid rgba(255,255,255,.35); color: #fff; font-weight: 600; } .bc_ledger tr.is-total td.num { color: #fff; } .bc_ledger tr.is-licence td { color: rgba(255,255,255,.72); } .bc_ledger tr.is-licence td.num { color: rgba(255,255,255,.72); } .bc_ledger tr.is-net td { color: #fff; font-weight: 700; background: rgba(0,212,255,.05); border-top: 1px solid rgba(0,212,255,.35); padding-bottom: 20px; } .bc_ledger tr.is-net td.num { color: #00d4ff; font-size: 17px; border-bottom: 3px double rgba(0,212,255,.65); } .bc_ledger_foot { margin: 18px 0 0; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.5); } .bc_ledger_foot .bc_mono { color: #b3efff; } /* break-even bar: the licence covers the first half of the estimate */ .bc_breakeven { margin: 42px 0 0; } .bc_breakeven_bar { position: relative; height: 46px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.03); } .bc_breakeven_fill { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, rgba(0,212,255,.35), rgba(0,212,255,.18)); border-right: 2px solid #00d4ff; } .bc_breakeven_lbl { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 16px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; white-space: nowrap; } .bc_breakeven_lbl.is-cost { left: 0; color: #fff; } .bc_breakeven_lbl.is-margin { right: 0; color: rgba(255,255,255,.55); } .bc_breakeven_scale { display: flex; justify-content: space-between; margin-top: 8px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 1px; color: rgba(255,255,255,.4); text-transform: uppercase; } .bc_breakeven_scale .mid { position: relative; left: 0; color: #00d4ff; } /* ===================================================================== YOUR NUMBERS - the worksheet. Blank on purpose. On screen it reads as a form; on paper it is a form. ===================================================================== */ .bc_sheet { margin: 34px 0 0; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: #070e1b; padding: 10px 30px 14px; } .bc_sheet_row { display: grid; grid-template-columns: 1fr 200px; gap: 24px; align-items: end; padding: 16px 0 12px; border-top: 1px solid rgba(255,255,255,.06); } .bc_sheet_row:first-child { border-top: 0; } .bc_sheet_lbl { font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.78); } .bc_sheet_lbl small { display: block; font-size: 12.5px; color: rgba(255,255,255,.42); margin-top: 3px; } .bc_sheet_fill { display: flex; align-items: baseline; gap: 8px; min-height: 34px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 15px; color: #b3efff; } /* the fill lines are live fields. plugins.css paints bare inputs white on focus, hence the !important on background and colour. */ .bc_sheet_fill input, .bc_sheet_fill output { flex: 1; min-width: 0; width: auto; display: block; margin: 0; height: auto; line-height: 1.4; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 15px; font-weight: 500; text-align: right; color: #b3efff !important; -webkit-text-fill-color: #b3efff; background: transparent !important; box-shadow: none !important; outline: 0; border: 0 !important; border-bottom: 1px dashed rgba(0,212,255,.45) !important; border-radius: 0 !important; padding: 2px 4px 5px !important; } .bc_sheet_fill input::placeholder { color: rgba(179,239,255,.28); -webkit-text-fill-color: rgba(179,239,255,.28); opacity: 1; } .bc_sheet_fill input:focus { border-bottom-color: #00d4ff !important; background: rgba(0,212,255,.06) !important; } .bc_sheet_fill output { color: #fff !important; -webkit-text-fill-color: #fff; min-height: 1.4em; } .bc_sheet_fill output.is-neg { color: #f5b249 !important; -webkit-text-fill-color: #f5b249; } .bc_sheet_row.is-result .bc_sheet_lbl { color: #fff; font-weight: 600; } .bc_sheet_row.is-result .bc_sheet_fill output { border-bottom: 1px solid rgba(0,212,255,.8) !important; } .bc_sheet_row.is-net { border-top: 1px solid rgba(0,212,255,.35); background: linear-gradient(90deg, rgba(0,212,255,.04), transparent); margin: 0 -30px; padding-left: 30px; padding-right: 30px; } .bc_sheet_row.is-net .bc_sheet_fill output { border-bottom: 3px double rgba(0,212,255,.65) !important; color: #00d4ff !important; -webkit-text-fill-color: #00d4ff; font-size: 17px; } .bc_sheet_row.is-net .bc_sheet_fill output.is-neg { color: #f5b249 !important; -webkit-text-fill-color: #f5b249; } .bc_sheet_cta { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; } .bc_clear_btn { background: none; border: 0; cursor: pointer; padding: 14px 8px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.45); transition: color .2s ease; } .bc_clear_btn:hover { color: #fff; } /* the seat count illustration */ .bc_seats { margin: 34px 0 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: #070e1b; padding: 26px 30px; } .bc_seats_col { text-align: center; } .bc_seats_col b { display: block; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 40px; font-weight: 600; color: #fff; line-height: 1; } .bc_seats_col.is-answer b { color: #00d4ff; } .bc_seats_col small { display: block; margin-top: 10px; 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,.45); line-height: 1.6; } .bc_seats_col.is-answer small { color: rgba(0,212,255,.8); } .bc_seats_arrow { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 24px; color: rgba(255,255,255,.35); } /* the two checklists (IT / procurement) */ .bc_checks { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .bc_checks li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.72); } .bc_checks li b { color: #fff; font-weight: 600; } .bc_checks .tick { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; color: #00d4ff; font-size: 15px; padding-top: 2px; } .bc_checks a { color: #00d4ff; text-decoration: none; border-bottom: 1px solid rgba(0,212,255,.35); } .bc_checks a:hover { border-bottom-color: #00d4ff; } .bc_essay a { color: #00d4ff; text-decoration: none; border-bottom: 1px solid rgba(0,212,255,.35); } .bc_essay a:hover { border-bottom-color: #00d4ff; } /* the paste-ready email paragraph */ .bc_email { margin: 34px 0 0; border: 1px dashed rgba(255,255,255,.25); border-radius: 14px; background: rgba(255,255,255,.02); padding: 32px 36px; } .bc_email_cap { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 16px; } .bc_email p { font-size: 16.5px; line-height: 1.85; color: rgba(255,255,255,.85); margin: 0; font-family: 'Mulish', sans-serif; } /* closing block */ .bc_finale { text-align: center; padding: 88px 0 96px; background: #070e1b; } .bc_finale_glow { position: absolute; left: 50%; top: 50%; width: 720px; height: 720px; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(0,212,255,.08), rgba(0,212,255,.03) 42%, transparent 64%); pointer-events: none; z-index: 0; } .bc_finale p.bc_finale_lead { font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 300; font-size: 21px; line-height: 1.55; color: rgba(255,255,255,.85); max-width: 620px; margin: 0 auto; } .bc_stamp { display: inline-block; margin-top: 40px; padding: 13px 26px 14px; border: 1.5px solid rgba(0,212,255,.55); border-radius: 6px; transform: rotate(-1.4deg); font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; color: #8fe4ff; text-align: center; box-shadow: 0 0 30px rgba(0,212,255,.10), inset 0 0 22px rgba(0,212,255,.05); } .bc_stamp .l1 { display: block; font-size: 14px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; } .bc_stamp .l2 { display: block; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: 7px; } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 960px) { .bc_seats { grid-template-columns: 1fr; gap: 14px; } .bc_seats_arrow { transform: rotate(90deg); } } @media (max-width: 768px) { .bc_hero { padding: 130px 0 66px; } .bc_title { font-size: 36px; letter-spacing: 3px; } .bc_lead { font-size: 18px; } .bc_h2 { font-size: 25px; } .bc_pull { font-size: 20px; padding-left: 20px; } .bc_ground, .bc_raised { padding: 64px 0; } .bc_sum { flex-direction: column; align-items: stretch; gap: 6px; } .bc_sum_op { padding: 2px 0; font-size: 20px; } .bc_sum_term b { font-size: 28px; } .bc_source { padding: 20px 22px; } .bc_source_size { display: block; margin: 8px 0 0; width: max-content; } .bc_ledger { font-size: 14px; } .bc_ledger th, .bc_ledger td { padding: 12px 16px; } .bc_sheet { padding: 6px 20px 10px; } .bc_sheet_row { grid-template-columns: 1fr 120px; gap: 14px; } .bc_sheet_row.is-net { margin: 0 -20px; padding-left: 20px; padding-right: 20px; } .bc_email { padding: 24px 22px; } .bc_breakeven_lbl { font-size: 10px; padding: 0 10px; } } @media (prefers-reduced-motion: reduce) { .bc_section *, .bc_section { animation: none !important; transition: none !important; } } /* ===================================================================== PRINT - the handout. Whoever receives this may never have seen the site, so the masthead carries the name and the address, the chrome goes, and the tables never split across a page. ===================================================================== */ @media print { @page { margin: 18mm 16mm; } html, body, .grax_tm_all_wrap, .bc_page, .bc_section, .bc_ground, .bc_raised, .bc_hero, .bc_finale { background: #fff !important; color: #111 !important; } body { font-family: Georgia, 'Times New Roman', serif; font-size: 11pt; line-height: 1.5; } /* chrome off */ #preloader, .grax_tm_topbar, .grax_tm_mobile_menu, .footer_section, .progressbar, .mouse-cursor, .bc_cta_row, .bc_sheet_cta, .bc_print_btn, .bc_hero_rules, .bc_hero_glow, .bc_finale_glow { display: none !important; } /* the site's scroll-reveal hides elements until they are seen; on paper everything is seen */ .wow, .bc_section .wow { visibility: visible !important; opacity: 1 !important; animation: none !important; transform: none !important; } /* masthead */ .bc_printhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12pt; border-bottom: 1.5pt solid #0a1628; padding: 0 0 6pt; margin: 0 0 18pt; font-family: Georgia, 'Times New Roman', serif; } .bc_printhead b { font-size: 14pt; letter-spacing: 2pt; text-transform: uppercase; color: #0a1628; } .bc_printhead span { font-size: 9.5pt; color: #444; letter-spacing: .5pt; } .bc_section { float: none; overflow: visible; } .bc_ground, .bc_raised, .bc_hero, .bc_finale { padding: 0 0 22pt; text-align: left; } .bc_wrap, .bc_wrap_wide { max-width: none; } .bc_wrap + .bc_wrap, .bc_wrap_wide + .bc_wrap, .bc_wrap + .bc_wrap_wide { margin-top: 14pt; } .container { width: auto !important; max-width: none !important; padding: 0 !important; } .bc_kicker { color: #0a7fa0 !important; font-size: 8.5pt; letter-spacing: 2.5pt; margin-bottom: 4pt; } .bc_title { font-size: 24pt; letter-spacing: 1.5pt; color: #0a1628 !important; text-transform: none; } .bc_title span { color: #0a1628 !important; } .bc_lead { font-size: 12pt; font-style: italic; color: #333 !important; margin: 8pt 0 0; max-width: none; font-family: Georgia, serif; font-weight: normal; } .bc_h2 { font-size: 15pt; letter-spacing: .5pt; text-transform: none; color: #0a1628 !important; margin: 0 0 8pt; page-break-after: avoid; break-after: avoid; } .bc_h2 span { color: #0a1628 !important; } .bc_essay p, .bc_essay ul li, .bc_source p, .bc_checks li, .bc_ledger_foot, .bc_email p, .bc_sheet_lbl { color: #111 !important; font-size: 11pt; line-height: 1.5; } .bc_essay p { margin: 0 0 9pt; } .bc_essay p strong, .bc_essay ul li strong, .bc_source p b, .bc_checks li b { color: #000 !important; } .bc_essay h3, .bc_source h3 { color: #0a1628 !important; font-size: 11.5pt; letter-spacing: .3pt; margin: 10pt 0 3pt; page-break-after: avoid; } .bc_essay ul li { padding-left: 14pt; margin: 0 0 3pt; } .bc_essay ul li::before { background: #0a1628; width: 4pt; height: 4pt; left: 2pt; top: .6em; } .bc_mono, .bc_essay .bc_mono, .bc_pull .bc_mono, .bc_ledger .num, .bc_sheet_fill, .bc_ledger_foot .bc_mono { font-family: 'Courier New', Courier, monospace; color: #000 !important; background: none !important; border: 0 !important; padding: 0 !important; font-weight: 600; font-size: 10.5pt; } .bc_pull { border-left: 2pt solid #0a1628; padding: 2pt 0 2pt 12pt; margin: 0 0 12pt; font-size: 13pt; color: #0a1628 !important; font-family: Georgia, serif; font-weight: normal; } .bc_essay a, .bc_checks a { color: #0a1628 !important; border: 0; text-decoration: none; } /* on paper a short link label is useless, so spell the address out */ .bc_essay a[data-print]::after, .bc_checks a[data-print]::after { content: " (" attr(data-print) ")"; font-weight: normal; color: #333 !important; } /* keep a heading, its intro and the block it introduces on one page */ .bc_wrap + .bc_wrap_wide, .bc_wrap + .bc_wrap { page-break-before: avoid; break-before: avoid; } .bc_kicker { page-break-after: avoid; break-after: avoid; } .bc_essay p:last-child { page-break-after: avoid; break-after: avoid; } .bc_essay p, .bc_essay li, .bc_pull { page-break-inside: avoid; break-inside: avoid; orphans: 3; widows: 3; } .bc_wrap_wide { page-break-inside: avoid; break-inside: avoid; } /* the worksheet always starts a fresh page, so the form is never split */ .bc_section:has(.bc_sheet) { page-break-before: always; break-before: page; } .bc_section:has(.bc_sheet) .container { page-break-inside: avoid; break-inside: avoid; } .bc_sheet_row { page-break-inside: avoid; break-inside: avoid; } /* the sum: one row on paper, whatever the paper width */ .bc_sum { flex-direction: row; justify-content: flex-start; margin: 14pt 0 0; font-family: 'Courier New', Courier, monospace; page-break-inside: avoid; break-inside: avoid; } .bc_sum_term { border: 1pt solid #999; background: none; padding: 8pt 12pt; min-width: 0; } .bc_sum_term b { color: #000 !important; font-size: 16pt; } .bc_sum_term small { color: #444 !important; font-size: 7.5pt; margin-top: 4pt; } .bc_sum_term.is-answer { border: 1.5pt solid #0a1628; box-shadow: none; background: none; } .bc_sum_term.is-answer b, .bc_sum_term.is-answer small { color: #0a1628 !important; } .bc_sum_op { color: #444 !important; font-size: 16pt; padding: 0 8pt; align-self: center; } .bc_source_size { display: inline-block; margin: 0 0 0 8pt; width: auto; } .bc_sum_note { color: #444 !important; font-size: 8.5pt; margin: 8pt 0 0; max-width: none; font-family: Georgia, serif; text-transform: none; letter-spacing: 0; } /* the three sources */ .bc_sources { margin: 8pt 0 0; gap: 8pt; } .bc_source { border: 1pt solid #bbb; border-left: 2pt solid #0a1628; background: none; padding: 8pt 12pt; page-break-inside: avoid; break-inside: avoid; } .bc_source_size { color: #0a1628 !important; border-color: #0a1628; font-size: 7.5pt; padding: 1pt 5pt; } /* the ledger */ .bc_flag { color: #7a4c00 !important; border-color: #7a4c00; background: none; font-size: 8pt; margin-bottom: 8pt; } .bc_tablewrap { margin: 10pt 0 0; overflow: visible; border: 0; background: none; page-break-inside: avoid; break-inside: avoid; } .bc_ledger { min-width: 0; font-size: 10.5pt; page-break-inside: avoid; break-inside: avoid; } .bc_ledger caption { color: #444 !important; font-size: 8pt; padding: 0 0 4pt; } .bc_ledger th, .bc_ledger td { padding: 6pt 8pt; } .bc_ledger thead th { color: #333 !important; border-bottom: 1pt solid #333; font-size: 8.5pt; letter-spacing: .8pt; } .bc_ledger tbody td { color: #111 !important; border-top: .5pt solid #ccc; } .bc_ledger .basis { color: #444 !important; font-size: 9.5pt; } .bc_ledger tr.is-total td { border-top: 1pt solid #333; color: #000 !important; } .bc_ledger tr.is-total td.num { color: #000 !important; } .bc_ledger tr.is-licence td.num { color: #000 !important; } .bc_ledger tr.is-net td { background: none; border-top: 1pt solid #333; color: #000 !important; } .bc_ledger tr.is-net td.num { color: #000 !important; border-bottom: 3pt double #333; font-size: 11.5pt; } .bc_ledger tr { page-break-inside: avoid; break-inside: avoid; } .bc_ledger_foot { color: #333 !important; font-size: 10pt; margin: 8pt 0 0; } .bc_breakeven { margin: 12pt 0 0; page-break-inside: avoid; break-inside: avoid; } .bc_breakeven_bar { height: 26pt; border: 1pt solid #666; background: none; border-radius: 3pt; } .bc_breakeven_fill { background: #dfe6ee; border-right: 1.5pt solid #0a1628; } .bc_breakeven_lbl { font-family: 'Courier New', Courier, monospace; font-size: 8pt; padding: 0 8pt; } .bc_breakeven_lbl.is-cost { color: #000 !important; } .bc_breakeven_lbl.is-margin { color: #333 !important; } .bc_breakeven_scale { color: #444 !important; font-size: 8pt; margin-top: 3pt; font-family: 'Courier New', Courier, monospace; } .bc_breakeven_scale .mid { color: #0a1628 !important; } /* the worksheet: a real form on paper */ .bc_sheet { border: 1pt solid #999; background: none; padding: 2pt 12pt 6pt; margin: 10pt 0 0; page-break-inside: avoid; break-inside: avoid; } .bc_sheet_row { padding: 8pt 0 5pt; border-top: .5pt solid #ccc; grid-template-columns: 1fr 150pt; gap: 14pt; } .bc_sheet_lbl { font-size: 10.5pt; } .bc_sheet_lbl small { color: #444 !important; font-size: 8.5pt; } .bc_sheet_fill { min-height: 18pt; } .bc_sheet_fill input, .bc_sheet_fill output { font-family: 'Courier New', Courier, monospace; font-size: 10.5pt; font-weight: 600; color: #000 !important; -webkit-text-fill-color: #000; background: none !important; border: 0 !important; border-bottom: 1pt solid #333 !important; padding: 0 2pt 2pt !important; } /* a placeholder is a hint, not a figure: it must not print as if it had been entered */ .bc_sheet_fill input::placeholder { color: transparent; -webkit-text-fill-color: transparent; } .bc_sheet_fill output.is-neg { color: #000 !important; -webkit-text-fill-color: #000; } .bc_sheet_row.is-result .bc_sheet_fill output { border-bottom: 1pt solid #000 !important; } .bc_sheet_row.is-net { border-top: 1pt solid #333; background: none; margin: 0 -12pt; padding-left: 12pt; padding-right: 12pt; } .bc_sheet_row.is-net .bc_sheet_fill output { border-bottom: 3pt double #000 !important; color: #000 !important; -webkit-text-fill-color: #000; font-size: 11pt; } .bc_clear_btn { display: none !important; } .bc_seats { border: 1pt solid #999; background: none; padding: 10pt 14pt; margin: 10pt 0 0; grid-template-columns: 1fr auto 1fr; page-break-inside: avoid; break-inside: avoid; } .bc_seats_col b { color: #000 !important; font-size: 20pt; font-family: 'Courier New', Courier, monospace; } .bc_seats_col.is-answer b { color: #0a1628 !important; } .bc_seats_col small, .bc_seats_col.is-answer small { color: #444 !important; font-size: 7.5pt; font-family: Georgia, serif; } .bc_seats_arrow { color: #444 !important; transform: none; } .bc_checks { margin: 8pt 0 0; gap: 3pt; } .bc_checks li { grid-template-columns: 14pt 1fr; gap: 6pt; } .bc_checks .tick { color: #0a1628 !important; font-size: 10pt; padding-top: 0; } .bc_email { border: 1pt solid #666; background: none; padding: 10pt 14pt; margin: 10pt 0 0; page-break-inside: avoid; break-inside: avoid; } .bc_email_cap { color: #444 !important; font-size: 8pt; margin-bottom: 6pt; } .bc_email p { font-family: Georgia, serif; font-size: 10.5pt; } .bc_finale p.bc_finale_lead { color: #333 !important; font-size: 10.5pt; font-style: italic; max-width: none; margin: 0; font-family: Georgia, serif; } .bc_stamp { transform: none; border: 1pt solid #0a1628; box-shadow: none; color: #0a1628 !important; margin-top: 10pt; padding: 6pt 12pt; font-family: 'Courier New', Courier, monospace; } .bc_stamp .l1 { font-size: 9pt; letter-spacing: 1.5pt; } .bc_stamp .l2 { color: #444 !important; font-size: 7.5pt; margin-top: 3pt; } }