/* ========================================================================== Base styles shared by every page. Fonts, colour tokens, reset and the shared components: button, site header, highlighted words, curved ribbon, "como funciona" cards, FAQ list, closing call to action and the mobile card carousel. ========================================================================== */ /* Fonts ------------------------------------------------------------------ Poppins (SIL OFL, see assets/fonts/OFL-Poppins.txt), latin subset from Google Fonts. Keramique Script by Mans Greback for the hand-lettered words: LICENCE PENDING, the file in use is the personal-use version; a commercial licence (mansgreback.com/license) must be bought before going live. */ @font-face { font-family: "Poppins"; font-weight: 200; font-display: swap; src: url("../assets/fonts/poppins-200.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 300; font-display: swap; src: url("../assets/fonts/poppins-300.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("../assets/fonts/poppins-400.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../assets/fonts/poppins-700.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url("../assets/fonts/poppins-800.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 900; font-display: swap; src: url("../assets/fonts/poppins-900.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 900; font-style: italic; font-display: swap; src: url("../assets/fonts/poppins-900-italic.woff2") format("woff2"); } @font-face { font-family: "Keramique Script"; font-weight: 400; font-display: swap; src: url("../assets/fonts/keramique-script.woff2") format("woff2"); } /* Tokens ----------------------------------------------------------------- Brand palette from the designer's identity guide (15/10/2026). Tokens marked "sampled" are not in the palette and were measured on the Canva exports. */ :root { --bg: #fcfaf2; /* page background (cream) */ --ink: #242424; /* main text */ --highlight: #fdff96; /* yellow marker behind headings */ --green: #dbff86; --green-dark: #8da858; /* sampled */ --olive: #769212; /* sampled: logo and Lado B */ --forest: #236946; --pink: #ffd2f4; --pink-dark: #864673; /* sampled */ --pink-pale: #ffe4f3; /* sampled */ --red: #e83a00; --red-dark: #7a1818; --blue: #143de3; --blue-pale: #b8eaff; --magenta: #c52d6c; /* sampled */ --yellow: #ffd72e; --footer-bg: #f3fbff; /* sampled: closing section of the long pages */ /* Design unit: 1 design pixel on a 1920px-wide Canva frame. Lets desktop layouts follow the Canva proportions exactly, at any screen width (larger screens show the same design, scaled up). */ --u: calc(100vw / 1920); /* Long pages were measured on 1065px-wide screenshots of the same frame: 1 screenshot pixel. */ --p: calc(var(--u) * 1920 / 1065); /* Design of 15/10/2026: pages were exported 1366px wide, and the Canva structured content gives every size and position in those pixels (referencias/canva/v2-2026-10-15/spec/). 1 Canva pixel: */ --e: calc(var(--u) * 1920 / 1366); /* PLACEHOLDER: the big "B" from the logo, used as a mask so it can take any colour. Inlined as a data URI because CSS masks loaded from files are blocked when pages are opened straight from disk (file://). Source: assets/img/placeholder/b-shape.png. */ --b-mask: url("data:image/png;base64,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"); } /* Reset ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--ink); font-family: "Poppins", system-ui, sans-serif; } html { scroll-padding-top: 110px; } /* anchors land below the fixed header */ body { overflow-x: hidden; } a { color: inherit; text-decoration: none; } img, svg { display: block; } ul, ol { list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Hand-lettered words (hellooo…, não, maioria A, …) ------------------- */ .script { font-family: "Keramique Script", "Poppins", cursive; font-weight: 400; letter-spacing: -.06em; line-height: 1.1; } /* Button: outlined pill with an arrow ------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .35em; border: solid currentColor; border-radius: 999px; font-weight: 900; letter-spacing: -.06em; white-space: nowrap; transition: transform .15s ease; } .btn:hover, a:hover .btn { transform: translateY(-2px); } .btn svg { width: 1.25em; height: 1em; flex: none; } /* Page wrapper for the long pages (Perder peso, Lado B, quiz) ------------ */ .page { position: relative; width: 100%; margin: 0 auto; overflow: hidden; } .deco { position: absolute; pointer-events: none; } .abs { position: absolute; } /* Site header (every page except the home page) -------------------------- Sizes from the Canva spec (1366px pages, --e). Logo 212px wide at x 60; menu items Poppins 200 22.8px; "Agendar consulta" pill 226x38 ending at x 1316. All four items show on every page; the current one is highlighted (see a[aria-current]). --accent: blue on most pages, orange on Lado B and the quiz. */ .site-header { position: relative; z-index: 10; transition: height .2s ease, background-color .2s ease, box-shadow .2s ease; display: flex; align-items: center; justify-content: space-between; height: calc(187 * var(--e)); padding: 0 calc(50 * var(--e)) 0 calc(60 * var(--e)); --accent: var(--blue); } .site-header--red { --accent: var(--red); } .site-header__logo img { width: calc(212 * var(--e)); height: auto; transition: width .2s ease; } /* Pages that scroll: the header stays fixed at the top of the window. It is taken out of the flow (fixed + reserved space) so that shrinking it after scrolling does not make the page jump. Single-screen pages do not scroll, so their header stays in place. */ body:not(.fit-screen) .site-header { position: fixed; top: 0; left: 0; right: 0; } body:not(.fit-screen) .site-header + main { padding-top: calc(187 * var(--e)); } /* After scrolling (class set by js/nav.js): compact header with a background, so it stays visible without covering too much of the page. */ .site-header.is-scrolled { height: calc(78 * var(--e)); background: var(--bg); box-shadow: 0 2px 18px rgb(0 0 0 / .08); } .site-header.is-scrolled .site-header__logo img { width: calc(130 * var(--e)); } .site-header__toggle { display: none; } .site-nav { display: flex; align-items: center; gap: calc(26 * var(--e)); } .site-nav ul { display: flex; align-items: center; gap: calc(26 * var(--e)); } .site-nav a { font-weight: 200; font-size: calc(22.8 * var(--e)); letter-spacing: -.078em; line-height: 1.1; } .site-nav a:hover { color: var(--accent); } /* Current page: same menu on every page, current item highlighted (the Canva design hides it; a constant menu is clearer to navigate). */ .site-nav a[aria-current="page"] { color: var(--accent); font-weight: 400; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .22em; } .site-nav .site-nav__cta { color: var(--accent); font-weight: 700; height: calc(38.5 * var(--e)); padding: 0 calc(14 * var(--e)) 0 calc(18 * var(--e)); border-width: calc(4 * var(--e)); font-size: calc(20 * var(--e)); letter-spacing: -.078em; } /* Site footer --------------------------------------------------------------- Long pages (design of 15/10/2026): the closing call to action of the page on the left (.site-footer__cta, page-specific) and the contact and legal details on the right. Light blue background (Lado B: light yellow). Single-screen pages (home, quiz) keep a compact legal bar (.site-footer--bar), as they have no footer in the design. */ .site-footer { position: relative; z-index: 2; background: var(--footer-bg); display: flex; align-items: center; justify-content: space-between; gap: calc(40 * var(--e)); padding: calc(100 * var(--e)) calc(106 * var(--e)) calc(150 * var(--e)) calc(132 * var(--e)); } .site-footer__info { text-align: right; font-weight: 300; font-size: max(13px, calc(19.2 * var(--e))); line-height: 1.4; letter-spacing: -.078em; } .site-footer__info .site-footer__legal { margin-top: 1.4em; } /* blank line before the legal links, as in the design */ .site-footer__info a { color: var(--accent, var(--blue)); text-decoration: underline; text-underline-offset: 3px; } .site-footer__info .site-footer__legal a { color: var(--ink); text-decoration: none; } .site-footer__info .site-footer__legal a:hover { text-decoration: underline; } .site-footer--bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: calc(22 * var(--p)) calc(40 * var(--p)); background: var(--bg); border-top: 1px solid rgb(36 36 36 / .12); font-weight: 300; font-size: max(12px, calc(11 * var(--p))); letter-spacing: -.03em; } .site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; } .site-footer--bar a { text-decoration: underline; text-underline-offset: 3px; } .site-footer--bar a:hover { color: var(--blue); } /* Hero (shared by Perder peso, Lado B, quiz entry and results) ------------ */ .hello { font-size: calc(47.2 * var(--e)); } /* "hellooo…" in Keramique Script (.script) */ img.hello { width: calc(124 * var(--p)); } .hero__title { font-weight: 900; line-height: 1.04; letter-spacing: -.085em; } .hero__text { font-weight: 300; letter-spacing: -.065em; } /* Yellow marker behind a word ------------------------------------------- */ .marker { position: relative; z-index: 0; } .marker::before { content: ""; position: absolute; z-index: -1; left: -.05em; right: -.12em; top: .45em; bottom: -.04em; background: var(--highlight); border-radius: .06em; transform: rotate(-1.5deg) skewX(-6deg); } /* Section heading in display size --------------------------------------- */ .display { font-weight: 900; line-height: 1; letter-spacing: -.085em; } /* Curved ribbon "BEATRIZ BORDALO • Nutricionista" ------------------------ PLACEHOLDER: hand-drawn approximation; to be replaced by the designer's SVG. */ .ribbon { position: relative; width: 100%; height: calc(230 * var(--p)); } .ribbon svg { width: 100%; height: 100%; overflow: visible; } .ribbon text { font-weight: 800; font-size: 12px; letter-spacing: .035em; fill: var(--ink); } /* "Como funciona" cards ---------------------------------------------------- Each card is a size container; --k is 1 screenshot pixel inside a 208px card. */ .steps { display: flex; justify-content: center; } .step-wrap { width: calc(208 * var(--p)); container-type: inline-size; flex: none; } .step { --k: calc(100cqw / 208); position: relative; overflow: hidden; height: calc(var(--h, 295) * var(--k)); padding: calc(48 * var(--k)) calc(20 * var(--k)) 0 calc(22 * var(--k)); border-radius: calc(18 * var(--k)); color: #fff; background: var(--card); box-shadow: 0 calc(18 * var(--k)) calc(40 * var(--k)) rgb(0 0 0 / .22); } .step::after { /* big "B" from the logo, bottom right */ content: ""; position: absolute; right: calc(-6 * var(--k)); bottom: calc(-4 * var(--k)); width: calc(95 * var(--k)); height: calc(119 * var(--k)); background: var(--card-b); -webkit-mask: var(--b-mask) center / contain no-repeat; mask: var(--b-mask) center / contain no-repeat; } .step__logo { width: calc(46 * var(--k)); margin-bottom: calc(6 * var(--k)); } .step__title { font-weight: 900; font-size: calc(21 * var(--k)); line-height: 1.12; letter-spacing: -.07em; } .step__text { margin-top: calc(10 * var(--k)); font-weight: 300; font-size: max(11px, calc(10 * var(--k))); line-height: 1.45; letter-spacing: -.05em; } .step--red { --card: var(--red); --card-b: #ffc4b4; } .step--magenta { --card: #bb2b67; --card-b: #f3bcd3; } .step--blue { --card: var(--blue); --card-b: #b9c8f6; } .step--white { --card: #fff; --card-b: #f4704e; color: var(--red); } /* FAQ list ----------------------------------------------------------------- */ .faq__q { font-weight: 900; letter-spacing: -.075em; line-height: 1.1; } .faq__a { font-weight: 300; letter-spacing: -.055em; line-height: 1.45; } /* Mobile and tablet -------------------------------------------------------- No Canva design exists: the developer adapts the layout. Design unit switches to a 600px-wide reference. */ @media (max-width: 900px) { :root { --u: calc(100vw / 600); --p: calc(100vw / 600); } :root { --e: calc(100vw / 600); } .site-header { height: calc(90 * var(--u)); padding: 0 calc(24 * var(--u)); } .site-header.is-scrolled { height: calc(62 * var(--u)); } body:not(.fit-screen) .site-header + main { padding-top: calc(90 * var(--u)); } .site-header.is-scrolled .site-header__logo img { width: calc(110 * var(--u)); } .site-header.is-scrolled .site-header__toggle { width: calc(46 * var(--u)); height: calc(46 * var(--u)); } .site-footer { flex-direction: column; align-items: flex-start; gap: calc(50 * var(--u)); padding: calc(70 * var(--u)) calc(32 * var(--u)) calc(60 * var(--u)); } .site-footer__info { text-align: left; font-size: max(13px, calc(22 * var(--u))); } .site-footer--bar { flex-direction: column; align-items: flex-start; padding: calc(30 * var(--u)) calc(32 * var(--u)); font-size: max(12px, calc(20 * var(--u))); } .site-header__logo img { width: calc(150 * var(--u)); } .site-header__toggle { display: grid; place-items: center; width: calc(56 * var(--u)); height: calc(56 * var(--u)); border: calc(3 * var(--u)) solid var(--accent); border-radius: 50%; color: var(--accent); } .site-header__toggle svg { width: 55%; height: 55%; } .site-nav { display: none; position: absolute; top: 100%; left: calc(16 * var(--u)); right: calc(16 * var(--u)); flex-direction: column; align-items: stretch; gap: calc(20 * var(--u)); padding: calc(28 * var(--u)); border-radius: calc(28 * var(--u)); background: var(--bg); box-shadow: 0 calc(12 * var(--u)) calc(40 * var(--u)) rgb(0 0 0 / .15); } .site-header.is-open .site-nav { display: flex; } .site-nav ul { flex-direction: column; align-items: flex-start; gap: calc(14 * var(--u)); } .site-nav a { font-size: calc(30 * var(--u)); } .site-nav .site-nav__cta { height: calc(60 * var(--u)); font-size: calc(26 * var(--u)); border-width: calc(4 * var(--u)); padding: 0 calc(20 * var(--u)); } .hello { font-size: calc(56 * var(--u)); } img.hello { width: calc(170 * var(--u)); } /* Card carousel: horizontal scroll with snap points, no script needed. */ .carousel { display: flex; gap: calc(24 * var(--u)); overflow-x: auto; scroll-snap-type: x mandatory; padding: calc(30 * var(--u)) calc(60 * var(--u)) calc(50 * var(--u)); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .carousel::-webkit-scrollbar { display: none; } .carousel > * { scroll-snap-align: center; flex: none; } .carousel-hint { display: block; text-align: center; font-weight: 300; font-size: max(11px, calc(20 * var(--u))); letter-spacing: -.05em; opacity: .7; } .steps { justify-content: flex-start; } .step-wrap { width: calc(420 * var(--u)); transform: none !important; margin: 0 !important; } /* Wider than the screen so the ribbon text stays legible (keeps the 1065:230 ratio). */ .ribbon { height: calc(600 * 3 * var(--u) * 230 / 1065); overflow: hidden; } .ribbon svg { width: 300%; margin-left: -100%; } } @media (min-width: 901px) { .carousel-hint { display: none; } /* Single-screen pages (home, quiz, results): the Canva frame is 1920x1080, but the browser window is shorter (tabs, address bar). Scale the design to fit both width and height so these pages never scroll on desktop. --p is redeclared because it is computed from --u. */ .fit-screen { --u: min(100vw / 1920, 100vh / 1080); --p: calc(var(--u) * 1920 / 1065); --e: calc(var(--u) * 1920 / 1366); } @supports (height: 100dvh) { .fit-screen { --u: min(100vw / 1920, 100dvh / 1080); } } .fit-screen { height: 100vh; height: 100dvh; overflow: hidden; } .fit-screen .page { width: calc(1920 * var(--u)); height: calc(1080 * var(--u)); min-height: 0; overflow-x: visible; overflow-y: clip; } .fit-screen .deco { overflow: visible; } /* background shapes continue into the side margins */ .fit-screen .site-footer--bar { position: absolute; left: 0; right: 0; bottom: 0; border-top: 0; background: none; padding-bottom: calc(18 * var(--p)); } } @media (prefers-reduced-motion: reduce) { .btn, .site-header, .site-header__logo img { transition: none; } .carousel { scroll-behavior: auto; } }