/* Theme Name: MetalGC Theme URI: https://metalgc.bluecranelab.com Author: BlueCrane (SiteForge) Description: MetalGC — industrial-precision classic theme. Translated from the Lovable design-system export. Dark default, HSL tokens, blueprint grid, shear-cut CTAs. Version: 1.0.0 License: GPL-2.0-or-later Text Domain: metalgc */ /* ═══════════════════════════════════════════════════════════════ MetalGC Design System — Industrial Precision Aesthetic Ported from export design/globals.css. Fonts enqueued in functions.php. Color values are HSL triplets — use hsl(var(--token)) / hsl(var(--token)/alpha) ═══════════════════════════════════════════════════════════════ */ /* ── LIGHT MODE (fallback default) ─────────────────────────────── */ :root { --bg-primary: 40 8% 94%; /* #F2F0EC Mill White */ --bg-surface: 0 0% 100%; /* #FFFFFF */ --text-primary: 0 0% 6%; /* #0F0F0F Forge Black */ --text-secondary: 215 14% 34%; /* #4A5568 Dark Iron */ --accent-primary: 16 80% 54%; /* #E8612A Zinc Orange */ --accent-secondary: 212 53% 23%; /* #1B3A5C Steel Blue */ --border-color: rgba(15, 15, 15, 0.12); } /* ── DARK MODE (site default — .dark on ) ────────────────── */ html.dark { --bg-primary: 0 0% 6%; /* #0F0F0F */ --bg-surface: 0 0% 10%; /* #1A1A1A */ --text-primary: 37 14% 94%; /* #F2F0EC */ --text-secondary: 207 17% 71%; /* #A8B4C0 */ --accent-primary: 16 80% 54%; --accent-secondary: 212 53% 23%; --border-color: rgba(168, 180, 192, 0.20); } /* ── BASE ──────────────────────────────────────────────────────── */ * { box-sizing: border-box; border-color: hsl(var(--border-color)); } html { scroll-behavior: smooth; } body { margin: 0; background-color: hsl(var(--bg-primary)); color: hsl(var(--text-primary)); font-family: 'IBM Plex Sans', sans-serif; font-weight: 300; line-height: 1.6; background-image: linear-gradient(rgba(168, 180, 192, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 180, 192, 0.03) 1px, transparent 1px); background-size: 40px 40px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } :root:not(.dark) body, html.light body { background-image: linear-gradient(rgba(15, 15, 15, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 15, 15, 0.05) 1px, transparent 1px); } h1,h2,h3,h4,h5,h6 { font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.1; margin: 0 0 0.5rem; } p { margin: 0 0 1rem; } a { color: hsl(var(--accent-primary)); text-decoration: none; } img { max-width: 100%; height: auto; display: block; } /* ── FONT HELPERS ──────────────────────────────────────────────── */ .font-display { font-family: 'Barlow Condensed', sans-serif; } .font-body { font-family: 'IBM Plex Sans', sans-serif; } .font-mono { font-family: 'IBM Plex Mono', monospace; } /* ── LAYOUT ────────────────────────────────────────────────────── */ .mgc-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; } @media (min-width: 768px) { .mgc-container { padding: 0 32px; } } .mgc-section { padding: 56px 0; border-bottom: 1px solid hsl(var(--border-color)); } .mgc-section-hero { padding: 128px 0 96px; } .mgc-narrow { max-width: 760px; } main { padding-top: 61px; } /* clear fixed navbar */ /* ── SECTION LABEL + HEADLINE ─────────────────────────────────── */ .section-label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: hsl(var(--accent-primary) / 0.9); } .section-headline { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1; color: hsl(var(--text-primary)); margin: 0.5rem 0 1.5rem; } .eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: hsl(var(--accent-primary)); margin-bottom: 1rem; } .lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: hsl(var(--text-secondary)); line-height: 1.6; } /* ── BLUEPRINT GRID ────────────────────────────────────────────── */ .blueprint-grid { background-image: linear-gradient(rgba(168,180,192,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(168,180,192,0.03) 1px, transparent 1px); background-size: 40px 40px; } :root:not(.dark) .blueprint-grid, html.light .blueprint-grid { background-image: linear-gradient(rgba(15,15,15,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(15,15,15,0.05) 1px, transparent 1px); } /* ── BUTTONS — shear-cut CTA ───────────────────────────────────── */ .mgc-btn-primary, .mgc-btn-secondary, .mgc-btn-steel-blue, .mgc-btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: all 0.2s; } .mgc-btn-primary { background: hsl(var(--accent-primary)); color: #0F0F0F; clip-path: polygon(0 0,100% 0,96% 100%,4% 100%); } .mgc-btn-secondary { background: hsl(var(--accent-secondary)); color: #F2F0EC; clip-path: polygon(0 0,100% 0,96% 100%,4% 100%); } .mgc-btn-steel-blue { background: hsl(var(--accent-secondary)); color: #F2F0EC; } .mgc-btn-outline { background: transparent; color: hsl(var(--text-primary)); border: 1px solid hsl(var(--text-primary) / 0.4); } .mgc-btn-primary:hover, .mgc-btn-secondary:hover, .mgc-btn-steel-blue:hover { filter: brightness(1.1); } .mgc-btn-outline:hover { border-color: hsl(var(--accent-primary)); color: hsl(var(--accent-primary)); } .mgc-btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 1.5rem; } /* ── INPUTS ────────────────────────────────────────────────────── */ .mgc-input, .mgc-input textarea { padding: 0.65rem 0.85rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; background: transparent; border: 1px solid hsl(var(--border-color)); color: hsl(var(--text-primary)); border-radius: 0; transition: border-color 0.2s; width: 100%; } .mgc-input::placeholder { color: hsl(var(--text-secondary) / 0.6); } .mgc-input:focus { outline: none; border-color: hsl(var(--accent-primary)); } /* ── PROPOSITION BLOCK ─────────────────────────────────────────── */ .mgc-proposition-block { padding: 1.75rem 2rem; background: hsl(var(--accent-secondary)); border-left: 4px solid hsl(var(--accent-primary)); color: #F2F0EC; } .mgc-proposition-block h2, .mgc-proposition-block h3 { color: #F2F0EC; } .mgc-proposition-block p { color: rgba(242,240,236,0.88); font-size: 1.15rem; margin: 0; } /* ── DATA ROW (trait / stat) ───────────────────────────────────── */ .mgc-data-row { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: baseline; padding: 1.1rem 0; border-top: 1px solid hsl(var(--border-color)); } .mgc-data-row .label { font-family:'IBM Plex Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color: hsl(var(--accent-primary)); } .mgc-data-row .value { color: hsl(var(--text-primary)); font-size: 1.05rem; } /* ── ICON / FEATURE ROW ────────────────────────────────────────── */ .mgc-feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin-top: 2rem; } .mgc-feature h3 { font-size: 1.25rem; color: hsl(var(--text-primary)); margin-bottom: 0.5rem; } .mgc-feature p { color: hsl(var(--text-secondary)); font-size: 0.95rem; margin: 0; } .mgc-feature .num { font-family:'IBM Plex Mono',monospace; color: hsl(var(--accent-primary)); font-size: 0.85rem; } /* ── PRICING CARDS (stamped-badge) ─────────────────────────────── */ .mgc-pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 2rem; align-items: stretch; } .mgc-price-card { background: hsl(var(--bg-surface)); border: 1px solid hsl(var(--border-color)); padding: 2rem 1.75rem; display: flex; flex-direction: column; position: relative; } .mgc-price-card.featured { border: 2px solid hsl(var(--accent-primary)); } .mgc-price-card .ribbon { position: absolute; top: 0; right: 0; background: hsl(var(--accent-primary)); color:#0F0F0F; font-family:'IBM Plex Mono',monospace; font-size:0.65rem; font-weight:500; text-transform:uppercase; letter-spacing:0.1em; padding: 0.35rem 0.75rem; } .mgc-price-card .tier-name { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.5rem; text-transform:uppercase; color: hsl(var(--text-primary)); } .mgc-price-card .tier-blue { color: hsl(var(--accent-secondary)); font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; } .mgc-price-card .price { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:2.75rem; color: hsl(var(--accent-primary)); line-height:1; margin: 0.75rem 0 0.25rem; } .mgc-price-card .price .per { font-family:'IBM Plex Mono',monospace; font-size:0.9rem; color: hsl(var(--text-secondary)); font-weight:400; } .mgc-price-card .pitch { color: hsl(var(--text-secondary)); font-size:0.95rem; font-style: italic; margin: 0.5rem 0 1.25rem; min-height: 3em; } .mgc-price-card ul { list-style: none; padding: 0; margin: 0 0 1.5rem; flex-grow: 1; } .mgc-price-card li { position: relative; padding-left: 1.4rem; margin-bottom: 0.65rem; font-size:0.9rem; color: hsl(var(--text-primary)); line-height:1.45; } .mgc-price-card li::before { content:"—"; position:absolute; left:0; color: hsl(var(--accent-primary)); } .mgc-price-card .callout { font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color: hsl(var(--text-secondary)); border-top:1px solid hsl(var(--border-color)); padding-top:0.85rem; margin-bottom:1rem; line-height:1.5; } .mgc-price-card .card-cta { margin-top: auto; } .mgc-fineprint { font-family:'IBM Plex Mono',monospace; font-size:0.75rem; color: hsl(var(--text-secondary)); margin-top:1.5rem; line-height:1.6; } /* ── FAQ ───────────────────────────────────────────────────────── */ .mgc-faq details { border-top: 1px solid hsl(var(--border-color)); padding: 1.1rem 0; } .mgc-faq details:last-child { border-bottom: 1px solid hsl(var(--border-color)); } .mgc-faq summary { cursor: pointer; list-style: none; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.15rem; text-transform:uppercase; color: hsl(var(--text-primary)); display:flex; justify-content:space-between; gap:1rem; } .mgc-faq summary::-webkit-details-marker { display:none; } .mgc-faq summary::after { content:"+"; color: hsl(var(--accent-primary)); font-size:1.4rem; line-height:1; } .mgc-faq details[open] summary::after { content:"–"; } .mgc-faq details p { color: hsl(var(--text-secondary)); margin: 0.85rem 0 0; font-size:0.98rem; } /* ── BENTO GRID ────────────────────────────────────────────────── */ .mgc-bento { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 2rem; } .mgc-bento .cell { background: hsl(var(--bg-surface)); border:1px solid hsl(var(--border-color)); padding:1.5rem; } .mgc-bento .cell .num { font-family:'IBM Plex Mono',monospace; color: hsl(var(--accent-primary)); font-size:0.8rem; } .mgc-bento .cell.accent { background: hsl(var(--accent-primary) / 0.12); border-color: hsl(var(--accent-primary)); } .mgc-bento .cell h4 { color: hsl(var(--text-primary)); font-size:1.05rem; margin:0.4rem 0; } .mgc-bento .cell p { color: hsl(var(--text-secondary)); font-size:0.88rem; margin:0; } /* ── TRUST STRIP ───────────────────────────────────────────────── */ .mgc-trust-strip { font-family:'IBM Plex Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color: hsl(var(--text-secondary)); margin-top: 1.75rem; } .mgc-trust-strip span { color: hsl(var(--accent-primary)); margin: 0 0.5rem; } /* ── WORDMARK ──────────────────────────────────────────────────── */ .mgc-wordmark { font-family:'Barlow Condensed',sans-serif; font-size:1.5rem; letter-spacing:0.05em; font-weight:700; text-transform:uppercase; display:inline-flex; align-items:baseline; } .mgc-wordmark .metal { color: hsl(var(--text-primary)); } .mgc-wordmark .gc { color: hsl(var(--accent-primary)); } /* ── GHOST WATERMARK ───────────────────────────────────────────── */ .mgc-ghost-watermark { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; user-select:none; overflow:hidden; z-index:0; } .mgc-ghost-watermark span { font-family:'Barlow Condensed',sans-serif; font-size:20vw; text-transform:uppercase; letter-spacing:-0.02em; color: hsl(var(--text-primary) / 0.025); } /* ── NAVBAR ────────────────────────────────────────────────────── */ .mgc-navbar { position:fixed; top:0; left:0; right:0; z-index:50; background: hsla(var(--bg-primary) / 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom:1px solid hsl(var(--border-color)); } .mgc-navbar .inner { display:flex; align-items:center; justify-content:space-between; height:60px; } .mgc-navbar .nav-links { display:flex; gap:1.75rem; align-items:center; } .mgc-navbar .nav-link { font-family:'IBM Plex Mono',monospace; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.12em; color: hsl(var(--text-secondary)); } .mgc-navbar .nav-link.active, .mgc-navbar .nav-link:hover { color: hsl(var(--accent-primary)); } .mgc-nav-actions { display:flex; align-items:center; gap:1rem; } .mgc-theme-toggle { background:none; border:1px solid hsl(var(--border-color)); color: hsl(var(--text-primary)); width:36px; height:36px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; } .mgc-hamburger { display:none; background:none; border:none; color: hsl(var(--text-primary)); cursor:pointer; font-size:1.5rem; } /* ── MOBILE OVERLAY ────────────────────────────────────────────── */ .mgc-mobile-menu { position:fixed; inset:0; z-index:60; background: hsl(var(--bg-primary)); display:none; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; } .mgc-mobile-menu.open { display:flex; } .mgc-mobile-menu a { font-family:'Barlow Condensed',sans-serif; font-size:2rem; text-transform:uppercase; color: hsl(var(--text-primary)); } .mgc-mobile-menu .close { position:absolute; top:1.25rem; right:1.5rem; font-size:2rem; background:none; border:none; color: hsl(var(--text-primary)); cursor:pointer; } /* ── FOOTER ────────────────────────────────────────────────────── */ .mgc-footer { background: hsl(var(--bg-surface)); border-top:1px solid hsl(var(--border-color)); padding: 64px 0 32px; } .mgc-footer .cols { display:grid; grid-template-columns: 1.5fr 1fr 1.5fr; gap:2rem; } .mgc-footer h4 { font-family:'IBM Plex Mono',monospace; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.12em; color: hsl(var(--text-secondary)); } .mgc-footer a { color: hsl(var(--text-secondary)); display:block; margin-bottom:0.5rem; font-family:'IBM Plex Sans',sans-serif; } .mgc-footer a:hover { color: hsl(var(--accent-primary)); } .mgc-footer .tagline { color: hsl(var(--text-secondary)); } .mgc-footer .bottom-bar { border-top:1px solid hsl(var(--border-color)); margin-top:2.5rem; padding-top:1.5rem; font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color: hsl(var(--text-secondary)); } .mgc-powered-badge { font-family:'IBM Plex Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color: hsl(var(--text-secondary)); } .mgc-powered-badge b { color: hsl(var(--accent-primary)); } /* ── GROWTH PAGE OVERRIDE (off-white tinted bg) ────────────────── */ body.page-growth-mode { --bg-primary: 222 20% 95%; --bg-surface: 0 0% 100%; --text-primary: 0 0% 6%; --text-secondary: 215 14% 34%; --border-color: rgba(15,15,15,0.12); background-color:#EEF0F4; } body.page-growth-mode { background-image: linear-gradient(rgba(15,15,15,0.04) 1px,transparent 1px), linear-gradient(90deg, rgba(15,15,15,0.04) 1px,transparent 1px); } .mgc-dark-section { background: hsl(0 0% 6%); color:#F2F0EC; } .mgc-dark-section h1,.mgc-dark-section h2,.mgc-dark-section h3 { color:#F2F0EC; } .mgc-dark-section p { color:#A8B4C0; } .mgc-millwhite-section { background:#F2F0EC; color:#0F0F0F; } /* ── ANIMATION ─────────────────────────────────────────────────── */ @keyframes fadeInUp { from { opacity:0; transform: translateY(24px);} to {opacity:1; transform:none;} } .reveal { animation: fadeInUp 0.6s ease-out both; } /* ── RESPONSIVE ────────────────────────────────────────────────── */ @media (max-width: 900px) { .mgc-pricing-grid, .mgc-feature-grid, .mgc-bento { grid-template-columns: 1fr; } .mgc-footer .cols { grid-template-columns: 1fr; gap:2.5rem; } .mgc-navbar .nav-links { display:none; } .mgc-hamburger { display:inline-flex; } .mgc-price-card.featured { order: -1; } /* Most Popular first on mobile */ }