Rotating Text Navigation (OK)

by Ken Watanabe

HTML

<figcaption class="left">
    DESIGN &amp; DIRECTION &#8196; &#x2e3b; &#8196; Brand &#8196; Motion &#8196; Digital &#8196; &#x2e3b; &#8196; DESIGN &amp; DIRECTION &#8196; &#x2e3b; &#8196; Brand &#8196; Motion &#8196; Digital &#8196; &#x2e3b; &#8196; DESIGN &amp; DIRECTION &#8196; &#x2e3b; &#8196; Brand &#8196; Motion &#8196; Digital &#8196; &#x2e3b; &#8196;
</figcaption>


<figcaption class="right">
    DESIGN &amp; DIRECTION &#8196; &#x2e3b; &#8196; Brand &#8196; Motion &#8196; Digital &#8196; &#x2e3b; &#8196; DESIGN &amp; DIRECTION &#8196; &#x2e3b; &#8196; Brand &#8196; Motion &#8196; Digital &#8196; &#x2e3b; &#8196; DESIGN &amp; DIRECTION &#8196; &#x2e3b; &#8196; Brand &#8196; Motion &#8196; Digital &#8196; &#x2e3b; &#8196;
</figcaption>

CSS

html {
     margin: 0; 
     padding: 0; 
     border: 0; 
     font-size: 16px; 
     font: inherit; 
     vertical-align: baseline; 
     text-decoration: none; 
}
body { font-family: "Helvetica-Neue", Arial, Helvetica; font-weight: 200; font-style: normal; font-size: calc(16px + 6 * ((100vw - 320px) / 680)); line-height: 1.4; letter-spacing: 0.02em; }

figcaption.right a {
    margin-left:10px;
    margin-right:10px;
}
figcaption {
    font-size:100%;
    margin:0;
    position:fixed;
    font-size: calc(16px + 5 * ((100vw - 320px) / 680)); 
    letter-spacing: 0.02em;
    overflow: hidden; 
    white-space: nowrap; 
    padding: 9px 0 9px 0; 
    z-index: 1000;
    background:black;
    color:white;
}
.left {
    -webkit-transform-origin: 50%;
    -moz-transform-origin: 50%;
    -ms-transform-origin: 50%;
    -o-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
    -moz-transform: translate(-50%, -50%) rotate(-90deg);
    -ms-transform: translate(-50%, -50%) rotate(-90deg);
    -o-transform: translate(-50%, -50%) rotate(-90deg);
    transform: translate(-50%, -50%) rotate(-90deg);
    top: 50%;
    left: 30px;
}
.right {
    -webkit-transform-origin: 50%;
    -moz-transform-origin: 50%;
    -ms-transform-origin: 50%;
    -o-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transform: translate(50%, -50%) rotate(90deg);
    -moz-transform: translate(50%, -50%) rotate(90deg);
    -ms-transform: translate(50%, -50%) rotate(90deg);
    -o-transform: translate(50%, -50%) rotate(90deg);
    transform: translate(50%, -50%) rotate(90deg);
    top: 50%;
    right: 30px;
    border: 1px solid #212121;
}
/* h2.right a:before, h2.right a:after {  } */
a, a:hover, a:active, a:visited {
    text-decoration:none;
    color: #212121;
    padding-bottom: 1px;
}
a:hover {
    border-bottom: 1px solid #212121;
}
a {
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: .2s...