.fp26-home .fp26-panel,
.fp26-home .fp26-tab { --tone: #2148b0; --tone-soft: #e8ebf6; --tone-deep: #18378a; }
.fp26-home :is(.fp26-panel--sticker, .fp26-tab--sticker) { --tone: #2490c0; --tone-soft: #e6f3fa; --tone-deep: #1a6d93; }
.fp26-home :is(.fp26-panel--card, .fp26-tab--card) { --tone: #2148b0; --tone-soft: #e8ebf6; --tone-deep: #18378a; }
.fp26-home :is(.fp26-panel--wedding, .fp26-tab--wedding) { --tone: #4a3fa0; --tone-soft: #eeecf8; --tone-deep: #352c7a; }
.fp26-home :is(.fp26-panel--flyer, .fp26-tab--flyer) { --tone: #1b2a6b; --tone-soft: #e9ebf3; --tone-deep: #121d4f; } .fp26-home .fp26-tabs { gap: 10px; margin-bottom: 20px; }
.fp26-home .fp26-tabs .fp26-tab {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 46px;
padding: 8px 18px 8px 10px;
border: 1px solid var(--h-line);
border-radius: 999px;
color: var(--h-ink);
background: #fff;
transition: transform .2s, box-shadow .2s, background-color .2s;
}
.fp26-home .fp26-tabs .fp26-tab:hover { transform: translateY(-2px); border-color: var(--tone); color: var(--tone-deep); box-shadow: 0 8px 18px -10px var(--tone); }
.fp26-home .fp26-tabs .fp26-tab[aria-selected="true"] { border-color: var(--tone); color: #fff; background: var(--tone); box-shadow: 0 10px 22px -12px var(--tone); }
.fp26-tab__icon {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 999px;
background: var(--tone-soft);
color: var(--tone-deep);
line-height: 1;
}
.fp26-home .fp26-tab__icon svg { width: 17px; height: 17px; }
.fp26-tab[aria-selected="true"] .fp26-tab__icon { color: #fff; }
.fp26-tab[aria-selected="true"] .fp26-tab__icon { background: rgba(255, 255, 255, .22); } .fp26-home .fp26-panel {
position: relative;
overflow: hidden;
isolation: isolate;
border-color: color-mix(in srgb, var(--tone) 22%, #fff);
border-radius: 22px;
background: #fff;
}
.fp26-home .fp26-panel::before {
content: "";
position: absolute;
top: -120px;
right: -120px;
z-index: -1;
width: 320px;
height: 320px;
border-radius: 999px;
background: radial-gradient(circle, var(--tone-soft) 0, rgba(255, 255, 255, 0) 70%);
} .fp26-home .fp26-table-wrap { border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 18%, #fff); }
.fp26-home .fp26-table { border-collapse: separate; border-spacing: 0; }
.fp26-home .fp26-table caption {
padding: 12px 18px;
border-radius: 16px 16px 0 0;
color: #fff;
background: linear-gradient(100deg, var(--tone) 0%, var(--tone-deep) 100%);
font-size: 15px;
font-weight: 700;
}
.fp26-home .fp26-table thead th { padding-top: 12px; padding-bottom: 12px; border-top: 0; color: var(--tone-deep); background: var(--tone-soft); font-size: 14px; font-weight: 700; }
.fp26-home .fp26-table thead .fp26-table__lead { background: var(--tone-soft); }
.fp26-home .fp26-table :is(th, td) { padding: 10px 12px; border-top: 1px dashed color-mix(in srgb, var(--tone) 18%, #fff); }
.fp26-home .fp26-table tbody tr { transition: background-color .15s; }
.fp26-home .fp26-table tbody tr:hover > * { background: color-mix(in srgb, var(--tone-soft) 55%, #fff); } .fp26-home .fp26-table .fp26-table__lead { display: table-cell; }
.fp26-home .fp26-table tbody .fp26-table__lead > * { vertical-align: middle; }
.fp26-lead { display: flex; align-items: center; gap: 10px; }
.fp26-lead-text { min-width: 0; }
.fp26-swatch {
display: inline-block;
width: 26px;
height: 26px;
flex: 0 0 auto;
border-radius: 8px;
background: var(--tone);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .06);
vertical-align: middle;
}
.fp26-swatch--stkpa { background: linear-gradient(135deg, #fff 0%, #eef1f5 100%); }
.fp26-swatch--stkcf { background: radial-gradient(circle at 30% 30%, #c79a64 0, #9b6b3d 100%); }
.fp26-swatch--stkpp { background: linear-gradient(135deg, #ffffff 0%, #dbe7f3 45%, #ffffff 55%, #cfdceb 100%); }
.fp26-swatch--stkcl { background: repeating-conic-gradient(#e5e9ef 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
.fp26-swatch--stkpv { background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%); }
.fp26-swatch--stkpegm { background: linear-gradient(135deg, #fde68a 0%, #d4a017 50%, #fff3b0 70%, #b8860b 100%); }
.fp26-swatch--stkpepm { background: linear-gradient(135deg, #ffffff 0%, #d9dee7 40%, #f5f0ff 60%, #b9c0cc 100%); }
.fp26-table tbody tr:nth-child(6) .fp26-swatch--stkpv { background: repeating-conic-gradient(#e5e9ef 0 25%, #fff 0 50%) 0 0 / 10px 10px; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px #cbd5e1; } .fp26-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
line-height: 1.6;
letter-spacing: .02em;
vertical-align: 2px;
white-space: nowrap;
}
.fp26-badge--hot { color: #fff; background: linear-gradient(90deg, #f97316, #ef4444); }
.fp26-badge--hot { display: inline-flex; align-items: center; gap: 3px; }
.fp26-home .fp26-badge--hot svg { width: 11px; height: 11px; }
.fp26-badge--value { display: block; width: fit-content; margin: 0 auto 4px; color: #fff; background: #16a34a; }
.fp26-row--hot .fp26-table__lead { box-shadow: inset 4px 0 0 #f97316; } .fp26-home .fp26-table td > span {
display: inline-block;
min-width: 52px;
padding: 4px 10px;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
transition: transform .15s;
}
.fp26-home .fp26-table tr:hover td > span { transform: scale(1.06); }
.fp26-heat-0 > span { color: #15803d; background: #dcfce7; }
.fp26-heat-1 > span { color: #3f6212; background: #ecfccb; }
.fp26-heat-2 > span { color: #854d0e; background: #fef9c3; }
.fp26-heat-3 > span { color: #9a3412; background: #ffedd5; }
.fp26-heat-4 > span { color: #b91c1c; background: #fee2e2; }
.fp26-home .fp26-table .fp26-table__best { background: color-mix(in srgb, #dcfce7 45%, #fff); }
.fp26-home .fp26-table thead .fp26-table__best { background: color-mix(in srgb, #bbf7d0 55%, var(--tone-soft)); } .fp26-home .fp26-notes { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.fp26-home .fp26-notes li {
display: inline-flex;
align-items: flex-start;
gap: 6px;
padding: 6px 12px;
border-radius: 12px;
color: var(--h-ink);
background: var(--tone-soft);
font-size: 14px;
line-height: 1.55;
}
.fp26-home .fp26-notes li svg { width: 14px; height: 14px; margin-top: 4px; color: var(--tone-deep); } .fp26-home .fp26-panel .fp26-panel__actions .fp26-btn--dark { background: var(--tone); }
.fp26-home .fp26-panel .fp26-panel__actions .fp26-btn--dark:hover { background: var(--tone-deep); }
.fp26-home .fp26-panel .fp26-link { color: var(--tone-deep); }
@media (max-width: 640px) {
.fp26-home .fp26-tabs .fp26-tab { min-height: 42px; padding: 6px 14px 6px 8px; }
.fp26-tab__icon { width: 26px; height: 26px; font-size: 14px; }
.fp26-swatch { width: 18px; height: 18px; border-radius: 6px; }
.fp26-lead { gap: 8px; }
.fp26-home .fp26-table .fp26-table__lead { min-width: 150px; }
.fp26-home .fp26-table .fp26-table__lead small { font-size: 12px; }
.fp26-home .fp26-table td > span { min-width: 40px; padding: 3px 8px; font-size: 14px; }
.fp26-home .fp26-notes li { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
.fp26-home .fp26-table tr:hover td > span,
.fp26-home .fp26-tabs .fp26-tab:hover { transform: none; }
}
.fp26-tone > span { color: var(--tone-deep); background: var(--tone-soft); } .fp26-home .fp26-tabs .fp26-tab[aria-selected="true"] { border-color: var(--h-ink); background: var(--h-ink); box-shadow: none; }
.fp26-home .fp26-tabs .fp26-tab:hover { color: var(--h-ink); border-color: #c9ced8; box-shadow: none; }
.fp26-home .fp26-panel { border-color: var(--h-line); }
.fp26-home .fp26-panel::before { display: none; }
.fp26-home .fp26-table-wrap { box-shadow: 0 0 0 1px var(--h-line); }
.fp26-home .fp26-table caption {
position: relative;
padding: 12px 18px 12px 30px;
border-bottom: 1px solid var(--h-line);
color: var(--h-ink);
background: #fff;
}
.fp26-home .fp26-table caption::before {
content: "";
position: absolute;
top: 50%;
left: 16px;
width: 6px;
height: 18px;
border-radius: 3px;
background: var(--tone);
transform: translateY(-50%);
}
.fp26-home .fp26-table thead th,
.fp26-home .fp26-table thead .fp26-table__lead { color: var(--h-muted); background: #f8f9fb; }
.fp26-home .fp26-table :is(th, td) { border-top: 1px solid #f0f1f4; }
.fp26-home .fp26-table tbody tr:hover > * { background: #fafbfc; }
.fp26-home .fp26-table td > span,
.fp26-home .fp26-table :is(.fp26-heat-0, .fp26-heat-1, .fp26-heat-2, .fp26-heat-3, .fp26-heat-4, .fp26-tone) > span {
min-width: 0;
padding: 0;
color: var(--h-ink);
background: none;
}
.fp26-home .fp26-table tr:hover td > span { transform: none; }
.fp26-home .fp26-table .fp26-table__best { background: #f4fbf7; }
.fp26-home .fp26-table thead .fp26-table__best { color: #15803d; background: #eaf7ef; }
.fp26-home .fp26-table td.fp26-table__best > span { color: #15803d; }
.fp26-badge--value { background: #15803d; }
.fp26-badge--hot { color: #c2410c; background: #fff1ea; }
.fp26-row--hot .fp26-table__lead { box-shadow: inset 3px 0 0 #fdba74; }
.fp26-home .fp26-notes li { color: var(--h-text); background: #f6f7f9; }
.fp26-home .fp26-notes li svg { color: var(--tone); }
.fp26-home .fp26-panel .fp26-panel__actions .fp26-btn--dark { background: var(--h-dark); }
.fp26-home .fp26-panel .fp26-panel__actions .fp26-btn--dark:hover { background: #000; }
.fp26-home .fp26-panel .fp26-link { color: var(--h-blue); }
.fp26-home .fp26-tabs .fp26-tab[aria-selected="true"],
.fp26-home .fp26-tabs .fp26-tab[aria-selected="true"]:hover { border-color: var(--h-ink); color: #fff; background: var(--h-ink); transform: none; }
.fp26-home .fp26-tabs .fp26-tab:hover { transform: none; } .fp26-swatch {
width: 40px;
height: 40px;
border-radius: 10px;
background-color: #eef2f7;
background-position: center;
background-size: cover;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 2px 6px -2px rgba(27, 42, 107, .25);
}
.fp26-swatch--stkpa { background-image: url(/wp-content/themes/fastprint-modern/assets/materials/stkpa.webp); }
.fp26-swatch--stkcf { background-image: url(/wp-content/themes/fastprint-modern/assets/materials/stkcf.webp); }
.fp26-swatch--stkpp { background-image: url(/wp-content/themes/fastprint-modern/assets/materials/stkpp.webp); }
.fp26-swatch--stkcl { background-image: url(/wp-content/themes/fastprint-modern/assets/materials/stkcl.webp); }
.fp26-swatch--stkpv { background-image: url(/wp-content/themes/fastprint-modern/assets/materials/stkpv.webp); }
.fp26-swatch--stkpegm { background-image: url(/wp-content/themes/fastprint-modern/assets/materials/stkpegm.webp); }
.fp26-swatch--stkpepm { background-image: url(/wp-content/themes/fastprint-modern/assets/materials/stkpepm.webp); }
.fp26-table tbody tr:nth-child(6) .fp26-swatch--stkpv { background-image: url(/wp-content/themes/fastprint-modern/assets/materials/stkpvcl.webp); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 2px 6px -2px rgba(27, 42, 107, .25); }
@media (max-width: 640px) { .fp26-swatch { width: 32px; height: 32px; border-radius: 8px; } } .fp26-swatch { position: relative; }
.fp26-swatch--bc260 { background-image: url(/wp-content/themes/fastprint-modern/assets/materials/bc260.webp); }
.fp26-swatch--bc300 { background-image: url(/wp-content/themes/fastprint-modern/assets/materials/bc300.webp); }
.fp26-swatch--bc240 { background-image: url(/wp-content/themes/fastprint-modern/assets/materials/bc240.webp); }
.fp26-swatch--wed { background-image: url(/wp-content/themes/fastprint-modern/assets/materials/wedcard.webp); }
.fp26-swatch--wedenv { background-image: url(/wp-content/themes/fastprint-modern/assets/materials/wedenv.webp); }
.fp26-swatch--fly { background-image: url(/wp-content/themes/fastprint-modern/assets/materials/flyer.webp); } .fp26-swatch:is(.fp26-swatch--s1, .fp26-swatch--s2)::after {
position: absolute;
right: -5px;
bottom: -5px;
display: grid;
place-items: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
border: 2px solid #fff;
border-radius: 999px;
color: #fff;
background: #1b2a6b;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
.fp26-swatch--s1::after { content: "1"; }
.fp26-swatch--s2::after { content: "2"; } .fp26-swatch--sp::before {
content: "";
position: absolute;
top: -5px;
right: -5px;
width: 14px;
height: 14px;
border: 2px solid #fff;
border-radius: 999px;
background: conic-gradient(#00a3e0 0 25%, #e6007e 0 50%, #ffd400 0 75%, #f15a29 0);
} @media (max-width: 640px) {
.fp26-home .fp26-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; }
.fp26-home .fp26-tabs .fp26-tab { width: 100%; min-width: 0; min-height: 44px; padding: 8px; justify-content: center; white-space: normal; }
}