/* ========================================================================== Xiomara Pannella — portfolio Accessibility targets: WCAG 2.2 AA baseline, AAA contrast (≥7:1) for text, COGA: calm density, consistent layout, readable measure, no motion. ========================================================================== */ :root { /* Palette — all text/background pairs meet WCAG AAA (7:1+) */ --ink: #1f1b24; /* body text — 13.9:1 on --lavender */ --lavender: #ece6f7; /* page background */ --lavender-deep: #c9b2ec;/* footer background */ --plum: #2b1b4d; /* footer text — 8.0:1 on --lavender-deep */ --paper: #ffffff; --focus: #4a2d8f; /* Homepage palette — all pairs verified ≥13.9:1 against --ink */ --cream: #f6f4f0; /* home page background */ --card-work: #ffeeb7; /* yellow */ --card-projects: #fce2fc;/* pink */ --card-blog: #d5eef2; /* teal */ --badge-blog: #afd3d7; /* "Coming soon" pill — 10.6:1 with --ink */ /* Projects page — verified: --ink on --projects-bg = 11.43:1 (AAA) */ --projects-bg: #ffc2ec; /* saturated pink page background */ /* Work page palette — verified against --card-work */ --ink-muted: #4c4c4c; /* collapsed entry titles — 7.43:1 on --card-work */ --rule: #d9c98c; /* divider lines between entries */ --font-serif: "PT Serif", Georgia, serif; --font-mono: "Space Mono", "Courier New", monospace; --font-mono-brand: "IBM Plex Mono", "Space Mono", monospace; --font-script: "Caveat", cursive; } *, *::before, *::after { box-sizing: border-box; } html { /* Reserve the scrollbar gutter so toggling the accordion (or any tall content) never shifts the page sideways — kills the "shaky" jitter. */ scrollbar-gutter: stable; } /* --- Self-hosted fonts ----------------------------------------------------- */ /* Local woff2 (no Google CDN round-trip) + preload in + font-display: optional = the font is ready before first paint, so text never swaps/reflows between pages (fixes the FOUT "things resize into place" flash). */ @font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: optional; src: url("assets/fonts/pt-serif-400.woff2") format("woff2"); } @font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: optional; src: url("assets/fonts/pt-serif-700.woff2") format("woff2"); } @font-face { font-family: "PT Serif"; font-style: italic; font-weight: 700; font-display: optional; src: url("assets/fonts/pt-serif-700-italic.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: optional; src: url("assets/fonts/space-mono-400.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: optional; src: url("assets/fonts/space-mono-700.woff2") format("woff2"); } @font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: optional; src: url("assets/fonts/caveat-600.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: optional; src: url("assets/fonts/ibm-plex-mono-700.woff2") format("woff2"); } body { margin: 0; background: var(--lavender); color: var(--ink); font-family: var(--font-serif); /* COGA / WCAG 1.4.12: ≥16px body, generous line-height */ font-size: 1.125rem; line-height: 1.6; } img { max-width: 100%; height: auto; } /* --- Skip link (WCAG 2.4.1 Bypass Blocks) --------------------------------- */ .skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 10; padding: 0.75rem 1.25rem; background: var(--plum); color: var(--paper); font-family: var(--font-mono); text-decoration: none; border-radius: 0.5rem; transform: translateY(-200%); } .skip-link:focus { transform: none; } /* --- Focus visibility (WCAG 2.4.7 / 2.4.11) ------------------------------- */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; } /* --- Layout ---------------------------------------------------------------- */ .page { max-width: 100rem; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; } /* Footer hugs the bottom even on short pages */ .page main { flex: 1; } /* Responsive page gutters (horizontal margins), stepped per breakpoint: Small 320–511px → 16px Medium 512–1279px → 32px Large ≥1280px → 48px One token keeps header, main, and footer in lockstep across every page. Breakpoints are rem-based (32rem = 512px, 80rem = 1280px at the 16px root) so the steps still hold up under browser zoom / larger default text. */ :root { --page-margin: 1rem; /* 16px — small */ } @media (min-width: 32rem) { :root { --page-margin: 2rem; } /* 32px — medium */ } @media (min-width: 80rem) { :root { --page-margin: 3rem; } /* 48px — large */ } .site-header, main { padding-inline: var(--page-margin); } /* --- Header / nav ----------------------------------------------------------- */ .site-header { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; padding-block: 2rem 1rem; font-family: var(--font-mono); } .brand { color: var(--ink); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: var(--font-mono-brand); } .brand-mark { /* Cherry-blossom emoji — multicolour, so no colour override. */ margin-right: 0.35rem; } .site-nav { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; list-style: none; margin: 0; padding: 0; } .site-nav a { color: var(--ink); text-decoration: none; /* WCAG 2.5.8: ≥24px target size */ display: inline-block; padding: 0.5rem 0.25rem; } .site-nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; } .site-nav a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 2px; } /* --- Headline (about page) ---------------------------------------------------- */ .about-hero { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 2rem; } .about-headline { font-size: clamp(1.75rem, 4.5vw, 2.75rem); font-weight: 400; line-height: 1.3; max-width: 24ch; margin-block: 2rem 2.5rem; } /* Emphasis is intentionally bold + italic (PT Serif italic 700) — confirmed against design. */ .about-headline em { font-weight: 700; } /* --- About grid ---------------------------------------------------------------- */ .about-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 3.5rem; } /* Grid items may shrink below content width — prevents mobile blowout (WCAG 1.4.10) */ .about-grid > * { min-width: 0; } @media (min-width: 48rem) { .about-grid { grid-template-columns: 1.1fr 1.2fr 1.1fr; gap: 3rem; } } .script-heading { font-family: var(--font-script); font-size: 2rem; font-weight: 600; margin: 0 0 0.5rem; } .about-intro p, .about-more p { /* COGA: comfortable measure, ~45–60ch */ max-width: 42ch; margin-block: 0 1.5rem; } .about-photo img { display: block; margin-inline: auto; max-width: min(100%, 30rem); border: 8px solid var(--paper); box-shadow: 0 8px 24px rgb(31 27 36 / 0.18); transform: rotate(-3deg); } .doodle { display: block; width: 150px; height: auto; margin-inline-end: clamp(0rem, 6vw, 6rem); } /* Large screens (≥1440px / 2K+): scale the headline up and open the vertical rhythm so the About content breathes into the tall canvas instead of clinging to the top above the footer. Additive — no effect below 90rem. */ @media (min-width: 90rem) { .about-headline { font-size: clamp(2.75rem, 3.4vw, 4rem); margin-block: clamp(2.5rem, 6vh, 5rem) clamp(2.5rem, 5vh, 4rem); } .about-grid { gap: 4rem; padding-bottom: clamp(3.5rem, 7vh, 6.5rem); } } /* --- Home page ------------------------------------------------------------ */ .home-page { background: var(--cream); } /* Stacked by default (mobile/tablet): headline+intro, then the doodle AFTER — never a small icon wrapped up beside the header. Switches to side-by-side only at the desktop breakpoint below. */ .home-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; padding-block: 2rem 3rem; } .home-intro { width: 100%; } .home-headline { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 400; line-height: 1.25; margin-block: 0 1.5rem; } .home-headline em { font-weight: 700; } .home-intro p { max-width: 48ch; margin: 0; } .home-hero-doodle { width: min(100%, 20rem); height: auto; } /* Desktop: headline and doodle side by side. */ @media (min-width: 64rem) { .home-hero { flex-direction: row; align-items: center; gap: 3rem; } .home-intro { width: auto; flex: 1; } .home-hero-doodle { flex: 0 0 20rem; width: 20rem; } } /* --- Home cards ------------------------------------------------------------- */ .home-cards { list-style: none; margin: 0; padding: 0 0 3.5rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 36rem) { .home-cards { grid-template-columns: 1fr 1fr; } } @media (min-width: 64rem) { .home-cards { grid-template-columns: repeat(3, 1fr); } } /* Large screens (≥1440px / 2K+): the fixed spacing left a tall cream void above the footer. Scale vertical rhythm and the hero up — tied to vh so it fills the extra height — and let the cards stand taller. Same structure, it just breathes into the canvas. */ @media (min-width: 90rem) { .home-hero { gap: 3rem 4rem; padding-block: clamp(3rem, 7vh, 6.5rem) clamp(3rem, 6vh, 5.5rem); } .home-headline { font-size: clamp(3.25rem, 3.6vw, 4.5rem); } .home-hero-doodle { flex: 0 0 24rem; width: 24rem; } .home-cards { gap: 2rem; padding-bottom: clamp(3.5rem, 7vh, 6.5rem); } .home-card { min-height: 22rem; } } .home-card { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; min-width: 0; min-height: 18rem; padding: 2rem 1.5rem; border-radius: 1rem; text-align: center; text-decoration: none; color: var(--ink); /* Soft-shadow lift on interaction. Transition only — the reduced-motion block below neutralises it, so COGA users get the shadow with no motion. */ transition: box-shadow 0.2s ease, transform 0.2s ease; } /* Hover AND keyboard focus share the exact same affordance (WCAG 2.4.7 / 1.4.1 — never hover-only). The soft shadow + heading underline reinforce the focus outline rather than relying on colour alone. */ a.home-card:hover, a.home-card:focus-visible { outline-offset: 0; box-shadow: 0 14px 32px rgb(31 27 36 / 0.16); transform: translateY(-4px); } a.home-card:hover h2, a.home-card:focus-visible h2 { text-decoration: underline; text-underline-offset: 0.3em; } .home-card h2 { font-size: 1.375rem; font-weight: 700; margin: 0; } .home-card p { max-width: 22ch; margin: 0; } .home-card--work { background: var(--card-work); } .home-card--about { background: var(--lavender); } .home-card--projects { background: var(--card-projects); } .home-card--blog { background: var(--card-blog); } .card-doodle { margin-top: auto; width: 120px; height: auto; } .badge { display: inline-block; background: var(--badge-blog); color: var(--ink); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; padding: 0.4rem 1rem; border-radius: 2rem; } /* --- Work page --------------------------------------------------------------- */ .work-page { background: var(--card-work); } .work-headline { font-size: clamp(2.25rem, 5.5vw, 3.25rem); font-weight: 400; margin-block: 2rem 0.75rem; } .work-intro { max-width: 42ch; margin-block: 0 2.5rem; } .work-list { padding-bottom: 3.5rem; } /* Dividers sit BELOW each entry (design has no rule above the first entry) */ .work-entry { border-bottom: 1px solid var(--rule); padding-block: 1.5rem; } /* Fluid expand/collapse for the accordion. Native
is the accessible baseline (click / keyboard / screen-reader disclosure); these rules only add a smooth height transition where ::details-content + interpolate-size are supported — elsewhere the panel opens instantly, still fully functional. interpolate-size lets block-size animate to/from the `auto` keyword. Motion is off under prefers-reduced-motion (WCAG 2.3.3 / COGA). */ :root { interpolate-size: allow-keywords; } @media (prefers-reduced-motion: no-preference) { .work-entry::details-content { block-size: 0; overflow: hidden; transition: block-size 0.4s ease, content-visibility 0.4s allow-discrete; } .work-entry[open]::details-content { block-size: auto; } } .work-summary { cursor: pointer; list-style: none; } .work-summary::-webkit-details-marker { display: none; } .work-title { font-size: 1.5rem; font-weight: 400; margin: 0; color: var(--ink-muted); } .work-title em { font-style: italic; } .work-entry[open] .work-title { color: var(--ink); font-weight: 700; } .work-entry:not([open]) .work-summary:hover .work-title, .work-summary:focus-visible .work-title { text-decoration: underline; text-underline-offset: 0.3em; } .work-meta { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 1.5rem 0 2rem; font-family: var(--font-mono); font-size: 0.9rem; } @media (min-width: 40rem) { .work-meta { grid-template-columns: repeat(3, minmax(0, 12rem)); gap: 2.5rem; } } .work-meta dt { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .work-meta dd { margin: 0; text-transform: uppercase; } .work-body { max-width: 52ch; margin: 0; } /* Large screens (≥1440px / 2K+): grow the heading and give each accordion entry more vertical room so the list fills the height rather than leaving a void above the footer. Additive — no effect below 90rem. */ @media (min-width: 90rem) { .work-headline { font-size: clamp(3.25rem, 3.6vw, 4.25rem); margin-block: clamp(2.5rem, 5vh, 4rem) 1rem; } .work-entry { padding-block: clamp(1.5rem, 3.5vh, 3rem); } .work-title { font-size: 1.75rem; } .work-list { padding-bottom: clamp(3.5rem, 7vh, 6.5rem); } } /* --- Projects page ---------------------------------------------------------- */ .projects-page { background: var(--projects-bg); } /* Stacked by default (mobile/tablet): headline, then the sparkle doodle AFTER. Side-by-side only at the desktop breakpoint below. */ .projects-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; padding-block: 2rem 3rem; } .projects-headline { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 400; line-height: 1.2; margin: 0; } /* Emphasis is bold + italic (PT Serif italic 700) — matches home/about headlines. */ .projects-headline em { font-weight: 700; } .projects-doodle { width: min(100%, 12rem); height: auto; } @media (min-width: 64rem) { .projects-hero { flex-direction: row; align-items: center; gap: 2.5rem; } .projects-headline { flex: 1; } .projects-doodle { flex: 0 0 12rem; width: 12rem; } } .projects-grid { list-style: none; margin: 0; padding: 0 0 3.5rem; display: grid; grid-template-columns: 1fr; gap: 2rem 1.5rem; } .projects-grid > * { min-width: 0; } /* Tablet: two up. Desktop: three up (matches the design). Phones stay single column so each thumbnail + caption gets full width and reflows cleanly at 320px with no horizontal scroll (WCAG 1.4.10). */ @media (min-width: 36rem) { .projects-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 62rem) { .projects-grid { grid-template-columns: repeat(3, 1fr); } } .project-thumb { aspect-ratio: 286 / 242; border-radius: 0.75rem; overflow: hidden; background: var(--card-projects); } .project-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .project-title { font-size: 1.25rem; font-weight: 400; margin: 1rem 0 0.4rem; } .project-tags { margin: 0; font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; } /* Placeholder styling — visible only until the real Figma assets land in assets/. Swap the placeholder
for the commented in projects.html. */ .projects-doodle--placeholder, .project-thumb--placeholder { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--ink); font-family: var(--font-mono); font-size: 0.8rem; text-align: center; color: var(--ink); padding: 1rem; } .projects-doodle--placeholder { aspect-ratio: 1 / 1; border-radius: 0.75rem; } /* --- Button (styled link) ---------------------------------------------------- */ .button { display: inline-block; background: var(--ink); color: var(--paper); /* 14.9:1 — AAA */ font-family: var(--font-mono); font-size: 1rem; text-decoration: none; padding: 0.9rem 1.75rem; border-radius: 2rem; min-height: 44px; /* WCAG 2.5.5 AAA target size */ } .button:hover { background: var(--plum); } /* --- Footer -------------------------------------------------------------------- */ .site-footer { background: var(--lavender-deep); color: var(--plum); /* Fluid vertical padding; horizontal gutter uses the shared --page-margin step so the footer aligns with header and main at every breakpoint. */ padding: clamp(2rem, 5vw, 4rem) var(--page-margin); } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; } /* Handwritten invitation — Caveat, plum on lavender-deep is 8.0:1 (AAA large). */ .footer-tagline { font-family: var(--font-script); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.1; margin: 0 0 1rem; } .footer-doodle { flex: 0 0 auto; width: clamp(90px, 11vw, 160px); height: auto; } .footer-heading { font-size: 1rem; font-weight: 400; margin: 0 0 0.5rem; } .contact-list { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; list-style: none; margin: 0; padding: 0; font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 700; } .contact-list li + li { border-left: 3px solid var(--plum); padding-left: 1.5rem; } .contact-list a { color: var(--plum); text-decoration: none; display: inline-block; padding-block: 0.25rem; } .contact-list a:hover, .contact-list a:focus-visible { text-decoration: underline; text-underline-offset: 0.3em; } /* --- Utilities -------------------------------------------------------------------- */ /* Visually hidden but exposed to screen readers */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* WCAG 2.3.3 / COGA: respect reduced motion for any future animation */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }