/* ========================================================================== PERSONAL PROJECTS PAGE ONLY The one page that leaves the site's red and white system. Each section wears the brand of the project inside it. Colors are sampled from the logo files; fonts are the closest open match to each brand's type. To tweak a brand, change its variables in the matching block below. ========================================================================== */ @font-face { font-family: "Shrikhand"; src: url("/assets/fonts/shrikhand-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Poiret One"; src: url("/assets/fonts/poiret-one-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Cinzel"; src: url("/assets/fonts/cinzel-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Cinzel"; src: url("/assets/fonts/cinzel-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Abril Fatface"; src: url("/assets/fonts/abril-fatface-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Uncial Antiqua"; src: url("/assets/fonts/uncial-antiqua-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; } /* ---- Brand palettes ---------------------------------------------------- */ .personal .chapter--guacatio { --b-bg: #00C3FE; --b-fg: #111111; --b-soft: rgb(17 17 17 / 0.8); --b-accent: #F2591D; --b-line: #111111; --b-plate: #111111; --b-plate-fg: #FFFFFF; --b-plate-shadow: 5px 5px 0 #F2591D; --b-frame: 3px solid #111111; --b-frame-shadow: 7px 7px 0 #F2591D; --b-radius: 18px; --b-font: "Shrikhand", "Barlow Condensed", sans-serif; --b-case: none; --b-track: 0; --b-weight: 400; --b-num: #111111; } .personal .chapter--zephyrus { --b-bg: #0E0D0C; --b-fg: #EDE3D3; --b-soft: #BFB29C; --b-accent: #C9A85C; --b-line: #C9A85C; --b-plate: transparent; --b-plate-fg: #E4CCB4; --b-plate-shadow: none; --b-frame: 1px solid #C9A85C; --b-frame-shadow: none; --b-radius: 2px; --b-font: "Poiret One", "Barlow", sans-serif; --b-case: uppercase; --b-track: 0.14em; --b-weight: 400; --b-num: #C9A85C; } .personal .chapter--ess { --b-bg: #0A1E3D; --b-fg: #F3EEE4; --b-soft: #C9D1DE; --b-accent: #B98A4C; --b-line: #B98A4C; --b-plate: #B98A4C; --b-plate-fg: #0A1E3D; --b-plate-shadow: 5px 5px 0 #7A1A10; --b-frame: 2px solid #B98A4C; --b-frame-shadow: 7px 7px 0 #7A1A10; --b-radius: 6px; --b-font: "Cinzel", Georgia, serif; --b-case: uppercase; --b-track: 0.04em; --b-weight: 700; --b-num: #B98A4C; } .personal .chapter--virtus { --b-bg: #F2ECE1; --b-fg: #30240C; --b-soft: #5C4A34; --b-accent: #B4180C; --b-line: #30240C; --b-plate: #30240C; --b-plate-fg: #F2ECE1; --b-plate-shadow: 5px 5px 0 #B4180C; --b-frame: 2px solid #30240C; --b-frame-shadow: 7px 7px 0 #B4180C; --b-radius: 4px; --b-font: "Abril Fatface", Georgia, serif; --b-case: none; --b-track: 0.01em; --b-weight: 400; --b-num: #B4180C; } .personal .chapter--dnd { --b-bg: #EADBB8; --b-fg: #2B1D12; --b-soft: #4A3626; --b-accent: #7E1D1D; --b-line: #2B1D12; --b-plate: #7E1D1D; --b-plate-fg: #F3E6C8; --b-plate-shadow: 5px 5px 0 #2B1D12; --b-frame: 2px solid #2B1D12; --b-frame-shadow: 7px 7px 0 #7E1D1D; --b-radius: 4px; --b-font: "Uncial Antiqua", Georgia, serif; --b-case: none; --b-track: 0; --b-weight: 400; --b-num: #7E1D1D; } /* ---- Apply the palette to everything inside a section ------------------- */ .org-page .personal .chapter[class*="chapter--"] { background: var(--b-bg); color: var(--b-fg); --bg: var(--b-bg); --text: var(--b-fg); --text-soft: var(--b-soft); --link: var(--b-accent); --line: var(--b-line); --hd-bg: var(--b-plate); --hd-fg: var(--b-plate-fg); --shadow: var(--b-accent); padding-bottom: clamp(2rem, 5vw, 4rem); } .org-page .personal .chapter[class*="chapter--"] > section, .org-page .personal .chapter[class*="chapter--"] > section.block--alt { background: transparent; } .org-page .personal .chapter[class*="chapter--"] .chapter__num { color: var(--b-num); font-family: var(--b-font); } .org-page .personal .chapter[class*="chapter--"] :is(.chapter__title, .block__heading) { font-family: var(--b-font); font-weight: var(--b-weight); text-transform: var(--b-case); letter-spacing: var(--b-track); background: var(--b-plate); color: var(--b-plate-fg); box-shadow: var(--b-plate-shadow); } .org-page .personal .chapter[class*="chapter--"] :is(.chapter__meta, .chapter__intro, p) { color: inherit; } .org-page .personal .chapter[class*="chapter--"] .chapter__meta { color: var(--b-accent); } .org-page .personal .chapter[class*="chapter--"] .chapter__intro { color: var(--b-soft); } .org-page .personal .chapter[class*="chapter--"] .shot__btn { border: var(--b-frame); box-shadow: var(--b-frame-shadow); border-radius: var(--b-radius); background: var(--b-bg); } .org-page .personal .chapter[class*="chapter--"] .shot__btn:hover { transform: translate(-2px, -2px); } /* Zephyrus: the deco rule under the title instead of a plate */ .org-page .personal .chapter--zephyrus .chapter__title { padding: 0 0 0.25em; border-bottom: 1px solid #C9A85C; border-radius: 0; font-size: clamp(2rem, 5vw, 3.4rem); } .org-page .personal .chapter--zephyrus .chapter__intro { font-size: 1.15rem; line-height: 1.75; } /* Guacatío Joe: chunky and loose */ .org-page .personal .chapter--guacatio .chapter__title { transform: rotate(-1.5deg); } .org-page .personal .chapter--guacatio .chapter__intro { color: #111; font-weight: 500; } /* ESS: gold rules either side of the meta line */ .org-page .personal .chapter--ess .chapter__meta { font-family: "Cinzel", serif; letter-spacing: 0.12em; } /* Virtus: editorial serif, red period like the wordmark */ .org-page .personal .chapter--virtus .chapter__title::after { content: "."; color: #B4180C; } /* D&D: parchment card */ .org-page .personal .chapter--dnd .callout { background: #2B1D12; border-left: 6px solid #7E1D1D; color: #F3E6C8; } .org-page .personal .chapter--dnd .callout__heading { font-family: "Uncial Antiqua", serif; color: #F3E6C8; } .org-page .personal .chapter--dnd .callout__kicker { color: #E6B35C; } .org-page .personal .chapter--dnd .callout__body p { color: #E8DCC0; } /* Tuning */ .org-page .personal .chapter--guacatio[class*="chapter--"] .chapter__meta { color: #111; } .org-page .personal .chapter--ess .chapter__title { font-size: clamp(1.8rem, 4vw, 3rem); } .org-page .personal .chapter--ess .block__heading { font-size: clamp(1.3rem, 2.4vw, 1.8rem); } .org-page .personal .chapter--dnd .chapter__title { text-transform: none; } /* ---- Logos stand in for the section titles ------------------------------ */ .org-page .personal .chapter__num { display: none; } .org-page .personal .chapter__inner { grid-template-columns: 1fr; } .org-page .personal .chapter__logo { margin: 0 0 1rem; line-height: 0; } .org-page .personal .chapter__logo img { display: block; width: auto; height: auto; max-width: min(100%, 34rem); max-height: 11rem; } .org-page .personal .chapter--guacatio .chapter__logo img { max-height: 13rem; filter: drop-shadow(5px 5px 0 #111); transform: rotate(-2deg); } .org-page .personal .chapter--ess .chapter__logo img { max-width: min(100%, 38rem); } .org-page .personal .chapter--virtus .chapter__logo img { max-height: 8rem; } /* ESS: keep the badge from swallowing the split */ .org-page .personal .chapter--ess .split { align-items: center; } .org-page .personal .chapter--ess .split__media { max-width: 24rem; justify-self: end; width: 100%; } .org-page .personal .chapter--zephyrus .chapter__logo img { max-height: 15rem; } .org-page .personal .chapter--ess .split__media .shot__btn { border: 0; box-shadow: none; background: transparent; } /* ========================================================================== Two-column layout: story on the left, collage on the right ========================================================================== */ .org-page .personal .chapter[class*="chapter--"] { padding: clamp(3rem, 7vw, 6rem) 0; } .personal .pp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; } .personal .pp__text { position: sticky; top: 9rem; text-align: left; } .personal .pp__text .chapter__logo { margin: 0 0 1.25rem; } .personal .pp__text .chapter__meta { margin: 0 0 1.25rem; } .personal .pp__text p { margin: 0 0 1em; max-width: 34rem; line-height: 1.65; color: var(--b-soft); } .personal .pp__text .pp__lead { font-size: 1.08rem; color: var(--b-fg); } .personal .pp__sub { font-family: var(--b-font); font-weight: var(--b-weight); text-transform: var(--b-case); letter-spacing: var(--b-track); font-size: clamp(1.15rem, 1.8vw, 1.45rem); color: var(--b-accent); margin: 1.75rem 0 0.5rem; } .personal .chapter--guacatio .pp__sub { color: #111; } .personal .chapter--guacatio .pp__text p { color: #111; } /* Collage */ .personal .artgrid--pp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(8rem, 12vw, 11rem); gap: 0.75rem; height: auto; } .personal .artgrid--pp .artgrid__cell { aspect-ratio: auto; min-height: 0; } .personal .artgrid--pp .artgrid__btn { width: 100%; height: 100%; background: var(--b-bg); border: var(--b-frame); box-shadow: var(--b-frame-shadow); border-radius: var(--b-radius); } .personal .artgrid--pp .artgrid__btn img { width: 100%; height: 100%; object-fit: cover; background: transparent; } .personal .artgrid--pp .is-contain .artgrid__btn img { object-fit: contain; padding: 4%; } .personal .chapter--guacatio .artgrid--pp .is-contain .artgrid__btn img { padding: 0; } /* Layouts by number of pieces. Each piece sits in a cell shaped close to its own proportions. */ .personal .artgrid--pp { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(5rem, 8vw, 7.5rem); } /* 2: side by side */ .personal .artgrid--pp[data-n="2"] > * { grid-column: span 3; grid-row: span 5; } /* 3: tall portrait left, two stacked right */ .personal .artgrid--pp[data-n="3"] > :nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 7; } .personal .artgrid--pp[data-n="3"] > :nth-child(2) { grid-column: 4 / 7; grid-row: 1 / 3; } .personal .artgrid--pp[data-n="3"] > :nth-child(3) { grid-column: 4 / 7; grid-row: 3 / 7; } /* 4: two tall on top, two wide below */ .personal .artgrid--pp[data-n="4"] > :nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 5; } .personal .artgrid--pp[data-n="4"] > :nth-child(2) { grid-column: 4 / 7; grid-row: 1 / 5; } .personal .artgrid--pp[data-n="4"] > :nth-child(3) { grid-column: 1 / 4; grid-row: 5 / 7; } .personal .artgrid--pp[data-n="4"] > :nth-child(4) { grid-column: 4 / 7; grid-row: 5 / 7; } /* 5: square + wide on top, three across below */ .personal .artgrid--pp[data-n="5"] > :nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; } .personal .artgrid--pp[data-n="5"] > :nth-child(2) { grid-column: 3 / 7; grid-row: 1 / 3; } .personal .artgrid--pp[data-n="5"] > :nth-child(3) { grid-column: 1 / 3; grid-row: 3 / 5; } .personal .artgrid--pp[data-n="5"] > :nth-child(4) { grid-column: 3 / 5; grid-row: 3 / 5; } .personal .artgrid--pp[data-n="5"] > :nth-child(5) { grid-column: 5 / 7; grid-row: 3 / 5; } /* Pop-out: small pieces grow more than big ones, and grow inward so nothing leaves the screen */ .personal .artgrid--pp .artgrid__cell { transform-origin: center; } .personal .artgrid--pp.is-popping .artgrid__cell.is-pop { --s: 1.3; } .personal .artgrid--pp[data-n="3"].is-popping > .is-pop:nth-child(1), .personal .artgrid--pp[data-n="2"].is-popping > .is-pop { --s: 1.1; } .personal .artgrid--pp[data-n="4"].is-popping > .is-pop:nth-child(-n+2) { --s: 1.15; } .personal .artgrid--pp > :is([style*="grid-column: 4"]), .personal .artgrid--pp[data-n="2"] > :nth-child(2), .personal .artgrid--pp[data-n="3"] > :nth-child(n+2), .personal .artgrid--pp[data-n="4"] > :nth-child(even), .personal .artgrid--pp[data-n="5"] > :nth-child(2), .personal .artgrid--pp[data-n="5"] > :nth-child(5) { transform-origin: right center; } .personal .artgrid--pp .artgrid__cell.is-pop .artgrid__btn { box-shadow: 0 24px 60px rgb(0 0 0 / 0.45); } @media (max-width: 56rem) { .personal .pp { grid-template-columns: 1fr; } .personal .pp__text { position: static; } } @media (max-width: 36rem) { .personal .artgrid--pp { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 4.5rem; } .personal .artgrid--pp[data-n] > :nth-child(n) { grid-column: auto; grid-row: span 2; } .personal .artgrid--pp[data-n] > :nth-child(1) { grid-column: 1 / -1; grid-row: span 4; } } /* Gentler scatter on this page so neighbors don't drift out of their columns */ .personal .artgrid--pp .artgrid__cell { transform: translate(calc(var(--dx, 0px) * 0.35), calc(var(--dy, 0px) * 0.35)) scale(var(--s, 1)); } /* Guacatío Joe: orange field, the character lineup standing on its own (no frame, no zoom) */ .org-page .personal .chapter--guacatio { --b-bg: #F2591D; --b-accent: #111111; --b-soft: #111111; } .personal .pp__static { margin: 0; } .personal .pp__static img { display: block; width: 100%; max-width: 34rem; height: auto; margin-left: auto; } .org-page .personal .chapter--guacatio .pp__text p.pp__lead { color: #FFFFFF; } /* The line under each logo uses one style across the whole page */ .org-page .personal .chapter[class*="chapter--"] .pp__text .chapter__meta { font-family: var(--font-label); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; } /* ---- One type system for all text on this page --------------------------- Logos carry the brand. Everything below them uses the same three styles: label line, subheading, body. Only the colors change per brand. */ .org-page .personal .chapter[class*="chapter--"] .pp__text p, .org-page .personal .chapter[class*="chapter--"] .pp__text p.pp__lead { font-family: var(--font-body, "Barlow", sans-serif); font-size: 1.05rem; font-weight: 400; line-height: 1.65; letter-spacing: 0; text-transform: none; } .org-page .personal .chapter[class*="chapter--"] .pp__text .pp__sub { font-family: var(--font-label); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; margin: 1.75rem 0 0.5rem; } /* Logos share one box so no brand looks bigger than another */ .org-page .personal .chapter[class*="chapter--"] .pp__text .chapter__logo img { max-height: 9.5rem; max-width: min(100%, 26rem); transform: none; } .org-page .personal .chapter--guacatio .pp__text .chapter__logo img { transform: rotate(-2deg); } /* Header: intro sits level with the title block */ .org-page .personal .org-head .case-head__inner { align-items: center; } .org-page .personal .org-head .lead-stack { align-self: center; margin: 0; }