Style for form application,confirmations, playment

backend/core/static/css/getstarted.css

@@ -0,0 +1,211 @@
+header {
+    width: 100vw;
+    min-width: 100vw;
+    margin: 0;
+    padding: 0;
+    background: #222;
+    position: relative;
+}
+
+.gs-logo {
+    display: flex;
+    width: 100vw;
+    min-width: 100vw;
+    margin: 0;
+    background: #222;
+    color: #fff;
+    text-decoration: none;
+    font-size: 4rem;
+    font-weight: 700;
+    text-align: center;
+    letter-spacing: 2px;
+    box-sizing: border-box;
+}
+
+.gs-logo a{
+    padding: 0rem 2rem;
+    text-decoration: none;
+}
+.gs-logo a:hover {
+    color: white;
+}
+
+#basic-progress-bar-wrap,
+#advanced-progress-bar-wrap {
+    width: 100%;
+    margin: 0;
+    border-radius: 0;
+    height: 10px;
+    background: #222;
+}
+
+.progress {
+    border-radius: 0;
+    margin: 0;
+    height: 10px;
+    background: #222;
+}
+
+.container {
+    font-family: 'Archivo',sans-serif;
+    font-size: medium;
+}
+
+#basic-progress,
+#advanced-progress {
+    font-size: small;
+}
+
+.pb-3, .option-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px
+}
+
+.form-check-input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+    pointer-events: none;
+}
+
+.form-check-label {
+    display: inline-block;
+    padding: 0 10px;
+    border: 2px solid #ccc;
+    border-radius: 10px;
+    cursor: pointer;
+    background-color: #fff;
+    transition: all 0.2s ease;
+    color: black;
+    margin-bottom: 0.2rem;
+    min-width: 120px;
+    text-align: center;
+    box-shadow: 0 1px 2px 0 #0001;
+    user-select: none;
+    font-weight: 600;
+    width: fit-content;
+}
+
+.form-check-input:checked + .form-check-label {
+    background-color: #f0fbea;
+    border-color: #97e296;
+    color: #225d1e;
+    border: 1px solid;
+}
+
+.form-check-label:hover {
+    background-color: #f0fbea;
+    border-color: #225d1e;
+    color: #225d1e;
+}
+
+.option-grid{
+    display: grid;
+}
+
+#basic-progress {
+    display: flex;
+    color: #6c757d
+}
+
+.form-check-label {
+    font-size: 1rem;
+    min-width: 100px;
+    padding: 0.5rem 0.5rem;
+}
+
+.container, body {
+    background-color: #fbf8f3;
+}
+
+.form-check {
+    margin-left: 0 !important;
+    padding-left: 0 !important;
+}
+
+#submit {
+    background-color: black;
+    color: white;
+    border: none;
+    border-radius: 5px;
+}
+#next {
+    background-color: black;
+    color: white;
+    border: none;
+}
+
+#next:hover, #submit:hover {
+    background-color: #97e296;
+    color: white;
+}
+
+#next, #submit {
+    width: 50%;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+#back{
+    width: 50%;
+    background-color: #f4ede1;
+    color: #b19b81;
+    border: none;
+}
+
+#back:hover {
+    background-color: #d3c6b8;
+    color: #8f7a62;
+}
+
+.fa-solid {
+    color:#225d1e;
+}
+
+#halfsubmit {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+@media (max-width: 500px) {
+
+    .pb-3,
+    .option-grid {
+        display: flex !important;
+        gap: 0.5rem 1rem;
+    }
+    .form-check {
+        width: 100%;
+    }
+    .container {
+        width: 100% !important;
+        padding: 0 0.5rem !important;
+        margin: 0 !important;
+    }
+    .form-check-label {
+        font-size: 0.95rem;
+        min-width: 80px;
+        padding: 0.5rem 0.2rem;
+    }
+
+    #next, #submit, #back {
+        width: 100%;
+        font-size: 1rem;
+        margin-bottom: 0.5rem;
+    }
+    .header {
+        width: 100%;
+        min-width: 100%;
+    }
+    .gs-logo {
+        font-size: 2.5rem;
+        padding: 1rem 0;
+    }
+    #q1 {
+        display: grid;
+    }
+}