afm-client/bower_components/tether/docs/welcome/css/welcome.css

   1 html, body {
   2   height: 100%; }
   3
   4 body {
   5   margin: 0;
   6   font-family: "proxima-nova", "Helvetica Neue", sans-serif; }
   7
   8 .button {
   9   display: inline-block;
  10   border: 2px solid #333333;
  11   color: #333333;
  12   padding: 1em 1.25em;
  13   font-weight: 500;
  14   text-transform: uppercase;
  15   letter-spacing: 3px;
  16   text-decoration: none;
  17   cursor: pointer;
  18   width: 140px;
  19   font-size: 0.8em;
  20   line-height: 1.3em;
  21   text-align: center; }
  22
  23 .tether-element.tether-theme-arrows-dark .tether-content {
  24   padding: 1em;
  25   font-size: 1.1em; }
  26   .tether-element.tether-theme-arrows-dark .tether-content .button {
  27     border-color: white;
  28     color: white;
  29     width: 170px;
  30     pointer-events: all; }
  31
  32 .mobile-copy {
  33   display: none; }
  34   @media (max-width: 568px) {
  35     .mobile-copy {
  36       display: block; } }
  37
  38 .button.dark {
  39   background: #333333;
  40   color: white; }
  41
  42 .hero-wrap {
  43   height: 100%;
  44   overflow: hidden; }
  45
  46 table.showcase {
  47   height: 100%;
  48   width: 100%;
  49   position: relative; }
  50   table.showcase:after {
  51     content: "";
  52     display: block;
  53     position: absolute;
  54     left: 0;
  55     right: 0;
  56     bottom: 20px;
  57     margin: auto;
  58     height: 0;
  59     width: 0;
  60     border-width: 18px;
  61     border-style: solid;
  62     border-color: transparent;
  63     border-top-color: rgba(0, 0, 0, 0.2); }
  64   table.showcase.no-next-arrow:after {
  65     display: none; }
  66   table.showcase .showcase-inner {
  67     margin: 40px auto 60px;
  68     padding: 10px; }
  69     table.showcase .showcase-inner h1 {
  70       font-size: 50px;
  71       text-align: center;
  72       font-weight: 300; }
  73       @media (max-width: 567px) {
  74         table.showcase .showcase-inner h1 {
  75           font-size: 40px; } }
  76     table.showcase .showcase-inner h2 {
  77       font-size: 24px;
  78       text-align: center;
  79       font-weight: 300;
  80       margin: 1em 0 1em; }
  81       @media (max-width: 567px) {
  82         table.showcase .showcase-inner h2 {
  83           font-size: 14px; } }
  84     table.showcase .showcase-inner p {
  85       text-align: center; }
  86   table.showcase.hero {
  87     text-align: center; }
  88     table.showcase.hero .tether-target-demo {
  89       display: -moz-inline-stack;
  90       display: inline-block;
  91       vertical-align: middle;
  92       *vertical-align: auto;
  93       zoom: 1;
  94       *display: inline;
  95       border: 2px dotted black;
  96       margin: 5rem auto;
  97       padding: 5rem; }
  98       @media (max-width: 567px) {
  99         table.showcase.hero .tether-target-demo {
 100           padding: 1rem; } }
 101   table.showcase.share {
 102     background: #f3f3f3; }
 103   table.showcase.projects-showcase .showcase-inner .projects-list {
 104     width: 80%;
 105     max-width: 1200px;
 106     margin: 0 auto; }
 107     table.showcase.projects-showcase .showcase-inner .projects-list .project {
 108       color: inherit;
 109       text-decoration: none;
 110       position: relative;
 111       width: 50%;
 112       float: left;
 113       text-align: center;
 114       margin-bottom: 2rem; }
 115     table.showcase.projects-showcase .showcase-inner .projects-list .os-icon {
 116       width: 8rem;
 117       height: 8rem;
 118       margin-bottom: 1rem;
 119       background-size: 100%; }
 120     table.showcase.projects-showcase .showcase-inner .projects-list h1 {
 121       font-size: 2.5rem; }
 122     table.showcase.projects-showcase .showcase-inner .projects-list p {
 123       font-size: 1.3rem; }
 124   table.showcase.browser-demo {
 125     background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #723362), color-stop(100%, #9d223c));
 126     background-image: -webkit-linear-gradient(top left, #723362 0%, #9d223c 100%);
 127     background-image: -moz-linear-gradient(top left, #723362 0%, #9d223c 100%);
 128     background-image: -o-linear-gradient(top left, #723362 0%, #9d223c 100%);
 129     background-image: linear-gradient(top left, #723362 0%, #9d223c 100%);
 130     background-color: #9d223c;
 131     position: absolute;
 132     top: 100%; }
 133     table.showcase.browser-demo.fixed {
 134       position: fixed;
 135       top: 0;
 136       bottom: 0;
 137       left: 0;
 138       right: 0;
 139       z-index: 1; }
 140       table.showcase.browser-demo.fixed .browser-demo-inner {
 141         -webkit-transition: width 2s ease-in-out, height 2s ease-in-out;
 142         -moz-transition: width 2s ease-in-out, height 2s ease-in-out;
 143         -o-transition: width 2s ease-in-out, height 2s ease-in-out;
 144         transition: width 2s ease-in-out, height 2s ease-in-out; }
 145       table.showcase.browser-demo.fixed[data-section="what"] {
 146         box-shadow: 0 0 0 0; }
 147       table.showcase.browser-demo.fixed[data-section="why"] .browser-demo-inner {
 148         width: 70%; }
 149       table.showcase.browser-demo.fixed[data-section="outro"] .showcase-inner {
 150         pointer-events: all; }
 151     table.showcase.browser-demo .showcase-inner {
 152       pointer-events: none;
 153       position: absolute;
 154       left: 10%;
 155       right: 40%;
 156       top: 220px;
 157       bottom: 120px;
 158       margin: 0;
 159       padding: 0; }
 160       @media (max-width: 567px) {
 161         table.showcase.browser-demo .showcase-inner {
 162           bottom: 90px;
 163           top: 180px; } }
 164     table.showcase.browser-demo .browser-demo-inner {
 165       height: 100%;
 166       width: 100%; }
 167     table.showcase.browser-demo .section-copy {
 168       -webkit-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
 169       -moz-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
 170       -o-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
 171       transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
 172       filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 173       opacity: 0;
 174       position: absolute;
 175       top: 0;
 176       position: absolute;
 177       height: 200px;
 178       color: white;
 179       text-align: center;
 180       width: 100%; }
 181       table.showcase.browser-demo .section-copy.active {
 182         filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 183         opacity: 1;
 184         top: -150px; }
 185         @media (max-width: 567px) {
 186           table.showcase.browser-demo .section-copy.active {
 187             top: -130px; } }
 188       table.showcase.browser-demo .section-copy h2 {
 189         font-size: 40px;
 190         font-weight: bold;
 191         line-height: 1;
 192         margin: 25px 0 15px; }
 193         @media (max-width: 567px) {
 194           table.showcase.browser-demo .section-copy h2 {
 195             font-size: 30px; } }
 196     table.showcase.browser-demo .browser-window {
 197       -webkit-border-radius: 4px;
 198       -moz-border-radius: 4px;
 199       -ms-border-radius: 4px;
 200       -o-border-radius: 4px;
 201       border-radius: 4px;
 202       background: white;
 203       position: relative;
 204       height: 100%;
 205       width: 100%;
 206       max-width: 1200px;
 207       margin: 0 auto; }
 208       table.showcase.browser-demo .browser-window .browser-titlebar {
 209         position: absolute;
 210         top: 0;
 211         left: 0;
 212         right: 0;
 213         border-bottom: 1px solid #eeeeee;
 214         height: 55px; }
 215         table.showcase.browser-demo .browser-window .browser-titlebar .browser-dots {
 216           padding: 16px; }
 217           table.showcase.browser-demo .browser-window .browser-titlebar .browser-dots b {
 218             -webkit-border-radius: 50%;
 219             -moz-border-radius: 50%;
 220             -ms-border-radius: 50%;
 221             -o-border-radius: 50%;
 222             border-radius: 50%;
 223             display: -moz-inline-stack;
 224             display: inline-block;
 225             vertical-align: middle;
 226             *vertical-align: auto;
 227             zoom: 1;
 228             *display: inline;
 229             width: 10px;
 230             height: 10px;
 231             margin-right: 7px;
 232             background: rgba(0, 0, 0, 0.1); }
 233       table.showcase.browser-demo .browser-window .browser-frame {
 234         position: absolute;
 235         top: 55px;
 236         left: 0;
 237         right: 0;
 238         bottom: 0; }
 239         table.showcase.browser-demo .browser-window .browser-frame iframe {
 240           -webkit-border-radius: 0 0 4px 4px;
 241           -moz-border-radius: 0 0 4px 4px;
 242           -ms-border-radius: 0 0 4px 4px;
 243           -o-border-radius: 0 0 4px 4px;
 244           border-radius: 0 0 4px 4px;
 245           border: 0;
 246           width: 100%;
 247           height: 100%; }
 248   table.showcase.browser-demo-section .section-scroll-copy {
 249     position: relative;
 250     z-index: 10;
 251     color: white;
 252     width: 100%;
 253     font-size: 22px; }
 254     table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner {
 255       position: absolute;
 256       z-index: 10;
 257       color: white;
 258       right: 10%;
 259       width: 23%; }
 260       table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner a {
 261         color: inherit; }
 262       table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner .example-paragraph {
 263         -webkit-border-radius: 4px;
 264         -moz-border-radius: 4px;
 265         -ms-border-radius: 4px;
 266         -o-border-radius: 4px;
 267         border-radius: 4px;
 268         background: black;
 269         padding: 1rem; }
 270
 271 .browser-content {
 272   display: none; }