/* ===================================================================== pages.css, blog + FAQ subpages Loaded AFTER style.css. Everything here is additive: no existing selector is redefined except the two opacity overrides below, which are required, not cosmetic. ===================================================================== */ /* style.css ships .header and .hdr-actions at opacity:0 because on the homepage main.js fades them in once the preloader finishes. These pages deliberately do not load main.js (it is 1,800 lines built around the hero canvas, GSAP timelines and Matter.js), so without this the header would simply never appear. */ body.subpage .header, body.subpage .hdr-actions { opacity: 1; } /* .page-wrap reads background: var(--black), which is not defined in :root, the token is --dark. Harmless today because is black underneath, but it means the wrapper is transparent. Pinned here so the subpages do not inherit the same gap. */ .page-wrap { background: var(--dark); } :root { --rule: rgba(255, 255, 255, 0.12); --ink-1: rgba(255, 255, 255, 0.88); --ink-2: rgba(255, 255, 255, 0.62); --ink-3: rgba(255, 255, 255, 0.42); --page-x: clamp(1.25rem, 5vw, 4rem); } /* ===== PAGE HEAD ===================================================== */ .page-head { padding: clamp(8rem, 14vw, 11rem) var(--page-x) clamp(2.5rem, 5vw, 4rem); max-width: 1320px; margin-inline: auto; } .page-head__label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.1rem; } .page-head__title { font-family: "Nohemi", sans-serif; font-weight: 600; font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -0.035em; line-height: 1.05; color: #fff; max-width: 16ch; } .page-head__intro { margin-top: 1.6rem; max-width: 58ch; font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.65; color: var(--ink-2); } .blog-head { text-align: center; padding-top: clamp(4.5rem, 7vw, 6rem); padding-bottom: 1.25rem; } .blog-head .page-head__title, .blog-head .page-head__intro { margin-inline: auto; } .blog-head + .posts { padding-top: 1.25rem; } /* ===== BREADCRUMBS =================================================== */ .crumbs { max-width: 1320px; margin-inline: auto; padding: 0 var(--page-x); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .crumbs a { color: var(--ink-3); transition: color 0.25s var(--ease); } .crumbs a:hover, .crumbs a:focus-visible { color: var(--accent); } .crumbs span { margin: 0 0.55rem; opacity: 0.5; } /* ===== BLOG INDEX ==================================================== */ .posts { max-width: 1320px; margin-inline: auto; padding: clamp(2.5rem, 5vw, 4rem) var(--page-x) clamp(3rem, 6vw, 5rem); } .posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.8rem, 4vw, 3.4rem) clamp(1.5rem, 3.5vw, 3rem); justify-content: center; } /* with one or two posts the grid centres them instead of leaving a lopsided hole on the right */ .posts-grid:has(> :last-child:nth-child(1)) { grid-template-columns: minmax(0, 420px); } .posts-grid:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 420px)); } /* same centring when a search or filter leaves one or two cards (pages.js sets data-shown); hidden cards take no grid cell */ .posts-grid[data-shown="1"] { grid-template-columns: minmax(0, 420px); } .posts-grid[data-shown="2"] { grid-template-columns: repeat(2, minmax(0, 420px)); } .posts-grid[data-shown="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .posts-grid .pcard[hidden] { display: none; } .pcard { display: block; color: inherit; text-decoration: none; text-align: center; } .pcard:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; } /* the scalloped mask is a cosine-modulated ellipse, generated as one path in objectBoundingBox units so it stretches to any card size */ .pcard__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; /* sits behind the photo so a slow or failed image still renders as a branded card rather than a hole with alt text in it */ background: linear-gradient(155deg, #2a6d70 0%, #123c3f 55%, #040d0f 100%); transition: transform 0.8s var(--ease); } .pcard:hover .pcard__media { transform: scale(1.035); } .pcard__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(0.92); transition: transform 1s var(--ease), filter 0.6s var(--ease); } .pcard:hover .pcard__media img { transform: scale(1.06); } /* duotone: a brand gradient laid over a desaturated image */ .pcard__duo { position: absolute; inset: 0; background: linear-gradient(155deg, rgba(130, 202, 204, 0.85) 0%, rgba(107, 184, 255, 0.5) 45%, rgba(8, 23, 26, 0.9) 100%); mix-blend-mode: color; transition: opacity 0.6s var(--ease); } .pcard__wash { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.45)); transition: opacity 0.6s var(--ease); } .pcard:hover .pcard__wash { opacity: 0.55; } .pcard__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(0.86); } /* a drawn card image is already on palette: skip the photo grey-out and the duotone wash, which would turn its teal muddy */ .pcard__media > img[src$=".svg"], .pcard__media > img.pcard__img-clean, .pcard__media > img[src*="hybrid-retrieval"] { filter: none; } .pcard__media:has(> img[src$=".svg"]) .pcard__duo, .pcard__media:has(> img.pcard__img-clean) .pcard__duo, .pcard__media:has(> img[src*="hybrid-retrieval"]) .pcard__duo { display: none; } /* clip-path clips a CSS border along with the element, so the wavy edge has to be drawn as an SVG stroke following the same path. vector-effect keeps it 1.6px even though the viewBox is stretched. */ .pcard__edge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: rgba(130, 202, 204, 0.55); transition: color 0.45s var(--ease); } .pcard:hover .pcard__edge { color: rgba(130, 202, 204, 0.95); } .pcard__art { position: absolute; inset: 0; display: grid; place-items: center; } .pcard__art { inset: 0; } .pcard__art svg { width: 100%; height: 100%; display: block; } .pcard__art .ph { transform-origin: 50% 50%; transition: transform 1.1s var(--ease); } .pcard:hover .pcard__art .ph { transform: rotate(30deg); } .pcard__meta { display: flex; justify-content: center; align-items: center; /* long category labels ("About Agneya IT Solutions") are wider than a card on a phone; without this the row overflows instead of breaking */ flex-wrap: wrap; gap: 0.35rem 0.6rem; margin-top: 1.5rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .pcard__meta b { color: var(--accent); font-weight: 400; } .pcard__dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; } .pcard__title { margin-top: 0.85rem; font-family: "Nohemi", sans-serif; font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.42rem); letter-spacing: -0.025em; line-height: 1.25; color: #fff; transition: color 0.35s var(--ease); } .pcard:hover .pcard__title { color: var(--accent); } .posts-more { text-align: center; padding-bottom: clamp(2rem, 5vw, 4rem); } .posts-more a { display: inline-block; font-family: "Nohemi", sans-serif; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; padding-bottom: 6px; border-bottom: 2px solid rgba(255, 255, 255, 0.45); transition: color 0.35s var(--ease), border-color 0.35s var(--ease); } .posts-more a:hover { color: var(--accent); border-color: var(--accent); } @media (max-width: 900px) { .posts-grid, .posts-grid[data-shown="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .posts-grid:has(> :last-child:nth-child(1)), .posts-grid[data-shown="1"] { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .posts-grid, .posts-grid:has(> :last-child:nth-child(2)), .posts-grid[data-shown] { grid-template-columns: minmax(0, 1fr); } .pcard__media { aspect-ratio: 1 / 1; } .pcard__title { font-size: 1.22rem; } .pcard:hover .pcard__media { transform: none; } } /* article hero image, same duotone family as the cards. One size on every post: 16:9, never wider than 1040px. The src asks Unsplash for a 1400x788 crop so the file already matches. */ .post__hero { margin: 0 0 2.6rem; max-width: 1040px; } .post__hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; filter: grayscale(0.85) contrast(1.05) brightness(0.8) sepia(0.15) hue-rotate(140deg); } .post__hero img[src$=".svg"], .post__hero img.post__hero-clean, .post__hero img[src*="hybrid-retrieval"] { filter: none; } .post__hero figcaption { margin-top: 0.7rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } /* ===== ARTICLE ======================================================= */ .post { max-width: 1320px; margin-inline: auto; padding: 0 var(--page-x) clamp(4rem, 8vw, 7rem); } /* the measure is capped but stays flush with the page margin, so the article column lines up under the h1 instead of floating to centre */ .post__meta, .post__body, .post-foot { max-width: 760px; } .post__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 2rem; margin-bottom: 2.6rem; border-bottom: 1px solid var(--rule); } .post__meta .is-accent { color: var(--accent); } .post__body > * + * { margin-top: 1.35em; } .post__body p { font-size: 1.06rem; line-height: 1.78; color: var(--ink-1); } .post__body .lead { font-size: clamp(1.15rem, 1.7vw, 1.32rem); line-height: 1.6; color: #fff; letter-spacing: -0.012em; } .post__body h2 { font-family: "Nohemi", sans-serif; font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 1.85rem); letter-spacing: -0.03em; line-height: 1.2; color: #fff; margin-top: 2.8em; margin-bottom: 0.2em; } .post__body h3 { font-family: "Nohemi", sans-serif; font-weight: 600; font-size: 1.12rem; letter-spacing: -0.02em; color: #fff; margin-top: 2em; } .post__body ul, .post__body ol { padding-left: 1.15rem; color: var(--ink-1); } .post__body li { margin-bottom: 0.6em; line-height: 1.7; } .post__body li::marker { color: var(--accent); } .post__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; text-decoration-color: rgba(130, 202, 204, 0.45); transition: text-decoration-color 0.25s var(--ease); } .post__body a:hover { text-decoration-color: var(--accent); } .post__body strong { color: #fff; font-weight: 600; } /* Comparison tables. Needed by the comparison pattern and by the mid-post artifact the writing guide calls Hook 3; without these a table renders browser-default and lands off-palette on the dark page. The wrapper scrolls on narrow screens so a wide table never forces the whole page to scroll sideways. */ .post__table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .post__body table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.6; color: var(--ink-1); } .post__body thead th { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.68rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); text-align: left; padding: 0 1rem 0.7rem 0; border-bottom: 1px solid var(--rule); white-space: nowrap; } .post__body tbody td { padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; } .post__body tbody tr:last-child td { border-bottom: 0; } .post__body tbody td:first-child { color: #fff; } .post__body caption { caption-side: top; text-align: left; font-size: 0.85rem; color: var(--ink-2); padding-bottom: 0.75rem; font-style: italic; } .post__body caption strong { font-style: normal; color: #fff; } .post__body code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.88em; background: rgba(255, 255, 255, 0.08); padding: 0.15em 0.45em; border-radius: 4px; color: var(--accent); } .post__callout { margin: 2.2rem 0; padding: 1.4rem 1.6rem; background: rgba(130, 202, 204, 0.06); border-left: 3px solid var(--accent); border-radius: 6px; } .post__callout-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem; } .post__callout p:last-child { margin: 0; color: var(--ink-1); font-size: 1.05rem; line-height: 1.7; } .post__body figure { margin: 2.5rem 0; } .post__body figure img { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--rule); } .post__body figcaption { margin-top: 0.75rem; font-size: 0.85rem; line-height: 1.5; color: var(--ink-2); } .post__body figcaption strong { color: #fff; } .pull { margin: 2.8em 0; padding-left: clamp(1rem, 3vw, 1.6rem); border-left: 2px solid var(--accent); font-family: "Nohemi", sans-serif; font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.4; letter-spacing: -0.025em; color: #fff; } .post-foot { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between; align-items: center; } .post-foot__back { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); transition: color 0.25s var(--ease); } .post-foot__back:hover { color: var(--accent); } /* ===== EDITORIAL ARTICLE ============================================= */ /* Tag, title, date, hero, body, then more posts. Nothing else. Scoped to .post--editorial so posts still on the old layout are untouched. */ .post--editorial { --measure: 680px; max-width: none; padding: clamp(7.5rem, 13vw, 10rem) var(--page-x) clamp(4rem, 8vw, 6.5rem); } .post--editorial .post__head, .post--editorial .post__body { max-width: var(--measure); margin-inline: auto; } .post__tag { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .post__title { margin-top: 1rem; font-family: "Nohemi", sans-serif; font-weight: 600; font-size: clamp(2.1rem, 4.6vw, 3.1rem); letter-spacing: -0.03em; line-height: 1.1; color: #fff; text-wrap: balance; } .post__date { display: block; margin-top: 1.4rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } /* wider than the text column, centred under it */ .post--editorial .post__hero { margin: clamp(2.5rem, 5vw, 3.5rem) auto clamp(2.75rem, 5.5vw, 4rem); } .post--editorial .post__hero img { border-radius: 4px; } .post--editorial .post__body p { font-size: 1.125rem; line-height: 1.75; } .post--editorial .post__body li { font-size: 1.125rem; } .post--editorial .post__body p, .post--editorial .post__body li { text-wrap: pretty; } .post--editorial .post__body h2 { font-size: clamp(1.4rem, 2.4vw, 1.7rem); } /* source list: present, but quieter than the text */ .post__sources { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); } .post--editorial .post__sources h2 { margin: 0 0 1.2rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); } .post--editorial .post__sources li { font-size: 0.9rem; line-height: 1.6; color: var(--ink-2); } /* ===== MORE FROM THE BLOG ============================================ */ .more { padding: 0 var(--page-x) clamp(4rem, 8vw, 7rem); } .more > * { max-width: 1040px; margin-inline: auto; } .more__title { padding-top: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 1px solid var(--rule); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); } /* ===== BLOG SEARCH ================================================= */ /* Search box and category filters above the post grid on /blog. */ .bfind { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); } .bfind__search { flex: 0 1 340px; } .bfind__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .bfind__input { width: 100%; padding: 0.75rem 1.1rem 0.75rem 2.7rem; border: 1px solid var(--rule); border-radius: 999px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 1.05rem 50% / 16px; color: #fff; font-family: "Nohemi", sans-serif; font-size: 1rem; transition: border-color 0.25s var(--ease); } .bfind__input::placeholder { color: var(--ink-3); } .bfind__input:hover { border-color: rgba(255, 255, 255, 0.28); } .bfind__input:focus { outline: none; border-color: var(--accent); } .bfind__input:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; } .bfind__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; } .bfind__filter, .blog__reset { padding: 0.6rem 1rem; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink-2); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease); } .bfind__filter:hover, .blog__reset:hover { color: #fff; border-color: rgba(255, 255, 255, 0.32); } .bfind__filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #06201f; } .bfind__filter:focus-visible, .blog__reset:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; } .bfind__status { min-height: 1.2em; margin: 1rem 0 clamp(1.5rem, 3vw, 2.25rem); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .bfind[hidden], .blog__empty[hidden] { display: none; } .blog__empty { padding: clamp(2rem, 6vw, 4rem) 0; text-align: center; color: var(--ink-2); } .blog__reset { margin-top: 1.2rem; } @media (max-width: 760px) { .bfind__search { flex-basis: 100%; } } @media (max-width: 640px) { .post--editorial .post__body p, .post--editorial .post__body li { font-size: 1.06rem; } /* let headers wrap so a three-column table fits without sideways scroll */ .post--editorial .post__body thead th { white-space: normal; } .post--editorial .post__body table { font-size: 0.88rem; } } /* ===== FAQ =========================================================== */ .faq { max-width: 1320px; margin-inline: auto; padding: clamp(1.5rem, 3vw, 2.5rem) var(--page-x) clamp(4rem, 8vw, 7rem); } .faq__layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; } .faq__group { max-width: 820px; } /* sticky index: shortens the page by giving it a spine to jump around, rather than a single long scroll */ .faq-idx { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 2px; } .faq-idx__item { display: flex; align-items: baseline; gap: 12px; padding: 0.55rem 0; font-family: "Nohemi", sans-serif; font-size: 0.95rem; letter-spacing: -0.015em; color: var(--ink-3); transition: color 0.35s var(--ease), transform 0.5s var(--ease); } .faq-idx__item:hover { color: #fff; transform: translateX(4px); } .faq-idx__item.is-on { color: var(--accent); } .faq-idx__n { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ink-3); transition: color 0.35s var(--ease); } .faq-idx__item.is-on .faq-idx__n { color: var(--accent); } .faq-idx__note { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); font-size: 0.82rem; line-height: 1.6; color: var(--ink-3); } .faq-idx__note a { color: var(--accent); } @media (max-width: 900px) { .faq__layout { grid-template-columns: minmax(0, 1fr); gap: 0; } .faq-idx { position: static; flex-direction: row; flex-wrap: wrap; gap: 0 1.4rem; margin-bottom: 2.2rem; } .faq-idx__item { padding: 0.35rem 0; font-size: 0.86rem; } .faq-idx__item:hover { transform: none; } .faq-idx__note { flex-basis: 100%; margin-top: 1rem; padding-top: 1rem; } .faq__group { max-width: none; } } .faq__group + .faq__group { margin-top: clamp(2.4rem, 4.5vw, 3.4rem); } /* the sticky index already names each group, so the inline label only appears once the index collapses on narrow screens */ .faq__group-title { display: none; } @media (max-width: 900px) { .faq__group-title { display: block; } } .faq__group-title { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.7rem; } /* the rule above each row doubles as the hover indicator: a hairline that an accent bar wipes across from the left */ .faq-line { display: block; position: relative; height: 1px; background: var(--rule); overflow: hidden; } .faq-line i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease); } .faq-item:hover .faq-line i, .faq-item.is-open .faq-line i { transform: scaleX(1); } .faq-q { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(1rem, 3vw, 2rem); padding: clamp(1.15rem, 2.2vw, 1.55rem) 0; background: none; border: 0; cursor: pointer; text-align: left; color: #fff; } .faq-q__text { font-family: "Nohemi", sans-serif; font-weight: 500; font-size: clamp(1rem, 1.7vw, 1.18rem); letter-spacing: -0.02em; line-height: 1.4; transition: color 0.4s var(--ease), transform 0.6s var(--ease); } .faq-item:hover .faq-q__text { color: var(--accent); transform: translateX(8px); } .faq-item.is-open .faq-q__text { color: var(--accent); } .faq-q:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; } /* ( + ) toggle: brackets part on hover, the plus loses its upright to become a minus when the answer is open */ .faq-tog { flex: 0 0 auto; display: flex; align-items: center; font-size: 1.05rem; line-height: 1; color: rgba(255, 255, 255, 0.45); transition: color 0.4s var(--ease); margin-top: 0.1em; } .faq-item:hover .faq-tog, .faq-item.is-open .faq-tog { color: var(--accent); } .faq-br { transition: transform 0.6s var(--ease); } .faq-item:hover .faq-br.l, .faq-item.is-open .faq-br.l { transform: translateX(-7px); } .faq-item:hover .faq-br.r, .faq-item.is-open .faq-br.r { transform: translateX(7px); } .faq-ic { position: relative; width: 13px; height: 13px; margin: 0 5px; } .faq-ic::before, .faq-ic::after { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 1px; background: currentColor; transition: transform 0.6s var(--ease), opacity 0.4s var(--ease); } .faq-ic::after { transform: rotate(90deg); } .faq-item.is-open .faq-ic::after { transform: rotate(0); opacity: 0; } /* 0fr -> 1fr animates height with no JS measurement */ .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease); } .faq-item.is-open .faq-a { grid-template-rows: 1fr; } .faq-a__inner { overflow: hidden; } .faq-a__inner > div { padding: 0 clamp(0px, 12vw, 150px) 1.7rem 0; } .faq-a p { font-size: 0.99rem; line-height: 1.72; color: var(--ink-2); } .faq-a p + p { margin-top: 0.9em; } .faq-a a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.22em; } /* answers arrive a line at a time, each line masked by its own wrapper */ .faq-ln { display: block; overflow: clip; } .faq-li { display: block; transform: translateY(110%); transition: transform 0.8s var(--ease); } .faq-item.is-open .faq-li { transform: translateY(0); } @media (max-width: 620px) { .faq-a__inner > div { padding-right: 0; } .faq-item:hover .faq-q__text { transform: none; } .faq-tog { font-size: 0.95rem; } } /* ===== CLOSING CTA =================================================== */ .page-cta { max-width: 1320px; margin-inline: auto; padding: clamp(3.5rem, 7vw, 6rem) var(--page-x) clamp(4rem, 8vw, 6rem); text-align: center; } .page-cta__title { font-family: "Nohemi", sans-serif; font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.15; color: #fff; } .page-cta__sub { margin-top: 0.9rem; font-size: 1rem; color: var(--ink-2); } .page-cta__btn { display: inline-block; margin-top: 2rem; padding: 0.95rem 2.1rem; border-radius: 100px; background: #fff; color: #000; font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; transition: transform 0.35s var(--ease), background 0.3s var(--ease); } .page-cta__btn:hover { transform: translateY(-2px); background: var(--accent); } @media (prefers-reduced-motion: reduce) { .pcard__media { transition: none; } .faq-a, .post-card, .post-card__arrow, .page-cta__btn { transition: none; } } /* ===== PORTFOLIO GALLERY ============================================= */ .pf-wrap { max-width: 1320px; margin-inline: auto; padding: clamp(1.5rem, 3vw, 2.5rem) var(--page-x) clamp(3rem, 6vw, 5rem); } .pf-count { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.8rem; } .pf-count span { color: var(--accent); } /* three columns: text left, projects centre, index right */ .wk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px) 180px; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; max-width: 1600px; margin-inline: auto; padding: clamp(7rem, 12vw, 9rem) clamp(1.25rem, 3vw, 2.4rem) clamp(4rem, 8vw, 7rem); } .wk__intro { position: sticky; top: clamp(7rem, 12vw, 9rem); } .wk__title { font-family: "Nohemi", sans-serif; font-weight: 600; font-size: clamp(2rem, 3.6vw, 3.2rem); letter-spacing: -0.038em; line-height: 1.04; color: #fff; max-width: 12ch; } .wk__lead { margin-top: 1.4rem; max-width: 36ch; font-size: 0.98rem; line-height: 1.65; color: var(--ink-2); } .wk__metas { margin-top: clamp(2.5rem, 6vw, 4.5rem); display: flex; flex-direction: column; gap: 1.1rem; } .wk__meta { margin: 0; } .wk__meta dt { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.35rem; } .wk__meta dd { margin: 0; font-size: 0.92rem; color: var(--ink-1); } .wk__meta dd a { color: var(--ink-1); border-bottom: 1px solid rgba(255,255,255,.22); transition: color .3s var(--ease), border-color .3s var(--ease); } .wk__meta dd a:hover { color: var(--accent); border-color: var(--accent); } .pf-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4rem); } .pf-item { scroll-margin-top: 120px; } .pf-idx { position: sticky; top: 38vh; display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .pf-idx__lab { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.66rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9rem; } .pf-idx__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .pf-idx__link { display: block; font-family: "Nohemi", sans-serif; font-size: 0.85rem; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink-3); cursor: pointer; transition: color .4s var(--ease), transform .5s var(--ease); } .pf-idx__link:hover { color: #fff; } .pf-idx__link.is-on { color: var(--accent); transform: translateX(-4px); } .pf-idx__peek { margin-top: 1.5rem; width: 100%; aspect-ratio: 1.736/1; border: 1px solid var(--rule); border-radius: 7px; display: grid; place-items: center; background: linear-gradient(150deg,#1c5b5e,#0c2b2d 55%,#04100f); font-family: "Nohemi", sans-serif; font-size: 0.78rem; color: rgba(255,255,255,.6); } /* back link, used on every subpage */ .backlink { display: inline-block; margin-bottom: 1.6rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); transition: color .3s var(--ease); } .backlink i { font-style: normal; display: inline-block; transition: transform .4s var(--ease); } .backlink:hover { color: var(--accent); } .backlink:hover i { transform: translateX(-4px); } @media (max-width: 1080px) { .wk { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .wk__intro { position: static; } .pf-idx { display: none; } .wk__title { max-width: none; } } /* pages.js rewrites clip-path on this element while the page is moving */ .pf__media { will-change: clip-path; } .pf { display: block; color: inherit; text-decoration: none; } /* a project with no public URL: same card, but nothing to click */ .pf--private { cursor: default; } .pf--private .pf__chrome b { font-style: italic; } .pf__note { display: block; width: 100%; margin-top: 0.4rem; color: var(--ink-3); text-transform: none; letter-spacing: 0.04em; font-size: 0.68rem; } .pf:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; } /* stand-in for a screenshot: a browser frame carrying the live domain. Swap the .pf__mark span for an when real captures exist. */ .pf__media { position: relative; margin: 0; aspect-ratio: 1.736 / 1; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; display: grid; place-items: center; transition: border-color 0.5s var(--ease), transform 0.7s var(--ease); } .pf__media--a { background: linear-gradient(150deg, #1c5b5e 0%, #0c2b2d 55%, #04100f 100%); } .pf__media--b { background: linear-gradient(150deg, #1b4468 0%, #0b2437 55%, #040d14 100%); } .pf__media--c { background: linear-gradient(150deg, #2c6d70 0%, #123a3c 55%, #050f10 100%); } .pf:hover .pf__media { transform: translateY(-5px); border-color: rgba(130, 202, 204, 0.45); } .pf__chrome { position: absolute; inset: 0 0 auto 0; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: rgba(0, 0, 0, 0.32); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .pf__chrome i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); } .pf__chrome b { margin-left: 10px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.64rem; font-weight: 400; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.5); transition: color 0.4s var(--ease); } .pf:hover .pf__chrome b { color: var(--accent); } /* real screenshot sits over the gradient stand-in. If the file is missing pages.js removes it, so the gradient and project name show instead of a broken image icon. */ .pf__shot { position: absolute; inset: 34px 0 0 0; width: 100%; height: calc(100% - 34px); object-fit: cover; object-position: top center; opacity: 0; transition: opacity 0.6s var(--ease), transform 1s var(--ease); } .pf__shot.is-in { opacity: 1; } .pf:hover .pf__shot { transform: scale(1.03); } .pf__mark { font-family: "Nohemi", sans-serif; font-weight: 600; font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.13); transition: color 0.5s var(--ease); padding-top: 34px; } .pf:hover /* real screenshot sits over the gradient stand-in. If the file is missing pages.js removes it, so the gradient and project name show instead of a broken image icon. */ .pf__shot { position: absolute; inset: 34px 0 0 0; width: 100%; height: calc(100% - 34px); object-fit: cover; object-position: top center; opacity: 0; transition: opacity 0.6s var(--ease), transform 1s var(--ease); } .pf__shot.is-in { opacity: 1; } .pf:hover .pf__shot { transform: scale(1.03); } .pf__mark { color: rgba(255, 255, 255, 0.26); } .pf__shine { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.07) 50%, transparent 65%); transform: translateX(-100%); transition: transform 0.9s var(--ease); } .pf:hover .pf__shine { transform: translateX(100%); } .pf__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; } .pf__title { font-family: "Nohemi", sans-serif; font-weight: 600; font-size: clamp(1.1rem, 1.8vw, 1.35rem); letter-spacing: -0.025em; color: #fff; transition: color 0.35s var(--ease); } .pf:hover .pf__title { color: var(--accent); } .pf__cat { margin-top: 0.3rem; font-size: 0.9rem; color: var(--ink-2); } .pf__year { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.12em; color: var(--ink-3); flex: 0 0 auto; } .pf__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.8rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .pf__status { padding: 3px 9px; border-radius: 100px; border: 1px solid currentColor; font-size: 0.6rem; } .pf__status.is-live { color: var(--accent); } .pf__status.is-wip { color: rgba(255, 255, 255, 0.45); } @media (max-width: 900px) { .pf-layout { grid-template-columns: minmax(0, 1fr); } .pf-idx { display: none; } } @media (max-width: 720px) { .pf-grid { gap: 2.4rem; } .pf:hover .pf__media { transform: none; } .pf-grid { grid-template-columns: minmax(0, 1fr); } }