/* ============================================================ mobile.css — styles for screens max-width: 798px Link AFTER main.css in ============================================================ */ @media screen and (max-width: 798px) { /* ========================= NAVIGATION ========================= */ header.navigation .web-links { display: none; } nav.zero svg { width: 57px; height: 13px; fill: black; } nav.zero svg path { fill: var(--main-color-dark); } /* ========================= SECTION ONE ========================= */ section.one { background-image: url(../images/background-for-mobile.jpg); background-size: cover; height: 100vh; background-repeat: no-repeat; background-position: center; display: flex; flex-direction: row; } .right { display: flex; flex-direction: column; align-items: start; margin: 6rem 2rem 0 0; } .title-features-price { display: flex; flex-direction: column; gap: 1.8rem; align-items: end; width: 100%; } .title-features-price h1 { color: var(--white); text-align: right; font-family: Inter; font-size: 1.8rem; font-style: normal; font-weight: 700; line-height: 1.25; letter-spacing: -0.04rem; width: 70%; /* max-width: 22rem; */ margin: 0; /* border: 1px solid red; */ } .title-features-price ul { list-style-type: none; padding: 0; margin: 0; display: flex; align-items: end; flex-wrap: wrap; flex-direction: row-reverse; row-gap: 0.6rem; } .title-features-price ul li { display: flex; flex-direction: row; gap: 0.4rem; font-family: Inter; color: var(--white); font-size: 1.4rem; font-style: normal; font-weight: 400; } .title-features-price ul li svg { width: 18px; height: 18px; } /* Generated by JS */ .mobile-price-btn-wrapper { display: flex; flex-direction: column; gap: 2rem; position: absolute; bottom: 0; left: 0; right: 0; margin-bottom: 3.2rem; align-items: center; } p.strikethrough { display: none; } p.asking-price { opacity: 0.7; font-size: 1.4rem; line-height: 1.2rem; } div.class-wrapper { gap: 0; } .for-btns { flex-direction: column; gap: 0.8rem; } /* .btn-primary { padding: 1.4rem; border-radius: 999px; background: var(--surface-button-primary); color: var(--main-color-dark); font-family: Inter; font-size: 1.4rem; font-style: normal; font-weight: 500; line-height: 1.8rem; letter-spacing: -0.015rem; } */ /* .btn-secondary { display: flex; padding: 1.6rem; justify-content: center; align-items: center; gap: 4px; border-radius: 999px; background: transparent; color: var(--white); border: 1px solid var(--white); font-family: Inter; font-size: 1.4rem; font-style: normal; font-weight: 500; line-height: 1.8rem; letter-spacing: -0.015rem; } */ /* For section 2 */ section header.top { width: 100%; } header.top div { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; } header.top h2 { font-family: InterDisplay; font-size: 2.2rem; font-weight: 600; line-height: 2.4rem; letter-spacing: -0.03rem; width: 80%; } header.top div:first-of-type p:first-of-type { opacity: 0.75; font-size: 1rem; } .products { padding: 1rem 0; } .product-card { width: 100%; margin: 1rem auto; } .product-image { width: 100%; } .product-card img { width: 100%; display: block; } .hotspot { width: 1.8rem; height: 1.8rem; border-radius: 50%; position: absolute; cursor: pointer; } /* ========================= ACCORDION ========================= */ .accordion-section { margin-top: 2.4rem; } .accordion { gap: 1.2rem; margin: 0; } .accordion-header { padding: 2rem; } .accordion-copy { gap: 0.8rem; } .accordion-copy p { font-size: 1.2rem; } .accordion-copy h3 { font-size: 1.6rem; line-height: 1.5; } .accordion-icon { font-size: 2.4rem; color: var(--main-color-light); } .accordion-item.active .accordion-content { padding: 0 2rem 2rem; } .accordion-content { padding: 0 2rem; } .accordion-content p { font-size: 1.4rem; line-height: 1.6; } /* ========================= SECTION THREE — PERKS ========================= */ .perks { flex-direction: column; gap: 3.2rem; margin: 0; padding: 3.2rem 0 4rem; width: 100%; } .icon-location-perk { flex-direction: row; align-items: flex-start; gap: 1.6rem; width: 100%; } .icon-location-perk svg { width: 36px; height: 36px; flex-shrink: 0; margin-top: 0.2rem; } .location-perk h3 { font-size: 1.8rem; letter-spacing: -0.04rem; } .location-perk p { font-size: 1.5rem; line-height: 1.55; letter-spacing: -0.02rem; } /* ========================= SECTION FOUR ========================= */ section.four { padding: 4rem 2rem; gap: 3rem; } .structural-integrity { flex-direction: column; gap: 2rem; } .structLeft h2 { font-size: 3.6rem; letter-spacing: -0.08rem; } .structRight p { font-size: 1.6rem; } .structRight li { font-size: 1.5rem; } .two-images { grid-template-columns: 1fr; } .media-card { height: auto; aspect-ratio: 4 / 5; } /* ========================= SECTION FIVE ========================= */ /* section.five { padding: 2rem; gap: 3rem; } section.five .top h2 { font-size: 4rem; letter-spacing: -0.08rem; } section.five .top div:last-child p { font-size: 1.6rem; } */ .pricing-card__top, .pricing-card__bottom { padding: 2.4rem; } .pricing-card__top h3 { font-size: 3.2rem; } .pricing-card__top p { font-size: 1.6rem; } .pricing-card__top h4 { font-size: 4rem; } .pricing-card__bottom li { font-size: 1.6rem; gap: 1.2rem; } .btn-access, .btn-copy { /* font-size: 1.6rem; */ padding: 1.8rem; } }