:root { --ink:#1d1b20; --muted:#6c6870; --line:#ded9dd; --paper:#fffcfe; --canvas:#f5f1f3; --accent:#a50c3f; --accent-dark:#77052b; --shadow:0 12px 30px rgb(51 20 32 / 8%); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--canvas); } a { color:inherit; } button,input,select { font:inherit; }
.site-header { align-items:center; background:#21161b; color:#fff; display:flex; justify-content:space-between; min-height:76px; padding:15px max(24px,calc((100vw - 1320px) / 2)); } .brand { display:grid; gap:2px; text-decoration:none; } .brand__name { font-family:Georgia,serif; font-size:1.55rem; line-height:1; } .brand__section,.eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } .brand__section { color:#e9bdcc; } .site-header__actions { align-items:center; display:flex; gap:16px; } .current-user { color:#f5dce5; font-size:.9rem; }
.page-shell { margin:0 auto; max-width:1320px; padding:44px 24px 60px; } .page-heading,.detail-heading { align-items:end; display:flex; gap:24px; justify-content:space-between; margin-bottom:30px; } .detail-heading__actions { align-items:center; display:flex; gap:10px; } .page-heading h1,.detail-heading h1,.login-card h1 { font-family:Georgia,serif; font-size:clamp(2rem,5vw,3.25rem); font-weight:500; letter-spacing:-.03em; line-height:1; margin:5px 0 10px; } .eyebrow { color:var(--accent); margin:0; } .page-heading__description { color:var(--muted); margin:0; }
.button { align-items:center; border:1px solid transparent; border-radius:4px; cursor:pointer; display:inline-flex; justify-content:center; min-height:42px; padding:9px 16px; text-decoration:none; transition:background .15s,border-color .15s,color .15s; } .button--primary { background:var(--accent); color:#fff; font-weight:700; } .button--primary:hover { background:var(--accent-dark); } .button--quiet { background:transparent; border-color:currentColor; color:inherit; } .site-header .button--quiet { color:#fff; } .button.is-disabled { cursor:default; opacity:.42; }
.filters { align-items:end; background:var(--paper); border:1px solid var(--line); display:grid; gap:18px; grid-template-columns:repeat(4,minmax(0,1fr)) auto; margin-bottom:30px; padding:20px; } .filters__actions { display:flex; gap:8px; } .field-group { display:grid; gap:6px; } label { font-size:.82rem; font-weight:700; } input,select { background:#fff; border:1px solid #bbb5ba; border-radius:4px; color:var(--ink); min-height:42px; padding:8px 10px; width:100%; } input:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgb(165 12 63 / 15%); outline:0; }
.schede-grid { display:grid; gap:22px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); } .scheda-card { background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow); display:flex; flex-direction:column; min-width:0; } .scheda-card__image { align-items:center; aspect-ratio:3 / 4; background:#eee9eb; display:flex; justify-content:center; overflow:hidden; } .scheda-card__image img { height:100%; object-fit:cover; width:100%; } .image-placeholder { color:var(--muted); font-size:.87rem; padding:20px; text-align:center; } .scheda-card__body { display:flex; flex:1; flex-direction:column; padding:17px; } .scheda-card__meta { color:var(--muted); display:flex; font-size:.77rem; font-weight:700; gap:10px; letter-spacing:.03em; text-transform:uppercase; } .scheda-card h2 { font-family:Georgia,serif; font-size:1.35rem; font-weight:500; line-height:1.1; margin:12px 0 5px; } .scheda-card h2 a { text-decoration:none; } .scheda-card__code { color:var(--accent); font-size:.88rem; font-weight:700; margin:0 0 18px; }
.scheda-card__details,.product-section dl { display:grid; gap:8px; margin:0; } .scheda-card__details div,.product-section dl > div { display:grid; gap:3px; } dt { color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; } dd { margin:0; } .scheda-card__details dd { font-size:.9rem; } .text-link { color:var(--accent); font-size:.9rem; font-weight:700; margin-top:auto; padding-top:22px; text-decoration:none; } .text-link:hover,.back-link:hover { text-decoration:underline; }
.empty-state { background:var(--paper); border:1px dashed #bdb5ba; margin:0; padding:42px 25px; text-align:center; } .empty-state h2 { font-family:Georgia,serif; font-size:1.5rem; font-weight:500; margin:0 0 8px; } .empty-state p { color:var(--muted); margin:0; } .pagination { align-items:center; display:flex; gap:14px; justify-content:center; margin:32px 0 0; } .pagination > span:not(.button) { color:var(--muted); font-size:.9rem; }
.back-link { color:var(--accent); display:inline-block; font-size:.9rem; font-weight:700; margin-bottom:20px; text-decoration:none; } .detail-summary { background:var(--paper); border:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:26px; } .detail-summary div { border-right:1px solid var(--line); display:grid; gap:5px; min-width:0; padding:18px; } .detail-summary div:last-child { border-right:0; } .detail-summary span { color:var(--muted); font-size:.75rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; } .detail-summary strong { font-size:.98rem; overflow-wrap:anywhere; }
.detail-layout { align-items:start; display:grid; gap:26px; grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr); } .detail-images { display:grid; gap:16px; } .detail-images a,.detail-images img { display:block; width:100%; } .detail-images img { background:#eee9eb; max-height:900px; object-fit:contain; } .image-placeholder--large { align-items:center; aspect-ratio:3 / 4; background:#eee9eb; display:flex; justify-content:center; } .product-sections { display:grid; gap:16px; } .product-section { background:var(--paper); border:1px solid var(--line); padding:22px; } .product-section h2 { color:var(--accent); font-family:Georgia,serif; font-size:1.5rem; font-weight:500; margin:0 0 18px; } .product-section dd { font-size:1rem; line-height:1.45; white-space:pre-line; }
.media-icon { align-items:center; background:var(--paper); border:1px solid var(--line); color:var(--accent); display:inline-flex; flex-direction:column; font-size:.68rem; font-weight:700; gap:3px; min-width:54px; padding:5px 7px; text-decoration:none; text-transform:uppercase; } .media-icon:hover { border-color:var(--accent); box-shadow:0 3px 10px rgb(51 20 32 / 12%); } .media-icon img { height:28px; object-fit:contain; width:38px; } .media-icon__glyph { align-items:center; background:var(--accent); color:#fff; display:flex; font-size:21px; height:28px; justify-content:center; line-height:1; width:38px; }
.related-section { background:#f1f1f1; border:1px solid var(--line); padding:16px; } .related-section h2 { color:var(--accent); font-family:Georgia,serif; font-size:1.3rem; font-weight:500; margin:0 0 12px; text-transform:uppercase; } .related-thumbnails { display:flex; flex-wrap:wrap; gap:10px; } .related-thumbnails a { background:#fff; border:1px solid #d4cdd1; display:flex; flex-direction:column; gap:4px; padding:4px; text-align:center; text-decoration:none; width:86px; } .related-thumbnails a:hover { border-color:var(--accent); } .related-thumbnails img { aspect-ratio:1 / 1.25; display:block; object-fit:cover; width:100%; } .related-thumbnails span { color:var(--accent); font-size:.72rem; font-weight:700; }
.legacy-sheet { background:#fff; color:#000; font-family:'Bahnschrift','Microsoft PhagsPa',Arial,sans-serif; margin:0 auto; max-width:1012px; padding:18px 24px 32px; } .legacy-sheet .detail-heading { align-items:center; border-bottom:2px solid #f00; margin-bottom:12px; padding-bottom:10px; } .legacy-sheet .detail-heading h1 { color:#f00; font-family:'Bahnschrift SemiBold','Bahnschrift',Arial,sans-serif; font-size:2rem; font-weight:600; letter-spacing:0; margin:3px 0; } .legacy-sheet .eyebrow { color:#f00; font-size:.85rem; } .legacy-sheet .back-link { color:#000; font-size:.8rem; margin-bottom:5px; } .legacy-sheet .detail-summary { border:0; grid-template-columns:repeat(4,1fr); margin-bottom:12px; } .legacy-sheet .detail-summary div { border:0; padding:7px 10px; } .legacy-sheet .detail-summary span { color:#000; font-size:.75rem; } .legacy-sheet .detail-summary strong { color:#f00; font-size:1rem; font-weight:600; } .legacy-sheet .detail-layout { gap:16px; grid-template-columns:minmax(320px,1fr) minmax(320px,1fr); } .legacy-sheet .detail-images { border:1px solid #ddd; gap:8px; padding:8px; } .legacy-sheet .detail-images img { max-height:620px; } .legacy-sheet .product-sections { gap:8px; } .legacy-sheet .product-section { border:0; border-top:1px solid #f00; padding:9px 4px; } .legacy-sheet .product-section h2 { color:#f00; font-family:'Bahnschrift SemiBold','Bahnschrift',Arial,sans-serif; font-size:1.22rem; font-weight:600; margin:0 0 7px; text-transform:none; } .legacy-sheet .product-section dl { gap:3px; } .legacy-sheet .product-section dl > div { display:block; } .legacy-sheet .product-section dt { color:#f00; display:inline; font-size:1rem; letter-spacing:0; text-transform:none; } .legacy-sheet .product-section dd { display:inline; font-size:1rem; line-height:1.25; } .legacy-sheet .related-section { border:0; border-top:1px solid #f00; padding:10px 4px; } .legacy-sheet .related-section h2 { color:#f00; font-family:'Bahnschrift SemiBold','Bahnschrift',Arial,sans-serif; font-size:1rem; margin:0 0 8px; } .legacy-sheet .related-thumbnails a { border:0; padding:2px; width:78px; } .legacy-sheet .related-thumbnails img { aspect-ratio:1 / 1.1; }
.notice { background:#e7f5eb; border:1px solid #a9d9b5; color:#175c2b; margin-bottom:20px; padding:12px 16px; } .login-page { align-items:center; background:linear-gradient(135deg,#f7eff2,#e8dde2); display:flex; justify-content:center; min-height:100vh; padding:24px; } .login-card { background:var(--paper); box-shadow:0 20px 60px rgb(51 20 32 / 16%); max-width:440px; padding:42px; width:100%; } .login-card__heading { border-bottom:1px solid var(--line); margin-bottom:28px; padding-bottom:22px; } .login-card__heading > p:last-child { color:var(--muted); margin:0; } .stack { display:grid; gap:20px; } .field-error { color:#a40032; font-size:.84rem; margin:0; } .login-card .button { width:100%; }
.editor-form { background:var(--paper); border:1px solid var(--line); padding:24px; } .editor-form__grid { display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); } .editor-form textarea { background:#fff; border:1px solid #bbb5ba; border-radius:4px; color:var(--ink); padding:8px 10px; resize:vertical; width:100%; } .editor-form textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgb(165 12 63 / 15%); outline:0; } .field-group--wide { grid-column:span 2; } .form-actions { border-top:1px solid var(--line); display:flex; gap:10px; margin-top:24px; padding-top:20px; }
@media (max-width:900px) { .filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .filters__actions { grid-column:1 / -1; } .detail-layout { grid-template-columns:1fr; } } @media (max-width:620px) { .site-header { align-items:flex-start; gap:15px; } .site-header__actions { align-items:flex-end; flex-direction:column; gap:7px; } .current-user { font-size:.78rem; } .page-shell { padding:30px 16px 42px; } .page-heading,.detail-heading { align-items:flex-start; flex-direction:column; } .detail-heading__actions { align-self:flex-start; } .filters { grid-template-columns:1fr; padding:16px; } .filters__actions { grid-column:auto; } .detail-summary { grid-template-columns:repeat(2,1fr); } .detail-summary div:nth-child(2) { border-right:0; } .detail-summary div:nth-child(-n + 2) { border-bottom:1px solid var(--line); } .pagination { flex-wrap:wrap; } .login-card { padding:30px 24px; } }