/* ========================================================================== Reset styles ========================================================================== */ *, *:after, *:before {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {display:block;} audio, canvas, video {display:inline-block; *display:inline; *zoom:1;} audio:not([controls]) {display:none; height:0;} [hidden] {display:none;} html {line-height:1.15; font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-font-smoothing:antialiased;} html, button, input, select, textarea {} body {margin:0; font-feature-settings:"liga", "kern"; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;} a:active, a:hover, a:focus {outline:0;} hr {box-sizing:content-box; height:0; overflow:visible;} pre {font-family:monospace, monospace; font-size:1em;} a {background-color:transparent; -webkit-text-decoration-skip:objects;} abbr[title] {border-bottom:none; text-decoration:underline; text-decoration:underline dotted;} b, strong {font-weight:inherit; font-weight:bolder;} code, kbd, samp {font-family:monospace, monospace; font-size:1em;} dfn {font-style:italic;} mark {background-color:#ff0; color:#000;} small {font-size:80%;} sub, sup {font-size:75%; line-height:0; position:relative; vertical-align:baseline;} sub {bottom:-0.25em;} sup {top:-0.5em;} dl, menu, ol, ul, dd {margin:0; padding:0; list-style:none; list-style-image:none;} audio, video {display:inline-block;} audio:not([controls]) {display:none; height:0;} img {border-style:none;} svg:not(:root) {overflow:hidden;} img {border:0; -ms-interpolation-mode:bicubic;} figure {margin:0;} form {margin:0; /*font-size:0;*/} button, input, optgroup, select, textarea {font-family:sans-serif; font-size:100%; line-height:1.15; margin:0;} button, input {overflow:visible;} button, select {text-transform:none;} button, html [type="button"], [type="reset"], [type="submit"] {-webkit-appearance:button;} button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style:none; padding:0;} button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline:1px dotted ButtonText;} fieldset {padding:0.35em 0.75em 0.625em;} legend {box-sizing:border-box; color:inherit; display:table; max-width:100%; padding:0; white-space:normal;} progress {display:inline-block; vertical-align:baseline;} textarea {overflow:auto;} [type="checkbox"], [type="radio"] {box-sizing:border-box; padding:0;} [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height:auto;} [type="search"] {-webkit-appearance:textfield; outline-offset:-2px;} [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {-webkit-appearance:none;} ::-webkit-file-upload-button {-webkit-appearance:button; font:inherit;} details, menu {display:block;} summary {display:list-item;} canvas {display:inline-block;} template {display:none;} table {border-collapse:collapse; border-spacing:0;} [hidden] {display:none;} /* ========================================================================== FONTS ========================================================================== */ /* ========================================================================== Base styles ========================================================================== */ * {-webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-focus-ring-color:rgba(0,0,0,0); -webkit-text-size-adjust:none;} html, button, input, select, textarea {} html, body {width:100%; height:100%;} html {} body {background:#F9F9F9; color:black; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;} ::-moz-selection {background:rgba(0,0,0,.2); text-shadow:none;} ::selection {background:rgba(0,0,0,.2); text-shadow:none;} hr {display:block; height:1px; border:0; background:rgba(0,0,0,.1); -webkit-box-shadow:0 1px 0 white; -moz-box-shadow:0 1px 0 white; box-shadow:0 1px 0 white; margin:25px 0; padding:0;} img {vertical-align:middle;} fieldset {border:0; margin:0; padding:0;} textarea {resize:vertical;} h1, h2, h3, h4, h5, h6 {margin:0; padding:0; font-weight:900;} h1 {} h2 {} h3 {} p {font-size:14px; line-height:24px; margin:0; font-weight:normal;} b, strong {font-weight:normal;} i {font-style:normal;} ins {text-decoration:none;} a {-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease;} a, a:active, a:visited {text-decoration:none;} a:hover {} /* ========================================================================== CUSTOM STYLES ========================================================================== */ .layout-fixed {margin:0 auto; max-width:950px; border-left:20px solid transparent; border-right:20px solid transparent;} .container {/*background:rgba(255,0,0,.2);*/ min-height:100%; display:flex; flex-direction:column; justify-content:flex-start; align-items:center;} /* Page header */ .header {/*background:rgba(255,255,0,.2);*/ padding:4.0vh 0 2.0vh 0; width:100%; display:flex; flex-direction:row; justify-content:flex-start; align-items:flex-start;} /* Logo */ .logo {width:14.0vh; height:3.3vh; fill:black; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease;} /* Error data*/ .errordata {/*background:rgba(0,0,255,.2);*/ width:100%; /*height:100%; min-height:100%;*/ display:flex; flex-grow:1; flex-direction:column; justify-content:center; align-items:center; text-align:center;} .error__title {padding-bottom:1vh; font-size:calc( (100vw - 460px)/(950 - 460) * (30 - 21) + 21px); line-height:calc( (100vw - 460px)/(950 - 460) * (34 - 26) + 26px);} .error__text {padding:0 20vh; font-size:calc( (100vw - 460px)/(950 - 460) * (14 - 12) + 12px); line-height:calc( (100vw - 460px)/(950 - 460) * (18 - 14) + 14px);} /* Spinner */ .spinner {/*background:rgba(0,0,255,.2);*/ width:100%; /*height:100%; min-height:100%;*/ display:flex; flex-grow:1; flex-direction:column; justify-content:center; align-items:center;} .spinner__item {width:35px; height:35px; display:inline-block; border-radius:50%; border:4px solid transparent; border-color:#C7C7C7; border-bottom-color:transparent; animation:rotateSpinner .7s linear infinite;} @-webkit-keyframes rotateSpinner { from { -webkit-transform:rotate(0); transform:rotate(0); } to { -webkit-transform:rotate(360deg); transform:rotate(360deg);} } @keyframes rotateSpinner { from { -webkit-transform:rotate(0); transform:rotate(0); } to { -webkit-transform:rotate(360deg); transform:rotate(360deg);} } /* Page content */ .content {/*background:rgba(0,0,255,.2);*/ width:100%; /*height:100%; min-height:100%;*/ display:flex; flex-grow:1; flex-direction:column; justify-content:center; align-items:center;} /* Metadata */ .metadata {/*background:rgba(0,255,255,.2);*/ width:100%; /*height:100%;*/ display:flex; flex-grow:1; flex-direction:column; justify-content:center; align-items:center;} /* Metadata type */ .metadata__type {/*background:rgba(255,0,255,.2);*/ width:100%; display:flex; flex-shrink:1; justify-content:center; align-items:center; text-transform:uppercase; letter-spacing:.1vh; font-size:calc( (100vw - 460px)/(950 - 460) * (12 - 10) + 10px); line-height:calc( (100vw - 460px)/(950 - 460) * (14 - 12) + 12px); font-weight:900; opacity:.35;} /* Metadata cover */ .metadata__cover {/*background:rgba(0,255,255,.2);*/ width:100%; margin:1.0vh 0 2.0vh 0; position:relative; display:flex; flex-shrink:1; justify-content:center; align-items:center;} .metadata__cover-layout {width:45vh; height:45vh; overflow:hidden; position:relative; z-index:1;/* direction:rtl;*/ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:stretch; box-shadow:0 10px 20px rgba(0,0,0,.1); border-radius:1.4vh; background-image:url('data:image/svg+xml;charset=UTF-8,%3Csvg%20height%3D%221000%22%20viewBox%3D%220%200%201000%201000%22%20width%3D%221000%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m0%20.003h1000v999.997h-1000z%22%20fill%3D%22%23fff%22/%3E%3Cpath%20d%3D%22m424.966292%20611.855651c13.186574%200%2023.876405-10.710556%2023.876405-23.922697s-10.689831-23.922697-23.876405-23.922697-23.876404%2010.710556-23.876404%2023.922697%2010.68983%2023.922697%2023.876404%2023.922697zm0%2028.144349c-28.700191%200-51.966292-23.311211-51.966292-52.067046%200-28.755836%2023.266101-52.067046%2051.966292-52.067046s51.966292%2023.31121%2051.966292%2052.067046c0%2028.755835-23.266101%2052.067046-51.966292%2052.067046zm146.067416-70.360873c13.186574%200%2023.876404-10.710556%2023.876404-23.922697s-10.68983-23.922697-23.876404-23.922697-23.876405%2010.710556-23.876405%2023.922697%2010.689831%2023.922697%2023.876405%2023.922697zm0%2028.144349c-28.700191%200-51.966292-23.31121-51.966292-52.067046%200-28.755835%2023.266101-52.067046%2051.966292-52.067046s51.966292%2023.311211%2051.966292%2052.067046c0%2028.755836-23.266101%2052.067046-51.966292%2052.067046zm-94.101124-7.96083h-28.089887v-165.544252l174.157303-63.278394v186.364885h-28.089888v-146.220911l-117.977528%2042.866009z%22%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20opacity%3D%22.2%22/%3E%3C/g%3E%3C/svg%3E'); background-repeat:no-repeat; background-position:50% 50%; background-size:cover;} .metadata__cover-layout__image {display:none; flex-grow:1; flex-shrink:0; flex-basis:50%; min-height:50%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;} .metadata__cover-clone {opacity:0; position:absolute; top:0; left:0; right:0; bottom:0; margin:0 auto; width:100%; height:100%; display:flex; justify-content:center; align-items:center; -webkit-transition:opacity 0.3s ease; -moz-transition:opacity 0.3s ease; transition:opacity 0.3s ease;} .showClone .metadata__cover-clone {opacity:1;} .metadata__cover-layout_shadow {overflow:visible; filter:blur(30px); -webkit-transform:translateY(1.5vh); transform:translateY(1.5vh); opacity:.85; z-index:0} .metadata__cover-layout_background {overflow:visible; position:fixed; top:0; left:0; z-index:-1; width:100%; filter:blur(150px) brightness(1.5); -webkit-transform:translateY(-20%); transform:translateY(-20%); opacity:.3;} /* Metadata title */ .metadata__title {width:100%; position:relative; display:flex; flex-shrink:1; justify-content:center; align-items:center; text-align:center; padding-bottom:0.5vh; font-size:calc( (100vw - 460px)/(950 - 460) * (30 - 21) + 21px); line-height:calc( (100vw - 460px)/(950 - 460) * (36 - 26) + 26px); font-weight:900;} .metadata__truncated {display:block; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 2.0vh;} /* Metadata subtitle*/ .metadata__subtitle {/*background:rgba(255,0,0,.2);*/ width:100%; position:relative; display:flex; flex-shrink:1; justify-content:center; align-items:center; text-align:center; font-size:calc( (100vw - 460px)/(950 - 460) * (18 - 14) + 14px); line-height:calc( (100vw - 460px)/(950 - 460) * (30 - 25) + 25px); opacity:.5;} /* Action list */ .actions {/*background:red;*/ width:100%; display:flex; flex-shrink:1; justify-content:center; align-items:center; padding:2.0vh 0;} .actions-list {margin:1.0vh 0; padding:0; width:100%; display:flex; flex-direction:row; flex-grow:1; justify-content:center; align-items:center;} .action-item {display:none; margin:0 1.0vh;} /* Main container for buttons */ .button {display:block; position:relative; cursor:pointer; border:0; border-radius:.7vh; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease;} /* Default big button */ .button_default {background:#FF428D; color:white; padding:0 5.0vh; font-size:calc( (100vw - 460px)/(950 - 460) * (15 - 13) + 13px); line-height:calc( (100vw - 460px)/(950 - 460) * (55 - 44) + 44px); font-weight:600; white-space:nowrap;} .button_default:hover {-webkit-transform:scale(1.02) translateY(-.5vh); transform:scale(1.02) translateY(-.5vh); box-shadow:0 4px 15px rgba(0,0,0,.1), 0 20px 40px rgba(255,66,141,.2);} .button_default:active {-webkit-transform:scale(.98); transform:scale(.98); box-shadow:0 2px 10px rgba(0,0,0,.1), 0 10px 20px rgba(255,66,141,.2);} [data-os='ios'] .action-item__button, [data-os='android'] .action-item__button {display:block;} /* Default badge */ .button_badge {background:black; width:calc( (100vw - 460px)/(950 - 460) * (190 - 140) + 140px); height:calc( (100vw - 460px)/(950 - 460) * (55 - 44) + 44px); display:flex; justify-content:center; align-items:center;} .button_badge:hover {-webkit-transform:scale(1.02) translateY(-.5vh); transform:scale(1.02) translateY(-.5vh); box-shadow:0 4px 15px rgba(0,0,0,.1), 0 20px 40px rgba(0,0,0,.05);} .button_badge:active {-webkit-transform:scale(.98); transform:scale(.98); box-shadow:0 2px 10px rgba(0,0,0,.1), 0 10px 20px rgba(0,0,0,.05);} .button_badge-img {fill:white; width:100%; height:65%} [data-os='unknown'] .action-item__badge {display:block;} .footer {/*background:rgba(0,255,0,.2);*/ padding:3.0vh 0 2.0vh 0; width:100%; display:flex; flex-direction:row; justify-content:flex-start; align-items:flex-end; font-size:calc( (100vw - 460px)/(950 - 460) * (11 - 9) + 9px); opacity:.3;} /* ========================================================================== HELPERS ========================================================================== */ /* Hide visually and from screen readers */ .hidden {display:none !important;} /* Hide only visually, but have it available for screen readers */ .visuallyhidden {border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;} /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto;} /* Hide visually and from screen readers, but maintain layout */ .invisible {visibility:hidden;} /* Clearfix: contain floats */ .clearfix:before, .clearfix:after {content:" "; display:table;} .clearfix:after {clear:both;} /* ——————————————————————————————————————————————————————————————— Media Queries for Responsive Design. ——————————————————————————————————————————————————————————————— */ @media (min-width: 950px) { .error__title {font-size:30px; line-height:34px;} .error__text {font-size:14px; line-height:18px;} .metadata__type {font-size:12px; line-height:14px;} .metadata__title {font-size:30px; line-height:34px;} .metadata__subtitle {font-size:18px; line-height:30px;} .button_default {font-size:15px; line-height:55px;} .button_badge {width:190px; height:55px;} .footer {font-size:11px;} } @media (max-width: 460px) { .error__title {font-size:21px; line-height:26px;} .error__text {font-size:12px; line-height:14px; padding:0 7vh;} .metadata__type {font-size:10px; line-height:12px;} .metadata__title {font-size:21px; line-height:26px;} .metadata__subtitle {font-size:14px; line-height:18px;} .button_default {font-size:13px; line-height:44px;} .button_badge {width:140px; height:44px;} .footer {font-size:9px;} .metadata__cover-layout_background {filter:blur(50px) brightness(1.5);} }