/* ══════════════════════════════════════════════════════════════════ MDF Sample Tablet — карточка-планшет (физическая метафора реального MDF-планшета с нанесённой штукатуркой, используемого для показа клиентам). DEV-компонент, живёт отдельно от shared.css, пока не утверждён для боевого использования — см. dev-preview-mdf-card.php. Физическая спецификация (реальный планшет 36in × 48in, портрет 3:4): - радиус углов панели 1in - отступ поля образца L/R/B 1/4in - отверстие подвеса пилюля 1in × 3in, центр верхней пустой зоны (по X и по Y) - отступ поля образца сверху 2in (= верхняя пустая зона) Типографика плашки (.mdf-name/.mdf-tags-label/.mdf-tag) — ИСКЛЮЧЕНИЕ из этой шкалы: фиксированные px, те же значения, что у аналогичных полей .card-id-pill плоской карточки образца (shared.css), не масштабируются вместе с панелью. Все размеры считаются от единственной переменной --mdf-w (ширина карточки в px) через --mdf-unit = --mdf-w / 36 («1 дюйм панели» в px) — так пропорции остаются математически точными при любом размере. ══════════════════════════════════════════════════════════════════ */ .mdf-card{ --mdf-w: 260px; --mdf-tilt: 0deg; --mdf-unit: calc(var(--mdf-w) / 36); /* 1 физический дюйм панели, в px */ --mdf-radius: calc(var(--mdf-unit) * 1); --mdf-pad-side: calc(var(--mdf-unit) * 0.25); --mdf-pad-bottom: var(--mdf-pad-side); /* отверстие подвеса — пилюля 1in×3in, отцентрована (и по X, и по Y) в верхней пустой зоне карточки (--mdf-pad-top = 1.5in, свободна от фото). */ --mdf-hole-w: calc(var(--mdf-unit) * 3); --mdf-hole-h: calc(var(--mdf-unit) * 1); --mdf-pad-top: calc(var(--mdf-unit) * 2); position: relative; width: var(--mdf-w); aspect-ratio: 3 / 4; flex: 0 0 auto; border-radius: var(--mdf-radius); /* Бежевый градиент плиты (#D9C7A1/#C7B182/#B39C6F) — сознательно НЕ токен: это физический цвет реального MDF-планшета (как цвет на фото), а не элемент темы сайта — не должен меняться в тёмной теме, аналогично фирменному зелёному WhatsApp в detail-page.css. */ background: radial-gradient(120% 140% at 18% 8%, color-mix(in srgb,var(--text-on-accent) 35%,transparent), transparent 55%), linear-gradient(155deg, #D9C7A1 0%, #C7B182 46%, #B39C6F 100%); box-shadow: 0 calc(var(--mdf-unit)*0.55) calc(var(--mdf-unit)*1.4) var(--shadow-card), 0 calc(var(--mdf-unit)*0.12) 0 color-mix(in srgb,var(--text-on-accent) 40%,transparent) inset; transform: rotate(var(--mdf-tilt)) translateY(0); transition: transform .38s cubic-bezier(.22,.7,.32,1), box-shadow .38s ease; cursor: pointer; } /* мелкая равномерная шумовая текстура инженерного композита — НЕ дерево, поэтому fractalNoise с высокой частотой, а не волокнистые полосы */ .mdf-card::before{ content:''; position:absolute; inset:0; border-radius: inherit; background-image: url("data:image/svg+xml;utf8,"); background-size: 180px 180px; mix-blend-mode: multiply; opacity: .55; pointer-events: none; } /* Подъём на hover — фиксированные -4px (2026-08-19, по прямому запросу: единый эффект для ВСЕХ карточек сайта — см. тот же -4px у .card в shared.css и .pc-card в product-paint-bucket.css). Раньше было пропорционально от --mdf-unit (calc(var(--mdf-unit) * -0.9)) — на карточке 360-384px это давало ~9-10px, заметно больше остальных карточек сайта; теперь везде одна и та же величина независимо от --mdf-w. */ .mdf-card:hover, .mdf-card:focus-visible{ --mdf-tilt: 0deg; transform: rotate(0deg) translateY(-4px); box-shadow: 0 calc(var(--mdf-unit)*1.3) calc(var(--mdf-unit)*2.6) var(--shadow-card-hover), 0 calc(var(--mdf-unit)*0.12) 0 color-mix(in srgb,var(--text-on-accent) 45%,transparent) inset; z-index: 5; } /* чередование угла наклона по кругу — имитация стопки образцов на столе */ .mdf-row .mdf-card:nth-child(5n+1){ --mdf-tilt: -2deg; } .mdf-row .mdf-card:nth-child(5n+2){ --mdf-tilt: 1deg; } .mdf-row .mdf-card:nth-child(5n+3){ --mdf-tilt: -1deg; } .mdf-row .mdf-card:nth-child(5n+4){ --mdf-tilt: 1.5deg; } .mdf-row .mdf-card:nth-child(5n+5){ --mdf-tilt: -1.5deg; } /* отверстие подвеса — пилюля, отцентрована в верхней пустой зоне (--mdf-pad-top) по X и по Y. Цвет/тень — как у .hang-hole (тот же лёгкий полупрозрачный чёрный + мягкая внутренняя тень, не наш прежний тёмный бевел с градиентом). */ .mdf-hole{ position: absolute; top: calc((var(--mdf-pad-top) - var(--mdf-hole-h)) / 2); left: 50%; width: var(--mdf-hole-w); height: var(--mdf-hole-h); transform: translateX(-50%); border-radius: calc(var(--mdf-hole-h) / 2); background: color-mix(in srgb,var(--shadow-black) 13.33%,transparent); box-shadow: inset 0 1px 2px color-mix(in srgb,var(--shadow-black) 35%,transparent); z-index: 2; } /* поле образца — фото нанесённого материала, cover-fit, любое разрешение */ .mdf-field{ position: absolute; top: var(--mdf-pad-top); left: var(--mdf-pad-side); right: var(--mdf-pad-side); bottom: var(--mdf-pad-bottom); /* нижние углы — та же формула, что у .mdf-info (радиус карточки минус отступ поля от края) — плашка сидит флеш на нижнем крае фото, и её угол должен продолжать кривизну угла фото без излома. Верхние углы — свой, более мелкий радиус, как и раньше. */ border-radius: calc(var(--mdf-radius) * 0.18) calc(var(--mdf-radius) * 0.18) calc(var(--mdf-radius) - var(--mdf-pad-side)) calc(var(--mdf-radius) - var(--mdf-pad-side)); overflow: hidden; background: var(--bg-3); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--shadow-card) 64.3%,transparent), inset 0 calc(var(--mdf-unit)*0.1) calc(var(--mdf-unit)*0.3) color-mix(in srgb,var(--shadow-card) 78.6%,transparent); } .mdf-field img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Бейдж "Sample" (левый верхний угол) + плашка "X projects" (правый верхний угол) — 2026-08-19, по прямому запросу "используй тот же класс, что и card-count-pill" / "бейдж Sample в левом верхнем углу" / "в правом верхнем углу так же должен располагаться". Переиспользуют ГОТОВЫЕ классы .card-badge/.card-count-badge/.card-count-pill (shared.css) — те же, что у "Product"/"X projects"/"Y samples" на плоской карточке продукта — без собственных mdf-специфичных классов. Позиционирование — своё для этого контекста (на плоской карточке они лежат в .card-photo-top, flex space-between; здесь .mdf-field уже position:absolute — те же два угла через independent absolute, без лишней flex-обёртки). Прозрачность фона .05/текста .1 у плашки — тот же запрос, что и у .card--peek .card-count-pill (продукт), применена тут отдельным контекстным селектором, чтобы не плодить новый класс. */ .mdf-field .card-badge{position:absolute;top:8px;left:8px;z-index:2} .mdf-field .card-count-badge{position:absolute;top:8px;right:8px;z-index:2} .mdf-field .card-count-pill{background:color-mix(in srgb,var(--shadow-black) 15%,transparent);color:color-mix(in srgb,var(--text-inverse) 50%,transparent)} /* текст/пилюли — тот же приём, что card-id-pill у карточки образца: плашка поверх нижней части фото. Флеш с левым/правым/нижним краем поля (те же --mdf-pad-side/--mdf-pad-bottom, что и у .mdf-field) — это нужно, чтобы нижние углы плашки были геометрически концентричны угла́м самой карточки: радиус угла карточки минус этот же отступ = радиус угла плашки, см. border-radius ниже. Верхние углы не скруглены — плашка «врезана» в нижнюю часть фото, а не парит отдельной пилюлей. */ /* Обёртка над .mdf-info (2026-08-21, по прямому запросу — плашка "Open ↗" переехала ИЗ .mdf-info НАД ней) — колонка, растущая снизу вверх от того же нижнего/бокового отступа поля, что раньше держала сама .mdf-info: первым рядом сверху — свободно висящая над фото пилюля Open (без собственного отступа слева, align-items:flex-end прижимает её к правому краю), вторым, вплотную к низу, — сама плашка .mdf-info на всю ширину (align-self:stretch ниже). */ .mdf-plate{ position: absolute; left: var(--mdf-pad-side); right: var(--mdf-pad-side); bottom: var(--mdf-pad-bottom); display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--mdf-unit) * 0.18); } .mdf-info{ align-self: stretch; display: flex; flex-direction: column; gap: calc(var(--mdf-unit) * 0.12); background: color-mix(in srgb,var(--bg-card) 94%,transparent); border-radius: 0 0 calc(var(--mdf-radius) - var(--mdf-pad-side)) calc(var(--mdf-radius) - var(--mdf-pad-side)); padding: calc(var(--mdf-unit)*0.32) calc(var(--mdf-unit)*0.4); box-shadow: 0 calc(var(--mdf-unit)*0.2) calc(var(--mdf-unit)*0.5) color-mix(in srgb,var(--shadow-black) 18%,transparent); } /* Типографика плашки — НЕ по физической шкале --mdf-unit (в отличие от геометрии панели), а те же фиксированные значения, что и аналогичные поля на .card-id-pill плоской карточки образца (shared.css) — чтобы текст на планшете читался в одной масштабной системе с остальным каталогом, а не масштабировался вместе с размером панели. .mdf-eyebrow ("Sample") удалён (2026-08-19, по прямому запросу — дублировал бейдж .card-badge "Sample" в левом верхнем углу фото). */ .mdf-name{ font-family: var(--display, Georgia, serif); font-size: 14px; font-weight: 700; font-style: italic; line-height: 1.2; color: var(--ink, #2E2420); } .mdf-code{ font-style: normal; opacity: .7; font-size: .85em; } /* Плашка "Open ↗" (2026-08-21, по прямому запросу — сделать один-в-один как .card-id-pill.cta-link.card-id-arrow на карточке Project, включая сам класс .card-id-arrow — не только .card-id-pill/.cta-link, только он даёт правильные align-items:center/padding вместо .card-id-pill'ного baseline/5px 5px). .card-id-arrow сам по себе display:none по умолчанию (shared.css — включается только внутри .card--overlay/ .card--peek через их собственные более специфичные правила) — здесь переопределяем на display:flex явно, т.к. mdf-card.css подключается ПОСЛЕ shared.css (тот же приём, что и у ID-обёрток #groupsByPattern выше в sample-collection.css — более поздний файл в каскаде выигрывает при равной специфичности без доп. классов/!important). Никаких переопределений размера/паддинга — по прямому запросу выглядит ИДЕНТИЧНО пилюле Project, не масштабируется под mdf-unit. */ .mdf-open{ display: flex; } /* Material/Materials — тот же приём, что .card-label у карточки образца: мелкая моно-надпись над рядом тегов; число (ед./мн.) решает JS/PHP по количеству материалов (см. renderMdfCard / fitMdfTags). */ .mdf-tags-label{ font-family: var(--mono, 'Trebuchet MS', sans-serif); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-faint, #8C8570); margin-top: calc(var(--mdf-unit)*0.1); } /* Однострочный ряд тегов материалов — намеренно БЕЗ переноса (nowrap), в отличие от .card-tags на плоской карточке образца: сколько тегов влезает в одну строку по ширине карточки, считает JS (fitMdfTags), обрезая до "+N more" последним тегом. overflow:hidden — на случай пока JS ещё не отработал (до первого fit-прохода). */ .mdf-tags{ display: flex; flex-wrap: nowrap; overflow: hidden; gap: calc(var(--mdf-unit)*0.14); margin-top: calc(var(--mdf-unit)*0.06); } .mdf-tag{ font-family: var(--body, Georgia, serif); font-size: 13px; color: var(--ink, #2E2420); border: 1px solid var(--line-3, #8C8570); border-radius: var(--r, calc(var(--mdf-radius) * 0.1)); padding: 2px 7px; white-space: nowrap; flex: 0 0 auto; } .mdf-tag--more{ color: var(--ink-faint, #8C8570); border-style: dashed; } /* ── ряд карточек — «стопка образцов на столе» ── */ .mdf-row{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: calc(var(--mdf-w, 260px) * 0.14); padding: calc(var(--mdf-w, 260px) * 0.1) calc(var(--mdf-w, 260px) * 0.06); } @media (max-width: 640px){ .mdf-card{ --mdf-w: clamp(150px, 42vw, 220px); } }