/* ===================================================================== Alexandra Avô — Portfolio stylesheet --------------------------------------------------------------------- 1. Colour & design tokens (light + dark) 2. Base / reset 3. Layout helpers 4. Navigation 5. Buttons 6. Hero 7. Sections & headings 8. Timeline (Education, Experience) 9. Project cards 10. Info cards (Leadership) 11. Skills & tags 12. Contact 13. Footer 14. Placeholders 15. Scroll animations & reduced motion ===================================================================== */ /* ===================================================================== 1. COLOUR & DESIGN TOKENS Change colours here and the whole site updates. ===================================================================== */ :root { /* Light theme (default) */ --color-bg: #FAF7F2; /* warm off-white page background */ --color-bg-alt: #F3ECE4; /* alternate section background */ --color-surface: #FFFFFF; /* cards */ --color-text: #2A211C; /* deep brown-black body text */ --color-text-muted: #5E534C; /* secondary text */ --color-border: #E4D9CE; --color-accent: #A0735A; /* terracotta — decorative (lines, dots) */ --color-accent-strong:#85583F; /* darker terracotta — text & buttons (passes WCAG AA) */ --color-accent-soft: #F1E3D8; /* tag / chip background */ --color-on-accent: #FFFFFF; /* text on accent buttons */ --color-focus: #85583F; --color-placeholder-bg: #FFF1B8; --color-placeholder-text: #5A4500; --shadow: 0 1px 2px rgba(42, 33, 28, .05), 0 8px 24px rgba(42, 33, 28, .06); --shadow-hover: 0 2px 4px rgba(42, 33, 28, .06), 0 14px 32px rgba(42, 33, 28, .10); --header-bg: rgba(250, 247, 242, .85); /* Typography */ --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-heading: "DM Serif Display", Georgia, "Times New Roman", serif; /* Sizes */ --radius: 14px; --radius-small: 8px; --header-height: 64px; --container: 1120px; --container-narrow: 780px; } /* Dark theme: activated by data-theme="dark" on (set in index.html / main.js) */ [data-theme="dark"] { --color-bg: #181412; --color-bg-alt: #201A17; --color-surface: #28211D; --color-text: #F3ECE6; --color-text-muted: #BFB2A8; --color-border: #3B312B; --color-accent: #C98F71; --color-accent-strong:#E2AE92; --color-accent-soft: #3A2A22; --color-on-accent: #1A120E; --color-focus: #E2AE92; --color-placeholder-bg: #4A3D10; --color-placeholder-text: #FFE9A3; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25); --shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .35); --header-bg: rgba(24, 20, 18, .85); } /* ===================================================================== 2. BASE / RESET ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); /* anchor links land below the sticky nav */ -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--color-text); background: var(--color-bg); overflow-x: hidden; transition: background-color .3s ease, color .3s ease; } h1, h2, h3, h4 { margin: 0; line-height: 1.2; } p { margin: 0; } ul, ol { margin: 0; padding: 0; } img { max-width: 100%; display: block; } a { color: var(--color-accent-strong); text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } /* Visible keyboard focus everywhere */ :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; } /* "Skip to content" link for keyboard users — appears on Tab */ .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: .6rem 1rem; background: var(--color-accent-strong); color: var(--color-on-accent); border-radius: var(--radius-small); font-weight: 600; } .skip-link:focus { top: .75rem; } /* Inline SVG icons */ .icon { width: 1.15em; height: 1.15em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .icon--fill { fill: currentColor; stroke: none; } /* ===================================================================== 3. LAYOUT HELPERS ===================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; } .container--narrow { max-width: var(--container-narrow); } @media (min-width: 768px) { .container { padding-inline: 2rem; } } /* ===================================================================== 4. NAVIGATION ===================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--color-border); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--header-height); } .nav__brand { display: flex; align-items: center; gap: .6rem; color: var(--color-text); text-decoration: none; font-weight: 600; } .nav__logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent-strong); color: var(--color-on-accent); font-family: var(--font-heading); font-size: 1rem; letter-spacing: .02em; } .nav__actions { display: flex; align-items: center; gap: .25rem; } /* Language switch (EN / PT) */ .lang-toggle { min-width: 42px; height: 36px; padding: 0 .7rem; border: 1.5px solid var(--color-border); border-radius: 999px; background: transparent; color: var(--color-text); font: inherit; font-size: .85rem; font-weight: 700; letter-spacing: .05em; cursor: pointer; } .lang-toggle:hover { border-color: var(--color-accent-strong); color: var(--color-accent-strong); } /* Light/dark toggle */ .theme-toggle, .nav__toggle { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text); cursor: pointer; } .theme-toggle:hover, .nav__toggle:hover { background: var(--color-accent-soft); } .theme-toggle .icon { width: 20px; height: 20px; } .icon--sun { display: none; } [data-theme="dark"] .icon--sun { display: block; } [data-theme="dark"] .icon--moon { display: none; } /* Hamburger (mobile) */ .nav__toggle { gap: 0; align-content: center; } .nav__toggle-bar { display: block; width: 20px; height: 2px; margin: 2.5px 0; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .25s ease; } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile menu: dropdown panel under the header */ .nav__menu { list-style: none; position: absolute; top: var(--header-height); left: 0; right: 0; display: none; flex-direction: column; padding: .5rem 1.25rem 1rem; background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow); } .nav__menu.is-open { display: flex; } .nav__menu a { display: block; padding: .75rem .25rem; color: var(--color-text); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--color-border); } .nav__menu li:last-child a { border-bottom: 0; } .nav__menu a:hover, .nav__menu a.is-active { color: var(--color-accent-strong); } /* Desktop menu: inline links, hamburger hidden */ @media (min-width: 960px) { .nav__toggle { display: none; } .nav__menu { position: static; display: flex; flex-direction: row; gap: .25rem; padding: 0; margin-left: auto; background: none; border: 0; box-shadow: none; order: 2; /* links sit between the name and the theme toggle */ } .nav__actions { order: 3; } .nav__menu a { padding: .4rem .7rem; border: 0; border-radius: 999px; font-size: .95rem; } .nav__menu a:hover { background: var(--color-accent-soft); } .nav__menu a.is-active { background: var(--color-accent-soft); } } /* ===================================================================== 5. BUTTONS ===================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .7rem 1.35rem; border: 2px solid transparent; border-radius: 999px; font: inherit; font-weight: 600; font-size: .98rem; text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .btn:hover { transform: translateY(-1px); text-decoration: none; } .btn--primary { background: var(--color-accent-strong); color: var(--color-on-accent); } .btn--primary:hover { background: var(--color-text); color: var(--color-bg); } .btn--secondary { background: transparent; color: var(--color-accent-strong); border-color: var(--color-accent-strong); } .btn--secondary:hover { background: var(--color-accent-strong); color: var(--color-on-accent); } .btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); } .btn--ghost:hover { border-color: var(--color-text); } .btn--small { min-height: 38px; padding: .4rem 1rem; font-size: .9rem; } /* ===================================================================== 6. HERO ===================================================================== */ .hero { padding: 3.5rem 0 4rem; background: radial-gradient(ellipse at top right, var(--color-accent-soft), transparent 60%), var(--color-bg); } .hero__inner { display: grid; gap: 2rem; justify-items: center; text-align: center; } /* Round photo with an initials fallback behind it */ .hero__photo { position: relative; width: 180px; height: 180px; border-radius: 50%; overflow: hidden; background: var(--color-accent-strong); box-shadow: 0 0 0 6px var(--color-bg), 0 0 0 8px var(--color-accent), var(--shadow); } .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; /* keeps the face centred in the circle */ } .hero__initials { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--font-heading); font-size: 4rem; color: var(--color-on-accent); } .hero__eyebrow { font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-strong); margin-bottom: .75rem; } .hero__name { font-family: var(--font-heading); font-weight: 400; font-size: clamp(2.5rem, 8vw, 4.25rem); line-height: 1.05; } .hero__fullname { margin-top: .35rem; font-size: .95rem; color: var(--color-text-muted); } .hero__headline { margin-top: 1.25rem; font-size: clamp(1.1rem, 3vw, 1.35rem); font-weight: 600; } .hero__tagline { margin-top: .4rem; color: var(--color-text-muted); } .hero__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; } @media (min-width: 768px) { .hero { padding: 5.5rem 0 6rem; } .hero__inner { grid-template-columns: auto 1fr; gap: 3.5rem; align-items: center; justify-items: start; text-align: left; } .hero__photo { width: 240px; height: 240px; } .hero__initials { font-size: 5rem; } .hero__buttons { justify-content: flex-start; } } /* ===================================================================== 7. SECTIONS & HEADINGS ===================================================================== */ .section { padding: 4rem 0; } .section--alt { background: var(--color-bg-alt); } @media (min-width: 768px) { .section { padding: 5.5rem 0; } } .section__title { font-family: var(--font-heading); font-weight: 400; font-size: clamp(2rem, 5vw, 2.6rem); margin-bottom: 2rem; } /* Small terracotta line under each section title */ .section__title::after { content: ""; display: block; width: 48px; height: 3px; margin-top: .75rem; background: var(--color-accent); border-radius: 3px; } .prose p + p { margin-top: 1.1rem; } .prose { font-size: 1.05rem; } .group-title { margin: 2.75rem 0 1.25rem; font-size: 1.15rem; font-weight: 600; color: var(--color-accent-strong); } .group-title:first-of-type { margin-top: 0; } /* ===================================================================== 8. TIMELINE ===================================================================== */ .timeline { list-style: none; position: relative; padding-left: 1.75rem; border-left: 2px solid var(--color-border); margin-left: .4rem; } .timeline__item { position: relative; padding-bottom: 2.5rem; } .timeline__item:last-child { padding-bottom: 0; } /* Dot on the line */ .timeline__item::before { content: ""; position: absolute; left: calc(-1.75rem - 8px); top: .3rem; width: 14px; height: 14px; border-radius: 50%; background: var(--color-bg); border: 3px solid var(--color-accent); } .section--alt .timeline__item::before { background: var(--color-bg-alt); } .timeline__date { font-size: .85rem; font-weight: 600; color: var(--color-accent-strong); letter-spacing: .02em; } .timeline__title { margin-top: .3rem; font-size: 1.2rem; font-weight: 600; } .timeline__org { margin-top: .2rem; color: var(--color-text-muted); font-weight: 500; } .timeline__list { margin-top: .75rem; padding-left: 1.2rem; } .timeline__list li + li { margin-top: .35rem; } .timeline__list li::marker { color: var(--color-accent); } /* ===================================================================== 9. PROJECT CARDS ===================================================================== */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.5rem; } .project-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: box-shadow .25s ease, transform .25s ease; } .project-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } /* Image area: shows a soft patterned placeholder until an image is added */ .project-card__media { aspect-ratio: 16 / 10; background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(160, 115, 90, .08) 12px 24px), var(--color-accent-soft); } .project-card__media img { width: 100%; height: 100%; object-fit: cover; } .project-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; flex: 1; padding: 1.35rem; } .project-card__title { font-size: 1.15rem; font-weight: 600; } .project-card__text { color: var(--color-text-muted); } .project-card__body .btn { margin-top: auto; } /* ===================================================================== 10. INFO CARDS (Leadership & Involvement) ===================================================================== */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.25rem; } .cards-grid--spaced { margin-top: 1.25rem; } /* Small label above a group of cards (e.g. "Erasmus+ Youth Exchanges") */ .subgroup-title { margin-bottom: .9rem; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); } /* Row of partner logos. Logos always sit on white (EU logo guidelines). */ .logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 2.5rem; margin-bottom: 1.75rem; padding: 1.25rem 1.5rem; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius); } .logo-strip img { height: 84px; width: auto; max-width: 100%; object-fit: contain; } .info-card { padding: 1.4rem 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent); border-radius: var(--radius); box-shadow: var(--shadow); } .info-card__meta { font-size: .85rem; font-weight: 600; color: var(--color-accent-strong); } .info-card__title { margin-top: .35rem; font-size: 1.08rem; font-weight: 600; } .info-card__list { margin-top: .7rem; padding-left: 1.15rem; color: var(--color-text-muted); font-size: .96rem; } .info-card__list li + li { margin-top: .3rem; } .info-card__list li::marker { color: var(--color-accent); } /* ===================================================================== 11. SKILLS & TAGS ===================================================================== */ .skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.25rem; } .skill-group { padding: 1.4rem 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); } .skill-group__title { font-size: 1.05rem; font-weight: 600; margin-bottom: .9rem; } .skill-group__note { margin: -.4rem 0 .75rem; font-size: .92rem; color: var(--color-text-muted); } /* Chips / tags (used in Skills and project cards) */ .tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; } .tag { padding: .3rem .8rem; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-text); font-size: .88rem; font-weight: 500; } /* Languages: name on the left, CEFR level on the right */ .languages { margin: 0; } .languages > div { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--color-border); } .languages > div:last-child { border-bottom: 0; } .languages dt { font-weight: 600; } .languages dd { margin: 0; color: var(--color-text-muted); } /* ===================================================================== 12. CONTACT ===================================================================== */ .contact__intro { color: var(--color-text-muted); margin-bottom: 1.5rem; } .contact-list { list-style: none; margin-bottom: 2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); } .contact-list li { display: grid; grid-template-columns: auto 5.5rem 1fr; align-items: center; gap: .9rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; /* long emails/URLs never cause horizontal scroll */ } .contact-list li:last-child { border-bottom: 0; } .contact-list .icon { color: var(--color-accent-strong); width: 1.3em; height: 1.3em; } .contact-list__label { font-weight: 600; font-size: .92rem; } /* On very small phones, stack label above value */ @media (max-width: 420px) { .contact-list li { grid-template-columns: auto 1fr; } .contact-list li > :last-child { grid-column: 2; } } /* ===================================================================== 13. FOOTER ===================================================================== */ .site-footer { padding: 2rem 0; border-top: 1px solid var(--color-border); background: var(--color-bg-alt); color: var(--color-text-muted); font-size: .9rem; } .site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; } /* ===================================================================== 14. PLACEHOLDERS Anything wrapped in is highlighted in yellow so it's easy to spot. Remove the span when you fill it in. ===================================================================== */ .placeholder { background: var(--color-placeholder-bg); color: var(--color-placeholder-text); padding: .05em .35em; border-radius: 4px; outline: 1px dashed currentColor; font-weight: 500; } /* ===================================================================== LANGUAGES Hides the text of the language that is NOT selected. The selected language is stored in or . ===================================================================== */ html[lang="en"] [data-lang="pt"], html[lang="pt"] [data-lang="en"] { display: none !important; } /* ===================================================================== 15. SCROLL ANIMATIONS Elements with class "reveal" fade in when scrolled into view. The hidden state only applies when JavaScript is running (.js on ), so content is always visible without JS. ===================================================================== */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; } .js .reveal.is-visible { opacity: 1; transform: none; } /* Respect users who prefer less motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .js .reveal { opacity: 1; transform: none; } .btn:hover, .project-card:hover { transform: none; } }