/* SC-ience Labs — shared dark app-detail theme * Pairs with the structural mt-* classes from meshtrail.css, but flips the * palette dark and drives everything from a small set of accent variables so * each product page (Neon AI, Meshology, Parlor) stays coherent with the studio. * * Usage: ... then set the four * accent vars (--mt-forest, --mt-forest-dark, --mt-rust, --mt-mustard), * --mt-cream (text that sits on the bright accent) and --app-glow per page. * * Loaded AFTER meshtrail.css, so these single-class rules win on equal * specificity. */ body.app-dark { /* surfaces */ --mt-bg: #0a0a17; --mt-bg-elev: #11111f; --mt-paper: #14131f; --mt-paper-2: #1a1830; /* text */ --mt-ink: #eef0fb; --mt-ink-soft: #c3c7e6; --mt-ink-faded: #898fc0; --mt-line: #262444; --mt-line-faint: rgba(255, 255, 255, 0.06); /* accents — overridden per page (defaults = studio cyan) */ --mt-forest: #00d4ff; --mt-forest-dark: #0098b4; --mt-rust: #ff5ea8; --mt-mustard: #9d6ee9; --mt-cream: #06060f; /* dark text on bright accent buttons */ --app-glow: rgba(0, 212, 255, 0.22); background: var(--mt-bg); background-image: radial-gradient(ellipse 1100px 700px at 80% -5%, var(--app-glow), transparent 60%), radial-gradient(ellipse 800px 600px at 5% 100%, rgba(255, 255, 255, 0.03), transparent 60%), linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px); background-size: auto, auto, 60px 60px, 60px 60px; background-position: top right, bottom left, center, center; background-attachment: fixed, fixed, fixed, fixed; } /* headings — sharp grotesk by default (Parlor overrides back to serif) */ body.app-dark h1, body.app-dark h2, body.app-dark h3, body.app-dark h4 { font-family: 'Space Grotesk', 'Inter', sans-serif; color: var(--mt-ink); letter-spacing: -0.02em; } /* === NAV === */ body.app-dark .nav { background: rgba(8, 8, 20, 0.82); border-bottom-color: var(--mt-line); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); } body.app-dark .brand { color: var(--mt-ink); } body.app-dark .brand .dash { color: var(--mt-forest); } body.app-dark .nav-links a { color: var(--mt-ink-soft); } body.app-dark .nav-links a:hover, body.app-dark .nav-links a.active { color: var(--mt-forest); } body.app-dark .nav-links a:not(.nav-cta)::after { background: var(--mt-forest); } body.app-dark .nav-cta { background: var(--mt-forest) !important; color: var(--mt-cream) !important; } body.app-dark .nav-cta:hover { background: var(--mt-forest-dark) !important; color: var(--mt-cream) !important; } /* === HERO === */ body.app-dark .mt-hero::before { background: radial-gradient(circle, var(--app-glow), transparent 65%); opacity: 0.9; width: 520px; height: 520px; } body.app-dark .mt-hero-copy h1 .underline { background-image: linear-gradient(transparent 68%, var(--app-glow) 68%); } body.app-dark .mt-hero-meta { border-color: var(--mt-line); } body.app-dark .mt-hero-meta strong { color: var(--mt-forest); } /* === BUTTONS === */ body.app-dark .mt-btn-primary { background: var(--mt-forest); color: var(--mt-cream) !important; box-shadow: 0 0 0 1px var(--mt-forest), 0 8px 30px var(--app-glow); } body.app-dark .mt-btn-primary:hover { background: var(--mt-forest-dark); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--mt-forest), 0 12px 40px var(--app-glow); color: var(--mt-cream) !important; } body.app-dark .mt-btn-primary:active { transform: translateY(0); } body.app-dark .mt-btn-ghost { border-color: var(--mt-line); color: var(--mt-ink) !important; } body.app-dark .mt-btn-ghost:hover { background: transparent; border-color: var(--mt-forest); color: var(--mt-forest) !important; } /* status pill (coming soon / in dev) */ .app-pill { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 10px; background: var(--mt-paper-2); border: 1px solid var(--mt-line); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mt-ink-soft); } .app-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mt-forest); box-shadow: 0 0 10px var(--mt-forest); animation: pulse 2.2s ease-in-out infinite; } /* === DEVICE FRAMES (phone mockups, gallery, showcase) === */ body.app-dark .mt-hero-phone, body.app-dark .mt-shot, body.app-dark .mt-showcase-screen { box-shadow: 0 0 0 2px #05060c, 0 0 0 9px #1a1930, 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 70px var(--app-glow); border: none; } body.app-dark .mt-shot { border: 1px solid var(--mt-line); } /* === SECTIONS === */ body.app-dark .mt-section.bg-cream { background: var(--mt-bg-elev); border-color: var(--mt-line); } body.app-dark .mt-section-head p { color: var(--mt-ink-soft); } /* feature cards */ body.app-dark .mt-feature { background: var(--mt-paper); border-color: var(--mt-line); } body.app-dark .mt-feature:hover { transform: translateY(-3px); border-color: var(--mt-forest); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 26px var(--app-glow); } body.app-dark .mt-feature .num { color: var(--mt-forest); opacity: 0.5; } body.app-dark .mt-feature h3 { color: var(--mt-ink); } body.app-dark .mt-feature p { color: var(--mt-ink-soft); } /* numbers strip */ body.app-dark .mt-numbers { background: var(--mt-paper); border-color: var(--mt-line); } body.app-dark .mt-num-cell { border-color: var(--mt-line); } body.app-dark .mt-num-cell:hover { background: var(--mt-paper-2); } body.app-dark .mt-num-cell .val { font-family: 'Space Grotesk', sans-serif; color: var(--mt-forest); font-weight: 600; } body.app-dark .mt-num-cell .val .small { color: var(--mt-rust); } /* layers / grid legend */ body.app-dark .mt-layers { background: var(--mt-paper); border-color: var(--mt-line); } body.app-dark .mt-layer { border-color: var(--mt-line); } body.app-dark .mt-layer .name { color: var(--mt-forest); } body.app-dark .mt-layer h4 { color: var(--mt-ink); font-family: 'Space Grotesk', sans-serif; } body.app-dark .mt-layer p { color: var(--mt-ink-faded); } /* use-case cards */ body.app-dark .mt-usecase { background: var(--mt-paper); border-color: var(--mt-line); } body.app-dark .mt-usecase::before { background: radial-gradient(circle, var(--app-glow), transparent 70%); } body.app-dark .mt-usecase:hover { border-color: var(--mt-forest); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 26px var(--app-glow); } body.app-dark .mt-usecase .uc-icon { background: var(--mt-forest); color: var(--mt-cream); } body.app-dark .mt-usecase h4 { color: var(--mt-ink); font-family: 'Space Grotesk', sans-serif; } body.app-dark .mt-usecase p { color: var(--mt-ink-soft); } body.app-dark .mt-usecase .uc-tags { color: var(--mt-forest); } body.app-dark .mt-usecase .uc-tags span { background: var(--mt-bg); border-color: var(--mt-line); } /* comparison table */ body.app-dark .mt-compare { background: var(--mt-paper); border-color: var(--mt-line); } body.app-dark .mt-compare th, body.app-dark .mt-compare td { border-color: var(--mt-line); } body.app-dark .mt-compare th { background: var(--mt-bg-elev); color: var(--mt-ink-faded); } body.app-dark .mt-compare th.mt-col { background: var(--mt-forest); color: var(--mt-cream); } body.app-dark .mt-compare td:first-child { background: var(--mt-bg-elev); color: var(--mt-ink); } body.app-dark .mt-compare td.yes { color: var(--mt-forest); } body.app-dark .mt-compare td.no { color: var(--mt-ink-faded); } body.app-dark .mt-compare td.partial { color: var(--mt-mustard); } body.app-dark .mt-compare tr:hover td:not(:first-child) { background: var(--app-glow); } /* architecture diagram */ body.app-dark .mt-arch { background: var(--mt-paper); border-color: var(--mt-line); } body.app-dark .mt-arch::before { background: radial-gradient(circle at 20% 30%, var(--app-glow), transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.04), transparent 50%); } body.app-dark .mt-arch-cell { background: var(--mt-paper-2); border-color: var(--mt-line); } body.app-dark .mt-arch-cell:hover { border-color: var(--mt-forest); } body.app-dark .mt-arch-cell .tier { color: var(--mt-forest); } body.app-dark .mt-arch-cell h4 { color: var(--mt-ink); font-family: 'Space Grotesk', sans-serif; } body.app-dark .mt-arch-cell p { color: var(--mt-ink-soft); } /* showcase tabs */ body.app-dark .mt-showcase-tab:hover { background: var(--mt-paper); border-color: var(--mt-line); } body.app-dark .mt-showcase-tab.active { background: var(--mt-paper); border-color: var(--mt-forest); box-shadow: 0 6px 20px var(--app-glow); } body.app-dark .mt-showcase-tab.active::before { background: var(--mt-forest); } body.app-dark .mt-showcase-tab .icon { background: var(--mt-bg); border-color: var(--mt-line); color: var(--mt-forest); } body.app-dark .mt-showcase-tab.active .icon { background: var(--mt-forest); color: var(--mt-cream); border-color: var(--mt-forest); } body.app-dark .mt-showcase-tab .copy h3 { color: var(--mt-ink); } body.app-dark .mt-showcase-tab .copy p { color: var(--mt-ink-soft); } /* mesh callout */ body.app-dark .mt-mesh-copy h2 .mark { background-image: linear-gradient(transparent 68%, var(--app-glow) 68%); } body.app-dark .mt-mesh-visual { background: var(--mt-paper); border-color: var(--mt-line); } /* download / CTA band */ body.app-dark .mt-download { background: var(--mt-bg-elev); border-color: var(--mt-line); } body.app-dark .mt-download p { color: var(--mt-ink-soft); } body.app-dark .app-store-btn { background: #05060c; color: var(--mt-ink) !important; border: 1px solid var(--mt-line); } body.app-dark .app-store-btn:hover { border-color: var(--mt-forest); color: var(--mt-ink) !important; } /* floating cta */ body.app-dark .mt-floating-cta { background: var(--mt-forest); color: var(--mt-cream); box-shadow: 0 12px 30px var(--app-glow); } body.app-dark .mt-floating-cta:hover { background: var(--mt-forest-dark); color: var(--mt-cream); } /* footer */ body.app-dark footer { background: var(--mt-bg-elev); border-color: var(--mt-line); } body.app-dark footer p, body.app-dark .foot-col a, body.app-dark .foot-col p { color: var(--mt-ink-soft); } body.app-dark .foot-col a:hover { color: var(--mt-forest); } body.app-dark .foot-col h4 { color: var(--mt-ink-faded); } body.app-dark .foot-bar { color: var(--mt-ink-faded); border-color: var(--mt-line); } body.app-dark .brand-mark { background: var(--mt-forest); color: var(--mt-cream); box-shadow: 0 0 0 1px var(--mt-forest-dark); } /* === SMALL SHARED HELPERS === */ /* app icon chip in hero */ .app-icon { width: 80px; height: 80px; border-radius: 20px; display: block; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--mt-line), 0 0 40px var(--app-glow); } /* meet-the-cast / tile grids */ .app-cast { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; } .app-cast .who { background: var(--mt-paper); border: 1px solid var(--mt-line); border-radius: 14px; padding: 20px 18px; text-align: center; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .app-cast .who:hover { transform: translateY(-4px); border-color: var(--mt-forest); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 24px var(--app-glow); } .app-cast .who img { width: 96px; height: 96px; border-radius: 50%; display: block; margin: 0 auto 14px; background: var(--mt-bg); } .app-cast .who h4 { font-size: 1.05rem; margin: 0 0 4px; color: var(--mt-ink); } .app-cast .who .role { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mt-forest); margin-bottom: 8px; } .app-cast .who p { font-size: 0.85rem; color: var(--mt-ink-soft); line-height: 1.5; margin: 0; } /* generic two-tone tag chips used in feature copy */ .app-chips { display: flex; flex-wrap: wrap; gap: 8px; } .app-chips span { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 5px 11px; border-radius: 5px; background: var(--app-glow); border: 1px solid var(--mt-line); color: var(--mt-ink); }