/* * Portfolio of upholstered wall panels. * All component classes are prefixed mpw-; no framework or font download is needed. * Change the tokens below to adapt the component to another site. */ .mpw-portfolio, .mpw-modal { --mpw-bg: #faf8f6; --mpw-card: #fff; --mpw-ink: #2b292c; --mpw-muted: #706d71; --mpw-soft: #f4eee9; --mpw-line: #ded4cd; --mpw-accent: #956653; --mpw-accent-dark: #80513f; --mpw-serif: "Times New Roman", Georgia, serif; --mpw-sans: Arial, "Helvetica Neue", Helvetica, sans-serif; font-family: var(--mpw-sans); color: var(--mpw-ink); font-size: 16px; line-height: 1.4; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .mpw-portfolio *, .mpw-portfolio *::before, .mpw-portfolio *::after, .mpw-modal *, .mpw-modal *::before, .mpw-modal *::after { box-sizing: border-box; } :where(.mpw-portfolio, .mpw-modal) :where(button, input, select, textarea) { font: inherit; } .mpw-portfolio button, .mpw-modal button { cursor: pointer; } .mpw-portfolio a, .mpw-modal a { color: inherit; } :where(.mpw-portfolio, .mpw-modal) img { display: block; max-width: 100%; } .mpw-portfolio [hidden], .mpw-modal [hidden] { display: none !important; } .mpw-portfolio :focus-visible, .mpw-modal :focus-visible { outline: 3px solid #785041; outline-offset: 4px; } .mpw-portfolio ::selection, .mpw-modal ::selection { background: #e6d0c4; color: #272124; } .mpw-demo-body { margin: 0; background: #faf8f6; } .mpw-scroll-locked { overflow: hidden !important; } .mpw-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .mpw-icon { flex: 0 0 auto; display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* ——— Page surface and decorative imagery ——— */ .mpw-portfolio { position: relative; isolation: isolate; overflow: hidden; padding: 19px 44px 25px; background: radial-gradient(ellipse at 100% 35%, #eae3db88 0, transparent 27%), radial-gradient(ellipse at 0 89%, #eae1d466 0, transparent 25%), radial-gradient(ellipse at 66% 10%, #fff 0, #ffffff00 52%), var(--mpw-bg); } .mpw-portfolio__container { position: relative; z-index: 1; width: 100%; max-width: 1360px; margin: 0 auto; } .mpw-portfolio__decoration { position: absolute; z-index: 0; inset: 0; pointer-events: none; overflow: hidden; } .mpw-portfolio__shadow { position: absolute; user-select: none; } .mpw-portfolio__shadow--left { width: 276px; height: auto; top: -9px; left: -17px; opacity: .72; } .mpw-portfolio__shadow--right { width: 290px; height: auto; top: -49px; right: -192px; transform: scaleX(-1) rotate(-19deg); opacity: .55; } .mpw-portfolio__shadow--bottom { width: 384px; height: auto; top: 48%; right: -221px; transform: scaleX(-1) rotate(-36deg); opacity: .38; filter: blur(3px); } /* ——— Header ——— */ .mpw-portfolio__header { position: relative; text-align: center; } .mpw-portfolio__eyebrow { display: flex; align-items: center; justify-content: center; gap: 17px; margin: 0 0 10px; color: #5c5554; font-size: 12px; line-height: 18px; text-transform: uppercase; letter-spacing: 4.5px; font-weight: 400; } .mpw-portfolio__eyebrow::before, .mpw-portfolio__eyebrow::after { content: ""; width: 44px; height: 1px; background: #c9ada0; opacity: .8; } .mpw-portfolio__heading { margin: 0; font-family: var(--mpw-serif); font-size: clamp(35px, 3.62vw, 51px); line-height: 1.08; font-weight: 700; letter-spacing: -1.7px; color: #232225; text-wrap: balance; } .mpw-portfolio__intro { max-width: 1000px; margin: 10px auto 0; font-size: 16px; line-height: 20px; color: var(--mpw-muted); font-weight: 400; } .mpw-portfolio__handwriting { position: absolute; width: 178px; height: auto; right: 5px; top: 62px; pointer-events: none; } /* ——— Filters: progressive enhancement; still readable without JavaScript ——— */ .mpw-filters { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; margin: 23px 0 16px; } .mpw-filter { appearance: none; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 39px; border: 1px solid #cfc4be; border-radius: 999px; padding: 8px 27px; color: #534a46; background: #ffffff40; font-size: 14px !important; line-height: 20px; font-weight: 400; transition: color .18s ease, background .18s ease, border-color .18s ease; } .mpw-filter:hover { border-color: #9a7565; background: #eee4dd; } .mpw-filter[aria-pressed="true"] { color: #fff; background: #936753; border-color: #936753; } .mpw-portfolio:not(.is-enhanced) .mpw-filters { display: none; } /* ——— Project cards ——— */ .mpw-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; } .mpw-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 4px 4px 0; border: 1px solid #eeeae6; border-radius: 14px; background: var(--mpw-card); box-shadow: 0 2px 4px #55442f09, 0 8px 24px #55442f03; transition: box-shadow .2s ease, border-color .2s ease; } .mpw-card:hover { border-color: #ded0c5; box-shadow: 0 7px 20px #73503913; } .mpw-card__photo { position: relative; display: block; overflow: hidden; aspect-ratio: 2.035 / 1; flex: 0 0 auto; border-radius: 8px 8px 5px 5px; background: #e4dcd4; text-decoration: none; } .mpw-card__photo picture { display: block; width: 100%; height: 100%; } .mpw-card__image { width: 100%; height: 100%; object-fit: cover; object-position: var(--mpw-photo-position, center); transition: transform .5s ease; } .mpw-card__photo:hover .mpw-card__image, .mpw-card__photo:focus-visible .mpw-card__image { transform: scale(1.035); } .mpw-card__category { position: absolute; top: 13px; left: 13px; padding: 5px 14px; border-radius: 999px; background: #fffffff0; color: #3e3834; font-size: 13px; line-height: 19px; pointer-events: none; } .mpw-card__zoom { position: absolute; bottom: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ffffff80; border-radius: 50%; background: #fffffff0; color: #644b3e; opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; } .mpw-card__zoom .mpw-icon { width: 19px; height: 19px; } .mpw-card__photo:hover .mpw-card__zoom, .mpw-card__photo:focus-visible .mpw-card__zoom { opacity: 1; transform: translateY(0); } .mpw-card__body { display: flex; flex-direction: column; flex: 1; padding: 11px 14px 14px; } .mpw-card__title { margin: 0 0 4px; font-family: var(--mpw-sans); font-size: 16px; line-height: 21px; font-weight: 600; color: #302d31; } .mpw-card__description { margin: 0; font-size: 15.5px; line-height: 19px; color: #747178; } .mpw-card__tags { display: flex; flex-wrap: wrap; gap: 6px 8px; align-content: flex-start; list-style: none; padding: 8px 0 0; margin: auto 0 0; } .mpw-tag { margin: 0; padding: 5px 14px; border-radius: 999px; background: var(--mpw-soft); color: #5b514c; font-size: 12.5px; line-height: 19px; white-space: nowrap; } .mpw-empty { padding: 45px 15px; margin: 0; text-align: center; color: var(--mpw-muted); } /* ——— Benefits and CTAs ——— */ .mpw-portfolio__footer { display: flex; align-items: center; gap: 20px; padding-top: 20px; } .mpw-benefits { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; padding: 0; margin: 0; min-width: 0; } .mpw-benefit { display: flex; align-items: center; gap: 12px; min-width: 0; } .mpw-benefit__icon { display: grid; place-items: center; flex: 0 0 auto; width: 51px; height: 51px; border-radius: 50%; background: #eee3d9; color: #875b46; } .mpw-benefit__icon .mpw-icon { width: 28px; height: 28px; stroke-width: 1.45; } .mpw-benefit__copy { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 17px; } .mpw-benefit__copy strong { font-weight: 600; } .mpw-benefit__copy > span { color: #797372; } .mpw-portfolio__actions { flex: 0 0 auto; padding-left: 31px; border-left: 1px solid #d2c6bc; } .mpw-portfolio__buttons { display: flex; align-items: center; gap: 15px; } .mpw-button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 47px; padding: 11px 28px; border: 1px solid transparent; border-radius: 999px; font-family: var(--mpw-sans); font-size: 14px; font-weight: 500; line-height: 22px; text-decoration: none; white-space: nowrap; text-align: center; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; } .mpw-button .mpw-icon { width: 20px; height: 20px; stroke-width: 1.5; } .mpw-portfolio .mpw-button--primary, .mpw-modal .mpw-button--primary { color: #fff; background: linear-gradient(110deg, #986b58 0%, #875442 100%); border-color: #94614c; } .mpw-portfolio .mpw-button--primary:hover, .mpw-modal .mpw-button--primary:hover { color: #fff; background: linear-gradient(110deg, #855943, #734331); border-color: #7e4d39; box-shadow: 0 4px 12px #75472b26; } .mpw-portfolio .mpw-button--outline, .mpw-modal .mpw-button--outline { color: #383135; background: #ffffff50; border-color: #b99481; } .mpw-portfolio .mpw-button--outline:hover, .mpw-modal .mpw-button--outline:hover { background: #eee4dd; border-color: #926a56; } .mpw-button:disabled { opacity: .6; cursor: wait; } .mpw-portfolio__footnote { margin: 9px 0 0; color: #827c78; font-size: 12px; line-height: 17px; text-align: right; } /* ——— Native modal dialogs ——— */ .mpw-modal { box-sizing: border-box; width: min(960px, calc(100% - 40px)); max-width: none; max-height: calc(100dvh - 40px); padding: 0; border: 1px solid #e7ded7; border-radius: 20px; background: var(--mpw-bg); box-shadow: 0 24px 100px #22150a4d; overflow: auto; } .mpw-modal::backdrop { background: #211914a6; backdrop-filter: blur(5px); } .mpw-modal:not([open]) { display: none; } .mpw-icon-button { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid #d7c9bd; border-radius: 50%; color: #4b3a31; background: #fffffff5; padding: 0; } .mpw-icon-button:hover { background: #eee4dd; } .mpw-lightbox__topbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 8px 20px; } .mpw-lightbox__counter { font-size: 14px; color: #77665b; font-variant-numeric: tabular-nums; } .mpw-lightbox__stage { position: relative; padding: 0 14px; background: #ede7e0; touch-action: pan-y; } .mpw-lightbox__image { width: 100%; height: min(60dvh, 570px); object-fit: contain; } .mpw-lightbox__nav { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); box-shadow: 0 3px 14px #33231126; } .mpw-lightbox__nav--prev { left: 23px; } .mpw-lightbox__nav--next { right: 23px; } .mpw-lightbox__caption { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 22px 24px; } .mpw-lightbox__title { font-family: var(--mpw-serif); font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -.4px; margin: 0 0 8px; } .mpw-lightbox__description { margin: 0; color: var(--mpw-muted); line-height: 1.5; font-size: 14px; } .mpw-lightbox__caption > .mpw-button { flex: 0 0 auto; } /* ——— Estimate request, no invented prices ——— */ .mpw-estimate { width: min(620px, calc(100% - 40px)); padding: 32px; } .mpw-estimate__close { position: absolute; top: 15px; right: 15px; } .mpw-estimate__eyebrow { margin: 0 48px 10px 0; color: var(--mpw-accent); font-size: 11px; text-transform: uppercase; letter-spacing: 2.5px; } .mpw-estimate__title { font-family: var(--mpw-serif); font-size: 39px; line-height: 1.08; letter-spacing: -.8px; margin: 0 30px 11px 0; } .mpw-estimate__intro { font-size: 14px; line-height: 1.5; margin: 0 0 20px; color: var(--mpw-muted); } .mpw-estimate__project { padding: 11px 14px; border-left: 2px solid #a07760; background: #eee5dc; font-size: 13px; margin: 0 0 16px; border-radius: 0 8px 8px 0; } .mpw-form { position: relative; display: grid; gap: 16px; margin: 0; } .mpw-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .mpw-field { position: relative; display: flex; flex-wrap: wrap; align-content: start; align-items: baseline; gap: 7px 3px; min-width: 0; font-size: 13px; font-weight: 600; } .mpw-field input, .mpw-field select, .mpw-field textarea { display: block; width: 100%; min-width: 0; min-height: 45px; padding: 11px 12px; border: 1px solid #cec0b4; border-radius: 9px; color: #372d28; background: #fff; font-size: 16px; font-weight: 400; line-height: 1.4; } .mpw-field textarea { resize: vertical; max-height: 240px; } .mpw-field select { padding-right: 25px; } .mpw-field input::placeholder, .mpw-field textarea::placeholder { color: #8a817a; font-size: 14px; } .mpw-field__required { color: #875442; } .mpw-field__hint { display: block; color: var(--mpw-muted); font-size: 11px; line-height: 1.3; font-weight: 400; } .mpw-form__area { color: #78644f; margin: -8px 0 0; font-size: 12px; } .mpw-consent { display: flex; align-items: flex-start; gap: 9px; color: #655b55; font-size: 12px; line-height: 1.5; } .mpw-consent input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: #936753; margin: 1px 0 0; } .mpw-consent a { text-underline-offset: 3px; } .mpw-form__honeypot { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; } .mpw-form__demo-note { padding: 10px 12px; margin: 0; background: #f0e9df; color: #756348; border-radius: 7px; font-size: 12px; line-height: 1.5; } .mpw-form__submit { width: 100%; } .mpw-form__status { margin: 0; padding: 13px; border: 1px solid #c9bda9; border-radius: 8px; font-size: 13px; line-height: 1.5; } .mpw-form__status[data-state="success"] { color: #355337; background: #edf2e9; border-color: #9bad8e; } .mpw-form__status[data-state="error"] { color: #823b2a; background: #fbefeb; border-color: #d6ac9d; } .mpw-form__status[data-state="demo"] { color: #665135; background: #f4eee2; } /* ——— Desktop / tablet ——— */ @media (min-width: 1449px) { .mpw-portfolio { padding-top: 35px; padding-bottom: 36px; } } @media (max-width: 1399px) { .mpw-benefit__copy { font-size: 12px; line-height: 17px; } .mpw-benefit { gap: 9px; } .mpw-benefit__icon { width: 44px; height: 44px; } .mpw-portfolio__actions { padding-left: 20px; } .mpw-portfolio__buttons { gap: 10px; } .mpw-portfolio__buttons .mpw-button { padding-inline: 22px; } .mpw-portfolio__handwriting { width: 157px; right: -1px; top: 67px; } } @media (max-width: 1279px) { .mpw-portfolio { padding-inline: 32px; } .mpw-portfolio__handwriting { display: none; } .mpw-portfolio__heading { font-size: 43px; } .mpw-portfolio__intro { font-size: 15px; } .mpw-card__body { padding-inline: 11px; } .mpw-card__title { font-size: 15px; } .mpw-card__description { font-size: 14px; line-height: 19px; } .mpw-tag { padding-inline: 10px; font-size: 11px; } .mpw-portfolio__footer { flex-wrap: wrap; gap: 20px; } .mpw-benefits { flex-basis: 100%; justify-content: center; gap: 55px; } .mpw-benefit__copy { font-size: 13px; } .mpw-portfolio__actions { width: 100%; padding: 20px 0 0; border-left: 0; border-top: 1px solid #dcd0c7; } .mpw-portfolio__buttons { justify-content: center; gap: 16px; } .mpw-portfolio__footnote { text-align: center; } } @media (max-width: 1099px) { .mpw-portfolio { padding: 28px 28px 30px; } .mpw-portfolio__heading { max-width: 750px; margin-inline: auto; font-size: 43px; } .mpw-portfolio__intro { max-width: 730px; line-height: 1.4; margin-top: 14px; } .mpw-desktop-break, .mpw-wide-break { display: none; } .mpw-filters { gap: 9px; margin-top: 22px; margin-bottom: 20px; } .mpw-filter { padding: 8px 20px; } .mpw-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .mpw-card__photo { aspect-ratio: 1.82 / 1; } .mpw-card__body { padding: 13px 13px 15px; } .mpw-card__title { font-size: 16px; } .mpw-card__description { font-size: 14.5px; line-height: 20px; } .mpw-tag { padding-inline: 12px; font-size: 12px; } .mpw-benefits { gap: 25px; justify-content: space-between; } .mpw-portfolio__footer { padding-top: 24px; } .mpw-portfolio__shadow--left { left: -75px; opacity: .5; } } @media (max-width: 767px) { .mpw-portfolio { padding-inline: 20px; } .mpw-portfolio__heading { font-size: 37px; letter-spacing: -1px; } .mpw-portfolio__intro { font-size: 14px; } .mpw-filter { padding-inline: 18px; font-size: 13px !important; } .mpw-project-grid { gap: 12px; } .mpw-card__body { padding-inline: 10px; } .mpw-card__title { font-size: 15px; line-height: 20px; } .mpw-card__description { font-size: 13.5px; line-height: 19px; } .mpw-card__category { top: 10px; left: 10px; padding-inline: 11px; font-size: 12px; } .mpw-tag { padding: 4px 10px; font-size: 10.5px; } .mpw-benefits { gap: 16px; } .mpw-benefit__copy { font-size: 11px; line-height: 15px; } .mpw-benefit__icon { width: 38px; height: 38px; } .mpw-benefit__icon .mpw-icon { width: 23px; height: 23px; } .mpw-lightbox__caption { flex-direction: column; align-items: stretch; } .mpw-lightbox__title { font-size: 27px; } } /* ——— Mobile ——— */ @media (max-width: 639px) { .mpw-portfolio { padding: 27px 16px 28px; } .mpw-portfolio__eyebrow { font-size: 10px; line-height: 16px; letter-spacing: 3px; gap: 13px; margin-bottom: 12px; } .mpw-portfolio__eyebrow::before, .mpw-portfolio__eyebrow::after { width: 28px; } .mpw-portfolio__heading { font-size: clamp(29px, 8.05vw, 38px); line-height: 1.06; letter-spacing: -.9px; max-width: 440px; } .mpw-portfolio__intro { font-size: 14px; line-height: 1.5; margin: 14px auto 0; max-width: 480px; } .mpw-portfolio__shadow--left { width: 230px; top: -25px; left: -120px; opacity: .35; } .mpw-portfolio__shadow--right { width: 230px; right: -191px; opacity: .3; } .mpw-portfolio__shadow--bottom { display: none; } .mpw-filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 16px; position: relative; gap: 8px; margin: 20px -16px 16px; padding: 4px 16px 5px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mpw-filters::-webkit-scrollbar { display: none; } .mpw-filter { min-height: 41px; padding: 9px 20px; scroll-snap-align: start; font-size: 13px !important; } .mpw-project-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; } .mpw-card { border-radius: 14px; } .mpw-card__photo { aspect-ratio: 1.55 / 1; } .mpw-card__body { padding: 13px 13px 15px; } .mpw-card__title { font-size: 17px; line-height: 22px; margin-bottom: 7px; } .mpw-card__description { font-size: 14.5px; line-height: 20px; } .mpw-card__tags { padding-top: 12px; gap: 7px; } .mpw-tag { font-size: 11.5px; padding: 5px 12px; line-height: 18px; } .mpw-card__category { top: 12px; left: 12px; font-size: 12px; padding: 6px 12px; } .mpw-card__zoom { opacity: 1; transform: none; width: 33px; height: 33px; bottom: 11px; right: 11px; } .mpw-portfolio__footer { padding-top: 25px; gap: 22px; } .mpw-benefits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 17px; padding-inline: 4px; } .mpw-benefit { gap: 13px; } .mpw-benefit__icon { width: 44px; height: 44px; } .mpw-benefit__icon .mpw-icon { width: 25px; height: 25px; } .mpw-benefit__copy { font-size: 13px; line-height: 17px; } .mpw-portfolio__actions { padding-top: 21px; } .mpw-portfolio__buttons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; } .mpw-portfolio__buttons .mpw-button { min-height: 49px; width: 100%; font-size: 14px; } .mpw-portfolio__footnote { font-size: 11px; line-height: 16px; margin-top: 12px; padding-inline: 15px; } .mpw-modal { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 16px; } .mpw-lightbox__topbar { padding: 8px 10px; } .mpw-lightbox__stage { padding: 0; } .mpw-lightbox__image { height: auto; max-height: 50dvh; } .mpw-lightbox__nav { width: 35px; height: 35px; } .mpw-lightbox__nav--prev { left: 10px; } .mpw-lightbox__nav--next { right: 10px; } .mpw-lightbox__caption { padding: 18px; gap: 18px; } .mpw-lightbox__title { font-size: 25px; } .mpw-lightbox__description { font-size: 13px; } .mpw-lightbox__caption .mpw-button { white-space: normal; } .mpw-estimate { padding: 25px 19px; } .mpw-estimate__title { font-size: 32px; max-width: 270px; } .mpw-estimate__eyebrow { font-size: 10px; letter-spacing: 1.5px; } .mpw-estimate__intro { font-size: 13px; margin-top: 14px; } .mpw-estimate__close { top: 10px; right: 10px; width: 35px; height: 35px; } .mpw-form { gap: 15px; } .mpw-form__row { gap: 10px; } .mpw-field { font-size: 12px; } .mpw-field input, .mpw-field select, .mpw-field textarea { padding-inline: 10px; } } @media (max-width: 359px) { .mpw-card__tags { gap: 6px; } .mpw-tag { font-size: 10px; padding-inline: 10px; } .mpw-form__row { grid-template-columns: minmax(0, 1fr); } .mpw-estimate__title { font-size: 28px; } } @media (hover: none) { .mpw-card__zoom { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .mpw-portfolio *, .mpw-modal * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } @media print { .mpw-portfolio { padding: 0; background: #fff; } .mpw-portfolio__decoration, .mpw-filters, .mpw-card__zoom, .mpw-portfolio__handwriting, .mpw-modal { display: none !important; } .mpw-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mpw-card { break-inside: avoid; box-shadow: none; } .mpw-portfolio__footer { break-inside: avoid; } } /* ========================================================================== Правки под сайт. Ниже — только то, чего не было в вёрстке: снятие теговых правил темы и поведение, которого на демо-странице не было. Классы вёрстки переименованы mp- → mpw-: на главной уже живут блоки материалов (.mp-icon) и CRO-формы (.mp-form), и общие имена столкнулись бы. ========================================================================== */ /* Тема делает
плавающей шапкой на весь экран, а