/* ========================================================================== SANOS — Premium Dead Sea Magnesium Oil Layout uses CSS logical properties throughout so the Arabic (RTL) build is the same stylesheet with dir="rtl" on . ========================================================================== */ :root { --navy-950: #0a162c; --navy-900: #0e1e3c; --navy-700: #14284f; --navy-600: #1e3a6b; --gold-600: #a5893f; --gold-500: #c9a24a; --gold-300: #e3c575; --gold-ink: #7a6524; --cream: #f4eedf; --ink: #23262b; --muted: #4a5160; --bg: #f9fafb; --blue-50: #eef3f9; --blue-100: #f1f6fb; --sand: #f7f3ea; --green: #1e7a4b; --green-700: #186139; --slate-300: #dce4f0; --slate-400: #b9c4d8; --slate-500: #7c8aa3; --grey-300: #b6bac2; --grey-400: #9ca3af; --grey-500: #6b7280; --danger: #c0392b; --line: rgba(14, 30, 60, 0.08); --line-strong: rgba(14, 30, 60, 0.16); --radius-pill: 999px; --serif: 'Cormorant Garamond', 'Tajawal', Georgia, serif; --sans: 'Manrope', 'Tajawal', system-ui, -apple-system, sans-serif; --wrap: 1200px; --section-y: 88px; } /* Arabic sets Tajawal first so it wins for both scripts */ html[lang='ar'] { --serif: 'Tajawal', 'Cormorant Garamond', Georgia, serif; --sans: 'Tajawal', 'Manrope', system-ui, -apple-system, sans-serif; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Sticky header height, so #anchors are not hidden underneath it */ scroll-padding-top: 88px; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; } a { color: var(--navy-700); text-decoration: none; } a:hover { color: var(--gold-500); } img, svg { display: block; max-width: 100%; } input, select, textarea, button { font: inherit; color: inherit; } h1, h2, h3, p, figure { margin: 0; } :focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 200; background: var(--navy-700); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 10px; font-size: 14px; font-weight: 600; transition: top 0.2s ease; } .skip-link:focus { top: 0; color: #fff; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: var(--section-y) 24px; } .wrap--narrow { max-width: 1100px; } .wrap--tight { max-width: 820px; } .icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* -------------------------------------------------------------------------- Shared type -------------------------------------------------------------------------- */ .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--gold-600); } .eyebrow--onDark { color: var(--gold-500); } .section-head { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; margin-bottom: 44px; } .section-head p { font-size: 16.5px; color: var(--muted); max-width: 520px; } h2.section-title { font-family: var(--serif); font-size: clamp(30px, 4vw, 44px); font-weight: 600; color: var(--navy-900); line-height: 1.15; } h2.section-title--onDark { color: var(--cream); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: var(--radius-pill); font-weight: 600; cursor: pointer; text-align: center; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .btn--primary { background: var(--navy-700); color: #fff; padding: 15px 30px; font-size: 15.5px; box-shadow: 0 10px 26px rgba(14, 30, 60, 0.22); } .btn--primary:hover { background: var(--navy-600); color: #fff; transform: translateY(-2px); } .btn--outline { border: 1.5px solid var(--navy-700); color: var(--navy-700); background: transparent; padding: 13.5px 28.5px; font-size: 15.5px; } .btn--outline:hover { background: var(--navy-700); color: #fff; } .btn--whatsapp { background: var(--green); color: #fff; padding: 14px 24px; font-size: 15px; } .btn--whatsapp:hover { background: var(--green-700); color: #fff; } .btn--gold { background: var(--gold-500); color: var(--navy-900); padding: 11px 20px; font-size: 13.5px; font-weight: 700; white-space: nowrap; } .btn--gold:hover { background: var(--gold-300); color: var(--navy-900); } .btn--sm { padding: 14px 28px; font-size: 15px; box-shadow: none; } .btn--block { width: 100%; padding: 16px 28px; font-size: 16px; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 60; background: rgba(249, 250, 251, 0.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: background 0.3s ease; } .site-header.is-scrolled { background: rgba(249, 250, 251, 0.82); } .nav { max-width: var(--wrap); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 20px; } .nav__logo { display: flex; align-items: center; gap: 10px; flex: none; } .nav__logo img { width: 75px; height: 55px; object-fit: contain; } .nav__right { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; } .nav__links { display: none; gap: 26px; font-size: 14.5px; font-weight: 500; color: var(--muted); } .nav__links a { color: inherit; } .nav__links a:hover { color: var(--gold-500); } .lang-toggle { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid rgba(201, 162, 74, 0.55); border-radius: var(--radius-pill); padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--navy-700); cursor: pointer; white-space: nowrap; flex: none; transition: background 0.25s ease, border-color 0.25s ease; } .lang-toggle:hover { border-color: var(--gold-500); background: rgba(201, 162, 74, 0.1); color: var(--navy-700); } .nav__cta { background: var(--navy-700); color: #fff; border-radius: var(--radius-pill); padding: 11px 22px; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 18px rgba(14, 30, 60, 0.18); transition: background 0.25s ease; } .nav__cta:hover { background: var(--navy-600); color: #fff; } /* Mobile menu */ .nav__burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: 12px; background: transparent; color: var(--navy-700); cursor: pointer; flex: none; } .nav__burger .icon { width: 20px; height: 20px; } .mobile-menu { display: none; flex-direction: column; gap: 2px; padding: 8px 24px 18px; border-top: 1px solid var(--line); background: rgba(249, 250, 251, 0.98); } .mobile-menu.is-open { display: flex; } .mobile-menu a { padding: 13px 4px; font-size: 16px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line); } .mobile-menu a:last-child { border-bottom: 0; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(165deg, #f1f6fb 0%, #f9f6ee 55%, #f7f3ea 100%); } .hero::before { content: ''; position: absolute; inset-inline-end: -140px; top: -120px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(111, 178, 216, 0.28), rgba(111, 178, 216, 0) 70%); pointer-events: none; } .hero__grid { max-width: var(--wrap); margin: 0 auto; padding: 64px 24px 72px; display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; position: relative; } .hero__copy { display: flex; flex-direction: column; gap: 20px; max-width: 560px; } .hero__title { font-family: var(--serif); font-size: clamp(40px, 6vw, 62px); line-height: 1.06; font-weight: 600; color: var(--navy-900); text-wrap: pretty; } .hero__sub { font-size: 17.5px; color: var(--muted); max-width: 460px; text-wrap: pretty; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(14, 30, 60, 0.1); border-radius: var(--radius-pill); padding: 8px 14px; } .badge .icon { width: 15px; height: 15px; color: var(--gold-500); } .hero__media { position: relative; } .hero__media::before { content: ''; position: absolute; inset: 8% 6%; border-radius: 32px; background: radial-gradient(circle at 50% 60%, rgba(20, 40, 79, 0.16), rgba(20, 40, 79, 0) 68%); filter: blur(18px); } .hero__media img { position: relative; width: 100%; height: auto; border-radius: 26px; box-shadow: 0 30px 70px rgba(14, 30, 60, 0.16); } /* -------------------------------------------------------------------------- Trust strip -------------------------------------------------------------------------- */ .trust { background: var(--navy-900); } .trust__grid { max-width: var(--wrap); margin: 0 auto; padding: 22px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; } .trust__item { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 13.5px; font-weight: 600; color: var(--slate-300); text-align: center; } .trust__item .icon { color: var(--gold-500); } /* -------------------------------------------------------------------------- Product -------------------------------------------------------------------------- */ .product { background: var(--bg); } .product__card { display: grid; grid-template-columns: 1fr; background: #fff; border: 1px solid rgba(14, 30, 60, 0.08); border-radius: 28px; overflow: hidden; box-shadow: 0 20px 50px rgba(14, 30, 60, 0.07); } .product__media { background: linear-gradient(160deg, #eef3f9, #f7f3ea); display: grid; place-items: center; padding: 28px; } .product__media img { width: 100%; max-width: 340px; height: auto; border-radius: 18px; box-shadow: 0 18px 40px rgba(14, 30, 60, 0.14); } .product__body { padding: 38px 34px; display: flex; flex-direction: column; gap: 16px; } .product__name { font-family: var(--serif); font-size: 32px; font-weight: 600; color: var(--navy-900); line-height: 1.2; } .product__desc { font-size: 16px; color: var(--muted); } .tag-row { display: flex; flex-wrap: wrap; gap: 8px; } .tag { font-size: 12.5px; font-weight: 600; color: var(--navy-700); background: var(--blue-50); border-radius: var(--radius-pill); padding: 6px 12px; } .product__ing { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; } .product__ing dt { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--gold-600); } .product__ing dd { margin: 0; font-size: 15px; color: var(--ink); } .product__ing dd.is-muted { font-size: 14px; color: var(--muted); } .product__price { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; flex-wrap: wrap; } .product__price strong { font-family: var(--sans); font-size: 38px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--navy-700); line-height: 1.1; } .product__price span { font-size: 14px; color: var(--muted); } .offer-note { display: flex; align-items: center; gap: 10px; background: rgba(201, 162, 74, 0.12); border: 1px solid rgba(201, 162, 74, 0.4); border-radius: 14px; padding: 12px 16px; font-size: 14.5px; font-weight: 600; color: var(--gold-ink); } .offer-note .icon { color: var(--gold-600); } .product__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } /* -------------------------------------------------------------------------- Benefits -------------------------------------------------------------------------- */ .benefits { background: linear-gradient(180deg, var(--sand), var(--bg)); } .benefits__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .benefit { background: #fff; border: 1px solid rgba(14, 30, 60, 0.07); border-radius: 22px; padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .benefit:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(14, 30, 60, 0.1); } .benefit__icon { width: 48px; height: 48px; border-radius: 14px; border: 1px solid rgba(201, 162, 74, 0.45); background: rgba(201, 162, 74, 0.08); display: grid; place-items: center; } .benefit__icon .icon { width: 22px; height: 22px; color: var(--gold-500); } .benefit h3 { font-size: 18px; font-weight: 700; color: var(--navy-900); } .benefit p { font-size: 15px; color: var(--muted); } /* -------------------------------------------------------------------------- Comparison table -------------------------------------------------------------------------- */ .compare { background: #fff; } .compare__table { border: 1px solid rgba(14, 30, 60, 0.1); border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 20px 50px rgba(14, 30, 60, 0.08); display: grid; grid-template-columns: 0.7fr 1fr 1fr; align-items: stretch; } .compare__corner { background: #f7f8fa; padding: 20px; border-bottom: 1px solid var(--line); } .compare__head { padding: 18px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; } .compare__head--sanos { background: var(--navy-700); } .compare__head--sanos img { width: 30px; height: auto; } .compare__head--sanos span { font-size: 15px; font-weight: 700; color: var(--cream); line-height: 1.25; } .compare__head--other { background: #f1f2f4; border-bottom: 1px solid var(--line); } .compare__head--other .icon { width: 24px; height: 24px; color: var(--grey-400); } .compare__head--other span { font-size: 15px; font-weight: 700; color: var(--grey-500); line-height: 1.25; } .compare__label { padding: 18px 20px; border-bottom: 1px solid rgba(14, 30, 60, 0.07); display: flex; align-items: center; font-size: 14.5px; font-weight: 700; color: var(--navy-900); } .compare__cell { padding: 18px 16px; border-bottom: 1px solid rgba(14, 30, 60, 0.07); display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; } .compare__cell .icon { width: 19px; height: 19px; margin-top: 2px; } .compare__cell--sanos { background: rgba(20, 40, 79, 0.06); font-weight: 600; color: var(--navy-700); } .compare__cell--sanos .icon { color: var(--green); } .compare__cell--other { color: var(--grey-500); } .compare__cell--other .icon { color: var(--grey-300); } .compare__row--alt .compare__label, .compare__row--alt .compare__cell--other { background: #fbfbfc; } .compare__row--even .compare__label, .compare__row--even .compare__cell--other { background: #fff; } .compare__foot { padding: 22px 14px; background: #f7f8fa; } .compare__foot--cta { background: var(--navy-700); display: grid; place-items: center; } /* -------------------------------------------------------------------------- How to use -------------------------------------------------------------------------- */ .howto { background: var(--navy-900); } .howto__grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; } .howto__media { position: relative; } .howto__media::before { content: ''; position: absolute; inset: 4%; border-radius: 30px; background: radial-gradient(circle at 50% 50%, rgba(201, 162, 74, 0.24), rgba(201, 162, 74, 0) 70%); filter: blur(22px); } .howto__media img { position: relative; width: 100%; height: auto; border-radius: 24px; border: 1px solid rgba(201, 162, 74, 0.3); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.4); } .howto__steps { display: flex; flex-direction: column; gap: 16px; } .step { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(201, 162, 74, 0.28); border-radius: 20px; padding: 24px; display: flex; gap: 18px; align-items: flex-start; transition: border-color 0.3s ease, background 0.3s ease; } .step:hover { border-color: rgba(201, 162, 74, 0.6); background: rgba(255, 255, 255, 0.08); } .step__n { font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--gold-500); line-height: 1.05; flex: none; } .step h3 { font-size: 17.5px; font-weight: 700; color: var(--cream); margin-bottom: 7px; } .step p { font-size: 15px; color: var(--slate-400); } .howto__notes { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .howto__note { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--slate-400); } .howto__note .icon { color: var(--gold-500); margin-top: 3px; } /* -------------------------------------------------------------------------- FAQ -------------------------------------------------------------------------- */ .faq { background: var(--bg); } .faq__list { display: flex; flex-direction: column; gap: 12px; } .faq__item { background: #fff; border: 1px solid rgba(14, 30, 60, 0.09); border-radius: 16px; overflow: hidden; } .faq__q { width: 100%; display: flex; align-items: center; gap: 14px; background: transparent; border: 0; padding: 20px 22px; cursor: pointer; text-align: start; font-size: 16.5px; font-weight: 600; color: var(--navy-900); transition: background 0.2s ease; } .faq__q:hover { background: #f4f8fc; } .faq__q span:first-child { flex: 1; } .faq__sign { flex: none; font-size: 22px; font-weight: 400; color: var(--gold-500); line-height: 1; } /* Height is animated from JS-measured content height, so long answers are never clipped the way a fixed max-height would clip them. */ .faq__a { height: 0; overflow: hidden; transition: height 0.35s ease; } .faq__a p { padding: 0 22px 22px; font-size: 15.5px; color: var(--muted); } /* -------------------------------------------------------------------------- Order / contact -------------------------------------------------------------------------- */ .order { background: linear-gradient(165deg, var(--blue-100), var(--sand)); } .order__grid { display: grid; grid-template-columns: 1fr; gap: 24px; } .order__form { background: #fff; border: 1px solid rgba(14, 30, 60, 0.08); border-radius: 26px; padding: 32px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 20px 50px rgba(14, 30, 60, 0.07); } .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .field { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--navy-900); } .field input, .field select, .field textarea { border: 1px solid var(--line-strong); border-radius: 12px; padding: 13px 14px; font-size: 15px; font-weight: 400; color: var(--ink); background: #fcfcfd; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: 100%; } .field textarea { resize: vertical; font-family: inherit; min-height: 88px; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(20, 40, 79, 0.1); } .field input[readonly] { border-color: rgba(14, 30, 60, 0.12); color: var(--muted); background: #f4f6f9; } .field input[readonly].is-total { font-weight: 600; color: var(--navy-700); } .field input[aria-invalid='true'] { border-color: var(--danger); } .field__error { font-size: 12.5px; font-weight: 500; color: var(--danger); min-height: 16px; } .field__hint { font-size: 12.5px; font-weight: 500; color: var(--green); min-height: 16px; } .field__spacer { min-height: 16px; } .form__status { font-size: 13.5px; color: var(--green); min-height: 18px; text-align: center; } .form__status.is-error { color: var(--danger); } .form__fallback { display: none; justify-content: center; } .form__fallback.is-visible { display: flex; } .order__aside { display: flex; flex-direction: column; gap: 18px; } .contact-card { background: var(--navy-900); border-radius: 26px; padding: 30px; display: flex; flex-direction: column; gap: 14px; } .contact-card h3 { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--cream); } .contact-card a { display: flex; align-items: center; gap: 11px; color: var(--slate-300); font-size: 15.5px; } .contact-card a:hover { color: var(--gold-500); } .contact-card .icon { color: var(--gold-500); } .offer-card { background: #fff; border: 1px solid rgba(201, 162, 74, 0.4); border-radius: 26px; padding: 26px; display: flex; flex-direction: column; gap: 8px; } .offer-card__label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--gold-600); } .offer-card__title { font-size: 16px; font-weight: 600; color: var(--navy-900); } .offer-card__note { font-size: 14.5px; color: var(--muted); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--navy-950); color: var(--slate-400); } .site-footer__grid { max-width: var(--wrap); margin: 0 auto; padding: 64px 24px 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 34px; } .site-footer__brand { display: flex; flex-direction: column; gap: 12px; } .site-footer__logo { display: flex; align-items: center; gap: 10px; } .site-footer__logo img { width: 36px; height: auto; } .site-footer__logo span { font-family: var(--serif); font-size: 23px; font-weight: 700; letter-spacing: 0.16em; color: var(--cream); } .site-footer p { font-size: 14.5px; max-width: 260px; } .site-footer__col { display: flex; flex-direction: column; gap: 10px; } .site-footer__col h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--gold-500); margin: 0; } .site-footer__col a { color: var(--slate-400); font-size: 14.5px; } .site-footer__col a:hover { color: var(--gold-500); } .site-footer__col span { font-size: 13.5px; color: var(--slate-500); } .site-footer__legal { max-width: var(--wrap); margin: 0 auto; padding: 18px 24px 34px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; color: var(--slate-500); } /* -------------------------------------------------------------------------- Floating WhatsApp button -------------------------------------------------------------------------- */ .wa-float { position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 80; width: 58px; height: 58px; border-radius: 50%; background: var(--green); display: grid; place-items: center; box-shadow: 0 12px 30px rgba(30, 122, 75, 0.4); transition: background 0.25s ease, transform 0.25s ease; } .wa-float:hover { background: var(--green-700); transform: scale(1.06); } .wa-float .icon { width: 26px; height: 26px; color: #fff; } /* 404 */ .notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 80px 24px; background: linear-gradient(165deg, var(--blue-100), var(--sand)); } .notfound__code { font-family: var(--serif); font-size: clamp(72px, 14vw, 130px); font-weight: 700; color: var(--gold-500); line-height: 1; } .notfound h1 { font-family: var(--serif); font-size: clamp(26px, 4vw, 38px); font-weight: 600; color: var(--navy-900); margin: 12px 0 10px; } .notfound p { font-size: 16.5px; color: var(--muted); margin-bottom: 28px; } /* -------------------------------------------------------------------------- Scroll reveal -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } .reveal.is-visible { opacity: 1; transform: none; } /* Without JS, never leave content invisible */ .no-js .reveal { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- Desktop — matches the original design's 900px breakpoint -------------------------------------------------------------------------- */ @media (min-width: 900px) { .nav__links { display: flex; } .nav__burger { display: none; } .mobile-menu.is-open { display: none; } .nav__right { gap: 26px; } .hero__grid { grid-template-columns: 1.05fr 0.95fr; } .product__card { grid-template-columns: 0.9fr 1.1fr; } .order__grid { grid-template-columns: 1.35fr 0.65fr; } .howto__grid { grid-template-columns: 0.85fr 1.15fr; } .compare__table { grid-template-columns: 0.75fr 1.15fr 1.15fr; } } /* Small phones: keep the comparison table readable */ @media (max-width: 480px) { :root { --section-y: 64px; } .compare__label, .compare__cell { padding: 14px 11px; font-size: 13.5px; } .compare__head span { font-size: 13.5px; } .product__body { padding: 30px 24px; } .order__form { padding: 24px 20px; } .nav__logo img { width: 62px; height: 46px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } } @media print { .site-header, .wa-float, .mobile-menu, .lang-toggle { display: none !important; } body { background: #fff; } }