diff --git a/public/static/account.css b/public/static/account.css
deleted file mode 100644
index 6629bebe..00000000
--- a/public/static/account.css
+++ /dev/null
@@ -1,522 +0,0 @@
-@font-face {
- font-family: 'Comfortaa';
- font-style: normal;
- font-weight: 700;
- font-display: swap;
- src: local('Comfortaa'),
- url('fonts/comfortaa-v28-latin-700.woff2') format('woff2'),
- url('fonts/comfortaa-v28-latin-700.woff') format('woff');
-}
-
-@font-face {
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 400;
- font-display: swap;
- src: local('Open Sans Regular'), local('OpenSans-Regular'),
- url('fonts/open-sans-v17-latin-regular.woff2') format('woff2'),
- url('fonts/open-sans-v17-latin-regular.woff') format('woff');
-}
-
-@font-face {
- font-family: 'Open Sans';
- font-style: italic;
- font-weight: 400;
- font-display: swap;
- src: local('Open Sans Italic'), local('OpenSans-Italic'),
- url('fonts/open-sans-v17-latin-italic.woff2') format('woff2'),
- url('fonts/open-sans-v17-latin-italic.woff') format('woff');
-}
-
-@font-face {
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 700;
- font-display: swap;
- src: local('Open Sans Bold'), local('OpenSans-Bold'),
- url('fonts/open-sans-v17-latin-700.woff2') format('woff2'),
- url('fonts/open-sans-v17-latin-700.woff') format('woff');
-}
-
-@font-face {
- font-family: 'Open Sans';
- font-style: italic;
- font-weight: 700;
- font-display: swap;
- src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
- url('fonts/open-sans-v17-latin-700italic.woff2') format('woff2'),
- url('fonts/open-sans-v17-latin-700italic.woff') format('woff');
-}
-
-:root {
- --color-white: #FDFCFF;
- --color-black: #0c0c0d;
- --color-grey-1: #665e6c;
- --color-grey-2: #DFDAE6;
- --color-grey-3: #EFEDF2;
- --color-purple-1: #7762df;
- --color-purple-2: #4500d0;
- --color-purple-3: #eeebfb;
- --color-turquoise-1: #00d0ad;
- --color-turquoise-2: #00baad;
- --color-red-1: #ba1109;
-
- --color-text: var(--color-black);
- --color-text-secondary: var(--color-grey-1);
- --color-link: var(--color-purple-2);
- --color-body: var(--color-white);
-
- --size-base: calc(1.6em + 0.5vw);
- --size-small: 85%;
- --size-large: 125%;
-
- --space-base: 1em;
- --space-small: calc(var(--space-base) / 4);
- --space-medium: var(--space-base);
- --space-large: calc(var(--space-base) * 4);
-
- --font-family-text: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
- --font-family-title: Comfortaa, cursive;
-}
-
-@media (min-width: 48em) {
- :root {
- --size-base: 2.2em;
- }
-}
-
-*,
-*::before,
-*::after {
- box-sizing: border-box;
-}
-
-html {
- overflow-x: hidden;
-
- font-size: 10px;
-
- scroll-behavior: smooth;
-}
-
-body {
- margin: 0;
- padding: 0;
-
- overflow-x: hidden;
-
- color: var(--color-text);
- font-family: var(--font-family-text);
- font-size: var(--size-base);
-
- background-color: var(--color-body);
-}
-
-a {
- color: inherit;
- text-decoration: underline;
- text-decoration-thickness: 0.2rem;
-
- transition: color .3s ease-in-out;
-}
-
-a:hover,
-a:focus {
- color: var(--color-link);
-}
-
-.call-to-action {
- display: inline-block;
- padding: var(--space-small) var(--space-medium);
-
- text-decoration: none;
-
- border: .1em solid var(--color-text);
- border-radius: 1em;
-}
-
-.call-to-action:hover,
-.call-to-action:focus {
- border-color: inherit;
-}
-
-.header {
- margin-bottom: var(--space-large);
-
- font-family: var(--font-family-title);
- text-align: center;
- text-transform: lowercase;
- letter-spacing: .01em;
-}
-
-.header__title {
- display: inline-block;
-}
-
-.header__title::after {
- display: block;
- height: .3rem;
- max-width: 75%;
- margin-top: .5rem;
- margin-left: auto;
- margin-right: auto;
-
- background: linear-gradient(to right, var(--color-turquoise-1),
- var(--color-turquoise-2));
- border-radius: .5em;
-
- content: "";
-}
-
-.paragraph--featured {
- font-size: var(--size-large);
- font-weight: 600;
- text-align: center;
-}
-
-.paragraph--secondary {
- color: var(--color-text-secondary);
-}
-
-.paragraph--center {
- text-align: center;
-}
-
-.paragraph--limit {
- max-width: 50ch;
- margin-right: auto;
- margin-left: auto;
-}
-
-img {
- max-width: 100%;
-}
-
-hr {
- width: 50%;
- height: 0.3rem;
- margin: var(--space-large) auto;
-
- background: linear-gradient(to right, var(--color-turquoise-1), var(--color-turquoise-2), var(--color-turquoise-1));
- border: none;
- border-radius: 2em;
-}
-
-.sr-only {
- position: absolute;
-
- height: 1px;
- width: 1px;
-
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
-}
-
-.columns {
- display: flex;
-
- flex-direction: column;
-}
-
-@media (min-width: 48em) {
- .columns {
- flex-direction: row;
- }
-
- .columns--center {
- align-items: center;
- }
-}
-
-.columns--spaced {
- margin-top: var(--space-large);
- margin-bottom: var(--space-large);
-}
-
-.columns--background {
- background-color: var(--color-grey-3);
- border-radius: 5rem;
-}
-
-.columns__item {
- padding: var(--space-small);
-
- flex: 1;
-}
-
-.columns__item--center {
- text-align: center;
-}
-
-@media (min-width: 48em) {
- .columns__item + .columns__item {
- margin-left: var(--space-medium);
- padding-left: var(--space-medium);
- }
-
- .columns--background .columns__item + .columns__item {
- border-left: 1rem solid var(--color-body);
- }
-}
-
-.columns__item--size1 {
- flex-basis: calc(1 * 100% / 12);
-}
-
-.columns__item--size2 {
- flex-basis: calc(2 * 100% / 12);
-}
-
-.columns__item--size3 {
- flex-basis: calc(3 * 100% / 12);
-}
-
-.columns__item--size4 {
- flex-basis: calc(4 * 100% / 12);
-}
-
-.columns__item--size5 {
- flex-basis: calc(5 * 100% / 12);
-}
-
-.columns__item--size6 {
- flex-basis: calc(6 * 100% / 12);
-}
-
-.columns__item--size7 {
- flex-basis: calc(7 * 100% / 12);
-}
-
-.columns__item--size8 {
- flex-basis: calc(8 * 100% / 12);
-}
-
-.columns__item--size9 {
- flex-basis: calc(9 * 100% / 12);
-}
-
-.columns__item--size10 {
- flex-basis: calc(10 * 100% / 12);
-}
-
-.columns__item--size11 {
- flex-basis: calc(11 * 100% / 12);
-}
-
-.illustration {
- display: block;
- margin: var(--space-large) var(--space-medium);
-}
-
-.illustration--centered {
- margin-left: auto;
- margin-right: auto;
-}
-
-@media (min-width: 48em) {
- .illustration--pull-left {
- float: left;
- }
-
- .illustration--pull-right {
- float: right;
- }
-}
-
-.layout__header {
- display: flex;
- max-width: 80ch;
- margin-left: auto;
- margin-right: auto;
- padding-top: var(--space-medium);
- padding-bottom: var(--space-medium);
-
- align-items: center;
- justify-content: space-between;
-}
-
-.layout__header-separator {
- flex: 1;
-}
-
-.layout__header-link {
- padding-left: var(--space-medium);
- padding-right: var(--space-medium);
- margin-right: var(--space-medium);
-}
-
-.layout__nav {
- max-width: 80ch;
- margin-left: 0.5rem;
- margin-right: 0.5rem;
-}
-
-@media (min-width: 48em) {
- .layout__nav {
- margin-left: auto;
- margin-right: auto;
- }
-}
-
-.layout__nav ul {
- display: flex;
- margin: 0;
- padding-left: 0;
-
- list-style: none;
-}
-
-.layout__nav a {
- display: block;
- padding: 1rem 2rem;
-
- text-decoration: none;
-
- border: 0.25rem solid var(--color-purple-1);
- border-bottom: none;
- background-color: var(--color-white);
- background-repeat: no-repeat;
- background-position: 1rem center;
-}
-
-@media (min-width: 48em) {
- .layout__nav a {
- padding-left: 5.5rem;
- }
-}
-
-.layout__nav a[aria-current="page"] {
- background-color: var(--color-purple-3);
-}
-
-.layout__nav li:first-child a {
- border-top-left-radius: 1rem;
-}
-
-.layout__nav li:last-child a {
- border-top-right-radius: 1rem;
-}
-
-.layout__nav li + li a {
- border-left: none;
-}
-
-@media (min-width: 48em) {
- .layout__nav-item--subscription a {
- background-image: url("icons/commerce/credit-card-line.svg");
- }
-
- .layout__nav-item--profile a {
- background-image: url("icons/core/user-line.svg");
- }
-
- .layout__nav-item--invoices a {
- background-image: url("icons/technology/pdf-file-line.svg");
- }
-}
-
-.layout__content {
- max-width: 80ch;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: var(--space-large);
-
- border-top: 0.25rem solid var(--color-purple-1);
-}
-
-@media (min-width: 48em) {
- .layout__content {
- padding: 0.2rem;
-
- background-image: linear-gradient(to bottom, var(--color-purple-1), var(--color-purple-3) 100px);
- border-top: none;
- }
-}
-
-.section {
- padding: var(--space-small);
- padding-bottom: var(--space-large);
-
- background-color: var(--color-white);
-}
-
-.section--text {
- max-width: 55ch;
- margin-left: auto;
- margin-right: auto;
- padding-left: var(--space-medium);
- padding-right: var(--space-medium);
-}
-
-.section__intro {
- max-width: 50ch;
- margin: var(--space-large) auto;
-
- text-align: center;
- font-style: italic;
-}
-
-.section__outro {
- margin-top: var(--space-large);
-}
-
-.error-box {
- position: absolute;
- left: 0;
- right: 0;
-
- padding: var(--space-medium);
-
- text-align: left;
- color: var(--color-white);
-
- background-color: var(--color-black);
-
- overflow: auto;
-}
-
-table {
- width: 100%;
-}
-
-table th {
- padding: var(--space-small);
-
- text-align: left;
-}
-
-table td {
- padding: var(--space-small);
-}
-
-table tbody tr:nth-child(even) {
- background-color: var(--color-grey-3);
-}
-
-.row--ghost {
- color: var(--color-text-secondary);
-}
-
-.cell--right {
- text-align: right;
-}
-
-.faq__question {
- font-weight: bold;
-
- counter-increment: manifesto-counter;
-}
-
-.faq__question::before {
- width: 2.5rem;
- height: 2.5rem;
-
- color: var(--color-text-secondary);
- font-size: var(--size-small);
-
- content: counter(manifesto-counter) " ·";
-}
-
-.faq__answer {
- margin-bottom: var(--space-medium);
-}
diff --git a/public/static/admin.css b/public/static/admin.css
deleted file mode 100644
index bf17bba3..00000000
--- a/public/static/admin.css
+++ /dev/null
@@ -1,344 +0,0 @@
-@font-face {
- font-family: 'Comfortaa';
- font-style: normal;
- font-weight: 700;
- font-display: swap;
- src: local('Comfortaa'),
- url('fonts/comfortaa-v28-latin-700.woff2') format('woff2'),
- url('fonts/comfortaa-v28-latin-700.woff') format('woff');
-}
-
-@font-face {
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 400;
- font-display: swap;
- src: local('Open Sans Regular'), local('OpenSans-Regular'),
- url('fonts/open-sans-v17-latin-regular.woff2') format('woff2'),
- url('fonts/open-sans-v17-latin-regular.woff') format('woff');
-}
-
-@font-face {
- font-family: 'Open Sans';
- font-style: italic;
- font-weight: 400;
- font-display: swap;
- src: local('Open Sans Italic'), local('OpenSans-Italic'),
- url('fonts/open-sans-v17-latin-italic.woff2') format('woff2'),
- url('fonts/open-sans-v17-latin-italic.woff') format('woff');
-}
-
-@font-face {
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 700;
- font-display: swap;
- src: local('Open Sans Bold'), local('OpenSans-Bold'),
- url('fonts/open-sans-v17-latin-700.woff2') format('woff2'),
- url('fonts/open-sans-v17-latin-700.woff') format('woff');
-}
-
-@font-face {
- font-family: 'Open Sans';
- font-style: italic;
- font-weight: 700;
- font-display: swap;
- src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
- url('fonts/open-sans-v17-latin-700italic.woff2') format('woff2'),
- url('fonts/open-sans-v17-latin-700italic.woff') format('woff');
-}
-
-:root {
- --color-white: #FDFCFF;
- --color-black: #0c0c0d;
- --color-grey-1: #665e6c;
- --color-grey-2: #DFDAE6;
- --color-grey-3: #EFEDF2;
- --color-purple-1: #7762df;
- --color-purple-2: #4500d0;
- --color-turquoise-1: #00d0ad;
- --color-turquoise-2: #00baad;
- --color-red-1: #ba1109;
-
- --color-text: var(--color-black);
- --color-text-secondary: var(--color-grey-1);
- --color-link: var(--color-purple-2);
- --color-body: var(--color-white);
-
- --size-base: calc(1.6em + 0.5vw);
- --size-small: 85%;
- --size-large: 125%;
-
- --space-base: 1em;
- --space-small: calc(var(--space-base) / 4);
- --space-medium: var(--space-base);
- --space-large: calc(var(--space-base) * 4);
-
- --font-family-text: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
- --font-family-title: Comfortaa, cursive;
-}
-
-@media (min-width: 48em) {
- :root {
- --size-base: 2.2em;
- }
-}
-
-*,
-*::before,
-*::after {
- box-sizing: border-box;
-}
-
-html {
- overflow-x: hidden;
-
- font-size: 10px;
-
- scroll-behavior: smooth;
-}
-
-body {
- margin: 0;
- padding: 0;
-
- overflow-x: hidden;
-
- color: var(--color-text);
- font-family: var(--font-family-text);
- font-size: var(--size-base);
-
- background-color: var(--color-body);
-}
-
-a {
- color: inherit;
- text-decoration: underline;
- text-decoration-thickness: 0.2rem;
-
- transition: color .3s ease-in-out;
-}
-
-a:hover,
-a:focus {
- color: var(--color-link);
-}
-
-.header {
- margin-bottom: var(--space-large);
-
- font-family: var(--font-family-title);
- text-align: center;
- text-transform: lowercase;
- letter-spacing: .01em;
-}
-
-.header__title {
- display: inline-block;
-}
-
-.header__title::after {
- display: block;
- height: .3rem;
- max-width: 75%;
- margin-top: .5rem;
- margin-left: auto;
- margin-right: auto;
-
- background: linear-gradient(to right, var(--color-turquoise-1),
- var(--color-turquoise-2));
- border-radius: .5em;
-
- content: "";
-}
-
-.paragraph--featured {
- font-size: var(--size-large);
- font-weight: 600;
- text-align: center;
-}
-
-.paragraph--secondary {
- color: var(--color-text-secondary);
-}
-
-.paragraph--center {
- text-align: center;
-}
-
-img {
- max-width: 100%;
-}
-
-hr {
- margin-top: var(--space-large);
- margin-bottom: var(--space-large);
-
- border: none;
-}
-
-hr::before,
-hr::after {
- display: block;
- height: 1.75rem;
- margin-left: auto;
- margin-right: auto;
-
- border-radius: 2em;
-
- content: "";
-}
-
-hr::before {
- width: 16rem;
- margin-bottom: 1rem;
-
- background-color: var(--color-turquoise-1);
-}
-
-hr::after {
- width: 10rem;
-
- background-color: var(--color-turquoise-2);
-}
-
-.sr-only {
- position: absolute;
-
- height: 1px;
- width: 1px;
-
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
-}
-
-.columns {
- display: flex;
-
- flex-direction: column;
-}
-
-@media (min-width: 48em) {
- .columns {
- flex-direction: row;
- }
-
- .columns--center {
- align-items: center;
- }
-}
-
-.columns__item {
- padding: var(--space-small);
-
- flex: 1;
-}
-
-@media (min-width: 48em) {
- .columns__item + .columns__item {
- margin-left: var(--space-large);
- }
-}
-
-.illustration {
- display: block;
- margin: var(--space-large) var(--space-medium);
-}
-
-.illustration--centered {
- margin-left: auto;
- margin-right: auto;
-}
-
-@media (min-width: 48em) {
- .illustration--pull-left {
- float: left;
- }
-
- .illustration--pull-right {
- float: right;
- }
-}
-
-.layout__header {
- display: flex;
- max-width: 90ch;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: var(--space-large);
- padding-top: var(--space-medium);
- padding-bottom: var(--space-medium);
-
- align-items: center;
- justify-content: space-between;
-}
-
-.layout__header-separator {
- flex: 1;
-}
-
-.layout__header-link {
- padding-left: var(--space-medium);
- padding-right: var(--space-medium);
- margin-right: var(--space-medium);
-}
-
-.layout__content {
- max-width: 90ch;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: var(--space-large);
-}
-
-.section {
- margin-top: var(--space-large);
- margin-bottom: var(--space-large);
- padding: var(--space-small);
-}
-
-.section__intro {
- max-width: 50ch;
- margin: var(--space-large) auto;
-
- text-align: center;
- font-style: italic;
-}
-
-.section__outro {
- margin-top: var(--space-large);
-}
-
-.error-box {
- position: absolute;
- left: 0;
- right: 0;
-
- padding: var(--space-medium);
-
- text-align: left;
- color: var(--color-white);
-
- background-color: var(--color-black);
-
- overflow: auto;
-}
-
-table {
- width: 100%;
-}
-
-table td {
- padding: var(--space-small);
-}
-
-table tbody tr:nth-child(even) {
- background-color: var(--color-grey-3);
-}
-
-.row--ghost {
- color: var(--color-text-secondary);
-}
-
-.cell--right {
- text-align: right;
-}
diff --git a/public/static/amount-selector.js b/public/static/amount-selector.js
deleted file mode 100644
index 212acb12..00000000
--- a/public/static/amount-selector.js
+++ /dev/null
@@ -1,41 +0,0 @@
-(() => {
- const application = Stimulus.Application.start();
-
- application.register('amount-selector', class extends Stimulus.Controller {
- static get targets() {
- return ['amount', 'radio', 'totalAmount'];
- }
-
- initialize() {
- const initialAmount = this.data.get('initialAmount');
- this.setAmount(initialAmount);
- }
-
- setAmount(amount) {
- const amountElement = this.amountTarget;
- amountElement.value = amount;
- this.refreshTotalAmount();
- }
-
- select(e) {
- const radioElement = e.target;
- this.setAmount(radioElement.dataset.value);
- }
-
- change(e) {
- this.radioTargets.forEach(function (radio) {
- radio.checked = false;
- });
-
- this.refreshTotalAmount();
- }
-
- refreshTotalAmount() {
- if (this.totalAmountTarget) {
- const amount = parseInt(this.amountTarget.value, 10);
- const countAccounts = parseInt(this.data.get('countAccounts'), 10);
- this.totalAmountTarget.innerHTML = amount * countAccounts;
- }
- }
- })
-})();
diff --git a/public/static/fonts/comfortaa-v28-latin-700.woff b/public/static/fonts/comfortaa-v28-latin-700.woff
deleted file mode 100644
index b51fc5a2..00000000
Binary files a/public/static/fonts/comfortaa-v28-latin-700.woff and /dev/null differ
diff --git a/public/static/fonts/comfortaa-v28-latin-700.woff2 b/public/static/fonts/comfortaa-v28-latin-700.woff2
deleted file mode 100644
index 94cc1376..00000000
Binary files a/public/static/fonts/comfortaa-v28-latin-700.woff2 and /dev/null differ
diff --git a/public/static/fonts/open-sans-v17-latin-700.woff b/public/static/fonts/open-sans-v17-latin-700.woff
deleted file mode 100644
index b8b46d0b..00000000
Binary files a/public/static/fonts/open-sans-v17-latin-700.woff and /dev/null differ
diff --git a/public/static/fonts/open-sans-v17-latin-700.woff2 b/public/static/fonts/open-sans-v17-latin-700.woff2
deleted file mode 100644
index 3a38286c..00000000
Binary files a/public/static/fonts/open-sans-v17-latin-700.woff2 and /dev/null differ
diff --git a/public/static/fonts/open-sans-v17-latin-700italic.woff b/public/static/fonts/open-sans-v17-latin-700italic.woff
deleted file mode 100644
index 2fb93a38..00000000
Binary files a/public/static/fonts/open-sans-v17-latin-700italic.woff and /dev/null differ
diff --git a/public/static/fonts/open-sans-v17-latin-700italic.woff2 b/public/static/fonts/open-sans-v17-latin-700italic.woff2
deleted file mode 100644
index 51538133..00000000
Binary files a/public/static/fonts/open-sans-v17-latin-700italic.woff2 and /dev/null differ
diff --git a/public/static/fonts/open-sans-v17-latin-italic.woff b/public/static/fonts/open-sans-v17-latin-italic.woff
deleted file mode 100644
index 2bfa5826..00000000
Binary files a/public/static/fonts/open-sans-v17-latin-italic.woff and /dev/null differ
diff --git a/public/static/fonts/open-sans-v17-latin-italic.woff2 b/public/static/fonts/open-sans-v17-latin-italic.woff2
deleted file mode 100644
index 10031c02..00000000
Binary files a/public/static/fonts/open-sans-v17-latin-italic.woff2 and /dev/null differ
diff --git a/public/static/fonts/open-sans-v17-latin-regular.woff b/public/static/fonts/open-sans-v17-latin-regular.woff
deleted file mode 100644
index 39e88ed9..00000000
Binary files a/public/static/fonts/open-sans-v17-latin-regular.woff and /dev/null differ
diff --git a/public/static/fonts/open-sans-v17-latin-regular.woff2 b/public/static/fonts/open-sans-v17-latin-regular.woff2
deleted file mode 100644
index e9f58b77..00000000
Binary files a/public/static/fonts/open-sans-v17-latin-regular.woff2 and /dev/null differ
diff --git a/public/static/fonts/raleway-latin-600.woff2 b/public/static/fonts/raleway-latin-600.woff2
new file mode 100644
index 00000000..86e1ec82
Binary files /dev/null and b/public/static/fonts/raleway-latin-600.woff2 differ
diff --git a/public/static/fonts/raleway-latin-600italic.woff2 b/public/static/fonts/raleway-latin-600italic.woff2
new file mode 100644
index 00000000..deb3c4ab
Binary files /dev/null and b/public/static/fonts/raleway-latin-600italic.woff2 differ
diff --git a/public/static/fonts/raleway-latin-700.woff2 b/public/static/fonts/raleway-latin-700.woff2
new file mode 100644
index 00000000..357d004d
Binary files /dev/null and b/public/static/fonts/raleway-latin-700.woff2 differ
diff --git a/public/static/fonts/raleway-latin-700italic.woff2 b/public/static/fonts/raleway-latin-700italic.woff2
new file mode 100644
index 00000000..926b27bd
Binary files /dev/null and b/public/static/fonts/raleway-latin-700italic.woff2 differ
diff --git a/public/static/fonts/raleway-latin-italic.woff2 b/public/static/fonts/raleway-latin-italic.woff2
new file mode 100644
index 00000000..f3f7e34a
Binary files /dev/null and b/public/static/fonts/raleway-latin-italic.woff2 differ
diff --git a/public/static/fonts/raleway-latin-regular.woff2 b/public/static/fonts/raleway-latin-regular.woff2
new file mode 100644
index 00000000..c80d16ee
Binary files /dev/null and b/public/static/fonts/raleway-latin-regular.woff2 differ
diff --git a/public/static/forms.css b/public/static/forms.css
deleted file mode 100644
index 0eaecd3c..00000000
--- a/public/static/forms.css
+++ /dev/null
@@ -1,451 +0,0 @@
-.button--default {
- padding: .5em 1em;
-
- font-size: 1em;
- color: var(--color-text);
-
- background-color: var(--color-grey-3);
- border: .2rem solid var(--color-grey-1);
- border-radius: 1.5em;
-
- transition: background-color .2s ease-in-out;
-}
-
-.button--default:hover,
-.button--default:focus {
- background-color: var(--color-grey-2);
-}
-
-.button--primary {
- padding: .5em 1.5em;
-
- color: var(--color-text);
- font-size: var(--size-large);
-
- background-color: var(--color-turquoise-1);
- border: .2rem solid var(--color-text);
- border-radius: 1.5em;
-
- transition: background-color .2s ease-in-out;
-}
-
-.button--primary:hover,
-.button--primary:focus {
- background-color: var(--color-purple-1);
-}
-
-.button--ghost {
- padding: .5em 1em;
-
- font-size: 1em;
- color: var(--color-text);
-
- background-color: var(--color-grey-3);
- border: none;
- border-radius: 1.5em;
-
- transition: background-color .2s ease-in-out;
-}
-
-.button--ghost:hover,
-.button--ghost:focus {
- background-color: var(--color-grey-2);
-}
-
-label {
- display: block;
- margin-bottom: .5em;
- padding-left: .5em;
- padding-right: .5em;
-}
-
-input,
-textarea {
- width: 100%;
- height: 2.5em;
- padding: .5em;
-
- color: var(--color-black);
- font-size: 1em;
- font-family: inherit;
-
- background-color: var(--color-white);
- border: .25rem solid var(--color-grey-1);
- border-radius: .25em;
- box-shadow: 2px 2px 4px var(--color-grey-2) inset;
-
- transition: border .2s ease-in-out;
-}
-
-input[type="checkbox"],
-input[type="radio"] {
- width: auto;
- height: auto;
-
- vertical-align: middle;
-}
-
-textarea {
- height: auto;
- min-height: 10em;
-}
-
-input:focus,
-textarea:focus {
- border-color: var(--color-turquoise-2);
-}
-
-input[type="text"]:focus,
-input[type="email"]:focus,
-input[type="number"]:focus,
-textarea:focus {
- outline: none;
-}
-
-input[type="radio"],
-input[type="checkbox"] {
- position: absolute;
-
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
-
- width: 1px;
- height: 1px;
-}
-
-input[type="radio"] + label,
-input[type="checkbox"] + label {
- position: relative;
-
- display: inline-flex;
- margin-bottom: 0;
-
- align-items: center;
-}
-
-input[type="radio"][disabled] + label,
-input[type="checkbox"][disabled] + label {
- color: var(--color-grey-1);
-}
-
-input[type="radio"] + label::before,
-input[type="checkbox"] + label::before {
- content: ' ';
-
- position: relative;
-
- width: 2.5rem;
- height: 2.5rem;
- margin-right: var(--space-small);
-
- flex-shrink: 0;
-
- background-color: var(--color-grey-2);
- border: 0.25rem solid var(--color-grey-1);
- border-radius: 50%;
-
- transition:
- border-color 0.2s ease-in-out,
- background-color 0.2s ease-in-out;
-}
-
-input[type="checkbox"] + label::before {
- border-radius: 0.5rem;
-}
-
-input[type="radio"]:checked + label::before,
-input[type="checkbox"]:checked + label::before {
- background-color: var(--color-turquoise-1);
- border-color: var(--color-black);
-}
-
-input[type="radio"][disabled] + label::before,
-input[type="checkbox"][disabled] + label::before {
- background-color: var(--color-grey-3);
- border-color: var(--color-grey-2);
-}
-
-input[type="radio"]:checked[disabled] + label::after,
-input[type="checkbox"]:checked[disabled] + label::after {
- opacity: 0.6;
-}
-
-input[type="radio"]:focus + label::before,
-input[type="checkbox"]:focus + label::before {
- box-shadow: 0 0 0px 1px var(--color-purple-1);
-}
-
-input[type="radio"] + label::after {
- content: ' ';
-
- position: absolute;
-
- width: 1.5rem;
- height: 1.5rem;
- margin-left: 0.5rem;
-
- background-color: var(--color-black);
- border-radius: 50%;
-
- opacity: 0;
-
- transition: opacity 0.2s ease-in-out;
-}
-
-input[type="checkbox"] + label::after {
- content: '';
-
- position: absolute;
-
- width: 1.5rem;
- height: 0.75rem;
- margin-top: -0.3rem;
- margin-left: 0.5rem;
-
- border-bottom: 0.25rem solid var(--color-text);
- border-left: 0.25rem solid var(--color-text);
-
- transform: rotate(-45deg);
- opacity: 0;
-
- transition: opacity 0.2s ease-in-out;
-}
-
-input[type="radio"]:checked + label::after,
-input[type="checkbox"]:checked + label::after {
- opacity: 1;
-}
-
-select {
- width: 50%;
- height: 2.5em;
- padding: .25em;
-
- color: var(--color-black);
- font-size: 1em;
- font-family: inherit;
-
- background: linear-gradient(to bottom, var(--color-grey-3), var(--color-grey-2));
- border: .25rem solid var(--color-grey-1);
- border-radius: .25em;
-
- transition: border .2s ease-in-out;
-}
-
-select:hover {
- background: var(--color-grey-3);
-}
-
-select:focus {
- border-color: var(--color-turquoise-2);
-}
-
-fieldset {
- margin-top: var(--space-medium);
- margin-bottom: var(--space-medium);
- padding: var(--space-small) var(--space-medium);
-
- border: .25rem solid var(--color-grey-2);
- border-radius: .25em;
-}
-
-legend {
- padding-left: var(--space-small);
- padding-right: var(--space-small);
-}
-
-.fieldset__caption {
- padding-left: .5em;
- padding-right: .5em;
-
- color: var(--color-grey-1);
- font-size: var(--size-small);
-}
-
-.form-group {
- margin-top: .5em;
- margin-bottom: 1em;
-}
-
-.form-group__stack {
- display: flex;
-
- align-items: baseline;
-}
-
-.form-group__caption {
- margin-top: -.25em;
- margin-bottom: .25em;
- padding-left: .5em;
- padding-right: .5em;
-
- color: var(--color-grey-1);
- font-size: var(--size-small);
-}
-
-.form-group__error {
- margin-top: 0;
- margin-bottom: 0;
- padding-left: .5em;
- padding-right: .5em;
-
- color: var(--color-red-1);
-}
-
-.form-group--invalid input {
- border-color: var(--color-red-1);
-}
-
-.form__actions {
- padding-top: var(--space-medium);
- padding-bottom: var(--space-medium);
- margin-bottom: var(--space-medium);
-
- text-align: center;
-}
-
-.form__error {
- padding-left: .5em;
- padding-right: .5em;
-
- color: var(--color-red-1);
-}
-
-/**
- * Custom styles
- */
-.form--contact,
-.form--common-pot,
-.form--address,
-.form--renew {
- max-width: 60ch;
- margin-right: auto;
- margin-left: auto;
-}
-
-.form--common-pot .columns__item,
-.form--address .columns__item {
- padding: 0;
-}
-
-@media (min-width: 48em) {
- .form--common-pot .columns__item + .columns__item,
- .form--address .columns__item + .columns__item {
- margin-left: var(--space-medium);
- }
-}
-
-.form--common-pot .columns__item--postcode,
-.form--address .columns__item--postcode {
- max-width: 8em;
-}
-
-.form-group--cgv {
- padding: var(--space-medium);
-
- background-color: var(--color-purple-3);
- border-radius: 0.75rem;
-}
-
-.form-group--reminder {
- padding: var(--space-medium);
-}
-
-/**
- * Amount selector on the subscription renewing page
- */
-.amount-selector {
- margin-top: var(--space-large);
- margin-bottom: var(--space-large);
-
- text-align: center;
-}
-
-.amount-selector__choose-label {
- margin-top: var(--space-medium);
-
- font-size: 1.2em;
-}
-
-.amount-selector__input {
- max-width: 5em;
-}
-
-.amount-selector__container {
- display: flex;
- margin-bottom: var(--space-medium);
-
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-
-.amount-selector__container > * + * {
- margin-top: var(--space-medium);
-}
-
-@media (min-width: 48em) {
- .amount-selector__container {
- flex-direction: row;
- }
-
- .amount-selector__container > * + * {
- margin-top: 0;
- }
-}
-
-.amount-selector__item {
- margin-right: var(--space-medium);
- margin-left: var(--space-medium);
-
- text-align: center;
-}
-
-.amount-selector__label {
- padding: var(--space-medium);
-
- flex-direction: column;
-
- font-size: var(--size-large);
-
- background-color: var(--color-white);
- border: .25rem solid var(--color-grey-2);
- border-radius: 2rem;
- box-shadow: 1px 1px 2px 2px var(--color-grey-3);
-
- transition:
- background-color .2s ease-in-out,
- border-color .2s ease-in-out;
-}
-
-.amount-selector__radio:checked + .amount-selector__label {
- background-color: var(--color-turquoise-1);
- border-color: var(--color-turquoise-2);
-}
-
-.amount-selector__radio + .amount-selector__label::before {
- margin-right: 0;
- margin-bottom: var(--space-small);
-}
-
-.amount-selector__radio + .amount-selector__label::after {
- margin-top: 0.5rem;
- margin-left: 0;
-}
-
-.amount-selector__amount {
- display: block;
-
- font-size: var(--size-large);
- font-weight: bold;
-}
-
-.amount-selector__title {
- font-size: 0.9em;
- font-style: italic;
-}
-
-/* This is a honeypot input, it must not be filled! */
-.form-group--website {
- display: none;
-}
diff --git a/public/static/icons/angle-down.svg b/public/static/icons/angle-down.svg
new file mode 100644
index 00000000..608d35ce
--- /dev/null
+++ b/public/static/icons/angle-down.svg
@@ -0,0 +1 @@
+
diff --git a/public/static/icons/angle-up.svg b/public/static/icons/angle-up.svg
new file mode 100644
index 00000000..a99921fa
--- /dev/null
+++ b/public/static/icons/angle-up.svg
@@ -0,0 +1 @@
+
diff --git a/public/static/icons/commerce/credit-card-line.svg b/public/static/icons/commerce/credit-card-line.svg
deleted file mode 100644
index 55d89733..00000000
--- a/public/static/icons/commerce/credit-card-line.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/icons/commerce/euro-line.svg b/public/static/icons/commerce/euro-line.svg
deleted file mode 100644
index 12ddb0e4..00000000
--- a/public/static/icons/commerce/euro-line.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/icons/commerce/piggy-bank-line.svg b/public/static/icons/commerce/piggy-bank-line.svg
deleted file mode 100644
index bacd6235..00000000
--- a/public/static/icons/commerce/piggy-bank-line.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/icons/core/bars-line.svg b/public/static/icons/core/bars-line.svg
deleted file mode 100644
index 08f718ac..00000000
--- a/public/static/icons/core/bars-line.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/icons/core/home-line.svg b/public/static/icons/core/home-line.svg
deleted file mode 100644
index a5e100aa..00000000
--- a/public/static/icons/core/home-line.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/icons/core/times-line.svg b/public/static/icons/core/times-line.svg
deleted file mode 100644
index 6c7f813f..00000000
--- a/public/static/icons/core/times-line.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/icons/core/user-line.svg b/public/static/icons/core/user-line.svg
deleted file mode 100644
index 71a6c12b..00000000
--- a/public/static/icons/core/user-line.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/icons/essential/library-line.svg b/public/static/icons/essential/library-line.svg
deleted file mode 100644
index e2e7edcd..00000000
--- a/public/static/icons/essential/library-line.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/icons/essential/tree-line.svg b/public/static/icons/essential/tree-line.svg
deleted file mode 100644
index 71ee7d6d..00000000
--- a/public/static/icons/essential/tree-line.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/icons/icons.svg b/public/static/icons/icons.svg
new file mode 100644
index 00000000..115cf442
--- /dev/null
+++ b/public/static/icons/icons.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/static/icons/media/camera-line.svg b/public/static/icons/media/camera-line.svg
deleted file mode 100644
index 7cda910b..00000000
--- a/public/static/icons/media/camera-line.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/public/static/icons/social/bookmark-line.svg b/public/static/icons/social/bookmark-line.svg
deleted file mode 100644
index 0c1ca9fc..00000000
--- a/public/static/icons/social/bookmark-line.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/icons/social/heart-line.svg b/public/static/icons/social/heart-line.svg
deleted file mode 100644
index b78aeb75..00000000
--- a/public/static/icons/social/heart-line.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/icons/social/thumbs-up-line.svg b/public/static/icons/social/thumbs-up-line.svg
deleted file mode 100644
index ee9945b5..00000000
--- a/public/static/icons/social/thumbs-up-line.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/icons/star.svg b/public/static/icons/star.svg
new file mode 100644
index 00000000..caf49ab5
--- /dev/null
+++ b/public/static/icons/star.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/static/icons/technology/code-line.svg b/public/static/icons/technology/code-line.svg
deleted file mode 100644
index fa56b3e3..00000000
--- a/public/static/icons/technology/code-line.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/icons/technology/pdf-file-line.svg b/public/static/icons/technology/pdf-file-line.svg
deleted file mode 100644
index 40ee3687..00000000
--- a/public/static/icons/technology/pdf-file-line.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/public/static/icons/travel/map-marker-line.svg b/public/static/icons/travel/map-marker-line.svg
deleted file mode 100644
index c091048c..00000000
--- a/public/static/icons/travel/map-marker-line.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/illustrations/a_whole_year.svg b/public/static/illustrations/a_whole_year.svg
new file mode 100644
index 00000000..bdb7fd3f
--- /dev/null
+++ b/public/static/illustrations/a_whole_year.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/static/illustrations/bookmarks.svg b/public/static/illustrations/bookmarks.svg
new file mode 100644
index 00000000..5cc83be4
--- /dev/null
+++ b/public/static/illustrations/bookmarks.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/static/illustrations/browsing.svg b/public/static/illustrations/browsing.svg
deleted file mode 100644
index 3f047a58..00000000
--- a/public/static/illustrations/browsing.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/illustrations/calculator.svg b/public/static/illustrations/calculator.svg
deleted file mode 100644
index 18da777c..00000000
--- a/public/static/illustrations/calculator.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/illustrations/collaboration.svg b/public/static/illustrations/collaboration.svg
deleted file mode 100644
index fca07b36..00000000
--- a/public/static/illustrations/collaboration.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/illustrations/contact.svg b/public/static/illustrations/contact.svg
index 3c56626f..d539ea2c 100644
--- a/public/static/illustrations/contact.svg
+++ b/public/static/illustrations/contact.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/public/static/illustrations/contract.svg b/public/static/illustrations/contract.svg
new file mode 100644
index 00000000..17fea0da
--- /dev/null
+++ b/public/static/illustrations/contract.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/static/illustrations/credit-card-payment.svg b/public/static/illustrations/credit-card-payment.svg
new file mode 100644
index 00000000..35b2b66f
--- /dev/null
+++ b/public/static/illustrations/credit-card-payment.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/static/illustrations/cup-of-tea.svg b/public/static/illustrations/cup-of-tea.svg
deleted file mode 100644
index 56c14dfd..00000000
--- a/public/static/illustrations/cup-of-tea.svg
+++ /dev/null
@@ -1,206 +0,0 @@
-
-
diff --git a/public/static/illustrations/flus-services-mobile.svg b/public/static/illustrations/flus-services-mobile.svg
new file mode 100644
index 00000000..2644804c
--- /dev/null
+++ b/public/static/illustrations/flus-services-mobile.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/static/illustrations/flus-services.svg b/public/static/illustrations/flus-services.svg
new file mode 100644
index 00000000..ed67af3e
--- /dev/null
+++ b/public/static/illustrations/flus-services.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/static/illustrations/hello.svg b/public/static/illustrations/hello.svg
new file mode 100644
index 00000000..013fa47d
--- /dev/null
+++ b/public/static/illustrations/hello.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/static/illustrations/high-five.svg b/public/static/illustrations/high-five.svg
deleted file mode 100644
index 8233abfc..00000000
--- a/public/static/illustrations/high-five.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/illustrations/link.svg b/public/static/illustrations/link.svg
index 0873e366..bd861dc3 100644
--- a/public/static/illustrations/link.svg
+++ b/public/static/illustrations/link.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/public/static/illustrations/not-found.svg b/public/static/illustrations/not-found.svg
deleted file mode 100644
index 8feb28a0..00000000
--- a/public/static/illustrations/not-found.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/illustrations/online-connection.svg b/public/static/illustrations/online-connection.svg
new file mode 100644
index 00000000..dcbdd6c8
--- /dev/null
+++ b/public/static/illustrations/online-connection.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/static/illustrations/online-payment.svg b/public/static/illustrations/online-payment.svg
new file mode 100644
index 00000000..fb10f1e4
--- /dev/null
+++ b/public/static/illustrations/online-payment.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/static/illustrations/open-source.svg b/public/static/illustrations/open-source.svg
new file mode 100644
index 00000000..18522f23
--- /dev/null
+++ b/public/static/illustrations/open-source.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/static/illustrations/page_not_found.svg b/public/static/illustrations/page_not_found.svg
new file mode 100644
index 00000000..15416614
--- /dev/null
+++ b/public/static/illustrations/page_not_found.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/static/illustrations/people.svg b/public/static/illustrations/people.svg
new file mode 100644
index 00000000..2defc3b8
--- /dev/null
+++ b/public/static/illustrations/people.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/static/illustrations/personal-information.svg b/public/static/illustrations/personal-information.svg
deleted file mode 100644
index d25b449b..00000000
--- a/public/static/illustrations/personal-information.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/illustrations/privacy.svg b/public/static/illustrations/privacy.svg
deleted file mode 100644
index 9b8d3a28..00000000
--- a/public/static/illustrations/privacy.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/illustrations/project-team.svg b/public/static/illustrations/project-team.svg
new file mode 100644
index 00000000..43ff3c0c
--- /dev/null
+++ b/public/static/illustrations/project-team.svg
@@ -0,0 +1 @@
+
diff --git a/public/static/illustrations/reading.svg b/public/static/illustrations/reading.svg
deleted file mode 100644
index b706b86e..00000000
--- a/public/static/illustrations/reading.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/illustrations/savings.svg b/public/static/illustrations/savings.svg
deleted file mode 100644
index 07f22491..00000000
--- a/public/static/illustrations/savings.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/illustrations/secure_login.svg b/public/static/illustrations/secure_login.svg
new file mode 100644
index 00000000..ff2f1af4
--- /dev/null
+++ b/public/static/illustrations/secure_login.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/static/illustrations/security.svg b/public/static/illustrations/security.svg
deleted file mode 100644
index 53e95ce2..00000000
--- a/public/static/illustrations/security.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/illustrations/server_down.svg b/public/static/illustrations/server_down.svg
new file mode 100644
index 00000000..09a98add
--- /dev/null
+++ b/public/static/illustrations/server_down.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/static/illustrations/sharing.svg b/public/static/illustrations/sharing.svg
deleted file mode 100644
index ac86f926..00000000
--- a/public/static/illustrations/sharing.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/illustrations/super_thank_you.svg b/public/static/illustrations/super_thank_you.svg
deleted file mode 100644
index 7fc59c82..00000000
--- a/public/static/illustrations/super_thank_you.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/illustrations/teamwork.svg b/public/static/illustrations/teamwork.svg
new file mode 100644
index 00000000..9016b790
--- /dev/null
+++ b/public/static/illustrations/teamwork.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/static/illustrations/terms.svg b/public/static/illustrations/terms.svg
deleted file mode 100644
index 84c790d9..00000000
--- a/public/static/illustrations/terms.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/illustrations/time.svg b/public/static/illustrations/time.svg
deleted file mode 100644
index 91ea2ef2..00000000
--- a/public/static/illustrations/time.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/static/intro.jpg b/public/static/intro.jpg
deleted file mode 100644
index 2af00e31..00000000
Binary files a/public/static/intro.jpg and /dev/null differ
diff --git a/public/static/js/main.js b/public/static/js/main.js
new file mode 100644
index 00000000..35699e56
--- /dev/null
+++ b/public/static/js/main.js
@@ -0,0 +1,122 @@
+(() => {
+ const application = Stimulus.Application.start();
+
+ application.register('navigation', class extends Stimulus.Controller {
+ static get targets () {
+ return ['button'];
+ }
+
+ connect () {
+ this.element.addEventListener('keydown', this.trapEscape.bind(this));
+ }
+
+ trapEscape (event) {
+ if (event.key === 'Escape') {
+ this.close();
+ }
+ }
+
+ switch () {
+ if (this.buttonTarget.getAttribute('aria-expanded') === 'true') {
+ this.buttonTarget.setAttribute('aria-expanded', 'false');
+ } else {
+ this.buttonTarget.setAttribute('aria-expanded', 'true');
+ }
+ }
+
+ close() {
+ this.buttonTarget.setAttribute('aria-expanded', 'false');
+ this.buttonTarget.focus();
+ }
+ })
+
+ application.register('profile', class extends Stimulus.Controller {
+ static get targets() {
+ return ['sectionNatural', 'sectionLegal', 'firstName', 'lastName', 'legalName', 'controlAddress'];
+ }
+
+ initialize() {
+ this.switchAddressForNode(this.controlAddressTarget);
+
+ const entityTypeNode = document.querySelector('input[name="entity_type"][checked]');
+ this.switchEntityTypeForNode(entityTypeNode);
+ }
+
+ switchAddress(event) {
+ this.switchAddressForNode(event.target);
+ }
+
+ switchAddressForNode(node) {
+ const addressNode = document.querySelector('#address');
+ addressNode.hidden = !node.checked;
+ }
+
+ switchEntityType(event) {
+ this.switchEntityTypeForNode(event.target);
+ }
+
+ switchEntityTypeForNode(node) {
+ if (node.value === 'natural') {
+ this.sectionNaturalTarget.hidden = false;
+ this.sectionLegalTarget.hidden = true;
+
+ this.firstNameTarget.required = true;
+ this.lastNameTarget.required = true;
+ this.legalNameTarget.required = false;
+
+ this.controlAddressTarget.checked = this.controlAddressTarget.defaultChecked;
+ this.controlAddressTarget.hidden = false;
+ } else {
+ this.sectionNaturalTarget.hidden = true;
+ this.sectionLegalTarget.hidden = false;
+
+ this.firstNameTarget.required = false;
+ this.lastNameTarget.required = false;
+ this.legalNameTarget.required = true;
+
+ this.controlAddressTarget.checked = true;
+ this.controlAddressTarget.hidden = true;
+ }
+
+ this.switchAddressForNode(this.controlAddressTarget);
+ }
+ })
+
+ application.register('amount-selector', class extends Stimulus.Controller {
+ static get targets() {
+ return ['amount', 'radio', 'totalAmount'];
+ }
+
+ initialize() {
+ const initialAmount = this.data.get('initialAmount');
+ this.setAmount(initialAmount);
+ }
+
+ setAmount(amount) {
+ const amountElement = this.amountTarget;
+ amountElement.value = amount;
+ this.refreshTotalAmount();
+ }
+
+ select(e) {
+ const radioElement = e.target;
+ this.setAmount(radioElement.dataset.value);
+ }
+
+ change(e) {
+ this.radioTargets.forEach(function (radio) {
+ radio.checked = false;
+ });
+
+ this.refreshTotalAmount();
+ }
+
+ refreshTotalAmount() {
+ if (this.totalAmountTarget) {
+ const amount = parseInt(this.amountTarget.value, 10);
+ const countAccounts = parseInt(this.data.get('countAccounts'), 10);
+ this.totalAmountTarget.innerHTML = amount * countAccounts;
+ }
+ }
+ })
+})();
diff --git a/public/static/stimulus.min.js b/public/static/js/stimulus.min.js
similarity index 100%
rename from public/static/stimulus.min.js
rename to public/static/js/stimulus.min.js
diff --git a/public/static/logo-white.svg b/public/static/logo-white.svg
new file mode 100644
index 00000000..a983b22f
--- /dev/null
+++ b/public/static/logo-white.svg
@@ -0,0 +1 @@
+
diff --git a/public/static/popup.js b/public/static/popup.js
deleted file mode 100644
index a96615ea..00000000
--- a/public/static/popup.js
+++ /dev/null
@@ -1,19 +0,0 @@
-(() => {
- const application = Stimulus.Application.start();
-
- application.register('popup', class extends Stimulus.Controller {
- open (e) {
- this.element.open = true;
- }
-
- close (e) {
- if (!this.element.contains(e.target)) {
- this.element.open = false;
- }
- }
-
- toggle (e) {
- this.element.open = !this.element.open;
- }
- })
-})();
diff --git a/public/static/profile.js b/public/static/profile.js
deleted file mode 100644
index d4698bca..00000000
--- a/public/static/profile.js
+++ /dev/null
@@ -1,55 +0,0 @@
-(() => {
- const application = Stimulus.Application.start();
-
- application.register('profile', class extends Stimulus.Controller {
- static get targets() {
- return ['sectionNatural', 'sectionLegal', 'firstName', 'lastName', 'legalName', 'controlAddress'];
- }
-
- initialize() {
- this.switchAddressForNode(this.controlAddressTarget);
-
- const entityTypeNode = document.querySelector('input[name="entity_type"][checked]');
- this.switchEntityTypeForNode(entityTypeNode);
- }
-
- switchAddress(event) {
- this.switchAddressForNode(event.target);
- }
-
- switchAddressForNode(node) {
- const addressNode = document.querySelector('#address');
- addressNode.hidden = !node.checked;
- }
-
- switchEntityType(event) {
- this.switchEntityTypeForNode(event.target);
- }
-
- switchEntityTypeForNode(node) {
- if (node.value === 'natural') {
- this.sectionNaturalTarget.hidden = false;
- this.sectionLegalTarget.hidden = true;
-
- this.firstNameTarget.required = true;
- this.lastNameTarget.required = true;
- this.legalNameTarget.required = false;
-
- this.controlAddressTarget.checked = this.controlAddressTarget.defaultChecked;
- this.controlAddressTarget.disabled = false;
- } else {
- this.sectionNaturalTarget.hidden = true;
- this.sectionLegalTarget.hidden = false;
-
- this.firstNameTarget.required = false;
- this.lastNameTarget.required = false;
- this.legalNameTarget.required = true;
-
- this.controlAddressTarget.checked = true;
- this.controlAddressTarget.disabled = true;
- }
-
- this.switchAddressForNode(this.controlAddressTarget);
- }
- })
-})();
diff --git a/public/static/screenshots/extension.webp b/public/static/screenshots/extension.webp
new file mode 100644
index 00000000..f2c4e88a
Binary files /dev/null and b/public/static/screenshots/extension.webp differ
diff --git a/public/static/screenshots/flux.webp b/public/static/screenshots/flux.webp
new file mode 100644
index 00000000..ffd521c1
Binary files /dev/null and b/public/static/screenshots/flux.webp differ
diff --git a/public/static/screenshots/mobile.webp b/public/static/screenshots/mobile.webp
new file mode 100644
index 00000000..5cf562ad
Binary files /dev/null and b/public/static/screenshots/mobile.webp differ
diff --git a/public/static/screenshots/onglet-lecture.webp b/public/static/screenshots/onglet-lecture.webp
new file mode 100644
index 00000000..2d776ea6
Binary files /dev/null and b/public/static/screenshots/onglet-lecture.webp differ
diff --git a/public/static/screenshots/profil.webp b/public/static/screenshots/profil.webp
new file mode 100644
index 00000000..4aebe573
Binary files /dev/null and b/public/static/screenshots/profil.webp differ
diff --git a/public/static/screenshots/veille-partagee.webp b/public/static/screenshots/veille-partagee.webp
new file mode 100644
index 00000000..62d53d1d
Binary files /dev/null and b/public/static/screenshots/veille-partagee.webp differ
diff --git a/public/static/style.css b/public/static/style.css
deleted file mode 100644
index 5e36e15b..00000000
--- a/public/static/style.css
+++ /dev/null
@@ -1,1189 +0,0 @@
-@font-face {
- font-family: 'Comfortaa';
- font-style: normal;
- font-weight: 700;
- font-display: swap;
- src: local('Comfortaa'),
- url('fonts/comfortaa-v28-latin-700.woff2') format('woff2'),
- url('fonts/comfortaa-v28-latin-700.woff') format('woff');
-}
-
-@font-face {
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 400;
- font-display: swap;
- src: local('Open Sans Regular'), local('OpenSans-Regular'),
- url('fonts/open-sans-v17-latin-regular.woff2') format('woff2'),
- url('fonts/open-sans-v17-latin-regular.woff') format('woff');
-}
-
-@font-face {
- font-family: 'Open Sans';
- font-style: italic;
- font-weight: 400;
- font-display: swap;
- src: local('Open Sans Italic'), local('OpenSans-Italic'),
- url('fonts/open-sans-v17-latin-italic.woff2') format('woff2'),
- url('fonts/open-sans-v17-latin-italic.woff') format('woff');
-}
-
-@font-face {
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 700;
- font-display: swap;
- src: local('Open Sans Bold'), local('OpenSans-Bold'),
- url('fonts/open-sans-v17-latin-700.woff2') format('woff2'),
- url('fonts/open-sans-v17-latin-700.woff') format('woff');
-}
-
-@font-face {
- font-family: 'Open Sans';
- font-style: italic;
- font-weight: 700;
- font-display: swap;
- src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
- url('fonts/open-sans-v17-latin-700italic.woff2') format('woff2'),
- url('fonts/open-sans-v17-latin-700italic.woff') format('woff');
-}
-
-:root {
- --color-white: #FDFCFF;
- --color-black: #0c0c0d;
- --color-grey-1: #665e6c;
- --color-grey-2: #DFDAE6;
- --color-grey-3: #EFEDF2;
- --color-purple-1: #7762df;
- --color-purple-2: #4500d0;
- --color-purple-3: #eeebfb;
- --color-turquoise-1: #00d0ad;
- --color-turquoise-2: #00baad;
- --color-turquoise-3: #dff9f5;
- --color-red-1: #ba1109;
-
- --color-text: var(--color-black);
- --color-text-secondary: var(--color-grey-1);
- --color-link: var(--color-purple-2);
- --color-body: var(--color-white);
-
- --size-base: calc(1.6em + 0.5vw);
- --size-small: 85%;
- --size-normal: 100%;
- --size-large: 125%;
-
- --space-base: 1em;
- --space-small: calc(var(--space-base) / 4);
- --space-medium: var(--space-base);
- --space-large: calc(var(--space-base) * 4);
-
- --font-family-text: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
- --font-family-title: Comfortaa, cursive;
-}
-
-@media (min-width: 48em) {
- :root {
- --size-base: 2.2em;
- }
-}
-
-*,
-*::before,
-*::after {
- box-sizing: border-box;
-}
-
-html {
- overflow-x: hidden;
-
- font-size: 10px;
- line-height: 1.6;
-
- scroll-behavior: smooth;
-}
-
-body {
- margin: 0;
- padding: 0;
-
- overflow-x: hidden;
-
- color: var(--color-text);
- font-family: var(--font-family-text);
- font-size: var(--size-base);
-
- background-color: var(--color-body);
-}
-
-a {
- color: inherit;
- text-decoration: underline;
- text-decoration-thickness: 0.2rem;
-
- transition: color .3s ease-in-out;
-}
-
-a:hover,
-a:focus {
- color: var(--color-link);
-}
-
-.call-to-action {
- display: inline-block;
- padding: var(--space-small) var(--space-medium);
-
- text-decoration: none;
-
- border: .1em solid currentColor;
- border-radius: 1.5em;
-}
-
-.call-to-action:hover,
-.call-to-action:focus {
- border-color: inherit;
-}
-
-.header {
- margin-bottom: var(--space-large);
-
- font-family: var(--font-family-title);
- text-align: center;
- text-transform: lowercase;
- letter-spacing: .01em;
-}
-
-.header__title {
- display: inline-block;
-}
-
-.header__title::after {
- display: block;
- height: .3rem;
- max-width: 75%;
- margin-top: .5rem;
- margin-left: auto;
- margin-right: auto;
-
- background: linear-gradient(to right, var(--color-turquoise-1),
- var(--color-turquoise-2));
- border-radius: .5em;
-
- content: "";
-}
-
-.paragraph--featured {
- font-size: var(--size-large);
- font-weight: 600;
- text-align: center;
-}
-
-.paragraph--secondary,
-.text--secondary {
- color: var(--color-text-secondary);
-}
-
-.paragraph--center {
- text-align: center;
-}
-
-.paragraph--short {
- max-width: 45ch;
- margin-left: auto;
- margin-right: auto;
-}
-
-img,
-video {
- max-width: 100%;
-}
-
-hr {
- width: 50%;
- height: 0.3rem;
- margin: var(--space-large) auto;
-
- background: linear-gradient(to right, var(--color-turquoise-1), var(--color-turquoise-2), var(--color-turquoise-1));
- border: none;
- border-radius: 2em;
-}
-
-.sr-only {
- position: absolute;
-
- height: 1px;
- width: 1px;
-
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
-}
-
-.columns {
- display: flex;
-
- flex-direction: column;
-}
-
-@media (min-width: 48em) {
- .columns {
- flex-direction: row;
- }
-
- .columns--center {
- align-items: center;
- }
-}
-
-.columns__item {
- padding: var(--space-small);
-
- flex: 1;
-}
-
-@media (min-width: 48em) {
- .columns__item + .columns__item {
- margin-left: var(--space-large);
- }
-}
-
-.illustration {
- display: block;
- margin: var(--space-large) var(--space-medium);
-}
-
-.illustration--centered {
- margin-left: auto;
- margin-right: auto;
-}
-
-.illustration.me {
- border-radius: 50%;
-}
-
-@media (min-width: 48em) {
- .illustration--pull-left {
- float: left;
- }
-
- .illustration--pull-right {
- float: right;
- }
-
- .illustration.collaboration {
- margin-top: 6em;
- margin-right: -5em;
- padding: .5em;
-
- shape-outside: polygon(85px 130px, 300px 80px, 470px 80px, 480px 100%, 20px 100%, -50px 50%);
- }
-
- .illustration.reading {
- margin-top: 1em;
- margin-left: -14em;
- }
-
- .illustration.time {
- margin-top: -6em;
- margin-right: -13em;
- }
-
- .illustration.privacy {
- margin-top: -6em;
- margin-bottom: 0;
- margin-left: -10em;
- }
-
- .illustration.me {
- margin-right: -3em;
- padding: .5em;
-
- shape-outside: circle(53% at 125px center);
- }
-}
-
-.screenshot {
- position: relative;
-
- margin-top: var(--space-large);
- margin-bottom: var(--space-large);
- padding: 0.5rem;
-
- background: linear-gradient(135deg, var(--color-purple-1) 25%, var(--color-turquoise-1) 100%);
- border-radius: 0.75em;
- box-shadow: 1px 1px 4px 2px var(--color-grey-2);
-}
-
-.screenshot::before {
- content: '';
-
- position: absolute;
- top: 0;
- left: 0;
-
- width: 1.5em;
- height: 1.5em;
- padding: calc(var(--space-medium) * 1.5);
-
- background-repeat: no-repeat;
- background-position: center;
- background-size: 1.5em;
- background-image: url("icons/media/camera-line.svg");
- background-color: var(--color-purple-1);
- border-radius: 0.75em 0 0.75em 0;
-}
-
-.screenshot__image {
- margin: 0 auto;
-
- border-radius: 0.75em;
-}
-
-.popup {
- position: relative;
-
- display: inline-block;
-}
-
-.popup__opener {
- list-style: none;
-}
-
-.popup__opener::-webkit-details-marker {
- display: none;
-}
-
-.popup__container {
- position: fixed;
- z-index: 10;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
-
- margin-top: 0;
- margin-bottom: 0;
- padding: var(--space-small);
-
- background: linear-gradient(135deg, var(--color-turquoise-1) 50%, var(--color-turquoise-2) 100%);
-
- list-style: none;
-}
-
-.popup__item--close {
- margin-bottom: var(--space-medium);
-
- text-align: right;
-}
-
-.popup__button {
- padding: var(--space-small);
-
- font-size: var(--size-normal);
- line-height: 1.3;
-
- background-color: transparent;
- border: .1em solid var(--color-text);
- border-radius: 3rem;
-
- transition:
- background-color 0.2s ease-in-out,
- border-color 0.2s ease-in-out;
-}
-
-.popup__button:hover {
- border-color: var(--color-text);
-}
-
-.popup__link {
- display: block;
- padding: var(--space-small) var(--space-medium);
-
- font-size: var(--size-large);
- text-decoration: none;
-}
-
-.icon {
- position: relative;
-
- padding-left: 2em;
-}
-
-.icon::before {
- content: '';
-
- position: absolute;
- top: 50%;
- left: 0.25em;
-
- width: 1.5em;
- height: 1.5em;
- margin-top: -0.75em;
-
- background-repeat: no-repeat;
- background-position: center;
- background-size: 1.5em;
-}
-
-.icon--only {
- display: inline-block;
- width: 1.5em;
- height: 1.25em;
- padding-left: 0;
-}
-
-.icon--only::before {
- left: 0;
-
- margin-top: -0.6em;
-}
-
-.icon--euro::before {
- background-image: url("icons/commerce/euro-line.svg");
-}
-
-.icon--bars::before {
- background-image: url("icons/core/bars-line.svg");
-}
-
-.icon--times::before {
- background-image: url("icons/core/times-line.svg");
-}
-
-.icon--library::before {
- background-image: url("icons/essential/library-line.svg");
-}
-
-.icon--tree::before {
- background-image: url("icons/essential/tree-line.svg");
-}
-
-.icon--bookmark::before {
- background-image: url("icons/social/bookmark-line.svg");
-}
-
-.icon--thumbs-up::before {
- background-image: url("icons/social/thumbs-up-line.svg");
-}
-
-.icon--code::before {
- background-image: url("icons/technology/code-line.svg");
-}
-
-.layout__header {
- max-width: 80ch;
- margin: var(--space-small) auto;
-}
-
-.layout--error .layout__header {
- margin-top: 10rem;
- margin-bottom: 10rem;
-
- text-align: center;
-}
-
-.layout--error .layout__header a {
- font-size: var(--size-large);
- text-decoration: none;
-}
-
-.layout__content {
- max-width: 80ch;
- margin-right: auto;
- margin-left: auto;
-}
-
-.layout__content--fluid {
- max-width: none;
-}
-
-.layout--error .layout__content {
- text-align: center;
-}
-
-.layout__footer {
- display: flex;
- margin-top: 10rem;
- padding-bottom: 5rem;
-
- flex-direction: column;
- align-items: center;
- justify-content: center;
-
- background: linear-gradient(to bottom, var(--color-turquoise-3), var(--color-purple-3) 95%);
-}
-
-.layout__footer::before {
- content: '';
-
- display: block;
- width: 100%;
- height: 0.5rem;
- margin-bottom: 5rem;
-
- background-image: linear-gradient(to left, var(--color-turquoise-1) 0%, var(--color-purple-1) 50%, var(--color-turquoise-1) 100%);
- background-repeat: repeat-x;
- background-position: 0 100%;
- background-size: 200% 100%;
-
- animation: footerBarAnimation 60s linear infinite;
-}
-
-@keyframes footerBarAnimation {
- 0% {
- background-position: 200% 100%;
- }
-
- 100% {
- background-position: 0% 100%;
- }
-}
-
-.nav {
- display: flex;
-
- align-items: center;
-
- font-size: 1.1em;
-}
-
-.nav__container {
- display: flex;
- margin-top: 0;
- margin-bottom: 0;
- padding-left: 0;
-
- align-items: stretch;
- justify-content: space-evenly;
-
- list-style: none;
-}
-
-.nav__space {
- flex-grow: 1;
-}
-
-.nav__item {
- border-bottom: .1em solid var(--color-purple-3);
-}
-
-.nav__item--active {
- color: var(--color-link);
-
- border-color: var(--color-link);
-}
-
-.nav__link {
- display: block;
- padding: calc(var(--space-small) * 2);
-
- text-decoration: none;
-}
-
-.nav__link--featured {
- margin-left: var(--space-medium);
- padding-left: var(--space-medium);
- padding-right: var(--space-medium);
-
- border: .1em solid var(--color-purple-3);
- border-radius: 2em;
-
- transition:
- color .3s ease-in-out,
- border-color .3s ease-in-out;
-}
-
-.nav__link--featured:hover {
- border-color: var(--color-link);
-}
-
-.nav__image {
- display: block;
-}
-
-.section {
- margin-top: var(--space-large);
- margin-bottom: var(--space-large);
- padding: var(--space-small);
-}
-
-.section--text {
- max-width: 55ch;
- margin-left: auto;
- margin-right: auto;
- padding-left: var(--space-medium);
- padding-right: var(--space-medium);
-}
-
-.section--start {
- margin-top: 0;
- padding: 0;
-}
-
-.section__intro {
- max-width: 50ch;
- margin: var(--space-large) auto;
-
- text-align: center;
- font-style: italic;
-}
-
-.section__outro {
- margin-top: var(--space-large);
-}
-
-.hello__intro {
- margin-top: var(--space-large);
- margin-bottom: var(--space-large);
- padding: calc(var(--space-large) * 1.5) var(--space-medium);
-
- color: var(--color-white);
- text-align: center;
-
- background-image: url('intro.jpg');
- background-repeat: no-repeat;
- background-position: right;
- background-size: cover;
-}
-
-.hello__intro a {
- transition: opacity .3s ease-in-out;
-}
-
-.hello__intro a:hover,
-.hello__intro a:focus {
- color: var(--color-white);
-
- opacity: 0.7;
-}
-
-.hello__beta {
- margin-top: var(--space-medium);
- margin-bottom: var(--space-medium);
-
- text-align: center;
- font-size: var(--size-small);
- font-style: italic;
-}
-
-@media (min-width: 48em) {
- .hello__beta {
- text-align: right;
- }
-}
-
-.hello__headline {
- flex-grow: 1;
-
- font-size: var(--size-large);
- font-weight: 600;
- text-align: center;
-}
-
-.hello__registration {
- margin-bottom: var(--space-small);
- padding-left: 0;
-
- font-weight: 600;
-
- list-style: none;
-}
-
-@media (min-width: 48em) {
- .hello__registration {
- margin-top: 0;
-
- flex-direction: row;
- }
-}
-
-.hello__registration li {
- display: block;
-}
-
-.hello__registration li + li {
- margin-top: var(--space-medium);
-}
-
-.hello__registration .call-to-action {
- border-width: .13em;
-}
-
-.hello__pricing {
- margin-top: 0;
- margin-bottom: 0;
-
- text-align: center;
-}
-
-.hello__text {
- max-width: 48ch;
- margin-right: auto;
- margin-left: auto;
- padding-right: var(--space-medium);
- padding-left: var(--space-medium);
-}
-
-.hello__outro {
- margin-top: var(--space-medium);
-
- font-style: italic;
- text-align: center;
-}
-
-.hello__outro > * {
- display: block;
-}
-
-.hello__outro > * + * {
- margin-top: var(--space-small);
-}
-
-.hello__secondary {
- color: var(--color-text-secondary);
- font-size: var(--size-small);
-}
-
-@media (min-width: 48em) {
- .hello__screenshot {
- max-width: 1280px;
- margin-right: auto;
- margin-left: auto;
- }
-}
-
-.hello__more {
- max-width: 1280px;
- margin: calc(var(--space-large) * 2) auto;
- padding-right: var(--space-medium);
- padding-left: var(--space-medium);
-}
-
-.hello__more .header {
- margin-bottom: 0;
-}
-
-.hello__columns {
- display: flex;
-
- flex-direction: column;
- align-items: center;
-}
-
-@media (min-width: 48em) {
- .hello__columns {
- flex-direction: row;
- }
-}
-
-.hello__column {
- flex: 1;
-}
-
-@media (min-width: 48em) {
- .hello__column + .hello__column {
- margin-left: var(--space-large);
- }
-}
-
-.features {
- max-width: 45ch;
- margin: var(--space-large) auto;
- padding-left: 0;
-
- text-align: center;
-
- list-style: none;
-}
-
-.features__item + .features__item {
- padding-top: var(--space-large);
-}
-
-.features__icon {
- width: 2em;
- height: 2em;
-}
-
-.features__icon::before {
- width: 2em;
- height: 2em;
-
- background-size: 2em;
-}
-
-.features__title {
- display: block;
- margin-top: var(--space-small);
- margin-bottom: var(--space-small);
-
- font-size: var(--size-large);
-}
-
-.features__description {
- color: var(--color-text-secondary);
- font-size: var(--size-small);
- font-style: italic;
-}
-
-.revenues {
- display: flex;
- margin-top: var(--space-large);
- margin-bottom: var(--space-large);
- padding-left: 0;
-
- justify-content: center;
-
- list-style: none;
-}
-
-.revenues__item {
- margin: var(--space-medium);
- padding: var(--space-small);
-}
-
-.revenues__amount {
- font-weight: bold;
- font-size: var(--size-large);
-}
-
-.revenues__label {
- color: var(--color-grey-1);
- font-size: var(--size-small);
-}
-
-.revenues__actions {
- display: flex;
- margin-top: var(--space-large);
- margin-bottom: var(--space-large);
-
- align-items: stretch;
- justify-content: space-around;
-}
-
-.revenues__button {
- display: flex;
-
- flex: 1;
- align-items: center;
- justify-content: center;
-
- text-align: center;
-}
-
-.revenues__button + .revenues__button {
- margin-left: var(--space-medium);
-}
-
-.price {
- margin-bottom: calc(var(--space-medium) * 2);
-
- text-align: center;
-}
-
-.price__unique {
- font-size: calc(var(--size-large) * 1.2);
-}
-
-.price__choose {
- display: block;
-
- font-style: italic;
-}
-
-.tariffs {
- display: flex;
- margin-top: var(--space-large);
- margin-bottom: var(--space-large);
- padding-left: 0;
-
- flex-direction: column;
-
- list-style: none;
-}
-
-.tariffs__item {
- flex: 1;
-}
-
-.tariffs__item + .tariffs__item {
- margin-top: var(--space-medium);
-}
-
-@media (min-width: 48em) {
- .tariffs {
- flex-direction: row;
- }
-
- .tariffs__item + .tariffs__item {
- margin-top: 0;
- margin-left: var(--space-medium);
- }
-}
-
-.tariffs__name {
- display: block;
-
- text-align: center;
-}
-
-.tariffs__description {
- display: block;
- margin-top: var(--space-small);
-
- font-size: var(--size-small);
-}
-
-.gauge {
- --gauge-value: 5%;
-
- margin-top: var(--space-large);
- margin-bottom: var(--space-large);
-}
-
-.gauge__container {
- position: relative;
-
- display: flex;
- max-width: 8em;
- height: 30em;
- margin-left: auto;
- margin-right: auto;
- padding-left: 0;
-
- flex-direction: column;
-
- border: .2em solid var(--color-turquoise-2);
- border-radius: 2em;
-
- list-style: none;
-}
-
-@media (min-width: 48em) {
- .gauge__container {
- max-width: none;
- height: auto;
-
- flex-direction: row;
- }
-}
-
-.gauge__current {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- z-index: -1;
-
- height: var(--gauge-value);
-
- background-color: #ACE6E1;
-
- border-radius: 2em 2em 0 0;
-}
-
-@media (min-width: 48em) {
- .gauge__current {
- bottom: 0;
-
- height: auto;
- width: var(--gauge-value);
-
- border-radius: 2em 0 0 2em;
- }
-}
-
-.gauge__item {
- display: flex;
- padding: var(--space-small) var(--space-medium);
-
- flex: 1;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-
- font-size: var(--size-small);
- text-align: center;
-}
-
-.gauge__item + .gauge__item {
- border-top: .2em solid var(--color-turquoise-2);
-}
-
-@media (min-width: 48em) {
- .gauge__item + .gauge__item {
- border-top: none;
- border-left: .2em solid var(--color-turquoise-2);
- }
-}
-
-.gauge__item--purchases {
- flex-basis: 30%;
-}
-
-.gauge__item--services {
- flex-basis: 0%;
-}
-
-.gauge__item--salary {
- flex-basis: 70%;
-}
-
-.gauge__status {
- text-align: center;
-}
-
-.gauge__about {
- font-size: var(--size-small);
- text-align: center;
- font-style: italic;
-}
-
-.manifesto {
- max-width: 35ch;
- margin-left: auto;
- margin-right: auto;
- padding-left: 0;
-
- text-align: center;
-
- list-style: none;
-}
-
-.manifesto__item {
- margin-top: var(--space-large);
-
- counter-increment: manifesto-counter;
-}
-
-.manifesto__item::before {
- display: block;
- height: 2.5rem;
-
- color: var(--color-text-secondary);
- font-size: var(--size-small);
-
- content: "· " counter(manifesto-counter) " ·";
-}
-
-.faq__question {
- font-weight: bold;
-
- counter-increment: manifesto-counter;
-}
-
-.faq__question::before {
- width: 2.5rem;
- height: 2.5rem;
-
- color: var(--color-text-secondary);
- font-size: var(--size-small);
-
- content: counter(manifesto-counter) " ·";
-}
-
-.faq__answer {
- margin-bottom: var(--space-medium);
-}
-
-.signature {
- font-size: var(--size-large);
- font-style: italic;
- text-align: right;
-}
-
-.copyright {
- font-size: var(--size-small);
- font-style: italic;
- text-align: center;
-}
-
-.tour__video video {
- width: 100%;
-
- aspect-ratio: 16/10;
-}
-
-.tour__video-transcript {
- max-width: 45ch;
- margin: calc(var(--space-large) * -1) auto var(--space-large);
- padding: var(--space-small) var(--space-medium);
-
- background-color: var(--color-grey-2);
-}
-
-.tour__video-transcript summary {
- cursor: pointer;
-}
-
-.tour__navigation {
- margin-top: var(--space-large);
- margin-bottom: var(--space-large);
-
- text-align: center;
-}
-
-.tour__navigation-info {
- color: var(--color-text-secondary);
- font-size: var(--size-small);
-}
-
-.tour__navigation-next,
-.tour__navigation-previous,
-.tour__navigation-registration {
- display: inline-block;
- margin-bottom: var(--space-medium);
-}
-
-.tour__navigation-previous {
- font-style: italic;
-}
-
-.tour__navigation-home {
- font-size: var(--size-small);
-}
-
-.error-box {
- position: absolute;
- left: 0;
- right: 0;
-
- padding: var(--space-medium);
-
- text-align: left;
- color: var(--color-white);
-
- background-color: var(--color-black);
-
- overflow: auto;
-}
-
-@media (max-width: 800px) {
- .no-mobile {
- display: none;
- }
-}
-
-@media (min-width: 800px) {
- .only-mobile {
- display: none;
- }
-}
-
-.accessibility-nav {
- position: absolute;
-
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
-
- width: 1px;
- height: 1px;
-}
-
-.accessibility-nav:focus {
- top: 0.75rem;
- left: 2rem;
-
- clip: auto;
-
- width: auto;
- height: auto;
-}
diff --git a/public/static/style/_reset.css b/public/static/style/_reset.css
new file mode 100644
index 00000000..58a4ec97
--- /dev/null
+++ b/public/static/style/_reset.css
@@ -0,0 +1,9 @@
+p,
+h1,
+h2,
+h3,
+ul,
+ol {
+ margin-top: 0;
+ margin-bottom: 0;
+}
diff --git a/public/static/style/components/accordions.css b/public/static/style/components/accordions.css
new file mode 100644
index 00000000..dc49bd02
--- /dev/null
+++ b/public/static/style/components/accordions.css
@@ -0,0 +1,43 @@
+.accordion {
+ border-bottom: 1px solid var(--color-green-caribbean);
+}
+
+.accordion__title {
+ --accordion-icon-size: 1.5rem;
+
+ padding-top: var(--space-medium);
+ padding-right: calc(var(--accordion-icon-size) + var(--space-small));
+ padding-bottom: var(--space-medium);
+
+ color: var(--color-green-gable);
+ font-weight: 600;
+
+ background-image: url("../../icons/angle-down.svg");
+ background-repeat: no-repeat;
+ background-position: right 0 top 50%;
+ background-size: var(--accordion-icon-size);
+
+ list-style: none;
+}
+
+.accordion__title:focus {
+ outline: none;
+}
+
+.accordion__title:focus-visible {
+ outline: var(--outline-width) solid var(--outline-color);
+ outline-offset: var(--outline-width);
+}
+
+.accordion[open] .accordion__title {
+ background-image: url("../../icons/angle-up.svg");
+}
+
+.accordion__title::-webkit-details-marker {
+ display: none;
+}
+
+.accordion__body {
+ padding-top: var(--space-large);
+ padding-bottom: var(--space-large);
+}
diff --git a/public/static/style/components/anchors.css b/public/static/style/components/anchors.css
new file mode 100644
index 00000000..0e38848e
--- /dev/null
+++ b/public/static/style/components/anchors.css
@@ -0,0 +1,14 @@
+a {
+ color: var(--color-green-gable);
+}
+
+h1 a,
+h2 a,
+h3 a {
+ display: inline-block;
+}
+
+.anchor--nostyle {
+ color: currentcolor;
+ text-decoration: none;
+}
diff --git a/public/static/style/components/badges.css b/public/static/style/components/badges.css
new file mode 100644
index 00000000..17d682df
--- /dev/null
+++ b/public/static/style/components/badges.css
@@ -0,0 +1,9 @@
+.badge {
+ padding-right: var(--space-small);
+ padding-left: var(--space-small);
+
+ color: var(--color-green-forest);
+
+ background-color: var(--color-green-topaz);
+ border-radius: var(--border-radius);
+}
diff --git a/public/static/style/components/buttons.css b/public/static/style/components/buttons.css
new file mode 100644
index 00000000..1207202a
--- /dev/null
+++ b/public/static/style/components/buttons.css
@@ -0,0 +1,63 @@
+button,
+.button {
+ --button-padding: var(--space-small) var(--space-medium);
+ --button-color: var(--color-green-forest);
+ --button-background-color: var(--color-pampas);
+ --button-border-color: currentcolor;
+
+ display: inline-block;
+ padding: var(--button-padding);
+
+ color: var(--button-color);
+ font-family: inherit;
+ font-size: var(--font-size-normal);
+ font-weight: 600;
+ line-height: 1.5;
+ text-align: center;
+ text-decoration: none;
+
+ background-color: var(--button-background-color);
+ border: 1px solid var(--button-border-color);
+ border-radius: var(--border-radius);
+
+ transition:
+ background-color 0.2s ease-in-out,
+ border-color 0.2s ease-in-out;
+
+ cursor: pointer;
+}
+
+button:hover,
+.button:hover,
+button:active,
+.button:active {
+ --button-background-color: var(--color-white);
+}
+
+.button--primary {
+ --button-color: var(--color-green-forest);
+ --button-background-color: var(--color-green-caribbean);
+ --button-border-color: transparent;
+}
+
+.button--primary:hover,
+.button--primary:active {
+ --button-background-color: var(--color-green-topaz);
+}
+
+.button--ghost {
+ --button-color: var(--color-pampas);
+ --button-background-color: transparent;
+ --button-border-color: transparent;
+}
+
+.button--ghost:hover,
+.button--ghost:active {
+ --button-background-color: transparent;
+ --button-border-color: currentcolor;
+}
+
+.button--block {
+ display: block;
+ width: 100%;
+}
diff --git a/public/static/style/components/cards.css b/public/static/style/components/cards.css
new file mode 100644
index 00000000..d0e75cee
--- /dev/null
+++ b/public/static/style/components/cards.css
@@ -0,0 +1,74 @@
+.card {
+ --card-color: var(--color-green-rangoon);
+ --card-background-color: var(--color-pampas);
+
+ position: relative;
+ display: flex;
+ padding: var(--space-medium);
+
+ flex-direction: column;
+
+ color: var(--card-color);
+
+ background-color: var(--card-background-color);
+ border-radius: var(--border-radius);
+}
+
+@media (min-width: 800px) {
+ .card {
+ padding: var(--space-large);
+ }
+}
+
+.card--gable {
+ --card-color: var(--color-pampas);
+ --card-background-color: var(--color-green-gable);
+}
+
+.card--topaz {
+ --card-background-color: var(--color-green-topaz);
+}
+
+.card--caribbean {
+ --card-background-color: var(--color-green-caribbean);
+}
+
+.card--featured {
+ z-index: 0;
+}
+
+.card--featured::before {
+ content: "";
+
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+
+ width: 100%;
+ height: 100%;
+
+ background-image: url("../../icons/star.svg");
+ background-repeat: no-repeat;
+ background-position: right top;
+ background-size: 200px;
+
+ opacity: 0.06;
+}
+
+.card__body {
+ flex: 1;
+}
+
+.card__illustration {
+ background-color: var(--color-white);
+ border: 15px solid var(--color-white);
+ border-radius: var(--border-radius);
+}
+
+.card__illustration img {
+ display: block;
+ height: 120px;
+ margin-right: auto;
+ margin-left: auto;
+}
diff --git a/public/static/style/components/code.css b/public/static/style/components/code.css
new file mode 100644
index 00000000..e4c9a1b8
--- /dev/null
+++ b/public/static/style/components/code.css
@@ -0,0 +1,30 @@
+code,
+kbd {
+ padding-right: var(--space-smaller);
+ padding-left: var(--space-smaller);
+
+ color: var(--color-green-forest);
+
+ background-color: var(--color-green-gossip);
+ border-radius: 5px;
+}
+
+pre {
+ padding: var(--space-medium);
+
+ overflow: auto;
+
+ color: var(--color-pampas);
+
+ background-color: var(--color-green-gable);
+ border-radius: var(--border-radius);
+}
+
+pre code {
+ padding: 0;
+
+ color: var(--color-pampas);
+
+ background-color: transparent;
+ border: none;
+}
diff --git a/public/static/style/components/error_box.css b/public/static/style/components/error_box.css
new file mode 100644
index 00000000..a49b476d
--- /dev/null
+++ b/public/static/style/components/error_box.css
@@ -0,0 +1,11 @@
+.error-box {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding: var(--space-medium);
+
+ font-size: var(--font-size-big);
+
+ border-radius: 0;
+
+ overflow: auto;
+}
diff --git a/public/static/style/components/forms/amount-selectors.css b/public/static/style/components/forms/amount-selectors.css
new file mode 100644
index 00000000..d838fef1
--- /dev/null
+++ b/public/static/style/components/forms/amount-selectors.css
@@ -0,0 +1,62 @@
+.amount-selector {
+ text-align: center;
+}
+
+.amount-selector__choose-label {
+ display: block;
+
+ font-size: var(--font-size-big);
+}
+
+.amount-selector__input {
+ max-width: 5em;
+}
+
+.amount-selector__label {
+ width: 100%;
+ padding: var(--space-medium);
+
+ font-size: var(--font-size-big);
+ font-weight: normal;
+
+ background-color: var(--color-pampas);
+ border: 1px solid var(--color-green-caribbean);
+ border-radius: var(--border-radius);
+
+ transition:
+ background-color .2s ease-in-out,
+ border-color .2s ease-in-out;
+}
+
+@media (min-width: 800px) {
+ .amount-selector__label {
+ flex-direction: column;
+ }
+}
+
+.amount-selector__radio:checked + .amount-selector__label {
+ background-color: var(--color-green-caribbean);
+}
+
+@media (min-width: 800px) {
+ .amount-selector__radio + .amount-selector__label::before {
+ margin-right: 0;
+ margin-bottom: var(--space-medium);
+ }
+
+ .amount-selector__radio:checked + .amount-selector__label::after {
+ margin-top: 5px;
+ margin-left: 0;
+ }
+}
+
+.amount-selector__amount {
+ display: block;
+
+ font-weight: bold;
+}
+
+.amount-selector__title {
+ font-size: var(--font-size-smaller);
+ font-style: italic;
+}
diff --git a/public/static/style/components/forms/checkboxes.css b/public/static/style/components/forms/checkboxes.css
new file mode 100644
index 00000000..89711d47
--- /dev/null
+++ b/public/static/style/components/forms/checkboxes.css
@@ -0,0 +1,79 @@
+/**
+ * Accessible custom checkboxes and radio buttons.
+ * @see https://www.a11ywithlindsey.com/blog/create-custom-keyboard-accesible-checkboxes
+ */
+input[type="checkbox"] {
+ position: absolute;
+
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+
+ width: 1px;
+ height: 1px;
+}
+
+input[type="checkbox"] + label {
+ position: relative;
+
+ display: inline-flex;
+
+ align-items: center;
+}
+
+input[type="checkbox"][hidden] + label {
+ display: none;
+}
+
+input[type="checkbox"] + label::before {
+ content: "";
+
+ position: relative;
+
+ width: 25px;
+ height: 25px;
+ margin-right: var(--space-small);
+
+ flex-shrink: 0;
+
+ background-color: var(--color-white);
+ border: 1px solid var(--color-green-topaz);
+ border-radius: 5px;
+
+ transition:
+ border-color 0.2s ease-in-out,
+ background-color 0.2s ease-in-out;
+}
+
+input[type="checkbox"]:focus + label {
+ outline: var(--outline-width) solid var(--outline-color);
+ outline-offset: var(--outline-offset);
+}
+
+input[type="checkbox"]:checked + label::before {
+ border-color: var(--color-green-gable);
+}
+
+input[type="checkbox"]:checked + label::after {
+ content: "";
+
+ position: absolute;
+
+ width: 15px;
+ height: 7px;
+ margin-top: -4px;
+ margin-left: 5px;
+
+ border-bottom: 2px solid var(--color-green-gable);
+ border-left: 2px solid var(--color-green-gable);
+
+ transform: rotate(-45deg);
+}
+
+input[type="checkbox"][disabled] + label {
+ color: var(--color-corduroy);
+ font-weight: normal;
+}
+
+input[type="checkbox"][disabled] + label::before {
+ border-color: var(--color-corduroy);
+}
diff --git a/public/static/style/components/forms/fieldsets.css b/public/static/style/components/forms/fieldsets.css
new file mode 100644
index 00000000..ef9d17f8
--- /dev/null
+++ b/public/static/style/components/forms/fieldsets.css
@@ -0,0 +1,13 @@
+fieldset {
+ min-width: auto;
+ padding: var(--space-medium);
+
+ background-color: var(--color-white);
+ border: 1px solid var(--color-green-gable);
+ border-radius: var(--border-radius);
+}
+
+legend {
+ padding-right: var(--space-medium);
+ padding-left: var(--space-medium);
+}
diff --git a/public/static/style/components/forms/groups.css b/public/static/style/components/forms/groups.css
new file mode 100644
index 00000000..82a0d258
--- /dev/null
+++ b/public/static/style/components/forms/groups.css
@@ -0,0 +1,8 @@
+.form-group__caption {
+ font-size: var(--font-size-small);
+}
+
+.form-group__error {
+ color: var(--color-red-persian);
+ font-weight: 600;
+}
diff --git a/public/static/style/components/forms/labels.css b/public/static/style/components/forms/labels.css
new file mode 100644
index 00000000..0a48af83
--- /dev/null
+++ b/public/static/style/components/forms/labels.css
@@ -0,0 +1,4 @@
+label {
+ color: var(--color-green-gable);
+ font-weight: bold;
+}
diff --git a/public/static/style/components/forms/radios.css b/public/static/style/components/forms/radios.css
new file mode 100644
index 00000000..b9950411
--- /dev/null
+++ b/public/static/style/components/forms/radios.css
@@ -0,0 +1,72 @@
+/**
+ * Accessible custom checkboxes and radio buttons.
+ * @see https://www.a11ywithlindsey.com/blog/create-custom-keyboard-accesible-checkboxes
+ */
+input[type="radio"] {
+ position: absolute;
+
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+
+ width: 1px;
+ height: 1px;
+}
+
+input[type="radio"] + label {
+ position: relative;
+
+ display: inline-flex;
+
+ align-items: center;
+}
+
+input[type="radio"] + label::before {
+ content: "";
+
+ position: relative;
+
+ width: 25px;
+ height: 25px;
+ margin-right: var(--space-small);
+
+ flex-shrink: 0;
+
+ background-color: var(--color-white);
+ border: 1px solid var(--color-green-topaz);
+ border-radius: 50%;
+
+ transition:
+ border-color 0.2s ease-in-out,
+ background-color 0.2s ease-in-out;
+}
+
+input[type="radio"]:focus + label {
+ outline: var(--outline-width) solid var(--outline-color);
+ outline-offset: var(--outline-offset);
+}
+
+input[type="radio"]:checked + label::before {
+ border-color: var(--color-green-gable);
+}
+
+input[type="radio"]:checked + label::after {
+ content: "";
+
+ position: absolute;
+
+ width: 15px;
+ height: 15px;
+ margin-left: 5px;
+
+ background-color: var(--color-green-gable);
+ border-radius: 100%;
+}
+
+input[type="radio"][disabled] + label {
+ color: var(--color-corduroy);
+ font-weight: normal;
+}
+
+input[type="radio"][disabled] + label::before {
+ border-color: var(--color-corduroy);
+}
diff --git a/public/static/style/components/forms/selects.css b/public/static/style/components/forms/selects.css
new file mode 100644
index 00000000..781b1cd4
--- /dev/null
+++ b/public/static/style/components/forms/selects.css
@@ -0,0 +1,29 @@
+select {
+ width: 100%;
+ padding: var(--space-small);
+
+ color: inherit;
+ font-family: inherit;
+ font-size: var(--font-size-normal);
+ line-height: 1.5;
+ text-overflow: ellipsis;
+
+ background-color: var(--color-white);
+ border: 1px solid var(--color-green-topaz);
+ border-radius: var(--border-radius);
+
+ transition:
+ background-color 0.2s ease-in-out,
+ border-color 0.2s ease-in-out;
+}
+
+select:not([multiple]) {
+ padding-right: calc(var(--space-small) * 2 + 1.5rem);
+
+ background-image: url("../../../icons/angle-down.svg");
+ background-repeat: no-repeat;
+ background-position: right var(--space-small) top 50%;
+ background-size: 1.5rem;
+
+ appearance: none;
+}
diff --git a/public/static/style/components/forms/texts.css b/public/static/style/components/forms/texts.css
new file mode 100644
index 00000000..f226cb6a
--- /dev/null
+++ b/public/static/style/components/forms/texts.css
@@ -0,0 +1,28 @@
+input,
+textarea {
+ width: 100%;
+ padding: var(--space-small);
+
+ color: inherit;
+ font-family: inherit;
+ font-size: var(--font-size-normal);
+ line-height: 1.5;
+
+ background-color: var(--color-white);
+ border: 1px solid var(--color-green-topaz);
+ border-radius: var(--border-radius);
+
+ transition:
+ background-color 0.2s ease-in-out,
+ border-color 0.2s ease-in-out;
+}
+
+textarea {
+ max-width: 100%;
+ min-height: 15rem;
+}
+
+input[aria-invalid="true"],
+textarea[aria-invalid="true"] {
+ border-color: var(--color-red-persian);
+}
diff --git a/public/static/style/components/gauge.css b/public/static/style/components/gauge.css
new file mode 100644
index 00000000..379f9af6
--- /dev/null
+++ b/public/static/style/components/gauge.css
@@ -0,0 +1,94 @@
+.gauge {
+ --gauge-value: 0%;
+
+ padding: var(--space-large);
+
+ background-color: var(--color-white);
+ border-radius: var(--border-radius);
+}
+
+.gauge__container {
+ position: relative;
+ z-index: 1;
+
+ display: flex;
+ max-width: 8em;
+ height: 30em;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 0;
+
+ flex-direction: column;
+
+ border: 2px solid var(--color-green-gable);
+ border-radius: var(--border-radius);
+
+ list-style: none;
+}
+
+@media (min-width: 800px) {
+ .gauge__container {
+ max-width: none;
+ height: auto;
+
+ flex-direction: row;
+ }
+}
+
+.gauge__current {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: -1;
+
+ height: var(--gauge-value);
+
+ color: transparent;
+
+ background-color: var(--color-green-topaz);
+ border-radius: calc(var(--border-radius) - 2px) calc(var(--border-radius) - 2px) 0 0;
+}
+
+@media (min-width: 800px) {
+ .gauge__current {
+ bottom: 0;
+
+ height: auto;
+ width: var(--gauge-value);
+
+ border-radius: calc(var(--border-radius) - 2px) 0 0 calc(var(--border-radius) - 2px)
+ }
+}
+
+.gauge__item {
+ display: flex;
+ padding: var(--space-small) var(--space-medium);
+
+ flex: 1;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ font-size: var(--font-size-small);
+ text-align: center;
+}
+
+.gauge__item + .gauge__item {
+ border-top: 2px solid var(--color-green-gable);
+}
+
+@media (min-width: 800px) {
+ .gauge__item + .gauge__item {
+ border-top: none;
+ border-left: 2px solid var(--color-green-gable);
+ }
+}
+
+.gauge__item--purchases {
+ flex-basis: 30%;
+}
+
+.gauge__item--salary {
+ flex-basis: 70%;
+}
diff --git a/public/static/style/components/grids.css b/public/static/style/components/grids.css
new file mode 100644
index 00000000..7e7cef1e
--- /dev/null
+++ b/public/static/style/components/grids.css
@@ -0,0 +1,10 @@
+.grid {
+ display: grid;
+
+ grid-gap: var(--space-large);
+ grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+}
+
+.grid > * {
+ min-width: 0;
+}
diff --git a/public/static/style/components/icons.css b/public/static/style/components/icons.css
new file mode 100644
index 00000000..3d7d91de
--- /dev/null
+++ b/public/static/style/components/icons.css
@@ -0,0 +1,40 @@
+svg {
+ pointer-events: none;
+ user-select: none;
+}
+
+.icon {
+ display: inline-block;
+ width: 1.5em;
+ height: auto;
+
+ vertical-align: top;
+
+ fill: currentcolor;
+}
+
+.icon.spin {
+ animation: icon-spin 5s linear infinite;
+}
+
+@keyframes icon-spin {
+ from {
+ transform: rotate(0deg);
+ }
+
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.icon.rotate90 {
+ transform: rotate(90deg);
+}
+
+.icon.rotate180 {
+ transform: rotate(180deg);
+}
+
+.icon.rotate270 {
+ transform: rotate(270deg);
+}
diff --git a/public/static/style/components/images.css b/public/static/style/components/images.css
new file mode 100644
index 00000000..5853b63e
--- /dev/null
+++ b/public/static/style/components/images.css
@@ -0,0 +1,32 @@
+img {
+ max-width: 100%;
+}
+
+a > img {
+ vertical-align: middle;
+}
+
+.illustration {
+ border: 15px solid var(--color-white);
+ border-radius: var(--border-radius);
+}
+
+.screenshot {
+ padding: var(--space-larger) var(--space-large);
+
+ text-align: center;
+
+ background-color: var(--color-pampas);
+ border-radius: var(--border-radius);
+}
+
+figure {
+ margin-right: 0;
+ margin-left: 0;
+}
+
+figcaption {
+ padding: var(--space-smaller);
+
+ font-style: italic;
+}
diff --git a/public/static/style/components/lists.css b/public/static/style/components/lists.css
new file mode 100644
index 00000000..8e43b37a
--- /dev/null
+++ b/public/static/style/components/lists.css
@@ -0,0 +1,40 @@
+.list--nostyle {
+ padding: 0;
+
+ list-style: none;
+}
+
+.list--inline > * {
+ display: inline-block;
+}
+
+.list--padded > li {
+ padding: var(--space-medium);
+}
+
+.list--border {
+ border: 1px solid var(--color-green-gable);
+ border-radius: var(--border-radius);
+}
+
+.list--border > li + li {
+ border-top: 1px solid var(--color-green-gable);
+}
+
+.list--strip > li:first-child {
+ border-top-left-radius: var(--border-radius);
+ border-top-right-radius: var(--border-radius);
+}
+
+.list--strip > li:last-child {
+ border-bottom-right-radius: var(--border-radius);
+ border-bottom-left-radius: var(--border-radius);
+}
+
+.list--strip > li:nth-child(odd) {
+ background-color: var(--color-pampas);
+}
+
+.list--strip > li:nth-child(even) {
+ background-color: var(--color-white);
+}
diff --git a/public/static/style/components/panels.css b/public/static/style/components/panels.css
new file mode 100644
index 00000000..7a6e9668
--- /dev/null
+++ b/public/static/style/components/panels.css
@@ -0,0 +1,60 @@
+.panel {
+ --panel-padding: var(--space-large) var(--space-medium);
+ --panel-background-color: var(--color-white);
+ --panel-color: var(--color-green-rangoon);
+
+ padding: var(--panel-padding);
+
+ color: var(--panel-color);
+
+ background-color: var(--panel-background-color);
+}
+
+@media (min-width: 800px) {
+ .panel {
+ --panel-padding: var(--space-larger) var(--space-large);
+ }
+}
+
+.panel--rounded {
+ border-radius: var(--border-radius);
+}
+
+.panel--grey {
+ --panel-background-color: var(--color-pampas);
+}
+
+.panel--primary {
+ --panel-background-color: var(--color-green-gable);
+ --panel-color: var(--color-pampas);
+}
+
+.panel--primary h2 {
+ color: currentcolor;
+}
+
+.panel--topaz {
+ --panel-background-color: var(--color-green-topaz);
+}
+
+.panel--header {
+ --panel-padding: var(--space-large) var(--space-medium);
+
+ font-size: 1.1em;
+}
+
+@media (min-width: 800px) {
+ .panel--header {
+ --panel-padding: var(--space-larger);
+ }
+}
+
+.panel--header__illustration {
+ max-height: 200px;
+}
+
+@media (min-width: 800px) {
+ .panel--header__illustration {
+ max-height: 300px;
+ }
+}
diff --git a/public/static/style/components/quotes.css b/public/static/style/components/quotes.css
new file mode 100644
index 00000000..18fab340
--- /dev/null
+++ b/public/static/style/components/quotes.css
@@ -0,0 +1,11 @@
+blockquote {
+ margin-left: 0;
+ margin-right: 0;
+ padding: var(--space-small) var(--space-medium);
+
+ font-style: italic;
+
+ background-color: var(--color-pampas);
+ border-left: 10px solid var(--color-green-caribbean);
+ border-radius: var(--border-radius);
+}
diff --git a/public/static/style/components/tables.css b/public/static/style/components/tables.css
new file mode 100644
index 00000000..6791696d
--- /dev/null
+++ b/public/static/style/components/tables.css
@@ -0,0 +1,18 @@
+table {
+ width: 100%;
+
+ border-collapse: collapse;
+}
+
+td,
+th {
+ padding: var(--space-small);
+
+ border: 1px solid var(--color-green-gable);
+}
+
+th {
+ background-color: var(--color-green-gable);
+
+ color: var(--color-pampas);
+}
diff --git a/public/static/style/custom/features.css b/public/static/style/custom/features.css
new file mode 100644
index 00000000..d6110fa7
--- /dev/null
+++ b/public/static/style/custom/features.css
@@ -0,0 +1,5 @@
+@media (min-width: 800px) {
+ .features__feature--reverse {
+ flex-direction: row-reverse;
+ }
+}
diff --git a/public/static/style/custom/home.css b/public/static/style/custom/home.css
new file mode 100644
index 00000000..f4247f3e
--- /dev/null
+++ b/public/static/style/custom/home.css
@@ -0,0 +1,26 @@
+.home__panel--header {
+ padding-bottom: var(--space-larger);
+}
+
+.home__anchor--bigscroll {
+ position: absolute;
+ left: 50%;
+
+ display: inline-flex;
+ width: 150px;
+
+ align-items: center;
+ justify-content: center;
+
+ font-size: var(--font-size-big);
+
+ background-color: var(--color-green-topaz);
+ border-radius: 50%;
+
+ transform: translateX(-50%);
+ aspect-ratio: 1/1;
+}
+
+.home__panel--advantages {
+ padding-top: calc(1.5 * var(--space-larger));
+}
diff --git a/public/static/style/layout/aside.css b/public/static/style/layout/aside.css
new file mode 100644
index 00000000..c9464501
--- /dev/null
+++ b/public/static/style/layout/aside.css
@@ -0,0 +1,93 @@
+.layout__aside {
+ --header-padding-y: var(--space-medium);
+ --header-padding-x: var(--space-medium);
+ --header-logo-height: 40px;
+ --header-height: calc(var(--header-padding-y) * 2 + var(--header-logo-height));
+
+
+ position: relative;
+
+ min-width: 300px;
+ padding: var(--header-padding-y) var(--header-padding-x);
+
+ color: var(--color-pampas);
+
+ background-color: var(--color-green-gable);
+}
+
+@media (max-width: 799px) {
+ .layout__aside {
+ display: flex;
+ }
+}
+
+@media (min-width: 800px) {
+ .layout__aside {
+ min-height: 100vh;
+ }
+
+ .layout__aside > * + * {
+ margin-top: var(--space-large);
+ }
+}
+
+.layout__aside .aside__logo a {
+ display: inline-block;
+ height: var(--header-logo-height);
+}
+
+@media (max-width: 799px) {
+ .layout__aside .aside__logo {
+ flex: 1;
+ }
+}
+
+@media (min-width: 800px) {
+ .layout__aside .aside__logo {
+ text-align: center;
+ }
+}
+
+@media (max-width: 799px) {
+ .layout__aside .aside__navigation .navigation__container {
+ position: absolute;
+ z-index: 100;
+ top: var(--header-height);
+ right: 0;
+ left: 0;
+
+ padding: var(--space-large) var(--space-medium);
+
+ align-items: stretch;
+ flex-direction: column;
+ gap: var(--space-smaller);
+
+ background-color: var(--color-green-gable);
+ border-bottom: 2px solid var(--color-green-caribbean);
+ box-shadow: 0 4px 6px 0 var(--color-box-shadow);
+ }
+}
+
+.layout__aside .aside__navigation .navigation__link {
+ display: block;
+ padding: var(--space-small) var(--space-medium);
+
+ color: currentcolor;
+ font-weight: 600;
+ text-decoration: none;
+
+ border: 1px solid transparent;
+ border-radius: var(--border-radius);
+
+ transition: color 0.2s ease-in-out;
+}
+
+.layout__aside .aside__navigation .navigation__link:hover {
+ color: var(--color-green-caribbean);
+}
+
+.layout__aside .aside__navigation .navigation__link[aria-current="page"] {
+ color: var(--color-green-caribbean);
+
+ border-color: currentcolor;
+}
diff --git a/public/static/style/layout/breadcrumb.css b/public/static/style/layout/breadcrumb.css
new file mode 100644
index 00000000..512c9b91
--- /dev/null
+++ b/public/static/style/layout/breadcrumb.css
@@ -0,0 +1,49 @@
+.layout__breadcrumb {
+ padding-right: var(--space-medium);
+ padding-left: var(--space-medium);
+
+ color: var(--color-pampas);
+
+ background-color: var(--color-green-gable);
+}
+
+@media (min-width: 800px) {
+ .layout__breadcrumb {
+ padding-right: var(--space-large);
+ padding-left: var(--space-large);
+ }
+}
+
+.layout__breadcrumb .breadcrumb__item {
+ display: inline-block;
+}
+
+.layout__breadcrumb .breadcrumb__item:not(:last-child)::after {
+ content: "";
+
+ display: inline-block;
+ width: 0.5rem;
+ height: 0.5rem;
+ margin-top: -0.1rem;
+ margin-right: 0.5rem;
+ margin-left: 0.25rem;
+
+ vertical-align: middle;
+
+ border-top: 1px solid currentcolor;
+ border-right: 1px solid currentcolor;
+
+ transform: rotate(45deg);
+}
+
+.layout__breadcrumb .breadcrumb__link {
+ display: inline-block;
+ padding: var(--space-smaller) var(--space-small);
+
+ color: currentcolor;
+ text-decoration: none;
+}
+
+.layout__breadcrumb .breadcrumb__link[aria-current="page"] {
+ color: var(--color-green-caribbean);
+}
diff --git a/public/static/style/layout/content.css b/public/static/style/layout/content.css
new file mode 100644
index 00000000..d3390fa4
--- /dev/null
+++ b/public/static/style/layout/content.css
@@ -0,0 +1,3 @@
+.layout__content:focus {
+ outline: none;
+}
diff --git a/public/static/style/layout/footer.css b/public/static/style/layout/footer.css
new file mode 100644
index 00000000..9c39af07
--- /dev/null
+++ b/public/static/style/layout/footer.css
@@ -0,0 +1,49 @@
+.layout__footer {
+ padding: var(--space-larger) var(--space-large);
+
+ color: var(--color-pampas);
+
+ background-color: var(--color-green-gable);
+}
+
+@media(max-width: 799px) {
+ .layout__footer {
+ text-align: center;
+ }
+
+ .layout__footer .cols--center {
+ align-items: center;
+ }
+}
+
+.layout__footer .footer__link {
+ display: inline-block;
+ padding: var(--space-smaller);
+
+ color: currentcolor;
+ font-weight: 600;
+ text-decoration: none;
+
+ transition: color 0.2s ease-in-out;
+}
+
+.layout__footer .footer__license a {
+ color: currentcolor;
+
+ transition: color 0.2s ease-in-out;
+}
+
+.layout__footer .footer__link:hover,
+.layout__footer .footer__license a:hover {
+ color: var(--color-green-caribbean);
+ text-decoration: underline;
+}
+
+.layout__footer .footer__logo {
+ width: 120px;
+}
+
+.layout__footer .footer__separator {
+ border: none;
+ border-top: 1px solid var(--color-pampas);
+}
diff --git a/public/static/style/layout/header.css b/public/static/style/layout/header.css
new file mode 100644
index 00000000..1e99c334
--- /dev/null
+++ b/public/static/style/layout/header.css
@@ -0,0 +1,97 @@
+.layout__header {
+ --header-padding-y: var(--space-medium);
+ --header-padding-x: var(--space-medium);
+ --header-logo-height: 40px;
+ --header-height: calc(var(--header-padding-y) * 2 + var(--header-logo-height));
+
+ display: flex;
+ padding: var(--header-padding-y) var(--header-padding-x);
+
+ flex-direction: row-reverse;
+ align-items: center;
+ gap: var(--space-medium);
+
+ color: var(--color-pampas);
+
+ background-color: var(--color-green-gable);
+}
+
+@media (min-width: 800px) {
+ .layout__header {
+ --header-padding-x: var(--space-large);
+
+ flex-direction: row;
+ }
+}
+
+.layout__header > * {
+ flex: 1;
+}
+
+@media(max-width: 799px) {
+ .layout__header .header__navigation {
+ flex: 0;
+ }
+}
+
+.layout__header .header__navigation .navigation__container {
+ display: flex;
+ padding-left: 0;
+
+ align-items: center;
+ gap: var(--space-medium);
+
+ list-style: none;
+}
+
+@media(max-width: 799px) {
+ .layout__header .header__navigation .navigation__container {
+ position: absolute;
+ z-index: 100;
+ top: var(--header-height);
+ right: 0;
+ left: 0;
+
+ padding: var(--space-large) var(--space-medium);
+
+ align-items: stretch;
+ flex-direction: column;
+ gap: var(--space-smaller);
+
+ background-color: var(--color-green-gable);
+ border-bottom: 2px solid var(--color-green-caribbean);
+ box-shadow: 0 4px 6px 0 var(--color-box-shadow);
+ }
+}
+
+.layout__header .header__logo a {
+ display: inline-block;
+ height: var(--header-logo-height);
+}
+
+@media (min-width: 800px) {
+ .layout__header .header__logo {
+ text-align: center;
+ }
+}
+
+.layout__header .header__navigation .navigation__link {
+ display: block;
+ padding: var(--space-small);
+
+ color: currentcolor;
+ font-weight: 600;
+ text-align: center;
+ text-decoration: none;
+
+ transition: color 0.2s ease-in-out;
+}
+
+.layout__header .header__navigation .navigation__link:hover {
+ color: var(--color-green-caribbean);
+ text-decoration: underline;
+}
+
+.layout__header .header__navigation .navigation__link[aria-current="page"] {
+ color: var(--color-green-caribbean);
+}
diff --git a/public/static/style/layout/navigation.css b/public/static/style/layout/navigation.css
new file mode 100644
index 00000000..bb89d334
--- /dev/null
+++ b/public/static/style/layout/navigation.css
@@ -0,0 +1,19 @@
+@media(max-width: 799px) {
+ .navigation__menubutton {
+ padding: var(--space-smaller);
+
+ border-radius: 50%;
+
+ aspect-ratio: 1/1;
+ }
+
+ .navigation__menubutton[aria-expanded="true"] {
+ background-color: var(--color-green-topaz);
+ }
+
+ .navigation__menubutton[aria-expanded="true"] .icon--bars,
+ .navigation__menubutton[aria-expanded="false"] .icon--times,
+ .navigation__menubutton[aria-expanded="false"] + .navigation__container {
+ display: none;
+ }
+}
diff --git a/public/static/style/main.css b/public/static/style/main.css
new file mode 100644
index 00000000..46642af5
--- /dev/null
+++ b/public/static/style/main.css
@@ -0,0 +1,87 @@
+@import "./_reset.css";
+@import "./variables/colors.css";
+@import "./variables/sizes.css";
+@import "./utils/accessibility.css";
+@import "./utils/cols.css";
+@import "./utils/fonts.css";
+@import "./utils/flow.css";
+@import "./utils/text.css";
+@import "./utils/wrapper.css";
+@import "./components/accordions.css";
+@import "./components/anchors.css";
+@import "./components/badges.css";
+@import "./components/buttons.css";
+@import "./components/cards.css";
+@import "./components/code.css";
+@import "./components/forms/amount-selectors.css";
+@import "./components/forms/checkboxes.css";
+@import "./components/forms/fieldsets.css";
+@import "./components/forms/labels.css";
+@import "./components/forms/groups.css";
+@import "./components/forms/radios.css";
+@import "./components/forms/selects.css";
+@import "./components/forms/texts.css";
+@import "./components/error_box.css";
+@import "./components/gauge.css";
+@import "./components/grids.css";
+@import "./components/icons.css";
+@import "./components/images.css";
+@import "./components/lists.css";
+@import "./components/panels.css";
+@import "./components/tables.css";
+@import "./components/quotes.css";
+@import "./layout/aside.css";
+@import "./layout/breadcrumb.css";
+@import "./layout/content.css";
+@import "./layout/footer.css";
+@import "./layout/header.css";
+@import "./layout/navigation.css";
+@import "./custom/home.css";
+@import "./custom/features.css";
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html {
+ font-size: 120%;
+
+ scroll-behavior: smooth;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+
+ color: var(--color-green-rangoon);
+ font-family:
+ Raleway,
+ system-ui,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ Oxygen-Sans,
+ Ubuntu,
+ Cantarell,
+ "Helvetica Neue",
+ sans-serif;
+ line-height: 1.4;
+}
+
+hr {
+ border: 1px solid var(--color-green-gable);
+}
+
+@media (max-width: 799px) {
+ .no-mobile {
+ display: none;
+ }
+}
+
+@media (min-width: 800px) {
+ .only-mobile {
+ display: none;
+ }
+}
diff --git a/public/static/print.css b/public/static/style/print.css
similarity index 100%
rename from public/static/print.css
rename to public/static/style/print.css
diff --git a/public/static/stripe_redirection.css b/public/static/style/stripe_redirection.css
similarity index 62%
rename from public/static/stripe_redirection.css
rename to public/static/style/stripe_redirection.css
index 382b9775..916b101a 100644
--- a/public/static/stripe_redirection.css
+++ b/public/static/style/stripe_redirection.css
@@ -1,10 +1,16 @@
-@font-face {
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 400;
- src: local('Open Sans Regular'), local('OpenSans-Regular'),
- url('fonts/open-sans-v17-latin-regular.woff2') format('woff2'),
- url('fonts/open-sans-v17-latin-regular.woff') format('woff');
+@import "./variables/colors.css";
+@import "./utils/fonts.css";
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html {
+ font-size: 120%;
+
+ scroll-behavior: smooth;
}
body {
@@ -16,11 +22,20 @@ body {
flex-direction: column;
justify-content: center;
- font-size: 1.75rem;
text-align: center;
- font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ font-family:
+ Raleway,
+ system-ui,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ Oxygen-Sans,
+ Ubuntu,
+ Cantarell,
+ "Helvetica Neue",
+ sans-serif;
- background-color: #fdfcff;
+ background-color: var(--color-pampas);
}
/**
@@ -34,14 +49,15 @@ body {
}
#stripe-error {
- color: #ba1109;
+ color: var(--color-red-persian);
+ font-weight: 600;
}
#spinner {
width: 40px;
height: 40px;
margin: 30px auto;
- background-color: #333;
+ background-color: var(--color-green-caribbean);
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
diff --git a/public/static/style/utils/accessibility.css b/public/static/style/utils/accessibility.css
new file mode 100644
index 00000000..ba4d668b
--- /dev/null
+++ b/public/static/style/utils/accessibility.css
@@ -0,0 +1,60 @@
+:root {
+ --outline-color: var(--color-green-topaz);
+ --outline-offset: 1px;
+ --outline-width: 2px;
+}
+
+*:focus {
+ outline: var(--outline-width) solid var(--outline-color);
+ outline-offset: var(--outline-offset);
+}
+
+.sr-only {
+ position: absolute;
+
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+
+ width: 1px;
+ height: 1px;
+}
+
+@media (max-width: 800px) {
+ .sr-mobile {
+ position: absolute;
+
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+
+ width: 1px;
+ height: 1px;
+ }
+}
+
+.accessibility-nav {
+ position: absolute;
+
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+
+ width: 1px;
+ height: 1px;
+}
+
+.accessibility-nav:focus-within {
+ top: 0.5rem;
+ left: 0.5rem;
+ z-index: 1000;
+
+ clip: auto;
+
+ width: auto;
+ max-width: 100%;
+ height: auto;
+}
+
+@media (max-width: 800px) {
+ .accessibility-nav:focus-within {
+ right: 0.5rem;
+ }
+}
diff --git a/public/static/style/utils/cols.css b/public/static/style/utils/cols.css
new file mode 100644
index 00000000..e7d1c7e4
--- /dev/null
+++ b/public/static/style/utils/cols.css
@@ -0,0 +1,109 @@
+.cols {
+ display: flex;
+
+ align-items: stretch;
+}
+
+@media (max-width: 799px) {
+ .cols:not(.cols--always) {
+ flex-direction: column;
+ }
+}
+
+.cols--always.cols--center {
+ align-items: center;
+}
+
+.cols--always.cols--baseline {
+ align-items: baseline;
+}
+
+.cols--always.cols--hcenter {
+ justify-content: center;
+}
+
+@media (min-width: 800px) {
+ .cols--center {
+ align-items: center;
+ }
+
+ .cols--baseline {
+ align-items: baseline;
+ }
+
+ .cols--hcenter {
+ justify-content: center;
+ }
+}
+
+.cols--gap {
+ gap: var(--space-medium);
+}
+
+.cols--gap-smaller {
+ gap: var(--space-smaller);
+}
+
+.cols--gap-small {
+ gap: var(--space-small);
+}
+
+.cols--gap-large {
+ gap: var(--space-large);
+}
+
+.cols--gap-larger {
+ gap: var(--space-larger);
+}
+
+.col--extend {
+ flex: 1;
+}
+
+.col--noshrink {
+ flex-shrink: 0;
+}
+
+.col--size1 {
+ flex-basis: calc(1 * 100% / 12);
+}
+
+.col--size2 {
+ flex-basis: calc(2 * 100% / 12);
+}
+
+.col--size3 {
+ flex-basis: calc(3 * 100% / 12);
+}
+
+.col--size4 {
+ flex-basis: calc(4 * 100% / 12);
+}
+
+.col--size5 {
+ flex-basis: calc(5 * 100% / 12);
+}
+
+.col--size6 {
+ flex-basis: calc(6 * 100% / 12);
+}
+
+.col--size7 {
+ flex-basis: calc(7 * 100% / 12);
+}
+
+.col--size8 {
+ flex-basis: calc(8 * 100% / 12);
+}
+
+.col--size9 {
+ flex-basis: calc(9 * 100% / 12);
+}
+
+.col--size10 {
+ flex-basis: calc(10 * 100% / 12);
+}
+
+.col--size11 {
+ flex-basis: calc(11 * 100% / 12);
+}
diff --git a/public/static/style/utils/flow.css b/public/static/style/utils/flow.css
new file mode 100644
index 00000000..92aee609
--- /dev/null
+++ b/public/static/style/utils/flow.css
@@ -0,0 +1,23 @@
+.flow > * {
+ --flow-size: var(--space-medium);
+}
+
+.flow--smaller > * {
+ --flow-size: var(--space-smaller);
+}
+
+.flow--small > * {
+ --flow-size: var(--space-small);
+}
+
+.flow--large > * {
+ --flow-size: var(--space-large);
+}
+
+.flow--larger > * {
+ --flow-size: var(--space-larger);
+}
+
+.flow > * + * {
+ margin-top: var(--flow-size);
+}
diff --git a/public/static/style/utils/fonts.css b/public/static/style/utils/fonts.css
new file mode 100644
index 00000000..e83fb040
--- /dev/null
+++ b/public/static/style/utils/fonts.css
@@ -0,0 +1,59 @@
+/* raleway-regular - latin */
+@font-face {
+ font-family: 'Raleway';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+
+ src: url('../../fonts/raleway-latin-regular.woff2') format('woff2');
+}
+
+/* raleway-italic - latin */
+@font-face {
+ font-family: 'Raleway';
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+
+ src: url('../../fonts/raleway-latin-italic.woff2') format('woff2');
+}
+
+/* raleway-600 - latin */
+@font-face {
+ font-family: 'Raleway';
+ font-style: normal;
+ font-weight: 600;
+ font-display: swap;
+
+ src: url('../../fonts/raleway-latin-600.woff2') format('woff2');
+}
+
+/* raleway-600italic - latin */
+@font-face {
+ font-family: 'Raleway';
+ font-style: italic;
+ font-weight: 600;
+ font-display: swap;
+
+ src: url('../../fonts/raleway-latin-600italic.woff2') format('woff2');
+}
+
+/* raleway-700 - latin */
+@font-face {
+ font-family: 'Raleway';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+
+ src: url('../../fonts/raleway-latin-700.woff2') format('woff2');
+}
+
+/* raleway-700italic - latin */
+@font-face {
+ font-family: 'Raleway';
+ font-style: italic;
+ font-weight: 700;
+ font-display: swap;
+
+ src: url('../../fonts/raleway-latin-700italic.woff2') format('woff2');
+}
diff --git a/public/static/style/utils/text.css b/public/static/style/utils/text.css
new file mode 100644
index 00000000..a3f9490b
--- /dev/null
+++ b/public/static/style/utils/text.css
@@ -0,0 +1,72 @@
+h1 {
+ font-size: var(--font-size-bigger);
+}
+
+h2 {
+ color: var(--color-green-gable);
+ font-size: var(--font-size-big);
+}
+
+h3 {
+ font-weight: normal;
+}
+
+.text-container h1 {
+ margin-top: 1.17em;
+ margin-bottom: 0.67em;
+}
+.text-container h2 {
+ margin-top: 1.25em;
+ margin-bottom: 0.75em;
+}
+.text-container h3 {
+ margin-top: 1.33em;
+ margin-bottom: 0.83em;
+}
+
+.text-container p,
+.text-container ul,
+.text-container ol {
+ margin-top: 1.12em;
+ margin-bottom: 1.12em;
+}
+
+.text--gable {
+ color: var(--color-green-gable);
+}
+
+.text--bold {
+ font-weight: 600;
+}
+
+.text--bolder {
+ font-weight: 700;
+}
+
+.text--center {
+ text-align: center;
+}
+
+.text--right {
+ text-align: right;
+}
+
+.text--smaller {
+ font-size: var(--font-size-smaller);
+}
+
+.text--small {
+ font-size: var(--font-size-small);
+}
+
+.text--normal {
+ font-size: var(--font-size-normal);
+}
+
+.text--big {
+ font-size: var(--font-size-big);
+}
+
+.text--bigger {
+ font-size: var(--font-size-bigger);
+}
diff --git a/public/static/style/utils/wrapper.css b/public/static/style/utils/wrapper.css
new file mode 100644
index 00000000..2d347dee
--- /dev/null
+++ b/public/static/style/utils/wrapper.css
@@ -0,0 +1,26 @@
+.wrapper {
+ --wrapper-max-width: 1000px;
+
+ max-width: var(--wrapper-max-width);
+}
+
+.wrapper--text {
+ --wrapper-max-width: 55ch;
+}
+
+.wrapper--small {
+ --wrapper-max-width: 700px;
+}
+
+.wrapper--large {
+ --wrapper-max-width: 1200px;
+}
+
+.wrapper--larger {
+ --wrapper-max-width: 1400px;
+}
+
+.wrapper--center {
+ margin-right: auto;
+ margin-left: auto;
+}
diff --git a/public/static/style/variables/colors.css b/public/static/style/variables/colors.css
new file mode 100644
index 00000000..6ac4f527
--- /dev/null
+++ b/public/static/style/variables/colors.css
@@ -0,0 +1,16 @@
+:root {
+ --color-green-gable: #0c3b34;
+ --color-green-topaz: #00baa8;
+ --color-green-caribbean: #00d7ad;
+ --color-green-gossip: #d8fbcc;
+ --color-green-forest: #212905;
+ --color-green-rangoon: #181b0c;
+
+ --color-red-persian: #ce2c31;
+
+ --color-corduroy: #5c736f;
+ --color-pampas: #f7f6f4;
+ --color-white: #fff;
+
+ --color-box-shadow: rgb(0 0 0 / 50%);
+}
diff --git a/public/static/style/variables/sizes.css b/public/static/style/variables/sizes.css
new file mode 100644
index 00000000..8cc32c2a
--- /dev/null
+++ b/public/static/style/variables/sizes.css
@@ -0,0 +1,15 @@
+:root {
+ --border-radius: 10px;
+
+ --font-size-smaller: 0.8em;
+ --font-size-small: 0.9em;
+ --font-size-normal: 1em;
+ --font-size-big: 1.4em;
+ --font-size-bigger: 1.9em;
+
+ --space-smaller: 0.3rem;
+ --space-small: 0.6rem;
+ --space-medium: 1rem;
+ --space-large: 2rem;
+ --space-larger: 4rem;
+}
diff --git a/src/Router.php b/src/Router.php
index 34b3bd62..d38f4fcf 100644
--- a/src/Router.php
+++ b/src/Router.php
@@ -15,6 +15,7 @@ public static function loadApp(): \Minz\Router
$router->addRoute('GET', '/', 'Home#index', 'home');
$router->addRoute('GET', '/projet', 'Home#project', 'project');
$router->addRoute('GET', '/tarifs', 'Home#pricing', 'pricing');
+ $router->addRoute('GET', '/fonctionnalites', 'Home#features', 'features');
$router->addRoute('GET', '/visite', 'Home#tour', 'tour');
$router->addRoute('GET', '/visite/:page', 'Home#tour', 'tour page');
$router->addRoute('GET', '/financement', 'Home#funding', 'funding');
diff --git a/src/controllers/Accounts.php b/src/controllers/Accounts.php
index 0d71c60d..7ca8983b 100644
--- a/src/controllers/Accounts.php
+++ b/src/controllers/Accounts.php
@@ -63,7 +63,7 @@ public function login(Request $request): Response
}
if (!$account->checkAccess($access_token)) {
- return Response::badRequest('bad_request.phtml');
+ return Response::unauthorized('unauthorized.phtml');
}
utils\CurrentUser::logUserIn($account->id);
@@ -305,10 +305,6 @@ public function invoices(Request $request): Response
return Response::unauthorized('unauthorized.phtml');
}
- if ($account->isManaged()) {
- return Response::unauthorized('accounts/blocked.phtml');
- }
-
return Response::ok('accounts/invoices.phtml', [
'account' => $account,
'payments' => $account->payments(),
diff --git a/src/controllers/Home.php b/src/controllers/Home.php
index cf78500b..1682737c 100644
--- a/src/controllers/Home.php
+++ b/src/controllers/Home.php
@@ -20,12 +20,17 @@ public function project(Request $request): Response
return Response::ok('home/project.phtml');
}
+ public function features(Request $request): Response
+ {
+ return Response::ok('home/features.phtml');
+ }
+
public function pricing(Request $request): Response
{
$current_year = intval(\Minz\Time::now()->format('Y'));
$total_revenue = models\Payment::findTotalRevenue($current_year) / 100;
$revenue_target = \Minz\Configuration::$application['financial_goal'];
- $percent_target = min(100, max(5, $total_revenue * 100 / $revenue_target));
+ $percent_target = min(100, $total_revenue * 100 / $revenue_target);
$account = null;
$user = utils\CurrentUser::get();
diff --git a/src/services/InvoicePDF.php b/src/services/InvoicePDF.php
index 4a366e82..6832efec 100644
--- a/src/services/InvoicePDF.php
+++ b/src/services/InvoicePDF.php
@@ -249,8 +249,8 @@ public function Footer(): void
{
$support_email = \Minz\Configuration::$application['support_email'];
$footer = [
- 'Marien Fressinaud Mas de Feix / Flus – 57 rue du Vercors, 38000 Grenoble – ' . $support_email,
- 'micro-entreprise – N° Siret 878 196 278 00013 – 878 196 278 R.C.S. Grenoble',
+ 'Marien Fressinaud Mas de Feix / Flus – 4 bis rue Germain, 38100 Grenoble – ' . $support_email,
+ 'micro-entreprise – N° Siret 878 196 278 00021 – 878 196 278 R.C.S. Grenoble',
'TVA non applicable, art. 293 B du CGI',
];
diff --git a/src/utils/view_helpers.php b/src/utils/view_helpers.php
index cac3b37e..c7c59610 100644
--- a/src/utils/view_helpers.php
+++ b/src/utils/view_helpers.php
@@ -28,3 +28,20 @@ function format_message(string $message): string
{
return nl2br($message);
}
+
+/**
+ * Return a SVG icon.
+ */
+function icon(string $icon_name, string $additional_class_names = ''): string
+{
+ $class = "icon icon--{$icon_name}";
+ if ($additional_class_names) {
+ $class .= ' ' . $additional_class_names;
+ }
+
+ $url_icons = \Minz\Output\ViewHelpers::urlStatic('icons/icons.svg');
+ $svg = "';
+ return $svg;
+}
diff --git a/src/views/_layouts/account.phtml b/src/views/_layouts/account.phtml
index 4aef7507..921e9479 100644
--- a/src/views/_layouts/account.phtml
+++ b/src/views/_layouts/account.phtml
@@ -2,84 +2,124 @@
+ <?= $title ?>
-
-
-
+
-
-
-
+
+
+
-
- <?= $title ?>
-
-
 ?>){kind=small}
-
+
+
+  ?>)
-
diff --git a/src/views/_layouts/print.phtml b/src/views/_layouts/print.phtml
index 05b2865e..45b5e965 100644
--- a/src/views/_layouts/print.phtml
+++ b/src/views/_layouts/print.phtml
@@ -2,10 +2,9 @@
-
-
-