/* ── Landing page scoped styles ──────────────────────────────────────────── All rules are gated on .pf-landing (added to by landing.js only when the sentinel .paoflow-landing element is present) so nothing here affects any other page. ──────────────────────────────────────────────────────────────────────── */ /* Add vertical padding for landing page */ .pf-landing .bd-main { padding: 3rem 0 8rem; } /* Centre and constrain the content column */ .pf-landing .bd-article-container { max-width: 840px; margin: 0 auto; padding: 0 1.5rem 4rem; } /* Hide the text title — replaced by the header SVG */ .pf-landing h1 { display: none !important; } /* Hero title */ .pf-landing .paoflow-landing, .pf-landing .paoflow-landing-hero { --pf-landing-copy-width: min(100%, 860px); max-width: var(--pf-landing-copy-width); margin-inline: auto; } .pf-landing .paoflow-landing-hero { --pf-landing-copy-width: min(100%, 840px); --pf-landing-header-align: center; text-align: var(--pf-landing-header-align); transform: translateX(2.0rem); } .pf-landing .paoflow-typewriter { --pf-title-color-start: #00853e; --pf-title-color-mid: #4ade80; --pf-title-color-end: #00853e; display: inline-block; width: min(100%, 5.41em); min-height: 1.05em; font-family: "Courier New", Courier, monospace; font-size: clamp(5.5rem, 15vw, 9.7rem); font-weight: 700; line-height: 1; letter-spacing: 0.1em; text-align: left; color: var(--pf-title-color-start); background: linear-gradient(90deg, var(--pf-title-color-start), var(--pf-title-color-mid), var(--pf-title-color-end)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 4px rgba(0, 133, 62, 0.95)) drop-shadow(0 0 12px rgba(74, 222, 128, 0.35)); } .pf-landing .paoflow-typewriter::after { content: ""; display: inline-block; width: 0.08em; height: 0.72em; margin-left: 0.08em; background: currentColor; vertical-align: -0.02em; } .pf-landing .paoflow-typewriter.is-typing::after { animation: pf-cursor-blink 0.8s steps(2, start) infinite; } .pf-landing .paoflow-typewriter.is-complete::after { opacity: 0; } @keyframes pf-cursor-blink { 50% { opacity: 0; } } .pf-landing .pf-landing-theme-toggle { display: none !important; } /* ── Cards ─────────────────────────────────────────────────────────────── */ .landing-card { border-radius: 1rem !important; transition: box-shadow 0.2s ease, transform 0.15s ease; } .landing-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14) !important; } /* Stack icon → title → description centred inside the card */ .landing-card .sd-card-body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 1.5rem 1.75rem; gap: 0.5rem; border-radius: 1rem; } .landing-card .sd-card-body p { margin: 0; } /* Hide prev/next page navigation */ .pf-landing .prev-next-area { display: none !important; } /* Restore original dark-mode color tokens for the landing page */ html[data-theme=dark] body.pf-landing, html:not([data-theme]) body.pf-landing { --pst-color-text-base: #b8dcb8; --pst-color-text-muted: #5a9a5a; --pst-color-heading: #00e040; --pst-color-table: #b8dcb8; --pst-color-on-surface: #c8e6c8; } /* Hide right sidebar (TOC) */ .pf-landing .bd-sidebar-secondary { display: none !important; } .tutorial-download-note { margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid var(--pst-color-border); background: color-mix(in srgb, var(--pst-color-surface) 90%, transparent); box-shadow: 0 6px 16px color-mix(in srgb, var(--pst-color-shadow) 58%, transparent); } .tutorial-download-note p { margin: 0.3rem 0; }