Skip to content

Jeff Balicki / FP_Canada

Go to a project
Toggle navigation
Toggle navigation pinning
627aa6cb by Jeff Balicki
Options

download

1 parent 839057ce
Inline Side-by-side
Showing 8 changed files with 338 additions and 10 deletions
......@@ -17037,27 +17037,33 @@ ss3-force-full-width {
max-width: 100vw;
}
#exampleModal,
#exampleModalLong {
padding-right: 0px !important;
}
#exampleModal .modal-body,
#exampleModalLong .modal-body {
color: #5B6770;
}
#exampleModal .wpcf7-form,
#exampleModalLong .wpcf7-form {
margin-top: -30px;
color: #5B6770;
}
#exampleModal .modal-content,
#exampleModalLong .modal-content {
top: 10px !important;
border-radius: 0px;
padding: 50px;
}
@media (max-width: 786px) {
#exampleModalLong .modal-content {
#exampleModal .modal-content,
#exampleModalLong .modal-content {
font-size: 1.25rem;
padding: 20px;
}
}
#exampleModal .modal-header,
#exampleModalLong .modal-header {
border-bottom: 0px solid #e5e5e5 !important;
height: 40px !important;
......@@ -17065,6 +17071,7 @@ ss3-force-full-width {
min-height: 16.43px;
padding: 15px;
}
#exampleModal .wpcf7-submit,
#exampleModalLong .wpcf7-submit {
background-color: #012169 !important;
text-transform: uppercase !important;
......@@ -17075,18 +17082,23 @@ ss3-force-full-width {
color: #fff !important;
border-width: 0px !important;
}
#exampleModal .wpcf7-submit:focus,
#exampleModal .wpcf7-submit:hover,
#exampleModalLong .wpcf7-submit:focus,
#exampleModalLong .wpcf7-submit:hover {
background-color: #005eb8 !important;
}
#exampleModal .modal-backdrop,
#exampleModalLong .modal-backdrop {
background-color: #000 !important;
}
#exampleModal .modal-backdrop.in,
#exampleModalLong .modal-backdrop.in {
opacity: 0.7 !important;
background-color: #000 !important;
z-index: 99999;
}
#exampleModal .modal-dialog,
#exampleModalLong .modal-dialog {
width: 850px;
margin-top: 1%;
......@@ -17094,50 +17106,63 @@ ss3-force-full-width {
max-width: unset !important;
}
@media (max-width: 786px) {
#exampleModalLong .modal-dialog {
#exampleModal .modal-dialog,
#exampleModalLong .modal-dialog {
width: 100%;
margin-left: 0px;
margin-top: 40px;
}
}
#exampleModal .wpcf7 label,
#exampleModalLong .wpcf7 label {
font-size: 1rem !important;
color: #5B6770;
}
#exampleModalLong h5.modal-title, #exampleModalLong .modal-title.h5 {
#exampleModal h5.modal-title, #exampleModal .modal-title.h5,
#exampleModalLong h5.modal-title,
#exampleModalLong .modal-title.h5 {
margin-bottom: 5px;
font-size: 1.5625rem !important;
color: #012169 !important;
}
#exampleModal p,
#exampleModalLong p {
font-size: 1rem;
color: #54565A;
}
#exampleModal a,
#exampleModalLong a {
color: #009ADE;
text-decoration: none;
}
#exampleModal a:hover,
#exampleModalLong a:hover {
color: #000;
text-decoration: underline;
}
#exampleModal .modal-content,
#exampleModalLong .modal-content {
padding: 20px !important;
min-height: 550px;
}
#exampleModal .wpcf7 .wpcf7-form-control-wrap input:not([type=checkbox]):not([type=radio]),
#exampleModalLong .wpcf7 .wpcf7-form-control-wrap input:not([type=checkbox]):not([type=radio]) {
width: 100% !important;
border-radius: 0px !important;
}
#exampleModal .wpcf7 label,
#exampleModalLong .wpcf7 label {
width: 100% !important;
}
#exampleModal span.wpcf7-form-control-wrap.acceptance-548,
#exampleModalLong span.wpcf7-form-control-wrap.acceptance-548 {
margin-left: -30px;
}
#exampleModal label.acceptance-548,
#exampleModalLong label.acceptance-548 {
padding-left: 15px;
}
#exampleModal .req,
#exampleModalLong .req {
margin-left: 0px;
margin-bottom: 0px;
......@@ -17145,6 +17170,7 @@ ss3-force-full-width {
float: right;
font-style: italic;
}
#exampleModal .modal-header .close,
#exampleModalLong .modal-header .close {
top: 0px;
right: 15px;
......@@ -17161,24 +17187,30 @@ ss3-force-full-width {
background: 0 0;
border: 0;
}
#exampleModal .modal-header .close:hover,
#exampleModalLong .modal-header .close:hover {
color: #000 !important;
}
#exampleModal label.container,
#exampleModalLong label.container {
flex-basis: 50% !important;
}
#exampleModal .modal-body,
#exampleModalLong .modal-body {
padding-bottom: 0px;
margin-bottom: -20px;
}
@media (max-width: 786px) {
#exampleModalLong .modal-body {
#exampleModal .modal-body,
#exampleModalLong .modal-body {
height: 100%;
}
}
#exampleModal .wpcf7-response-output,
#exampleModalLong .wpcf7-response-output {
margin-top: -20px !important;
}
#exampleModal .service-choose-container,
#exampleModalLong .service-choose-container {
max-width: 530px;
display: flex;
......@@ -17186,6 +17218,7 @@ ss3-force-full-width {
justify-content: flex-start;
padding: 10px 0;
}
#exampleModal .service-choose-container label.container,
#exampleModalLong .service-choose-container label.container {
display: flex;
height: auto;
......@@ -17209,6 +17242,80 @@ ss3-force-full-width {
margin-top: 5%;
}
#exampleModal {
min-height: 400px !important;
font-size: 1.125rem !important;
line-height: 1.3125rem !important;
}
#exampleModal .req {
position: absolute;
right: 0px;
float: right;
}
#exampleModal .close {
top: 15px !important;
}
#exampleModal h5, #exampleModal .h5 {
font-family: "Calibri-bold";
margin-bottom: 15px !important;
}
#exampleModal .wpcf7 {
max-width: unset !important;
}
#exampleModal label {
font-size: 1.125rem !important;
line-height: 1.3125rem !important;
}
#exampleModal .wpcf7-list-item-label {
font-family: "Calibri-bold";
font-size: 1.125rem !important;
line-height: 1.3125rem !important;
}
#exampleModal label.your-name {
width: 49% !important;
margin-right: 15px;
font-size: 1.125rem !important;
line-height: 1.3125rem !important;
}
#exampleModal label.your-name input {
height: 30px;
}
#exampleModal label.your-email {
width: 49% !important;
margin-right: 0px;
font-size: 1.125rem !important;
line-height: 1.3125rem !important;
}
#exampleModal label.your-email input {
height: 30px;
}
#exampleModal .contact-2022-index {
margin-bottom: 10px;
}
#exampleModal .wp-block-button {
width: 100%;
margin-top: -40px;
display: block;
}
#exampleModal .wp-block-button .wp-block-button__link {
width: 100%;
background-color: #BBBCBC !important;
color: #5B6770 !important;
text-transform: uppercase !important;
font-family: Calibri-bold !important;
font-size: 1.25rem !important;
padding: 10px 70px !important;
border-radius: 0 !important;
color: #fff !important;
border-width: 0 !important;
}
#exampleModal .wp-block-button .wp-block-button__link:hover {
background-color: #DDDDDD !important;
}
#exampleModal .modal-content {
min-height: 400px !important;
}
.label-search-input {
color: #5B6770;
}
......@@ -17346,6 +17453,49 @@ input[type=radio]:checked {
display: block;
}
.download-copy {
line-height: 2.75rem;
font-style: 40px;
}
.download-button .wp-block-button__link {
width: 365px;
height: 56px;
vertical-align: middle;
padding-top: 15px !important;
}
.download-cont {
background-color: #FFB81C;
margin-top: -30px;
padding-top: 10px;
padding-bottom: 40px;
padding-left: 49px;
padding-right: 40px;
}
.download-cont h2, .download-cont .h2 {
margin-bottom: 10px;
}
.download-cont p {
color: #333F48;
font-size: 1.25rem;
line-height: 1.3125rem;
}
.download-button .wp-block-button__link::before {
content: "";
width: 22px;
height: 22px;
margin-top: -8px;
display: inline-block;
position: relative;
margin-right: 10px;
background-repeat: no-repeat;
vertical-align: middle;
background-position: center;
background-image: url("/wp-content/themes/understrap-child/src/images/download.svg");
}
body {
font-family: "Calibri";
}
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -198,7 +198,7 @@ function animateValue(id, start, end, duration) {
$(window).on('load resize scroll', function() {
// elementInViewport($('#number16'), 'number16');
// elementInViewport($('#number17'), 'number17');
elementInViewport($('#find-number'), 'find-number');
// elementInViewport($('#find-number'), 'find-number');
});
function elementInViewport(element, id) {
......@@ -222,6 +222,23 @@ $(window).on('load resize scroll', function() {
}
$(document).on("click",".download-button a",function() {
if ($(window).width() < 600) {
console.log($(window).width() );
$("#mobile2.n2-section-smartslider").hide();
$('html, body').css({
overflow: 'hidden',
height: '100vh'
});
}
//$('#exampleModal').find('form').append('<input type="hidden" name="planner_id" value="'+$(this).data('id')+'"/>')
$('#exampleModal').modal('show');
window.open('https://yournumbers.ca/wp-content/uploads/2022/03/FP_Financial-Stress-Index_R1b.pdf', "_blank", "resizable=yes, scrollbars=yes, titlebar=yes, width=800, height=900, top=10, left=10");
});
$(document).on("click",".start_a_contact",function() {
if ($(window).width() < 600) {
......@@ -252,6 +269,8 @@ $(window).on('load resize scroll', function() {
});
$(document).on("click","#download-email-cfp a",function() {
if ($(window).width() < 600) {
console.log($(window).width() );
$('html, body').css({
......@@ -277,6 +296,20 @@ $(window).on('load resize scroll', function() {
$('#exampleModalLong').modal('hide');
});
$(document).on("click",".download-close",function() {
if ($(window).width() < 600) {
console.log($(window).width() );
$("#mobile2.n2-section-smartslider").show();
$('html, body').css({
overflow: 'scroll',
height: 'auto'
});
$([document.documentElement, document.body]).scrollTop($("#wpsl-wrap").offset().top);
}
$('#exampleModal').modal('hide');
});
$(document).on("click","#download-email",function() {
if ($(window).width() < 600) {
......
......@@ -63,11 +63,24 @@ get_template_part( 'global-templates/numbers_hero' );
</div>
</div>
</div>
<div class="modal fade " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close download-close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<?php echo do_shortcode('[contact-form-7 id="676" title="download"]'); ?>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery( document ).ready(function($) {
$('.wpcf7-submit').attr('disabled', 'disabled');
$(document).on("change","input , textarea",function() {
$('#exampleModalLong .wpcf7-submit').attr('disabled', 'disabled');
$(document).on("change","#exampleModalLong input , #exampleModalLong textarea",function() {
var empty = false;
$('input.wpcf7-validates-as-required').each(function() {
if ($(this).val() == '') {
......
<svg id="Group_1060" data-name="Group 1060" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22.133" height="22.64" viewBox="0 0 22.133 22.64">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_383" data-name="Rectangle 383" width="22.133" height="22.64" fill="#fff"/>
</clipPath>
</defs>
<g id="Group_1059" data-name="Group 1059" clip-path="url(#clip-path)">
<path id="Path_1325" data-name="Path 1325" d="M84.683,0a3.609,3.609,0,0,1,.447.13,1.712,1.712,0,0,1,1.1,1.519c.008.091.007.182.007.274,0,3.965,0,5,0,8.968V11.1c.058-.053.093-.083.125-.115.719-.72,1.433-1.444,2.158-2.158a1.751,1.751,0,0,1,2.9.736,1.7,1.7,0,0,1-.381,1.7c-.077.088-.164.168-.247.251q-2.527,2.527-5.054,5.054a1.75,1.75,0,0,1-2.358.156,1.9,1.9,0,0,1-.165-.148q-2.62-2.619-5.238-5.239a1.754,1.754,0,1,1,2.455-2.506c.723.715,1.44,1.437,2.158,2.158a.527.527,0,0,1,.07.125l.058-.039v-.163c0-4,0-5.081,0-9.086A1.706,1.706,0,0,1,83.578.257,3.914,3.914,0,0,1,84.266,0Z" transform="translate(-73.406)" fill="#fff"/>
<path id="Path_1326" data-name="Path 1326" d="M3.513,260.895H18.624v-.171c0-1.278,0-2.556,0-3.835a1.754,1.754,0,0,1,3.506-.1q0,.065,0,.13,0,2.843,0,5.687a1.746,1.746,0,0,1-1.816,1.815q-9.252,0-18.5,0a1.745,1.745,0,0,1-1.787-1.47A1.813,1.813,0,0,1,0,262.623q0-2.863,0-5.726a1.755,1.755,0,0,1,3.506-.147c0,.078,0,.156,0,.235q0,1.872,0,3.743Z" transform="translate(0 -241.778)" fill="#fff"/>
</g>
</svg>
......@@ -507,7 +507,7 @@ span.number-med.last{
.modal{
max-width: 100vw;
}
#exampleModal,
#exampleModalLong {
padding-right: 0px !important;
.modal-body {
......@@ -693,7 +693,84 @@ height: 100%;
width: 400px;
margin-top: 5%;
}
}
#exampleModal{
min-height: 400px !important;
font-size: 18px !important;
line-height: 21px !important;
.req{
position: absolute;
right: 0px;
float: right;
}
.close {
top: 15px !important;
}
h5{
font-family: "Calibri-bold";
margin-bottom: 15px !important;
}
.wpcf7{
max-width: unset !important;
}
label{
font-size: 18px !important;
line-height: 21px !important;
}
.wpcf7-list-item-label{
font-family: "Calibri-bold";
font-size: 18px !important;
line-height: 21px !important;
}
label.your-name{
width: 49%!important;
margin-right: 15px;
font-size: 18px !important;
line-height: 21px !important;
input{
height: 30px;
}
}
label.your-email{
width: 49%!important;
margin-right: 0px;
font-size: 18px !important;
line-height: 21px !important;
input{
height: 30px;
}
}
.contact-2022-index{
margin-bottom: 10px;
}
.wp-block-button{
width: 100%;
margin-top: -40px;
display: block;
.wp-block-button__link{
width: 100%;
background-color: #BBBCBC!important;
color:#5B6770 !important;
text-transform: uppercase!important;
font-family: Calibri-bold!important;
font-size: 1.25rem!important;
padding: 10px 70px!important;
border-radius: 0!important;
color: #fff!important;
border-width: 0!important;
}
.wp-block-button__link:hover{
background-color: #DDDDDD !important;
}
}
.modal-content{
min-height: 400px !important;
}
}
.label-search-input{
color: #5B6770;
}
......@@ -825,4 +902,48 @@ span.wpcf7-list-item {
.wpcf7-form-control-wrap.topics {
padding-top: 10px;
display: block;
}
\ No newline at end of file
}
.download-copy{
line-height: 44px;
font-style: 40px;
}
.download-button .wp-block-button__link{
width: 365px;
height: 56px;
vertical-align: middle;
padding-top: 15px !important;
}
.download-cont{
background-color: #FFB81C;
margin-top: -30px;
padding-top: 10px;
padding-bottom: 40px;
padding-left: 49px;
padding-right: 40px;
h2{
margin-bottom: 10px;
}
p{
color: #333F48;
font-size: 20px;
line-height: 21px;
}
}
.download-button .wp-block-button__link::before {
content: "";
width: 22px;
height: 22px;
margin-top: -8px;
display: inline-block;
position: relative;
margin-right: 10px;
background-repeat: no-repeat;
vertical-align: middle;
background-position: center;
background-image: url("/wp-content/themes/understrap-child/src/images/download.svg");
}
......