/* ========================================================================== Raquel — European Portuguese lessons Single stylesheet. No framework, no build step. Order: tokens · reset · layout · components · utilities · responsive ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens — light palette lives on bare :root -------------------------------------------------------------------------- */ :root { /* Palette — Atlantic blue + warm terracotta (Portuguese coastal) */ --c-primary: #14506b; --c-primary-dark: #0d3a4f; --c-primary-light: #e6f0f5; --c-accent: #c8552b; --c-accent-dark: #a8431f; --c-accent-light: #fbeee8; /* Darker accent reserved for small text on light backgrounds, where the main accent only reaches ~4.3:1. This clears 4.5:1 for WCAG AA. */ --c-accent-text: #a03d19; --c-bg: #fdfcfa; --c-surface: #ffffff; --c-surface-alt: #f4f1ec; --c-border: #e2ddd4; --c-text: #1e2429; --c-text-soft: #4f5b64; --c-text-invert: #ffffff; --c-whatsapp: #25d366; --c-whatsapp-dark: #1da851; /* Type scale */ --ff-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ff-head: Georgia, "Times New Roman", serif; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1.0625rem; --fs-lg: 1.1875rem; --fs-xl: 1.5rem; --fs-2xl: 1.9rem; --fs-3xl: 2.4rem; --fs-4xl: 3rem; /* Spacing */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; /* Shape */ --radius: 10px; --radius-lg: 16px; --shadow: 0 1px 3px rgba(20, 36, 45, .07), 0 4px 16px rgba(20, 36, 45, .06); --shadow-lg: 0 8px 32px rgba(20, 36, 45, .13); --wrap: 1140px; --wrap-text: 68ch; } /* Dark theme — opt-in only. The site is deliberately light by default for every visitor, regardless of their OS setting. Dark applies only when the visitor picks it via the header toggle, which sets data-theme="dark" on . Only tokens are overridden here; no component rule is ever duplicated for dark. */ :root[data-theme="dark"] { --c-primary: #6fb5d4; --c-primary-dark: #93cbe4; --c-primary-light: #16303d; --c-accent: #f08055; --c-accent-dark: #f79a76; --c-accent-light: #2f1a12; /* On dark, the main accent is already light enough for small text */ --c-accent-text: #f08055; --c-bg: #11171b; --c-surface: #182026; --c-surface-alt: #1e282f; --c-border: #2d3a43; --c-text: #e9edf0; --c-text-soft: #a9b7c0; --c-text-invert: #11171b; --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3); --shadow-lg: 0 8px 32px rgba(0, 0, 0, .5); } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; /* clears the sticky header on anchor jumps */ } body { margin: 0; font-family: var(--ff-body); font-size: var(--fs-base); line-height: 1.65; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--ff-head); line-height: 1.2; margin: 0 0 var(--sp-4); color: var(--c-text); font-weight: 700; } h1 { font-size: var(--fs-3xl); letter-spacing: -.02em; } h2 { font-size: var(--fs-2xl); letter-spacing: -.01em; } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } p { margin: 0 0 var(--sp-4); } a { color: var(--c-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--c-accent); } img { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); } li { margin-bottom: var(--sp-2); } /* Visible focus for keyboard users on every interactive element */ :focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 3px; } /* -------------------------------------------------------------------------- 3. Layout helpers -------------------------------------------------------------------------- */ .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .wrap--narrow { width: min(100% - 2.5rem, 780px); margin-inline: auto; } section { padding-block: var(--sp-8); } .section--alt { background: var(--c-surface-alt); } .section--tint { background: var(--c-primary-light); } .section-head { text-align: center; max-width: var(--wrap-text); margin: 0 auto var(--sp-7); } .section-head p { color: var(--c-text-soft); font-size: var(--fs-lg); margin-bottom: 0; } .eyebrow { display: inline-block; font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent-text); margin-bottom: var(--sp-3); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: var(--sp-3) var(--sp-5); background: var(--c-accent); color: #fff; font-weight: 600; border-radius: 0 0 var(--radius) 0; } .skip-link:focus { left: 0; color: #fff; } /* -------------------------------------------------------------------------- 4. Header & navigation -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--c-bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-border); } .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); } .brand { font-family: var(--ff-head); font-size: var(--fs-lg); font-weight: 700; color: var(--c-text); text-decoration: none; line-height: 1.15; flex-shrink: 0; } .brand span { display: block; font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 500; color: var(--c-text-soft); letter-spacing: .04em; } .brand:hover { color: var(--c-primary); } .nav-toggle { display: none; background: none; border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-lg); line-height: 1; color: var(--c-text); cursor: pointer; } .nav-menu { display: flex; align-items: center; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; } .nav-menu a { color: var(--c-text); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; padding-block: var(--sp-2); border-bottom: 2px solid transparent; } .nav-menu a:hover { color: var(--c-primary); border-bottom-color: var(--c-primary); } .nav-menu a[aria-current="page"] { color: var(--c-primary); border-bottom-color: var(--c-primary); } /* Language switch — always a real , never JS */ .lang-switch { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-1); background: var(--c-surface); } .lang-switch a { padding: var(--sp-1) var(--sp-3); border-radius: 6px; text-decoration: none; color: var(--c-text-soft); font-weight: 600; } .lang-switch a:hover { background: var(--c-surface-alt); color: var(--c-text); } .lang-switch a[aria-current="true"] { background: var(--c-primary); color: #fff; } /* Theme toggle — only useful with JS, so it is hidden until main.js reveals it */ .theme-toggle { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); line-height: 1; color: var(--c-text); cursor: pointer; flex-shrink: 0; } .theme-toggle:hover { background: var(--c-surface-alt); } .theme-toggle svg { display: block; } /* Swap the icon with the theme: moon on light, sun on dark */ .theme-toggle .icon-dark { display: none; } :root[data-theme="dark"] .theme-toggle .icon-light { display: none; } :root[data-theme="dark"] .theme-toggle .icon-dark { display: block; } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border: 2px solid transparent; border-radius: var(--radius); font-family: var(--ff-body); font-size: var(--fs-base); font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .12s ease, background-color .18s ease, box-shadow .18s ease; text-align: center; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--c-accent); color: #fff; border-color: var(--c-accent); } .btn--primary:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); color: #fff; box-shadow: var(--shadow); } .btn--secondary { background: transparent; color: var(--c-primary); border-color: var(--c-primary); } .btn--secondary:hover { background: var(--c-primary); color: var(--c-text-invert); } .btn--whatsapp { background: var(--c-whatsapp); color: #06301a; border-color: var(--c-whatsapp); } .btn--whatsapp:hover { background: var(--c-whatsapp-dark); border-color: var(--c-whatsapp-dark); color: #06301a; box-shadow: var(--shadow); } .btn--lg { font-size: var(--fs-lg); padding: var(--sp-4) var(--sp-6); } .btn--block { display: flex; width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); } .btn-row--center { justify-content: center; } /* -------------------------------------------------------------------------- 6. Hero -------------------------------------------------------------------------- */ .hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--sp-7); padding-block: var(--sp-8) var(--sp-9); } .hero h1 { font-size: var(--fs-4xl); margin-bottom: var(--sp-5); } .hero .lead { font-size: var(--fs-lg); color: var(--c-text-soft); max-width: 52ch; margin-bottom: var(--sp-6); } .hero-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 3 / 2; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } .hero-points { list-style: none; padding: 0; margin: 0 0 var(--sp-6); } .hero-points li { position: relative; padding-left: var(--sp-6); color: var(--c-text-soft); margin-bottom: var(--sp-2); } .hero-points li::before { content: "✓"; position: absolute; left: 0; color: var(--c-accent); font-weight: 700; } /* -------------------------------------------------------------------------- 7. Cards -------------------------------------------------------------------------- */ .grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow); } .card h3 { margin-bottom: var(--sp-3); } .card p:last-child { margin-bottom: 0; } .card-icon { font-size: 1.9rem; line-height: 1; margin-bottom: var(--sp-3); display: block; } /* Numbered "how it works" steps */ .steps { counter-reset: step; } .step { position: relative; padding-left: 4rem; margin-bottom: var(--sp-6); } .step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -.1em; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--c-primary); color: var(--c-text-invert); font-family: var(--ff-head); font-size: var(--fs-lg); font-weight: 700; } .step h3 { margin-bottom: var(--sp-2); } .step p { margin-bottom: 0; color: var(--c-text-soft); } /* -------------------------------------------------------------------------- 8. Pricing -------------------------------------------------------------------------- */ .price-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: start; } .price { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-5); text-align: center; box-shadow: var(--shadow); position: relative; height: 100%; display: flex; flex-direction: column; } .price--featured { border-color: var(--c-accent); border-width: 2px; box-shadow: var(--shadow-lg); } .price-badge { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); background: var(--c-accent); color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: var(--sp-1) var(--sp-4); border-radius: 999px; white-space: nowrap; } .price h3 { margin-bottom: var(--sp-2); } .price .amount { font-family: var(--ff-head); font-size: var(--fs-3xl); font-weight: 700; color: var(--c-primary); line-height: 1; display: block; margin-bottom: var(--sp-1); } .price .per { color: var(--c-text-soft); font-size: var(--fs-sm); display: block; margin-bottom: var(--sp-4); } .price ul { list-style: none; padding: 0; text-align: left; margin-bottom: var(--sp-5); flex-grow: 1; } .price ul li { padding-left: var(--sp-5); position: relative; font-size: var(--fs-sm); color: var(--c-text-soft); } .price ul li::before { content: "✓"; position: absolute; left: 0; color: var(--c-accent); font-weight: 700; } /* -------------------------------------------------------------------------- 9. Testimonials -------------------------------------------------------------------------- */ .quote { background: var(--c-surface); border-left: 4px solid var(--c-accent); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--sp-5); box-shadow: var(--shadow); margin: 0; } .quote p { font-style: italic; color: var(--c-text); margin-bottom: var(--sp-3); } .quote footer { font-size: var(--fs-sm); color: var(--c-text-soft); font-style: normal; } .quote cite { font-weight: 600; font-style: normal; color: var(--c-text); } /* Placeholder marker — visible reminder to swap in real content before launch */ .is-placeholder { border: 1px dashed var(--c-accent); background: var(--c-accent-light); } .placeholder-note { display: inline-block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-accent-dark); background: var(--c-surface); border: 1px solid var(--c-accent); border-radius: 999px; padding: 2px var(--sp-3); margin-bottom: var(--sp-3); } /* -------------------------------------------------------------------------- 10. FAQ — built on
so it works with JS disabled -------------------------------------------------------------------------- */ .faq { max-width: var(--wrap-text); margin-inline: auto; } .faq details { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: var(--sp-3); overflow: hidden; } .faq summary { cursor: pointer; padding: var(--sp-4) var(--sp-5); font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: var(--fs-xl); color: var(--c-accent); line-height: 1; flex-shrink: 0; transition: transform .2s ease; } .faq details[open] summary::after { transform: rotate(45deg); } .faq summary:hover { background: var(--c-surface-alt); } .faq .faq-body { padding: 0 var(--sp-5) var(--sp-5); color: var(--c-text-soft); } .faq .faq-body p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 11. Callout / CTA band -------------------------------------------------------------------------- */ .callout { background: var(--c-primary); color: var(--c-text-invert); border-radius: var(--radius-lg); padding: var(--sp-7) var(--sp-6); text-align: center; } .callout h2 { color: var(--c-text-invert); } .callout p { color: color-mix(in srgb, var(--c-text-invert) 88%, transparent); max-width: 56ch; margin-inline: auto; font-size: var(--fs-lg); } .callout .btn--secondary { color: var(--c-text-invert); border-color: var(--c-text-invert); } .callout .btn--secondary:hover { background: var(--c-text-invert); color: var(--c-primary); } /* Highlighted info box (used for the CIPLE / 2026 law note) */ .notice { background: var(--c-accent-light); border: 1px solid var(--c-accent); border-left-width: 4px; border-radius: 0 var(--radius) var(--radius) 0; padding: var(--sp-5); margin-bottom: var(--sp-6); } .notice h3 { margin-bottom: var(--sp-2); } .notice p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 12. Prose blocks (About page etc.) -------------------------------------------------------------------------- */ .prose { max-width: var(--wrap-text); } .prose h2 { margin-top: var(--sp-7); } .prose h2:first-child { margin-top: 0; } .media-text { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; } .media-text img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; } .media-text--portrait img { aspect-ratio: 3 / 4; object-fit: cover; } /* -------------------------------------------------------------------------- 12b. Comparison table (European vs Brazilian vocabulary) -------------------------------------------------------------------------- */ .compare { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow); } .compare h3 { margin-bottom: var(--sp-4); } .compare table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .compare th, .compare td { text-align: left; padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--c-border); } .compare thead th { font-family: var(--ff-body); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--c-text-soft); } /* The Portugal column is the one that matters here */ .compare tbody td:first-child { font-weight: 600; color: var(--c-primary); } .compare tbody td:last-child { color: var(--c-text-soft); } .compare tbody tr:last-child td { border-bottom: 0; } .compare-note { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--c-text-soft); } /* -------------------------------------------------------------------------- 13. Contact page -------------------------------------------------------------------------- */ .contact-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow); text-align: center; } .contact-card .card-icon { font-size: 2.4rem; } .contact-card .contact-value { font-family: var(--ff-head); font-size: var(--fs-lg); font-weight: 700; color: var(--c-primary); word-break: break-word; display: block; margin-bottom: var(--sp-4); } /* -------------------------------------------------------------------------- 14. Sticky mobile WhatsApp button -------------------------------------------------------------------------- */ .whatsapp-float { position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 90; display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--c-whatsapp); color: #06301a; font-weight: 700; font-size: var(--fs-sm); text-decoration: none; padding: var(--sp-3) var(--sp-5); border-radius: 999px; box-shadow: var(--shadow-lg); } .whatsapp-float:hover { background: var(--c-whatsapp-dark); color: #06301a; } /* -------------------------------------------------------------------------- 15. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--c-surface-alt); border-top: 1px solid var(--c-border); padding-block: var(--sp-7) var(--sp-5); margin-top: var(--sp-8); font-size: var(--fs-sm); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-6); } .site-footer h4 { font-family: var(--ff-body); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .07em; color: var(--c-text-soft); margin-bottom: var(--sp-3); } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: var(--sp-2); } .site-footer a { color: var(--c-text); text-decoration: none; } .site-footer a:hover { color: var(--c-accent); text-decoration: underline; } .footer-bottom { border-top: 1px solid var(--c-border); padding-top: var(--sp-4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); color: var(--c-text-soft); } /* -------------------------------------------------------------------------- 16. Scroll reveal — opt-in, and disabled under reduced motion (see §17) -------------------------------------------------------------------------- */ /* Content is visible by default. Only once main.js confirms it is running (by setting .js on ) do we hide .reveal blocks to animate them in. Without this, a JS error or a blocked script would leave whole sections permanently invisible — a far worse failure than losing an animation. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; } .js .reveal.is-visible { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 17. Accessibility — respect reduced-motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } /* Never leave content stuck invisible if the observer never fires */ .js .reveal, .reveal { opacity: 1; transform: none; } .btn:hover { transform: none; } } /* Screen-reader-only text */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 18. Responsive -------------------------------------------------------------------------- */ @media (max-width: 960px) { :root { --fs-4xl: 2.4rem; --fs-3xl: 2rem; --fs-2xl: 1.7rem; } .hero { grid-template-columns: 1fr; gap: var(--sp-6); padding-block: var(--sp-6) var(--sp-7); } .hero-media { order: -1; aspect-ratio: 16 / 9; } .media-text { grid-template-columns: 1fr; gap: var(--sp-5); } .media-text img { max-width: 460px; margin-inline: auto; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { :root { --fs-4xl: 2.05rem; --fs-3xl: 1.75rem; --fs-2xl: 1.5rem; --fs-base: 1rem; } section { padding-block: var(--sp-7); } /* Collapse nav into a toggled panel */ .nav { flex-wrap: wrap; } .nav-toggle { display: block; order: 3; } .lang-switch { order: 2; margin-left: auto; } .nav-menu { order: 4; display: none; flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding-block: var(--sp-3); border-top: 1px solid var(--c-border); margin-top: var(--sp-3); } .nav-menu.is-open { display: flex; } .nav-menu a { padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--c-border); } .nav-menu li:last-child a { border-bottom: none; } .nav-menu a[aria-current="page"] { border-bottom-color: var(--c-border); } .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); } .btn-row .btn { width: 100%; } .step { padding-left: 3.4rem; } .step::before { width: 2.3rem; height: 2.3rem; font-size: var(--fs-base); } /* The float would cover content on small screens; the page CTAs carry it */ .whatsapp-float { display: none; } } /* -------------------------------------------------------------------------- 19. Print -------------------------------------------------------------------------- */ @media print { .site-header, .whatsapp-float, .nav-toggle, .site-footer { display: none; } body { color: #000; background: #fff; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; } }