wrapper. */
.bcpl-form {
text-align: left;
max-width: 560px;
margin: 0 auto;
}
.bcpl-form .form-group {
margin-bottom: 16px;
}
.bcpl-req {
color: #c0392b;
}
.bcpl-mandatory {
font-size: 12px;
color: #666;
margin: 0 0 14px;
}
.bcpl-form label {
display: block;
margin-bottom: 6px;
font-weight: 700;
color: #0f2453;
}
.bcpl-form .bcpl-captcha {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.bcpl-form .bcpl-captcha input[type="text"] {
-webkit-box-flex: 1;
-ms-flex: 1 1 160px;
flex: 1 1 160px;
min-width: 140px;
max-width: 220px;
height: 44px;
padding: 2px 8px;
margin-right: 12px;
border: 1px solid #ccc;
}
.bcpl-form .bcpl-captcha img {
height: 46px;
width: 130px;
background: #fff;
border: 1px solid #d8dce6;
border-radius: 3px;
}
.bcpl-captcha-refresh {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 42px;
height: 46px;
margin-left: 8px;
padding: 0;
background: #f2f5fb;
border: 1px solid #d8dce6;
border-radius: 3px;
color: #0f2453;
font-size: 15px;
cursor: pointer;
-webkit-transition: background .2s ease, border-color .2s ease;
transition: background .2s ease, border-color .2s ease;
}
.bcpl-captcha-refresh:hover,
.bcpl-captcha-refresh:focus {
background: #0f2453;
border-color: #0f2453;
color: #ffce14;
}
.bcpl-form .bcpl-actions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.bcpl-form .sub,
.bcpl-form .res {
-webkit-box-flex: 1;
-ms-flex: 1 1 140px;
flex: 1 1 140px;
min-height: 46px;
margin: 0 10px 10px 0;
padding: 10px 22px;
border: 0;
border-radius: 3px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
}
.bcpl-form .sub {
background: #0f2453;
color: #fff;
}
.bcpl-form .sub:hover {
background: #d49809;
}
.bcpl-form .res {
background: #e6e6e6;
color: #333;
}
.bcpl-form .res:hover {
background: #d2d2d2;
}
.bcpl-error {
border: 1px solid #990000;
background-color: #d70000;
color: #fff;
padding: 8px 10px;
border-radius: 3px;
max-width: 100%;
margin-bottom: 12px;
}
/* "Read More" buttons across the site follow the brand, not bootstrap red. */
.about-wthree .btn-danger,
.advantage-block .btn-danger {
background: #0f2453;
border-color: #0f2453;
padding: 10px 26px;
letter-spacing: 1px;
font-weight: 700;
border-radius: 3px;
}
.about-wthree .btn-danger:hover,
.about-wthree .btn-danger:focus,
.advantage-block .btn-danger:hover,
.advantage-block .btn-danger:focus {
background: #d49809;
border-color: #d49809;
}
@media (max-width: 767px) {
.contact-agileits h4,
.contact-w3-agile1 h4 {
font-size: 20px;
}
/* Comfortable tap targets throughout. */
a.btn,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
min-height: 44px;
}
}
/* --------------------------------------------------------------------------
10. Interior design page - gallery and tab buttons
-------------------------------------------------------------------------- */
#vlightbox1 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* A tidy grid instead of thumbnails at their own natural sizes. */
#vlightbox1 a {
display: block;
width: 16.666%;
padding: 5px;
}
#vlightbox1 img {
display: block;
width: 100%;
height: 140px;
object-fit: cover;
-o-object-fit: cover;
border-radius: 3px;
}
@media (max-width: 1199px) {
#vlightbox1 a {
width: 25%;
}
}
@media (max-width: 767px) {
#vlightbox1 a {
width: 50%;
}
#vlightbox1 img {
height: 120px;
}
}
/* The interior services grid reads as a table of headings - give it the same
navy/gold treatment as the availability tables. */
.interior-th th {
background: #f6f7fa;
color: #0f2453;
font-size: 14px;
font-weight: 700;
letter-spacing: .6px;
border-color: #e3e6ee !important;
}
.about-wthree h2.text-center {
margin-top: 46px;
font-family: 'Oswald', 'Lato', sans-serif;
letter-spacing: 3px;
color: #0f2453;
}
.tz-gallery {
padding: 20px 0;
}
.tz-gallery .lightbox img {
height: auto;
}
@media (max-width: 767px) {
.tz-gallery {
padding: 10px 0;
}
/* Stacked, full-width buttons instead of a squashed justified group. */
.btn-pref.btn-group-justified {
display: block;
}
.btn-pref.btn-group-justified > .btn-group {
display: block;
width: 100%;
margin-bottom: 8px;
}
.btn-pref.btn-group-justified > .btn-group > .btn {
width: 100%;
border-radius: 3px !important;
line-height: 1.5;
padding: 13px 10px;
font-size: 14px;
white-space: normal;
}
.well {
padding: 12px;
}
}
.modal-lg {
width: auto;
max-width: 500px;
}
@media (max-width: 540px) {
.modal-lg,
.modal-dialog {
width: auto;
margin: 10px;
}
}
.ch-grid li {
width: auto;
height: auto;
max-width: 220px;
margin: 12px;
}
/* --------------------------------------------------------------------------
11. Footer
-------------------------------------------------------------------------- */
.copy p {
padding: 1em 15px;
letter-spacing: 1px;
line-height: 1.6;
}
@media (max-width: 767px) {
.copy p {
font-size: 12px;
letter-spacing: .5px;
}
}
/* --------------------------------------------------------------------------
12. Legacy pages built with layout tables (watch.php)
-------------------------------------------------------------------------- */
.bcpl-legacy-scroll {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.bcpl-legacy-scroll > table {
max-width: 100%;
}
@media (max-width: 767px) {
.bcpl-legacy-scroll > table {
width: 100% !important;
}
}
/* --------------------------------------------------------------------------
Site footer (layouts/contact.php)
A flat navy panel rather than a photo with translucent boxes floating on it.
Fields are tinted glass on the navy, not solid white - white blocks on a
dark ground glare and pull the eye away from everything else.
-------------------------------------------------------------------------- */
.bcpl-footer {
position: relative;
background: #0d1f47;
background: -webkit-linear-gradient(top, #123059 0%, #0b1a3c 100%);
background: linear-gradient(180deg, #123059 0%, #0b1a3c 100%);
border-top: 3px solid #ffce14;
padding: 58px 0 44px;
color: #b9c2d6;
font-size: 14px;
line-height: 1.75;
}
.bcpl-footer__grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -18px;
}
.bcpl-footer__col {
padding: 0 18px;
margin-bottom: 26px;
}
.bcpl-footer__col--form {
width: 42%;
}
.bcpl-footer__col--links {
width: 24%;
}
.bcpl-footer__col--reach {
width: 34%;
}
/* This project's bootstrap.css has been edited to centre and pad every h4
globally (h4 { text-align:center; padding:20px }), and style.css justifies
every p - both have to be undone here. */
.bcpl-footer__title {
margin: 0 0 6px;
padding: 0;
font-family: 'Oswald', 'Lato', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 2.2px;
text-transform: uppercase;
text-align: left;
color: #fff;
}
.bcpl-footer p {
text-align: left;
}
.bcpl-footer__title::after {
content: "";
display: block;
width: 34px;
height: 2px;
margin: 10px 0 16px;
background: #ffce14;
}
.bcpl-footer__lead {
margin: 0 0 18px;
font-size: 13.5px;
color: #9fabc4;
}
/* --- form ------------------------------------------------------------------ */
.bcpl-footer__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -6px;
}
.bcpl-footer__row > input {
-webkit-box-flex: 1;
-ms-flex: 1 1 140px;
flex: 1 1 140px;
margin: 0 6px 12px;
width: auto;
}
.bcpl-footer__form input {
display: block;
width: 100%;
margin-bottom: 12px;
padding: 11px 14px;
min-height: 46px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 3px;
color: #fff;
font-size: 14px;
font-family: inherit;
-webkit-transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.bcpl-footer__form input::-webkit-input-placeholder {
color: #8b96ad;
}
.bcpl-footer__form input::-moz-placeholder {
color: #8b96ad;
opacity: 1;
}
.bcpl-footer__form input::placeholder {
color: #8b96ad;
}
.bcpl-footer__form input:hover {
border-color: rgba(255, 255, 255, .32);
}
.bcpl-footer__form input:focus {
outline: none;
background: rgba(255, 255, 255, .1);
border-color: #ffce14;
-webkit-box-shadow: 0 0 0 3px rgba(255, 206, 20, .16);
box-shadow: 0 0 0 3px rgba(255, 206, 20, .16);
}
.bcpl-footer__form button {
display: inline-block;
margin-top: 4px;
padding: 12px 28px;
background: #ffce14;
border: 0;
border-radius: 3px;
color: #0f2453;
font-family: 'Oswald', 'Lato', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
cursor: pointer;
-webkit-transition: background .2s ease, transform .2s ease;
transition: background .2s ease, transform .2s ease;
}
.bcpl-footer__form button i {
margin-left: 7px;
}
.bcpl-footer__form button:hover,
.bcpl-footer__form button:focus {
background: #fff;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
}
.bcpl-footer__note {
margin: 12px 0 0;
font-size: 12px;
color: #7e89a1;
}
/* --- quick links ----------------------------------------------------------- */
.bcpl-footer__links {
list-style: none;
margin: 0;
padding: 0;
}
.bcpl-footer__links li {
margin-bottom: 9px;
}
.bcpl-footer__links a {
position: relative;
display: inline-block;
padding-left: 15px;
color: #b9c2d6;
font-size: 13.5px;
-webkit-transition: color .2s ease, padding-left .2s ease;
transition: color .2s ease, padding-left .2s ease;
}
.bcpl-footer__links a::before {
content: "\203A";
position: absolute;
left: 0;
top: -1px;
color: #ffce14;
}
.bcpl-footer__links a:hover,
.bcpl-footer__links a:focus {
color: #fff;
padding-left: 20px;
text-decoration: none;
}
/* --- reach us -------------------------------------------------------------- */
.bcpl-footer__contact {
list-style: none;
margin: 0 0 16px;
padding: 0;
}
.bcpl-footer__contact li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-bottom: 13px;
font-size: 13.5px;
}
.bcpl-footer__contact li > i {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 17px;
margin-right: 11px;
margin-top: 4px;
color: #ffce14;
text-align: center;
}
.bcpl-footer__contact a {
color: #b9c2d6;
}
.bcpl-footer__contact a:hover {
color: #ffce14;
}
.bcpl-footer__maplink {
display: inline-block;
margin-bottom: 20px;
padding: 8px 16px;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 3px;
color: #dfe4ef;
font-size: 12px;
letter-spacing: .8px;
-webkit-transition: border-color .2s ease, color .2s ease;
transition: border-color .2s ease, color .2s ease;
}
.bcpl-footer__maplink i {
margin-right: 7px;
color: #ffce14;
}
.bcpl-footer__maplink:hover,
.bcpl-footer__maplink:focus {
border-color: #ffce14;
color: #fff;
text-decoration: none;
}
/* --- social ---------------------------------------------------------------- */
.bcpl-footer__social {
list-style: none;
margin: 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.bcpl-footer__social li {
margin: 0 9px 9px 0;
}
.bcpl-footer__social a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 50%;
color: #cdd5e4;
font-size: 15px;
-webkit-transition: background .2s ease, border-color .2s ease, color .2s ease;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.bcpl-footer__social a:hover,
.bcpl-footer__social a:focus {
background: #ffce14;
border-color: #ffce14;
color: #0f2453;
text-decoration: none;
}
/* --- copyright bar (layouts/footer.php) ------------------------------------ */
.copy {
background: #0a1631;
border-top: 1px solid rgba(255, 255, 255, .08);
}
.copy p {
font-size: 13px;
color: #97a2b8;
}
/* --- responsive ------------------------------------------------------------ */
@media (max-width: 991px) {
.bcpl-footer__col--form {
width: 100%;
}
.bcpl-footer__col--links {
width: 38%;
}
.bcpl-footer__col--reach {
width: 62%;
}
}
@media (max-width: 767px) {
.bcpl-footer {
padding: 40px 0 30px;
}
.bcpl-footer__col--links,
.bcpl-footer__col--reach {
width: 100%;
}
.bcpl-footer__col {
margin-bottom: 30px;
}
.bcpl-footer__col:last-child {
margin-bottom: 0;
}
.bcpl-footer__form button {
width: 100%;
text-align: center;
}
}
/* --------------------------------------------------------------------------
Home page sections - Projects & Services / About BCPL / What We Offer
One shared heading treatment, cards with a real media frame, and the two
column blocks balanced against each other instead of one side dwarfing
the other. Content and imagery unchanged.
-------------------------------------------------------------------------- */
/* --- shared section heading ------------------------------------------------ */
.banner-bottom .agileits_banner_bottom h3,
.about-wthree .ab-w3l-spa > h3.title-w3-agileits,
.advantages .advantages-main > h3.title-w3-agileits {
position: relative;
margin: 0 0 14px;
padding: 0 0 18px;
font-family: 'Oswald', 'Lato', sans-serif;
font-size: 32px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 3px;
text-align: center;
text-transform: uppercase;
color: #0f2453;
}
.banner-bottom .agileits_banner_bottom h3::after,
.about-wthree .ab-w3l-spa > h3.title-w3-agileits::after,
.advantages .advantages-main > h3.title-w3-agileits::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 62px;
height: 3px;
margin-left: -31px;
background: #ffce14;
border-radius: 2px;
}
.banner-bottom .agileits_banner_bottom h3 span {
font-size: inherit !important;
color: inherit;
background: none;
padding: 0;
letter-spacing: inherit;
}
.banner-bottom .agileits_banner_bottom {
margin-bottom: 34px;
}
.bcpl-tagline {
text-align: center;
font-family: 'Oswald', 'Lato', sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
color: #d49809;
margin: 0 0 18px;
}
/* --- Projects & Services --------------------------------------------------- */
.banner-bottom {
background: #fff;
padding: 74px 0;
}
/* All four graphics are 200x160, so framing the media at that exact 5:4 ratio
lets them fill it edge to edge - no letterboxing, no image floating in a
box of empty background. */
.bcpl-cards .bcpl-card__media {
position: relative;
height: auto;
aspect-ratio: 5 / 4;
padding: 0;
background: #fff;
border-bottom: 1px solid #e7ebf3;
}
.bcpl-cards .bcpl-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
-o-object-fit: cover;
}
@supports not (aspect-ratio: 1) {
.bcpl-cards .bcpl-card__media {
height: 190px;
}
}
.bcpl-card {
position: relative;
}
/* Gold rule that sweeps in across the top of the card on hover. */
.bcpl-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: #ffce14;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transition: transform .35s ease;
transition: transform .35s ease;
z-index: 3;
}
.bcpl-card:hover::before,
.bcpl-card:focus::before {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.bcpl-cards .bcpl-card__body {
padding: 22px 20px 20px;
border-top: 0;
}
.bcpl-cards .bcpl-card__title {
font-size: 15px;
letter-spacing: 1.6px;
margin-bottom: 10px;
}
.bcpl-cards .bcpl-card__text {
font-size: 13.5px;
line-height: 1.7;
color: #6b7286;
margin-bottom: 16px;
}
.bcpl-cards .bcpl-card__cta {
padding-top: 14px;
border-top: 1px solid #eef0f5;
width: 100%;
}
/* --- About BCPL ------------------------------------------------------------ */
.about-wthree {
background: #eef1f6;
padding: 74px 0;
}
.about-wthree .ab-w3l-spa > .about-para-w3ls {
font-size: 15.5px;
line-height: 1.9;
color: #4a5265;
max-width: 820px;
margin: 0 auto 46px;
}
.bcpl-about-row > .col-md-6 > img {
width: 100%;
height: auto;
border-radius: 4px;
-webkit-box-shadow: 0 10px 30px rgba(15, 36, 83, .14);
box-shadow: 0 10px 30px rgba(15, 36, 83, .14);
}
.bcpl-about-row > .col-md-6 > p,
.bcpl-about-row > .col-md-6 p {
font-size: 15px;
line-height: 1.95;
color: #4a5265;
text-align: left;
}
@media (min-width: 992px) {
.bcpl-about-row > .col-md-6:last-child {
padding-left: 42px;
}
}
/* --- What We Offer --------------------------------------------------------- */
.advantages {
background: #fff;
padding: 74px 0;
}
.advantages .advantages-main > h3.title-w3-agileits {
color: #0f2453;
margin-bottom: 40px;
}
.bcpl-offer-row {
margin-left: -15px;
margin-right: -15px;
}
.bcpl-offer-row .advantage-grid {
padding-left: 15px;
padding-right: 15px;
}
/* Copy panel: a quiet card with a gold spine rather than a boxed-in block. */
.bcpl-offer-row .left-w3ls .advantage-block {
height: 100%;
padding: 34px 34px 34px 32px;
background: #f7f9fc;
border: 1px solid #e7ebf3;
border-left: 3px solid #ffce14;
border-radius: 4px;
-webkit-box-shadow: none;
box-shadow: none;
}
.bcpl-offer-row .left-w3ls .advantage-block:hover {
background: #f2f5fb;
border-color: #e7ebf3;
border-left-color: #ffce14;
-webkit-box-shadow: none;
box-shadow: none;
}
.bcpl-offer-row .advantage-block > i.fa {
display: inline-block;
width: 52px;
height: 52px;
line-height: 52px;
margin-bottom: 18px;
text-align: center;
font-size: 21px;
color: #0f2453;
background: #ffce14;
border-radius: 4px;
}
.bcpl-offer-row .advantage-block p {
font-size: 15px;
line-height: 1.95;
color: #4a5265;
text-align: left;
margin-bottom: 22px;
}
/* Photo column: match the copy panel's height instead of towering over it. */
.bcpl-offer-row .right-w3ls .advantage-block {
height: 100%;
padding: 0;
background: transparent;
border: 0;
border-radius: 4px;
overflow: hidden;
-webkit-box-shadow: 0 10px 30px rgba(15, 36, 83, .14);
box-shadow: 0 10px 30px rgba(15, 36, 83, .14);
}
.bcpl-offer-row .right-w3ls .advantage-block img {
width: 100%;
height: auto;
object-fit: cover;
-o-object-fit: cover;
border-radius: 4px;
}
@media (min-width: 992px) {
.bcpl-offer-row {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.bcpl-offer-row .advantage-grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.bcpl-offer-row .advantage-block {
width: 100%;
}
/* services1.jpg is portrait (437x500). Left in normal flow it renders ~620px
tall and drags the copy panel up with it, leaving a block of dead space
under the text. Taking it out of flow lets the copy set the height and
the photo simply fills whatever that is. */
.bcpl-offer-row .right-w3ls .advantage-block {
position: relative;
min-height: 380px;
}
.bcpl-offer-row .right-w3ls .advantage-block img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
/* --- small screens --------------------------------------------------------- */
@media (max-width: 991px) {
.banner-bottom,
.about-wthree,
.advantages {
padding: 46px 0;
}
.banner-bottom .agileits_banner_bottom h3,
.about-wthree .ab-w3l-spa > h3.title-w3-agileits,
.advantages .advantages-main > h3.title-w3-agileits {
font-size: 25px;
letter-spacing: 2px;
padding-bottom: 14px;
}
.bcpl-about-row > .col-md-6 > img {
margin-bottom: 24px;
}
.bcpl-offer-row .right-w3ls .advantage-block img {
min-height: 0;
height: auto;
}
.bcpl-offer-row .left-w3ls .advantage-block {
padding: 24px 22px;
}
}
@media (max-width: 767px) {
.banner-bottom,
.about-wthree,
.advantages {
padding: 38px 0;
}
.banner-bottom .agileits_banner_bottom h3,
.about-wthree .ab-w3l-spa > h3.title-w3-agileits,
.advantages .advantages-main > h3.title-w3-agileits {
font-size: 21px !important;
letter-spacing: 1.6px;
}
.bcpl-tagline {
font-size: 12px;
letter-spacing: 2px;
}
.about-wthree .ab-w3l-spa > .about-para-w3ls {
margin-bottom: 28px;
}
}
/* --------------------------------------------------------------------------
About Us page
The copy ran the full container width - a ~1000px measure that is hard to
read - and the three closing paragraphs were one
broken with
.
Same words, same photo, held to a readable column with real paragraphs.
-------------------------------------------------------------------------- */
.bcpl-about-stat {
max-width: 720px;
margin: 0 auto 26px;
text-align: center;
font-size: 16px;
line-height: 1.8;
color: #3f4759;
}
.bcpl-about-stat .style1 {
font-weight: 700;
color: #0f2453;
}
.bcpl-about-stat .style2 {
font-size: inherit;
}
/* --- figures pulled from the page's own copy ------------------------------- */
.bcpl-stats {
list-style: none;
margin: 0 auto 46px;
padding: 0;
max-width: 860px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background: #fff;
border: 1px solid #e2e6ef;
border-radius: 4px;
overflow: hidden;
-webkit-box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.bcpl-stat {
-webkit-box-flex: 1;
-ms-flex: 1 1 0;
flex: 1 1 0;
padding: 24px 18px;
text-align: center;
border-right: 1px solid #e2e6ef;
}
.bcpl-stat:last-child {
border-right: 0;
}
.bcpl-stat__num {
display: block;
font-family: 'Oswald', 'Lato', sans-serif;
font-size: 30px;
font-weight: 700;
line-height: 1.1;
color: #0f2453;
margin-bottom: 6px;
}
.bcpl-stat__label {
display: block;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
color: #d49809;
}
/* --- promoter story row ---------------------------------------------------- */
.bcpl-about-row {
margin-bottom: 46px;
}
.bcpl-about-row > .col-md-6 > img {
width: 100%;
height: auto;
border-radius: 4px;
-webkit-box-shadow: 0 10px 30px rgba(15, 36, 83, .14);
box-shadow: 0 10px 30px rgba(15, 36, 83, .14);
}
.bcpl-about-row > .col-md-6 p {
font-size: 15px;
line-height: 1.95;
color: #4a5265;
text-align: left;
}
/* An even 50/50 leaves the photo towering over a short paragraph - give the
copy the larger half so the two sides read closer in weight. */
@media (min-width: 992px) {
.bcpl-about-row > .col-md-6:first-child {
width: 45%;
}
.bcpl-about-row > .col-md-6:last-child {
width: 55%;
padding-left: 40px;
}
}
/* --- closing copy ---------------------------------------------------------- */
.bcpl-prose > .col-md-12 {
max-width: 860px;
margin: 0 auto;
float: none;
}
.bcpl-prose p {
font-size: 15px;
line-height: 2;
color: #4a5265;
text-align: left;
margin: 0 0 22px;
}
.bcpl-prose p:last-child {
margin-bottom: 0;
}
.bcpl-prose .style1 {
font-weight: 700;
color: #0f2453;
}
/* A quiet gold initial rule to open the closing section. */
.bcpl-prose > .col-md-12::before {
content: "";
display: block;
width: 62px;
height: 3px;
margin: 0 auto 34px;
background: #ffce14;
border-radius: 2px;
}
@media (max-width: 767px) {
.bcpl-stats {
margin-bottom: 30px;
}
.bcpl-stat {
-ms-flex: 1 1 100%;
flex: 1 1 100%;
border-right: 0;
border-bottom: 1px solid #e2e6ef;
padding: 18px;
}
.bcpl-stat:last-child {
border-bottom: 0;
}
.bcpl-stat__num {
font-size: 26px;
}
.bcpl-about-stat {
font-size: 14.5px;
}
.bcpl-about-row {
margin-bottom: 30px;
}
.bcpl-prose > .col-md-12::before {
margin-bottom: 24px;
}
.bcpl-prose p {
font-size: 14px;
line-height: 1.9;
margin-bottom: 18px;
}
}
/* --------------------------------------------------------------------------
13. Print and motion preferences
-------------------------------------------------------------------------- */
@media print {
.banner-top,
.bcpl-loader,
.bcpl-rail,
.thim-click-to-bottom {
display: none !important;
}
body {
padding-top: 0 !important;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* --------------------------------------------------------------------------
14. White header
The nav bar was navy (style.css line ~377 `.w3_navigation`), with white
link text on top of it. On white, the gold the old bar leaned on stops
being legible - #ffce14 scores 1.49:1 against white and #d49809 only
2.53:1, both far short of the 4.5:1 AA needs. So gold is kept purely as a
graphic accent (the logo mark, brackets, rules) and every piece of text is
navy #0f2453 (15.03:1) or the deep gold #96680a (4.91:1).
-------------------------------------------------------------------------- */
.banner-top .w3_navigation {
background: #fff;
}
/* the header floats over the page, so it needs its own edge now that the
navy block is gone */
.banner-top {
border-bottom: 1px solid #e6e9f0;
}
/* --- brand ----------------------------------------------------------------- */
.banner-top .navbar-brand > span,
.banner-top .navbar-default .navbar-brand,
.banner-top .navbar-default .navbar-brand:hover,
.banner-top .navbar-default .navbar-brand:focus {
color: #0f2453;
}
.banner-top .navbar-brand .brand-tagline {
color: #96680a;
}
/* --- desktop links --------------------------------------------------------- */
.banner-top .nav li a,
.banner-top .menu__link {
background: transparent;
color: #0f2453;
}
/* style.css gives the links a dark drop shadow to lift them off the navy;
on white it just muddies them */
.banner-top .menu--iris .menu__link {
text-shadow: none;
}
.banner-top .nav a:hover,
.banner-top .nav li a:hover,
.banner-top .nav li a:focus,
.banner-top .menu--iris .menu__link:hover,
.banner-top .menu--iris .menu__link:focus,
.banner-top .menu--iris .menu__item--current .menu__link {
background: transparent;
color: #96680a;
}
/* the corner brackets stay, in the deeper gold so they read on white */
.banner-top .menu--iris .menu__link::before,
.banner-top .menu--iris .menu__link::after {
border-color: #d49809;
}
/* --- desktop dropdown ------------------------------------------------------ */
@media (min-width: 768px) {
/* the panel used to sit against a navy bar; on white it needs an outline
of its own or it bleeds into the header */
.banner-top .dropdown-menu {
border: 1px solid #e6e9f0;
border-top: 3px solid #d49809;
-webkit-box-shadow: 0 14px 30px rgba(15, 36, 83, .16);
box-shadow: 0 14px 30px rgba(15, 36, 83, .16);
}
}
/* --- mobile header --------------------------------------------------------- */
@media (max-width: 767px) {
.banner-top .navbar-toggle {
border: 1px solid rgba(15, 36, 83, .38);
}
.banner-top .navbar-toggle:hover,
.banner-top .navbar-toggle:focus {
background: rgba(15, 36, 83, .07);
}
.banner-top .navbar-toggle .icon-bar {
background-color: #0f2453;
}
.banner-top .navbar-collapse {
background: #fff;
border-top: 1px solid #e6e9f0;
}
.banner-top .navbar-nav > li > a,
.banner-top .menu__list > li > a {
color: #0f2453;
border-bottom: 1px solid #eef0f5;
}
.banner-top .navbar-nav > li > a:hover,
.banner-top .navbar-nav > li > a:focus,
.banner-top .menu__list > li > a:hover,
.banner-top .menu__list > li > a:focus {
color: #96680a;
}
.banner-top .navbar-nav > li.dropdown > a.dropdown-toggle::after {
color: #d49809;
}
/* the submenu was a black wash over navy; on white it has to be a tint */
.banner-top .navbar-nav .dropdown-menu {
background: #f6f7fa;
border-left: 2px solid #d49809;
}
}
/* --- mobile submenu -------------------------------------------------------- */
/* Section 4 colours these for the navy panel: #dfe4ef links on a black wash,
with white hairline rules. All of that disappears on the light panel, so
the three PROJECTS entries have to be re-inked. */
@media (max-width: 767px) {
.banner-top .navbar-default .navbar-nav .open .dropdown-menu > li > a,
.banner-top .navbar-default .navbar-nav .dropdown-menu > li > a {
color: #0f2453;
border-bottom: 1px solid #e6e9f0;
}
.banner-top .navbar-default .navbar-nav .dropdown-menu > li > a::before {
color: #d49809;
}
.banner-top .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.banner-top .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
background: rgba(212, 152, 9, .14);
color: #96680a;
}
}
/* --- the open PROJECTS link ------------------------------------------------ */
/* Every page runs a jQuery .hover() that toggles .open on the dropdown, and
style.css sets `.navbar-default .navbar-nav>.open>a{color:#fff}` globally
at (0,3,1) - with :hover at (0,4,1), which outranks the link colours set
above. Left alone, PROJECTS turns white-on-white the moment it is hovered. */
.banner-top .navbar-default .navbar-nav > .open > a,
.banner-top .navbar-default .navbar-nav > .open > a:hover,
.banner-top .navbar-default .navbar-nav > .open > a:focus {
background: transparent;
color: #96680a;
}
/* --- keep the dropdown's own hover ----------------------------------------- */
/* The generic link colours above are `.banner-top .nav li a` (0,3,2 with the
pseudo-class), which ties section 3's `.banner-top .dropdown-menu > li > a`
and wins on source order - flattening the navy hover row the submenu was
designed with. Re-assert it; gold on navy is 10.08:1. */
@media (min-width: 768px) {
.banner-top .dropdown-menu > li > a {
background: transparent;
color: #0f2453;
}
.banner-top .dropdown-menu > li > a:hover,
.banner-top .dropdown-menu > li > a:focus {
background: #0f2453;
color: #ffce14;
}
}
/* --- the full logo lock-up -------------------------------------------------- */
/* The brand is now the artwork itself - mark, name and tagline in one image -
instead of the mark beside live HTML text. It is a stacked, near-square
lock-up (222x240, aspect .923), so its baked-in "BHUVANESHWARI" is only
8.7% of the image height: it needs roughly 110px of height before that line
is comfortably readable, against the 64px the old mark sat at. Height is
stepped down on smaller screens, where the wordmark reads as brand shape
rather than text and a tall fixed header would eat the viewport. */
.banner-top .navbar-brand .brand-logo {
max-height: 112px;
margin-right: 0;
width: auto;
}
@media (max-width: 991px) {
.banner-top .navbar-brand .brand-logo {
max-height: 92px;
}
}
@media (max-width: 767px) {
.banner-top .navbar-brand .brand-logo {
max-height: 68px;
}
}
@media (max-width: 400px) {
.banner-top .navbar-brand .brand-logo {
max-height: 56px;
}
}
/* --------------------------------------------------------------------------
15. Nav row alignment
Brand and menu were laid out with bootstrap's floats (.navbar-left /
.navbar-right), which align both to the TOP of the row. That was unnoticed
while the brand was a 64px mark, but against the 112px lock-up the menu
sits high and reads as unaligned. Flex the row instead and centre it.
Desktop only - below 768px the menu is the collapsed panel and has to stay
a full-width block under the brand.
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
.banner-top .w3_navigation .navbar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
/* bootstrap.css line ~6319 gives .navbar a clearfix ::before/::after.
Inside a flex container those stop being table cells and become two
extra flex items, which space-between then spaces out - pushing the
brand and the menu in from both edges. Flex needs no clearfix. */
.banner-top .w3_navigation .navbar::before,
.banner-top .w3_navigation .navbar::after {
display: none;
}
/* .navbar-right pulls itself out by -15px to sit flush in the floated
row; as a flex item that just hangs it past the container edge */
.banner-top .navbar-collapse.navbar-right {
margin-right: 0;
}
/* style.css line ~4595 lifts .nav by 8px - a nudge for the float layout
that now reads as the menu sitting above centre */
.banner-top .navbar-collapse .nav {
margin-top: 0;
margin-bottom: 0;
}
}
/* --------------------------------------------------------------------------
16. Floating contact rail
The phone and email used to sit in a strip across the top of the header,
which cost ~44px of every page for two links most visitors never need on
arrival. They are now a fixed pair of buttons pinned to the right edge and
centred against the viewport: icon only at rest, sliding open to reveal the
number / address on hover or keyboard focus. Sits under the header
(z-index 9999) so it can never cover the menu.
Colours: gold on navy at rest is 10.08:1, navy on gold when open is 5.94:1.
-------------------------------------------------------------------------- */
.bcpl-rail {
position: fixed;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 9990;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.bcpl-rail-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 8px;
background: #0f2453;
color: #fff;
text-decoration: none;
border-radius: 4px 0 0 4px;
-webkit-box-shadow: 0 6px 18px rgba(15, 36, 83, .28);
box-shadow: 0 6px 18px rgba(15, 36, 83, .28);
-webkit-transition: background .25s ease, color .25s ease;
transition: background .25s ease, color .25s ease;
}
.bcpl-rail-btn:last-child {
margin-bottom: 0;
}
.bcpl-rail-btn:hover,
.bcpl-rail-btn:focus {
background: #d49809;
color: #0f2453;
text-decoration: none;
}
.bcpl-rail-ic {
-webkit-box-flex: 0;
-ms-flex: 0 0 52px;
flex: 0 0 52px;
width: 52px;
height: 52px;
line-height: 52px;
text-align: center;
font-size: 19px;
color: #ffce14;
-webkit-transition: color .25s ease;
transition: color .25s ease;
}
.bcpl-rail-btn:hover .bcpl-rail-ic,
.bcpl-rail-btn:focus .bcpl-rail-ic {
color: #0f2453;
}
/* clipped to nothing until the button opens; max-width animates, width:auto
would not */
.bcpl-rail-txt {
max-width: 0;
overflow: hidden;
white-space: nowrap;
opacity: 0;
font-family: 'Federo', sans-serif;
font-size: 14px;
letter-spacing: .6px;
-webkit-transition: max-width .32s ease, opacity .22s ease, padding .32s ease;
transition: max-width .32s ease, opacity .22s ease, padding .32s ease;
}
.bcpl-rail-btn:hover .bcpl-rail-txt,
.bcpl-rail-btn:focus .bcpl-rail-txt {
max-width: 240px;
opacity: 1;
padding-left: 18px;
}
/* Touch: there is no hover to open the label, and a tap should place the call
or open the mail client rather than expand a panel first. */
@media (max-width: 767px) {
.bcpl-rail-txt {
display: none;
}
.bcpl-rail-ic {
-ms-flex: 0 0 46px;
flex: 0 0 46px;
width: 46px;
height: 46px;
line-height: 46px;
font-size: 17px;
}
.bcpl-rail-btn {
margin-bottom: 6px;
}
}