diff --git a/Documents/Vibe Coding Projects/dedicatednodes-redesign/dedicatednodes-bare-metal/new-baremetal.html b/Documents/Vibe Coding Projects/dedicatednodes-redesign/dedicatednodes-bare-metal/new-baremetal.html index 18f2b05..146cbf6 100644 --- a/Documents/Vibe Coding Projects/dedicatednodes-redesign/dedicatednodes-bare-metal/new-baremetal.html +++ b/Documents/Vibe Coding Projects/dedicatednodes-redesign/dedicatednodes-bare-metal/new-baremetal.html @@ -1572,6 +1572,117 @@ img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px} to { transform: rotate(360deg); } } + /* Smart Specs Grid - Google Material Design Inspired */ + .smart-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 1.5rem; + } + + .smart-spec-card { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 16px; + padding: 1.5rem; + display: flex; + flex-direction: column; + transition: transform 0.2s, box-shadow 0.2s; + position: relative; + overflow: hidden; + } + + .smart-spec-card:hover { + transform: translateY(-2px); + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); + border-color: var(--brand-primary); + } + + .card-overline { + font-size: 0.7rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--text-secondary); + margin-bottom: 0.5rem; + display: flex; + align-items: center; + gap: 0.5rem; + } + + .card-overline svg { + opacity: 0.5; + } + + .card-hero { + display: flex; + align-items: baseline; + gap: 0.25rem; + margin-bottom: 0.25rem; + color: var(--brand-dark); + } + + .hero-val { + font-size: 2.5rem; + font-weight: 800; + line-height: 1; + letter-spacing: -0.02em; + background: linear-gradient(135deg, var(--brand-dark) 0%, #4b5563 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .hero-unit { + font-size: 1rem; + font-weight: 600; + color: var(--text-secondary); + } + + .card-subhero { + font-size: 0.9rem; + font-weight: 600; + color: var(--brand-primary); + margin-bottom: 1.25rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + background: #f0f9ff; + display: inline-block; + padding: 0.2rem 0.6rem; + border-radius: 6px; + align-self: flex-start; + } + + .spec-divider { + height: 1px; + background: #f1f5f9; + margin-bottom: 1rem; + width: 100%; + } + + .mini-specs-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.75rem 1rem; + } + + .mini-spec { + display: flex; + flex-direction: column; + } + + .mini-spec .label { + font-size: 0.7rem; + color: var(--text-secondary); + margin-bottom: 0.15rem; + font-weight: 500; + } + + .mini-spec .val { + font-size: 0.85rem; + font-weight: 600; + color: var(--brand-dark); + } + /* ============ RESPONSIVE STYLES ============ */ @media (max-width: 1024px) { .calculator-body { @@ -1895,133 +2006,139 @@ img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}