Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                // HTML isn't organized very well
.rolex

  - for (var x = 0; x < 4; x++)
    .lug
  .lug-bg
  
  .band
    .band-detail-top-center
      .band-detail-top-brushed

    .band-detail-bottom-center
      .band-detail-bottom-brushed
      .band-detail-bottom-brushed

  .crown
    - for (var x = 0; x < 4; x++)
      .crown-detail
  .crown-wrapper 
    .crown-wrapper-detail


  .bezel
    - for (var x = 1; x < 16; x++)
      i.bez
    .bezel-gradient
  i.bez-five-min
  ul.bez-num
    li 10
    li 20
    li 30
    li 40
    li 50
  .bezel-decor
    - for (var x = 1; x < 15; x++)
      i.bez-min
  .crystal
  .face
    .content-upper
      .logo
        .logo-left
        .logo-right
      p.name Rolex
      p.sub-name Oyster Perpetual Date
    .content-lower
      p.sub-text Submariner
      p.sub-num 1000<em>ft</em> = 300<em>m</em>
      p.sub-fine Superlative Chronometer<br/>Officially Certified
      p.sub-swiss <span>Chris</span> <span>made</span>
    - for (var x = 1; x < 16; x++)
      i.sec
    .marker-triangle
    .marker-square
    .marker-circle
      - for (var x = 1; x < 5; x++)
        i.markers-circle
    .date
    #date-num
    .hand-hour
      span
        i.hour-decor
    .hand-min <span>
    .hand-sec
      .hand-sec-details

              
            
!

CSS

              
                /*
CSS isn't organized very well
*/

/* Text */
@import url('https://fonts.googleapis.com/css?family=Roboto:300i,400&display=swap');

/* Numerals */
@import url('https://fonts.googleapis.com/css?family=Chathura:800&display=swap');

/* Date */
@import url('https://fonts.googleapis.com/css?family=Krona+One&display=swap');

/* Rolex */
@import url('https://fonts.googleapis.com/css?family=Rhodium+Libre&display=swap');

/* Swiss Made */
@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');

*,*:before,*:after{ box-sizing: border-box; } html, body { height: 100%; width: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} 

body{
  transform: scale(0.74);
  background: linear-gradient(45deg,     #292927 0%,
    #565654 50%,
    #AFAFAD 100%) fixed;
}

$bz-bg:       linear-gradient(45deg,
  #f0f0f0 0%,
  #ddd 50%,
  #f0f0f0 100%);
$bz-ind:      #777;

$face:        radial-gradient(ellipse at center,
  #1752A3 0%,
  #1D3A6F 80%);
$sec:         #e0e0e0;

$band-bg:     #e6e6e6;

$text-color:  #ddd;

%pseudo{
  content:'';
  display: block;
  position: absolute;
}

/* Circle marker details */
%marker{
  width: 26px;
  height: 26px;
  border-radius: 100%;
  background: #fff;
  box-shadow:
    inset 1px 1px 1px 0 #666,
    inset 2px 2px 7px 0 #aaa,
    1px 1px 1px 0 #222;
  border: 2px solid #ccc;
}

%ab-center{
  top: 0; bottom: 0; right: 0; left: 0;
  margin: auto;
}

/* .bez, .sec */
i{
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto;
  
  &:before,
  &:after{
    @extend %pseudo;
    height: inherit;
    width: inherit;
    border-radius: inherit;
    transform: rotateZ(calc(90deg));
  }
  
}

/* ***********************

Start main code

*********************** */

/* Container */
.rolex{
  position: absolute;
  @extend %ab-center;
  width: 430px;
  height: 430px;  
  
  filter: drop-shadow(-20px 10px 20px rgba(0,0,0,0.4));
}

/* Lug */
/* Lug shadow */

.lug-bg{
  position: absolute;
  z-index: -1;  
  top: -19px;
  left: 0;
  width: inherit; // face width
  height: 486px;
  //background: orange;
  
  &:before,
  &:after{
    @extend %pseudo;
    width: inherit;
    border-bottom: 188px solid #606467;
    border-left: 59px solid transparent;
    border-right: 59px solid transparent;
    top: 0;
    width: 410px;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
  }
  
  &:after{
    transform: scaleY(-1);
    top: initial;
    bottom: 0;
    border-bottom-color: #222828;
  }
}

/* Lug */
.lug{  
  position: absolute; 
  width: 104px;
  height: 250px;
  left: 1px;
  top: -26px;
  clip-path: polygon(65% 3%, 100% 0, 100% 100%, 0% 96%); 

  /* Top right position */
  &:nth-child(2){
    transform: scaleX(-1);
    right: 1px;
    left: initial;
  }
  
  /* Bottom left position */
  &:nth-child(3){
    transform: scaleY(-1);
    top: initial;
    bottom: -44px;
  }
  
  /* Bottom right position */
  &:nth-child(4){
    transform: scaleY(-1) scaleX(-1);
    top: initial;
    bottom: -44px;
    right: 1px;
    left: initial;
  }
  
  /* Top styling */
  &:nth-child(1),
  &:nth-child(2){
    &:before{
      @extend %pseudo;
      width: 94px;
      left: 28px;
      height: inherit;
      transform: rotate(-8deg);
      top: 2px;
      background: linear-gradient(to bottom, #8F9396 1%, #111619 3%, #434949 5%, #BABEC1 14%, #E2E6E9 19%, #E2E6E9 22%, #828689 40%);
    }
  }
  
  /* Bottom styling */
  &:nth-child(3),
  &:nth-child(4){
    &:before{
      @extend %pseudo;
      width: 108px;
      left: 14px;
      height: inherit;
      transform: rotate(-8deg);
      top: 6px;
      background: linear-gradient(to bottom, #8F9396 2%, #111619 4%, #434949 9%, #BABEC1 15%, #E2E6E9 19%, #E2E6E9 22%, #373D3D 46%);
    }
  }
  
  &:after{
    @extend %pseudo;
    left: 10px;
    width: inherit;
    height: inherit;
    background: repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.1), 
      rgba(0,0,0,0.3) 1px,
      transparent 1px,
      transparent 3px,  
      rgba(0,0,0,0.3) 3px,
      rgba(0,0,0,0.2) 4px,
      transparent 4px, 
      transparent 6px, 
    );
    opacity:0.2;
  }
  
}

/* Crown */
.crown{
  z-index: 0;
  width: 40px;
  height: 75px;
  position: absolute;
  right: -30px;
  background: #31383B;
  top: 0;
  bottom: 0;
  margin: auto;
  box-shadow: 6px 0 0 -5px #8C7C4F;  
  border-radius: 8px;
  
  /* Edge detail */
  &:before{
    @extend %pseudo;
    width: 1px;
    height: 45px;
    background: #B0B6B9;
    right: -10px;
    top: 15px;
  }
  
  /* Top detail */
  &:after{
    @extend %pseudo;
    width: 10px;
    height: 65px;
    right: -9px;
    top: 5px;
    clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
    background: linear-gradient(to bottom,
      #010200 10%,
      #394241 16%,
      #FBFCFE 42%,
      #FBFCFE 50%,
      #394241 84%,
      #010200 90%);
    box-shadow: inset 2px 0 2px 0 #85888D,
      inset -4px 4px 2px -2px #A5AAAD;
  }
  
  .crown-detail{
    position: absolute;
    z-index: 1;
    border-bottom: 5px solid #8D9194;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    width: 30px;
    right: 0;
    filter: drop-shadow(1px 0 0 #5E5D60);
    
    &:before,
    &:after{
      @extend %pseudo;
      border-left: inherit;
      border-right: inherit;
      height: 0;
      left: -2px;
      width: inherit;
    }
    &:before{
      border-top: 5px solid #E2E6E7;
      top: 5px;
      filter: drop-shadow(0 10px 0 #B7BBBE);
    }
    &:after{
      border-bottom: 5px solid #7A7F82;
      top: 10px;
    }
    
    &:nth-of-type(2){
      top: 20px;
      border-bottom-color: #F7FBFE;
      &:before{
        border-top-color: #7D7E80;
        filter: drop-shadow(0 10px 0 #CDD1D4);
      }
      &:after{
        border-bottom-color: #121A1C;
      }
    }
    
    &:nth-of-type(3){
      top: 40px;
    }
    &:nth-of-type(4){
      top: 60px;
      &:before{
        //display: none;
        filter: none;
      }
      &:after{
        display: none;
      }
    }
  }
  
}

/* Crown sides */
.crown-wrapper{
  width: 58px;
  height: 240px;
  position: absolute;
  right: -16px;
  top: 0;
  bottom: 0;
  margin: auto;
  
  &:after{
    @extend %pseudo;
    width: inherit;
    height: inherit;
    top: 0;
    left: 0;
    clip-path: polygon(0 95%, 0 6%, 100% 20%, 100% 30%, 60% 36%, 60% 62%, 100% 70%, 100% 82%);
    background: linear-gradient(90deg, 
      #0A181A 46%,
      #A3A8AB 50%,
      #F9FEFF 72%,
      #FAFBFF 80%,
      #D6DBDC 90%,
      #0A0B10 94%);
  }  
  
  /* Shadow */
  &:before{
    @extend %pseudo;
    width: inherit;
    height: inherit;
    top: 0;
    left: 0;
    clip-path: polygon(0 97%, 0 4%, 100% 20%, 100% 30%, 60% 36%, 64% 62%, 100% 70%, 100% 82%);
    background: #0A0B10;
  } 
  
  /* Rounded sides */
  .crown-wrapper-detail{
    position: absolute;
    width: 5px;
    height: 16px;
    border-radius: 20% 100% 0 0;
    background: #0A0B10;
    right: -3px;
    top: 48px;
    box-shadow: 0 120px 0 #0A0B10;

    
    &:before{
      @extend %pseudo;
      width: 5px;
      height: 16px;
      border-radius: 0 0 100% 20%;
      background: #0A0B10;
      right: 0px;
      top: 7px;
      box-shadow: 0 125px 0 #0A0B10;
    }

    &:after{
      @extend %pseudo;
      background: #B2B6B9;
      height: 24px;
      width: 20px;
      z-index: -1;
      right: 4px;
      top: 14px;
      transform: rotate(18deg);
      background: linear-gradient(-18deg,
      #727679 20%,
      #B2B6B9 36%,
      #181E1E 36%);
    }

  }

}

/* Bezel radius and face */
.bezel{
  width: inherit;
  height: inherit;
  background: $bz-bg;
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  filter: drop-shadow(2px 0px 3px rgba(0,0,0,0.5));

   /* Bezel face */
  .bezel-gradient{
    position: absolute;
    @extend %ab-center;
    overflow: hidden;
    height: 404px;
    width: 404px;
    border-radius: inherit;
    background: linear-gradient(90deg,
      #1C3A7E 0%,
      #1E2B59 30%,
      #295CA9 50%,
      #1E2B59 60%,
      #1153A2 100%); /* Main BG */
    box-shadow:
      0 0 0 2px #272A51, /* Black rim */
      -1px 0 6px 0 #fff; /* Shadow */
  
    /* Gradient shine decor */
    &:after{
      @extend %pseudo;
      height: 280px;
      width: 120px;
      right: 0;
      opacity: 0.6;
      background: linear-gradient(128deg,
        #373D7D 0%,
        #2E305B 22%,
        #3C68B3 22%,
        #5274B8 50%,
        rgba(40,42,80,0) 90%);
    }
    
    /* Gradient shine decor */
    &:before{
      @extend %pseudo;
      height: 300px;
      width: 148px;
      left: 0;
      top: 50px;
      opacity: 0.4;
      background: linear-gradient(-138deg,
        #373D7D 0%,
        #2E305B 22%,
        #5666AD 23%,
        #4B60A6 64%,
        rgba(40,42,80,0) 70%);
    }
    
   }
}

/* Bezel indents */
.bez{
  opacity: 0.7;
  height: 18px;
  width: 18px;
  border-radius: inherit;
  box-shadow:
    0 222px 0 0 #fff,
    0 -222px 0 0 #fff,
    2px 216px 2px -2px $bz-ind,
    2px -216px 2px -2px $bz-ind,
    0 -215px 0 0 #222,
    0 215px 0 0 #222;
  &:before{
    box-shadow:
      0 222px 0 0 #fff,
      0 -222px 0 0 #fff,
      2px 216px 2px -2px $bz-ind,
      2px -216px 2px -2px $bz-ind,
      0 -215px 0 0 #222,
      0 215px 0 0 #222;
  }
}

@for $i from 1 through 14 {
  i.bez:nth-of-type(#{$i}) {
    transform: rotateZ(calc(6deg * #{$i}));
  }
}

/* 5, 15, 25, 35, 45, 55 marks */
.bez-five-min{
  height: 30px;
  width: 10px;
  box-shadow: 0 182px 0 0 #efefef,
    0 -182px 0 0 #efefef,
    2px -182px 0 0 #888,
    2px 182px 0 0 #888;
  opacity: 1;
  transform: rotateZ(30deg);
  &:before,
  &:after{
    height: inherit;
    width: inherit;
    box-shadow: inherit;
  }
  
  &:before{
    transform: rotateZ(60deg);
  }
  
  &:after{
    transform: rotateZ(-60deg);
  }
  
}

/* 10, 20, 30, 40, 50 numbers */
.bez-num {
  font-family: 'Chathura', sans-serif;

  font-size: 72px;
  letter-spacing: -0.02em;
  position: absolute;
  @extend %ab-center;
  width: 406px;
  height: 406px;

  li{
    position: absolute;
    @extend %ab-center;
    height:436px;
    width: 48px;
    text-align: center;
    text-indent: -5px;
    /* Fake inset */
    color: #e0e0e0;
    text-shadow: -1px -1px 0 rgba(0,0,0,.5);
  }
  
  @for $i from 1 through 5 {
    li:nth-child(#{$i}) {
      transform: rotateZ(calc(60deg * #{$i}));
    }
  }
  
}

/* Bezel top triangle and circle */
.bezel-decor{
  /* Bezel top triangle */
  &:before{
    @extend %pseudo;
    top: 18px;
    left: 0;
    right: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-top: 32px solid #ddd;
    border-right: 24px solid transparent;
    border-left: 24px solid transparent;
    box-shadow: 0 -1px 0 #333;
  }
  
  /* Bezel circle in triangle */
  &:after{
    @extend %pseudo;
    @extend %marker;
    left: 0;
    right: 0;
    margin: auto;
    top: 17px;
    box-shadow: inset 0 2px 1px 0 rgba(0,0,0,0.7);
    background:
      linear-gradient(90deg,
        #ccc 0%,
        #ccc 30%,
        #eee 70%,
        #eee 100%);

  }
}

/* 1-15 squares */
.bez-min{
  height: 14px;
  width: 4px;
  box-shadow: 
    0 -174px 0 0 #efefef,
    1px -175px 0 0 #444; /* Fake indent */
  
  &:nth-child(5),
  &:nth-child(10){
    display: none;
  }
  
}

@for $i from 1 through 14 {
  .bez-min:nth-child(#{$i}) {
    transform: rotateZ(calc(6deg * #{$i}));
  }
}

/* Border, inner and outer rings */
.crystal{
  position: absolute;
  @extend %ab-center;
  
  width: 322px;
  height: 322px;
  border-radius: 50%;
  box-shadow:
    inset 1px 1px 4px 0 rgba(0,0,0,0.7),
    0 0 0 2px #272A51;
  background:
    linear-gradient(90deg,
      #ddd 0%,
      #777 65%,
      #ccc 100%);
  
  &:before,
  &:after{
    @extend %pseudo;
    @extend %ab-center;
    border-radius: 100%;
  }
  
  /* Outer ring */
  &:before{
    width: 316px;
    height: 316px;
    border: 2px solid #444;
    background:
    linear-gradient(0deg,
      #aaa 0%,
      #888 65%,
      #aaa 100%);
    box-shadow: inset 0 0 10px 0 #444;
  }
  
  /* Inner ring */
  &:after{
    width: 304px;
    height: 304px;
    border: 1px solid rgba(255,255,255,0.5);
    background:
    linear-gradient(-25deg,
      #666 0%,
      #ddd 55%,
      #999 100%);
    box-shadow:
      inset 0 -2px 4px 0 rgba(255,255,255,0.8),
      inset 0 2px 3px 0 rgba(255,255,255,0.6);
  }
  
}

.face{
  position: absolute;
  @extend %ab-center;
  width: 286px;
  height: 286px;
  border-radius: 100%;
  background: $face;
  box-shadow:
    inset 0 0 8px 2px rgba(0,0,0,0.4),
    inset 0 -4px 20px 0 rgba(0,0,0,0.2);
  
  /* Thicker 30, reduced height */
  &:after{
    @extend %pseudo;
    @extend %ab-center;
    width: 3px;
    height: 3px;
    background: $sec;
    top: 281px;
    transform: rotateZ(180deg);
  }
  
  /* Each second tick */ 
  .sec{
    height: 7px;
    width: 1px;
    box-shadow:
      0 137px 0 0 $sec,
      0 147px 0 0 rgba(255,255,255,0.2),
      0 -137px 0 0 $sec;
    
    &:before{
      box-shadow:
        0 -137px 0 0 $sec,
        0 137px 0 0 $sec,
        0 -147px 0 0 rgba(255,255,255,0.2);
    }
    
    /* Thicker 35, 5, before:20, after:50 */
    &:nth-of-type(5){
      box-shadow:
        0 137px 0 0 $sec,
        1px 137px 0 0 $sec,
        -1px 137px 0 0 $sec,
        0 -137px 0 0 $sec,
        1px -137px 0 0 $sec,
        -1px -137px 0 0 $sec,
        0 147px 0 0 rgba(255,255,255,0.2);
        &:before{
          box-shadow:
            0 -137px 0 0 $sec,
            1px -137px 0 0 $sec,
            -1px -137px 0 0 $sec,
            0 -147px 0 0 rgba(255,255,255,0.2);
        }
        &:after{
          box-shadow:
            0 137px 0 0 $sec,
            1px 137px 0 0 $sec,
            -1px 137px 0 0 $sec;
        }
    }
    /* Thicker 40, 10, before:25, after:55 */
    &:nth-of-type(10){
      box-shadow:
        0 137px 0 0 $sec,
        1px 137px 0 0 $sec,
        -1px 137px 0 0 $sec,
        0 -137px 0 0 $sec,
        1px -137px 0 0 $sec,
        -1px -137px 0 0 $sec,
        0 147px 0 0 rgba(255,255,255,0.2);
      &:before{
        box-shadow:
          0 -137px 0 0 $sec,
          1px -137px 0 0 $sec,
          -1px -137px 0 0 $sec,
          0 -147px 0 0 rgba(255,255,255,0.2);
      }
      &:after{
        box-shadow:
          0 137px 0 0 $sec,
          1px 137px 0 0 $sec,
          -1px 137px 0 0 $sec;
      } 
    }
    /* Thicker before:15, after:50 */
    &:nth-of-type(15){
      &:before{
        box-shadow:
          0 -137px 0 0 $sec,
          1px -137px 0 0 $sec,
          -1px -137px 0 0 $sec,
          0 -147px 0 0 rgba(255,255,255,0.2);
      }
      &:after{
        box-shadow:
          0 137px 0 0 $sec,
          1px 137px 0 0 $sec,
          -1px 137px 0 0 $sec;
      } 
    }
    
    /* Remove ticks for footer text */
    &:nth-of-type(1){
      box-shadow:
        0 -137px 0 0 $sec,
        0 147px 0 0 rgba(255,255,255,0.2);
      /* Shorter tick 31 */
      &:after{
        @extend %pseudo;
        height: 1px;
        width: 3px;
        background: $sec;
        top: 143px;
        left: -1px;
      }
    }
    &:nth-of-type(14){
      
      &:before{
        box-shadow:
          0 137px 0 0 $sec,
          0 -147px 0 0 rgba(255,255,255,0.2);
      }
      /* Shorter tick 29 - Super hacky */
      &:after{
        @extend %pseudo;
        height: 3px;
        width: 1px;
        background: $sec;
        left: 140px;
        top: 2px;
      }
      
    }
    &:nth-of-type(15){
      box-shadow:
        0 -137px 0 0 $sec,
        1px -137px 0 0 $sec,
        -1px -137px 0 0 $sec,
        0 147px 0 0 rgba(255,255,255,0.2),
        1px 147px 0 0 rgba(255,255,255,0.2),
        -1px 147px 0 0 rgba(255,255,255,0.2);
    }  
  }
  

}

@for $i from 1 through 14 {
  i.sec:nth-of-type(#{$i}) {
    transform: rotateZ(calc(6deg * #{$i}));
  }
}

/* Rolex text */
.content-upper{
  color: $text-color;
  text-transform: uppercase;
  
  .logo{
    top: 82px;
    position: absolute;
    width: 8px;
    height: 6px;
    border: 2px solid $text-color;
    border-top-width: 2px;
    border-radius: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    
    &:before,
    &:after{
      @extend %pseudo;
      top: -16px;
    }
    
    /* Dots */
    &:before{
      left: 1px;
      width: 2px;
      height: 2px;
      background: $text-color;
      border-radius: 50%;
      box-shadow:
        5px 1px 0 $text-color,
        9px 3px 0 $text-color,
        -5px 1px 0 $text-color,
        -9px 3px 0 $text-color;
    }
    
    /* Center tip */
    &:after{
      left: 0;
      right: 0;
      margin: auto;
      width: 0;
      height: 0;
      border-right: 2px solid transparent;
      border-left: 2px solid transparent;
      border-bottom: 16px solid $text-color;
    }
    
    .logo-left,
    .logo-right{
      position: absolute;
      top:-15px;
      border-bottom: 15px solid $text-color;
        
      &:before{
        @extend %pseudo;
        top: 1px;
        border-top: 15px solid transparent;
      }
    }
      
    .logo-left{
      left: -3px;
      border-right: 1px solid transparent;
      border-left: 2px solid transparent;
      transform: rotateZ(-15deg);

      &:before{
        left: -4px;
        border-left: 2px solid $text-color;
        transform: rotateZ(-5deg);
      }
    }
      
    .logo-right{
      right: -3px;
      border-right: 2px solid transparent;
      border-left: 1px solid transparent;
      transform: rotateZ(15deg);

      &:before{
        right: -4px;
        border-right: 2px solid $text-color;
        transform: rotateZ( 5deg);
      }
    }
    
  }
  
  .name{
    font-family: 'Rhodium Libre', serif;
    position: absolute;
    font-size: 1.125em;
    letter-spacing: 0.07em; /* 16px */
    text-align: center;
    width: 100%;
    top: 90px;
  }
  
  .sub-name{
    font-family: 'Roboto', sans-serif;
    position: absolute;
    text-align: center;
    top: 106px;
    width: 100%;
    font-size: 0.5625em; /* 9px */
  }
}

/* Submariner text */
.content-lower{
  position: absolute;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  top: 178px;
  color: $text-color;
  width: 100%;
  
  .sub-text{
    text-transform: uppercase;
    font-size: 0.8125em; /* 13px */
    letter-spacing: 0.02em;
  }

  .sub-num{
    font-size: 0.75em; /* 12px */
    top: -1px;
    position: relative;
    em{
      font-style: italic;
      font-weight: 300;
    }
  }

  .sub-fine{ 
    text-transform: uppercase;
    font-size: 0.5625em; /* 9px */
    letter-spacing: -0.05em;
  }
  
  .sub-swiss{
    position: absolute;
    top: 96px;
    width: 100%;
    text-transform: uppercase;
    font-size: 6px; /* 6px */
    letter-spacing: 0.02em;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;

    span{
      display: inline-block;
      z-index:2;
      position: relative;
    }
    span:nth-child(1){
      transform: rotateZ(4deg);
    }
    span:nth-child(2){
      transform: rotateZ(-4deg);
    }
  }
}

/* Face triangle marker */
.marker-triangle{
  position: absolute;
  left: -2px;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-top: 48px solid #333;
  border-right: 21px solid transparent;
  border-left: 21px solid transparent;
  top: 16px;
  
  /* BG */
  &:before{
    @extend %pseudo;
    width: 0;
    height: 0;
    border-top: 47px solid #ccc;
    border-right: 19px solid transparent;
    border-left: 19px solid transparent;
    top: -48px;
    left: -18px;
  }
  
  /* White FG */
  &:after{
    @extend %pseudo;
    width: 0;
    height: 0;
    border-top: 40px solid #fff;
    border-right: 15px solid transparent;
    border-left: 14px solid transparent;
    top: -46px;
    left: -13px;
    filter: drop-shadow(1px 0 0 rgba(0,0,0,0.3));
  }
 
}

/* Face square markers */
.marker-square{
  position: absolute;
  @extend %ab-center;
  width: 43px;
  height: 17px;
  &:before,
  &:after{
    @extend %pseudo;
    width: inherit;
    height: inherit;
    background: #fff;
    box-shadow:
      inset -1px -1px 1px 0 #999,
      inset -2px -2px 7px 0 #aaa,
      -1px -1px 2px 1px rgba(0,0,0,0.3);
    border: 2px solid #ccc;
  }
  &:before{
    left: -108px;
  }
  &:after{
    top: 108px;
    transform: rotateZ(-90deg);
  }
}

/* Face circle markers */
.markers-circle{
  height: 26px;
  width: 26px;

  &:before,
  &:after{
    @extend %marker;
  }
  
  &:before{
    top: -116px;
  }
  
  &:after{
    top: 116px;
  }
  
  &:nth-child(1){
    transform: rotateZ(30deg);
  }
  &:nth-child(2){
    transform: rotateZ(-30deg);
    &:before,
    &:after{
      transform: rotateZ(-200deg);
    }
  }
  &:nth-child(3){
    transform: rotateZ(60deg);
    &:before,
    &:after{
      transform: rotateZ(80deg);
    }
  }
  &:nth-child(4){
    transform: rotateZ(-60deg);
    &:before,
    &:after{
      transform: rotateZ(200deg);
    }
  }
}

/* Date glass */
.date{
  width: 76px;
  height: 60px;
  top: 8px;
  bottom: 0;
  margin: auto;
  right: 6px;
  position: absolute;
  border-radius: 20px / 30px;
  border: 2px solid rgba(255,255,255,0.6);
  box-shadow:
    inset 2px -2px 12px 2px rgba(255,255,255,0.3);
  overflow: hidden;
  z-index: 1;
  
  /* Shine */
  &:after{
    @extend %pseudo;
    top: -120px;
    left: -80px;
    width: 180px;
    height: 400px;
    transform: rotateZ(-25deg);
    background: radial-gradient(ellipse at center,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 48%,
      rgba(255,255,255,0.3) 48%,
      rgba(255,255,255,0) 68%);
    }
  
}

/* Date box, border, and number */
#date-num{
  font-family: 'Krona One', sans-serif;
  position: absolute;
  top: 8px;
  bottom: 0;
  margin: auto;
  right: 16px;
  text-align: center;
  text-indent:-1px;
  letter-spacing: -0.06em;
  font-size: 1.6875em; /* 27px */
  line-height: 1.2;
  color: #3e3e3e;
  height: 36px;
  width: 56px;
  background: radial-gradient(ellipse at center,
    #efefef 0%,
    #A7ACB0 100%);
  border-radius: 4px;
  border-top: 3px solid #373D7D;
  border-left: 3px solid #373D7D;
  border-bottom: 3px solid #5666AD;
  border-right: 3px solid #5666AD;
  box-shadow:
    -1px -1px 2px 0 rgba(255,255,255,0.2);
}

/* Second hand */
.hand-sec{
  @extend %ab-center;
  position: absolute;
  width: 16px;
  height: 16px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
  border-radius: 50%;
  transform: rotateZ(90deg);

  &:after,
  &:before{
    @extend %pseudo;
  }
  
  /* Circles */
  &:after{
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: #eee;
    border: 5px solid #d0d0d0;
    box-shadow:
      inset 1px 1px 2px 0 #555,
      0 -73px 1px -2px #fff,
      0 48px 0 -2px #ddd,
      0 -74px 0 -1px #999,
      0 -74px 0 1px #ddd;
  }
  
  /* Hand */
  &:before{
    height: 184px;
    width: 2px;
    background: linear-gradient(to bottom, #aaa 0%, #d0d0d0 30%, #ddd 100%);
    bottom: -44px;
    left: 7px;
  }
}

/* Shadow */
.hand-sec-details{
  position: absolute;
  height: 176px;
  width: 0;
  bottom: -44px;
  left: 10px;
  z-index: -1;
  transform: rotateZ(3deg);
  box-shadow: 0 0 5px 2px rgba(0,0,0,0.3);
}

/* Minute hand */
.hand-min{
  @extend %ab-center;
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 4px 1px rgba(0,0,0,0.4);
  background: #d0d0d0;
  //transform: rotateZ(0deg);
  
  /* Arm */
  &:before{
    @extend %pseudo;
    height: 86px;
    width: 16px;
    bottom: 28px;
    left: 3px;
    background: #fff;
    border: 3px solid #d0d0d0;
    box-shadow:
      inset 1px 1px 2px 0 #999,
      0 0 4px 1px rgba(0,0,0,0.4);
  }

  /* Top of hand */
  span{  
    height: 0;
    width: 0;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: 26px solid #d0d0d0;
    position: absolute;
    bottom: 114px;
    left: 3px;    
    //filter: drop-shadow(1px 1px 2px rgba(255,0,0,1));
    
    /* Bottom of hand  */
    &:after{
      @extend %pseudo;
      height: 0;
      width: 0;
      border-right: 8px solid transparent;
      border-left: 8px solid transparent;
      border-top: 16px solid #d0d0d0;
      position: absolute;
      bottom: -128px;
      left: -8px;
    }
  }
}

/* Hour hand */
.hand-hour{
  @extend %ab-center;
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 0 0 6px 1px rgba(0,0,0,0.3);
  //transform: rotateZ(302deg);
  
  &:after,
  &:before{
    @extend %pseudo;
  }
  
  /* Arm */
  &:before{
    height: 54px;
    width: 14px;
    bottom: 24px;
    left: 6px;
    background: #fff;
    border: 3px solid #d0d0d0;
    box-shadow:
      0 0 6px 0 rgba(0,0,0,0.4),
      0 -10px 7px 0 rgba(0,0,0,0.4);
  }
  
  /* Circle, covers box-shadow of arm */
  &:after{
    background: #d0d0d0;
    height: inherit;
    width: inherit;
    border-radius: inherit;
  }
  
  /* Circle and triangle*/
  span{
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 50%;
    border: 3px solid #d0d0d0;
    bottom: 48px;
    left: -3px;
    position: absolute;
    
    /* Top triangle - BG */ 
    &:before{
      @extend %pseudo;
      border-right: 7px solid transparent;
      border-left: 7px solid transparent;
      border-bottom: 22px solid #d0d0d0;
      position: absolute;
      bottom: 27px;
      left: 6px; 
    }
    
    /* Top triangle - FG */ 
    &:after{
      @extend %pseudo;
      border-right: 3px solid transparent;
      border-left: 3px solid transparent;
      border-bottom: 10px solid #fff;
      position: absolute;
      bottom: 30px;
      left: 10px; 
    }
    
    /* Circle decor */
    .hour-decor{
      height: 16px;
      width: 3px;
      bottom: -14px;
      background: #d0d0d0;
      
      &:after,
      &:before{
        @extend %pseudo;
        width: inherit;
        height: inherit;
        background: inherit;
      }
      
      &:before{
        transform: rotateZ(60deg);
        top: -10px;
        left: 6px;
      }
      
      &:after{
        transform: rotateZ(120deg);
        top: -10px;
        left: -6px;
      }
    }
  }

}

/* Band details */
.band{
  @extend %ab-center;
  position: absolute;
  height: 430px;
  top: 0;
  width: 96px;

  /* Top */
  .band-detail-top-center{
    height: 56px;
    width: inherit;
    position: absolute;
    top: -44px;
    background: linear-gradient(180deg,
      #2C3033 0%,
      #B8B8BA 6%,
      #0D1114 10%,
      #0D1114 16%,
      #6F7376 17%,
      #DFDFDF 50%,
      #ECECEC 80%);
    box-shadow:
      inset -1px 0 1px 0px rgba(0,0,0,0.5),
      inset 1px 0 1px 0px rgba(0,0,0,0.5);
    
    &:before,
    &:after{
      @extend %pseudo;
      box-shadow:
        inset -1px 0 1px 0px rgba(0,0,0,0.5),
      inset 1px 0 1px 0px rgba(0,0,0,0.5);
      border-radius: 4px 4px 0 0;
    }
    
    &:before{
      height: 46px;
      width: inherit;
      top: -46px;
      background: linear-gradient(180deg,
      #606163 0%,
      #929397 7%,
      #D8D9DB 28%,
      #D8D9DB 78%,
      #0B0D0C 79%,  
      #0B0D0C 90%,  
      #3D4144 92%,
      #B8B8BA 98%,
      #2E3235 100%);
    }
    
    &:after{
      width: inherit;
      height: 36px;
      top: -82px;
      background: linear-gradient(180deg,
      #DFDFDF 15%,
      #393D40 38%,
      #DEDEDE 42%,  
      #B0B1B5 50%,
      #000002 51%,
      #000002 68%,
      #88898B 69%,  
      #E7E7E9 84%,
      #000002 85%,  
      #000002 100%);
    }
  }
  
  /* Bottom */
  .band-detail-bottom-center{
    height: 164px;
    width: inherit;
    position: absolute;
    bottom: -154px;    
    background: linear-gradient(180deg,
      #F7F7F7 0%,
      #575B5E 33%,
      #000000 34%,
      #000000 40%,
      #EDEDEF 40%,
      #EDEDEF 41%,
      #000000 42%,
      #202123 42%,
      #878B8C 43%,
      #000000 44%,
      #45494A 45%,
      #D9DADC 47%,
      #000000 48%,
      #000000 52%,
      #D4D5D7 53%,
      #E1E1E1 64%,
      #E1E1E1 74%,
      #9B9C9E 91%,
      #000000 92%,
      #000000 96%,
      #A7A8AA 98%,
      #222828 100%);
    box-shadow:
      inset -1px 0 1px 0px rgba(0,0,0,0.5),
      inset 1px 0 1px 0px rgba(0,0,0,0.5);
    &:before{
      @extend %pseudo;
      width: inherit;
      height: 70px;
      bottom: -70px;
      background: linear-gradient(180deg,
      #222828 0%,
      #C8C8CA 3%, 
      #050507 5%,
      #050507 20%, 
      #C8C9CB 23%,
      #C8C9CB 35%, 
      #75797C 80%,  
      #010103 81%,  
      #010103 90%, 
      #ADAEB0 92%,  
      #060709 94%,
      #666769 95%,
      #747476 97%,
      #222828 100%);
    box-shadow:
      inset -1px 0 1px 0px rgba(0,0,0,0.5),
      inset 1px 0 1px 0px rgba(0,0,0,0.5);
      
    }
    
    &:after{
      @extend %pseudo;
      width: inherit;
      height: 38px;
      bottom: -108px;
      background: linear-gradient(180deg,
      #C4C5C9 0%,
      #C5C5C5 15%,
      #212528 17%,
      #AFB0B2 38%, 
      #D7D7D9 56%,
      #D7D7D9 79%, 
      #75797C 83%,  
      #010103 85%,  
      #010103 90%, 
      #E0E1E3 92%,  
      #949899 94%,
      #949899 95%,
      #E0E1E3 97%,
      #222828 100%);
    box-shadow:
      inset -1px 0 1px 0px rgba(0,0,0,0.5),
      inset 1px 0 1px 0px rgba(0,0,0,0.5);
    }
  }
  
  .band-detail-top-brushed{
    position: absolute;
    width: 221px;
    left: -63px;
    top: 20px;
    height: 55px;
    z-index: -1;
    background-image:
      /*repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.05), 
      rgba(0,0,0,0.1) 1px,
      transparent 1px,
      transparent 3px,  
      rgba(0,0,0,0.1) 3px,
      rgba(0,0,0,0.05) 4px,
      transparent 4px, 
      transparent 6px),*/
      
      linear-gradient(180deg,
        #5C6061 0%,
        #808388 1%,
        #808388 3%,
        #252B2B 4%,
        #787C7D 9%,
        #262A2D 11%,
        #5C4D36 12%, 
        #86878B 13%,
        #E2E2E2 28%,
        #E5E5E5 58%,
        #8A8B8F 90%);
      box-shadow:
        inset -1px 0 2px 0 rgba(0,0,0,0.8),
        inset 1px 0 2px 0 rgba(0,0,0,0.8);
    
    &:before,
    &:after{
      @extend %pseudo;
      box-shadow:
        inset -1px 0 1px 0 rgba(0,0,0,0.7),
        inset 1px 0 1px 0 rgba(0,0,0,0.7);
    }
    
    &:before{
      top: -64px;
      height: 64px;
      width: inherit;
      left: 0;
      
      border-radius: 7% / 100% 100% 0% 0%;      
      //clip-path: polygon(6% 0%, 94% 0%, 100% 100%, 0% 100%);
      
      background-image:
        /*repeating-linear-gradient(
        90deg,
        rgba(0,0,0,0.05), 
        rgba(0,0,0,0.1) 1px,
        transparent 1px,
        transparent 3px,  
        rgba(0,0,0,0.1) 3px,
        rgba(0,0,0,0.05) 4px,
        transparent 4px, 
        transparent 6px),*/        
        
        linear-gradient(180deg,
        #101616 0%,
        #58595B 6%,
        #9A9B9F 16%,
        #D2D2D2 34%,
        #D2D2D2 78%,
        #75767A 88%,
        #9FA0A4 97%,
        #5C6061 100%);
    }
    
    &:after{
      top: -100px;
      height: 36px;
      width: 195px;
      left: 13px;
      background-image: 

      /*repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.05), 
      rgba(0,0,0,0.1) 1px,
      transparent 1px,
      transparent 3px,  
      rgba(0,0,0,0.1) 3px,
      rgba(0,0,0,0.05) 4px,
      transparent 4px, 
      transparent 6px),*/

      linear-gradient(180deg,
        #DFDFDF 8%, 
        #C9C9CB 10%,
        #4B4F52 46%,
        #2F3334 58%,
        #D2D2D2 64%,
        #D2D2D2 74%,
        #9FA0A4 82%,
        #5C5D5F 92%,
        #B7B8BA 99%,
        #808183 100%);
      
        border-radius: 6% / 100% 100% 0 0;

    }

  }

  .band-detail-bottom-brushed:nth-child(1){

    position: absolute;
    left: -63px;
    bottom: 111px;
    width: 221px;
    height: 74px;
    z-index: -1;
    background: linear-gradient(180deg,
      #C8C8CA 10%,
      #e7e7e7 30%,
      #D7D7D7 40%,
      #B2B3B5 60%,
      #3B3F40 76%,
      #151B1B 78%,
      #212727 80%,
      #313639 84%,
      #8C9093 86%,
      #2A3030 88%,
      #0F1515 90%,
      #565A5D 94%,
      #7F8384 96%,
      #7F8384 98%,
      #5C5D5F 100%);
    box-shadow:
        inset -1px 0 1px 0 rgba(0,0,0,0.4),
        inset 1px 0 1px 0 rgba(0,0,0,0.4);
    
    &:before,
    &:after{
      @extend %pseudo;
       box-shadow:
        inset -1px 0 1px 0 rgba(255,255,255,0.4),
        inset 1px 0 1px 0 rgba(255,255,255,0.4);
    }
    &:before{
      bottom: -86px;
      left: 0;
      height: 86px;
      width: inherit;
      background-image: 
      linear-gradient(180deg,
        #A2A3A7 6%,
        #CACCCB 8%,
        #D3D3D5 20%,
        #D3D3D5 50%,
        #666A6B 88%,
        #262C2C 90%,
        #262C2C 92%,
        #747879 94%,
        #141819 96%,
        #4F5354 100%);
      border-radius: 7% / 0 0 100% 100%;  
    }
    &:after{
      bottom: -162px;
      height: 76px;
      width: 195px;
      left: 13px;
      background-image: 
      linear-gradient(180deg,
        #7F8384 2%,
        #7B7B7D 5%,
        #B1B2B4 6%,
        #CFCFD1 30%,
        #C4C4C6 60%,
        #2D3132 89%,
        #3F4042 94%,
        #ECEDEF 96%,
        #C3C3C5 97%,
        #606163 99%);
      border-radius: 5% / 0 0 100% 100%;
    }
  }
  
  .band-detail-bottom-brushed:nth-child(2){
    position: absolute;
    left: -41px;
    bottom: -107px;
    width: 178px;
    height: 56px;
    z-index: -1;
    border-radius: 7% / 0 0 100% 100%;
    background-image: 
      linear-gradient(180deg,
        #9B9C9E 0%,
        #D6D7D9 12%,
        #3B3F40 18%,
        #161A1B 20%,
        #363A3B 22%,
        #393D3E 23%,
        #717274 42%,
        #D7D8DA 74%,
        #D7D8DA 81%,
        #5D6162 83%,
        #5C5D5F 86%,
        #353638 89%,
        #F4F8F9 93%,
        #000100 94%);
    
    box-shadow:
        inset -1px 0 2px 0 rgba(255,255,255,0.5),
        inset 1px 0 2px 0 rgba(255,255,255,0.5);
  }
}
              
            
!

JS

              
                // Get current date
var today = new Date();
var day = today.getDate();
/*if (day < 10) {
  day = '0' + day
}*/
var out = document.getElementById("date-num");
out.innerHTML = day;

// Time
$(document).ready(function() {
	setInterval(function(){
		getTime();
	}, 50);
	function getTime() {
		var d = new Date();
		var s = d.getSeconds() + (d.getMilliseconds()/1000);
		var m = d.getMinutes();
		var h = hour12();	
		$(".hand-sec").css("transform", "rotateZ(" + s*6 + "deg)");
		$(".hand-min").css("transform", "rotateZ(" + m*6 + "deg)");
		$(".hand-hour").css("transform", "rotateZ(" + (h*30 + m*0.5) + "deg)");
		function hour12() {
			var hour = d.getHours();
			if(hour >= 12) {
				hour = hour-12;
			}
			if(hour == 0) {
				h = 12;
			}
			return hour;
		}
	}
});
              
            
!
999px

Console