Swoop

/*** SCSS ***/
.taupe {
    background-color: $taupe;
    z-index: 100;
}

.blue {
    background-color: $blue;
}

.light-blue {
    background-color: $light-blue;
}

.white {
    position: relative;
}

.swoop {
    display: inline-block;
    float:right;
    clear:right;
    padding:.3em 0 .5em 1em;
    position: relative;
    @include border-radius(0 0 0 1.6em);
    @include box-shadow(3px 4px 4px -2px rgba(0,0,0,0.22));

    &:after {
        position: absolute;
        top:0;
        content:"";
        top:0;
        bottom:0;
        left:100%;
        width:300em;
        height:100%;
        @include box-shadow(0 4px 4px -2px rgba(0,0,0,0.22));
    }

    /* squares */
    &:before {
        position:absolute;
        top:0;
        content:"";
        width:1.6em;
        height:1.6em;
        left:-1.6em;
        z-index:1;
    }

    &.bottom {
        @include border-radius(1.67em 0 0 0);
        position: absolute;
        float: none;
        bottom:0;
        right:0;
        padding:.5em 0 0em 1em;
        max-width:64%;
        @include box-shadow(none);

        /* squares */
        &:before {
            bottom:0 !important;
            top: auto !important;
        }

        &:after {
            @include box-shadow(none);
        }
    }

    &.taupe:before, &.taupe:after {
        background-color: $taupe;
    }

    &.light-blue:before, &.light-blue:after {
        background-color: $light-blue;
    }

    &.blue:before, &.blue:after {
        background-color: $blue;
    }

    span {
        &.curvy {
            display: block;
            float:left;

            /* circles */
            &:before {
                position:absolute;
                top:0;
                content:"";
                background-color: $white;
                width:2.9em;
                height:2.9em;
                left:-2.5em;
                z-index:2;
                @include border-radius(1.6em 2.6em);
            }
        }

        /* circles */
        &.rounddown {
            display: block;
            float:left;

                &:before {
                position:absolute;
                bottom:0;
                content:"";
                background-color: $white;
                width:2.9em;
                height:2.9em;
                left:-2.5em;
                z-index:2;
                @include border-radius(2.6em 1.6em);
            }
        }
    }

}

.taupe.swoop {
    position: inherit;
    background-color: $taupe;
    width: auto;
    margin:inherit;
    padding:.2em .2em .2em 1.5em;
    text-align: left;
}

/******* HTML *******/

<div class="wrap white clearfix">

    <div class="taupe swoop">
        <span class="curvy"></span>
        <ul id="menu-social-links" class="social-nav clearfix">
            <li><!-- social li's here--></li>
        </ul>
        <form role="search" method="get" id="searchform" action="http://texascasa.wpengine.com/">
                <label class="screen-reader-text" for="s">Search for:</label>
                <input type="text" value="" placeholder="Search Texas CASA" name="s" id="s" />
                <button type="submit" id="searchsubmit" class="button" value="Search" /><i class="icon-search icon-large"></i></button>
        </form>
    </div>

    <a id="logo" href="http://texascasa.wpengine.com" rel="nofollow"><img src="http://texascasa.wpengine.com/wp-content/themes/texascasa-bones/library/images/logo-texas-casa.png" alt="Texas CASA" /></a>

    <div class="blue swoop bottom">
        <span class="rounddown"></span>
        <nav role="navigation">
            <ul id="menu-primary-menu" class="nav top-nav clearfix">
                <li><!-- navigation li's here --></li>
            </ul>
        </nav>
    </div>


    <div class="light-blue swoop">
        <span class="curvy"></span>
        <ul id="menu-ancillary-menu" class="nav ancillary-nav clearfix">
            <li><!-- ancillary nav li's here--></li>
        </ul>
    </div>

</div><!-- .wrap -->

<div class="stretch blue">
    <!-- this is just to make the background stretch full-width to the right -->
</div>