@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap'); /* * SaasBuilder Front-End - Core Layout & Resets */ /* Reset Global - App-Native Feel */ .saasbuilder-app *, .saasbuilder-app *::before, .saasbuilder-app *::after { box-sizing: border-box; } .saasbuilder-app { font-family: var(--font-primary); background-color: var(--color-bg); color: var(--color-text); line-height: 1.5; /* Plus condensé, style Apple */ letter-spacing: -0.01em; /* Apple-like tracking */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background-color 0.4s ease, color 0.4s ease; /* clip (et non hidden) : borne l'axe X sans transformer overflow-y en `auto`, ce qui créait un second conteneur de défilement vertical. */ overflow-x: clip; } /* Classe utilitaire pour prévenir le scroll global (utile pour les Bottom Sheets/Offcanvas) */ .saasbuilder-no-scroll { overflow: hidden; } /* * Sur les pages « canvas », le conteneur de défilement est le (pas le * body). Quand un overlay (drawer, offcanvas, bottom-sheet) demande le gel du * scroll via .saasbuilder-no-scroll sur le body, on verrouille AUSSI le * — sinon l'arrière-plan continue de défiler derrière le panneau. */ html.saasbuilder-canvas-root:has(> body.saasbuilder-no-scroll) { overflow: hidden; } /* Wrappers et Respiration (Whitespace) */ .saasbuilder-container { max-width: 1440px; margin-inline: auto; padding: 0 var(--spacing-md); } /* * Canvas plein écran : neutralise les styles html/body du thème WP actif * (marges, overflow-y: scroll) qui, cumulés au conteneur de l'app, créaient * plusieurs scrollbars. On établit UN seul conteneur de défilement (le body). */ html.saasbuilder-canvas-root, html.saasbuilder-canvas-root body.saasbuilder-canvas { margin: 0; padding: 0; } html.saasbuilder-canvas-root { overflow-x: hidden; overflow-y: auto; /* Le fond du viewport suit TOUJOURS le fond de l'app : même s'il restait un pixel d'espace sous le contenu, il serait de la couleur de l'app (aucune bande d'une autre couleur — ex. le fond du thème WP — ne peut apparaître). */ background-color: var(--color-bg); } /* * Sticky footer canonique : le BODY est la colonne flex pleine hauteur et * l'app grandit pour l'occuper entièrement. Le footer, dernier enfant de * l'app poussé par le
(flex:1), est donc toujours collé au bas du * viewport — zéro espace résiduel sous le footer, quel que soit le volume de * contenu de la page. */ html.saasbuilder-canvas-root body.saasbuilder-canvas { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow: visible; background-color: var(--color-bg); } body.saasbuilder-canvas .saasbuilder-app { flex: 1 0 auto; display: flex; flex-direction: column; /* Pas de min-height ici : c'est le body qui impose la pleine hauteur. */ min-height: 0; } body.saasbuilder-canvas .saasbuilder-main-content { flex: 1 0 auto; /* Colonne flex : le contenu (ex. écran d'auth) peut remplir/centrer dans l'espace restant entre header et footer, sans hack en vh. */ display: flex; flex-direction: column; }