/* ========================================================================== BeLight Energy — critical.css Carregado no (bloqueante e leve): layers, tokens, reset, tipografia, layout, header e navegação visível acima da dobra. ========================================================================== */ @layer reset, tokens, base, layout, components, pages, utilities; /* -------------------------------------------------------------------------- Tipografia do Brand Book — alojada localmente (RGPD + performance) -------------------------------------------------------------------------- */ @font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../fonts/sora-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* -------------------------------------------------------------------------- @property — variáveis tipadas (animáveis e validadas pelo browser) -------------------------------------------------------------------------- */ @property --glow-angle { syntax: ""; inherits: false; initial-value: 0deg; } @property --num { syntax: ""; inherits: false; initial-value: 0; } @property --progress { syntax: ""; inherits: true; initial-value: 0; } @property --lift { syntax: ""; inherits: false; initial-value: 0px; } @property --ring { syntax: ""; inherits: false; initial-value: transparent; } /* -------------------------------------------------------------------------- Transições entre páginas (MPA) — CSS View Transitions -------------------------------------------------------------------------- */ @view-transition { navigation: auto; } @layer tokens { :root { /* Paleta do Brand Book */ --noite: #0E1B2C; --ambar: #F2A93B; --ambar-2: #F5B544; /* âmbar para fundo escuro */ --marfim: #F4F1EA; --ardosia: #5B6675; --branco: #FFFFFF; /* Um único conjunto de tokens semânticos; light-dark() evita duplicar o tema */ color-scheme: light dark; --bg: light-dark(var(--marfim), var(--noite)); --bg-alt: light-dark(color-mix(in oklab, var(--marfim) 60%, var(--branco)), color-mix(in oklab, var(--noite) 86%, var(--marfim))); --surface: light-dark(var(--branco), color-mix(in oklab, var(--noite) 90%, var(--marfim))); --surface-2: light-dark(color-mix(in oklab, var(--marfim) 55%, var(--branco)), color-mix(in oklab, var(--noite) 82%, var(--marfim))); --text: light-dark(var(--noite), var(--marfim)); --muted: light-dark(var(--ardosia), color-mix(in oklab, var(--marfim) 68%, var(--noite))); --line: light-dark(color-mix(in oklab, var(--noite) 11%, var(--marfim)), color-mix(in oklab, var(--marfim) 14%, var(--noite))); --accent: light-dark(var(--ambar), var(--ambar-2)); --accent-ink:var(--noite); /* texto sobre âmbar: contraste AAA */ --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent); --inverse: light-dark(var(--noite), color-mix(in oklab, var(--noite) 70%, black)); --on-inverse:var(--marfim); --success: light-dark(#1E7A4F, #5BCB94); --danger: light-dark(#B42318, #F97066); --focus: light-dark(#1B5FD0, #8AB4FF); /* Tipografia — Sora (títulos) · IBM Plex Sans (texto) */ --font-display: "Sora", ui-sans-serif, system-ui, sans-serif; --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; /* Escala fluida (clamp) — base 16px, razão ~1.25 */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --fs-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); --fs-3xl: clamp(1.875rem, 1.45rem + 1.9vw, 2.75rem); --fs-4xl: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); /* Espaçamento proporcional — unidade 4px */ --u: 0.25rem; --s-1: calc(var(--u) * 1); /* 4 */ --s-2: calc(var(--u) * 2); /* 8 */ --s-3: calc(var(--u) * 3); /* 12 */ --s-4: calc(var(--u) * 4); /* 16 */ --s-5: calc(var(--u) * 6); /* 24 */ --s-6: calc(var(--u) * 8); /* 32 */ --s-7: calc(var(--u) * 12); /* 48 */ --s-8: calc(var(--u) * 16); /* 64 */ --section: clamp(4rem, 2.6rem + 6vw, 7.5rem); --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem); --container: 75rem; /* Raios (proporcionais: card 16 → interno 12 → controlo 10 → chip 999) */ --r-sm: 0.625rem; --r-md: 0.75rem; --r-lg: 1rem; --r-xl: 1.5rem; --r-full: 999px; --shadow-sm: 0 1px 2px color-mix(in oklab, var(--noite) 8%, transparent); --shadow-md: 0 1px 2px color-mix(in oklab, var(--noite) 6%, transparent), 0 8px 24px -8px color-mix(in oklab, var(--noite) 18%, transparent); --shadow-lg: 0 2px 4px color-mix(in oklab, var(--noite) 6%, transparent), 0 24px 48px -16px color-mix(in oklab, var(--noite) 28%, transparent); --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: 160ms; --t: 280ms; --t-slow: 520ms; --header-h: 4.5rem; interpolate-size: allow-keywords; /* anima height:auto, details, etc. */ } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } } @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-5)); hanging-punctuation: first last; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { min-height: 100dvh; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } a { color: inherit; } p, h1, h2, h3, h4, h5, h6, li { overflow-wrap: break-word; } h1, h2, h3, h4 { text-wrap: balance; } p { text-wrap: pretty; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } [hidden] { display: none !important; } :target { scroll-margin-top: calc(var(--header-h) + var(--s-5)); } } @layer base { body { font-family: var(--font-body); font-size: var(--fs-md); color: var(--text); background: var(--bg); transition: background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease); } h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; color: var(--text); } h1 { font-size: var(--fs-4xl); } h2 { font-size: var(--fs-3xl); } h3 { font-size: var(--fs-xl); letter-spacing: -0.015em; } h4 { font-size: var(--fs-lg); letter-spacing: -0.01em; } small { font-size: var(--fs-xs); } strong { font-weight: 600; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; } i.bi { line-height: 1; display: inline-block; } } @layer layout { /* Centralização sem flex/grid: largura mínima + margin auto */ .container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; } .container--narrow { --container: 48rem; } .container--mid { --container: 62rem; } .section { padding-block: var(--section); } .section--tight { padding-block: calc(var(--section) * .6); } .section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); } .stack > * + * { margin-block-start: var(--stack, var(--s-4)); } .center { text-align: center; margin-inline: auto; } .center .cluster, .cluster.center { justify-content: center; } } @layer components { /* Skip link */ .skip-link { position: fixed; inset-block-start: var(--s-3); inset-inline-start: var(--s-3); z-index: 200; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; translate: 0 -200%; transition: translate var(--t) var(--ease); } .skip-link:focus-visible { translate: 0 0; } /* ---------- Logótipo ---------- */ .brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); line-height: 1; } /* Logótipo original: altura 2rem (acima do mínimo de 24px do manual) */ .brand__logo { display: block; block-size: 2rem; inline-size: auto; } .brand__mark { display: block; inline-size: auto; block-size: 1.2em; } .brand__stem, .brand__word { fill: currentColor; transition: fill var(--t-slow) var(--ease); } .brand__dot { fill: var(--accent); transition: fill var(--t-slow) var(--ease); } /* ---------- Header ---------- */ .site-header { position: sticky; inset-block-start: 0; z-index: 100; block-size: var(--header-h); background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-block-end: 1px solid transparent; view-transition-name: site-header; transition: background-color var(--t-slow) var(--ease), border-color var(--t) var(--ease); } /* Sombra do header conduzida pelo scroll — sem JS */ @supports (animation-timeline: scroll()) { .site-header { animation: header-elevate linear both; animation-timeline: scroll(root); animation-range: 0 120px; } @keyframes header-elevate { to { border-block-end-color: var(--line); box-shadow: var(--shadow-sm); } } } .site-header.is-scrolled { border-block-end-color: var(--line); } .header__inner { block-size: 100%; display: flex; align-items: center; gap: var(--s-5); } .header__actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-2); } /* ---------- Navegação desktop (nível 1) ---------- */ .nav { display: none; } .nav__list { display: flex; align-items: center; gap: var(--s-1); } .nav__link { display: inline-flex; align-items: center; gap: .35em; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500; color: var(--text); text-decoration: none; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .nav__link .bi { font-size: .7em; transition: rotate var(--t) var(--ease); } .nav__link:hover, .nav__link[aria-expanded="true"] { background: var(--surface-2); } .nav__link[aria-expanded="true"] .bi { rotate: 180deg; } .nav__link[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: var(--r-sm) var(--r-sm) 2px 2px; } /* ---------- Botões de ícone (tema, hambúrguer) ---------- */ .icon-btn { inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--r-md); display: inline-grid; place-items: center; color: var(--text); border: 1px solid var(--line); background: var(--surface); transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), scale var(--t-fast) var(--ease); } .icon-btn:hover { border-color: color-mix(in oklab, var(--text) 25%, var(--line)); } .icon-btn:active { scale: .94; } .theme-toggle .bi-moon-stars { display: none; } :root[data-theme="dark"] .theme-toggle .bi-sun { display: none; } :root[data-theme="dark"] .theme-toggle .bi-moon-stars { display: inline-block; } /* Hambúrguer animado (reversível por transição) */ .burger__box { position: relative; inline-size: 1.25rem; block-size: .875rem; } .burger__line { position: absolute; inset-inline: 0; block-size: 2px; border-radius: 2px; background: currentColor; transition: translate var(--t) var(--ease-out), rotate var(--t) var(--ease-out), opacity var(--t-fast) var(--ease), scale var(--t) var(--ease-out); } .burger__line:nth-child(1) { inset-block-start: 0; } .burger__line:nth-child(2) { inset-block-start: calc(50% - 1px); transform-origin: left; } .burger__line:nth-child(3) { inset-block-end: 0; } .burger[aria-expanded="true"] .burger__line:nth-child(1) { translate: 0 .375rem; rotate: 45deg; } .burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; scale: 0 1; } .burger[aria-expanded="true"] .burger__line:nth-child(3) { translate: 0 -.375rem; rotate: -45deg; } @media (min-width: 64em) { .nav { display: block; } .burger { display: none; } } /* ---------- Botões (usados acima da dobra) ---------- */ .btn { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--line); display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-block-size: 2.75rem; padding: 0 var(--s-5); border-radius: var(--r-sm); border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: var(--fs-sm); line-height: 1; text-decoration: none; white-space: nowrap; translate: 0 var(--lift); transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), --lift var(--t) var(--ease-out); } .btn:hover { --lift: -2px; box-shadow: var(--shadow-md); } .btn:active { --lift: 0px; box-shadow: none; } .btn--primary { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); --btn-bd: var(--accent); } .btn--primary:hover { --btn-bg: color-mix(in oklab, var(--accent) 88%, var(--noite)); } .btn--dark { --btn-bg: var(--text); --btn-fg: var(--bg); --btn-bd: var(--text); } .btn--ghost { --btn-bg: transparent; --btn-bd: transparent; } .btn--ghost:hover { --btn-bg: var(--surface-2); box-shadow: none; } .btn--lg { min-block-size: 3.25rem; padding-inline: var(--s-6); font-size: var(--fs-md); border-radius: var(--r-md); } .btn--block { inline-size: 100%; } .btn[disabled], .btn[aria-busy="true"] { opacity: .65; pointer-events: none; } .btn.header__cta { display: none; } @media (min-width: 64em) { .btn.header__cta { display: inline-flex; } } /* ---------- Eyebrow (motivo "● 01 · A MARCA" do brand book) ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: .65em; font-size: var(--fs-xs); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .eyebrow::before { content: ""; inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: var(--accent); flex: none; } .lead { font-size: var(--fs-lg); color: var(--muted); max-inline-size: 60ch; } /* ---------- Page hero partilhado (páginas internas) ---------- */ .page-hero { position: relative; padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); overflow: clip; isolation: isolate; } .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 3.5rem 3.5rem; mask-image: radial-gradient(ellipse 70% 80% at 80% 0%, #000 10%, transparent 70%); opacity: .6; } .page-hero h1 { max-inline-size: 20ch; margin-block: var(--s-4) var(--s-5); } .page-hero .lead { margin-block-end: var(--s-6); } .page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--muted); } .breadcrumbs li + li::before { content: "/"; margin-inline-end: var(--s-2); color: color-mix(in oklab, var(--muted) 50%, transparent); } .breadcrumbs a { text-decoration: none; } .breadcrumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .breadcrumbs + .eyebrow { margin-block-start: var(--s-6); } } /* Transição de páginas: header fixo, conteúdo cruza suavemente */ ::view-transition-old(root) { animation: 220ms var(--ease) both vt-fade-out; } ::view-transition-new(root) { animation: 380ms var(--ease-out) both vt-fade-in; } ::view-transition-group(site-header) { animation-duration: 0s; } @keyframes vt-fade-out { to { opacity: 0; translate: 0 -8px; } } @keyframes vt-fade-in { from { opacity: 0; translate: 0 12px; } } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }