aboutsummaryrefslogtreecommitdiffstats
path: root/styles.css
diff options
context:
space:
mode:
Diffstat (limited to 'styles.css')
-rw-r--r--styles.css403
1 files changed, 403 insertions, 0 deletions
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..ccd6e6f
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,403 @@
+:root {
+ --background: #1976d3;
+ --background-l1: #eff3f6;
+ --background-l2: #FFF;
+ --background-l3: #7c8083;
+ --header-bg: #FFF;
+ --vertical-block-space: 3.5rem;
+ --text: #000;
+ --text-l1: #1976d3;
+ --text-l2: #FFF;
+ --h1: #000;
+ --h2: #d5dce2;
+ --h3: #bbc6ce;
+ --h4: #a2afb9;
+ --h5: #8a99a3;
+ --h6: #73828c;
+}
+
+div, button {
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ font-family: "liberation serif", "times new roman", calibri, carlito, serif;
+ color: var(--text);
+}
+
+body {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: auto 1fr 1fr;
+ grid-gap: 10px 10px;
+ grid-template-areas:
+ "header"
+ "main"
+ "footer";
+ /* Fix height */
+ height: 100vh;
+ /* grid-template-rows: auto 1fr auto; */
+}
+
+.text-center {
+ text-align: center;
+}
+
+.header {
+ display: grid;
+ grid-template-columns: 60px auto 60px;
+ grid-template-rows: auto auto;
+ gap: 0px 0px;
+ grid-template-areas:
+ "navbar-burger logo-name ."
+ "navbar-menu navbar-menu navbar-menu";
+ grid-area: header;
+
+ background: var(--header-bg);
+}
+
+.header {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ left: 0;
+ z-index: 100;
+}
+
+.l-block {
+ margin-bottom: var(--vertical-block-space);
+}
+
+.navbar-menu {
+ grid-area: navbar-menu;
+
+ display: none;
+}
+
+/* ---------- Menu Mobile sin JS ------------ */
+/* input hidden */
+#navbar-toggle-cbox {
+ display: none;
+}
+
+label[for=navbar-toggle-cbox] {
+ cursor: pointer;
+}
+
+#navbar-toggle-cbox:checked ~ .navbar-menu {
+ display: block;
+}
+/* --------- End Menu Mobile sin JS ----------- */
+
+/* --------- Menu Mobile JS ------------ */
+.navbar-burger.is-active {
+ display: flex;
+ cursor: pointer;
+ position: relative;
+ justify-content: center;
+ width: 100%;
+ height: auto;
+}
+
+.navbar-burger.is-active span {
+ display: block;
+ position: absolute;
+}
+
+.navbar-burger.is-active span:nth-child(1) {
+ transform: translateY(5px) rotate(45deg);
+ top: calc(50% - 6px);
+}
+
+.navbar-burger.is-active span:nth-child(2) {
+ opacity: 0;
+}
+
+.navbar-burger.is-active span:nth-child(3) {
+ transform: translateY(-5px) rotate(-45deg);
+ top: calc(50% + 4px);
+}
+/* --------- End Menu Mobile JS ----------- */
+
+.navbar-menu > ul > li {
+ list-style: none;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
+.navbar-menu .list-item {
+ display: grid;
+ grid-row-gap: 1rem;
+ padding-left: 60px;
+ padding-right: 60px;
+}
+
+/* Item menu hover */
+.navbar-menu > ul > li:hover {
+ border-bottom: 1px solid var(--background-l3);
+}
+
+ul.list-item > li > a {
+ color: var(--text);
+ text-decoration: none;
+}
+
+.navbar-burger {
+ grid-area: navbar-burger;
+ margin: auto;
+
+ display: grid;
+ grid-row-gap: .25rem;
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
+}
+
+.navbar-burger span {
+ background-color: var(--text);
+ display: block;
+ height: 2px;
+ transform-origin: center;
+ transition-duration: 86ms;
+ transition-property: background-color,opacity,transform;
+ transition-timing-function: ease-out;
+ width: 16px;
+}
+
+.logo-name {
+ grid-area: logo-name;
+ justify-self: center;
+ align-self: center;
+
+ text-decoration: none;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+.logo-name > span.logotype {
+ display: block;
+ color: var(--text);
+ width: 100px;
+}
+
+#cm-search {
+ display: none;
+}
+
+.sc-lupa {
+ justify-self: center;
+ align-self: center;
+}
+
+.sc-lupa label svg {
+ width: 24px;
+ height: 24px;
+ color: var(--black20);
+ cursor: pointer;
+}
+
+.sc-form {
+ display: none;
+}
+
+/* back search*/
+#cm-search:checked ~ .open-form {
+ grid-column: 1 / span 3;
+ justify-self: center;
+
+ display: grid;
+ grid-template-columns: auto auto;
+ align-items: center;
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+#cm-search:checked ~ .open-form form > input {
+ background: var(--background-l2);
+ color: var(--text);
+ border: 1px solid var(--background-l3);
+}
+#cm-search:checked ~ .clicked {
+ display: none;
+}
+#cm-search:checked ~ .navbar-burger {
+ display: none;
+}
+#cm-search:checked ~ .logo-name {
+ display: none;
+}
+
+.back-search > label svg {
+ width: 24px;
+ height: 24px;
+ color: var(--black20);
+}
+.back-search > label svg {
+ width: 24px;
+ height: 24px;
+}
+
+.fm-send-search form {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 30px;
+}
+
+.fm-send-search form input {
+ border-radius: 2px 0px 0px 2px;
+ border: 1px solid var(--background-l3);
+ color: var(--text);
+ font-weight: 400;
+ height: 30px;
+ font-size: 14px;
+ padding: 0px 1rem;
+}
+
+.fm-send-search form button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 65px;
+ height: 30px;
+ border: 1px solid var(--background-l3);
+ border-left-width: 0px;
+ color: var(--text);
+ background-color: var(--background-l1);
+ border-radius: 0px 2px 2px 0px;
+ cursor: pointer;
+}
+
+.main {
+ grid-area: main;
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: auto;
+ grid-template-areas:
+ "categories"
+ "shopping";
+}
+
+/* ------ Hidden arrows ------ */
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+.strong {
+ font-weight: 800;
+}
+
+.footer {
+ grid-area: footer;
+
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: auto auto;
+ grid-row-gap: 10px;
+ grid-template-areas:
+ "footer-info"
+ "copy-info";
+
+ background: var(--background);
+ border-radius: 10px;
+ color: var(--text-l2);
+}
+
+.footer-info {
+ grid-area: footer-info;
+
+ margin-top: 1rem;
+}
+.copy-info {
+ grid-area: copy-info;
+
+ margin-bottom: 1rem;
+}
+
+.footer-info > address > p,
+.copy-info > address > p {
+ margin: 0px;
+}
+
+.copy-info > address > p > a {
+ color: var(--text-l2);
+}
+
+/* tables */
+@media (min-width: 600px) {
+ #cm-search:checked ~ .open-form {
+ grid-column: 1 / span 3;
+ grid-template-columns: auto minmax(auto, 500px);
+ }
+ .open-form form > input {
+ width: 80%;
+ }
+}
+
+/* For desktop: */
+@media only screen and (min-width: 992px) {
+ body {
+ height: auto;
+ grid-template-rows: auto auto auto;
+ }
+ .header {
+ display: grid;
+ grid-template-columns: auto auto auto;
+ grid-template-rows: auto auto;
+ grid-template-areas: "logo-name navbar-menu sc-form";
+ background: var(--header-bg);
+ }
+ .logo-name {
+ justify-self: start;
+ margin-left: 2rem;
+ }
+ .logo-name > span.logotype {
+ display: block;
+ color: var(--text);
+ width: 150px;
+ }
+ .navbar-burger {
+ display: none;
+ }
+ .navbar-menu {
+ display: flex;
+ }
+ .list-item {
+ justify-content: flex-end;
+ margin-left: auto;
+ display: flex;
+ align-items: stretch;
+ }
+ .navbar-item {
+ padding: 0px .75rem;
+ }
+
+ .navbar-menu .list-item {
+ display: flex;
+ align-items: center;
+ margin-bottom: 0px;
+ margin-top: 0px;
+ }
+
+ .navbar-menu > ul > li {
+ padding-top: .7rem;
+ padding-bottom: .7rem;
+ }
+
+ .sc-form {
+ grid-area: sc-form;
+ }
+ #cm-search:checked ~ .logo-name {
+ display: block;
+ }
+
+ #cm-search:checked ~ .open-form {
+ grid-column: auto;
+ grid-template-columns: auto minmax(auto, 500px);
+ }
+ .l-block {
+ margin-bottom: 4rem;
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-10 07:37:06 +0000