mirror of
https://github.com/eugene-serb/wavelovers.git
synced 2023-09-09 23:41:16 +03:00
615 lines
13 KiB
CSS
615 lines
13 KiB
CSS
/* ------------------------------ */
|
|
/* RESET AND BASE STYLES' TUNE UP */
|
|
/* ------------------------------ */
|
|
|
|
@charset 'UTF-8';
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
|
|
|
|
*, ::after, ::before {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
/* Simple colors */
|
|
--color-white: #FFFFFF;
|
|
--color-black: #000000;
|
|
--color-milk: #F5F5F5;
|
|
--color-coal: #3C3C3C;
|
|
/* ---------------------- */
|
|
/* Palette of five colors */
|
|
--color-a: #E27396;
|
|
--color-b: #EA9AB2;
|
|
--color-c: #EFCFE3;
|
|
--color-d: #EAF2D7;
|
|
--color-e: #B3DEE2;
|
|
}
|
|
|
|
:root {
|
|
/* Base numbers */
|
|
--number-border-radius: 8px;
|
|
--number-border-size: 2px;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
/* Base colors */
|
|
--color-border: var(--color-a);
|
|
--color-background: var(--color-white);
|
|
--color-text: var(--color-coal);
|
|
--color-text-header: var(--color-coal);
|
|
--color-link: var(--color-b);
|
|
--color-link-hover: var(--color-a);
|
|
--color-selection: var(--color-b);
|
|
--color-fieldset-border: var(--color-c);
|
|
--color-table-header-background: var(--color-b);
|
|
--color-table-header-text: var(--color-white);
|
|
--color-table-item: var(--color-c);
|
|
/* Components colors */
|
|
--color-header-background: var(--color-b);
|
|
--color-header-borderline: var(--color-a);
|
|
--color-header-selection: var(--color-a);
|
|
--color-header-logo: var(--color-white);
|
|
--color-header-navigation-link: var(--color-white);
|
|
--color-header-navigation-link-hover: var(--color-white);
|
|
--color-footer-borderline: var(--color-a);
|
|
--color-footer-text: var(--color-coal);
|
|
--color-content-item-background: var(--color-milk);
|
|
--color-pattern-button: var(--color-c);
|
|
--color-pattern-text: var(--color-white);
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* Base colors */
|
|
--color-border: var(--color-a);
|
|
--color-background: var(--color-coal);
|
|
--color-text: var(--color-coal);
|
|
--color-text-header: var(--color-coal);
|
|
--color-link: var(--color-b);
|
|
--color-link-hover: var(--color-a);
|
|
--color-selection: var(--color-b);
|
|
--color-fieldset-border: var(--color-c);
|
|
--color-table-header-background: var(--color-b);
|
|
--color-table-header-text: var(--color-white);
|
|
--color-table-item: var(--color-c);
|
|
/* Components colors */
|
|
--color-header-background: var(--color-b);
|
|
--color-header-borderline: var(--color-a);
|
|
--color-header-selection: var(--color-b);
|
|
--color-header-logo: var(--color-white);
|
|
--color-header-navigation-link: var(--color-white);
|
|
--color-header-navigation-link-hover: var(--color-white);
|
|
--color-footer-borderline: var(--color-a);
|
|
--color-footer-text: var(--color-milk);
|
|
--color-content-item-background: var(--color-c);
|
|
--color-pattern-button: var(--color-milk);
|
|
--color-pattern-text: var(--color-black);
|
|
}
|
|
}
|
|
|
|
html {
|
|
font-family: 'Roboto', sans-serif;
|
|
direction: ltr;
|
|
font-size: 16px;
|
|
line-height: 1.382em;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-height: 100vh;
|
|
background: var(--color-background);
|
|
}
|
|
|
|
::selection {
|
|
background: var(--color-selection);
|
|
}
|
|
|
|
:focus {
|
|
border-bottom: 2px solid var(--color-selection);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-selection);
|
|
border-color: transparent;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--color-text-header);
|
|
font-weight: 500;
|
|
margin-block-start: 0.382em;
|
|
margin-block-end: 0.618em;
|
|
line-height: 1.382em;
|
|
}
|
|
|
|
h1 { font-size: 2em; }
|
|
h2 { font-size: 1.5em; }
|
|
h3 { font-size: 1.17em; }
|
|
h4 { font-size: 1em; }
|
|
h5 { font-size: 0.83em; }
|
|
h6 { font-size: 0.67em; }
|
|
big { font-size: larger; }
|
|
small { font-size: smaller; }
|
|
|
|
span, p, article, blockquote {
|
|
color: var(--color-text);
|
|
font-weight: 400;
|
|
}
|
|
|
|
ul {
|
|
padding: 16px;
|
|
list-style-type: circle;
|
|
}
|
|
|
|
a {
|
|
background-color: transparent;
|
|
border-bottom: 2px solid transparent;
|
|
font-weight: 500;
|
|
color: var(--color-link);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
border-bottom: 2px solid var(--color-link-hover);
|
|
color: var(--color-link-hover);
|
|
transition: all 0.5s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ----- */
|
|
/* FORMS */
|
|
/* ----- */
|
|
|
|
hr {
|
|
margin-block-start: 0.5em;
|
|
margin-block-end: 0.5em;
|
|
}
|
|
|
|
legend {
|
|
padding: 2px 4px;
|
|
text-align: left;
|
|
}
|
|
|
|
fieldset {
|
|
border: 2px solid var(--color-border-alpha);
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
}
|
|
|
|
button, input, textarea, select {
|
|
padding: 4px 8px;
|
|
border: 2px solid var(--color-link);
|
|
border-radius: var(--number-border-radius);
|
|
background: var(--color-milk);
|
|
color: var(--color-text);
|
|
font-size: 16px;
|
|
line-height: 1.382em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
button:hover, input:hover,
|
|
textarea:hover, select:hover {
|
|
border: 2px solid var(--color-link-hover);
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
option {
|
|
background: var(--color-background);
|
|
color: var(--color-text);
|
|
font-size: 16px;
|
|
line-height: 1.382em;
|
|
}
|
|
|
|
option:hover {
|
|
background-color: var(--color-selection);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
/* ------ */
|
|
/* TABLES */
|
|
/* ------ */
|
|
|
|
table, th, td {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.table_pink thead {
|
|
border-bottom: 4px solid var(--color-table-item);
|
|
}
|
|
|
|
.table_pink thead > tr {
|
|
background-color: var(--color-table-header-background);
|
|
color: var(--color-table-header-text);
|
|
}
|
|
|
|
.table_pink thead > tr > th {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.table_pink tbody > tr:nth-child(even) {
|
|
background-color: var(--color-table-item);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.table_pink tfoot {
|
|
border-top: 4px solid var(--color-table-header-background);
|
|
}
|
|
|
|
/* ------------- */
|
|
/* SERVICE RULES */
|
|
/* ------------- */
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
border: 0;
|
|
padding: 0;
|
|
white-space: nowrap;
|
|
clip-path: inset(100%);
|
|
clip: rect(0 0 0 0);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1080px;
|
|
margin: 0 auto;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
/* ----------------- */
|
|
/* COMPONENTS STYLES */
|
|
/* ----------------- */
|
|
|
|
/* ------ */
|
|
/* HEADER */
|
|
/* ------ */
|
|
|
|
.header {
|
|
border-bottom: 32px solid var(--color-header-borderline);
|
|
background: var(--color-header-background);
|
|
}
|
|
|
|
.header ::selection {
|
|
background: var(--color-header-selection);
|
|
}
|
|
|
|
.header :focus {
|
|
border-bottom: 2px solid var(--color-header-navigation-link-hover);
|
|
}
|
|
|
|
.header :focus-visible {
|
|
outline: 2px solid var(--color-header-navigation-link-hover);
|
|
border-color: transparent;
|
|
}
|
|
|
|
.header-wrapper {
|
|
padding-top: 64px;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.logo-wrapper {
|
|
text-align: center;
|
|
}
|
|
|
|
.logo-wrapper__logo {
|
|
font-size: 48px;
|
|
font-weight: 500;
|
|
color: var(--color-header-logo);
|
|
cursor: default;
|
|
}
|
|
|
|
.menu-wrapper {
|
|
margin-top: 32px;
|
|
align-self: center;
|
|
}
|
|
|
|
.navigation {
|
|
padding: 0;
|
|
list-style-type: none;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.navigation__item {
|
|
font-size: 16px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.navigation__item a {
|
|
border-color: transparent;
|
|
color: var(--color-header-navigation-link);
|
|
}
|
|
|
|
.navigation__item a:hover {
|
|
border-color: var(--color-header-navigation-link-hover);
|
|
color: var(--color-header-navigation-link-hover);
|
|
}
|
|
|
|
@media only screen and (min-width: 720px) {
|
|
.header-wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
gap: 64px;
|
|
}
|
|
|
|
.logo-wrapper {
|
|
width: 50%;
|
|
text-align: left;
|
|
}
|
|
|
|
.menu-wrapper {
|
|
width: 50%;
|
|
margin-top: 0px;
|
|
align-self: flex-end;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 1024px) {
|
|
.logo-wrapper__logo {
|
|
font-size: 64px;
|
|
}
|
|
}
|
|
|
|
/* ------ */
|
|
/* FOOTER */
|
|
/* ------ */
|
|
|
|
.footer {
|
|
border-top: 4px solid var(--color-footer-borderline);
|
|
}
|
|
|
|
.footer span {
|
|
color: var(--color-footer-text);
|
|
}
|
|
|
|
.footer-wrapper {
|
|
padding-top: 32px;
|
|
padding-bottom: 32px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
gap: 32px;
|
|
}
|
|
|
|
.created-by {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.created-by > span {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.created-by > a {
|
|
font-size: 32px;
|
|
}
|
|
|
|
/* ---- */
|
|
/* PAGE */
|
|
/* ---- */
|
|
|
|
.page {
|
|
flex-grow: 1;
|
|
margin-top: 64px;
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
/* ---- */
|
|
/* POST */
|
|
/* ---- */
|
|
|
|
.post {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.post__header {
|
|
text-align: center;
|
|
margin-block-end: 32px;
|
|
}
|
|
|
|
/* ------- */
|
|
/* CONTENT */
|
|
/* ------- */
|
|
|
|
|
|
.content {
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.content__header {
|
|
margin-top: 0;
|
|
margin-bottom: 32px;
|
|
padding-left: 16px;
|
|
border: 2px solid var(--color-content-borderline);
|
|
border-radius: var(--number-border-radius);
|
|
color: var(--color-text-header);
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.content-item {
|
|
margin-bottom: 16px;
|
|
padding: 32px;
|
|
border-radius: var(--number-border-radius);
|
|
background: var(--color-content-item-background);
|
|
}
|
|
|
|
.content-item__header {
|
|
margin-bottom: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ----------- */
|
|
/* WAVELOVERS */
|
|
/* ----------- */
|
|
|
|
.wavelovers {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
justify-content: flex-start;
|
|
gap: 16px;
|
|
}
|
|
|
|
@media only screen and (min-width: 540px) {
|
|
.wavelovers {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.message {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
@media only screen and (min-width: 540px) {
|
|
.message {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
.pattern-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 32px;
|
|
}
|
|
|
|
.pattern-list {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
gap: 32px;
|
|
}
|
|
|
|
.pattern-item {
|
|
width: 100%;
|
|
height: 48px;
|
|
padding: 8px;
|
|
border-radius: var(--number-border-radius);
|
|
background: var(--color-pattern-button);
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
gap: 16px;
|
|
align-items: center;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
cursor: default;
|
|
}
|
|
|
|
.pattern-item ::selection {
|
|
background-color: transparent;
|
|
}
|
|
|
|
@media only screen and (min-width: 540px) {
|
|
.pattern-item {
|
|
width: 200px;
|
|
}
|
|
}
|
|
|
|
.pattern-item__selected {
|
|
background: var(--color-b);
|
|
}
|
|
|
|
.pattern-item__icon{
|
|
font-size: 24px;
|
|
}
|
|
|
|
.pattern-item__name {
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
color: var(--color-pattern-text);
|
|
}
|
|
|
|
.device-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.device-list {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
gap: 16px;
|
|
}
|
|
|
|
.list-item {
|
|
max-width: 100%;
|
|
padding: 16px;
|
|
border: 4px solid var(--color-b);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.list-item__info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.list-item_selected .list-item__info span {
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.link_hash {
|
|
word-break: break-all;
|
|
}
|
|
|
|
.faq__ask {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.faq__reply {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
/* ----- */
|
|
/* PAGES */
|
|
/* ----- */
|
|
|
|
/* ------ */
|
|
/* BANNER */
|
|
/* ------ */
|
|
|
|
.banner-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
}
|
|
|
|
.banner {
|
|
margin: auto;
|
|
padding: 16px;
|
|
}
|
|
|