/* Copyright 2021 Crucial Fusion, Inc. */ body { background: #000000; background-image: url('media/cf_logo_bg.jpg'); background-attachment: fixed; background-position: 0px 41px; background-repeat: no-repeat; background-size: 100%; /* auto, cover, contain */ margin: 0; padding: 50px 0 75px 0; font-family: Arial; font-size: 16px; color: #eeeeee; } html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } .white { color: #ffffff; } /* #id (used once) vs class (used multiple times) */ #nav_bar { width: 100%; display: flex; flex-direction: row; justify-content: center; background: #303030; color: #cccccc; position: fixed; left: 0px; top: 0px; z-index: 1; border-bottom: 5px solid #9f9f9f; } .nav { cursor: default; color: #a0a0a0; font-weight: bold; text-decoration: none; margin: 0 5%; padding: 10px 0; } .nav.at { color: #e0e0e0; } .nav:hover { color: #ffffff; cursor: default; } .legal { width: 100%; position: fixed; left: 0; bottom: 0; margin: 0; background: #303030; color: #858585; font-size: 0.7em; text-align: center; border-top: 5px solid #9f9f9f; border-bottom: 1px solid #9f9f9f; padding-bottom: calc(env(safe-area-inset-bottom) * 0.6); } .legal p { line-height: 1.05em; vertical-align: middle; margin: 2px auto; } #page-wrap { width: 90%; max-width: 1000px; margin: 0 auto; text-align: left; } #cf_logo { width: 100%; margin: auto; text-align: center; } #cf_logo img { width: 100vw; min-width: 0; max-width: 1000px; } .app_header_container { display: flex; flex-direction: row; margin: 0 auto 15px auto; } .app_icon { min-width: 80px; } .app_icon img { width: 80px; } .app_name_store_container { display: flex; flex-direction: row; flex-wrap: wrap; margin: 0 0 0 0.5em; vertical-align: text-top; } .app_name { font-size: 2.0em; font-weight: bold; margin-right: 0.3em; } .app_store { } .app_store_centered { margin: auto; text-align: center; } .app_store a { cursor: default; text-decoration: none; } .app_body_container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; margin: auto; } /* Description & bulletpoints */ .app_body_details { flex: 0 1 49%; /* flex-grow flex-shrink flex-basis */ color: #bbbbbb; font-size: 1.125em; font-weight: bold; margin-bottom: 0.75em; padding-right: 1%; } div.app_body_details ul { font-weight: normal; list-style-position: outside; margin-left: -1em; } div.app_body_details li { margin-bottom: 0.45em; } /* Preview video 1200x1600 */ .app_body_preview { flex: 1 1 50%; text-align: center; } .app_body_preview video { background-color: #333333; border-color: #666666; border-style: solid; border-width: 1px; padding: 0; z-index: -1; max-width: calc(100% - 2px); max-height: 85vh; width: auto; } .app_body_preview .actual_container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; margin: auto; } .app_body_preview .actual { color: #777777; font-size: 0.7em; } .app_body_preview .actual a { color: #777777; text-decoration: none; } .empty_space { height: 1.0em; width: 100%; } /* Screenshots */ .home_ss_container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; margin: auto; } .home_ss_container img { margin: 10px; width: 100%; height: auto; border: 2px solid #444444; } .app_body_screenshot { flex: 0 1 30%; margin-top: 5px; text-align: center; } .app_body_screenshot img { width: 96%; border: 1px solid #666666; background-color: #333333; padding: 1px; } .ss_actual { width: 100%; color: #777777; font-size: 0.7em; text-align: center; } .separator_bar { background: #9f9f9f; height: 1px; width: 100%; margin: 4.0em auto; } .instruct_container { } .instruct_header { font-size: 1.5em; font-weight: bold; margin: 0 0 1.5em 0; } .instruct { font-size: 1.125em; color: #bbbbbb; margin: 0 0 2.5em 0; } .instruct_visual_container { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: calc(100% - 2px); } .instruct_visual_container img { width:43%; background-color: #333333; padding: 1px; border: 1px solid #666666; } .instruct_visual_container .arr { width: 9%; background-color: transparent; margin: 0 auto; padding: 0; border-style: none; } .privacy_anchor { display: block; position: relative; top: -80px; visibility: hidden; } .support { font-weight: bold; text-align: center; } .support a { color: #bbbbbb; font-weight: normal; cursor: default; text-decoration: none; } .about { color: #bbbbbb; font-size: 1.125em; margin: 2.0em auto 3.0em auto; max-width: 700px; text-align: left; } .pizza { color: #bbbbbb; cursor: default; font-weight: bold; text-decoration: none; } .chi_container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; margin: auto; } .chi_container img { margin: 10px; width: 40%; height: auto; } .soc_a { cursor: default; text-decoration: none; } .soc_button { width: 100%; max-width: 600px; margin: auto auto 0.4em auto; display: flex; flex-direction: row; justify-content: center; background: rgba(32, 32, 32, 0.7); color: #cccccc; font-size: 1.65em; font-weight: bold; padding: 4px; border: 1px solid #9f9f9f; transition: background-color 1.0s; } .soc_button img { min-width: 70px; width: 70px; height: 70px; } .soc_button div { line-height: 66px; vertical-align: middle; } .soc_button:hover { transition: background-color 0.15s; background-color: rgba(50, 50, 50, 1.0); } @media all and (max-height: 450px) { .nav { padding: 7px 0; } /* Move legal to bottom of page to make room for preview video */ .legal { position: relative; bottom: -75px; } .app_body_details { font-size: 0.875em; } } @media all and (max-width: 778px) { .app_body_details { flex: 0 1 100%; font-size: 0.875em; } .app_body_preview { flex: 0 1 100%; } .app_body_screenshot { flex: 0 1 50%; } .separator_bar { margin: 2.0em auto; } .instruct_header { font-size: 1.25em; } .instruct { font-size: 0.9375em; } .privacy_anchor { top: -60px; } .about { font-size: 1.0em; } } @media all and (max-width: 350px) { .app_name { font-size: 1.5em; } .support a { font-size: 0.9em; } .chi_container img { width: 90%; } } /* Copyright 2021 Crucial Fusion, Inc. */