Initial commit: Atomaste website
This commit is contained in:
@@ -0,0 +1,42 @@
|
||||
.cw-dashboard {
|
||||
.faq-item {
|
||||
padding: 24px 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.faq-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
h2,svg {
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faq-description {
|
||||
margin-top: 8px;
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary-color;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
.cw-dashboard {
|
||||
padding: 0 50px 24px;
|
||||
margin-left: -20px;
|
||||
font-size: 16px;
|
||||
color: $font-color;
|
||||
background: $white-color;
|
||||
font-family: $fontFamily;
|
||||
line-height: 1.5;
|
||||
|
||||
@media screen and (max-width: 1441px) {
|
||||
padding: 0 16px 24px;
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.cw-button-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding: 10px 12px;
|
||||
border-radius: 100px;
|
||||
border: 1px solid $primary-color;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.outline {
|
||||
background: transparent;
|
||||
color: $primary-color;
|
||||
|
||||
&:hover {
|
||||
background: $primary-color;
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary-btn {
|
||||
background: $primary-color;
|
||||
color: $white-color;
|
||||
|
||||
&:hover:not(.deactivate) {
|
||||
background: transparent;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
&.long-button {
|
||||
width: -webkit-fill-available;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&.deactivate:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.freepro{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[disabled] {
|
||||
opacity: 0.7;
|
||||
cursor: no-drop;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,336 @@
|
||||
.customizer-settings {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
|
||||
.cw-customizer {
|
||||
width: 70%;
|
||||
|
||||
.cw-settings {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cw-sidebar {
|
||||
width: 30%;
|
||||
|
||||
.cw-sidebar-list {
|
||||
background: $white-color;
|
||||
padding: 24px 16px;
|
||||
border-radius: 16px;
|
||||
|
||||
.cw-sidebarbody {
|
||||
padding-bottom: 32px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding-top: 30px;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.cw-button {
|
||||
.cw-button-btn {
|
||||
svg {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
path {
|
||||
stroke: $white-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cw-card {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
|
||||
&.two-col {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cw-cardbody {
|
||||
background: $white-color;
|
||||
padding: 24px 8px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
|
||||
&.cw-two-col {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 24px 14px 24px 24px;
|
||||
}
|
||||
|
||||
.cw-icon {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.cw-heading {
|
||||
font-size: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
}
|
||||
|
||||
.cw-procard {
|
||||
.cw-pro-heading {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:is(.cw-button, .cw-button) {
|
||||
font-size: 14px;
|
||||
|
||||
:is(.cw-btn, .cw-button-btn) {
|
||||
svg {
|
||||
margin-left: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.primary-btn {
|
||||
svg {
|
||||
path {
|
||||
stroke: $white-color;
|
||||
|
||||
&:hover {
|
||||
stroke: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
path {
|
||||
stroke: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:is(.outline-btn, .cw-btn) {
|
||||
svg {
|
||||
path {
|
||||
stroke: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cw-btn {
|
||||
color: $font-color;
|
||||
transition: color 0.3s;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.cw-card {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
|
||||
&.three-col {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
text-align: center;
|
||||
|
||||
.cw-text-wrap {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&.two-col {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
text-align: left;
|
||||
|
||||
.cw-cardbody {
|
||||
padding: 24px 14px 24px 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.cw-text-wrap {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.starter {
|
||||
&.three-col {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
text-align: center;
|
||||
gap: 30px;
|
||||
|
||||
.cw-cardbody {
|
||||
background: none;
|
||||
padding: 0;
|
||||
transition: box-shadow 0.3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 40px 40px -40px rgba(3, 1, 60, 0.16);
|
||||
}
|
||||
|
||||
.cw-icon {
|
||||
margin-bottom: -4px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cw-text-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: $white-color;
|
||||
padding: 24px;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
border-radius: 0 0 8px 8px;
|
||||
|
||||
.cw-heading {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.cw-offer-card {
|
||||
gap: 24px;
|
||||
|
||||
.cw-cardbody {
|
||||
padding: 32px 24px 24px;
|
||||
|
||||
.cw-icon {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.cw-heading {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cw-button {
|
||||
|
||||
.cw-btn {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
&:hover:is(:hover, :active, :visited) svg {
|
||||
transform: translateX(5px);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cw-cardbody {
|
||||
background: $white-color;
|
||||
padding: 24px 8px;
|
||||
border-radius: 8px;
|
||||
|
||||
&.cw-two-col {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 24px 14px 24px 24px;
|
||||
}
|
||||
|
||||
.cw-icon {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.cw-heading {
|
||||
font-size: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
}
|
||||
|
||||
.cw-procard {
|
||||
.cw-pro-heading {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.customizer-settings {
|
||||
flex-direction: column;
|
||||
|
||||
.cw-customizer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cw-sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cw-card {
|
||||
&.starter {
|
||||
&.three-col {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.customizer-settings {
|
||||
.cw-card {
|
||||
&.two-col {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// video section
|
||||
|
||||
.video-section {
|
||||
margin-bottom: 32px;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
.cw-offer {
|
||||
.banner-section {
|
||||
.image-link {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.image-link {
|
||||
display: block;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
.cw-plugin-list-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
|
||||
.cw-plugin-list {
|
||||
background-color: $white-color;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.plugin-detail {
|
||||
padding: 24px 24px 8px;
|
||||
|
||||
.cw-plugin-title {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
max-width: 40px;
|
||||
}
|
||||
.cwLabel{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
color: $secondary-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.insert-button {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid $border-color;
|
||||
|
||||
button {
|
||||
padding: 8px 32px;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
.cw-dashboard {
|
||||
.starter-sites {
|
||||
padding: 64px 100px;
|
||||
display: grid;
|
||||
grid-template-areas: "stack";
|
||||
align-items: end;
|
||||
|
||||
@media screen and (max-width: 1025px) {
|
||||
padding: 64px 40px;
|
||||
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
grid-area: stack;
|
||||
|
||||
.image:not(:nth-child(2)) {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img:not(.reverse-image img) {
|
||||
box-shadow: 0 30px 30px -30px #000000a3
|
||||
}
|
||||
|
||||
.reverse-image {
|
||||
position: relative;
|
||||
opacity: 0.4;
|
||||
|
||||
img {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: linear-gradient(360deg, rgba(246, 248, 250, 0) 0%, #F6F8FA 22.65%);
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
text-align: center;
|
||||
grid-area: stack;
|
||||
z-index: 3;
|
||||
padding: 0 100px 130px;
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
padding: 0 100px 50px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1366px) {
|
||||
padding: 0 50px 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1025px) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.cw-button-btn {
|
||||
padding: 16px 32px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
.cw-dashboard {
|
||||
.cw-tabs-container {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
|
||||
.cw-tabs {
|
||||
width: 15%;
|
||||
|
||||
.wrapper {
|
||||
position: sticky;
|
||||
top: 32px;
|
||||
padding-top: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(30px, 3vw, 100px);
|
||||
}
|
||||
|
||||
.cw-tabs-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
padding: 8px 12px;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
transition: 0.3s ease-in-out;
|
||||
border-radius: 8px;
|
||||
line-height: 1.7;
|
||||
color: $accent-color;
|
||||
font-weight: 600;
|
||||
|
||||
svg {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
&.active-tab,
|
||||
&:hover {
|
||||
background-color: $primary-color;
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cw-tabs-content {
|
||||
background: #F6F8FA;
|
||||
border-radius: 24px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
>.wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
position: sticky;
|
||||
top: 32px;
|
||||
background-color: $white-color;
|
||||
z-index: 99;
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.doc-links,
|
||||
.info {
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.version {
|
||||
border-right: 2px solid $border-color;
|
||||
padding-right: 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.doc-links a {
|
||||
border: 1px solid $border-color;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
color: $font-color;
|
||||
transition: 0.3s ease-in-out;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary-color;
|
||||
color: $white-color;
|
||||
|
||||
.cw-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cw-tooltip {
|
||||
position: absolute;
|
||||
bottom: -32px;
|
||||
background: $font-color;
|
||||
color: $white-color;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
width: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-bottom: 32px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.get-pro {
|
||||
background-color: $primary-accent-color;
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
border-radius: 16px;
|
||||
|
||||
*:not(:last-child, p) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 8px 32px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.cw-tabs-container {
|
||||
flex-direction: column;
|
||||
|
||||
.cw-tabs {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
$primary-color: #5081F5;
|
||||
$primary-accent-color: #E6F0FF;
|
||||
$font-color: #1A1D1F;
|
||||
$secondary-font-color: #5A5F61;
|
||||
$accent-color: #575F68;
|
||||
$white-color: #ffffff;
|
||||
$border-color:#5055561A;
|
||||
$black-color: #000000;
|
||||
$black-color-rgb: 0, 0, 0;
|
||||
$border-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
|
||||
$fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
@@ -0,0 +1,8 @@
|
||||
@import "./variables";
|
||||
@import "./general";
|
||||
@import "./home";
|
||||
@import "./offers";
|
||||
@import "./tab";
|
||||
@import "./plugins";
|
||||
@import "./faq";
|
||||
@import "./starterSites";
|
||||
Reference in New Issue
Block a user