FMD Financial
FMD is a team of professional financial advisers who are helping time-poor executives, business owners and successful families achieve their goals and live their best life with the benefit of affordable, professional financial advice.
Apart from providing valuable information about the company, the main focus of FMD's website is to help potential clients find a matching adviser through an interactive form accessible on all pages.
This design being provided by the client, my task was to build out the interactive and responsive front-end, and also help with the Processwire back-end, which is always a great pleasure to do.
Design outline
HTML Code
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<!-- ============== Basic Page Needs ============== -->
<meta charset="utf-8"/>
<title>FMD Financial. Get the advice you need to live the life you want.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- ================= Stylesheets ================ -->
<link rel="stylesheet" href="css/framework.css"/>
<link rel="stylesheet" href="css/plugins.css"/>
<link rel="stylesheet" href="css/theme.css"/>
</head>
<body class="home">
<!-- ======== Page Header ======== -->
<div class="page-top invert">
<div class="page-contact hide-for-large">
<a href="#" class="phone">1300 134 187</a>
<a href="#page-section-bookmeeting" class="button small cta-button hide-for-medium">Talk to an adviser</a>
</div>
<header id="page-header" class="page-header">
<div class="mobile-nav">
<a id="menu-trigger" class="menu-trigger" data-toggle="collapse" data-target="#nav-primary">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="row">
<div class="columns small-12 medium-3">
<h1 class="logo">
<a href="#"><img src="images/logo-dark.svg" alt="FMD Financial"/></a></h1>
</div>
<div class="columns small-12 medium-9">
<div class="page-navigation">
<div class="row is-collapse-child">
<div class="small-12 columns">
<nav id="main-nav" class="nav-primary">
<ul id="nav-primary" class="sm sm-clean closed horizontal">
<li><a href="#">Advice</a></li>
<li><a href="#">You</a></li>
<li><a href="#">Us</a></li>
<li><a href="#">Insight</a></li>
<li><a href="#">My Investments</a></li>
</ul>
<a href="#" class="phone show-for-large">
1300 134 187
</a>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns" style="position: relative;">
<a href="#page-section-bookmeeting" class="button small cta-button show-for-medium" data-scroll-to="#page-section-bookmeeting">
Talk to an adviser
</a>
</div>
</div>
</header>
</div>
<!-- END Page Header -->
<!-- ======== Page Body ======== -->
<div class="page-body">
<section id='home-banner' class='page-banner'>
<div class='page-banner-inner'>
<div class='banner-overlay'></div>
<video loop data-object-fit='cover' data-object-position='center 15%' preload='none' class='fmd-video' id='fmd-video' autoplay>
<source src='videos/fmd-video-home.mp4' type='video/mp4'>
<source src='videos/fmd-video-home.webm' type='video/webm'>
</video>
<div class='row align-middle'>
<div class='small-12 columns'>
<div class='column-inner'>
<h2>
Get the financial advice<br/> you need to live the life you want.
</h2>
<a href='#page-section-bookmeeting' data-action='scroll' class='button-gradient-hollow light live'>Talk to an adviser</a>
</div>
</div>
</div>
</div>
</section>
<section id='page-section-testimonials' class='page-section'>
<div class='row'>
<div class='small-12 columns'>
<h2>You've enjoyed success, but it's what you do next that matters.</h2>
<p>Financial freedom is in reach if you start planning now, but that can be tough when you're busy with work and life.
You may not know where to find a good adviser, what to expect from the process, or how to get started. You're not
alone, so we're pleased you found us.</p>
<p>For 15 years we've helped time-poor executives, business owners and successful families achieve their goals and
live their best life with the benefit of affordable, professional financial advice. But don't take our word for
it, see what our clients say.</p>
<div class='featured-quotes'>
<div id='testimonial-slider' class='auto-slider flexslider'>
<ul class='slides'>
<li>
<div class='featured-quote'>
<div class='row'>
<div class='small-12 medium-8 columns'>
<div class='quote-content mb-10'>
<div class='quote-content-image'>
<img src='images/assets/jennylee.jpg' alt='Jenny Lee'/>
</div>
<div class='quote-content-top'>
<h5>Jenny Lee</h5>
<div class='rating'>
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>
<div class='quote-content-text'>
<p>My introduction to FMD 10 years ago facilitated an unexpected life change - to my
delight, retirement was a possibility far earlier than expected. The strong relationship
built to support my wealth management has given me peace of mind, removed work stress
from the equation and contributed greatly to my happiness. I love my life and truly
enjoy every day - I don't know how I ever had time for work!</p>
<time datetime='2017-07-01'>Jul 2017</time>
</div>
</div>
</div>
<div class='small-12 medium-4 columns'>
<div class='row align-middle'>
<div class='small-6 medium-12 columns'>
<figure class='quote-author-image'>
<img src='images/assets/profile_craig-williams_170.jpg' alt='Craig Williams'/>
</figure>
</div>
<div class='small-6 medium-12 columns'>
<div class='quote-author-text'>
Craig Williams
<i>Director/Adviser</i>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class='featured-quote'>
<div class='row'>
<div class='small-12 medium-8 columns'>
<div class='quote-content mb-10'>
<div class='quote-content-image'>
<img src='images/assets/danielw.jpg' alt='Daniel Witherington'/>
</div>
<div class='quote-content-top'>
<h5>Daniel Witherington</h5>
<div class='rating'>
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>
<div class='quote-content-text'>
<p>I have been working with FMD Financial for the past five years. They are a professional
and knowledgeable and they've helped me make the most of my money. Lauren Abela is my
trusted financial adviser and has been able to help me develop a portfolio of investments
that supports the needs of my growing family and my future wealth.</p>
<time datetime='2017-07-01'>Jul 2017</time>
</div>
</div>
</div>
<div class='small-12 medium-4 columns'>
<div class='row align-middle'>
<div class='small-6 medium-12 columns'>
<figure class='quote-author-image'>
<img src='images/assets/profile_lauren-abela_170.jpg' alt='Lauren Abela'/>
</figure>
</div>
<div class='small-6 medium-12 columns'>
<div class='quote-author-text'>
Lauren Abela
<i>Financial Adviser</i>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class='featured-quote'>
<div class='row'>
<div class='small-12 medium-8 columns'>
<div class='quote-content mb-10'>
<div class='quote-content-image'>
<img src='images/assets/deej.jpg' alt='Dee James'/>
</div>
<div class='quote-content-top'>
<h5>Dee James</h5>
<div class='rating'>
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>
<div class='quote-content-text'>
<p>Jason Calleja was a source of great comfort as he provided us with all the information
we needed to ensure a smooth transition for Dee's mum. He explained the legislation,
prepared financial spreadsheets with projected multi-year income and costs, arranged
tours of aged care facilities; liaised with Centrelink. Jason continues to be responsive
to our ad hoc questions. </p>
<time datetime='2017-11-15'>Nov 2017</time>
</div>
</div>
</div>
<div class='small-12 medium-4 columns'>
<div class='row align-middle'>
<div class='small-6 medium-12 columns'>
<figure class='quote-author-image'>
<img src='images/assets/profile_jason-calleja_170.jpg' alt='Jason Calleja'/>
</figure>
</div>
<div class='small-6 medium-12 columns'>
<div class='quote-author-text'>
Jason Calleja
<i>Financial Adviser</i>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id='page-section-sixpillars' class='page-section bgcolor-lightgrey'>
<div class='row'>
<div class='small-12 columns'>
<h2>Achieve your financial goals faster with expert advice.</h2>
<p>Our clients are hard-working professionals with serious careers, big passions and busy lives. They don't have the
time or interest to watch every market move or keep track of every change in superannuation, tax or investment
legislation. Instead, they trust us to build a sustainable financial plan and grow their wealth as life changes.</p>
<p>Whether you need to plan for retirement, set-up a Self-Managed Super Fund, protect your income, build a
high-performing investment portfolio or manage the impacts of an inheritance, divorce or redundancy; our six
pillars of advice will ensure every base is covered.</p>
<div class='advice-pillars'>
<div class='row small-up-3 large-up-6'>
<div class='columns'>
<div class='advice-pillar wow fadeIn'>
<figure>
<img src='images/icon1.svg' alt='Goal Setting'/>
</figure>
<h6>Goal Setting</h6>
</div>
</div>
<div class='columns'>
<div class='advice-pillar wow fadeIn' data-wow-delay='0.2s'>
<figure>
<img src='images/icon2.svg' alt='Income & Budgeting'/>
</figure>
<h6>Income & Budgeting</h6>
</div>
</div>
<div class='columns'>
<div class='advice-pillar wow fadeIn' data-wow-delay='0.4s'>
<figure>
<img src='images/icon3.svg' alt='Assets & Debt'/>
</figure>
<h6>Assets & Debt</h6>
</div>
</div>
<div class='columns'>
<div class='advice-pillar wow fadeIn' data-wow-delay='0.6s'>
<figure>
<img src='images/icon4.svg' alt='Superannuation'/>
</figure>
<h6>Superannuation</h6>
</div>
</div>
<div class='columns'>
<div class='advice-pillar wow fadeIn' data-wow-delay='0.8s'>
<figure>
<img src='images/icon5.svg' alt='Insurance'/>
</figure>
<h6>Insurance</h6>
</div>
</div>
<div class='columns'>
<div class='advice-pillar wow fadeIn' data-wow-delay='1s'>
<figure>
<img src='images/icon6.svg' alt='Your Financial Legacy'/>
</figure>
<h6>Your Financial Legacy</h6>
</div>
</div>
</div>
</div>
<p><a href='#' class='button-gradient-hollow'>Learn about our six pillars of advice</a></p>
</div>
</div>
</section>
<section id='page-section-clienttrust' class='page-section-spaced page-section-featured' data-image-src='images/page-featured-image-a.jpg' data-parallax='scroll'>
<div class='row'>
<div class='small-12 medium-9 columns'>
<h2>Our clients trust us to get them where they want to go.</h2>
<p>Our advisers are true professionals qualified in financial planning. They're also footy fans, parents, foodies and
explorers. They're serious about your money, but know your life is more important.</p>
<p>Our founding directors mentor the next generation to deliver full and frank, client-centred advice with integrity
and excellence. With an average tenure of 10 years among our team, you'll be choosing an adviser who'll be there
throughout your career and into retirement.</p>
<p class='mt-25'><a href='#' class='button-gradient-hollow light'>Meet an adviser</a></p>
</div>
</div>
</section>
<section data-panel-bookmeeting id='page-section-bookmeeting' class='page-section'>
<div class='row'>
<div class='columns'>
<h2>Take the next step on the road to health, wealth and happiness today.</h2>
<div id='find-an-adviser-form-feedback' class='find-an-adviser-form-feedback'>
<div class='row'>
<div class='small-12 columns'>
<div class='feedback-success callout-box'>
<h5>Congratulations on taking the next step on your financial journey.</h5>
<p>We're looking forward to meeting you and helping you achieve your financial goals.</p>
<p>We'll be in touch to confirm your meeting <strong class='chosen-adviser'>your adviser</strong> soon.</p>
</div>
</div>
</div>
</div>
<p class='form-processor text-center'><i class='fa fa-spinner fa-pulse fa-3x fa-fw mt-50'></i></p>
<form id='find-an-adviser-form' class='find-an-adviser-form' method='post'>
<fieldset class='choose-areas' tabindex='-1'>
<h4 class='fieldset-legend'>1. What would you like to discuss most?</h4>
<div class='fieldset-error-holder'></div>
<div class='row small-up-3 medium-up-3 large-up-4'>
<div class='columns'>
<label class='wow fadeIn' data-wow-delay='0.4s'>
<!-- <input id='faform_retirement' name='faform_retirement' type='checkbox'/> -->
<input id='faform_retirement' name='faform_choose_area' value='retirement' data-label='Retirement Plans' type='radio'/>
<span class='figure'>
<img src='images/icon10.svg' alt='retirement'/>
</span>
<span class='title'>Retirement plans</span>
</label>
</div>
<div class='columns'>
<label class='wow fadeIn' data-wow-delay='0.3s'>
<!-- <input id='faform_investments' name='faform_investments' type='checkbox'/> -->
<input id='faform_investments' name='faform_choose_area' value='investments' data-label='Investments' type='radio'/>
<span class='figure'>
<img src='images/icon9a.svg' alt='Your Investments'/>
</span>
<span class='title'>Investments</span>
</label>
</div>
<div class='columns'>
<label class='wow fadeIn' data-wow-delay='0.4s'>
<!-- <input id='faform_superannuation' name='faform_superannuation' type='checkbox'/> -->
<input id='faform_superannuation' name='faform_choose_area' value='superannuation' data-label='Superannuation' type='radio'/>
<span class='figure'>
<img src='images/icon7.svg' alt='superannuation'/>
</span>
<span class='title'>Superannuation</span>
</label>
</div>
<div class='columns'>
<label class='wow fadeIn' data-wow-delay='0.5s'>
<!-- <input id='faform_self_managed_super' name='faform_self_managed_super' type='checkbox'/> -->
<input id='faform_self_managed_super' name='faform_choose_area' value='self_managed_super' data-label='Self Managed Super' type='radio'/>
<span class='figure'>
<img src='images/icon11.svg' alt='Self-managed Super'/>
</span>
<span class='title'>Self-managed Super</span>
</label>
</div>
<div class='columns'>
<label class='wow fadeIn' data-wow-delay='0.6s'>
<!-- <input id='faform_insurance' name='faform_insurance' type='checkbox'/> -->
<input id='faform_insurance' name='faform_choose_area' value='insurance' data-label='Insurance' type='radio'/>
<span class='figure'>
<img src='images/icon5a.svg' alt='Insurance'/>
</span>
<span class='title'>Insurance</span>
</label>
</div>
<div class='columns'>
<label class='wow fadeIn' data-wow-delay='0.2s'>
<!-- <input id='faform_family_office' name='faform_family_office' type='checkbox'/> -->
<input id='faform_wills' name='faform_choose_area' value='wills' data-label='Wills & Estate Planning' type='radio'/>
<span class='figure'>
<img src='images/icon8.svg' alt='Wills and Estate Planning'/>
</span>
<span class='title'>Wills & Estate planning</span>
</label>
</div>
<div class='columns'>
<label class='wow fadeIn' data-wow-delay='0.7s'>
<!-- <input id='faform_aged_care' name='faform_aged_care' type='checkbox'/> -->
<input id='faform_aged_care' name='faform_choose_area' value='aged_care' data-label='Aged Care' type='radio'/>
<span class='figure'>
<img src='images/icon13.svg' alt='Aged Care'/>
</span>
<span class='title'>Aged Care</span>
</label>
</div>
<div class='columns'>
<label class='wow fadeIn'>
<!-- <input id='faform_financial_planning' name='faform_financial_planning' type='checkbox'/> -->
<input id='faform_financial_planning' name='faform_choose_area' value='financial_planning' data-label='Financial Planning' type='radio'/>
<span class='figure'>
<img src='images/icon18.svg' alt='Financial Planning'/>
</span>
<span class='title'>Financial Planning</span>
</label>
</div>
</div>
</fieldset>
<fieldset class='nearest-office' tabindex='-1'>
<h4 class='fieldset-legend'>2. Choose your nearest FMD office</h4>
<div class='fieldset-error-holder'></div>
<div class='row align-justify'>
<div class='columns small-12 medium-4'>
<label>
<!-- <input id='faform_nearest_office_melbourne' name='faform_nearest_office_melbourne' type='checkbox'/> -->
<input name='faform_nearest_office' value='melbourne' data-label='Melbourne' type='radio'/>
<span class='button-gradient-hollow expanded'>Melbourne</span>
</label>
</div>
<div class='columns small-12 medium-4'>
<label>
<!-- <input id='faform_nearest_office_brisbane' name='faform_nearest_office_brisbane' type='checkbox'/> -->
<input name='faform_nearest_office' value='brisbane' data-label='Brisbane' type='radio'/>
<span class='button-gradient-hollow expanded'>Brisbane</span>
</label>
</div>
<div class='columns small-12 medium-4'>
<label>
<!-- <input id='faform_nearest_office_adelaide' name='faform_nearest_office_adelaide' type='checkbox'/> -->
<input name='faform_nearest_office' value='adelaide' data-label='Adelaide' type='radio'/>
<span class='button-gradient-hollow expanded'>Adelaide</span>
</label>
</div>
</div>
</fieldset>
<fieldset class='choose-adviser' tabindex='-1'>
<h4 class='fieldset-legend'>3. Let's find you the right adviser</h4>
<div class='row align-justify'>
<div class='columns small-12 medium-6 large-5'>
<a data-target='#adviser-list-wrap' class='btn-choose-adviser button-gradient-hollow button-search medium-expanded'>Choose your adviser</a>
</div>
<div class='columns small-12 medium-6 large-5 text-right'>
<a data-target='#adviser-list-wrap' class='btn-recommend-adviser button-gradient-hollow medium-expanded'>Let us recommend an adviser</a>
</div>
</div>
<div id='adviser-list-wrap' class='adviser-list-wrap'>
<div class='adviser-list-nav-outer'>
<ul class='adviser-list-nav location text-uppercase'>
<li><a href='#' data-location='melbourne'>Melbourne</a></li>
<li><a href='#' data-location='brisbane'>Brisbane</a></li>
<li><a href='#' data-location='adelaide'>Adelaide</a></li>
</ul>
</div>
<div id='adviser-list' class='adviser-list'>
</div>
</div>
</fieldset>
<fieldset class='contact-info' tabindex='-1'>
<h4 class='fieldset-legend'>4. Let us know a few more details and we'll be in touch to arrange a meeting soon.</h4>
<div class='row'>
<div class='small-12 large-4 columns'>
<label class='expanded'>
<input id='faform_contact_name' name='faform_contact_name' placeholder='e.g Jodie Smith' class='required' type='text'/>
<span class='text'>What is your name?*</span>
</label>
</div>
<div class='small-12 large-4 columns'>
<label class='expanded'>
<input id='faform_contact_phone' name='faform_contact_phone' class='required' type='text'/>
<span class='text'>What is the best number to reach you?*</span>
</label>
</div>
<div class='small-12 large-4 columns'>
<label class='expanded'>
<input id='faform_contact_email' name='faform_contact_email' class='required email' type='text'/>
<span class='text'>What is your email address?*</span>
</label>
</div>
</div>
</fieldset>
<fieldset id='faform_submit'>
<div class='row'>
<div class='shrink columns'>
<input value='Submit' class='button large mb-10' type='submit'/>
</div>
<div class='small-12 medium-expand columns'>
<p class='mb-5'><a data-open='modal-faq' class='text-underline'>Not ready to meet with an adviser yet?</a></p>
<p class='mb-5'><a data-open='modal-video' class='text-underline'>What to expect from a first appointment.</a></p>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</section>
</div>
<!-- ======== Page Footer ======== -->
<!-- Page Footer -->
<footer class="page-footer">
<div class="row">
<div class="small-12 large-3 columns">
<section class="footer-block">
<figure class="logo"><img src="images/logo-flat.svg" alt="FMD Financial"/></figure>
<p><a href="#" class="button hollow brand1">Contact Us</a></p>
<ul class="social-list invert">
<li><a href='#' class='ac-icon fa fa-facebook' target='_blank'></a></li>
<li><a href='#' class='ac-icon fa fa-twitter' target='_blank'></a></li>
<li><a href='#' class='ac-icon fa fa-linkedin' target='_blank'></a></li>
</ul>
</section>
</div>
<div class="small-12 large-9 columns">
<div class="row">
<div class='small-12 medium-4 columns'>
<section class='footer-block'>
<h6>Melbourne CBD</h6>
<ul class='no-bullet mb-0'>
<li>P <a href='#'>(03) 9620 4633</a></li>
<li>E <a href='#'>melbourne@fmd.com.au</a></li>
<li>A Level 31, 367 Collins St<br/>Melbourne VIC 3000</li>
</ul>
</section>
</div>
<div class='small-12 medium-4 columns'>
<section class='footer-block'>
<h6>Brisbane</h6>
<ul class='no-bullet mb-0'>
<li>P <a href='#'>(07) 3852 1966</a></li>
<li>E <a href='#'>brisbane@fmd.com.au</a></li>
<li>A Suite 11, 39 Jeays Street<br/>Bowen Hills QLD 4006</li>
</ul>
</section>
</div>
<div class='small-12 medium-4 columns'>
<section class='footer-block'>
<h6>Adelaide</h6>
<ul class='no-bullet mb-0'>
<li>P <a href='#'>(08) 8110 4888</a></li>
<li>E <a href='#'>adelaide@fmd.com.au</a></li>
<li>A Level 1, 431-439 King William St<br/>Adelaide SA 5000</li>
</ul>
</section>
</div>
</div>
<nav class="nav-secondary">
<h6 class="show-for-small-only">Useful Links</h6>
<ul>
<li><a href='#'>Privacy Statement</a></li>
<li><a href='#'>Terms and Conditions</a></li>
<li><a href='#'>General Advice Disclaimer</a></li>
</ul>
</nav>
</div>
</div>
</footer>
<!-- END Page Footer -->
<!-- ================= Scripts ================ -->
<script src="js/jquery.js"></script>
<script src="js/plugins.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
Partial SCSS Code
/* Page Modules
======================================================= */
/* ==> Gradient Buttons */
$color-gradient1: $primary-color;
$color-gradient2: #a13f1f;
/* Common Styles */
.button-gradient-hollow,
.button-gradient-hollow-lg,
.button-gradient {
border: none;
border-radius: 3px;
color: $secondary-color;
cursor: pointer;
display: inline-block;
font-family: $font-family-sansserif;
font-size: 14px;
font-weight: 700;
line-height: 22px;
padding: 0.8235em 1.5em;
text-align: center;
text-decoration: none !important;
text-transform: uppercase;
transition: all 250ms ease;
}
/* Hollow Button */
.button-gradient-hollow,
.button-gradient-hollow-lg,
.callout-box {
position: relative;
z-index: 1;
&:before {
border-radius: 3px;
position: absolute;
content: '';
display: block;
left: 0;
top: 0;
height: 100%;
width: 100%;
-webkit-tap-highlight-color: transparent;
transition: background-position 350ms ease-in-out, border-color 350ms ease-in-out, color 350ms ease-in-out;
-moz-transition: background-position 350ms ease-in-out, border-color 350ms ease-in-out, color 350ms ease-in-out;
-ms-transition: background-position 350ms ease-in-out, border-color 350ms ease-in-out, color 350ms ease-in-out;
-o-transition: background-position 350ms ease-in-out, border-color 350ms ease-in-out, color 350ms ease-in-out;
-webkit-transition: background-position 350ms ease-in-out, border-color 350ms ease-in-out, color 350ms ease-in-out;
border-left: 2px solid $color-gradient1;
border-right: 2px solid $color-gradient2;
background-position: 0 100%, 0 0;
background-repeat: no-repeat;
background-size: 200% 2px;
background-image:
linear-gradient(to right, $color-gradient1 0%, $color-gradient2 50%, $color-gradient1 100%),
linear-gradient(to right, $color-gradient1 0%, $color-gradient2 50%, $color-gradient1 100%);
z-index: -1;
}
}
.button-gradient-hollow:hover,
.button-gradient-hollow-lg:hover {
color: #ef6522;
&:before {
background-position: 100% 100%, 100% 0;
border-left-color: $color-gradient2;
border-right-color: $color-gradient1;
}
}
.button-gradient-hollow-lg:before {
background-size: 200% 4px;
border-width: 4px;
}
.button-gradient-hollow.light {
color: #fff;
&:hover {
background: rgba(#fff,0.3);
}
}
.button-gradient-hollow-lg.live:before,
.button-gradient-hollow.live:before {
-webkit-animation: button-gradient-hollow-animation 2s ease infinite;
-moz-animation: button-gradient-hollow-animation 2s ease infinite;
animation: button-gradient-hollow-animation 2s ease infinite;
}
@keyframes button-gradient-hollow-animation {
0% {
background-position: 0 100%, 0 0;
border-left-color: $color-gradient1;
border-right-color: $color-gradient2;
}
50% {
background-position: 100% 100%, 100% 0;
border-left-color: $color-gradient2;
border-right-color: $color-gradient1;
}
100% {
background-position: 0 100%, 0 0;
border-left-color: $color-gradient1;
border-right-color: $color-gradient2;
}
}
/* Classic Button */
.button-gradient {
background: $color-gradient1;
color: #fff!important;
background: $color-gradient1;
background: -moz-linear-gradient(45deg, $color-gradient1 0%, $color-gradient2 44%, $color-gradient2 56%, $color-gradient1 100%);
background: -webkit-linear-gradient(45deg, $color-gradient1 0%, $color-gradient2 44%, $color-gradient2 56%, $color-gradient1 100%);
background: linear-gradient(45deg, $color-gradient1 0%, $color-gradient2 44%, $color-gradient2 56%, $color-gradient1 100%);
background-size: 150% 150%;
}
.button-gradient:hover {
background-position: 100% 50%;
}
.button-gradient.live {
-webkit-animation: button-gradient-animation 3s ease-in-out infinite;
-moz-animation: button-gradient-animation 3s ease-in-out infinite;
animation: button-gradient-animation 3s ease-in-out infinite;
}
@keyframes button-gradient-animation {
0% { background-position: 0 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
@include breakpoint(large) {
.button-gradient-hollow,
.button-gradient-hollow-lg,
.button-gradient {
font-size: 1em;
}
}
/* Callout Box */
.callout-box {
border-radius: 3px;
margin-top: 30px;
margin-bottom: 30px;
padding: 20px;
h3 {
color: $secondary-color;
font: 700 1.0588em/1.2em $font-family-sansserif;
margin-bottom: 1em;
text-transform: uppercase;
}
.list-circle li {
margin: 10px 0;
}
}
@include breakpoint(medium) {
.callout-box {
padding: 30px 75px;
}
}
/* ==> Custom Buttons */
.button.brand1 {
background-color: $color-brand1;
color: #fefefe;
&:hover,
&:focus {
background-color: scale-color($color-brand1, $lightness: -15%);
color: #fefefe;
}
}
.button-search {
position: relative;
padding-right: 70px;
&:after {
background: $primary-color;
background-image: linear-gradient(to right, $color-gradient1 0%, $color-gradient2 100%);
border-radius: 0 3px 3px 0;
color: #fff;
font-family: 'FontAwesome';
font-size: 1em;
font-weight: normal;
content: '\f002';
display: block;
position: absolute;
text-align: center;
right: 0;
top: 0;
padding: 0.8235294117647059em 0;
height: 100%;
width: 50px;
z-index: -2;
}
}
.button.hollow.brand1,
.button.hollow.brand1:hover,
.button.hollow.brand1:focus {
background-color: transparent;
}
.button.hollow.brand1 {
border: 2px solid $color-brand1;
color: $color-brand1;
&:hover,
&:focus {
border-color: scale-color($color-brand1, $lightness: -15%);
color: scale-color($color-brand1, $lightness: -15%);
}
}
.button.hollow.white {
border: 2px solid #fff;
color: #fff;
&:hover,
&:focus {
background: #fff;
color: $secondary-color;
}
}
.button-gradient-hollow.expanded,
.button-gradient-hollow-lg.expanded,
.button-gradient.expanded {
width: 100%;
}
.button-gradient-hollow.medium-expanded,
.button-gradient-hollow-lg.medium-expanded,
.button-gradient.medium-expanded {
width: 100%;
}
@include breakpoint(large) {
.button-gradient-hollow.medium-expanded,
.button-gradient-hollow-lg.medium-expanded,
.button-gradient.medium-expanded {
width: auto;
}
}
/* ==> Service List */
.service-list-item {
display: table;
line-height: 1.2em;
margin: 15px 0;
overflow: hidden;
div {
display: table-cell;
vertical-align: top;
}
h4 {
color: $secondary-color;
font: 700 0.8235em/1.2em $font-family-sansserif;
margin-bottom: 0.2em;
text-transform: uppercase;
}
figure {
background: #fff;
border-radius: 50%;
margin: 5px 15px 10px;
padding: 10px;
width: 90px;
}
}
.service-list-items-alt1 .service-list-item {
div {
vertical-align: middle;
}
h4 {
font-size: 1.0588em;
}
figure {
background-color: #f3f3f3;
}
}
/* ==> Feature List */
.feature-list-item {
font-style: italic;
line-height: 1.3em;
margin: 30px 0;
overflow: hidden;
figure {
float: left;
margin-right: 15px;
width: 70px;
}
div {
padding-left: 85px;
}
h4 {
color: $secondary-color;
font: 700 0.8235em/1.2em $font-family-sansserif;
margin-bottom: 0.2em;
text-transform: uppercase;
}
p {
margin-bottom: 0.2em;
}
strong {
font-style: normal;
}
}
/* ==> Step List */
.step-list-item {
position: relative;
margin-bottom: 30px;
>div {
border: 2px solid #fff;
border-radius: 3px;
padding: 30px 20px;
position: relative;
&:after {
background: #fff;
content: '';
display: block;
position: absolute;
left: 50%;
margin-left: -1px;
bottom: -32px;
height: 32px;
width: 2px;
}
}
h4 {
color: inherit;
font: 700 1.0588em/1.2em $font-family-sansserif;
text-transform: uppercase;
margin-bottom: 0.2em;
}
p {
line-height: 1.3em;
margin-bottom: 0.5em;
&:last-child {
margin-bottom: 0;
}
}
i {
color: #e0dddc;
}
}
.step-list-vertical {
margin-bottom: 60px;
li:last-child:before {
border: 2px solid #fff;
border-radius: 50%;
content: '';
display: block;
position: absolute;
left: 50%;
margin-left: -9px;
bottom: -48px;
height: 18px;
width: 18px;
}
}
.step-list-horizontal .step-list-item:last-child >div:after {
display: none;
}
@include breakpoint(medium) {
.step-list-vertical .step-list-item >div {
padding-left: 75px;
padding-right: 75px;
}
.step-list-horizontal .step-list-item >div:after {
position: absolute;
left: 100%;
top: 50%;
height: 2px;
width: 32px;
margin-left: 2px;
}
}
/* ==> Adviser Profile List */
.adviser-profile-list-item {
width: 100%;
.inner {
background: #fff;
line-height: 1.1765em;
margin: 10px;
min-height: 290px;
padding: 20px;
}
.adviser-profile-img {
margin-bottom: 10px;
position: relative;
.front {
background-repeat: no-repeat;
background-position: center top;
background-size: 100% auto;
border-radius: 50%;
transition: all 300ms ease-in-out;
}
img {
border-radius: 50%;
transition: all 200ms ease-in-out;
width: 100%;
}
&.flip:hover {
.front {
transform: rotateY(360deg);
img {
opacity: 0;
}
}
}
}
.adviser-profile-traits {
color: $primary-color;
font-size: 0.7648em;
line-height: 1.2em;
text-align: center;
p {
margin-bottom: 0.3em;
}
}
.adviser-profile-header {
margin-bottom: 10px;
h5 {
line-height: 1.2em;
margin-bottom: 0;
}
p {
margin-bottom: 0;
}
}
.social-list {
margin-bottom: 8px;
}
.job-practice-area {
font-style: italic;
}
.adviser-profile-body {
font-size: 0.9412em;
.read-more {
color: $secondary-color;
display: inline-block;
font-family: $font-family-sansserif;
font-size: 0.875em;
font-weight: 700;
text-transform: uppercase;
border-bottom: 2px solid $success-color;
&:hover {
color: $success-color;
}
}
}
}
@include breakpoint(medium) {
.adviser-profile-list-item {
float: left;
width: 49.9%;
}
}
/* ==> Social List */
.social-list {
display: inline-block;
list-style: none outside none;
margin: 0 -3px;
overflow: hidden;
li {
display: inline-block;
float: left;
margin: 0 3px;
vertical-align: top;
}
.ac-icon {
@include background-cover;
background-size: 80%;
border: 2px solid #f3f2f2;
border-radius: 50%;
color: $secondary-color;
display: block;
font-size: 15px;
line-height: 18px;
padding: 3px;
height: 28px;
width: 28px;
text-align: center;
transition: all 175ms ease-in-out;
&:hover,
&:focus {
border-color: $color-brand1;
text-decoration: none;
}
}
.info { background-image: url('images/icon-info.svg'); }
.phone { background-image: url('images/icon-phone.svg'); }
.mail { background-image: url('images/icon-mail.svg'); }
.linkedin { background-image: url('images/icon-linkedin.svg'); }
.fa-envelope {
font-size: 14px;
}
}
.social-list.invert,
.social-list.light {
.ac-icon {
color: #fff;
&:hover,
&:focus {
background-color: $primary-color;
border-color: $primary-color;
}
}
.info { background-image: url('images/icon-info-white.svg'); }
.phone { background-image: url('images/icon-phone-white.svg'); }
.mail { background-image: url('images/icon-mail-white.svg'); }
.linkedin { background-image: url('images/icon-linkedin-white.svg'); }
}
.social-list.invert {
.ac-icon {
background-color: $color-brand2;
border-color: $color-brand2;
}
}
.social-list.light {
.ac-icon {
background-color: #d6d1d0;
border-color: #d6d1d0;
}
}
/* ==> Link List */
.link-list {
font: 700 0.8235em/1.2em $font-family-sansserif;
text-transform: uppercase;
li {
margin: 1em 0;
}
}
@include breakpoint(medium) {
.link-list {
padding-left: 77px;
padding-right: 77px;
}
}
/* ==> Check List */
.check-list,
.check-list-double {
font-weight: 700;
list-style: none outside none;
margin-left: 0;
li {
display: block;
position: relative;
padding: 13px 0 13px 40px;
&:before {
border: 2px solid $primary-color;
border-radius: 50%;
content: '\f00c';
color: $primary-color;
display: block;
font-family: 'FontAwesome';
font-weight: normal;
position: absolute;
left: 0;
top: 10px;
height: 30px;
width: 30px;
line-height: 26px;
text-align: center;
}
}
}
.bgcolor-brand1 .check-list,
.bgcolor-brand1 .check-list-double {
li:before {
color: inherit;
border-color: inherit;
}
}
@include breakpoint(medium) {
.check-list-double {
li {
float: left;
width: 50%;
}
}
}
/* ==> FAQ List */
.faq-list {
list-style: none outside none;
margin-left: 0;
h4 {
font-family: $body-font-family;
font-weight: 700;
font-size: 20px;
color: $secondary-color;
margin-bottom: 0;
}
}
/* ==> Tag List */
.tag-list ul {
list-style: none outside none;
margin: 0 -6px 20px;
overflow: hidden;
li {
float: left;
span,
a {
background: $color-brand3;
border-radius: 2px;
color: $color-brand1;
display: inline-block;
font-style: italic;
font-weight: 300;
line-height: 1em;
margin: 3px 6px;
padding: 5px 50px 7px 10px;
position: relative;
}
span {
a {
position: absolute;
top: 0;
right: 0;
font-style: normal;
display: inline-block;
line-height: 0.9em;
font-size: 1em;
padding: 2px 5px 2px 7px;
&:hover {
color: $primary-color;
}
}
}
}
}
/* ==> QA List */
.qa-list,
.qa-item {
ul {
list-style: none outside none;
margin-left: 0;
li {
margin: 30px 0;
}
}
h4,
.qa-item-title {
font-family: $font-family-sansserif;
font-size: 1em;
font-weight: 700;
line-height: 1.55em;
margin-bottom: 0.3em;
a {
color: $secondary-color;
display: block;
position: relative;
padding-top: 0.2em;
@include global-transition;
&:before {
border: 3px solid $secondary-color;
border-radius: 50%;
box-sizing: content-box;
content: '\f067';
display: block;
font-family: FontAwesome;
font-weight: normal;
line-height: 1.7333em;
text-align: center;
position: absolute;
left: 0;
top: 0;
width: 1.7333em;
height: 1.7333em;
@include global-transition;
}
&:hover {
color: $primary-color;
&:before {
border-color: $primary-color;
transform: rotate(180deg);
}
}
&.active {
&:before {
border-color: $primary-color;
content: '\f068';
color: $primary-color;
}
}
}
}
.answer {
display: none;
p:last-child {
margin-bottom: 0;
}
}
h4 a,
.qa-item-title a,
.answer {
padding-left: 47px;
}
}
/* ==> Adviser Modal */
.adviser-modal {
overflow: hidden;
padding: 10px 0;
.adviser-modal-img {
margin-bottom: 15px;
position: relative;
width: 80px;
.front {
background-repeat: no-repeat;
background-position: center top;
background-size: 100% auto;
border-radius: 50%;
width: 100%;
transition: all 300ms ease-in;
}
img {
border-radius: 50%;
transition: all 300ms ease-in;
width: 100%;
}
&.flip:hover {
.front {
transform: rotateY(360deg);
img {
opacity: 0;
}
}
}
}
.adviser-modal-header {
margin-bottom: 10px;
p {
margin-bottom: 0;
}
}
.job-title {
font-weight: 600px;
}
.office-location {
font-weight: 700;
}
h5 {
margin-bottom: 0;
line-height: 1.2em;
}
.adviser-modal-meta {
font-style: italic;
line-height: 1.4em;
margin-bottom: 10px;
p {
margin-bottom: 0;
}
}
.adviser-modal-body {
line-height: 1.2em;
margin-bottom: 15px;
}
.button-gradient-hollow {
font-size: 15px;
}
.or {
display: block;
font-weight: 700;
padding: 10px 0;
text-align: center;
text-transform: uppercase;
}
}
@include breakpoint(medium) {
.adviser-modal {
.adviser-modal-img {
width: 100%;
}
.adviser-modal-header {
margin-bottom: 30px;
}
}
}
/* ==> Video Modal */
.reveal {
video {
display: block;
width: 100%;
}
}
/* ==> FAQ Items */
.search-icon {
display: block;
cursor: pointer;
svg {
fill: $color-brand1;
width: 25px;
@include global-transition;
}
&:hover {
svg {
fill: $primary-color;
}
}
}
label.search-icon {
cursor: default;
&:hover svg {
fill: $color-brand1;
}
}
@include breakpoint(medium) {
.search-icon {
svg {
width: 40px;
}
}
}
.modal-search {
padding: 50px 30px;
input[type='text'] {
border: 0;
border-bottom: 1px solid $color-brand1;
box-shadow: none;
font-size: 1.2em;
padding: 0.27059em 0.47059rem;
}
}
/* ==> Page section: Block Tabs */
.block-tabs {
.block-tabs-nav {
list-style: none outside none;
margin-left: 0;
text-align: justify;
&:after {
content: '';
display: inline-block;
width: 100%;
}
li {
display: inline-block;
}
a {
color: $secondary-color;
font-family: $font-family-sansserif;
text-transform: uppercase;
@include global-transition;
}
.flex-active a {
color: $primary-color;
font-weight: 700;
}
}
.tab-content {
background: #fff;
border-radius: 10px;
overflow: hidden;
line-height: 1.3em;
figure {
height: 100%;
}
}
.tab-copy {
padding: 30px 25px 30px;
h4 {
color: $secondary-color;
font-family: $font-family-sansserif;
font-weight: 700;
text-transform: uppercase;
}
}
.flex-active a {
cursor: default;
}
}
@include breakpoint(medium) {
.block-tabs {
.block-tabs-nav {
a {
font-size: 1.2941em;
}
}
}
.tab-content {
font-size: 1.2em;
}
}
/* ==> Page section: Video Slides */
.video-slides {
.video-slide-thumbnail {
border-radius: 5px;
margin: 0 auto 10px;
overflow: hidden;
position: relative;
a {
&:after {
background: url('images/icon-arrow-round-right.png') no-repeat center center;
border-radius: 50%;
border: 1px solid #fff;
content: '';
cursor: pointer;
display: block;
position: absolute;
left: 50%;
top: 50%;
height: 37px;
width: 37px;
margin-left: -18px;
margin-top: -18px;
@include global-transition;
}
&:hover:after {
transform: scale(1.3);
background-color: $primary-color;
box-shadow: 0 0 0 1px #fff;
}
}
img {
width: 100%;
}
}
.flex-control-paging li a {
background: transparent;
border: 1px solid #fff;
@include global-transition;
&.flex-active {
background: #fff;
}
}
}