/** * Zumodo Landing Page Styles * * All rules are scoped to .page-template-landing-zumodo (added automatically * by WordPress to ) so nothing bleeds into other pages. * * Load order (functions.php): * technocrat-style → technocrat-child-style → [darkmode.css] → zumodo-landing.css * * @package technocrat-child-theme */ /* ════════════════════════════════════════════════════════════════ BODY & PAGE BACKGROUND (landing-specific overrides) ════════════════════════════════════════════════════════════════ */ .page-template-landing-zumodo body, .page-template-landing-zumodo .site { color: #f8fafc; font-family: "Inter", system-ui, -apple-system, sans-serif; } /* ════════════════════════════════════════════════════════════════ HEADER — sticky dark glass bar, zumodo purple accents ════════════════════════════════════════════════════════════════ */ /* Site-wide: sticky + blur on scroll for all dark mode pages */ html.darkmode .shell-header { position: sticky; top: 0; z-index: 200; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* Landing page extras (kept here for future use) */ .page-template-landing-zumodo .shell-header { /* background: rgba(11, 13, 23, 0.9) !important; */ /* border-bottom: 1px solid rgba(168, 85, 247, 0.15) !important; */ --zmd-header-comment-placeholder: 0; } /* Override the darkmode green accent → zumodo purple on header only */ .page-template-landing-zumodo .shell-header, .page-template-landing-zumodo #masthead { --color-primary: #a855f7; --color-accent: #a855f7; --menu-item-text: #c4b5fd; --menu-item-text-hover: #e9d5ff; --menu-item-text-active: #ffffff; --menu-item-bg-hover: rgba(168, 85, 247, 0.12); --menu-item-bg-active: rgba(168, 85, 247, 0.2); --submenu-bg: #0f0b20; --submenu-item-text: #c4b5fd; --submenu-item-text-hover: #ffffff; --submenu-item-bg-hover: rgba(168, 85, 247, 0.15); } /* Site title → white on landing page */ .page-template-landing-zumodo .site-title a { color: #ffffff !important; } /* Remove sidebar-toggle button (no sidebar on landing) */ .page-template-landing-zumodo .sidebar-toggle { display: none !important; } /* ════════════════════════════════════════════════════════════════ HIDE DEFAULT TECHNOCRAT FOOTER (we render our own in the template) ════════════════════════════════════════════════════════════════ */ .page-template-landing-zumodo .shell-footer { display: none !important; } /* ════════════════════════════════════════════════════════════════ ZUMODO DESIGN TOKENS (scoped to .zmd-landing) ════════════════════════════════════════════════════════════════ */ .zmd-landing { --zmd-bg-primary: #0b0d17; --zmd-bg-secondary: #161b2a; --zmd-purple: #a855f7; --zmd-blue: #3b82f6; --zmd-soft: #c084fc; --zmd-text: #f8fafc; --zmd-dim: #94a3b8; --zmd-border: rgba(168, 85, 247, 0.12); --zmd-gradient: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%); } /* ════════════════════════════════════════════════════════════════ TYPOGRAPHY — reset any parent theme overrides inside .zmd-landing ════════════════════════════════════════════════════════════════ */ .zmd-landing h1, .zmd-landing h2, .zmd-landing h3, .zmd-landing h4 { color: #f8fafc; line-height: 1.2; font-family: inherit; } .zmd-landing h2 { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 1rem; } .zmd-landing p { color: var(--zmd-dim); line-height: 1.7; margin-bottom: 0; } /* ════════════════════════════════════════════════════════════════ GRADIENT TEXT ════════════════════════════════════════════════════════════════ */ .text-gradient { background: var( --zmd-gradient, linear-gradient(135deg, #a855f7 0%, #3b82f6 100%) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; } /* ════════════════════════════════════════════════════════════════ UTILITY ════════════════════════════════════════════════════════════════ */ .zmd-text-dim { color: var(--zmd-dim) !important; } /* Hero CTAs: keep both buttons visually stable and identical in behavior. */ .zmd-hero .zmd-hero-cta { color: #fff !important; text-decoration: none !important; transform: translateY(0) scale(1); } .zmd-hero .zmd-hero-cta:visited, .zmd-hero .zmd-hero-cta:hover, .zmd-hero .zmd-hero-cta:focus, .zmd-hero .zmd-hero-cta:active { color: #fff !important; text-decoration: none !important; } .zmd-hero .zmd-hero-cta:hover { transform: translateY(-1px) scale(1.02); } .zmd-hero .zmd-hero-cta:active { transform: translateY(0) scale(0.98); } .zmd-hero .zmd-hero-cta-download { background: #9333ea; } .zmd-hero .zmd-pro-bolt { width: 0.95rem; height: 1.1rem; color: #ffd500; filter: drop-shadow(0 0 8px rgba(255, 213, 0, 0.45)); flex: 0 0 auto; } .zmd-hero .zmd-hero-cta-pro:hover { border-color: rgba(168, 85, 247, 0.6); } .zmd-label { color: var(--zmd-purple); font-weight: 700; text-transform: uppercase; font-size: 0.625rem; /* 10px */ letter-spacing: 0.15em; margin-bottom: 0.5rem; display: block; } .zmd-learn-more { margin-top: 36px; font-size: 14px; display: flex; justify-content: center; border-radius: 6px; background: var(--zmd-border); color: white; padding: 8px; } .zmd-learn-more:hover { background: rgba(168, 85, 247, 0.2); color: white; text-decoration: none; } h2.tech-paper, h3.tech-paper { display: flex; align-items: center; gap: 12px; } .h2-icon { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: white; } /* Dark mode */ :root.dark .h2-icon { color: var(--text-light); } /* ════════════════════════════════════════════════════════════════ CARD GLASS ════════════════════════════════════════════════════════════════ */ .zmd-card { background: radial-gradient( circle at 0% 0%, rgba(168, 85, 247, 0.08) 0%, rgba(22, 27, 42, 0.95) 50% ); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--zmd-border); border-radius: 1rem; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-start; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .zmd-card:hover { border-color: rgba(168, 85, 247, 0.4); box-shadow: 0 0 25px rgba(168, 85, 247, 0.1); transform: translateY(-2px); } /* Table card and overflow-x wrappers don't need min-height */ .zmd-card.overflow-x-auto { min-height: 0; } .zmd-border-glow { border: 1px solid rgba(168, 85, 247, 0.2) !important; box-shadow: 0 0 12px rgba(168, 85, 247, 0.15); } /* ════════════════════════════════════════════════════════════════ COMPARISON TABLE ════════════════════════════════════════════════════════════════ */ .zmd-table { width: 100%; border-collapse: collapse; } .zmd-table th, .zmd-table td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--zmd-border); color: #f8fafc; } .zmd-table th { color: var(--zmd-purple); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em; font-weight: 600; } .zmd-highlight-row { background: rgba(168, 85, 247, 0.05); color: #ffffff; font-weight: 700; } /* Comparison table icon cells */ .zmd-icon-no, .zmd-icon-yes { width: 20px; height: 20px; display: inline-block; vertical-align: middle; } /* ════════════════════════════════════════════════════════════════ PRICING CARD — radial glow overlay ════════════════════════════════════════════════════════════════ */ .zmd-radial-bg { background: radial-gradient( circle at 50% 0%, rgba(168, 85, 247, 0.35) 0%, transparent 70% ); } /* ════════════════════════════════════════════════════════════════ FOOTER — shared by footer.php (all pages) and landing template Fallback values ensure it works outside .zmd-landing scope. ════════════════════════════════════════════════════════════════ */ .zmd-footer { max-width: 72rem; margin-left: auto; margin-right: auto; padding: 4rem 1.5rem; text-align: center; border-top: 1px solid rgba(88, 28, 135, 0.2); color: var(--zmd-dim, #94a3b8); } .zmd-footer-nav { display: flex; justify-content: center; gap: 2rem; font-size: 0.75rem; font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace; color: var(--zmd-dim, #94a3b8); text-transform: uppercase; } .zmd-footer-copy { margin-top: 2.5rem; font-size: 0.625rem; color: var(--zmd-dim, #94a3b8); opacity: 0.5; text-transform: uppercase; letter-spacing: 0.1em; } .zmd-footer-link { color: var(--zmd-dim, #94a3b8); text-decoration: none; transition: color 0.2s ease; } .zmd-footer-link:hover, .zmd-footer-link:focus { color: var(--zmd-purple, #a855f7); text-decoration: none; } /* ════════════════════════════════════════════════════════════════ GLOBAL SITE COLOR OVERRIDES FOR ALL OTHER PAGES (applied in addition to darkmode.css — only overrides the accent) ════════════════════════════════════════════════════════════════ */ /* * These rules override the dark-mode green (#6ead00) with zumodo purple * site-wide, so the shop / product / checkout pages all match the brand. * They intentionally live outside the .page-template-landing-zumodo scope. */ html.darkmode { --color-primary: #a855f7; --color-accent: #a855f7; /* Override the flat body-bg token so any theme code that references it also uses our dark base, not the default #101010 from darkmode.css. */ --color-body-bg: #0b0d17; } /* ════════════════════════════════════════════════════════════════ GLOBAL DARK MODE BACKGROUND — radial gradient on every page ════════════════════════════════════════════════════════════════ */ /* html selector gives specificity (0,1,0) for the class alone — beats any bare `body {}` rule the theme or WordPress custom-background may inject, even without !important. We keep !important as a hard fallback. */ html.darkmode body { background: radial-gradient( circle at 50% -10%, rgba(34, 24, 80, 1) 0%, rgba(25, 19, 51, 1) 35%, #0b0d17 85% ) !important; background-color: #0b0d17 !important; background-attachment: fixed !important; } /* .shell-frame sits visually on top of body and has its own background-color. Force it transparent in dark mode so the gradient always shows through. */ html.darkmode .shell-frame { background-color: transparent !important; } /* Form fields & textareas — replace the pure-black (#101010) default with the deep navy base so they sit harmoniously on the gradient background. */ html.darkmode { --color-pure: #0b0d17; --body-textarea: #0b0d17; }