/* ───────────────────────────────────────────────────────────── * G–ACADEMY · DESIGN TOKENS * Brand Book v1.1 · April 2026 * * Use these CSS variables for every G·A surface. Never hardcode hex. * ───────────────────────────────────────────────────────────── */ /* ── FONTS ─────────────────────────────────────────────────── */ /* DM Sans + DM Serif Display load from Google Fonts (OFL, no license issue). The @import below pulls their @font-face rules into the stylesheet closure so the system is self-describing; it also means linking styles.css alone is enough — no extra tags needed. IMPORTANT: the italic axis (ital) is included — accent words are set in GREEN ITALIC, the brand's signature emphasis (see §Type). @import must precede the @font-face blocks below, per the CSS spec. */ @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500;1,9..40,600&family=DM+Serif+Display:ital@0;1&display=swap"); @font-face { font-family: "Fliege Mono"; src: url("fonts/FliegeMono-VF.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /* Static fallbacks (kept for tools that don't load variable fonts) */ @font-face { font-family: "Fliege Mono Static"; src: url("fonts/FliegeMono-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Fliege Mono Static"; src: url("fonts/FliegeMono-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; } @font-face { font-family: "Fliege Mono Static"; src: url("fonts/FliegeMono-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; } @font-face { font-family: "Fliege Mono Static"; src: url("fonts/FliegeMono-Light.otf") format("opentype"); font-weight: 300; font-display: swap; } :root { /* ── COLOR · PRIMARY ─────────────────────────────────────── */ --ink: #0E0E0C; /* Texto, traços, fundos escuros */ --green: #A8D55C; /* Verde-limão da marca — destaque, ponte, fills, acentos */ --paper: #F4F4F1; /* Fundo padrão (off-white quente) */ /* ── COLOR · SUPPORT ─────────────────────────────────────── */ --green-bright: #B4FE51; /* Verde vivo do LOGO/símbolo — só na marca */ --green-deep: #74A538; /* Verde p/ texto pequeno sobre claro (legibilidade) */ --green-ink: #2E3A18; /* Texto escuro sobre superfície verde */ --purple: #5C5A9C; /* Edições especiais */ --ink-2: #5C5C56; /* Texto secundário */ --paper-2: #E8E8E5; /* Superfície neutra */ --paper-3: #D6D6D2; /* Divisores */ /* ── COLOR · DERIVED INK SCALE ───────────────────────────── */ --ink-3: rgba(14, 14, 12, 0.62); /* Texto terciário */ --ink-4: rgba(14, 14, 12, 0.40); /* Captions sutis */ --ink-on-dark:#F2F2F0; /* ── COLOR · RULES (linhas finas) ────────────────────────── */ --rule: rgba(14, 14, 12, 0.14); --rule-strong: rgba(14, 14, 12, 0.32); --rule-on-dark:rgba(242, 242, 240, 0.18); /* ── COLOR · SEMANTIC ────────────────────────────────────── */ --fg-1: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --fg-4: var(--ink-4); --bg-1: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3); --bg-inverse: var(--ink); --accent: var(--green); --accent-strong: var(--green-deep); --accent-alt: var(--purple); --on-accent: var(--green-ink); /* text color on green fills */ /* ── TYPE · FAMILIES ─────────────────────────────────────── */ --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* @kind font */ --mono: "Fliege Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* @kind font */ --serif: "DM Serif Display", ui-serif, Georgia, serif; /* @kind font */ /* ── TYPE · SCALE (matches Brand Book §04.3) ─────────────── */ /* Display is reserved for rare covers. Day-to-day titles use the moderate --fs-title scale at weight 400–500, sentence case, with a GREEN ITALIC accent word — that is the house style of the decks. fs = font-size · lh = line-height · tk = letter-spacing (tracking). */ --fs-display: 104px; /* @kind font */ --lh-display: 0.96; /* @kind font */ --tk-display: -0.035em;/* @kind font */ --fs-title: 56px; /* @kind font */ --lh-title: 1.04; /* @kind font */ --tk-title: -0.02em; /* @kind font */ --fs-h1: 48px; /* @kind font */ --lh-h1: 1.05; /* @kind font */ --tk-h1: -0.02em; /* @kind font */ --fs-h2: 34px; /* @kind font */ --lh-h2: 1.12; /* @kind font */ --tk-h2: -0.015em;/* @kind font */ --fs-h3: 22px; /* @kind font */ --lh-h3: 1.25; /* @kind font */ --tk-h3: 0; /* @kind font */ --fs-lead: 21px; /* @kind font */ --lh-lead: 1.45; /* @kind font */ --fs-body: 16px; /* @kind font */ --lh-body: 1.60; /* @kind font */ --fs-small: 14px; /* @kind font */ --lh-small: 1.50; /* @kind font */ --fs-caption: 11px; /* @kind font */ --lh-caption: 1.50; /* @kind font */ --tk-caption: 0.05em; /* @kind font */ /* ── LAYOUT ──────────────────────────────────────────────── */ --container: 1240px; /* @kind spacing */ --gutter: 32px; /* @kind spacing */ --col: 12; /* @kind other */ --col-gap: 24px; /* @kind spacing */ /* ── SPACING (8pt scale) ─────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10:128px; /* ── RADII (soft-rounded cards) ──────────────────────────── */ /* The decks round cards, photos, chips and highlight boxes. Keep hairline inputs near-square; cards get a comfortable radius. */ --r-0: 0; /* @kind radius */ --r-1: 4px; /* inputs, focus ring */ --r-2: 8px; /* small boxes, tags */ --r-box: 12px; /* highlight & date boxes */ --r-card: 14px; /* cards, panels, price/spec/instructor cards */ --r-pill: 999px; /* chips, status pills */ /* ── STROKE (the bridge) ─────────────────────────────────── */ --stroke-hair: 1px; /* @kind spacing */ --stroke-thin: 2px; /* @kind spacing */ --stroke-bridge:6px; /* @kind spacing */ /* ── MOTION ──────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur-med: 240ms; /* @kind other */ --dur-slow: 420ms; /* @kind other */ } /* ── DARK / INK SURFACE ───────────────────────────────────── Apply to a wrapper, not :root — G·A is light by default. */ .surface-ink, [data-surface="ink"] { --bg-1: var(--ink); --bg-2: #1A1A17; --bg-3: #25241F; --fg-1: var(--paper); --fg-2: rgba(242,242,240,0.72); --fg-3: rgba(242,242,240,0.50); --fg-4: rgba(242,242,240,0.32); --rule: var(--rule-on-dark); background: var(--bg-1); color: var(--fg-1); } /* ── SEMANTIC TYPE CLASSES ────────────────────────────────── Use as utilities (class="t-display") or by tag. */ html, body { font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); background: var(--bg-1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .t-display, .ga-display { font-family: var(--sans); font-weight: 400; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tk-display); text-wrap: balance; } /* t-title — the everyday slide / section title (use instead of giant display). Regular-to-medium weight, sentence case, with a GREEN ITALIC accent word inside (wrap that word in or .ga-accent). */ .t-title, .ga-title { font-family: var(--sans); font-weight: 500; font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--tk-title); text-wrap: balance; margin: 0; } .t-h1, h1 { font-family: var(--sans); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tk-h1); text-wrap: balance; margin: 0; } .t-h2, h2 { font-family: var(--sans); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tk-h2); text-wrap: balance; margin: 0; } .t-h3, h3 { font-family: var(--sans); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tk-h3); margin: 0; } .t-lead { font-family: var(--sans); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--fg-2); text-wrap: pretty; max-width: 62ch; } .t-body, p { font-family: var(--sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); max-width: 62ch; text-wrap: pretty; margin: 0; } .t-small { font-family: var(--sans); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-3); } /* mono · technical paratext (eyebrows, IDs, datelines, captions) */ .t-mono, .t-caption, .t-eyebrow, code { font-family: var(--mono); font-weight: 400; font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--tk-caption); text-transform: uppercase; color: var(--fg-2); } .t-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-1); } /* Eyebrow leading dash is GREEN — the brand's punctuation mark. */ .t-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); flex: none; } /* ── ACCENT EMPHASIS — the signature move ─────────────────── Accent words inside a title are GREEN + ITALIC. Use inside any title (h1/h2/.t-title/.t-display) or the .ga-accent class. */ .t-display em, .t-title em, .ga-title em, h1 em, h2 em, .ga-accent { font-style: italic; color: var(--accent); font-weight: inherit; } /* On ink surfaces the accent stays vivid (it reads well on dark). */ .surface-ink em, [data-surface="ink"] em, .surface-ink .ga-accent, [data-surface="ink"] .ga-accent { color: var(--green); } /* Inline keyword highlight in body copy — green, upright. On light text use the deeper green for legibility at body size. */ .hl, .ga-hl { color: var(--green-deep); font-weight: 500; } .surface-ink .hl, [data-surface="ink"] .hl { color: var(--green); } /* ── SURFACES ─────────────────────────────────────── Green fills ARE allowed (cards, callouts, date boxes, chips) with ink text — just never behind long body paragraphs. */ .surface-green, [data-surface="green"] { background: var(--green); color: var(--green-ink); } .surface-green .t-eyebrow, [data-surface="green"] .t-eyebrow, .surface-green .t-mono, [data-surface="green"] .t-mono { color: var(--green-ink); } .surface-green .t-eyebrow::before, [data-surface="green"] .t-eyebrow::before { background: var(--green-ink); } /* ── CARD ─────────────────────────────────────────── Soft-rounded, flat. Variants: default (paper, hairline), ink, green. */ .ga-card { border-radius: var(--r-card); padding: var(--space-6); background: var(--bg-1); border: 1px solid var(--rule); } .ga-card--ink { background: var(--ink); color: var(--paper); border-color: transparent; } .ga-card--green { background: var(--green); color: var(--green-ink); border-color: transparent; } /* ── CHIP / TAG — mono caps pill ───────────────────────── */ .ga-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: var(--tk-caption); text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); color: var(--fg-2); } .ga-chip--green { background: var(--green); color: var(--green-ink); border-color: transparent; } /* ── SPEC STRIP — mono label + value, 2×2 / 4-up ──────────── e.g. CARGA HORÁRIA / 4 horas · FORMATO / presencial */ .ga-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); } .ga-spec__label { font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: var(--tk-caption); text-transform: uppercase; color: var(--fg-3); margin-bottom: 4px; } .ga-spec__value { font-weight: 500; } /* ── GREEN BULLET / CHECK LISTS ─────────────────────── */ .ga-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .ga-list li { position: relative; padding-left: 26px; color: var(--fg-2); } .ga-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--green); } .ga-list--check li::before { content: "✓"; top: 0; left: 0; width: auto; height: auto; background: none; color: var(--green-deep); font-weight: 700; } .surface-ink .ga-list--check li::before, [data-surface="ink"] .ga-list--check li::before { color: var(--green); } /* The horizontal bridge — derived from the monogram */ .bridge { display: block; height: var(--stroke-bridge); background: var(--accent); width: 100%; } .bridge--ink { background: var(--ink); } .bridge--thin { height: 2px; } .bridge--hair { height: 1px; background: var(--rule-strong); } /* Generic editorial container */ .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }