/* nobulma.css - everything the app used to take from bulma.min.css, and nothing else. * * Loaded where bulma was: before common.css, so common.css still wins where it means to. * Class names are bulma's on purpose - the markup did not change. * * Values are not hand-derived. They are what Chromium computed from bulma 1.0.2, captured by * /dev/styleprobe and compared with scripts/probe-diff.py. See docs/Memory.NoBulma.md. * * Light only. There is deliberately no prefers-color-scheme block. * * Sizes are rem. common.css pins html to 16px, so every px in bulma converted exactly - a 1px * border is 0.0625rem, not an approximation. Two exceptions, both deliberate: * * em where a size must track the font-size of the element it is on. Control height and * padding are the clear case: common.css overrides .button.is-small to 0.85rem, and * `height: 2.5em` is what makes that button 34px instead of 40px. Written in rem it would * keep the full-size box. The same applies to .content typography, where `margin-bottom: * 0.5714em` on an h2 means "relative to this heading", and to component padding. * px in media query conditions only. There, lengths resolve against the initial font size, * not html's, so rem would not mean what it means everywhere else in this file. */ :root { color-scheme: light; --text: rgb(64, 70, 84); --text-strong: rgb(46, 51, 61); --text-weak: rgb(171, 177, 191); --scheme-main: rgb(255, 255, 255); --background: rgb(243, 244, 246); --border: rgb(214, 217, 224); --link: rgb(66, 88, 255); --link-text: rgb(41, 66, 255); --focus: rgb(66, 88, 255); --radius: 0.375rem; --radius-small: 0.25rem; --navbar-height: 3.25rem; --family-primary: Inter, "SF Pro", "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ---- 1. reset. bulma inlined minireset.css v0.0.6; without it every page shifts ---- */ html { background-color: var(--scheme-main); box-sizing: border-box; min-width: 18.75rem; overflow-x: hidden; overflow-y: scroll; /* a permanent scrollbar. drop it and centred content shifts ~15px */ text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } *, *::before, *::after { box-sizing: inherit; } blockquote, body, dd, dl, dt, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, html, iframe, legend, li, ol, p, pre, textarea, ul { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400; } ul { list-style: none; } button, input, select, textarea { margin: 0; font-family: inherit; } button { appearance: none; background: none; border: none; color: inherit; font-size: 1em; padding: 0; } img, video { height: auto; max-width: 100%; } iframe { border: 0; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* ---- 2. root typography ---- */ body { color: var(--text); font-family: var(--family-primary); font-size: 1em; font-weight: 400; line-height: 1.5; } a { color: var(--link-text); cursor: pointer; text-decoration: none; } a strong { color: currentColor; } strong { color: var(--text-strong); font-weight: 700; } code, pre { font-family: monospace; } /* ---- 3. .content - opts every page into this ---- */ .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: var(--text-strong); font-weight: 800; line-height: 1.125; } .content h1 { font-size: 2em; margin-bottom: 0.5em; } .content h2 { font-size: 1.75em; margin-bottom: 0.5714em; } .content h3 { font-size: 1.5em; margin-bottom: 0.6666em; } .content h4 { font-size: 1.25em; margin-bottom: 0.8em; } .content h5 { font-size: 1.125em; margin-bottom: 0.8888em; } .content h6 { font-size: 1em; margin-bottom: 1em; } .content h1:not(:first-child) { margin-top: 1em; } .content h2:not(:first-child) { margin-top: 1.1428em; } .content h3:not(:first-child) { margin-top: 1.3333em; } .content p:not(:last-child), .content ul:not(:last-child), .content ol:not(:last-child), .content dl:not(:last-child), .content pre:not(:last-child), .content table:not(:last-child), .content blockquote:not(:last-child) { margin-bottom: 1em; } .content ul { list-style: disc outside; margin-inline-start: 2em; margin-top: 1em; } .content ul:first-child { margin-top: 0; } .content ul ul { list-style-type: circle; margin-bottom: 0.25em; margin-top: 0.25em; } .content ul ul ul { list-style-type: square; } .content ol { list-style-position: outside; list-style-type: decimal; margin-inline-start: 2em; margin-top: 1em; } .content ol:first-child { margin-top: 0; } .content li + li { margin-top: 0.25em; } .content blockquote { background-color: var(--background); border-inline-start: 0.3125rem solid var(--border); padding: 1.25em 1.5em; } .content pre { -webkit-overflow-scrolling: touch; overflow-x: auto; padding: 1.25em 1.5em; white-space: pre; word-wrap: normal; } .content hr { background-color: var(--background); border: none; display: block; height: 0.125rem; margin: 1.5rem 0; } .content table td, .content table th { border: 0.0625rem solid var(--border); border-width: 0 0 0.0625rem; padding: 0.5em 0.75em; vertical-align: top; } .content table th { color: var(--text-strong); } .content table thead td, .content table thead th { border-width: 0 0 0.125rem; color: var(--text-strong); } .content table tbody tr:last-child td, .content table tbody tr:last-child th { border-bottom-width: 0; } /* ---- 4. .title / .subtitle - H1/H2/H3 helpers ---- */ .title, .subtitle { word-break: break-word; } .title { color: var(--text-strong); font-size: 2rem; font-weight: 800; line-height: 1.125; } .subtitle { color: var(--text); font-size: 1.25rem; font-weight: 400; line-height: 1.25; } .title:not(:last-child), .subtitle:not(:last-child) { margin-bottom: 1.5rem; } .title:not(.is-spaced):has(+ .subtitle) { margin-bottom: 0; } .subtitle:not(.is-spaced):has(+ .title) { margin-bottom: 0; } .title.is-3 { font-size: 2rem; } .title.is-4 { font-size: 1.5rem; } .subtitle.is-5 { font-size: 1.25rem; } .subtitle.is-6 { font-size: 1rem; } /* ---- 5. navbar ---- */ .navbar { background-color: var(--scheme-main); min-height: var(--navbar-height); position: relative; z-index: 30; } .navbar.is-light { background-color: var(--background); } .navbar.is-fixed-top { left: 0; position: fixed; right: 0; top: 0; z-index: 30; } /* the brand is a row at every width; the rest of the bar is not */ .navbar-brand { align-items: stretch; display: flex; flex-shrink: 0; min-height: var(--navbar-height); } .navbar-brand .navbar-item { align-items: center; display: flex; } .navbar-item { color: var(--text-strong); flex-grow: 0; flex-shrink: 0; gap: 0.75rem; line-height: 1.5; padding: 0.5rem 0.75rem; position: relative; } /* Below 1024px bulma stacks the navbar into a block, because it expects a burger to collapse it into. This app renders no burger, so the bar simply becomes three stacked rows. That is the behaviour today and it is reproduced here deliberately; changing it is a separate decision. See docs/Memory.NoBulma.md. */ @media screen and (min-width: 1024px) { .navbar, .navbar-end { align-items: stretch; display: flex; } .navbar-end { justify-content: flex-end; margin-inline-start: auto; } .navbar-item { align-items: center; display: flex; } } a.navbar-item { text-decoration: none; } a.navbar-item:hover { background-color: rgb(229, 231, 235); } /* ---- 6. button ---- */ .button { --button-border-width: 0.0625rem; align-items: center; appearance: none; background-color: var(--scheme-main); border: var(--button-border-width) solid var(--border); border-radius: var(--radius); box-shadow: rgba(51, 51, 51, 0.05) 0 0.0625em 0.125em 0, rgba(51, 51, 51, 0.05) 0 0.125em 0.25em 0; color: var(--text-strong); cursor: pointer; display: inline-flex; font-size: 1rem; font-weight: 500; height: 2.5em; justify-content: center; line-height: 1.5; padding: calc(0.5em - var(--button-border-width)) calc(1em - var(--button-border-width)); position: relative; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; } .button.is-small { border-radius: var(--radius-small); font-size: 0.75rem; } .button.is-fullwidth { display: flex; width: 100%; } .button.is-light, .button.is-link, .button.is-info, .button.is-primary { --button-border-width: 0rem; box-shadow: rgba(51, 51, 51, 0) 0 0.0625em 0.125em 0, rgba(51, 51, 51, 0) 0 0.125em 0.25em 0; } /* border-color is invisible at width 0, but it is what bulma resolved and it stops a future `border-width` from silently coming out grey. */ /* hover and active are bulma's colour one and two shades darker; measured, not derived. active is declared after hover so it wins while a control is held down. */ .button:hover { background-color: rgb(240, 242, 244); border-color: rgb(185, 191, 202); } .button:active { background-color: rgb(226, 228, 233); border-color: rgb(156, 164, 180); box-shadow: rgba(51, 51, 51, 0) 0 0.0625em 0.125em 0, rgba(51, 51, 51, 0) 0 0.125em 0.25em 0; } .button.is-light { background-color: var(--background); border-color: var(--background); color: var(--text-strong); } .button.is-link { background-color: var(--link); border-color: var(--link); color: rgb(245, 246, 255); } .button.is-info { background-color: rgb(102, 209, 255); border-color: rgb(102, 209, 255); color: rgb(0, 36, 51); } .button.is-primary { background-color: rgb(0, 209, 178); border-color: rgb(0, 209, 178); color: rgb(0, 31, 26); } .button.is-light:hover { background-color: rgb(229, 231, 235); } .button.is-link:hover { background-color: var(--link-text); } .button.is-info:hover { background-color: rgb(77, 201, 255); } .button.is-primary:hover { background-color: rgb(0, 184, 156); } .button.is-light:active { background-color: rgb(214, 217, 224); } .button.is-link:active { background-color: rgb(15, 43, 255); } .button.is-info:active { background-color: rgb(51, 194, 255); } .button.is-primary:active { background-color: rgb(0, 158, 134); } /* Focus. `outline: none` is doing real work here: it resets outline-style to none while leaving outline-width at medium, which is what bulma computes. Without it Chromium draws its own black focus ring, which is what the /forgot page showed on its autofocused input. */ .button:focus, .button:focus-visible, .button:active, .button:focus-within, .input:focus, .input:focus-visible, .input:active, .input:focus-within, .textarea:focus, .textarea:focus-visible, .textarea:active, .textarea:focus-within, .select select:focus, .select select:focus-visible, .select select:active { outline: none; } .button:focus-visible, .input:focus-visible, .textarea:focus-visible, .select select:focus-visible { border-color: var(--focus); box-shadow: 0 0 0 0.1875em rgba(66, 88, 255, 0.25); } .button:focus-visible { --button-border-width: 0.0625rem; } /* Disabled is markup, not an interactive state, so it is part of the resting appearance. The upload buttons on the prices and benefits pages render disabled until a file is chosen. */ .button[disabled], fieldset[disabled] .button { box-shadow: none; cursor: not-allowed; opacity: 0.5; } /* ---- 7. form controls: input / field / control / label ---- */ .input, .textarea, .select select { appearance: none; background-color: var(--scheme-main); border: 0.0625rem solid var(--border); border-radius: var(--radius); box-shadow: rgba(9, 10, 12, 0.05) 0 0.0625em 0.125em 0 inset; color: var(--text-strong); display: inline-flex; align-items: center; justify-content: flex-start; font-size: 1rem; height: 2.5em; line-height: 1.5; max-width: 100%; padding: calc(0.5em - 0.0625rem) calc(0.75em - 0.0625rem); position: relative; vertical-align: top; width: 100%; } .input.is-small, .textarea.is-small { border-radius: var(--radius-small); font-size: 0.75rem; } .input:hover, .textarea:hover, .select select:hover { border-color: rgb(185, 191, 202); } .input:active, .textarea:active, .select select:active { border-color: rgb(156, 164, 180); } [disabled].input, [disabled].textarea, .select select[disabled], fieldset[disabled] .input, fieldset[disabled] .textarea { background-color: var(--background); border-color: var(--background); box-shadow: none; color: rgb(105, 116, 140); cursor: not-allowed; } .field:not(:last-child) { margin-bottom: 0.75rem; } .control { box-sizing: border-box; clear: both; font-size: 1rem; position: relative; text-align: inherit; } .label { color: var(--text-strong); display: block; font-size: 1rem; font-weight: 600; } .label:not(:last-child) { margin-bottom: 0.5em; } .label.is-small { font-size: 0.75rem; } /* ---- 8. table ---- */ .table { background-color: var(--scheme-main); color: var(--text-strong); } .table td, .table th { border: 0.0625rem solid var(--border); border-width: 0 0 0.0625rem; padding: 0.5em 0.75em; vertical-align: top; } .table th { color: var(--text-strong); text-align: inherit; } .table thead td, .table thead th { border-width: 0 0 0.125rem; color: var(--text-strong); } /* ---- 9. notification - NoteList.js ---- */ .notification { background-color: var(--background); border-radius: var(--radius); color: var(--text-strong); padding: 1.375em 1.5em; position: relative; } .notification:not(:last-child) { margin-bottom: 1.5rem; } .notification.is-primary { background-color: rgb(204, 255, 247); color: rgb(0, 56, 48); } .notification.is-info { background-color: rgb(204, 240, 255); color: rgb(0, 54, 77); } .notification.is-success { background-color: rgb(216, 243, 231); color: rgb(22, 70, 48); } .notification.is-warning { background-color: rgb(255, 240, 204); color: rgb(66, 46, 0); } .notification.is-danger { background-color: rgb(255, 204, 214); color: rgb(128, 0, 26); } /* ---- 10. message - price and benefit warnings ---- */ .message { border-radius: var(--radius); color: var(--text); font-size: 1rem; } .message:not(:last-child) { margin-bottom: 1.5rem; } .message-header { align-items: center; background-color: var(--text); border-start-start-radius: var(--radius); border-start-end-radius: var(--radius); color: var(--scheme-main); display: flex; font-weight: 600; justify-content: space-between; line-height: 1.25; padding: 1em 1.25em; position: relative; } .message-body { border-end-start-radius: var(--radius-small); border-end-end-radius: var(--radius-small); color: var(--text); padding: 1.25em 1.5em; } .message.is-info { color: rgb(0, 89, 128); } .message.is-info .message-header { background-color: rgb(102, 209, 255); color: rgb(0, 36, 51); } .message.is-info .message-body { background-color: rgb(235, 249, 255); color: rgb(0, 89, 128); } .message.is-warning { color: rgb(117, 82, 0); } .message.is-warning .message-header { background-color: rgb(255, 183, 15); color: rgb(41, 29, 0); } .message.is-warning .message-body { background-color: rgb(255, 249, 235); color: rgb(117, 82, 0); } .message.is-danger { color: rgb(204, 0, 41); } .message.is-danger .message-header { background-color: rgb(255, 102, 133); color: rgb(26, 0, 5); } .message.is-danger .message-body { background-color: rgb(255, 235, 239); color: rgb(204, 0, 41); } /* ---- 11. tabs - the provider page ---- */ .tabs { -webkit-overflow-scrolling: touch; align-items: stretch; display: flex; font-size: 1rem; justify-content: space-between; overflow: hidden; overflow-x: auto; white-space: nowrap; } .tabs:not(:last-child) { margin-bottom: 1.5rem; } .tabs a { align-items: center; border-bottom: 0.0625rem solid var(--border); color: var(--text); display: flex; justify-content: center; margin-bottom: -0.0625rem; padding: 0.5em 1em; text-decoration: none; vertical-align: top; } .tabs a:hover { border-bottom-color: var(--text-strong); color: var(--text-strong); } .tabs ul { align-items: center; border-bottom: 0.0625rem solid var(--border); display: flex; flex-grow: 1; flex-shrink: 0; justify-content: flex-start; } .tabs li { display: block; } .tabs li + li { margin-top: 0; } .tabs li.is-active a { border-bottom-color: var(--link-text); color: var(--link-text); } .tabs.is-centered ul { justify-content: center; } .tabs.is-boxed a { border: 0.0625rem solid transparent; border-start-start-radius: var(--radius); border-start-end-radius: var(--radius); } .tabs.is-boxed a:hover { background-color: var(--background); border-bottom-color: var(--border); } .tabs.is-boxed li.is-active a { background-color: var(--scheme-main); border-color: var(--border); border-bottom-color: transparent !important; } /* ---- 12. layout - login pages only ---- */ .section { padding: 3rem 1.5rem; } .container { flex-grow: 1; margin: 0 auto; position: relative; width: 100%; } .columns { margin-inline-start: -0.75rem; margin-inline-end: -0.75rem; margin-top: -0.75rem; } .columns:last-child { margin-bottom: -0.75rem; } .columns:not(:last-child) { margin-bottom: 0.75rem; } .columns.is-centered { justify-content: center; } .column { display: block; flex-basis: 0; flex-grow: 1; flex-shrink: 1; padding: 0.75rem; } .column.is-one-third { flex: none; width: 33.3333%; } @media print, screen and (min-width: 769px) { .columns { display: flex; } } @media screen and (min-width: 1024px) { .container { max-width: 60rem; } .section { padding: 3rem 3rem; } } @media screen and (min-width: 1216px) { .container { max-width: 72rem; } } @media screen and (min-width: 1408px) { .container { max-width: 84rem; } } /* ---- 13. helpers ---- */ .is-size-7 { font-size: 0.75rem !important; } .has-text-centered { text-align: center !important; } .has-text-link { color: var(--link) !important; } a.has-text-link:hover { color: var(--link-text) !important; } .has-text-grey-light { color: var(--text-weak) !important; } .mr-2 { margin-right: 0.5rem !important; }