/* ============================================================ Spanish flag motif — site-wide act break Spain's flag is red / gold / red horizontal bands with the gold band double height, which happens to be exactly this brand's two colours: the reference reads without importing a foreign palette or dropping a literal flag graphic onto the page. Used to separate the narrative movements of a page (what it is → how it works → why us → next step), NOT as decoration sprinkled between every section — one or two per page, at real act breaks. Performance: a 10px strip with one compositor-friendly background-position animation. No layout, nothing expensive to paint, and switched off completely under prefers-reduced-motion. Lives here rather than in page.css because page.css only loads on the inner pages and the homepage uses this too. ============================================================ */ .hb-flag { position: relative; height: 10px; overflow: hidden; background: linear-gradient(180deg, var(--red) 0 25%, var(--gold) 25% 75%, var(--red) 75% 100%); } .hb-flag::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 42%, #fff9 50%, transparent 58%); background-size: 260% 100%; animation: hb-flag-sheen 7s linear infinite; will-change: background-position; } @keyframes hb-flag-sheen { from { background-position: -60% 0; } to { background-position: 160% 0; } } @media (prefers-reduced-motion: reduce) { .hb-flag::after { animation: none; } } /* ============================================================ Hablemos — site-wide footer ============================================================ */ .hb-footer { position: relative; z-index: 3; background: var(--ink); color: var(--cream); /* Same left edge as the nav above and every section between. Deliberately quieter than it was: the footer is a sitemap and a legal line, not a final act — it had a 96px lead-in and body-size links, which gave it the presence of a content section. */ padding: var(--hb-s5) var(--hb-inset) var(--hb-s3); } .hb-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 4vw; padding-bottom: var(--hb-s4); border-bottom: 1px solid #f7f5f01f; } /* The footer reuses .hb-nav__logo for its wordmark, and main.css loads AFTER site.css, so `.hb-nav__logo .hb-wordmark { font-size: 26px }` was winning here on source order at equal specificity — the footer logo rendered at the same size as the header's. Scoping through .hb-footer__brand adds the class that breaks the tie, so the footer signature stays a signature and not a second masthead. */ .hb-footer .hb-footer__brand .hb-wordmark { color: var(--gold); font-size: 20px; } .hb-footer .hb-footer__brand .hb-wordmark i { color: var(--cream); } .hb-footer .hb-footer__brand .hb-tagline { color: var(--cream); opacity: .7; } .hb-footer .hb-wordmark { color: var(--gold); } .hb-footer .hb-wordmark i { color: var(--cream); } .hb-footer .hb-tagline { color: var(--cream); opacity: .7; } /* The footer is on every page, so its own private type scale (15px links, 12px base line, 13px social) was the most-repeated inconsistency on the site. It now uses the same tokens as everything else: body text at --hb-text, genuinely secondary lines at --hb-text-sm. */ .hb-footer__claim { margin: var(--hb-s3) 0 0; font-family: 'Franie', Arial; font-style: italic; font-size: var(--hb-text-sm); line-height: 1.55; opacity: .6; max-width: 28ch; } .hb-footer__links { display: flex; flex-direction: column; gap: var(--hb-s2); } .hb-footer__links a { font-size: var(--hb-text-sm); opacity: .68; transition: opacity .25s ease, transform .25s ease; display: inline-block; } .hb-footer__links a:hover { opacity: 1; transform: translateX(4px); } .hb-footer__contact { display: flex; flex-direction: column; gap: var(--hb-s2); font-size: var(--hb-text-sm); } .hb-footer__contact a { opacity: .9; } .hb-footer__contact a:hover { opacity: 1; text-decoration: underline; } .hb-footer__contact span { opacity: .65; } .hb-footer__contact .hb-footer__phone-note { display: block; font-size: 12px; opacity: .55; margin-top: -6px; } /* 40px boxes, not the 22px icon's own size — a touch target, not just a glyph. Sits in the same min-height:44px mobile rule as the footer's text links (below) without needing its own width override there. */ .hb-footer__social { display: flex; gap: var(--hb-s1); margin: var(--hb-s2) calc(var(--hb-s1) * -1) 0; } .hb-footer__social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; opacity: .75; transition: opacity .2s ease; } .hb-footer__social a:hover { opacity: 1; } .hb-footer__social svg { width: 18px; height: 18px; } /* Legal line — the one place a smaller size has a clear reason, so it takes the scale's small step rather than an ad-hoc 12px. */ /* Copyright line and the legal links share this row. The links carry their own opacity rather than inheriting the row's .42, because Politica de Privacidade, Termos e Condicoes and the Livro de Reclamacoes have to stay legible — they are legal obligations, not fine print to be hidden. */ .hb-footer__bottom { padding-top: var(--hb-s3); font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hb-s2) var(--hb-s4); } .hb-footer__bottom > span { opacity: .42; } .hb-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--hb-s2) var(--hb-s3); } .hb-footer__legal-links a { opacity: .62; transition: opacity .25s ease; } .hb-footer__legal-links a:hover, .hb-footer__legal-links a:focus-visible { opacity: 1; } @media (max-width: 760px) { /* Measured before touching anything: 64px of top padding, then gaps of 56 / 40 / 41 between four blocks, on a footer already 858px tall. The 44px touch rows are not negotiable, so the room has to come from the rhythm between blocks — which was set for a desktop four-column layout and simply carried over. */ .hb-footer { padding: var(--hb-s4) var(--hb-inset) var(--hb-s3); } .hb-footer__top { grid-template-columns: 1fr 1fr; row-gap: var(--hb-s3); column-gap: var(--hb-s3); } .hb-footer__brand { grid-column: 1 / -1; } /* The contact block holds an email address, which does not fit in half of a 375px screen without breaking mid-word. */ .hb-footer__contact { grid-column: 1 / -1; } .hb-footer__claim { margin: var(--hb-s2) 0 0; } /* The legal block measured 238px — taller than the sitemap above it — because four 44px rows stacked almost one per line. Dropping the size a step lets two fit per row without ever going below the 44px target, which stays. */ .hb-footer__legal-links { gap: 0 var(--hb-s2); } .hb-footer__legal-links a, .hb-footer__legal-links button, .hb-ck__reabrir { font-size: 11px; } .hb-footer__bottom { padding-top: var(--hb-s2); gap: 0; } /* Stacked on a phone so neither the copyright nor the legal links get squeezed to two words per line. */ .hb-footer__bottom { flex-direction: column; align-items: flex-start; } } /* ============================================================ Hablemos — real brand type + logo (from Brand_guidelines.pdf) Amatry = wordmark + all headings. Franie = body/UI text. WOFF2 FIRST, .otf as fallback. The fonts were the heaviest thing on the site by a distance — 333KB of .otf, served with no compression at all (the server compresses CSS/JS but not font files), against roughly 40KB for the whole GSAP + Lenis stack. Browsers take the first `src` format they support, so anything from the last decade downloads the WOFF2 and never touches the .otf; the .otf entries stay purely as a safety net. Same glyphs, 47% smaller: 333KB → 177KB across all six faces, and 115KB for the four that a page actually uses. ============================================================ */ @font-face { font-family: 'Amatry'; src: url('../fonts/Amatry.woff2') format('woff2'), url('../fonts/Amatry.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } /* Franie Light (300) and SemiLight (350) are declared for completeness but no rule currently asks for them, so browsers never fetch them — they cost nothing at runtime. Left in place so a future `font-weight: 300` just works rather than silently synthesising. */ @font-face { font-family: 'Franie'; src: url('../fonts/Franie-Light.woff2') format('woff2'), url('../fonts/Franie-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Franie'; src: url('../fonts/Franie-SemiLight.woff2') format('woff2'), url('../fonts/Franie-SemiLight.otf') format('opentype'); font-weight: 350; font-style: normal; font-display: swap; } @font-face { font-family: 'Franie'; src: url('../fonts/Franie-Regular.woff2') format('woff2'), url('../fonts/Franie-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Franie'; src: url('../fonts/Franie-SemiBold.woff2') format('woff2'), url('../fonts/Franie-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Franie'; src: url('../fonts/Franie-Bold.woff2') format('woff2'), url('../fonts/Franie-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } h1, h2, h3, h4, h5, h6, .hb-wordmark, .hb-heading { font-family: 'Amatry', Arial, sans-serif; font-weight: 400; } .hb-wordmark { color: var(--red); letter-spacing: -.01em; white-space: nowrap; } .hb-wordmark i { font-style: normal; color: var(--gold); } .hb-tagline { display: block; font: 600 .62em/1 'Franie', Arial, sans-serif; text-transform: uppercase; letter-spacing: .16em; color: var(--red); } /* ============================================================ Hablemos — sticky theme swap (site-wide, briefing pattern #9) --chrome-surface/--chrome-ink swap as ScrollTrigger crosses each section's data-theme. ============================================================ */ :root { --chrome-surface: var(--cream); --chrome-ink: var(--ink); } body[data-theme="gold"] { --chrome-surface: var(--gold); --chrome-ink: var(--ink); } body[data-theme="red"] { --chrome-surface: var(--red); --chrome-ink: var(--cream); } body[data-theme="neutral"] { --chrome-surface: var(--cream); --chrome-ink: var(--ink); } /* The dark surface was missing from this map, which is why every dark section on the site was tagged data-theme="neutral" — the only value left — and then painted the cursor in --ink ON --ink. Measured contrast 1.0: the cursor was not dim there, it was invisible, and it affected the footer, the homepage card carousel, every .hb-page2__scene, every plain .hb-page2__path-step and every plain .hb-timeline__chapter. */ body[data-theme="ink"] { --chrome-surface: var(--ink); --chrome-ink: var(--cream); } /* O menu cobre o ecra inteiro em bordo, mas nao e uma seccao: nenhum ScrollTrigger o anuncia, por isso o cursor continuava a usar o tema da banda que ficou por baixo. Aberto sobre uma seccao creme dava ink sobre bordo -- contraste 2.4, o cursor quase desaparecia no proprio menu. Aberto, o menu E a superficie, e a superficie e sempre a mesma. */ body.hb-menu-open { --chrome-surface: var(--red); --chrome-ink: var(--cream); } /* ============================================================ Hablemos — desktop nav (site-wide) Normal, always-visible header links. Printed inside .hb-nav (hablemos_render_nav_links(), functions.php) on every page, right after the logo — margin-left:auto pushes it to the flex row's end. Below 1200px ten items no longer fit on one line, so this hides and the fullscreen hamburger menu below takes over instead. */ /* margin-left:auto only has room to push once the row has actual slack. Past ~1650px the gap/font clamps below both hit their ceiling, so the row's own content stops growing while .hb-nav's padding keeps expanding to hold the page's 1240px-centred content — which left this margin stuck at ~17px on any screen from a 1920px monitor up, reading as "Sobre nós glued to the logo". Lower ceilings (was 52px/15px) keep the row narrower past that point on purpose, so there's real space left for this margin to actually push into. */ .hb-nav-links { margin-left: auto; display: flex; align-items: center; gap: clamp(24px, 2.6vw, 40px); } .hb-nav-links__item { position: relative; display: flex; align-items: center; } .hb-nav-links a { font: 600 clamp(12px, .9vw, 14px)/1 'Franie', Arial, sans-serif; color: var(--ink, var(--k)); white-space: nowrap; transition: color .2s ease; } .hb-nav-links a:hover, .hb-nav-links a:focus-visible { color: var(--red); } /* Cursos ▾ Horários — a submenu only where one page is really the timetable for the other, not bolted onto items with nothing to nest. Hover/focus-within, no JS: the trigger is a real link to /cursos/ either way, so a click always goes somewhere even before the panel has opened. */ .hb-nav-links__item--has-sub > a { display: inline-flex; align-items: center; gap: 5px; } .hb-nav-links__item--has-sub > a::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform .2s ease; } .hb-nav-links__item--has-sub:hover > a::after, .hb-nav-links__item--has-sub:focus-within > a::after { transform: rotate(225deg); margin-top: 3px; } .hb-nav-links__sub { position: absolute; top: 100%; left: 0; margin-top: 14px; min-width: 150px; background: var(--cream, var(--c)); border: 1px solid currentColor; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .hb-nav-links__item--has-sub:hover .hb-nav-links__sub, .hb-nav-links__item--has-sub:focus-within .hb-nav-links__sub { opacity: 1; visibility: visible; transform: translateY(0); } .hb-nav-links__sub a { padding: 7px 12px; border-radius: 7px; color: var(--ink, var(--k)); } .hb-nav-links__sub a:hover, .hb-nav-links__sub a:focus-visible { background: color-mix(in srgb, currentColor 10%, transparent); color: var(--red); } /* Ticket Educação / Contactos — the two links that are an action, not a page to read, set apart as pill buttons instead of plain text. */ .hb-nav-links__item--btn a { padding: 8px 18px; border: 1.5px solid var(--red); border-radius: 999px; color: var(--red); } .hb-nav-links__item--btn a:hover, .hb-nav-links__item--btn a:focus-visible { background: var(--red); color: var(--cream, var(--c)); } @media (max-width: 1199px) { .hb-nav-links { display: none; } } /* ============================================================ Hablemos — fullscreen menu (tablet/mobile, briefing pattern #12) Below 1200px, where the horizontal .hb-nav-links above has no room. ============================================================ */ .hb-menu-toggle { position: fixed; z-index: 10001; /* Vertically centred against the 82px nav, and a guaranteed 44x44 hit area. On a phone the "Menu"/"Fechar" label is hidden and only the icon remains, which measured 44x18 — a target a thumb misses. The label was also sitting 11px above the nav's own centre line. */ top: calc((var(--hb-nav-h) - 44px) / 2); right: var(--hb-inset-fixed); min-width: 44px; min-height: 44px; background: none; border: none; padding: 8px; /* Horizontal only. The negative margin existed to give the icon an 8px hit halo without moving it; the min-height above now provides the hit area, and keeping it on the vertical axis pulled the button 8px above the nav's centre line. */ margin: 0 -8px 0 0; cursor: pointer; display: flex; align-items: center; justify-content: flex-end; gap: 9px; font: 700 11px/1 'Franie', Arial; text-transform: uppercase; letter-spacing: .12em; color: var(--ink); } /* Must come AFTER the base rule above — equal specificity, so source order decides, and a min-width override placed earlier in the file loses to the unconditional display:flex it's trying to undo. */ @media (min-width: 1200px) { .hb-menu-toggle { display: none; } } .hb-menu-toggle__label--close { display: none; } body.hb-menu-open .hb-menu-toggle__label--open { display: none; } body.hb-menu-open .hb-menu-toggle__label--close { display: block; } .hb-menu-toggle i { position: relative; width: 28px; height: 2px; background: currentColor; animation: hb-menu-bars 1.4s ease-in-out infinite alternate; transition: transform .35s ease, width .35s ease; pointer-events: none; } .hb-menu-toggle i::after { content: ""; position: absolute; right: 0; top: 6px; width: 19px; height: 2px; background: currentColor; transition: transform .35s ease, top .35s ease, width .35s ease; } @keyframes hb-menu-bars { to { width: 18px; } } body.hb-menu-open .hb-menu-toggle { color: var(--gold, #d3ac6e); } body.hb-menu-open .hb-menu-toggle i { animation: none; width: 22px; transform: rotate(45deg); } body.hb-menu-open .hb-menu-toggle i::after { width: 22px; top: 0; transform: rotate(-45deg); } /* ============================================================ Floating WhatsApp button — every page, bottom-right. Rendered on wp_footer (functions.php: hablemos_render_whatsapp_float), so it lives outside [data-barba="wrapper"] like the menu toggle and the curtain above/below it, and needs no per-page markup. z-index sits well under the menu/curtain's 10000 on purpose: both are opaque full-viewport overlays, so the button should — and does — disappear under them rather than float on top mid-transition or mid-menu. Brand green, not the site's own bordô/gold: this is a recognisable third-party affordance (people look for the green bubble), not a piece of the ¡Hablemos! identity. */ .hb-wa-float { position: fixed; right: var(--hb-s3); bottom: var(--hb-s3); z-index: 500; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); transition: transform .25s ease; } .hb-wa-float svg { width: 30px; height: 30px; } @media (hover: hover) { .hb-wa-float:hover { transform: scale(1.08); } } @media (max-width: 600px) { .hb-wa-float { right: var(--hb-s2); bottom: var(--hb-s2); width: 50px; height: 50px; } .hb-wa-float svg { width: 26px; height: 26px; } } .hb-menu { position: fixed; inset: 0; z-index: 10000; background: var(--red, #a53047); color: var(--gold, #d3ac6e); clip-path: inset(0% 0% 100% 0%); transition: clip-path .8s cubic-bezier(.77, 0, .18, 1); padding: 10vh 4vw 4vh; display: flex; align-items: center; overflow-y: auto; pointer-events: none; } body.hb-menu-open .hb-menu { pointer-events: auto; clip-path: inset(0% 0% 0% 0%); } .hb-menu__links { display: grid; grid-template-columns: repeat(2, auto); column-gap: 5vw; row-gap: 1vh; margin: auto 0; } .hb-menu__links a { font-family: 'Amatry', Arial, sans-serif; font-size: clamp(2rem, 4.6vw, 4rem); font-weight: 400; line-height: 1.15; /* These measured 35px tall on a phone — the type is big but the box around it was not. Padding lifts every link past 44px without touching the type or the baseline the punctuation marks sit on. */ padding-block: 5px; min-height: 44px; letter-spacing: -.02em; display: flex; align-items: baseline; color: var(--gold, #d3ac6e); } /* A discreet rule under every link — separates the items in the grid without competing with the big type. Low-opacity cream on the red ground, not currentColor, so it stays quiet even on hover once the link itself turns cream (below). */ .hb-menu__links a { border-bottom: 1px solid rgba(247, 245, 240, .16); } /* The entrance stagger (menu.js) animates opacity/transform via GSAP — a CSS transition on those same properties would fight it while it's running, so the hover transition only switches on once menu.js marks the entrance done (.is-settled). Reduced-motion / no-GSAP opens add that class immediately, so hover still works with no JS animation. */ .hb-menu.is-settled .hb-menu__links a { transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .35s ease, color .35s ease; } .hb-menu.is-settled .hb-menu__links:hover a { opacity: .4; } .hb-menu.is-settled .hb-menu__links a:hover, .hb-menu.is-settled .hb-menu__links a:focus-visible { opacity: 1; color: var(--cream, #f7f5f0); transform: translateX(20px) scale(1.05); } .hb-menu__tag { position: absolute; right: 4vw; bottom: 3vw; font: italic 13px/1.4 'Franie', Arial; max-width: 200px; text-align: right; opacity: .8; } @media (max-width: 760px) { .hb-menu-toggle span { display: none; } .hb-menu { padding: 70px 25px 25px; align-items: flex-start; } .hb-menu__links { grid-template-columns: 1fr; row-gap: 1.4vh; } .hb-menu__links a { font-size: 8vw; } .hb-menu__tag { display: none; } } @media (prefers-reduced-motion: reduce) { .hb-menu-toggle i, .hb-menu-toggle i::after { animation: none; } } /* ============================================================ Hablemos — page transitions curtain (site-wide, briefing pattern #3) ============================================================ */ .hb-curtain { position: fixed; inset: 0; z-index: 10000; background: var(--gold, #d3ac6e); display: flex; align-items: center; justify-content: center; transform: translateY(100%); pointer-events: none; } .hb-curtain__title { width: min(90vw, 900px); height: auto; overflow: visible; } .hb-curtain__title text { font: 900 clamp(2rem, 7vw, 5.5rem) Arial, sans-serif; fill: none; stroke: var(--red, #a53047); stroke-width: 2px; paint-order: stroke; text-transform: uppercase; letter-spacing: -.02em; } @media (prefers-reduced-motion: reduce) { .hb-curtain { display: none; } } /* ============================================================ Generic inner page shell (placeholder until each page gets its own designed template) ============================================================ */ .hb-page { background: var(--cream, #f7f5f0); color: var(--ink, #1a1512); min-height: 100vh; } .hb-page__content { max-width: 760px; margin: 0 auto; /* Symmetric, like every other band — this generic fallback template was one of the last places with a hand-tuned asymmetric padding. */ padding: var(--hb-section-y) var(--hb-gutter); } .hb-page__content h1 { font-size: var(--hb-h1); line-height: 1.03; letter-spacing: -.02em; margin: 0 0 var(--hb-s3); color: var(--red, #a53047); } .hb-page__body { font-size: var(--hb-text); line-height: var(--hb-text-lh); } /* ============================================================ Alvos de toque — regra única, para toda a gente ============================================================ Measured on a 375px phone: the footer sitemap links were 20px tall, the text CTAs 28px, the footer wordmark 34px. All of them are the right SIZE typographically — what was missing was the box around them. Nothing here changes a font size or a position: it adds the vertical room a finger needs, which the type was never going to provide on its own at 14px. Gated on pointer:coarse as well as width, so a tablet gets it too — a finger on a 1024px iPad is the same finger as on a phone. ============================================================ */ @media (max-width: 900px), (pointer: coarse) { .hb-footer__links a, .hb-footer__contact a, .hb-footer__social a, /* Política de Privacidade, Termos e Condições and the Livro de Reclamações. These are legal obligations, so they are the last links on the site that should be hard to hit. The cookie control is a