--- /dev/null
+html, body {
+ height: 100%; }
+
+body {
+ margin: 0;
+ font-family: "proxima-nova", "Helvetica Neue", sans-serif; }
+
+.button {
+ display: inline-block;
+ border: 2px solid #333333;
+ color: #333333;
+ padding: 1em 1.25em;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 3px;
+ text-decoration: none;
+ cursor: pointer;
+ width: 140px;
+ font-size: 0.8em;
+ line-height: 1.3em;
+ text-align: center; }
+
+.tether-element.tether-theme-arrows-dark .tether-content {
+ padding: 1em;
+ font-size: 1.1em; }
+ .tether-element.tether-theme-arrows-dark .tether-content .button {
+ border-color: white;
+ color: white;
+ width: 170px;
+ pointer-events: all; }
+
+.mobile-copy {
+ display: none; }
+ @media (max-width: 568px) {
+ .mobile-copy {
+ display: block; } }
+
+.button.dark {
+ background: #333333;
+ color: white; }
+
+.hero-wrap {
+ height: 100%;
+ overflow: hidden; }
+
+table.showcase {
+ height: 100%;
+ width: 100%;
+ position: relative; }
+ table.showcase:after {
+ content: "";
+ display: block;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 20px;
+ margin: auto;
+ height: 0;
+ width: 0;
+ border-width: 18px;
+ border-style: solid;
+ border-color: transparent;
+ border-top-color: rgba(0, 0, 0, 0.2); }
+ table.showcase.no-next-arrow:after {
+ display: none; }
+ table.showcase .showcase-inner {
+ margin: 40px auto 60px;
+ padding: 10px; }
+ table.showcase .showcase-inner h1 {
+ font-size: 50px;
+ text-align: center;
+ font-weight: 300; }
+ @media (max-width: 567px) {
+ table.showcase .showcase-inner h1 {
+ font-size: 40px; } }
+ table.showcase .showcase-inner h2 {
+ font-size: 24px;
+ text-align: center;
+ font-weight: 300;
+ margin: 1em 0 1em; }
+ @media (max-width: 567px) {
+ table.showcase .showcase-inner h2 {
+ font-size: 14px; } }
+ table.showcase .showcase-inner p {
+ text-align: center; }
+ table.showcase.hero {
+ text-align: center; }
+ table.showcase.hero .tether-target-demo {
+ display: -moz-inline-stack;
+ display: inline-block;
+ vertical-align: middle;
+ *vertical-align: auto;
+ zoom: 1;
+ *display: inline;
+ border: 2px dotted black;
+ margin: 5rem auto;
+ padding: 5rem; }
+ @media (max-width: 567px) {
+ table.showcase.hero .tether-target-demo {
+ padding: 1rem; } }
+ table.showcase.share {
+ background: #f3f3f3; }
+ table.showcase.projects-showcase .showcase-inner .projects-list {
+ width: 80%;
+ max-width: 1200px;
+ margin: 0 auto; }
+ table.showcase.projects-showcase .showcase-inner .projects-list .project {
+ color: inherit;
+ text-decoration: none;
+ position: relative;
+ width: 50%;
+ float: left;
+ text-align: center;
+ margin-bottom: 2rem; }
+ table.showcase.projects-showcase .showcase-inner .projects-list .os-icon {
+ width: 8rem;
+ height: 8rem;
+ margin-bottom: 1rem;
+ background-size: 100%; }
+ table.showcase.projects-showcase .showcase-inner .projects-list h1 {
+ font-size: 2.5rem; }
+ table.showcase.projects-showcase .showcase-inner .projects-list p {
+ font-size: 1.3rem; }
+ table.showcase.browser-demo {
+ background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #723362), color-stop(100%, #9d223c));
+ background-image: -webkit-linear-gradient(top left, #723362 0%, #9d223c 100%);
+ background-image: -moz-linear-gradient(top left, #723362 0%, #9d223c 100%);
+ background-image: -o-linear-gradient(top left, #723362 0%, #9d223c 100%);
+ background-image: linear-gradient(top left, #723362 0%, #9d223c 100%);
+ background-color: #9d223c;
+ position: absolute;
+ top: 100%; }
+ table.showcase.browser-demo.fixed {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1; }
+ table.showcase.browser-demo.fixed .browser-demo-inner {
+ -webkit-transition: width 2s ease-in-out, height 2s ease-in-out;
+ -moz-transition: width 2s ease-in-out, height 2s ease-in-out;
+ -o-transition: width 2s ease-in-out, height 2s ease-in-out;
+ transition: width 2s ease-in-out, height 2s ease-in-out; }
+ table.showcase.browser-demo.fixed[data-section="what"] {
+ box-shadow: 0 0 0 0; }
+ table.showcase.browser-demo.fixed[data-section="why"] .browser-demo-inner {
+ width: 70%; }
+ table.showcase.browser-demo.fixed[data-section="outro"] .showcase-inner {
+ pointer-events: all; }
+ table.showcase.browser-demo .showcase-inner {
+ pointer-events: none;
+ position: absolute;
+ left: 10%;
+ right: 40%;
+ top: 220px;
+ bottom: 120px;
+ margin: 0;
+ padding: 0; }
+ @media (max-width: 567px) {
+ table.showcase.browser-demo .showcase-inner {
+ bottom: 90px;
+ top: 180px; } }
+ table.showcase.browser-demo .browser-demo-inner {
+ height: 100%;
+ width: 100%; }
+ table.showcase.browser-demo .section-copy {
+ -webkit-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
+ -moz-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
+ -o-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
+ transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ position: absolute;
+ height: 200px;
+ color: white;
+ text-align: center;
+ width: 100%; }
+ table.showcase.browser-demo .section-copy.active {
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+ opacity: 1;
+ top: -150px; }
+ @media (max-width: 567px) {
+ table.showcase.browser-demo .section-copy.active {
+ top: -130px; } }
+ table.showcase.browser-demo .section-copy h2 {
+ font-size: 40px;
+ font-weight: bold;
+ line-height: 1;
+ margin: 25px 0 15px; }
+ @media (max-width: 567px) {
+ table.showcase.browser-demo .section-copy h2 {
+ font-size: 30px; } }
+ table.showcase.browser-demo .browser-window {
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ -ms-border-radius: 4px;
+ -o-border-radius: 4px;
+ border-radius: 4px;
+ background: white;
+ position: relative;
+ height: 100%;
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto; }
+ table.showcase.browser-demo .browser-window .browser-titlebar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ border-bottom: 1px solid #eeeeee;
+ height: 55px; }
+ table.showcase.browser-demo .browser-window .browser-titlebar .browser-dots {
+ padding: 16px; }
+ table.showcase.browser-demo .browser-window .browser-titlebar .browser-dots b {
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ -ms-border-radius: 50%;
+ -o-border-radius: 50%;
+ border-radius: 50%;
+ display: -moz-inline-stack;
+ display: inline-block;
+ vertical-align: middle;
+ *vertical-align: auto;
+ zoom: 1;
+ *display: inline;
+ width: 10px;
+ height: 10px;
+ margin-right: 7px;
+ background: rgba(0, 0, 0, 0.1); }
+ table.showcase.browser-demo .browser-window .browser-frame {
+ position: absolute;
+ top: 55px;
+ left: 0;
+ right: 0;
+ bottom: 0; }
+ table.showcase.browser-demo .browser-window .browser-frame iframe {
+ -webkit-border-radius: 0 0 4px 4px;
+ -moz-border-radius: 0 0 4px 4px;
+ -ms-border-radius: 0 0 4px 4px;
+ -o-border-radius: 0 0 4px 4px;
+ border-radius: 0 0 4px 4px;
+ border: 0;
+ width: 100%;
+ height: 100%; }
+ table.showcase.browser-demo-section .section-scroll-copy {
+ position: relative;
+ z-index: 10;
+ color: white;
+ width: 100%;
+ font-size: 22px; }
+ table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner {
+ position: absolute;
+ z-index: 10;
+ color: white;
+ right: 10%;
+ width: 23%; }
+ table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner a {
+ color: inherit; }
+ table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner .example-paragraph {
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ -ms-border-radius: 4px;
+ -o-border-radius: 4px;
+ border-radius: 4px;
+ background: black;
+ padding: 1rem; }
+
+.browser-content {
+ display: none; }
Code Review / src / app-framework-demo.git / blobdiff