/* |-------------------------------------------------------------------------- | BS5 compatibility shims (Task 11377) |-------------------------------------------------------------------------- | Restores BS3/BS4 helper classes that BS5 dropped, so existing markup | and per-customer custom CSS that targets these selectors keeps working. */ /* BS5 underlines every link by default; BS3 only underlined on hover. The toucantechV2 and businessbecause shims restore that, but V3 never got the same rule, so after the BS5 push every link on a V3 site came back underlined. It shows up first on the main menu because nothing there can turn it off: `underline_hyperlinks` is only ever emitted per-panel and for the footer menu, so the main nav had always relied on the BS3 default. Restore it, and keep styled link-components underline-free in every state -- the later, equal-specificity rule wins over a:hover for them. */ a { text-decoration: none; } a:hover, a:focus { text-decoration: underline; } .btn, .btn:hover, .btn:focus, .nav-link, .nav-link:hover, .nav-link:focus, .navbar a, .navbar a:hover, .navbar a:focus, .dropdown-item, .dropdown-item:hover, .dropdown-item:focus, .dropdown-toggle, .dropdown-toggle:hover, .dropdown-toggle:focus, .dropbtn, .dropbtn:hover, .dropbtn:focus, .main-nav, .main-nav:hover, .main-nav:focus, .dropdown-sub-page, .dropdown-sub-page:hover, .dropdown-sub-page:focus { text-decoration: none; } /* BS5 forces `.row > *` to width:100%. Front-end section buttons (the btn / btn_with_link bricks output `.btn.section-btn`) are often dropped straight into a `.row` with no column wrapper, so BS5 stretched them full-width / stacked. Keep them content-sized unless they explicitly opt into full width (`.w-100`); the row's own justify-content handles alignment. */ .row > .btn.section-btn:not(.w-100) { width: auto; max-width: none; } /* BS3 and BS4 both set `position: relative` on every grid column; BS5 dropped it. Any absolutely-positioned child of a bare column therefore stopped resolving against that column and escaped to the nearest positioned ancestor — in practice . That is why the profile "100%" completeness badge (position:absolute; bottom:-5px; right:40px inside a plain .col-auto) floated to the bottom-right of the page instead of sitting on the avatar. Restoring the BS4 behaviour fixes every instance of this at once rather than per-element. */ .row > .col, .row > [class*="col-"] { position: relative; } /* BS4 emitted the `auto` margin utilities AFTER the numeric ones, so `mx-auto` always beat a `ml-0`/`mr-0` sitting on the same element. BS5's utilities API reverses that: `.mx-auto` is written at ~171k in bootstrap.min.css and `.ms-0`/`.me-0` at ~172k, so the directional zeros now win and any `mx-auto ms-0 me-0` element silently stops centring. (Found via the Settings page: "Personal Information" and "Mentoring" sat 185px left of "Privacy Settings", which passes no ms-0/me-0.) There are 10+ such elements across the front end, so restore BS4's precedence once here rather than editing each view. */ .mx-auto { margin-right: auto !important; margin-left: auto !important; } /* BS5 sizes grid columns with `flex:0 0 auto; width:N%` where BS4 used `flex:0 0 N%` plus a max-width. A flex-basis survived a later `width` declaration; a plain `width` does not — and `.input-group{width:100%}` is emitted at char ~43539 of bootstrap.min.css, long after the grid at ~18835. So any element that is BOTH a column and an .input-group (the profile edit form uses `col-lg-9 input-group` for every field wrapper) lost its column width, went full width and dropped BELOW its label: the Edit Profile section measured 993px tall against live's 668px, with each row 71px instead of 36px. Re-assert the column width at (0,2,0) specificity so it beats .input-group regardless of source order. Only the column classes that actually appear alongside .input-group in the markup are listed. */ /* Breakpoint-less columns, which are built inline by PHP (e.g. the custom-field option row picks col-11 or col-12 depending on whether a delete button shows) and so were missed by a grep for literal class attributes. Without this the select took the full row and pushed the trash icon onto its own line below, where live keeps it inline to the right. */ .input-group.col-5 { width: 41.666667%; } .input-group.col-11 { width: 91.666667%; } .input-group.col-12 { width: 100%; } @media (min-width: 576px) { .input-group.col-sm-5 { width: 41.666667%; } .input-group.col-sm-9 { width: 75%; } } @media (min-width: 768px) { .input-group.col-md-12 { width: 100%; } .input-group.col-md-6 { width: 50%; } .input-group.col-md-8 { width: 66.666667%; } .input-group.col-md-9 { width: 75%; } } @media (min-width: 992px) { .input-group.col-lg-9 { width: 75%; } } /* BS4 forced an expanded collapse to `display: block` (`.collapse.show{display:block}`), so a `
` became a plain block once opened and any `.container` inside it kept its own max-width. BS5 dropped that rule — an open collapse falls back to `.row`'s `display:flex`, the `.container` becomes a flex item, and BS5's `.row > *` (which sets `width:100%; max-width:100%` and is emitted after the container styles) overrides the container's cap. The profile Edit Profile panel is exactly this markup (`#summary-edit-section.row.collapse > .container`), so at a 1280px viewport its container measured 1304px against live's 1140px and every field inside was oversized with it. Re-assert the container caps at (0,2,0) so they beat `.row > *`. */ .row > .container { max-width: 100%; } @media (min-width: 576px) { .row > .container { max-width: 540px; } } @media (min-width: 768px) { .row > .container { max-width: 720px; } } @media (min-width: 992px) { .row > .container { max-width: 960px; } } @media (min-width: 1200px) { .row > .container { max-width: 1140px; } } /* BS5 gives .col-form-label calc(.375rem + border) top/bottom padding; on live the same label computes to 0, which is the whole 43px -> 57px row-height gap on the profile edit form (7px top + 7px bottom). Scoped to this form so it cannot affect other forms' alignment. */ #summary-edit-form .col-form-label { padding-top: 0; padding-bottom: 0; } /* Settings page block titles. `.settings-block-title` is a `.row` whose only child is a bare
(plus an optional

), not a column. BS4 padded only `.col-*` children, so those sat flush at the row's edge; BS5's `.row > *` gives EVERY direct child the 12px half-gutter, so "Privacy Settings" / "Personal Information" / "Mentoring" were indented 12px while the rows they head ("Consent Options", "Title") stayed flush — live has them all on the same edge. */ .settings-block-title > * { padding-left: 0; padding-right: 0; } /* Controls written as `class="selectpicker" ... data-width="100%"` were rendered by bootstrap-select on live, which honoured that attribute and filled its container. They are Tom Select now and .ts-wrapper ignores data-width, so each one shrank to its content and stopped lining up with the plain text inputs beside it - the business directory category row (724px against live's 836px) and the donation form's title and address selects (572px against the 617px text inputs). Tom Select copies the original classes onto its wrapper, so .selectpicker still identifies exactly the controls that used to be full width. */ .input-group > .ts-wrapper.selectpicker { width: 100%; } /* An element carrying BOTH .container and a .col-* class (e.g. the My account page wraps its sections in `container col-sm-12 me-5 text-center`). BS4's `.col-sm-12{max-width:100%}` came after the container styles and so released the 1140px cap, leaving the box full width and its centred content on the page centre. BS5 sizes columns with `width` only, so the container's cap wins: the box became 1140px wide, offset by the me-5 margin, and everything centred inside it - the Edit icon included - sat 22px right of where live puts it. */ .container[class*="col-"] { max-width: 100%; } /* An .input-group sitting directly inside a .row is a control wrapper, not a grid column, but BS5's `.row > *` hands it the 12px half-gutter anyway (BS4 padded only .col-* classes, so it measured 0 on live). On the donation form that inset every select by ~11px a side against the plain text inputs next to them. */ .row > .input-group { padding-left: 0; padding-right: 0; } /* Tom Select marks the chosen row with a near-invisible #f8f9fa; bootstrap-select on live highlights it in #007bff with white text, so the current selection was hard to see in any dropdown that used to be a selectpicker. Match live. */ .ts-dropdown .option.selected, .ts-dropdown .option.selected.active { background-color: #007bff; color: #fff; } /* This theme's BS5 build styles the bare `select` element like a .form-select: appearance:none with the caret painted as a background-image. Live leaves selects native (appearance:auto, background-image:none) and lets the browser draw the arrow. Matching live restores the arrow the donation form's "Select a payment method" was missing, and guarantees exactly one caret rather than a native arrow plus a background one. */ select.form-control { -webkit-appearance: auto; appearance: auto; background-image: none; } /* BS5 paints every cell with an opaque `--bs-table-bg` (var(--bs-body-bg), i.e. white) and forces `--bs-table-color` (var(--bs-emphasis-color), i.e. near-black), so a table sitting on a coloured panel turns into a white box with black text. Live leaves cells transparent and lets the panel and the theme's text colour show through - the event Ticket summary rendered as a bordered white block against live's transparent, blue-on-peach version. The admin theme already carries the same fix (toucantechV2/css/bs3-bs5-shim.css). Neutralised at the variables so .table-striped and the contextual .table-* variants, which set --bs-table-bg-type / -state, keep working. */ .table { --bs-table-bg: transparent; --bs-table-color: inherit; } /* BS4's .btn set no background, so a button with no colour variant kept the browser's native chrome (measured rgb(239,239,239) on live). BS5's .btn sets `background-color: var(--bs-btn-bg)` with `--bs-btn-bg: transparent`, so a variant-less .btn renders as bare text - the event decline form's Go back / Continue buttons looked like plain labels. ButtonFace/ButtonText are the system keywords for that native chrome, i.e. what live falls back to; they are NOT a brand colour and nothing here overrides Design Hub. Deliberately scoped to this form rather than applied to every bare .btn: buttons such as "Invite friends" carry no btn_ customisation class but are still coloured elsewhere in the cascade (measured orange on live), and a global rule stole their colour. */ .decline-event-invitation-form .btn:not([class*="btn-"]):not([class*="btn_"]) { background-color: ButtonFace; color: ButtonText; } .form-group { margin-bottom: 1rem; } .form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; } .form-row > .col, .form-row > [class*="col-"] { padding-right: 5px; padding-left: 5px; } /* BS5 draws a green tick + green border on any field matching :valid once the form carries .was-validated (giveOnlineForm.js / registerForEventForm.js etc. add it on submit). Most of these inputs have no `required` attribute, so HTML5 considers them valid while EMPTY — the donation "Your own amount" box showed a tick at the same moment the form's own validator printed "Please select/add a donation amount". BS3 (live) has no :valid styling at all, so suppress the tick and keep only the app's own error messaging. Border-color and padding are deliberately left alone: the theme's own .form-control rules already win those (measured), and re-declaring them here would override per-customer custom CSS. Deliberately NOT touching .form-check-input: its background-image IS the checkbox tick. */ .was-validated .form-control:valid:not(select), .was-validated .form-control:valid:focus:not(select), .form-control.is-valid:not(select), .form-control.is-valid:focus:not(select), .was-validated textarea.form-control:valid, textarea.form-control.is-valid { background-image: none; } /* Selects are excluded above on purpose. This theme applies BS5's form-select styling to the bare `select` element, where the dropdown caret IS a background-image (`var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none)`). Blanking background-image to kill the green tick also removed the caret - the donation form's "Select a payment method" lost its arrow entirely, where live still shows one. The valid tick arrives through --bs-form-select-bg-icon, so clearing just that variable drops the tick and leaves the caret alone. */ .was-validated select.form-control:valid, .was-validated select.form-control:valid:focus, select.form-control.is-valid, select.form-control.is-valid:focus { --bs-form-select-bg-icon: none; } .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] { --bs-form-select-bg-icon: none; padding-right: 2.25rem; background-position: right .75rem center; background-size: 16px 12px; } .valid-feedback, .valid-tooltip { display: none !important; } .form-inline { display: flex; flex-flow: row wrap; align-items: center; } .badge-pill { padding-right: .6em; padding-left: .6em; border-radius: 10rem; } .embed-responsive { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; } .embed-responsive::before { display: block; content: ""; } .embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } .embed-responsive-21by9::before { padding-top: 42.857143%; } .embed-responsive-16by9::before { padding-top: 56.25%; } .embed-responsive-4by3::before { padding-top: 75%; } .embed-responsive-1by1::before { padding-top: 100%; } /* |-------------------------------------------------------------------------- | HTML, BODY & Containers |-------------------------------------------------------------------------- */ html, body { height: auto; min-height: 100vh; } body { background: white; font-weight: 400; font-size: 0.9em; /* TODO: update base size in bootsrap sass */ } .container-fluid { padding-left: 0px; padding-right: 0px; } @media (min-width: 1200px) { .container-narrow { max-width: 860px; } } /*Logos*/ .tt_custom_logo_1, .tt_custom_logo_1_stacked { max-height: 200px; } .tt_custom_logo_2 { max-height: 150px; } .functional-bar-logo { max-height: 30px; } #mobile-menu-bar-overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.6); z-index: 2; } .mobile-menu-bar-partial-overlay { position: absolute; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; /* background-color: rgba(0,0,0,0.6); */ z-index: -1; } /* Careers */ /* End of Careers */ /* Bootstrap columns gutters adjustements For no gutter, apply .no-gutters class to .row element */ .column-gutters-5 { margin-right: -5px; margin-left: -5px; } .column-gutters-5 > .col, .column-gutters-5 > [class*="col-"]{ padding-right: 5px; padding-left: 5px; } @media screen and (max-width: 576px) { .column-gutters-sm-5 { margin-right: -5px; margin-left: -5px; } .column-gutters-sm-5 > .col, .column-gutters-sm-5 > [class*="col-"]{ padding-right: 5px; padding-left: 5px; } } .column-gutters-10 { margin-right: -10px; margin-left: -10px; } .column-gutters-10 > .col, .column-gutters-10 > [class*="col-"] { padding-right: 10px; padding-left: 10px; } /* |-------------------------------------------------------------------------- | Utility classes |-------------------------------------------------------------------------- */ .pt-9 { padding-top: 5.4rem!important; } .pb-9 { padding-bottom: 5.4rem!important; } .pl-9 { padding-left: 5.4rem!important; } .pr-9 { padding-right: 5.4rem!important; } @media (min-width: 768px) { .pt-md-9 { padding-top: 5.4rem!important; } .pb-md-9 { padding-bottom: 5.4rem!important; } .pl-md-9 { padding-left: 5.4rem!important; } .pr-md-9 { padding-right: 5.4rem!important; } .container { padding-left: 0.5rem; padding-right: 0.5rem; } } .fade-out-icons .svg-inline--fa:hover{ opacity: 0.5; transition: 500ms ease-out; } .underline-links a:hover { border-bottom: 2px solid currentColor; } .underline-links a { border-bottom: 2px solid transparent; } .underline-links a.active { border-bottom: 2px solid currentColor; } .h-40 { height: 40px; } .top-40 { top: 40px; } .mt-40 { margin-top:40px; } .z-999 { z-index: 999 !important; } .box-shadow-0 { box-shadow: none !important; } .hidden { display: none; /* NOTE: if you need a !important version of this use class d-none */ } .cursor-pointer {cursor: pointer;} .cursor-all-scroll {cursor: all-scroll;} .fs-1-1 { font-size: 1.1em; } .fs-4 { font-size: 4em; } .border-2-transparent { border: 2px solid transparent !important; } .text-color-default { color: #333333; } .opacity-5 { opacity: 0.5; } .mouse-over-bold:hover { font-weight: bold; } .bottom-shadow-light { box-shadow: 0 2px 12px 0 rgba(0,0,0,.2); } /*Used for long URL - so they wrap and don't break page layout'*/ .dont-break-out { /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all; /* Instead use this non-standard one: */ word-break: break-word; /* Adds a hyphen where the word breaks, if supported (No Blink) */ -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } .transparent-background { background-color: transparent !important; } ul.compact-list li { font-size: 14.4px; margin-top: 5px; } /* |-------------------------------------------------------------------------- | Pagination |-------------------------------------------------------------------------- */ div.pagination ul { list-style-type: none; } div.pagination ul li, ul.pagination li { border: solid 1px #dddddd; padding: 6px 12px; text-decoration: none; margin-left: -1px; cursor: pointer; float: left; } div.pagination ul li a, ul.pagination li a { color: #428bca; } div.pagination ul li:first-child, ul.pagination li:first-child { margin-left: 0; border-bottom-left-radius: 4px; border-top-left-radius: 4px; } div.pagination ul li:last-child, ul.pagination li:last-child { border-bottom-right-radius: 4px; border-top-right-radius: 4px; } div.pagination ul li:hover, ul.pagination li:hover { background-color: #eeeeee; } div.pagination ul li:hover a, ul.pagination li:hover a { text-decoration: none !important; color: #2a6496; } div.pagination ul li:hover span, ul.pagination li:hover span { color: #fff; } div.pagination ul li.active, ul.pagination li.active { color: #fff; background-color: #428bca; border-color: #428bca; cursor: default; } div.pagination ul .disabled { pointer-events: none; opacity: 0.8; } .stretch-input-container input { width: 200px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } @media (max-width: 576px) { .stretch-input-container { width: 100% !important; padding-right: 15px; padding-left: 15px; } .stretch-input-container input { width: 100% !important; } } @media (min-width: 576px) { .stretch-input-container input:focus { width: 400px !important; } } @media (min-width: 768px) { .stretch-input-container input:focus { width: 550px !important; } } /* |-------------------------------------------------------------------------- | Dynamic effects |-------------------------------------------------------------------------- */ .hide-fade { opacity:0; -webkit-transition: opacity 600ms ease-in-out; -moz-transition: opacity 600ms ease-in-out; -o-transition: opacity 600ms ease-in-out; transition: opacity 600ms ease-in-out; } .show-fade { opacity:1; -webkit-transition: opacity 600ms ease-in-out; -moz-transition: opacity 600ms ease-in-out; -o-transition: opacity 600ms ease-in-out; transition: opacity 600ms ease-in-out; } .btn-img:hover .img-wrap { background-color: black; } .btn-img:hover img { opacity: 0.8; } /*------------ Images layout and effects ---------*/ .background_image_stretch { background-size: cover; background-position: center; background-repeat: no-repeat; } .fixed-ratio-image-container { width: 100%; position: relative; } .fixed-ratio-image-container-1x1 { padding-top: 100%; } .fixed-ratio-image-container-3x2 { padding-top: 66.66%; } .fixed-ratio-image-container-16x9 { padding-top: 56.25%; } .fixed-ratio-image-container-4x3 { padding-top: 75%; } .fixed-ratio-image-container > * { width: 100%; height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; justify-content: center; align-items: stretch; overflow: hidden; } .fixed-ratio-image-container-full { align-items: center; } .fixed-ratio-image-container > * > img { object-fit: cover; min-width: 100%; } .fixed-ratio-image-container-full > * > img { object-fit: scale-down; } .event-detail-image { object-fit: unset !important; } .gradient-overlay-bottom { position: absolute; left: 0; right:0; bottom: 0; background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); } .fixed-ratio-image-container > a > .gradient-overlay-bottom { pointer-events: none; } .image-zoom-container { display: block; overflow: hidden; position: relative; width: 100%; } .image-zoom-container img { background-color: white; /* Fix for semi transparent PNGs*/ -webkit-transform: scale(1.01);-ms-transform: scale(1.01);transform: scale(1.01); -webkit-transition: -webkit-transform .2s;transition: -webkit-transform .2s;-o-transition: transform .2s;transition: transform .2s;transition: transform .2s, -webkit-transform .2s; } .image-zoom-container-img-hover { -webkit-transform: scale(1.05) !important;-ms-transform: scale(1.05) !important;transform: scale(1.05) !important; } .image-zoom-container-overlay { position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-color: black; opacity: 0; z-index: 999; } .image-zoom-container-overlay-hover { opacity: 0.3; } .simple-zoom-1-1 { transition: transform .2s; } .simple-zoom-1-1:hover { transform: scale(1.1); } /*------------ END Images layout and effects ---------*/ .view { position:relative; overflow:hidden; cursor:default } .view .mask { position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; width:100%; height:100%; background-attachment:fixed; cursor: pointer; } .view img,.view video{position:relative;display:block} .overlay .mask{opacity:0;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out} .overlay .mask:hover{opacity:1} .img-fluid{max-width:100%;height:auto} .flex-center{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:100%}.flex-center p{margin:0} .rgba-grey-slight,.rgba-grey-slight:after{background-color:rgba(158,158,158,.1)} .rgba-red-strong,.rgba-red-strong:after{background-color:rgba(244,67,54,.7)} .rgba-grey-strong,.rgba-grey-strong:after{background-color:rgba(158,158,158,.7)} .view-all-members:hover{cursor: pointer;} .close-faces-panel:hover{cursor: pointer;} /*Photo swipe galleries - tagged users*/ span.gallery_tagged_user { color: #fff; padding: 5px 10px 5px 10px; display: inline-block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; margin-right: 3px; margin-top: 5px; } span.gallery_tagged_user a { color: #fff; } /* |-------------------------------------------------------------------------- | Sections |-------------------------------------------------------------------------- */ section, .container, .container-fluid { position: relative; word-wrap: break-word; } section { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } section.customisation-section { background-color: #fff; } .tt-section { min-height: 300px; } .ttsection-arrow-title { top:-160; } .tt-section-background-container { position: absolute; bottom:0; left:0; right:0; min-height: 100% !important; height: 100% !important; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; overflow: hidden; /* The section's backdrop: a CSS background image, the .tt-section-overlay tint, and for a webm background a muted autoplay video. Nothing in here is ever clicked, and it is absolutely positioned across the whole section, so it must not take pointer events. THIS container -- not the overlay inside it -- is what Playwright reports as "intercepts pointer events" on the membership form, leaving the Login button unclickable for a logged-out member with an existing record. Setting it here also covers the overlay, which inherits it [task 11377, nightly regression 2026-09-11]. */ pointer-events: none; } .tt-section-background-container-no-image-support { position: absolute; bottom:0; left:0; right:0; min-height: 100% !important; height: 100% !important; } .tt-section-overlay { background-color: #000; opacity: .5; position: absolute; bottom: 0; left: 0; right: 0; top: 0; z-index: 0; /* Purely a background tint -- it never holds content, so it must never take a click. Bootstrap 5 dropped position:relative from .col-*, so section content is no longer positioned and this absolutely-positioned overlay now paints (and hit-tests) above it. ttglobal.js stretches the first section's overlay to height:10000px; margin-top:-3000px, which put it over everything below that section too -- that is what made the membership form's Login button unclickable [task 11377, nightly regression 2026-09-11]. */ pointer-events: none; } .tt-section-background-image { position: absolute; bottom: 0; left: 0; right: 0; top: 0; -moz-transition: all 1s; -webkit-transition: all 1s; transition: all 1s; -moz-background-size: cover; -webkit-background-size: cover; background-size: cover; z-index: -1; } .ttsection-arrow-header { position: absolute; top: 0; bottom: 0; left:0; right:0; z-index: 1000; pointer-events:none; background-color:#3a4751; height:40px !important; width:180px !important; margin-left:auto; margin-right:auto; opacity: 0.9; color: white; } .ttsection-arrow-header:after { content:''; position: absolute; top: 100%; left: 0; right: 0; width: 0; height: 0; border-top: solid 20px #3a4751; border-left: solid 90px transparent; border-right: solid 90px transparent; } .tt-background-image { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } .tt-edit-section { background-image: none; background-color: #EEECEE; } /* |-------------------------------------------------------------------------- | Big date |-------------------------------------------------------------------------- */ .date { position:relative; top: 0; left: 0; width: 110px; height: 55px; padding: 0px; display: table; /* margin: auto; */ } .dateHolder, .noDateHolder { margin: 0px auto; display: table-cell; vertical-align: middle; text-align: left; font-size: 20px; line-height: 21px; padding-left:4px; } .dateHolder { border-left: 1px solid; } .day { font-size: 50px; font-weight: bold; line-height: 50px; display: table-cell; vertical-align: middle; } .dateHolder > span { display: block; } /* |-------------------------------------------------------------------------- | Buttons |-------------------------------------------------------------------------- */ .btn-hover-effect { background-color: white !important; } .btn-hover-effect:hover, .btn-hover-effect:focus, .btn-hover-effect:active, .btn-hover-effect.active, .open>.dropdown-toggle.btn-hover-effect { background-color: #cccccc !important; border-color: #dddddd; } /* |-------------------------------------------------------------------------- | Forms |-------------------------------------------------------------------------- */ .form-control { font-size: 1.0em; /* TODO: update size in boostrap sass */ border-radius: 0; } .form-control.disabled:not(.bootstrap-select.disabled) { cursor: not-allowed; opacity: 0.65; } .bootstrap-select { font-size: 1.0em; /* TODO: update size in boostrap sass */ } .bootstrap-select .dropdown-toggle { border-radius: 0; } .bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder:active, .bootstrap-select>.dropdown-toggle.bs-placeholder:focus, .bootstrap-select>.dropdown-toggle.bs-placeholder:hover, .form-placeholder label, .grey-a6 { color: #a6a6a6; } /*Deselect option button*/ .bootstrap-select .filter-option-inner-close { width: 1.2rem; text-align: center; background: inherit; margin-top: -.3rem; font-weight: bold; font-size: larger; float: right; display: none; } .bootstrap-select .filter-option-inner-close::after { content: "\00D7"; } /*Reduce left padding when select picker is narrow*/ .dropdown-items-reduced-padding-left .dropdown-item { padding-left: .5em !important; } .tt-transparant-input { background-color: #3a4751; opacity: 0.8; color: white !important; /*border:none;*/ } input.tt-transparant-input { background-color: #3a4751 !important; opacity: 0.8; color: white !important; } input.tt-transparant-input:placeholder { color: white !important; } input.tt-transparant-input::-moz-placeholder { color: white; } input.tt-transparant-input:-ms-input-placeholder { color: white; } input.tt-transparant-input::-webkit-input-placeholder { color: white; } input.form-control[type=checkbox] { height: 30px; } /*select-picker custom styles*/ .bootstrap-select > .dropdown-toggle, .bootstrap-select > .btn-light:not(:disabled):not(.disabled):active, .bootstrap-select.show > .dropdown-toggle { background-color: white; border-color: #ced4da; font-size: inherit; } /* Single-select dropdown chrome, matching live (bootstrap-select): "value … × ▾", with the clear × and the caret pinned to the right edge and staying put in every state (closed / focused / open). The shim tags .ts-control as .dropdown-toggle, so Bootstrap already draws the correct caret triangle via ::after — but as an inline flex item it moves (and swaps with the ×) when TomSelect changes classes on click. Absolutely position both so they never reflow. */ .ts-wrapper.bootstrap-select .ts-control.dropdown-toggle { position: relative; padding-right: 2.5rem; } /* Guarantee ONE caret on ALL front-end selectpicker dropdowns (the shim adds `bootstrap-select` to every one — donation, events sign-up, careers, custom forms): suppress TomSelect's own SVG chevron on the control and wrapper so only Bootstrap's repositioned ::after triangle renders. Without this the chevron shows alongside ::after = 2 carets (Elena #4). */ .ts-wrapper.bootstrap-select, .ts-wrapper.bootstrap-select .ts-control { background-image: none !important; } .ts-wrapper.bootstrap-select .ts-control.dropdown-toggle::after { position: absolute; right: .85rem; top: 50%; margin: -0.15em 0 0 0; } /* Clear × sits just left of the caret and stays visible while a value is selected (TomSelect otherwise only reveals it on hover). */ .ts-wrapper.plugin-clear_button .clear-button { right: 1.9rem; } .ts-wrapper.plugin-clear_button.has-items .clear-button { opacity: 1; } /* ...but NOT when the "selection" is empty/placeholder — TomSelect marks an empty selection as an .item with data-value="" and still adds .has-items, which wrongly showed the × on unselected dropdowns. Hide it when the selected item is empty. */ .ts-wrapper.plugin-clear_button:has(> .ts-control > .item[data-value=""]) .clear-button { opacity: 0 !important; pointer-events: none; } /* Password reveal (eye) toggle on front-end login forms used a fragile inline hack (float-end + position:relative; right:-206px; top:-27px) calibrated to the old layout width, so under BS5 it renders far outside the field. Pin it inside the field's right edge instead — no width dependency. `:has` scopes the positioning context to the .mb-3 that holds the toggle; !important overrides the inline style. */ .mb-3:has(> .form-hint-password) { position: relative; } .form-hint-password { position: absolute !important; top: 50% !important; right: 12px !important; left: auto !important; bottom: auto !important; transform: translateY(-50%) !important; margin: 0 !important; } /* Front-end checkboxes/radios tagged class="form-control" inherit BS5's appearance:none, so they render as a blank box with no checkmark and look broken/unclickable (Elena #3). Restore native rendering so they show and toggle. */ input[type="checkbox"].form-control, input[type="radio"].form-control { -webkit-appearance: auto; appearance: auto; } /* BS4 padded a `.col-*` wherever it sat in the DOM; BS5 moved the gutter onto `.row > *`, so any column dropped straight into a `.container` (or any other non-row parent) lost its 15px and now sits flush against the page edge. This codebase does that a lot — the "Filter the activity feed" heading is an `

` directly inside `.container`, which is QA's "add some left padding to the activity feed" (TC-F01). Measured on /home at 1400px: live pads 13 of its 25 columns-outside-a-row and leaves 12 at zero, 11 of those carrying an explicit p-0/px-0/ps-0; this build padded only 9 of 28. So restore the gutter for that case. BS5's spacing utilities are !important, so anything the markup deliberately zeroes stays zeroed — which is what keeps this from moving the elements live also shows flush. col-form-label is excluded: it is a label, not a grid column. */ :not(.row) > [class^="col-"]:not(.col-form-label), :not(.row) > [class*=" col-"]:not(.col-form-label), :not(.row) > .col { padding-left: 15px; padding-right: 15px; } /* BS5 added an xxl grid tier BS4 never had, so `.container` grows to 1320px at viewports >=1400px where live tops out at 1140px. Everything inside then sits 90px further left, which is the bulk of QA's cross-page "fields are not aligned" reports on the front end: an element-by-element diff of test26 against testmetwo at 1400px showed 62 of 64 shared elements differing, and almost every one of them was this container offset cascading down. Cap it at live's width. Only >=1400px needs it — between 1200 and 1399 BS5 already gives 1140px, the same as live. */ @media (min-width: 1400px) { .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1140px; } } /* BS4's `.navbar` carried `padding: .5rem 1rem`; BS5 sets its padding-x to 0 and expects the horizontal inset to come from a `.container`/`.container-fluid` nested inside it, which this markup does not have. The top functional bar therefore lost 16px on each side and every item in it — search icon, notifications, Invite friends, the name, avatar and dropdown — sat 16px off where live puts them. After capping the container, this was the entire remaining diff against testmetwo on both /account/settings and /fundraising/donation. */ .navbar { --bs-navbar-padding-x: 1rem; padding-left: 16px; padding-right: 16px; } .bootstrap-select .dropdown-menu { font-size: 100%; width: 100%; } /*Bootstrap tooltips*/ .tt-tooltip { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .tooltip-inner { border: solid 1px #a6a6a6; background-color: #fff !important; color: #333333; } .tooltip.show, .tooltip.in { opacity: 1; filter:alpha(opacity=100); } .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: #fff !important; } .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: #fff !important; } .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: #fff !important; } .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: #fff !important; } /*Croppie - custom styles*/ .croppie-container .cr-slider-wrap { margin-bottom: 0; } /*Quill RTE - custom styles*/ .ql-toolbar { background-color: #dedede; text-align: left !important; } .ql-container { background-color: #ffffff; height:auto; } .ql-editor p { margin-bottom: 1rem; } /*Tag-it*/ .ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Ubuntu, Helvetica, Arial, sans-serif !important; font-size: 100% !important; } ul.tagit li.tagit-new { width: 98%; } ul.tagit { border-radius: 0; margin-bottom: 0; } /*Placeholder for editable divs*/ [data-placeholder]:empty:before { content: attr(data-placeholder); color: #a6a6a6; } [data-placeholder]:focus:before { display: none; } /*Hide mentions div*/ .mentions { display: none; } /*Styling*/ .mentions-autocomplete-list ul { list-style: none; margin: 0; padding: 0; } /*Hover box*/ .tipsy-inner { border-radius: 5px; } /* |-------------------------------------------------------------------------- | Owl Carousel plugin |-------------------------------------------------------------------------- */ .owl-carousel { position: relative; } .owl-carousel .owl-stage, .owl-carousel.owl-drag .owl-item{ -ms-touch-action: auto; touch-action: auto; } .owl-prev, .owl-next { color: #3a4751 !important; position: absolute; top: 30%; margin-top: -10px; opacity: 0.7; } .owl-prev:focus, .owl-next:focus { outline:0; } .owl-prev { left: 20%; } .owl-next { right: 20%; } .owl-prev.hidden { left: 0% !important; opacity: 0 !important; } .owl-next.hidden { right: 0% !important; opacity: 0 !important; } .animate-owl-arrows .owl-prev, .animate-owl-arrows .owl-next { -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .owl-theme .owl-nav { margin-top: 0; } .owl-theme .owl-nav .disabled { color: #3a4751 !important; opacity: 0.7; cursor: default; } .owl-stage .first-item, .owl-stage .last-item { opacity: 0.4; } .owl-stage .first-item.no-opacity, .owl-stage .last-item.no-opacity { opacity: 1; } /** Owl carousel hover over images **/ .hoverfx { position: relative; display: block; overflow: hidden; text-align: center; } .hoverfx img { position: absolute; top:0; left: 0; width: 100%; } .hoverfx:before { display: inline-block; padding-top: 60%; content: ''; vertical-align: middle; } .hoverfx .figure { position: relative; z-index: 2; display: inline-block; padding: 10px 15px; max-width: 60%; border: 3px solid #e9e9e9; color: #ecf0f1; vertical-align: middle; text-transform: uppercase; font-size: 1.2rem; opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition-property: all .3s ease; } .hoverfx .figure:hover { background: #e9e9e9; color: #333; } .hoverfx .overlay { position: absolute; bottom: 0; min-height: 25%; width: 100%; z-index: 1; padding: 5px; background: rgba(0, 0, 0, .5); opacity: 0; color: #fff; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition-property: all .3s ease; } .item:hover .figure, .item:hover .overlay { opacity: 1; } /** horizintal line with center cirlcle **/ hr.linewithdot { color: black; border-width: 3px; border-color: black; margin: 0em; } hr.linewithdot:before { content: ''; border-radius: 100%; position: absolute; height: 20px; width: 20px; background: black; left: 50%; margin: -11px; box-shadow: inherit } hr.linewithdotcustom { color: black; border-width: 3px; border-color: black; margin: 0em; } hr.linewithdotcustom:before { content: ''; border-radius: 100%; position: absolute; height: 20px; width: 20px; background: black; left: 50%; margin: -11px; box-shadow: inherit } /* |-------------------------------------------------------------------------- | Twitter Type Ahead (autocomplete) plugin |-------------------------------------------------------------------------- */ .twitter-typeahead, .typeahead, .tt-query { width: 100%; } .tt-hint { display: none; } .typeahead { background-color: #fff !important; } .tt-query { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .tt-menu { min-width: 480px; margin: 12px 0; padding: 8px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2); } .tt-suggestion { padding: 3px 20px; font-size: 14px; line-height: 24px; } .tt-suggestion:hover { cursor: pointer; color: #fff; background-color: #0097cf; } .tt-suggestion.tt-cursor { color: #fff; background-color: #0097cf; } .tt-suggestion p { margin: 0; } .text-red, span.required { color: red; } /* set CSS for placeholders on FORM's elements */ .form-placeholder { position: absolute; display: block; z-index: 100; height: auto; width: auto; top: 2px; left: 11px; padding-top: 6px; /* pointer-events: none; If this allowed, then Bootstrap tooltip not working ovver input fields */ } ::placeholder { color: #a6a6a6 !important; } .dropdown-toggle.bs-placeholder, /* bootstrap dropdown lists' label */ .placeholder-label, .form-placeholder label { font-weight: normal; line-height: 1.5; color: #a6a6a6 !important; font-size: inherit; } /* form hint or show password container visibility */ .form-hint-password { position: absolute; display: block; z-index: 100; height: auto; width: auto; bottom: 6px; right: 8px; cursor: pointer; max-height: 25px; } .form-hint-password span { font-weight: normal; line-height: 1.5; font-size: 14px; padding-top: 6px; font-weight: 400; color: #212529; font-size: 1.0em; color: #a6a6a6; } /* BS3 gave every