/* Inter is the Oscartek UI face; GeistMono comes from the ADAbe fonts sheet. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");
/* Oscartek palette + type, shared by the grid, the saved cards and the toast. */
body.configuratore-page {
--cfg-font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
--cfg-mono: "GeistMono", "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
--cfg-ink: #1a1a1a;
--cfg-muted: #b5b5b5;
--cfg-line: #e6e6e6;
--cfg-accent: #44cc00; /* Oscartek green */
}
.configuratore {
/* Near full-width with ~60px side gutters, like live (no narrow cap). */
padding: 96px 60px 80px;
max-width: 1680px;
margin: 0 auto;
font-family: var(--cfg-font);
color: var(--cfg-ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.configuratore__title {
font-family: var(--cfg-font);
font-weight: 300;
font-size: 2.625rem; /* 42px */
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--cfg-ink);
margin: 0 0 20px;
}
/* Vetrine Orizzontali / Verticali switch */
.configuratore__tabs {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 44px;
}
.configuratore__tab {
background: none;
border: 0;
padding: 0;
cursor: pointer;
font-family: var(--cfg-font);
font-weight: 300;
font-size: 1.5rem; /* 24px */
letter-spacing: 0;
color: var(--cfg-muted);
white-space: nowrap;
transition: color .15s;
}
.configuratore__tab:hover { color: #8c8c8c; }
.configuratore__tab.is-active { color: var(--cfg-accent); }
.configuratore__tab-sep {
font-family: var(--cfg-font);
font-weight: 300;
font-size: 1.5rem;
color: var(--cfg-muted);
user-select: none;
}
.configuratore__grid {
display: grid;
/* 4-up (w-1/4) with padding between; equal-height cards via the 4/3 box. */
grid-template-columns: repeat(4, 1fr);
gap: 40px 30px;
}
@media (max-width: 1100px) {
.configuratore__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
.configuratore__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
.configuratore { padding: 88px 24px 64px; }
}
@media (max-width: 460px) {
.configuratore__grid { grid-template-columns: 1fr; }
}
.ada-card { cursor: pointer; }
.ada-card[hidden] { display: none; }
/* Fixed ~4/3 render box (≈450x340 on a full card), like live. */
.ada-card__media {
overflow: hidden;
aspect-ratio: 4 / 3;
}
/* object-fit:fill stretches the render to fill the whole box — no letterbox,
matches live exactly. */
.ada-card__media img {
width: 100%;
height: 100%;
object-fit: fill;
display: block;
transition: transform .35s ease;
}
.ada-card:hover .ada-card__media img { transform: scale(1.03); }
.ada-card__name {
margin-top: 16px;
font-family: var(--cfg-font);
font-weight: 300;
font-size: 1.25rem; /* 20px */
color: var(--cfg-ink);
}
/* Saved configurations (authenticated users) */
.saved-configs { margin-top: 60px; }
.saved-configs__grid { margin-top: 20px; }
.saved-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--cfg-line);
border-radius: 6px;
overflow: hidden;
transition: box-shadow .2s;
}
.saved-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.saved-card__media {
overflow: hidden;
aspect-ratio: 4 / 3;
background: #fff;
padding: 16px;
}
.saved-card__media img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.saved-card__body {
padding: 14px 16px 8px;
flex: 1;
}
.saved-card__name {
font-family: var(--cfg-font);
font-weight: 400;
font-size: 1rem;
color: var(--cfg-ink);
margin-bottom: 4px;
}
.saved-card__product {
font-family: var(--cfg-mono);
font-weight: 600;
font-size: 0.75rem;
color: var(--cfg-accent);
margin-bottom: 8px;
}
.saved-card__ref {
font-size: 0.75rem;
color: #9a9a9a;
margin-bottom: 2px;
}
.saved-card__date {
font-size: 0.6875rem;
color: #b5b5b5;
margin-top: 6px;
}
.saved-card__actions {
display: flex;
gap: 8px;
padding: 8px 16px 14px;
}
.ada-card__actions { display: flex; gap: 10px; margin-top: 12px; }
.ada-card__btn {
border: 1px solid var(--cfg-ink); background: var(--cfg-ink); color: #fff;
padding: 8px 13px; cursor: pointer;
font-family: var(--cfg-font); font-weight: 400; font-size: 0.8125rem;
line-height: 1.3; border-radius: 3px;
transition: background .15s, border-color .15s, color .15s;
}
.ada-card__btn:hover { background: var(--cfg-accent); border-color: var(--cfg-accent); }
.ada-card__btn--ghost { background: transparent; color: var(--cfg-ink); }
.ada-card__btn--ghost:hover { background: var(--cfg-ink); border-color: var(--cfg-ink); color: #fff; }
/* In-page configurator host: swaps in place of the grid (no iframe). */
#adabe-stage {
display: none;
position: relative;
width: 100%;
height: calc(100vh - 80px);
min-height: 600px;
background: #f3f3f2;
}
#adabe-stage.is-active { display: block; }
/* While the engine runs: full viewport, no site chrome. */
body.adabe-running #adabe-stage { height: 100vh; min-height: 0; }
body.adabe-running .navbar,
body.adabe-running footer { display: none !important; }
/* Isola ADabe dall'ereditarietà CSS del sito — ADabe ha il suo themeing. */
#adabe-container {
all: initial;
position: relative;
width: 100%;
height: 100%;
}
/* Hide the engine's recap "Save configuration" button and "General Project
Data" (Reference/Notes) form. Neither has its own class: the button sits in a
MUI Typography , the project data in a
wrapping