Couture Uomo Draft

Another interface done in JSFiddle. What... I have a thing for the four-pane setup. It's kind of rad.

by Imperative

HTML

<link rel="stylesheet" href="http://imperativeideas.com/fiddle/yui-reset.min.css">
<script src="http://imperativeideas.com/js/jquery.mousewheel.js"></script>
<script src="http://imperativeideas.com/fiddle/bigvideo.js"></script>
<script src="http://imperativeideas.com/fiddle/jquery.imagesloaded.min.js"></script>
<script src="http://vjs.zencdn.net/c/video.js"></script>
<script src="http://imperativeideas.com/fiddle/modernizr.js"></script>
<div id="wrap">
    <nav class="row fixedmenu">
        <section class="four mobile-four columns company">
             <h2><a href="#">Coutoure Uomo<span> | San Francisco</span></a></h2>

        </section>
        <section id="navigation" class="eight mobile-four columns navigation">
            <ul>
                <li><a href="#">Company</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Press</a></li>
                <li><a href="#">Location</a></li>
                <li><a href="#" data-reveal-id="contactme">Contact</a></li>
            </ul>
        </section>
    </nav>
    <section id="main row">
        <div class="landing cursor twelve columns">
            <!-- Content Area for Landing Page -->
        </div>
        <div class="below twelve columns">
            <div id="goabove" class="uparrow"></div>
            <div class="row">
                <header class="welcome twelve columns">
                     <h2 class="title">Welcome to Couture Uomo</h2>

                </header>
                <article class="introduction row">
                    <div class="three columns hide-for-small">
                        <img src="http://clients.imperativeideas.com/cu/images/david-yahid.jpg" />
                    </div>
                    <div class="nine columns">
                        <p>Thank you for choosing CoutureUomo.com. We operate from our Flagship Store which we started in 1998, prominently located on San Francisco’s Union Square. We have grown to become San Francisco’s...

CSS

@import url("http://imperativeideas.com/fiddle/yui-reset.min.css");
 @import url("http://imperativeideas.com/fiddle/foundation.min.css");
 @import url("http://imperativeideas.com/fiddle/app.css");
 @import url("http://imperativeideas.com/fiddle/video/bigvideo.css");

/* Top Level Declarations */
 html, body {
    height: 100%;
}
/* Font Declarations */
 @font-face {
    font-family:'NeutraText';
    src: url('http://imperativeideas.com/fiddle/fonts/neutra/NeutraTextTF-Book.eot');
    src: local('☺'), url('http://imperativeideas.com/fiddle/fonts/neutra/NeutraTextTF-Book.woff') format('woff'), url('http://imperativeideas.com/fiddle/fonts/neutra/NeutraTextTF-Book.ttf') format('truetype'), url('http://imperativeideas.com/fiddle/fonts/neutra/NeutraTextTF-Book.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'Scriptina';
    src: url('http://imperativeideas.com/fiddle/fonts/scriptina/scriptina_pro-webfont.eot');
    src: url('http://imperativeideas.com/fiddle/fonts/scriptina/scriptina_pro-webfont.eot?#iefix') format('embedded-opentype'), url('http://imperativeideas.com/fiddle/fonts/scriptina/scriptina_pro-webfont.woff') format('woff'), url('http://imperativeideas.com/fiddle/fonts/scriptina/scriptina_pro-webfont.ttf') format('truetype'), url('http://imperativeideas.com/fiddle/fonts/scriptina/scriptina_pro-webfont.svg#scriptina_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Fixed Top Bar */
 .fixedmenu {
    position: fixed;
    width: 100%;
    top: 0;
    background: rgb(9, 9, 9);
    color: rgb(235, 235, 235);
    overflow: hidden;
    border-bottom: 1px solid rgb(222, 222, 222);
    z-index: 10;
}
section.company, #section.company {
    float:left;
}
.company h2 {
    font-family: NeutraText, Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 40px;
    color: rgb(235, 235, 235);
    margin: 0px 0px 0px 20px;
}
.company h2 span {
}
.company h2...

JavaScript

// ======= Document Ready Binds

// Init Responsive Menu


$(function () {
    getvertical(); // Get the height of the window, minus the header
    setvertical(); // Set vertical heights and apply styles
    checkscreen(); // Set data flag to mobile or standard resolution


    // If hovered over the landing area, mousewheel skips to .below
    $('.landing').mousewheel(function (event, delta) {
        if (delta > 0) {

            //do nothing
        } else if (delta < 0) {
            gobelow();
        }
    });

    // Likewise, if landing is clicked, let's scroll down
    $('.landing').click(function () {
        gobelow();
    });


    // Interaction Binds
    $('#gobelow').click(gobelow);
    $('#goabove').click(goabove);
    
    // Set up video with an image fallback for mobile

    var BV = new $.BigVideo();
    BV.init();
    if(jQuery.support.touch){
        BV.show('http://clients.imperativeideas.com/cu/images/testback-1.jpg');
    } else {
        BV.show('http://imperativeideas.com/fiddle/video/roman-skyline-timelapse-zc.mp4', {
            ambient: true
        });
    }

});

// ======= Run on resize events

$(window).resize(function () {
    waitForFinalEvent(function () {
        getvertical(); // Recalculate document sizes
        setvertical(); // Resize main content areas
        checkscreen(); // Set data flag to mobile or standard resolution
    }, 800, "resize"); // Resize timout is 800ms, UID is resize
});

// ======= Reusable Functions

// We need a resize timer function (http://bit.ly/fDW5rg)
var waitForFinalEvent = (function () {
    var timers = {};
    return function (callback, ms, uniqueId) {
        if (!uniqueId) {
            uniqueId = "Don't call this twice without a uniqueId";
        }
        if (timers[uniqueId]) {
            clearTimeout(timers[uniqueId]);
        }
        timers[uniqueId] = setTimeout(callback, ms);
    };
})();

// Get the height of the landing area
function getvertical() {
    landingHeight =...