/* ============================================================ Homepage Discovery-first — workshop/industrial skin All selectors scoped under .hd-* to avoid theme bleed. Theme tokens defined at .light-theme / .dark-theme on . ============================================================ */ .light-theme { --hd-bg: #F7F5F1; --hd-surface: #FFFFFF; --hd-surface-2: #EFEBE3; --hd-border: #E0DBD0; --hd-border-strong: #C9C3B6; --hd-text: #1B2430; --hd-text-muted: #5C6672; --hd-accent: #B87333; --hd-accent-hover: #9E5E28; --hd-accent-fg: #FFFFFF; --hd-grid-line: rgba(0,0,0,0.05); --hd-shadow-sm: 0 1px 2px rgba(20,22,30,.04), 0 4px 10px rgba(20,22,30,.05); --hd-shadow-md: 0 6px 22px rgba(20,22,30,.10); --hd-badge-sale-bg: #0F2A1B; --hd-badge-sale-fg: #CEE5BF; --hd-badge-new-bg: #B87333; --hd-badge-new-fg: #FFFFFF; } .dark-theme { --hd-bg: #0F1115; --hd-surface: #181B22; --hd-surface-2: #1F232B; --hd-border: #2A2F38; --hd-border-strong: #3B414D; --hd-text: #E8E6E1; --hd-text-muted: #9AA0A8; --hd-accent: #C98A4B; --hd-accent-hover: #DDA465; --hd-accent-fg: #0F1115; --hd-grid-line: rgba(255,255,255,0.05); --hd-shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.35); --hd-shadow-md: 0 6px 22px rgba(0,0,0,.55); --hd-badge-sale-bg: #CEE5BF; --hd-badge-sale-fg: #0F2A1B; --hd-badge-new-bg: #C98A4B; --hd-badge-new-fg: #0F1115; } /* ---------- shared primitives ---------- */ .hd-section { padding:36px 0; } .hd-section-title { display:flex; align-items:center; margin:0 0 20px; padding:0 0 10px; font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--hd-text); border-bottom:1px solid var(--hd-border); position:relative; } .hd-section-title::after { content:''; position:absolute; left:0; bottom:-1px; width:48px; height:2px; background:var(--hd-accent); } .hd-section-title .fa { color:var(--hd-accent); margin-right:10px; font-size:16px; } .hd-section-title .hd-link-all { margin-left:auto; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--hd-accent); text-decoration:none; border-bottom:1px dashed transparent; } .hd-section-title .hd-link-all:hover { color:var(--hd-accent-hover); border-bottom-color:var(--hd-accent-hover); } /* ---------- promo strip (top, tight line) ---------- */ .hd-promo { background:#141414; color:#E8E6E1; padding:9px 14px; font-size:12.5px; letter-spacing:.04em; border-bottom:1px solid #2A2F38; } .hd-promo-items { display:flex; flex-wrap:wrap; gap:26px; justify-content:center; align-items:center; } .hd-promo-items > span { display:inline-flex; align-items:center; gap:8px; } .hd-promo-items .fa { color:#C98A4B; font-size:13px; } /* ---------- hero (always dark workshop banner) ---------- */ .hd-hero { position:relative; background: radial-gradient(1200px 300px at 20% 0%, rgba(201,138,75,.10), transparent 60%), linear-gradient(180deg,#141414 0%,#0A0B0E 100%); color:#F3EFE6; padding:56px 16px 48px; overflow:hidden; } .hd-hero::before { /* CAD blueprint grid overlay */ content:''; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:32px 32px, 32px 32px; mask-image:linear-gradient(180deg, rgba(0,0,0,.6), transparent 75%); -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.6), transparent 75%); } .hd-hero::after { /* copper corner accent */ content:''; position:absolute; top:0; right:0; width:220px; height:2px; background:linear-gradient(90deg, transparent, #C98A4B); } .hd-hero > .container { position:relative; } .hd-hero h1 { color:#F3EFE6; margin:0 0 10px; font-size:34px; line-height:1.1; font-weight:800; letter-spacing:-.01em; } .hd-hero h1::before { content:'// '; color:#C98A4B; font-weight:600; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:.75em; letter-spacing:0; } .hd-hero .hd-sub { margin:0 0 24px; color:#B9B4A8; font-size:15px; max-width:640px; } .hd-search { position:relative; max-width:720px; margin:0; } .hd-search::before { content:'\f002'; /* fa-search */ font-family:'FontAwesome'; position:absolute; left:18px; top:50%; transform:translateY(-50%); color:#6E6A62; font-size:14px; pointer-events:none; } .hd-search input { width:100%; padding:14px 18px 14px 44px; border-radius:0; border:1px solid #2A2F38; background:#0A0B0E; color:#F3EFE6; font-size:15px; outline:none; transition:border-color .15s, box-shadow .15s; } .hd-search input::placeholder { color:#6E6A62; } .hd-search input:focus { border-color:#C98A4B; box-shadow:0 0 0 3px rgba(201,138,75,.18); } .hd-search-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .hd-search-tags a { padding:5px 12px; background:transparent; color:#B9B4A8; font-size:12px; border:1px solid #2A2F38; text-decoration:none; letter-spacing:.02em; transition:color .12s, border-color .12s, background .12s; } .hd-search-tags a:hover { color:#F3EFE6; border-color:#C98A4B; background:rgba(201,138,75,.08); } /* ---------- printer picker ---------- */ .hd-printers { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; } .hd-printer { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 10px; background:var(--hd-surface); color:var(--hd-text); border:1px solid var(--hd-border); text-decoration:none; font-weight:600; font-size:14px; letter-spacing:.02em; transition:border-color .15s, transform .15s, box-shadow .15s, color .15s; position:relative; } .hd-printer::before { content:'['; color:var(--hd-text-muted); font-weight:400; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .hd-printer::after { content:']'; color:var(--hd-text-muted); font-weight:400; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .hd-printer:hover { border-color:var(--hd-accent); color:var(--hd-accent); transform:translateY(-1px); box-shadow:var(--hd-shadow-sm); } .hd-printer:hover::before, .hd-printer:hover::after { color:var(--hd-accent); } /* ---------- category grid ---------- */ .hd-cats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .hd-cat { display:flex; flex-direction:column; align-items:center; padding:24px 12px 18px; background:var(--hd-surface); color:var(--hd-text); border:1px solid var(--hd-border); text-decoration:none; transition:border-color .15s, transform .15s, box-shadow .15s; position:relative; } .hd-cat:hover { border-color:var(--hd-accent); transform:translateY(-2px); box-shadow:var(--hd-shadow-md); } .hd-cat-icon { display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:var(--hd-surface-2); color:var(--hd-accent); font-size:22px; margin-bottom:12px; transition:background .15s; } .hd-cat:hover .hd-cat-icon { background:var(--hd-accent); color:var(--hd-accent-fg); } .hd-cat-name { margin:0 0 4px; font-weight:700; font-size:14px; text-align:center; line-height:1.25; color:var(--hd-text); } .hd-cat-count { font-size:11px; letter-spacing:.08em; color:var(--hd-text-muted); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* ---------- product rails ---------- */ .hd-prods { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; } .hd-prod { background:var(--hd-surface); border:1px solid var(--hd-border); overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s, transform .15s, box-shadow .15s; } .hd-prod:hover { border-color:var(--hd-border-strong); transform:translateY(-2px); box-shadow:var(--hd-shadow-md); } .hd-prod-wrap { position:relative; background:var(--hd-surface-2); } .hd-prod img { display:block; width:100%; height:auto; } .hd-prod-body { padding:12px 14px 14px; border-top:1px solid var(--hd-border); flex:1; display:flex; flex-direction:column; gap:8px; } .hd-prod-name { font-size:13px; font-weight:500; margin:0; min-height:36px; line-height:1.35; color:var(--hd-text); } .hd-prod-name a { color:inherit; text-decoration:none; } .hd-prod-name a:hover { color:var(--hd-accent); } .hd-prod-price { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:15px; font-weight:700; color:var(--hd-accent); margin-top:auto; display:flex; align-items:baseline; gap:8px; } .hd-prod-old { font-size:12px; font-weight:500; color:var(--hd-text-muted); text-decoration:line-through; } .hd-prod-badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; padding:3px 8px; letter-spacing:.08em; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; background:var(--hd-badge-sale-bg); color:var(--hd-badge-sale-fg); } .hd-prod-badge.new { background:var(--hd-badge-new-bg); color:var(--hd-badge-new-fg); } /* ---------- trust strip ---------- */ .hd-trust { background:var(--hd-surface); border:1px solid var(--hd-border); padding:26px 18px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; } .hd-trust::before { /* measurement-tick top rule */ content:''; position:absolute; top:-1px; left:0; right:0; height:2px; background: repeating-linear-gradient(90deg, var(--hd-accent) 0, var(--hd-accent) 8px, transparent 8px, transparent 16px); opacity:.6; } .hd-trust-item { display:flex; flex-direction:column; align-items:center; text-align:center; font-size:13px; color:var(--hd-text); } .hd-trust-icon { display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-bottom:10px; background:var(--hd-surface-2); border:1px solid var(--hd-border); color:var(--hd-accent); font-size:18px; } .hd-trust-label { font-weight:700; font-size:13px; letter-spacing:.04em; color:var(--hd-text); } .hd-trust-sub { font-size:11px; margin-top:4px; color:var(--hd-text-muted); line-height:1.4; } /* ---------- guides teaser ---------- */ .hd-guides { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .hd-guide { background:var(--hd-surface); border:1px solid var(--hd-border); overflow:hidden; text-decoration:none; color:var(--hd-text); display:block; transition:border-color .15s, transform .15s, box-shadow .15s; } .hd-guide:hover { border-color:var(--hd-accent); transform:translateY(-2px); box-shadow:var(--hd-shadow-md); } .hd-guide img { display:block; width:100%; height:auto; background:var(--hd-surface-2); } .hd-guide-body { padding:14px 16px 16px; } .hd-guide-title { font-weight:700; font-size:14px; line-height:1.35; margin:0 0 8px; color:var(--hd-text); } .hd-guide-meta { font-size:11px; color:var(--hd-text-muted); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing:.04em; } .hd-guide-meta .fa { color:var(--hd-accent); margin-right:4px; } /* ---------- mobile ---------- */ @media (max-width:768px) { .hd-section { padding:24px 0; } .hd-hero { padding:32px 14px 28px; } .hd-hero h1 { font-size:22px; } .hd-hero .hd-sub { display:none; } .hd-promo-items { gap:16px; font-size:11.5px; } .hd-printers { grid-template-columns:repeat(3,1fr); } .hd-cats { grid-template-columns:repeat(2,1fr); } .hd-prods { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:8px; scrollbar-width:thin; } .hd-prods > * { flex:0 0 45%; scroll-snap-align:start; } .hd-trust { grid-template-columns:repeat(2,1fr); padding:18px 12px; gap:16px; } .hd-trust-sub { display:none; } .hd-guides { grid-template-columns:1fr; } .hd-section-title { font-size:12px; } }