/** * GX Module Styles -- Premium Portal Design System * Developed for Becchio Group LLC. 2026. All rights reserved. * * Design references: Apple Liquid Glass, Linear, Vercel, Stripe. * Frosted surfaces with real depth, crisp data typography, * dark canvas with luminous data, premium micro-interactions. * * Every portal includes this. Every module's DOM gets styled automatically. * The design quality lives in the platform, not in each client's code. */ /* ========================================================================== GX Design System Tokens -- Apple HIG x Claypunk-187 foundation Cascades through every component. See docs/platform/gx-delivery-spec.md ========================================================================== */ :root { /* --- Apple-style Type Scale --- */ --type-large-title: 34px; /* hero numbers, splash */ --type-title-1: 28px; /* page titles */ --type-title-2: 22px; /* section titles */ --type-title-3: 20px; /* sub-section */ --type-headline: 17px; /* card titles */ --type-body: 14px; /* default body */ --type-callout: 16px; /* emphasized inline */ --type-subheadline: 13px; /* secondary body */ --type-footnote: 12px; /* metadata */ --type-caption-1: 12px; /* labels -- 12px minimum per platform standard */ --type-caption-2: 12px; /* fine print -- 12px minimum per platform standard */ /* --- Material Hierarchy (Apple Liquid Glass Tech Overview) --- */ --mat-thin: rgba(255,255,255,0.03); /* lightest, blur 14px */ --mat-regular: rgba(255,255,255,0.05); /* standard tile */ --mat-thick: rgba(255,255,255,0.08); /* sheets, popovers */ --mat-chrome: rgba(5,11,20,0.85); /* nav, toolbar */ --mat-blur-thin: blur(14px) saturate(140%); --mat-blur-regular: blur(24px) saturate(160%); --mat-blur-thick: blur(32px) saturate(180%); --mat-blur-chrome: blur(20px) saturate(160%); /* --- Catch-light gradient (Liquid Glass signature) --- */ /* Top-edge brightening only -- no bottom-dark, which over a translucent surface on a dark canvas swallows tile content. */ --catch-light: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.0) 28%); /* --- Apple Motion --- */ --ease-standard: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 150ms; --dur-fast: 200ms; --dur-base: 300ms; } /* Reduced Transparency: collapse glass to opaque so vision-impaired users don't lose contrast on translucent surfaces. */ @media (prefers-reduced-transparency: reduce) { :root { --mat-thin: var(--bg-elevated, #0a1f3d); --mat-regular: var(--bg-elevated, #0a1f3d); --mat-thick: var(--bg-elevated, #0a1f3d); --mat-chrome: var(--bg-darkest, #05182F); --mat-blur-thin: none; --mat-blur-regular: none; --mat-blur-thick: none; --mat-blur-chrome: none; --catch-light: none; } } /* Increased Contrast: bump border opacity + text saturation. */ @media (prefers-contrast: more) { :root { --glass-border: rgba(255,255,255,0.32) !important; --glass-border-hover: rgba(255,255,255,0.55) !important; --text-muted: rgba(240,244,248,0.78) !important; } } /* Reduced Motion: kill all keyframe animations + transforms. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Portal Canvas -- Deep navy void with atmospheric light sources ========================================================================== */ body { background: var(--bg, #05182F); min-height: 100vh; } /* -------------------------------------------------------------------------- Light Theme Overrides When data-theme="light" on , invert glass materials for readability. -------------------------------------------------------------------------- */ [data-theme="light"] { --glass-bg: rgba(0, 0, 0, 0.025); --glass-bg-hover: rgba(0, 0, 0, 0.05); --glass-bg-subtle: rgba(0, 0, 0, 0.015); --glass-border: rgba(0, 0, 0, 0.08); --glass-border-hover: rgba(0, 0, 0, 0.14); --glass-tile-bg: rgba(0, 0, 0, 0.03); --glass-tile-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); --glass-tile-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08); --status-positive: #16a34a; } [data-theme="light"] .portal-header { background: var(--bg-surface); border-bottom-color: rgba(0, 0, 0, 0.06); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } [data-theme="light"] .portal-sidebar { background: var(--bg-surface); border-right-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .header-title { color: var(--text); } [data-theme="light"] .nav-link { color: var(--text-muted); } [data-theme="light"] .nav-link.is-active { color: var(--text); background: var(--glass-bg); } [data-theme="light"] .section-title { color: var(--text); } [data-theme="light"] .user-name, [data-theme="light"] .user-avatar { color: var(--text-muted); } [data-theme="light"] .mobile-nav { background: var(--bg-surface); border-top-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .mobile-nav-item { color: var(--text-muted); } [data-theme="light"] .mobile-nav-item.is-active { color: var(--accent); } /* Light theme: card overrides */ [data-theme="light"] .kpi-card, [data-theme="light"] .breakdown-card, [data-theme="light"] .gx-card, [data-theme="light"] .insight-card, [data-theme="light"] .target-card, [data-theme="light"] .pipeline-card, [data-theme="light"] .scenario-card, [data-theme="light"] .deal-card, [data-theme="light"] .sentiment-card, [data-theme="light"] .channel-card, [data-theme="light"] .funnel-stage { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.06); border-top: 1px solid rgba(0, 0, 0, 0.04); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } [data-theme="light"] .kpi-card:hover, [data-theme="light"] .gx-card:hover, [data-theme="light"] .insight-card:hover, [data-theme="light"] .target-card:hover { border-color: color-mix(in srgb, var(--accent, #B9A590) 30%, transparent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04); transform: translateY(-1px); } [data-theme="light"] .kpi-label, [data-theme="light"] .kpi-sublabel, [data-theme="light"] .gx-card-title, [data-theme="light"] .gx-card-subtitle, [data-theme="light"] .breakdown-label { color: var(--text); } [data-theme="light"] .kpi-value { color: var(--text); } [data-theme="light"] .rec-financial { color: var(--accent); } [data-theme="light"] body::after { display: none; /* No noise texture on light themes */ } /* Noise texture overlay for organic feel */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: 0.012; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; z-index: 9998; } /* ========================================================================== Scrollbar -- Minimal, translucent ========================================================================== */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); } /* ========================================================================== Portal Header -- Frosted sticky bar ========================================================================== */ .portal-header { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 200; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px; background: rgba(5, 24, 47, 0.6); backdrop-filter: blur(40px) saturate(1.3); -webkit-backdrop-filter: blur(40px) saturate(1.3); border-bottom: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); } .header-title { font-family: var(--font-display, 'Poppins', sans-serif); font-weight: 900; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.70); text-shadow: none; } /* ========================================================================== Sidebar Navigation -- Frosted panel ========================================================================== */ /* Sidebar + nav-link styling lives in portal-template.html (inline