webfussel/wf4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ADD: A LOT of pricing chart stuff

Browse source 
Added new pricing chart layout
This commit is contained in:
webfussel 2025-03-19 15:03:11 +01:00
parent a204be8ddc
commit f263a5574a
14 changed files with 563 additions and 284 deletions
Download patch file Download diff file Expand all files Collapse all files

32
app/assets/css/button.css
View file

@ -4,26 +4,44 @@
cursor: pointer;
padding: 1rem 1.5rem;
outline: 3px solid transparent;
box-shadow: 0 0 0 0 var(--color-orange);
border-radius: 99999px;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
font-weight: bold;
&.default {
background: var(--color-orange);
color: var(--color-black);
box-shadow: 0 0 0 0 var(--color-orange);
&:hover {
outline-color: var(--color-black);
box-shadow: 0 0 0 6px var(--color-orange);
}
}
&.dark {
background: var(--color-orange-black);
color: var(--color-white);
box-shadow: 0 0 0 0 var(--color-orange-black);
&:hover {
outline-color: var(--color-orange);
box-shadow: 0 0 0 6px var(--color-black);
}
}
&.white {
background: var(--color-white);
color: var(--color-black);
}
box-shadow: 0 0 0 0 var(--color-white);
&:hover {
outline-color: var(--color-black);
box-shadow: 0 0 0 6px var(--color-orange);
&:hover {
outline-color: var(--color-black);
box-shadow: 0 0 0 6px var(--color-white);
}
}
&.cta {
@ -72,4 +90,8 @@
padding-left: calc(var(--size) * 2);
margin-left: calc(var(--size) * -1 - 25px);
}
}
.button-wrapper {
border-radius: 99999px;
}

9
app/assets/css/global.css
View file

@ -46,6 +46,7 @@
--color-black-transparent: #2a2723aa;
--color-orange: #ff9100;
--color-orange-dark: #945400;
--color-orange-light: #ffc36f;
--color-orange-black: #332b22;
}
@ -235,10 +236,18 @@ span.chip {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.z-2-all {
box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 0 6px rgba(0, 0, 0, 0.23);
}
.z-3 {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.z-3-all {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23), 0 -10px 20px rgba(0, 0, 0, 0.19), 0 -6px 6px rgba(0, 0, 0, 0.23);
}
.z-4 {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

1
app/assets/css/header.css
View file

@ -34,7 +34,6 @@
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.5rem;
flex: 1.5;
cursor: default;
display: flex;
align-items: center;
gap: 1rem;

172
app/assets/css/pricing.css Normal file
View file

@ -0,0 +1,172 @@
.Pricing {
display: grid;
grid-template-columns: max-content 1fr max-content;
border-radius: 20px;
& article:first-child {
border-radius: 20px 20px 0 0;
& header,
& main,
& footer {
padding-bottom: 1.5rem;
}
& header {
background-color: var(--color-orange-dark);
color: var(--color-white);
& .bg-icon {
top: 60%;
}
}
& .cols {
& li .value {
font-size: 1.5rem;
font-weight: bold;
}
}
}
& article:last-child {
border-radius: 0 0 20px 20px;
& header,
& main,
& footer {
padding-top: 1.5rem;
}
& header {
background-color: var(--color-orange-dark);
color: var(--color-white);
}
& .cols {
& li .value {
font-size: 1.5rem;
font-weight: bold;
}
}
}
& article:nth-child(2) {
width: 105%;
margin-left: -2.5%;
margin-right: -2.5%;
border-radius: 20px;
z-index: 2;
& header {
--size-difference: 7rem;
width: calc(100% - 2rem);
padding-top: var(--size-difference);
padding-bottom: var(--size-difference);
background-color: var(--color-orange);
color: var(--color-black);
& .bg-icon {
right: 20%;
}
}
& ul {
& li .value {
font-size: 3rem;
font-weight: bold;
}
}
}
& article {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
background-color: var(--color-orange-black);
overflow: hidden;
& header,
& main,
& footer {
padding: var(--spacing-standard);
display: flex;
flex-direction: column;
justify-content: center;
}
& footer {
align-items: center;
color: var(--color-orange);
gap: .5rem;
& .price {
font-size: 2rem;
font-weight: bold;
}
}
& main {
background-color: var(--color-orange-black);
z-index: 1;
}
& header {
position: relative;
padding-right: 8rem;
width: calc(100% + 8rem);
& strong {
font-size: 2rem;
z-index: 1;
}
& .bg-icon {
position: absolute;
top: 50%;
right: 40%;
translate: 50% -50%;
font-size: 6rem;
opacity: 0.15;
}
}
& li {
display: flex;
align-items: center;
gap: .5rem;
}
& .list {
display: flex;
flex-direction: column;
gap: .5rem;
& .point-icon {
color: var(--color-orange);
}
}
& .list-container {
display: flex;
justify-content: center;
gap: 4rem;
}
& .cols {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
gap: 1rem;
& li {
flex-direction: column;
}
& .color-icon {
color: var(--color-orange);
}
}
}
}

39
app/assets/css/services.css
View file

@ -3,46 +3,7 @@
background-color: var(--color-orange-black);
background-repeat: no-repeat;
.service-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(4, auto);
& article {
grid-row: span 4;
display: grid;
grid-template-rows: subgrid;
position: relative;
& .chip {
position: absolute;
right: -1rem;
top: calc(-1rem - 3px);
}
& header {
display: flex;
}
& ul {
gap: 1rem;
& li {
display: flex;
align-items: center;
gap: 1rem;
}
}
& .color-icon {
color: var(--color-orange);
}
& .extra {
margin-top: auto;
}
}
}
.network-list {
width: 100%;