/* landing-pages.css - the homepage's landing components, for /pages/ documents. * * WHY THIS FILE EXISTS: the marketing homepage and the generated /pages/ tree * were built on two different design systems - `landing-*` (app.css) and `md-*` * (modules.css). They shared an accent color and a similar font stack, which * made them look related in a diff and plainly different on screen. * * app.css cannot simply be linked from a document page: it opens with * body { height: 100%; overflow: hidden; } * which is right for an application shell and fatal for a scrolling page. So the * landing COMPONENTS are extracted here and the shell is left behind. * * GENERATED by scripts/tests/extract-landing-css.js from app.css. Edit the * source rules in app.css, not this file, or the next extraction drops them. * * Pair with flux.css (tokens) and theme-bridge.css (aliases), and set * data-theme="light" on - flux defaults to dark, and the landing is * always light. */ /* Document base. Replaces the app-shell body rule that was deliberately not carried over. */ body.landing-doc { margin: 0; min-height: 100%; overflow-x: hidden; overflow-y: auto; background: var(--surface-0); color: var(--text-primary); font-family: var(--ff-sans, 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif); line-height: 1.65; -webkit-font-smoothing: antialiased; } /* NO blanket anchor rule here, deliberately. A `body.landing-doc a { color: ... }` rule carries specificity 0,0,1,2 and outranks every component that sets its own link color - .landing-btn-primary (0,0,1,0) lost its label to it, and .landing-nav-link lost the homepage's grey and rendered teal, which is what made the nav look different from the homepage despite identical markup and identical nav CSS. Components own their colors; prose links are colored where prose lives. */ .gap-split-copy p a, .gap-close a, .gap-boundary a, .gap-tool p a { color: var(--accent); } .landing-wrap { display: flex; flex-direction: column; min-height: 100%; } .landing-accent { color: var(--accent); } /* --- Nav --- */ /* The rule under the nav is the VaultSync red, not a neutral border. * * It is the one piece of brand colour on an otherwise Microsoft-adjacent surface, and that is the * whole point: the blue says we belong in your stack, the red says which vendor it is. Everything * about it is deliberately restrained - 1px, well under half opacity - because the red is a signal * in this palette and never a fill. At full strength a rule this wide reads as an alert. * * --brand-red carries the channels unpacked so the alpha stays a single tunable number. It is the * corporate mark measured directly, #c11c33 = rgb(193 28 51). --brand-red-rule is the only knob: * raise it toward .6 to make the line assert itself, drop it toward .25 to make it a whisper. * * VaultSync surfaces only. The application is GDBS Pro chrome, where a red rule would compete with * the data rather than brand the page. */ :root { --brand-red: 193 28 51; --brand-red-rule: .45; } .landing-nav { position: sticky; top: 0; z-index: 100; background: color-mix(in oklch, var(--surface-0) 90%, transparent); backdrop-filter: blur(12px); /* Was a red hairline (--brand-red at .45). A saturated accent line pinned to the top of the viewport is on screen for the entire scroll, so it competed with the content the whole way down. The nav still needs an edge - without one it bleeds into a section that shares its ground - so it keeps a neutral border in the standard token instead. --brand-red stays defined above; it is simply no longer spent here. */ border-bottom: 1px solid var(--border-subtle, #e9ecf3); } .landing-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem; height: 60px; display: flex; align-items: center; gap: 2rem; } .landing-logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 300; color: var(--text-primary); white-space: nowrap; } .landing-logo i { color: var(--accent); font-size: 22px; } .landing-logo span { font-size: 20px; } .landing-nav-links { display: flex; gap: 0.25rem; flex: 1; } .landing-nav-link { padding: 6px 14px; color: var(--text-secondary); font-size: 13px; border-radius: 4px; transition: all 0.2s; text-decoration: none; } .landing-nav-link:hover { color: var(--text-primary); background: color-mix(in oklch, var(--accent) 12%, transparent); text-decoration: none; } .landing-nav-actions { display: flex; gap: 0.5rem; } /* --- Buttons --- */ .landing-btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; background: var(--accent); color: var(--accent-text, #fff); border: none; border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .landing-btn-primary i, .landing-btn-primary svg { color: inherit; } .landing-btn-primary:hover { background: var(--accent-hover); } .landing-btn-outline { display: inline-flex; align-items: center; gap: 6px; padding: 7px 18px; background: transparent; color: var(--text-bright); border: 1px solid var(--border-light); border-radius: 5px; font-size: 13px; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .landing-btn-outline:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); } .landing-btn-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; background: transparent; color: var(--text-bright); border: 1px solid var(--border); border-radius: 5px; font-size: 13px; cursor: pointer; transition: all 0.2s; text-decoration: none; white-space: nowrap; } .landing-btn-ghost:hover { background: color-mix(in oklch, var(--text-primary) 7%, transparent); text-decoration: none; color: var(--text-primary); } .landing-btn-lg { padding: 12px 28px; font-size: 15px; border-radius: 6px; } .landing-btn-full { width: 100%; justify-content: center; padding: 12px; font-size: 15px; border-radius: 6px; } /* --- Hero --- */ .landing-hero { background: radial-gradient(ellipse at 60% 40%, rgba(79,195,247,0.07) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(129,196,132,0.05) 0%, transparent 50%), var(--bg); padding: 100px 2rem 80px; border-bottom: 1px solid var(--border); } .landing-hero-inner { max-width: 1200px; margin: 0 auto; text-align: center; } .landing-badge-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; background: color-mix(in oklch, var(--accent) 12%, transparent); border: 1px solid color-mix(in oklch, var(--accent) 32%, transparent); border-radius: 20px; font-size: 12px; color: var(--accent); margin-bottom: 1.5rem; } .landing-h1 { font-size: 44px; /* fallback for browsers without clamp() (older Android) */ font-size: clamp(32px, 5vw, 58px); font-weight: 300; color: var(--text-bright); line-height: 1.2; margin-bottom: 1.25rem; } /* Kept in step with the same rule in app.css - a multi-paragraph hero lede needs the wider measure and the tight inter-line gap, or each sentence wraps to an orphan and the three read as three unrelated blocks. */ .landing-hero-sub { max-width: 720px; margin: 0 auto .35rem; font-size: 16px; color: var(--text-dim); line-height: 1.7; text-wrap: balance; } .landing-hero-sub:last-of-type { margin-bottom: 2.5rem; } .landing-hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 4rem; } .landing-hero-stats { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; padding-top: 2.5rem; border-top: 1px solid var(--border); } .landing-stat { text-align: center; } .landing-stat span { display: block; font-size: 36px; font-weight: 300; color: #4fc3f7; line-height: 1; margin-bottom: 0.5rem; } .landing-stat small { font-size: 12px; color: var(--text-dim); line-height: 1.5; } /* --- Sections --- */ .landing-section { padding: 80px 2rem; } .landing-section-alt { background: var(--bg-alt); } .landing-section-inner { max-width: 1200px; margin: 0 auto; } .landing-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #4fc3f7; margin-bottom: 1rem; } .landing-h2 { font-size: 30px; font-size: clamp(24px, 3vw, 36px); font-weight: 300; color: var(--text-bright); margin-bottom: 1rem; } .landing-section-sub { font-size: 15px; color: var(--text-dim); line-height: 1.7; max-width: 680px; margin-bottom: 3rem; } /* --- Features grid --- */ .landing-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .landing-feature-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 1.75rem; transition: border-color 0.2s; } .landing-feature-card:hover { border-color: var(--border-light); } .landing-feature-icon { font-size: 28px; margin-bottom: 1rem; } .landing-feature-card h3 { font-size: 15px; font-weight: 600; color: var(--text-bright); margin-bottom: 0.75rem; } .landing-feature-card p { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: 0; } /* --- Domains grid --- */ .landing-domains-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .landing-domain-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; transition: all 0.2s; cursor: default; } .landing-domain-card:hover { border-color: var(--border-light); background: var(--bg-hover); } .landing-domain-card i { font-size: 24px; } .landing-domain-card span { font-size: 14px; font-weight: 600; color: var(--text-bright); } .landing-domain-card small { font-size: 11px; color: var(--text-dim); line-height: 1.4; } /* --- Tiers grid --- */ .landing-tiers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; align-items: stretch; } .landing-tier-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; } .landing-tier-card-highlight { border-color: rgba(245,158,11,0.4); box-shadow: 0 0 0 1px rgba(245,158,11,0.15); } .landing-tier-label { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; letter-spacing: 1px; align-self: flex-start; } .landing-tier-price { font-size: 32px; font-weight: 300; color: var(--text-bright); } .landing-tier-price small { font-size: 14px; color: var(--text-dim); } .landing-tier-desc { font-size: 13px; color: var(--text-dim); line-height: 1.6; } .landing-tier-features { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text); flex: 1; } .landing-tier-features li { display: flex; align-items: center; gap: 8px; } .landing-tier-features li i { width: 14px; font-size: 12px; } .landing-tier-features li i.fa-check { color: #4ec964; } .landing-tier-features li i.fa-times { color: #555; } .landing-tier-features li.muted { color: var(--text-dim); } .landing-tier-btn { margin-top: auto; padding: 10px 16px; width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .landing-tier-btn:hover { background: var(--bg-hover); border-color: var(--border-light); color: var(--text-bright); } /* A SOLID tier button: white label AND white icon. The icon rule is not redundant - FontAwesome glyphs are font colour, so without inherit they keep the dark .landing-tier-btn colour and render near-black on a purple or blue fill. */ .landing-tier-btn-solid { color: #fff; } .landing-tier-btn-solid i, .landing-tier-btn-solid svg { color: inherit; } .landing-tier-btn-solid:hover { color: #fff; filter: brightness(1.08); } /* The free tier reads as the secondary action, which is the convention: outlined against the paid tiers solid fills. Amber on pale amber failed contrast, so the text is the darker amber-700 and the border carries the colour instead. */ .landing-tier-btn-accent { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.55); color: #b45309; font-weight: 600; } .landing-tier-btn-accent:hover { background: rgba(245,158,11,0.22); color: #92400e; } /* --- Feedback section --- */ .landing-feedback-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } @media (max-width: 768px) { .landing-feedback-wrap { grid-template-columns: 1fr; } } .landing-contact-list { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; } .landing-contact-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; } .landing-contact-item i { color: #4fc3f7; font-size: 16px; margin-top: 2px; } .landing-contact-item strong { display: block; color: var(--text-bright); font-size: 13px; margin-bottom: 3px; } .landing-contact-item a { font-size: 12px; color: var(--text-dim); } .landing-contact-item a:hover { color: #4fc3f7; } .landing-form { display: flex; flex-direction: column; gap: 1rem; } .landing-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 540px) { .landing-form-row { grid-template-columns: 1fr; } } .landing-field { display: flex; flex-direction: column; gap: 5px; } .landing-field label { font-size: 12px; color: var(--text-dim); font-weight: 500; } .landing-field input, .landing-field select, .landing-field textarea { background: var(--bg-input); border: 1px solid var(--border); border-radius: 5px; padding: 9px 12px; color: var(--text); font-size: 13px; } .landing-field input:focus, .landing-field select:focus, .landing-field textarea:focus { border-color: #4fc3f7; outline: none; } .landing-field textarea { resize: vertical; min-height: 100px; } /* --- Demo / GIF section --- */ .landing-demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin-top: 0.5rem; } .landing-demo-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: border-color 0.2s, transform 0.2s; } .landing-demo-card:hover { border-color: rgba(79,195,247,0.4); transform: translateY(-2px); } .landing-demo-card img { width: 100%; display: block; border-bottom: 1px solid var(--border); background: #111; } .landing-demo-card-body { padding: 1rem 1.25rem; } .landing-demo-card-body h4 { font-size: 14px; font-weight: 600; color: var(--text-bright); margin-bottom: 4px; } .landing-demo-card-body p { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 0; } /* --- Footer --- */ .landing-footer { margin-top: auto; padding: 2rem; border-top: 1px solid var(--border); background: var(--bg-alt); } .landing-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* Advisory credit. Sits a step above the copyright line and a step below the links, because it is a real credential and not boilerplate, but it is also SCOPE-LIMITED and must not read like a headline endorsement of the whole platform. */ .landing-footer-advisor { font-size: 12px; color: var(--text-dim); margin: 0 0 8px; letter-spacing: .01em; } .landing-footer-copy { font-size: 12px; color: var(--text-dim); } .landing-footer-copy a { color: var(--text-dim); } .landing-footer-copy a:hover { color: #4fc3f7; } .landing-footer-citation { font-size: 11px; color: var(--text-dim); margin-top: 6px; opacity: 0.7; } .landing-footer-citation a { color: #81c784; text-decoration: none; } .landing-footer-citation a:hover { color: #a5d6a7; text-decoration: underline; } .landing-footer-toggle { display: none; } /* desktop: footer shows fully; the toggle is mobile-only */ /* FAQ Accordion */ .landing-faq-section { background: var(--bg-surface); } /* ── GDBS Free section ── */ .landing-free-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0 28px; } @media (max-width: 760px) { .landing-free-grid { grid-template-columns: 1fr; } } .landing-free-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; } .landing-free-card-header { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-bright); margin-bottom: 10px; } .landing-free-card-header i { font-size: 18px; } .landing-free-card p { font-size: 13px; color: var(--text-muted); line-height: 1.65; margin: 0; } .landing-free-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; align-items: center; } .landing-free-snippet { background: #0d1117; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; overflow: hidden; max-width: 680px; } .landing-free-snippet-label { padding: 8px 16px; font-size: 11px; color: #8b949e; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.07); font-family: var(--mono); } `, which is near-white in the flux light theme and rendered the code white-on-white. */ .landing-free-snippet pre { margin: 0; padding: 16px; overflow-x: auto; background: transparent; border: 0; border-radius: 0; } .landing-free-snippet code { font-family: var(--mono); font-size: 13px; color: #e6edf3; background: transparent; line-height: 1.6; } .landing-free-note { font-size: 12px; color: var(--text-dim); margin-top: 20px; } /* ── Try Live nav button ── */ .landing-btn-ghost-sm { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; background: rgba(79,195,247,0.08); color: #4fc3f7; border: 1px solid rgba(79,195,247,0.3); border-radius: 5px; font-size: 12px; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .landing-btn-ghost-sm:hover { background: rgba(79,195,247,0.15); border-color: #4fc3f7; } @media (max-width: 768px) { /* Hide connected status, Report and Print on mobile */ .topbar-center { display: none; } .topbar-left { min-width: 0; } .topbar-right { min-width: 0; gap: 6px; } #btn-global-report, #btn-print-view { display: none; } /* ── De-cram the topbar ──────────────────────────────────────────────── Everything (brand, product tabs, admin Share, 3D, tier badge, user chip) sat in one 36px row and overlapped into an unreadable blend. Product tabs go ICON-ONLY (the brand already names the product; the active tab keeps its highlight) and the nav SCROLLS instead of overflowing; the user chip drops its "User:" prefix and truncates the long email so nothing blends. */ .topbar { padding: 0 8px; gap: 4px; } .topbar-left { flex-shrink: 0; } .topbar-left .brand { font-size: 13px; } .product-tabs { margin-left: 4px; min-width: 0; flex-shrink: 1; overflow-x: auto; scrollbar-width: none; gap: 1px; } .product-tabs::-webkit-scrollbar { display: none; } .product-tab { padding: 0 9px; } .product-tab span { display: none; } /* icon-only tabs */ .topbar-right { flex-shrink: 0; gap: 4px; } .topbar-right .user-prefix { display: none; } /* drop the "User:" label */ #user-display { display: inline-block; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } #btn-view-3d { margin-right: 2px !important; } /* ── Collapsible landing footer ──────────────────────────────────────── The subscribe form + legal link list made a tall footer on phones. Collapse them behind a toggle so the footer is a compact strip (logo + button); tap to expand. */ .landing-footer-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 8px auto 0; background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 6px; padding: 8px 14px; font-size: 13px; font-family: inherit; cursor: pointer; } .landing-footer-toggle i { transition: transform 0.15s; } .landing-footer.footer-open .landing-footer-toggle i { transform: rotate(180deg); } .landing-footer-collapse { display: none; } .landing-footer.footer-open .landing-footer-collapse { display: block; } /* Charts fill the width on mobile; the vchart legend is moved below the plot (see vchart.js). */ .chart-wrap, .chart-wrap canvas { width: 100% !important; } /* ── Fly-up module navigation ────────────────────────────────────────── The 52px bottom bar crammed all ~20 modules across every tier into one scroll with no way to jump between Standard / Pro / HPC Lab. Replace it with a bottom-sheet: a single "Modules" button flies up a sheet with the STD / PRO / HPC tabs on top and the active tier's modules as big rows. */ .main-layout { flex-direction: column; } #mobile-nav-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; position: fixed; bottom: 0; left: 0; width: 100%; height: 52px; z-index: 60; background: var(--bg-alt); border: none; border-top: 1px solid var(--border); color: var(--accent); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; } #mobile-nav-toggle i { font-size: 16px; } #mobile-nav-backdrop { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 70; background: rgba(0,0,0,0.5); } #mobile-nav-backdrop.show { display: block; } /* the sidebar becomes the fly-up sheet */ .sidebar { position: fixed; left: 0; bottom: 0; width: 100%; height: auto; max-height: 78vh; flex-direction: column; overflow-y: auto; z-index: 80; background: var(--bg-alt); border: none; border-top: 1px solid var(--border); border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,0.5); transform: translateY(100%); transition: transform 0.28s ease; padding-bottom: 12px; } .sidebar.flyup-open { transform: translateY(0); } .sidebar-nav { flex-direction: column; flex: none; overflow: visible; } /* STD / PRO / HPC tabs as the sticky sheet header */ .tier-dots { display: flex; flex-direction: row; justify-content: center; gap: 8px; position: sticky; top: 0; z-index: 2; background: var(--bg-alt); padding: 14px 12px 10px; border-bottom: 1px solid var(--border); } .tier-dot { flex: 1; max-width: 110px; text-align: center; padding: 11px 8px; font-size: 13px; font-weight: 700; border-radius: 8px; } /* module rows */ .nav-item { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; width: 100%; padding: 14px 22px; font-size: 15px; text-align: left; border-left: 3px solid transparent; border-top: none; } .nav-item i { font-size: 18px; width: 24px; text-align: center; } .nav-item.active { border-left-color: var(--accent); border-top-color: transparent; background: var(--bg); } .nav-item-bottom { margin-top: 0; border-top: none; border-left: 3px solid transparent; } .nav-tier-section { display: none; } .nav-tier-section.active { display: flex; flex-direction: column; } /* ── Module sub-tab bars: icon-only on small screens ─────────────────── The flat tab rows (Molecular / Cosmos / Materials / Geophysics / Fluids / Quantum / Anomaly / Theory) ran off the right edge in portrait. Collapse each tab to its icon (the label is a bare text node, so font-size:0 on the button hides it while the icon keeps its own size) and let the row wrap, so every tab is visible without left-right scroll. The full label is set as a title (hover / long-press) by app.js setTabTitles(). */ .molecular-tabs, .cosmic-tabs, .materials-tabs, .geo-tabs, .fluids-tabs, .quantum-tabs, .tukey-tabs, .theory-tabs { flex-wrap: wrap; overflow-x: visible; justify-content: center; gap: 2px; padding: 6px 4px; } .mtab, .ctab, .mattab, .geotab, .fltab, .qtab, .tukeytab, .theory-tab { font-size: 0 !important; padding: 9px 12px; gap: 0; white-space: nowrap; } .mtab > i, .ctab > i, .mattab > i, .geotab > i, .fltab > i, .qtab > i, .tukeytab > i, .theory-tab > i { font-size: 17px !important; margin: 0; width: auto; } /* The ACTIVE sub-tab keeps its label so you always know which tool is running (icon-only tabs otherwise hide the selection on mobile - you can't tell what you're looking at). The active pill shows " Name"; the rest stay icons. */ .mtab.active, .ctab.active, .mattab.active, .geotab.active, .fltab.active, .qtab.active, .tukeytab.active, .theory-tab.active { font-size: 12px !important; gap: 6px; padding: 9px 14px; font-weight: 600; } .mtab.active > i, .ctab.active > i, .mattab.active > i, .geotab.active > i, .fltab.active > i, .qtab.active > i, .tukeytab.active > i, .theory-tab.active > i { font-size: 13px !important; } /* pad content above the fixed toggle bar */ .content-area, .plasma-panel, .module-panel, .pane-content, .detail-pane, .query-pane, .content, .view { padding-bottom: 60px; } /* Charts — ensure min size on small screens */ .chart-wrap { min-height: 200px; height: 220px; } canvas { min-height: 160px; min-width: 0; } .md-chart-cell { min-height: 180px; } .theory-subpanel canvas { min-height: 160px; } /* Landing nav hamburger */ .landing-hamburger { display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 4px; padding: 6px 10px; cursor: pointer; font-size: 16px; margin-left: 8px; } .landing-nav-links { display: none; } /* Keep the primary "Get Started" (signup) visible in the mobile top bar; Try Live / Sign In live in the hamburger menu. */ .landing-nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .landing-nav-actions .landing-btn-outline { display: none; } .landing-nav-actions .landing-btn-primary { display: inline-flex; align-items: center; } .landing-mobile-menu { display: none; flex-direction: column; background: var(--bg-panel); border-top: 1px solid var(--border); padding: 8px 16px 12px; } .landing-mobile-menu.open { display: flex; } .landing-mobile-menu .landing-nav-link { padding: 10px 4px; font-size: 14px; border-bottom: 1px solid var(--border-faint, rgba(255,255,255,0.05)); } .landing-mobile-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; } } @media (min-width: 769px) { .landing-hamburger { display: none; } .landing-mobile-menu { display: none !important; } } /* The dropdown primitives. These were authored in an inline