nothing special

index.haml

!!!5
%html
  %head
    %meta{:charset => "utf-8"}
      %title random
  %body
    #container
      %h1 Join the Dark Side
      %small ... and get free cookie!
      %br/
      %a#le-btn{:href => "#"} I'm In!

    #welcome
      %a{:href => ""} check again
  
    #le-modal
      %a#close-btn{:href => "#"} x
      %form{:id => "dark", :action=> ""}
        %ul
          %li
            %input{:id => "name", :placeholder => "Name", :required => "required", :autofocus => "autofocus", :type => "text", "x-webkit-speech" => ""}/
          %li
            %button{:type => "submit", :id => "go"} Go
            %button{:type => "reset"} Reset

script.js

var c = $('#container'),
  m = $('#le-modal'),
  b = $('#le-btn'),
  x = $('#close-btn'),
  w = $('#welcome'),
  d = $('form#dark'),
  i = $('#name');

m.hide();
w.hide();

b.click(function (e) {
  e.preventDefault;
  c.addClass('blur');
  m.slideDown('fast', function () {
    x.click(function () {
      m.slideUp();
      c.removeClass('blur');
    });
  });
});

d.submit(function () {
  var v = i.val().toLowerCase();
  if (v === 'luke' || v === 'luke skywalker' || v === 'skywalker') {
    d.slideUp();
    c.hide();
    w.show().append("<div><img src='http://25.media.tumblr.com/tumblr_mahfv7CI0C1r4b9xyo1_500.jpg' alt='Happy Vader is happy'/></div>").prepend("<h1 style='text-transform: capitalize'>Welcome back home, " + i.val() + " !</h1>");
  } else {
    d.slideUp();
    c.hide();
    w.show().append("<div><img src='http://25.media.tumblr.com/tumblr_mah0py59jp1qd6kfbo1_500.jpg' alt='John the Dark side today!'/></div>").prepend("<h1>Join the Dark Side today, " + i.val() + " ! ;)</h1>");
  }
});

style.less

@100: 100%;
@fontFam: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@basecl: #111;
@cl1: #293033;
@cl2: #594D37;
@cl3: #8C644C;
@cl4: #C4BE90;
@cl5: #FAFAC0;

.bsz {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
} 

*, *:before, *:after {.bsz }

::-moz-selection { background: @cl5; color: #222; text-shadow: none; }
::selection { background: @cl5; color: #222; text-shadow: none; }

html {
  text-rendering: optimizeLegibility;
  margin: 0;
  padding: 0;
  font-size: 100%;
  min-height: 100%;
  overflow: hidden;
  background: @cl1;
}

body {
  width: 900px;
  margin: 0 auto;
  font: 14px/2 @fontFam;
  color: @cl5;
}

a, a:visited {
  color: @cl3;
}

a:active { .at; }

a#le-btn {
  background: lighten(@basecl, 10%);
  color: @cl4;  
  margin: 2rem 0;
  font-size: 35px;
  text-decoration: none;
  text-transform: capitlize;
  padding: .5rem 2.5rem;
  .box-shadow();
}

#container {
  margin: 15% 0;
  color: @cl5;
  text-shadow: 0 -1px 0 @basecl;
  text-align: center;
}

#le-modal {
    width: 380px;
    height: auto;
    margin: 0;
    position: absolute;
    z-index: 9999;
    bottom: 0;
    left: 36%;
    background: lighten(@cl1, 22%);
    .box-shadow();
    ul {
      list-style: none;
      display: block;
      margin: 1rem 2rem 1rem 0;
      li {
        input[type^='t'], input[type$='d'] {
          font-size: 22px;
          margin: .7rem 1rem;
          padding: .5rem 1rem;
          border: none;
          .box-shadow();
        }
        button {
          background: darken(@cl3, 5%);
          color:  @cl5;
          border: solid 1px @cl1;
          font-size: 18px;
          padding: .3rem 2.5rem;
          margin: .4rem .8rem;
          &:hover {
            background: @cl1;
            color: @cl4;
          }
        }
      }
    }
}

#close-btn {
  position: absolute;
  right:  .1rem;
  padding: 0 1rem;
  text-decoration: none;
  color: @cl1;
  &:hover {
    background: @cl1;
    color: @cl4;
  }
}

#welcome {
  text-align: center;
  h1 {
    text-transform: capitalize;
  }
}

.at {
  top: 1px;
  position: relative;
}

.blur {
  opacity: .2;
}

// HELPER
// ------
.box-shadow(@x: 0, @y: 7px, @blur: 7px, @spread: 0, @color: @basecl) {
  box-shadow: @x @y @blur @spread @color;
}