/* moved out of the index.html so the page ships no embedded styles */
:root {
--crimson: #df2229;
--pink-light: #fdf2f1;
--dark-main: #2e2d2c;
--dark-soft: #4a4a4a;
--orchid: #e18c94
}
.view-all-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--crimson);
color: white;
font-size: 1rem;
font-weight: 600;
padding: 14px 32px;
border-radius: 50px;
text-decoration: none;
border: 2px solid var(--crimson);
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(223, 34, 41, 0.2);
cursor: pointer;
}
.view-all-btn i {
font-size: 0.9rem;
transition: transform 0.3s ease;
}
.view-all-btn:hover {
background: white;
color: var(--crimson);
border: 2px solid var(--crimson);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(223, 34, 41, 0.3);
}
.view-all-btn:hover i {
transform: translateX(5px);
color: var(--crimson);
}
.view-all-btn:active {
transform: translateY(-1px);
box-shadow: 0 5px 15px rgba(223, 34, 41, 0.2);
}
@media (max-width: 576px) {
.view-all-btn {
width: 100%;
max-width: 280px;
padding: 12px 24px;
font-size: 0.95rem;
margin: 0 auto;
}
}
.process-icon {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
/* important for circle crop */
display: flex;
align-items: center;
justify-content: center;
background: #fef1f2;
}
.process-icon img {
width: 100%;
height: 100%;
object-fit: cover;
/* makes image fill circle */
}
/* ============================================================
DG KNITTING — HOMEPAGE
Classes that used to live in style="" attributes on index.html,
plus the specification and FAQ blocks added for depth of content.
============================================================ */
/* ---------- utilities that replace inline style attributes ---------- */
.u-mt-25 { margin-top: 25px; }
.u-pink-bg { background: var(--pink-light); }
.u-quote-icon { margin: 2rem 0 1rem; font-size: 1.3rem; color: var(--crimson); }
.u-lead-lg { font-size: 1.2rem; }
.u-title-sm { font-size: 2.2rem; }
.u-crimson { color: var(--crimson); }
.u-stat-icon { color: var(--crimson); margin-right: 6px; }
.value-pill {
background: #fff;
padding: 0.5rem 1.8rem;
border-radius: 50px;
font-weight: 600;
color: var(--crimson);
border: 1px solid var(--crimson);
}
/* ---------- what we knit: prose block ---------- */
.knit-prose {
max-width: 68ch;
margin: 0 auto;
}
.knit-prose p {
color: var(--dark-soft);
line-height: 1.85;
margin-bottom: 1.15rem;
}
.knit-prose h3 {
font-size: 1.25rem;
margin: 2rem 0 0.75rem;
color: var(--dark-main);
}
/* ---------- specification table ---------- */
.spec-table-wrap {
overflow-x: auto;
margin-top: 2.5rem;
border: 1px solid #eee;
border-radius: 14px;
}
.spec-table {
width: 100%;
border-collapse: collapse;
min-width: 620px;
font-size: 0.95rem;
}
.spec-table caption {
caption-side: top;
text-align: left;
padding: 1rem 1.25rem 0.5rem;
font-weight: 600;
color: var(--dark-main);
}
.spec-table th,
.spec-table td {
padding: 0.85rem 1.25rem;
text-align: left;
border-bottom: 1px solid #f0f0f0;
}
.spec-table thead th {
background: var(--pink-light);
color: var(--dark-main);
font-weight: 600;
white-space: nowrap;
}
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
border-bottom: 0;
}
.spec-table tbody th {
font-weight: 600;
color: var(--dark-main);
}
/* ---------- FAQ ---------- */
.faq-list {
max-width: 820px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid #ececec;
padding: 1.35rem 0;
}
.faq-item:first-child { border-top: 1px solid #ececec; }
.faq-item h3 {
font-size: 1.1rem;
color: var(--dark-main);
margin: 0 0 0.6rem;
display: flex;
gap: 0.65rem;
align-items: flex-start;
}
.faq-item h3::before {
content: "—";
color: var(--crimson);
flex: none;
}
.faq-item p {
margin: 0;
color: var(--dark-soft);
line-height: 1.8;
}
/* ---------- visible NAP block ---------- */
.nap-block {
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.18);
font-size: 0.95rem;
line-height: 1.75;
}
.nap-block .nap-label {
display: block;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 0.75rem;
opacity: 0.7;
margin-bottom: 0.4rem;
}
.nap-block a { color: inherit; }
@media (max-width: 576px) {
.u-title-sm { font-size: 1.7rem; }
.faq-item h3 { font-size: 1.02rem; }
}