Created
April 14, 2013 23:40
-
-
Save Shavindra/5384723 to your computer and use it in GitHub Desktop.
A CodePen by Shavin Fonseka. SASS + Compass test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> | |
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> | |
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> | |
<!--[if gt IE 8]><!--> | |
<html class="no-js" lang="en"> | |
<!--<![endif]--> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>VSAM - Vega Swiss Asset Management </title> | |
<link rel="shortcut icon" href="/wp-content/themes/vsam/assets/img/favicon.ico" /> | |
<meta name="description" content=""> | |
<meta name="author" content=""> | |
<meta name='robots' content='noindex,nofollow' /> | |
<link rel='stylesheet' id='contact-form-7-css' href='http://dev.vsam.co.uk/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.3.2' type='text/css' media='all' /> | |
<script type='text/javascript' src='http://dev.vsam.co.uk/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script> | |
<link rel='next' title='Team' href='http://dev.vsam.co.uk/team' /> | |
<link rel='canonical' href='http://dev.vsam.co.uk/' /> | |
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style> | |
<script src="/wp-content/themes/vsam/assets/js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script> | |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |
<link rel="stylesheet" href="/vsam/assets/css/grid.css"> | |
<link rel="stylesheet" href="/vsam/style.css"> | |
<link rel="stylesheet" type="text/css" media="all" href="http://dev.vsam.co.uk/wp-content/themes/vsam/css/style.css" /> | |
<script src="/wp-content/themes/vsam/assets/js/libs/jquery.tools.min.js"></script> | |
<script src="/wp-content/themes/vsam/assets/js/libs/waypoints.js"></script> | |
<script src="/wp-content/themes/vsam/assets/js/libs/clock.js"></script> | |
</head> | |
<body class="home page page-id-6 page-template page-template-page-templateshome-php"> | |
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]--> | |
<div id="wrapper" class="home-page"> | |
<div class="header-container"> | |
<header class=""> | |
<div class="branding grid-1"> | |
<div id="text-2" class="header-widget col4 widget_text"> <div class="textwidget">– | |
<br> | |
<h1> | |
<object id="object" width="263" height="72" data="/wp-content/themes/vsam/assets/img/vsam_logo.svg" type="image/svg+xml"> VSAM</object></h1> | |
– | |
<span>Vega <br>Swiss <br>Asset <br>Management</span> | |
–</div> | |
</div> | |
<div class="clocks"> | |
<!-- <div class="abu_dhabi"> | |
– | |
<canvas class="CoolClock:classic:22:noSeconds:4 leftRightPad" id="abu_dhabi"></canvas> | |
<span>Abu Dhabi</span> | |
– | |
<br> | |
<br> | |
<br> | |
<br> | |
– | |
</div> | |
<div class="nyc"> | |
– | |
<canvas class="CoolClock:classic:22:noSeconds:-4 leftRightPad" id="nyc"></canvas> <span>New York</span> | |
– | |
<!-- <br> | |
<br> | |
<br> | |
<br> | |
– | |
</div> | |
<div class="londn"> | |
– | |
<canvas class="CoolClock:classic:22:noSeconds:1 leftRightPad" id="london"></canvas> <span>London</span> | |
– | |
<!-- <br> | |
<br> | |
<br> | |
<br> | |
– | |
</div> | |
<div class="geneva"> | |
– | |
<canvas class="CoolClock:classic:22:noSeconds:2 leftRightPad" id="geneva"></canvas> | |
<span>Zurich</span> | |
– | |
<!-- <br> | |
<br> | |
<br> | |
<br> | |
– | |
</div>--> | |
</div> | |
</div> | |
<!-- Start home Sections --> | |
<div id="head-scroller" class="scroller"> | |
<div class="home-slides scrollitem"> | |
<!-- Start Section --> | |
<section style="background:url('http://dev.vsam.co.uk/media/2012/12/vsam.jpg') no-repeat center bottom; background-repeat:no-repeat; background-size:cover; " class="scrollitem"> | |
<div class="scroll-content"> </div> | |
</section> | |
</div> | |
</div> | |
<div id="main-nav-holder"> | |
<nav id="main-nav" class="main-nav"> | |
<ul id="menu-primary" class="menu"><li id="company-link" class="company col1 menu-item-company col1" data-link-id="company"><a title="Company" href="/#company">Company</a></li> | |
<li id="team-link" class="team col1 menu-item-team col1" data-link-id="team"><a title="Team" href="/#team">Team</a></li> | |
<li id="services-link" class="services col1 menu-item-services col1" data-link-id="services"><a title="Services" href="/#services">Services</a></li> | |
<li id="contact-link" class="contact col1 menu-item-contact col1" data-link-id="contact"><a title="Contact" href="/#contact">Contact</a></li> | |
<li id="news-link" class="news col1 menu-item-news col1" data-link-id="news"><a href="/news">News</a></li> | |
<li id="media-centre-link" class="media-centre col1 menu-item-media-centre col1" data-link-id="media-centre"><a title="Media Centre" href="/media-centre">Media Centre</a></li> | |
<li id="logo" class="col3 logo inc"><a href="/"><span></span><object width="66.5" height="18" id="object" type="image/svg+xml" data="/wp-content/themes/vsam/assets/img/vsam_logo.svg"> | |
Please use a modern browser! | |
</object></a></li></ul> | |
</nav> | |
</div> | |
</header> | |
</div> | |
<div class="main-container content-home"> | |
<div id="main" class="content"> | |
<!-- Start Section: --> | |
<section class="full company company-section" id="company"> | |
<div class="section-wrapper"> | |
<h2>Company | |
</h2> | |
<div class="content-wrapper"> | |
<div class="section-content"> | |
<blockquote><p>Innovative Investment Solutions and Wealth Management for High Net Worth Clients and Companies.</p> | |
</blockquote> | |
</div> | |
<div class="section-slide sub-content"> | |
<div class="items"> | |
<!-- 1-4 --> | |
<div class="grid-1 panel-list"> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p> We are completely independent.<br><br> | |
We are flexible and efficient, having a highly motivated and focused team with a long track record in the industry.</p></div> | |
</div> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p> We believe that prudent investment decisions require a great deal of time, experience and expertise. Therefore, at VSAM we focus exclusively on Asset Management and Corporate Finance, allowing us to achieve a high degree of specialization and provide our clients with the most accurate and up-to-date market information available.</p></div> | |
</div> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p> In essence, we have the positive attributes typical of a multi-family office, uniquely enhanced by a skill-set that canvasses various niche specializations across a number of markets.</p></div> | |
</div> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p> We strive to build a sustainable business as a distinctive specialist investment group, driven by commitment to our core philosophies and values.</p></div> | |
</div> | |
</div> | |
<!-- 5-8 --> | |
<div class="grid-1 panel-list"> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p> We are not all things to all people; and we never strive to be. We compete in our niche areas of specialization where we can truly add value.</p></div> | |
</div> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p> We are active managers of each Client’s bespoke portfolio, using a 100% open and transparent architecture platform.</p></div> | |
</div> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p> Our innovative, tailor-made financing and investment solutions are based on sophisticated financial engineering and private placement investments, which allow us to achieve considerable yield enhancement on clients’ funds while keeping the principal secure.</p></div> | |
</div> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p> Authorized and regulated by the Financial Services Authority</p></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- <nav class="sect-nav"> --> | |
<a class="prev browse left "><span ></span><object width="13" height="15" id="object" type="image/svg+xml" data="/wp-content/themes/vsam/assets/img/arw.svg" ></object></a> | |
<a class="next browse right "><span></span><object width="13" height="15" id="object" type="image/svg+xml" data="/wp-content/themes/vsam/assets/img/arw.svg"></object></a> | |
<!-- </nav> --> | |
</div> | |
</div> | |
</section> | |
<!-- End Section --> | |
<!-- Start Section: --> | |
<section class="full team team-section" id="team"> | |
<div class="section-wrapper"> | |
<div class="featured-img"> | |
<a href="http://dev.vsam.co.uk/team" title="Team"><img width="1030" height="645" src="http://dev.vsam.co.uk/media/2013/01/LANDING-PAGE_V5_14.jpg" class="attachment-full wp-post-image" alt="LANDING-PAGE_V5_14" /></a> <!-- <span id="team" data-content-pos="start"></span> --> | |
</div> | |
<h2>Team | |
</h2> | |
<div class="content-wrapper"> | |
<div class="page-slider"> | |
<div class="items"> | |
<section class="page-slide col8"> | |
<div class="section-content"> | |
<p><span class="col col4">Ramon Vega<br /> | |
<span class="title">MANAGING PARTNER / FOUNDER </span></span></p> | |
<aside class="right"><img class="wp-image-149 alignright col2" alt="Ramon-Vega" src="http://dev.vsam.co.uk/media/2013/03/Ramon-Vega.jpg" width="168" height="168" /></aside> | |
</div> | |
<div class="sub-content"> | |
<div class="items"> | |
<!-- 1-4 --> | |
<div class="grid-1 panel-list"> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p> Swiss citizen of Spanish origin. In 2008, he founded Vega Swiss Asset Management UK LLP. In 2002, he was a founding member of Duet Asset Management, a London-based hedge fund, which currently manages $2.5bn.</p></div> | |
</div> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p> Ramon left Duet in 2008. Ramon is also the chairman and owner of Matterhorn Capital in Switzerland, a real estate company focusing on boutique hotels around Europe. </p></div> | |
</div> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p> He was a professional football player for Switzerland, Tottenham Hotspur and Celtic Glasgow.</p></div> | |
</div> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p> Ramon holds a business degree with a specialization in Banking, Finance and Corporate Finance from the Zurich Business School.</p></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<section class="page-slide col8"> | |
<div class="section-content"> | |
<p><span class="col col4">Stuart Cheek<br /> | |
<span class="title">Head of Investor Relations</span></span></p> | |
<aside class="right"><a href="http://dev.vsam.co.uk/media/2013/01/Stuart_Cheeky_thumb.jpg"><img class="size-full wp-image-438 alignright" alt="Stuart_Cheeky_thumb" src="http://dev.vsam.co.uk/media/2013/01/Stuart_Cheeky_thumb.jpg" width="233" height="233" /></a></aside> | |
</div> | |
<div class="sub-content"> | |
<div class="items"> | |
<!-- 1-4 --> | |
<div class="grid-1 panel-list"> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p> Stuart has over 30 years experience in the City, beginning his career on the floor of The London Stock Exchange and then the London International Financial Futures Exchange.</p></div> | |
</div> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p> From there be became one of the original UK partners at Cantor Fitzgerald before moving into Investment Banking.</p></div> | |
</div> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p> Stuart spent over 13 years at UBS and Santander as Managing Director and Head of UK Institutional Sales where he was responsible for overseeing and integrating sales and relationship management across various asset classes.</p></div> | |
</div> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p> In 2010, he joined Vega Swiss Asset Management where his role principally involves introducing new customers, especially leveraging off his extensive institutional client base, and managing those and existing relationships.</p></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
</div> | |
</div> | |
<a class="prev browse left"><span ></span><object width="13" height="15" id="object" type="image/svg+xml" data="/wp-content/themes/vsam/assets/img/arw.svg" ></object></a> | |
<a class="next browse right"><span></span><object width="13" height="15" id="object" type="image/svg+xml" data="/wp-content/themes/vsam/assets/img/arw.svg"></object></a> | |
</div> | |
</div> | |
</section> | |
<!-- End Section --> | |
<!-- Start Section: --> | |
<section class="full services services-section" id="services"> | |
<div class="section-wrapper"> | |
<div class="featured-img"> | |
<a href="http://dev.vsam.co.uk/services" title="Services"><img width="1030" height="645" src="http://dev.vsam.co.uk/media/2013/01/LANDING-PAGE_V5_07.jpg" class="attachment-full wp-post-image" alt="LANDING-PAGE_V5_07" /></a> <!-- <span id="services" data-content-pos="start"></span> --> | |
</div> | |
<h2>Services | |
</h2> | |
<div class="content-wrapper"> | |
<div class="section-content"> | |
<blockquote><p>We do not offer generic one-size-fits-all solutions; we understand that each individual has their own distinct temperament with specific goals, which may themselves change over time. We offer the following services:</p></blockquote> | |
</div> | |
<div class="section-tab sub-content"> | |
<div class="items"> | |
<!-- Tab layout --> | |
<nav role="menu"> | |
<ul> | |
<li class="item col2 col current" role="menuitem"> | |
<span data-icon="sq"></span> | |
<h3>Discretionary Management</h3> | |
</li> | |
<li class="item col2 col " role="menuitem"> | |
<span data-icon="sq"></span> | |
<h3>Capital Protected Management</h3> | |
</li> | |
<li class="item col2 col " role="menuitem"> | |
<span data-icon="sq"></span> | |
<h3>Corporate Finance</h3> | |
</li> | |
</ul> | |
</nav> | |
<div class="tab-content"> | |
<div class="content-entry"><p> We engage in active daily trading. We trade only the most liquid instruments ensuring easy access into and exit from trades to capture fast market moves. We mostly carry short-term positions to ensure we are not caught in rapid adverse market moves. VSAM is unique in offering total transparency - our investors see every trade we have executed for their account. Employing some of the best traders in the industry, we deliver superior returns, targeting 1-2% per month net to investors, with the target often exceeded. </p></div> | |
<div class="content-entry"><p> For investors who prefer a more conservative, risk-averse approach, we have developed a range of alternatives designed to weather a market downturn. (1) Structured products conservatively tilted through a low volatility, higher yielding investment. (2) Principal protected structured deposit with the capital protected by an instrument issued by a top-rated provider coupled with partial complementary allocation to an actively managed sub-portfolio ensuring enhanced return on capital.</p></div> | |
<div class="content-entry"><p> We arrange financing for companies using different types of collateral acting as an exclusive advisor to one of the biggest investment funds in the world. We assist companies in securing lending facilities. We advise on capital investment decisions and help to structure corporate bonds.</p></div> | |
</div> | |
</div> | |
</div> | |
<!-- <nav class="sect-nav"> --> | |
<a class="prev browse left backward"><span ></span><object width="13" height="15" id="object" type="image/svg+xml" data="/wp-content/themes/vsam/assets/img/arw.svg" ></object></a> | |
<a class="next browse right forward"><span></span><object width="13" height="15" id="object" type="image/svg+xml" data="/wp-content/themes/vsam/assets/img/arw.svg"></object></a> | |
<!-- </nav> --> | |
</div> | |
</div> | |
</section> | |
<!-- End Section --> | |
<!-- Start Section: --> | |
<section class="full contact contact-section" id="contact"> | |
<div class="section-wrapper"> | |
<div class="featured-img"> | |
<a href="http://dev.vsam.co.uk/contact" title="Contact"><img width="1031" height="646" src="http://dev.vsam.co.uk/media/2013/01/Contact_image.jpg" class="attachment-full wp-post-image" alt="Contact_image" /></a> <!-- <span id="contact" data-content-pos="start"></span> --> | |
</div> | |
<h2>Contact | |
</h2> | |
<div class="content-wrapper"> | |
<div class="section-content"> | |
<blockquote><p>VEGA SWISS ASSET<br /> | |
MANAGMENT UK LLP</p></blockquote> | |
</div> | |
<div class="sub-content"> | |
<div class="items"> | |
<!-- 1-4 --> | |
<div class="grid-1 panel-list"> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p>80 Park Lane<br> | |
Mayfair<br> | |
London, W1K 7TR | |
United Kingdom</p></div> | |
</div> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p>Tel: +44 (0) 203 44 028 50<br> | |
Fax: +44 (0) 203 44 027 01<br> | |
Email: info@vsam.co.uk</p></div> | |
</div> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p>We understand that each individual has their own distinct temperament with specific goals, which may themselves change over time. </p></div> | |
</div> | |
<div class="panel item col2 col"> | |
<span data-icon="sq"></span> | |
<div class="content-entry"><p> For personal service and advice please contact us:</p></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="contact-form widget_text"> <div class="textwidget"><div class="wpcf7" id="wpcf7-f182-w1-o1"><form action="/#wpcf7-f182-w1-o1" method="post" class="wpcf7-form"> | |
<div style="display: none;"> | |
<input type="hidden" name="_wpcf7" value="182" /> | |
<input type="hidden" name="_wpcf7_version" value="3.3.2" /> | |
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f182-w1-o1" /> | |
<input type="hidden" name="_wpnonce" value="1d5e31a6cc" /> | |
</div> | |
<div class="col6"> | |
<p> | |
<span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" class="wpcf7-form-control wpcf7-textarea" cols="40" rows="10" placeholder="Type your message here_ "></textarea></span> </p> | |
</div> | |
<div class="col col2"> | |
<p> | |
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" placeholder="Name_ " /></span> </p> | |
<p> | |
<span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40" placeholder="Email_ " /></span> </p> | |
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p> | |
</div> | |
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div></div> | |
</div> </div> | |
</div> | |
</section> | |
<!-- End Section --> | |
</div> | |
</div> <!-- Close main container --> | |
<div class="footer-container"> | |
<nav class="footer-nav"> | |
<ul class="grid-1"> | |
<li class="col col1"><a href="/disclaimer" class="top">Disclaimer</a></li> | |
<li class="col6 description">Vega Swiss Asset Management UK LLP is authorised and regulated by the Financial Services Authority </li> | |
<!--<li class="col1"> | |
<object width="20" height="18" data="/wp-content/themes/vsam/assets/img/fsa.svg" type="image/svg+xml" id="object"> FSA | |
</object> | |
</li>--> | |
</ul> | |
</nav> | |
</div> | |
</div> <!-- END WRAPPER --> | |
<script> //window.jQuery || document.write('<script src="assets/js/libs/jquery-1.7.2.min.js"><\/script>')</script> | |
<script src="/vsam/assets/js/script.js"></script> | |
<script type="text/javascript"> | |
/*$(document).ready(function() { | |
$('.top').addClass('hidden'); | |
$.waypoints.settings.scrollThrottle = 30; | |
$('#wrapper').waypoint(function(event, direction) { | |
$('.top').toggleClass('hidden', direction === "up"); | |
}, { | |
offset: '-100%' | |
}).find('#main-nav-holder').waypoint(function(event, direction) { | |
$(this).parent().toggleClass('sticky', direction === "down"); | |
event.stopPropagation(); | |
}); | |
});*/ | |
</script> | |
<script> | |
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; | |
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; | |
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; | |
s.parentNode.insertBefore(g,s)}(document,'script')); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "compass" | |
/** Theme Name: VSAM | |
* * Theme URI: http://www.jagopartners.com | |
* * Description: VSAM. | |
* * Version: 1.0 | |
* * Date: Dec 2012 | |
* | |
* * Author: Shavin Fonseka / JagoPartners | |
* * Author URI: http://shavindra.wordpress.com/ | |
* * Contact: shvindra2001 [at] yahoo.co.uk | |
* * Twitter: twitter.com/shavindra | |
* * linkedIn: linkd.in/shavin | |
* | |
* * Design Agency: JagoPartners | |
* * Site: jagopartners.com | |
* * Contact: hello@jagopartners.com | |
* | |
* * License: Reproduction or Distribution is prohibited. | |
* * General comments (optional). | |
** | |
/* | |
* ===== Table of Content ====================================== | |
* | |
* 1. Typogrpahy | |
* 2. Content | |
* 4. Forms | |
* 5. Generic | |
* 6. Mobile | |
* 6.1 asdasd | |
* 6.2 | |
/* 1. TYPOGRAPHY | |
* | |
* Embed Ref: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax | |
* | |
* ============================================================== */ | |
@font-face | |
font-family: 'EuclidBPtestFontBold' | |
src: url('assets/fonts/euclid_bptestfont_bold.eot') | |
src: url('assets/fonts/euclid_bptestfont_bold.eot') format("embedded-opentype"), url('assets/fonts/euclid_bptestfont_bold.woff') format("woff"), url('assets/fonts/euclid_bptestfont_bold.ttf') format("truetype"), url('assets/fonts/euclid_bptestfont_bold.svg#EuclidBPtestFontBold') format("svg") | |
@font-face | |
font-family: 'MyFontFamily' | |
src: url('myfont.eot?#iefix') format("embedded-opentype"), url('myfont.woff') format("woff"), url('myfont.ttf') format("truetype"), url('myfont.svg#svgFontName') format("svg") | |
$bodyFonts : Helvetica, Helvetica Neue, Arial, sans-serif | |
$bodyFont-size : 1.3em / 1.4em | |
$primaryColor : #A40234 | |
body | |
font: 62.5% / 100% $bodyFonts | |
.main-nav, .footer-nav | |
font-size: 1.3em | |
p | |
font: $bodyFont-size $bodyFonts | |
color: $primaryColor | |
margin: 0 0 3em 0 | |
.home-page p | |
margin: 0 | |
ul, ol | |
margin: 18px 0 0 36px | |
nav ul | |
margin: 0 | |
#page.content ul, article ul | |
font: $bodyFont-size $bodyFonts | |
color: $primaryColor | |
list-style: disc outside none | |
#page.content ol | |
font: $bodyFont-size $bodyFonts | |
color: $primaryColor | |
list-style: decimal outside none | |
h1, header h2 | |
font: 4.9em / 1em "EuclidBPtestFontBold", Helvetica, Helvetica Neue, Arial, sans-serif | |
line-height: 0.925em | |
color: #FFFFFF | |
max-width: 300px | |
padding: 0 | |
.content h1 | |
max-width: 100% | |
margin: 0 0 18px 0 | |
.home-page h2 | |
border: none | |
h2 | |
font: 1.3em / 1em Helvetica, Helvetica Neue, Arial, sans-serif | |
color: #A40234 | |
padding: 20px 0 | |
border-bottom: 1px solid #A40234 | |
article | |
h1 | |
font: $bodyFont-size $bodyFonts | |
color: $primaryColor | |
padding: 20px 0 | |
border-bottom: 1px solid $primaryColor | |
h2 | |
font-weight: bold | |
border: none | |
&:after | |
content: '\2013' | |
display: block | |
margin: 5px 0 0 0 | |
h3 | |
font: 2.6em / 1.3em Helvetica, Helvetica Neue, Arial, sans-serif | |
color: #a40234 | |
blockquote p, .team .section-content p | |
font: 4.8em / 1.2em "EuclidBPtestFontBold", Helvetica, Helvetica Neue, Arial, sans-serif | |
padding: 30px 0 10px 0 | |
letter-spacing: -0.5px | |
.section-content p .title | |
font-size: 0.68em | |
strong | |
font-weight: bold | |
article a, #page.content a | |
font-weight: bold | |
text-decoration: underline | |
color: #A40234 | |
/* 2. CONTENT | |
* | |
* Embed Ref: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax | |
* | |
* ============================================================== | |
/* ===== General =================================== */ | |
body | |
height: 100% | |
/* ===== Header =================================== */ | |
.header-container | |
bottom: 0 | |
color: #FFF | |
header | |
height: 100% | |
section! | |
h1 a, h2 a, h3 a | |
color: #FFFFFF | |
text-decoration: none | |
/* branding */ | |
.branding | |
z-index: 1 | |
padding: 36px 18px | |
border-top: 18px solid rgba(255, 255, 255, 0.7) | |
overflow: auto | |
font: 1.6em / 1.125em $bodyFonts | |
height: 100% | |
.header-widget | |
h1 | |
line-height: 0.6em | |
padding: 10px 0 8px 0 | |
display: block | |
float: left | |
padding: 0 | |
span | |
padding: 10px 0 8px 0 | |
display: block | |
letter-spacing: 0.5px | |
.clocks | |
float: right | |
float: right | |
text-align: center | |
color: #FFF | |
> div | |
float: right | |
margin: 0 0 0 18px | |
canvas | |
display: block | |
padding: 10px 0 20px 0 | |
span | |
font-size: 0.5em | |
line-height: 1em | |
display: block | |
padding: 0 0 8px 0 | |
letter-spacing: 1px | |
/* Scroller */ | |
.scroller | |
position: absolute | |
top: 0 | |
min-width: 1110px | |
width: 100% | |
z-index: -1 | |
.head-scroller img | |
width: 100% | |
height: auto | |
.scrollitem | |
height: 100% | |
width: 100% | |
.img | |
text-align: center | |
.main-nav | |
.active a, .current-menu-item a | |
text-decoration: underline | |
/* test */ | |
html, body, #wrapper, .header-container, .scroller | |
height: 100% | |
.img | |
img | |
height: 100% | |
max-height: 100% | |
display: block | |
position: absolute | |
height: 100% | |
#main-nav-holder | |
min-width: 1110px | |
width: 100% | |
position: absolute | |
bottom: 0 | |
z-index: 2 | |
.sticky #main-nav-holder | |
position: fixed | |
top: 0 | |
bottom: auto | |
/* ===== Navigation =================================== */ | |
.main-nav, .footer-nav | |
background: #A40234 | |
min-height: 20px | |
width: 100% | |
.main-nav ul, .footer-nav ul | |
padding: 20px | |
min-height: 10px | |
margin: 0 auto | |
width: auto | |
max-width: 990px | |
.main-nav .grid-1, .footer-nav .grid-1 | |
width: 1012px | |
.main-nav li, .footer-nav li | |
float: left | |
display: block | |
text-align: center | |
.main-nav li.col1, .footer-nav li.col1 | |
width: 124px | |
border-left: #FFF solid 1px | |
.main-nav li:nth-last-child(2) | |
border-right: #FFF solid 1px | |
li.logo | |
float: right | |
width: 239px | |
.logo span | |
position: absolute | |
width: 66.5px | |
height: 18px | |
.main-nav | |
#logo a | |
text-align: right | |
padding: 0 | |
a | |
display: block | |
color: #FFF | |
text-decoration: none | |
padding: 5px 0 | |
.description, .footer-nav a | |
display: block | |
color: #FFF | |
text-decoration: none | |
padding: 5px 0 | |
/* ===== Content ================================== */ | |
.home-page #main | |
background: #F4F4F4 | |
border: none | |
#main > section | |
position: relative | |
.header-container:after, .main-container:after, .footer-container:after, .content-wrapper > div:after, .items:after | |
clear: both | |
content: "." | |
display: block | |
font-size: 0 | |
height: 0 | |
visibility: hidden | |
.header-container, .main-container, .footer-container, #main > section, #wrapper, .header-container header | |
min-width: 1110px | |
width: 100% | |
.content-wrapper > div:not(.section-slide).sub-content, .content > section:only-child, .home-page .section-wrapper > h2, .content-wrapper > *, .home-page .section-slide .panel-list, .page-slider .page-slide | |
padding: 20px | |
/* Sections */ | |
.main-container > section | |
min-height: 300px | |
.home-page .content > section:last-of-type | |
padding: 0 | |
.content > | |
section | |
&:only-of-type, &:last-of-type | |
padding: 0 0 80px 0 | |
article:only-of-type | |
padding: 0 0 80px 0 | |
.home-page .section-wrapper | |
min-width: 1030px | |
margin: auto | |
padding: 0 | |
.section-wrapper > * | |
width: auto | |
.home-page .section-wrapper > h2, .content-wrapper > * | |
padding: 20px | |
.home-page .content-wrapper | |
overflow: auto | |
background: #FFF | |
padding: 0 0 80px 0 | |
.section-content | |
overflow: auto | |
.page-slide | |
padding: 20px | |
float: left | |
> * | |
padding: 20px 0 | |
[data-content-pos="start"] | |
height: 56px | |
padding: 38px !important | |
bottom: 0 | |
position: absolute | |
[data-icon="sq"] | |
width: 8px | |
height: 8px | |
background: #A40234 | |
display: block | |
margin-top: -9px | |
position: absolute | |
.content-entry | |
padding: 20px 0 0 0 | |
margin: 0 108px | |
.item .content-entry, .tab-content .content-entry | |
margin: 0 | |
aside | |
float: right | |
width: 234px | |
min-height: 200px | |
img | |
width: 234px | |
height: auto | |
/* 4 Column Sliders | |
.investor | |
background: #A40234 | |
.featured-img, .item | |
position: relative | |
.home-page | |
.item | |
border-top: 2px solid #A40234 | |
.section-slide .panel-list | |
padding: 20px | |
/* Slider */ | |
.page-slide | |
padding: 20px | |
.section-slide | |
/* required settings */ | |
position: relative | |
overflow: hidden | |
min-height: 274px | |
padding: 0 | |
.page-slider | |
/* required settings */ | |
position: relative | |
overflow: hidden | |
min-height: 274px | |
padding: 0 | |
min-height: 525px | |
.sect-nav | |
display: block | |
height: 30px | |
width: 300px | |
z-index: 20 | |
position: absolute | |
bottom: 0 | |
left: 0 | |
.browse | |
z-index: 2 | |
background: #A40234 | |
position: absolute | |
display: block | |
height: 15px | |
width: 13px | |
float: left | |
bottom: 250px | |
cursor: pointer | |
padding: 12.5px 13.5px | |
.services .browse | |
bottom: 330px | |
.disabled | |
opacity: 0.5 | |
.media-centre-page .browse | |
top: 160px | |
.browse span | |
position: absolute | |
width: 13px | |
height: 15px | |
.left | |
left: 0 | |
transform: rotate(180deg) | |
-ms-transform: rotate(180deg) | |
.right | |
right: 0 | |
.panel-list | |
float: left | |
padding: 20px 0 | |
overflow: auto | |
.section-slide > .items, .page-slider > .items | |
width: 20000em | |
position: absolute | |
.section-tab | |
.item | |
border-top: 2px solid #CCC | |
h3 | |
color: #CCC | |
.item.current-i | |
border-top: 2px solid #A40234 | |
.tab-content | |
min-height: 150px | |
.section-tab | |
.current-i | |
h3 | |
color: #A40234 | |
[data-icon="sq"] | |
background: #A40234 | |
[data-icon="sq"] | |
background: #CCCCCC | |
*[role~=menu] li | |
cursor: pointer | |
/* Articles */ | |
.items article | |
background: #A40234 | |
text-align: center | |
min-height: 234px | |
color: #FFF | |
position: relative | |
font-size: 1.6em | |
h3 | |
color: #FFF | |
padding: 25px 0 0 0 | |
font-size: 1em | |
article | |
.view | |
font-size: 0.625em | |
time | |
margin: 5px 0 0 0 | |
div:not(.home-page) .header-container | |
padding: 35px 0 70px 0 | |
background: #A40234 | |
margin: 57px 0 0 0 | |
height: auto | |
.section-wrapper, .content > article | |
width: 990px | |
padding: 0 20px | |
margin: auto | |
.docs-section .view | |
background: #E7E7E7 | |
.item:hover .view | |
display: block | |
.video-section | |
.section-slide | |
height: 360px | |
.browse | |
top: 50% | |
.view | |
display: none | |
height: 234px | |
position: absolute | |
text-align: center | |
top: 0 | |
width: 234px | |
background: rgba(255, 255, 255, 0.5) | |
span | |
position: relative | |
top: 50% | |
margin: -33px auto | |
width: 23px | |
padding: 25px 20px | |
height: auto | |
background: #A40234 | |
color: #FFF | |
display: block | |
date | |
display: block | |
padding: 20px 0 | |
font-size: 0.8125em | |
.items article img | |
padding: 10px 0 | |
a[rel~="lightbox[images]"] | |
width: 234px | |
height: 234px | |
display: block | |
img | |
width: 234px | |
height: 234px | |
display: block | |
#lightboxOverlay | |
position: absolute | |
top: 0 | |
left: 0 | |
z-index: 9999 | |
background: #FFF | |
background: rgba(255, 255, 255, 0.95) | |
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95) | |
/*opacity: 0.85; */ | |
display: none | |
#lightbox | |
position: absolute | |
left: 0 | |
width: 100% | |
z-index: 10000 | |
text-align: center | |
line-height: 0 | |
font-family: "lucida grande", tahoma, verdana, arial, sans-serif | |
font-weight: normal | |
img | |
width: auto | |
height: auto | |
a img | |
border: none | |
.lb-outerContainer | |
position: relative | |
background-color: white | |
*zoom: 1 | |
width: 250px | |
height: 250px | |
margin: 0 auto | |
-webkit-border-radius: 4px | |
-moz-border-radius: 4px | |
-ms-border-radius: 4px | |
-o-border-radius: 4px | |
border-radius: 4px | |
&:after | |
content: "" | |
display: table | |
clear: both | |
.lb-container | |
padding: 10px | |
.lb-loader | |
position: absolute | |
top: 40% | |
left: 0% | |
height: 25% | |
width: 100% | |
text-align: center | |
line-height: 0 | |
.lb-nav | |
position: absolute | |
top: 50% | |
left: 0 | |
height: 30px | |
width: 100% | |
z-index: 10 | |
.browse | |
bottom: 0 | |
.lb-container > .nav | |
left: 0 | |
.lb-nav a | |
outline: none | |
.lb-dataContainer | |
margin: 0 auto | |
padding-top: 5px | |
*zoom: 1 | |
width: 100% | |
-moz-border-radius-bottomleft: 4px | |
-webkit-border-bottom-left-radius: 4px | |
-ms-border-bottom-left-radius: 4px | |
-o-border-bottom-left-radius: 4px | |
border-bottom-left-radius: 4px | |
-moz-border-radius-bottomright: 4px | |
-webkit-border-bottom-right-radius: 4px | |
-ms-border-bottom-right-radius: 4px | |
-o-border-bottom-right-radius: 4px | |
border-bottom-right-radius: 4px | |
&:after | |
content: "" | |
display: table | |
clear: both | |
.lb-data | |
padding: 0 10px | |
color: #bbbbbb | |
.lb-details | |
width: 85% | |
float: left | |
text-align: left | |
line-height: 1.1em | |
.lb-caption | |
font-size: 13px | |
font-weight: bold | |
line-height: 1em | |
.lb-number | |
display: block | |
clear: left | |
padding-bottom: 1em | |
font-size: 11px | |
.lb-close | |
width: 35px | |
float: right | |
padding-bottom: 0.7em | |
outline: none | |
&:hover | |
cursor: pointer | |
.lb-video | |
display: none | |
background: rgba(255, 255, 255, 0.95) | |
position: fixed | |
top: 0 | |
z-index: 9999 | |
width: 100% | |
height: 100% | |
.vid-container | |
width: 486px | |
height: 320px | |
background: #000 | |
display: none | |
position: fixed | |
top: 50% | |
margin: -160px 0 0 -242px | |
left: 50% | |
z-index: 9999 | |
.OoyalaVideoPlayer | |
display: block | |
width: 486px | |
height: 320px | |
background: #000 | |
position: fixed | |
top: 50% | |
margin: -160px 0 0 -242px | |
left: 50% | |
z-index: 99999 | |
.vid-container > * | |
width: 486px | |
height: 320px | |
.lb-on | |
overflow: hidden | |
/* ===== Forms ==================================== */ | |
/* Contact form */ | |
form | |
div ~ div | |
float: left | |
input | |
width: 194px | |
padding: 20px | |
border: 0 | |
margin: 0 | |
color: #FFFFFF | |
background: #A40234 | |
font: 1em Helvetica, Helvetica Neue, Arial, sans-serif | |
textarea | |
color: #FFFFFF | |
background: #A40234 | |
padding: 20px | |
border: 0 | |
margin: 0 | |
min-width: 698px | |
max-width: 698px | |
height: 132px | |
overflow: auto | |
font: 1em Helvetica, Helvetica Neue, Arial, sans-serif | |
\::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder | |
color: #FFFFFF | |
opacity: 1 | |
.wpcf7-response-output | |
display: block | |
width: 698px | |
font: 1.3em Helvetica, Helvetica Neue, Arial, sans-serif | |
border: none !important | |
.wpcf7-validation-errors | |
color: #A40234 | |
margin-top: -16px | |
.div.wpcf7-response-output! | |
input:focus | |
color: #FFF | |
form .col2 p | |
margin-bottom: 1px | |
input[type~=submit] | |
width: 234px | |
text-align: left | |
background: #a40234 url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjU1LjczNHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9Ii0yMC4xMTcgLTIzLjQ1NyA1NS43MzQgNjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIwLjExNyAtMjMuNDU3IDU1LjczNCA2MCINCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8Zz4NCgkJPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9Ii0wLjExNyIgeTE9IjYuNTQyIiB4Mj0iMTMuODgzIiB5Mj0iNi41NDIiLz4NCgkJPGc+DQoJCQk8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjguNTgxLDEzLjA4NiA3LjQ5LDExLjkxNCAxMy4yNjksNi41NDMgNy40OSwxLjE3MiA4LjU4MSwwIDE1LjYxNyw2LjU0MyAJCQkiLz4NCgkJPC9nPg0KCTwvZz4NCjwvZz4NCjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEiIHgxPSItMTkuNjEyIiB5MT0iLTIzLjQ1OCIgeDI9Ii0xOS42MTIiIHkyPSIzNi41NDIiLz4NCjwvc3ZnPg0K") no-repeat right center | |
/* Unencoded | |
-x-background-image: url("data:image/svg+xml,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='55.734px' height='60px' viewBox='-20.117 -23.457 55.734 60' enable-background='new -20.117 -23.457 55.734 60' xml:space='preserve'><g><g><line fill='none' stroke='#FFFFFF' stroke-width='2' stroke-miterlimit='10' x1='-0.117' y1='6.542' x2='13.883' y2='6.542'/><g><polygon fill='#FFFFFF' points='8.581,13.086 7.49,11.914 13.269,6.543 7.49,1.172 8.581,0 15.617,6.543 '/></g></g></g><line fill='none' stroke='#FFFFFF' stroke-miterlimit='1' x1='-19.612' y1='-23.458' x2='-19.612' y2='36.542'/></svg>") | |
/* ===== Footer =================================== */ | |
.footer-container | |
background: #A40234 | |
color: #FFF | |
.footer-nav | |
.description | |
display: block | |
color: #FFF | |
text-decoration: none | |
padding: 5px 0 5px 35px | |
text-align: left | |
width: 705px | |
border-left: 1px solid #FFFFFF | |
li:last-child | |
text-align: right | |
border: none | |
article footer p | |
margin: 0 | |
/* 2. Mobile | |
* | |
* | |
* ============================================================== */ | |
/* ===== Images =================================== */ | |
.mobile | |
.featured-img img | |
width: 100% | |
height: auto | |
.sticky #main-nav-holder | |
postion: static | |
/* ===== Navigation =============================== */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment