/* ══════════════════════════════════════════════════════════════════════ about.css — the About page (info.html) only. Loaded after style.css. Everything here is scoped under `.about-page` on , so the shared .info-section / .contact-row / .skill-tag rules keep working untouched on contact.html. Why a restyle: the About page was still the first-draft template — Inter-bold headings, tag pills, flat rows — while the rest of the site moved to the Fraunces/Cormorant editorial voice. This brings it in line and adds the personal collage, without changing the 3-column shell. ══════════════════════════════════════════════════════════════════════ */ .about-page { /* Local lines. The global --border token is `transparent` right now (hairlines are switched off site-wide), which is what made the skill pills render as bare words. Don't flip that token — own the colour here. */ --ab-line: #E6E3DE; --ab-line-strong: #D6D2CB; /* Warm neutrals, borrowed from the homepage personal wall so the two scrapbook moments read as the same hand. */ --ab-paper: #F4F1EC; --ab-paper-warm: #EDE7DA; --ab-ink-soft: #56514A; } /* ── Left column ── same size as every other heading on home + About. */ .about-page .hero-name { font-size: var(--h-size); } /* Keep "I'm Namira." on one line once the left column is wide enough for it (below ~1250px it would run into the centre heading, so it wraps there). */ @media (min-width: 1250px) { .about-page .hero-name .name-italic { white-space: nowrap; } } /* ── Right column ── .right-header is a space-between flex row that used to hold the availability tag on the left and the portrait on the right. With the tag gone the portrait is the only child, so space-between parks it left while its caption below stays right-aligned. Pin it back to the right edge. */ .about-page .right-header { justify-content: flex-end; } /* ── Section rhythm ── The old page leaned on 1px dividers that no longer render. Space does the separating now; the label is the marker that a new section started. */ .about-page .info-section { padding: clamp(2.75rem, 5vw, 4.5rem) clamp(1.5rem, 3.2vw, 3rem); border-bottom: none; } .about-page .info-section + .info-section { padding-top: 0; } /* Random facts breaks out full-bleed. This file loads after style.css and ties it on specificity (two classes each), so the side padding above would otherwise win the cascade by load order — killing the bleed. Zero it here instead of in style.css, next to the rule it has to beat. */ .about-page .info-section.is-bleed { padding-left: 0; padding-right: 0; } /* ── Section label — eyebrow + rose diamond, as on the homepage wall ── */ .about-page .page-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(1.1rem, 2vw, 1.6rem); } .about-page .page-label::before { content: '\25C6'; /* ◆ */ color: var(--accent); font-size: 0.6em; letter-spacing: 0; } /* ── Display heading ── Cormorant Garamond, the homepage statement face, instead of Inter 700. */ .about-page .info-heading { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size: var(--h-size); font-weight: 500; line-height: 1.06; letter-spacing: -0.025em; color: var(--ink); margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); max-width: 20ch; } .about-page .info-heading em { font-style: italic; } /* ── Body copy ── */ .about-page .info-text { font-size: clamp(0.95rem, 1.15vw, 1.05rem); line-height: 1.8; color: var(--ab-ink-soft); max-width: 58ch; margin-bottom: 1.15rem; } /* The opening paragraph carries a little more weight than the two after it. */ .about-page .info-text.is-lede { font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.65; color: var(--ink); max-width: 46ch; margin-bottom: 1.6rem; } .about-page .info-text:last-child { margin-bottom: 0; } /* ══════════════════════════════════════════════════════════════════════ Diamond lists — What I do, Off the desk Same ◆ + accent vocabulary as .page-label, set at body size. A hanging indent, not a grid or a flex row: the lead-in and the phrase after it have to stay in one inline flow or the em dash and every word after it break onto their own lines. The marker is an inline-block of exactly the indent width, so it baseline-aligns with the first line on its own and wrapped lines land flush under the text. ══════════════════════════════════════════════════════════════════════ */ .about-page .ab-list { list-style: none; margin: 0; padding: 0; max-width: 58ch; } .about-page .ab-list li { padding-left: 1.4rem; text-indent: -1.4rem; font-size: clamp(0.95rem, 1.15vw, 1.05rem); line-height: 1.8; color: var(--ab-ink-soft); } .about-page .ab-list li + li { margin-top: 0.9rem; } .about-page .ab-list li::before { content: '\25C6'; /* ◆ */ display: inline-block; width: 1.4rem; text-indent: 0; font-size: 0.6em; color: var(--accent); } .about-page .ab-lead { font-weight: 500; color: var(--ink); } /* Off the desk is two longer items, so they get more air between them and a heavier lead-in to hold them apart. */ .about-page .ab-list.is-spaced li + li { margin-top: 1.6rem; } .about-page .ab-list.is-spaced .ab-lead { font-weight: 600; } /* ══════════════════════════════════════════════════════════════════════ The collage (No longer used on the page — the Off the desk section is text now. Kept so the board can be dropped back in without rebuilding it.) ══════════════════════════════════════════════════════════════════════ */ /* The field runs the full width of the centre column: the negative inline margin cancels .info-section's own padding, so it bleeds column-edge to column-edge without any 100vw break-out (which the sticky side columns would sit on top of). */ .about-page .ab-field { margin-inline: calc(-1 * clamp(1.5rem, 3.2vw, 3rem)); padding: clamp(1.5rem, 3.2vw, 2.75rem) clamp(1rem, 2.4vw, 2rem); background-color: var(--grid-bg); background-image: var(--grid-img); /* The board reflows on its OWN width, not the viewport's: this column is 60% of the screen on desktop but full width once the layout stacks, so a plain media query would drop it to two columns at exactly the wrong moments. */ container-type: inline-size; container-name: board; } /* Three explicit columns of stacked pieces, each column a flex stack. This was CSS multi-column first — it balanced nicely, but Chrome paints an absolutely-positioned pseudo-element (the tape) a second time at the foot of a column, so every board grew a stray tape strip under its last piece. Explicit columns kill that, and let the three stacks be balanced by eye instead of by the browser. The @container rules below collapse 3 → 2 → 1. */ .about-page .ab-collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.7rem, 1.8vw, 1.2rem); align-items: start; /* Room for the tilt + shadow so nothing clips at the field edge. */ padding: 0.5rem 0.25rem; } .about-page .ab-col { display: flex; flex-direction: column; gap: clamp(0.7rem, 1.8vw, 1.2rem); } .about-page .ab-piece { /* --w scales a piece down inside its column. Tall objects (the coffee, the palm) fill a column edge-to-edge at 100% and swamp everything around them; this is how a cut-out gets sized by eye rather than by its file. */ width: var(--w, 100%); align-self: center; transform: rotate(var(--rot, 0deg)); transition: transform 480ms var(--ease); /* Each piece is its own query container, so the text inside a card scales off that card's width — not the board's, and not the viewport's. It stays in proportion whether the collage is 3 columns or 2. */ container-type: inline-size; } /* Hover straightens the piece and lifts it — the whole board settles. */ @media (hover: hover) { .about-page .ab-piece:hover { transform: rotate(0deg) translateY(-5px); position: relative; z-index: 2; } } /* ── Piece type 1: a mounted card ── */ .about-page .ab-card { background: var(--ab-paper); padding: 8% 8% 0; box-shadow: 0 8px 22px rgba(28, 27, 26, 0.10); } .about-page .ab-card.is-warm { background: var(--ab-paper-warm); } .about-page .ab-card img { display: block; width: 100%; height: auto; } /* ── Piece type 2: a bare cut-out, no mount ── */ .about-page .ab-free img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 12px rgba(28, 27, 26, 0.18)); } /* ── Piece type 3: the handwritten note ── */ .about-page .ab-note { background: #fffdf8; padding: 9% 9% 11%; box-shadow: 0 8px 22px rgba(28, 27, 26, 0.10); } .about-page .ab-note .tag { display: block; font-size: clamp(7px, 3.9cqw, 10px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.8em; } .about-page .ab-note p { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(12px, 6.6cqw, 19px); line-height: 1.35; color: #3a352f; } /* ── Captions ── */ .about-page .ab-cap { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(10px, 5.6cqw, 15px); line-height: 1.3; color: #6b5f4e; text-align: right; padding: 0.55em 0 0.7em; } /* A cut-out with no card sits straight on the grid — give its caption the same warmth but a touch more contrast against the field. */ .about-page .ab-free .ab-cap { color: #5d564c; } /* Tape: one translucent strip, off-centre, on the mounted pieces only. */ .about-page .ab-card { position: relative; } .about-page .ab-card::before { content: ''; position: absolute; top: -6px; left: 50%; width: 26%; height: 13px; transform: translateX(-50%) rotate(var(--tape, -2deg)); background: rgba(214, 205, 186, 0.55); box-shadow: 0 1px 2px rgba(28, 27, 26, 0.08); } /* Narrower boards drop to two stacks, then one. The third stack spans the full width and goes 2-up rather than sitting in one column — left as a plain grid item it wraps under the first column and leaves the board's bottom-right corner empty. */ @container board (max-width: 620px) { .about-page .ab-collage { grid-template-columns: repeat(2, 1fr); } .about-page .ab-col:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; } } @container board (max-width: 380px) { .about-page .ab-collage { grid-template-columns: 1fr; } .about-page .ab-col:last-child { grid-column: auto; display: flex; flex-direction: column; } } /* ══════════════════════════════════════════════════════════════════════ Services rows — same four rows, set as a proper editorial list ══════════════════════════════════════════════════════════════════════ */ .about-page .contact-row { align-items: baseline; gap: 1.5rem; padding: clamp(1rem, 1.8vw, 1.4rem) 0; border-top: 1px solid var(--ab-line); transition: border-color 0.25s; } .about-page .contact-row:last-child { border-bottom: 1px solid var(--ab-line); } .about-page .contact-row:hover { border-top-color: var(--ab-line-strong); } .about-page .contact-row-label { font-size: clamp(1rem, 1.6vw, 1.25rem); font-family: 'Cormorant Garamond', Georgia, serif; font-style: normal; font-weight: 500; letter-spacing: -0.01em; text-transform: none; color: var(--ink); flex: 0 0 auto; transition: transform 0.3s var(--ease); } @media (hover: hover) { .about-page .contact-row:hover .contact-row-label { transform: translateX(4px); } } .about-page .contact-row-value { font-size: 0.82rem; color: var(--muted); text-align: right; } /* ══════════════════════════════════════════════════════════════════════ Skills & tools — the pills again, with a line you can actually see ══════════════════════════════════════════════════════════════════════ */ .about-page .skills-grid { gap: 0.45rem; } .about-page .skill-tag { border: 1px solid var(--ab-line); border-radius: 100px; padding: 0.4rem 0.95rem; font-size: 0.76rem; color: var(--ab-ink-soft); background: #fff; transition: border-color 0.2s, color 0.2s, background 0.2s; } .about-page .skill-tag:hover { border-color: var(--ink); color: var(--ink); background: var(--ab-paper); } /* ── Motion off ── The tilt is the collage's look, not motion, so it stays; only the hover straighten-and-lift and the row nudge are switched off. */ @media (prefers-reduced-motion: reduce) { .about-page .ab-piece, .about-page .contact-row-label { transition: none; } .about-page .ab-piece:hover { transform: rotate(var(--rot, 0deg)); } .about-page .contact-row:hover .contact-row-label { transform: none; } }