/** * Largura mínima do site = telemóvel pequeno (ex.: ~320px CSS, iPhone SE). * Garante layout utilizável; em viewports mais estreitas o browser permite scroll horizontal. */ :root { --site-min-width: 0px; /* Largura máxima por defeito da página (conteúdo centrado). Alinhado ao cabeçalho global (--max-w em platform-global-chrome.css). */ --site-page-max-width: 1920px; /* Referência para media queries: mobile ≤480, tablet 481–1023, desktop 1024–1919, ≥1920 workstation */ --site-breakpoint-tablet-max: 1023px; --site-breakpoint-desktop-min: 1024px; --site-fluid-font-min: 15px; --site-fluid-font-max: 17px; --site-fluid-scale: clamp(0.92, 0.88 + 0.35vw, 1); --ui-zoom-text: 1; --ui-zoom-control: 1; --ui-zoom-media: 1.015; --ui-space-fluid: clamp(0.55rem, 0.4rem + 0.9vw, 1rem); } @media (max-width: 1180px) { :root { --ui-zoom-text: 0.98; --ui-zoom-control: 0.98; --ui-zoom-media: 1.01; } } @media (max-width: 640px) { :root { --ui-zoom-text: 0.95; --ui-zoom-control: 0.94; --ui-zoom-media: 1; } } @media (min-width: 1440px) { :root { --ui-zoom-text: 1.04; --ui-zoom-control: 1.03; --ui-zoom-media: 1.03; } } html { min-width: var(--site-min-width); max-width: 100%; overflow-x: clip; font-size: clamp(var(--site-fluid-font-min), 14px + 0.18vw, var(--site-fluid-font-max)); text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { min-width: var(--site-min-width); max-width: 100%; font-size: calc(1rem * var(--ui-zoom-text)); } img, picture, video, canvas, svg { max-width: 100%; } input, select, textarea, button { font-size: calc(1rem * var(--ui-zoom-control)); } input::placeholder, textarea::placeholder { font-size: 0.96em; letter-spacing: 0.01em; } /** * Bloco principal centrado até 1920px (útil em páginas simples). * O site público com chrome usa .wrap / main já limitados a var(--max-w). */ .site-page-shell { width: 100%; max-width: min(100%, var(--site-page-max-width)); margin-left: auto; margin-right: auto; box-sizing: border-box; } /** * Tipografia fluida (regra geral opcional): acrescente class="site-fluid-type" em . * O corpo do texto escala entre ~14px e ~18px conforme a largura do viewport (até monitores largos). */ html.site-fluid-type { font-size: clamp(14px, 11px + 0.55vw, 18px); }