/* ========================================================================== DRAFTING TABLE — site theme -------------------------------------------------------------------------- Engineering-drawing language: hairline grid, dimension lines, registration marks, sheet/section numbering, square corners, paper/graphite/drafting blue with red annotations. Every rule is scoped under .theme-draft, set on in index, skills, portfolio and timeline. It layers over styles.css rather than replacing it, so reverting a page is removing its body class and its to this file. ========================================================================== */ .theme-draft { --paper: #F2F1EC; --graphite: #1E2124; --ink2: #3A3E43; --ink3: #5A5F65; --blue: #2B4C7E; --red: #C1443A; --rule: #CAC7BC; --sans: "Inter", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; background-color: var(--paper); background-image: linear-gradient(to right, rgba(43, 76, 126, .055) 1px, transparent 1px), linear-gradient(to bottom, rgba(43, 76, 126, .055) 1px, transparent 1px); background-size: 28px 28px; color: var(--graphite); font-family: var(--sans); } /* let the drafting grid show through the old section backgrounds. .bg-light is a Bootstrap utility declared !important, so this has to match. */ .theme-draft .masthead, .theme-draft .page-section, .theme-draft .bg-light, .theme-draft .footer { background: transparent !important; } .theme-draft ::selection { background: var(--blue); color: var(--paper); } /* ---------- navigation ---------- */ .theme-draft #mainNav { background: rgba(242, 241, 236, .93); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); box-shadow: none; padding: 0; } .theme-draft #mainNav .container { padding: .85rem 2rem; } /* swap the white logo for a drafting-style wordmark (homepage only) */ .theme-draft .navbar-brand img { display: none; } .theme-draft .navbar-brand::after { content: "M. BLANCKAERT"; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .2em; color: var(--graphite); } .theme-draft #mainNav .navbar-nav .nav-link { font-family: var(--mono); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink3) !important; padding: .25rem 0; margin: 0 .85rem; border-bottom: 2px solid transparent; } .theme-draft #mainNav .navbar-nav .nav-link:hover { color: var(--graphite) !important; } .theme-draft #mainNav .navbar-nav .nav-link.active { color: var(--graphite) !important; border-bottom-color: var(--red); } .theme-draft #mainNav .dropdown-menu { border-radius: 0; border: 1px solid var(--rule); background: var(--paper); box-shadow: none; padding: .35rem 0; } .theme-draft #mainNav .dropdown-item { padding: .3rem 1rem; } .theme-draft .navbar-toggler { border-radius: 0; border: 1px solid var(--rule); color: var(--ink3); font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; } /* buttons — square, mono, no gold */ .theme-draft #mainNav .btn-primary, .theme-draft .hero-actions .btn-primary { border-radius: 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; font-weight: 500; } .theme-draft #mainNav .btn-primary { background: transparent; border: 1px solid var(--rule); color: var(--ink3); padding: .5rem 1.05rem; } .theme-draft #mainNav .btn-primary:hover { background: var(--graphite); border-color: var(--graphite); color: var(--paper); } .theme-draft .hero-actions .btn-primary { background: var(--graphite); border: 1px solid var(--graphite); color: var(--paper); padding: .65rem 1.35rem; } .theme-draft .hero-actions .btn-primary:hover { background: var(--blue); border-color: var(--blue); } /* ---------- hero ---------- */ .theme-draft .masthead { padding: 8.5rem 1rem 4rem; } .theme-draft .header-content { align-items: flex-start; gap: 4rem; } .theme-draft .text-content { max-width: none; } .theme-draft .sheet-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; color: var(--blue); margin-bottom: 1.25rem; } .theme-draft .text-content h1, .theme-draft .text-content .text-highlight { font-size: clamp(1.9rem, 3.9vw, 2.85rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; margin: 0; } .theme-draft .text-content .highlight { color: var(--graphite); } .theme-draft .text-content .text-highlight { color: var(--blue); } .theme-draft .text-content .based-in { font-size: clamp(1.45rem, 3vw, 2.1rem); font-weight: 300; color: var(--ink3); } /* dimension line, drafting style */ .theme-draft .dim { display: flex; align-items: center; gap: .55rem; margin: 1.15rem 0 1.4rem; color: var(--blue); font-family: var(--mono); font-size: .63rem; letter-spacing: .1em; } .theme-draft .dim .bar { position: relative; flex: 1 1 auto; max-width: 240px; height: 1px; background: var(--blue); } .theme-draft .dim .bar::before, .theme-draft .dim .bar::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--blue); } .theme-draft .dim .bar::before { left: 0; } .theme-draft .dim .bar::after { right: 0; } .theme-draft .description { font-family: var(--sans); font-size: .95rem; line-height: 1.7; color: var(--ink2); max-width: 46ch; } .theme-draft .description a { color: var(--graphite); text-decoration: none; border-bottom: 1px solid var(--red); } .theme-draft .description a:hover { background: rgba(193, 68, 58, .1); } .theme-draft .social-icon { border-radius: 0; border: 1px solid var(--rule); color: var(--ink3); background: transparent; } .theme-draft .social-icon:hover { border-color: var(--graphite); color: var(--graphite); } .theme-draft .expertise { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; color: var(--ink3); margin-top: 1.6rem; } /* figure plate with registration marks */ .theme-draft .plate { position: relative; border: 1px solid var(--graphite); padding: 7px; background: #fff; } .theme-draft .plate .profile-image { border-radius: 0; width: 100%; display: block; filter: grayscale(1) contrast(1.06); } .theme-draft .cross { position: absolute; width: 11px; height: 11px; } .theme-draft .cross::before, .theme-draft .cross::after { content: ""; position: absolute; background: var(--red); } .theme-draft .cross::before { left: 5px; top: 0; width: 1px; height: 11px; } .theme-draft .cross::after { top: 5px; left: 0; height: 1px; width: 11px; } .theme-draft .cross.c1 { top: -6px; left: -6px; } .theme-draft .cross.c2 { top: -6px; right: -6px; } .theme-draft .cross.c3 { bottom: -6px; left: -6px; } .theme-draft .cross.c4 { bottom: -6px; right: -6px; } .theme-draft .fig-cap { display: flex; justify-content: space-between; margin-top: .7rem; font-family: var(--mono); font-size: .61rem; letter-spacing: .1em; color: var(--ink3); } /* ---------- about ---------- */ .theme-draft #about { padding-top: 4rem; } /* the old layout pulled the rows up under the heading with a -8rem margin; the drafting rows set their own rhythm, so neutralise it and left-align */ .theme-draft #about .text-center { margin-bottom: 2.5rem !important; text-align: left !important; width: 100%; } .theme-draft .aboutContainer { align-items: stretch; } @media (min-width: 992px) { .theme-draft .aboutContainer { padding-left: 0; padding-right: 0; } } /* Section intros across every page. styles.css targets these as `.page-section h2.section-heading`, so these selectors have to outrank it. The About row titles also carry .section-heading, but their #about rule outranks both. */ .theme-draft .section-heading, .theme-draft .page-section h2.section-heading, .theme-draft .page-section .section-heading.h2 { font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .22em; color: var(--blue); margin-bottom: .6rem; } .theme-draft .section-subheading, .theme-draft .page-section h3.section-subheading, .theme-draft .page-section .section-subheading.h3 { font-family: var(--sans); font-style: normal; font-size: .9rem; color: var(--ink3); text-transform: none; } .theme-draft .aboutContainer { counter-reset: sheet; gap: 0; } .theme-draft .aboutRow { counter-increment: sheet; position: relative; gap: 3rem; border-top: 1px solid var(--rule); padding: 3.2rem 0 .4rem; margin: 0; width: 100%; } .theme-draft .aboutRow::before { content: "\00A7 " counter(sheet, decimal-leading-zero); position: absolute; top: 1.1rem; left: 0; font-family: var(--mono); font-size: .63rem; letter-spacing: .14em; color: var(--blue); } /* Bootstrap's percentage columns plus the row's gap overflowed the container. Flex ratios keep the same proportions and let the gap subtract properly. */ .theme-draft .aboutRow > [class*="col-sm-"] { width: auto; max-width: none; min-width: 0; padding: 0; } .theme-draft .aboutRow > .col-sm-4 { flex: 4 1 0; } .theme-draft .aboutRow > .col-sm-5 { flex: 5 1 0; } .theme-draft .aboutRow > .col-sm-6 { flex: 6 1 0; } .theme-draft .aboutRow > .col-sm-7 { flex: 7 1 0; } .theme-draft .aboutRow > .col-sm-8 { flex: 8 1 0; } .theme-draft #about .aboutSectionTitle { font-family: var(--sans); font-size: 1.16rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; color: var(--graphite); margin-bottom: 1.25rem; text-transform: none; } .theme-draft .aboutRow { font-size: .93rem; line-height: 1.72; color: var(--ink2); } .theme-draft .aboutRow a { color: var(--graphite); text-decoration: none; border-bottom: 1px solid var(--red); } .theme-draft .aboutRow a b { font-weight: 600; } .theme-draft .aboutRow img:not(.emoji) { border-radius: 0; border: 1px solid var(--rule); filter: grayscale(.55) contrast(1.04); width: 100%; height: auto; display: block; } .theme-draft .aboutRow ul { padding-left: 1.1rem; margin-top: .6rem; } .theme-draft .aboutRow li { line-height: 1.9 !important; } .theme-draft .intermediateMsg { border-top: 1px solid var(--rule); padding: 3rem 0 1rem; width: 100%; color: var(--blue); } .theme-draft #about .intermediateMsg .aboutSectionTitle { font-family: var(--mono); font-size: .82rem; font-weight: 400; letter-spacing: .06em; color: var(--blue); line-height: 1.9 !important; } /* ---------- footer ---------- */ .theme-draft .footer { border-top: 1px solid var(--rule); padding: 2rem 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--ink3); } .theme-draft .footer .btn-social { border-radius: 0; background: transparent; border: 1px solid var(--rule); color: var(--ink3); } .theme-draft .footer .btn-social:hover { background: var(--graphite); border-color: var(--graphite); color: var(--paper); } /* ---------- responsive ---------- */ @media (max-width: 768px) { .theme-draft .masthead { padding: 6.5rem 1rem 3rem; } .theme-draft .header-content { gap: 2.5rem; } /* keep wordmark, toggler and resume on a single row */ .theme-draft #mainNav .container { padding: .7rem 1rem; flex-wrap: nowrap; gap: .4rem; } .theme-draft .navbar-brand::after { font-size: .6rem; letter-spacing: .12em; } .theme-draft #mainNav .btn-primary { padding: .4rem .65rem; font-size: .58rem; letter-spacing: .08em; } .theme-draft .navbar-toggler { padding: .35rem .55rem; font-size: .58rem; } /* the base mobile rules centre the hero; drafting wants it left */ .theme-draft .header-content .text-content { text-align: left !important; } .theme-draft .dim { justify-content: flex-start; } .theme-draft .hero-actions { justify-content: flex-start; } .theme-draft .description { max-width: none; } /* base rules add margin-top to the hero image, which opened a white gap inside the plate now that the plate has its own padding */ .theme-draft .header-content .image-content img { margin-top: 0; } .theme-draft .aboutRow { flex-direction: column; gap: 1.8rem; padding-top: 3rem; } .theme-draft .aboutRow > [class*="col-sm-"] { flex: 1 1 auto; width: 100%; } .theme-draft .fig-cap { font-size: .58rem; } } /* ========================================================================== Shared controls ========================================================================== */ .theme-draft .btn-primary { border-radius: 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; font-weight: 500; background: var(--graphite); border: 1px solid var(--graphite); color: var(--paper); } .theme-draft .btn-primary:hover { background: var(--blue); border-color: var(--blue); color: var(--paper); } .theme-draft .btn-social, .theme-draft .btn-dark.btn-social { border-radius: 0 !important; background: transparent; border: 1px solid var(--rule); color: var(--ink3); } .theme-draft .btn-social:hover, .theme-draft .btn-dark.btn-social:hover { background: var(--graphite); border-color: var(--graphite); color: var(--paper); } /* modals — resume + the 17 portfolio ones */ .theme-draft .modal-content { border-radius: 0; border: 1px solid var(--graphite); background: var(--paper); box-shadow: none; } .theme-draft .modal-body { font-family: var(--sans); color: var(--ink2); } .theme-draft .close-modal { border-radius: 0; } /* ========================================================================== Timeline ========================================================================== */ .theme-draft .timeline:before { background-color: var(--rule); width: 1px; } /* square plates instead of circles — no rounded corners anywhere */ .theme-draft .timeline > li .timeline-image { border-radius: 0 !important; background: #fff !important; border: 1px solid var(--graphite); padding: 5px; box-shadow: none; } .theme-draft .timeline > li .timeline-image img { border-radius: 0 !important; border: 0; /* styles.css puts a 2px gold ring here */ display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.04); } /* the birth marker has no image, just a date — keep it as a solid plate */ .theme-draft .timeline > li:last-child .timeline-image { background: var(--blue) !important; border-color: var(--blue); } .theme-draft .timeline > li .timeline-image h4 { font-family: var(--mono); font-size: 9px; line-height: 13px; letter-spacing: .08em; color: #fff; margin: 0; } .theme-draft .timeline .timeline-heading h4:not(.subheading) { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; color: var(--blue); margin-bottom: .35rem; } .theme-draft .timeline .timeline-heading .subheading { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; color: var(--graphite); text-transform: none; } .theme-draft .timeline .timeline-body p { font-family: var(--sans); font-size: .88rem; line-height: 1.7; color: var(--ink2) !important; } .theme-draft .timeline .timeline-body a { color: var(--graphite); text-decoration: none; border-bottom: 1px solid var(--red); } /* ========================================================================== Skills ========================================================================== */ /* styles.css pins this to a fixed column count with a 12rem minimum, which overflows between breakpoints. auto-fit adapts instead. */ .theme-draft .skillListContainer { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); padding: 0; gap: .6rem; } .theme-draft .hardSkill { background: transparent; border: 1px solid var(--rule); border-radius: 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--ink2); padding: .55rem .7rem; /* grid stretches every box to the tallest in its row, so centre the label in whatever height it ends up with */ display: flex; align-items: center; justify-content: center; text-align: center; } /* the coin keeps its circle — a turned part reads fine on a drawing */ .theme-draft .coin-face { box-shadow: none; border: 1px solid var(--graphite); } .theme-draft .coin-face--front { background: #FAF9F5; box-shadow: inset 0 0 0 9px var(--paper), inset 0 0 0 10px var(--rule); } .theme-draft .coin-face--back { background: var(--blue); border-color: var(--blue); box-shadow: inset 0 0 0 9px var(--blue), inset 0 0 0 10px rgba(255,255,255,.35); } .theme-draft .coin-face h4 { font-family: var(--sans); font-weight: 600; letter-spacing: -.015em; font-size: 1.2rem; color: var(--graphite); } .theme-draft .coin-face p { font-family: var(--sans); color: var(--ink2) !important; } .theme-draft .coin-face--back h4 { color: #fff; } .theme-draft .coin-face--back p { color: rgba(255,255,255,.86) !important; } .theme-draft .coin:focus-visible { outline-color: var(--blue); } .theme-draft .coin-hint { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; color: var(--ink3); } /* certifications */ .theme-draft .skills img.rounded-circle { border-radius: 0 !important; border: 1px solid var(--rule); padding: 6px; background: #fff; } .theme-draft .skills h4 { font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: var(--graphite); } .theme-draft .skills p.text-muted { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--ink3) !important; } /* soft-skill icon stacks — drop the gold */ .theme-draft .fa-stack .text-primary { color: var(--blue) !important; } /* ========================================================================== Portfolio ========================================================================== */ .theme-draft .portfolio .portfolio-item .portfolio-link .portfolio-hover { background: rgba(30, 33, 36, .88); } .theme-draft .portfolio .portfolio-item img { border-radius: 0; border: 1px solid var(--rule); border-bottom: 0; } .theme-draft .portfolio .portfolio-item .portfolio-caption { background-color: transparent; border: 1px solid var(--rule); border-top: 0; text-align: left; padding: 1.1rem 1.2rem 1.3rem; } .theme-draft .portfolio .portfolio-item .portfolio-caption .portfolio-caption-heading { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; color: var(--graphite); } .theme-draft .portfolio .portfolio-item .portfolio-caption .portfolio-caption-subheading { font-family: var(--mono); font-style: normal; font-size: .66rem; letter-spacing: .1em; color: var(--blue) !important; } .theme-draft .portfolio-modal .modal-body h2, .theme-draft .portfolio-modal .modal-body .h2 { font-family: var(--sans); font-weight: 600; letter-spacing: -.025em; color: var(--graphite); } /* styles.css targets this as `.portfolio-modal .modal-content p.item-intro` */ .theme-draft .portfolio-modal .modal-content p.item-intro, .theme-draft .portfolio-modal .item-intro { font-family: var(--mono); font-style: normal; font-size: .68rem; letter-spacing: .1em; color: var(--blue) !important; } .theme-draft .portText { font-family: var(--sans); font-size: .93rem; line-height: 1.72; color: var(--ink2); } .theme-draft .portText a { color: var(--graphite); text-decoration: none; border-bottom: 1px solid var(--red); } .theme-draft .portImgTitle { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--blue); } .theme-draft .tag { font-family: var(--mono) !important; font-size: .62rem !important; letter-spacing: .12em; color: var(--ink3) !important; opacity: 1 !important; } .theme-draft .portfolio-modal .img-portfolio, .theme-draft .portfolio-modal .img-fluid.d-block { border-radius: 0; border: 1px solid var(--rule); } /* ========================================================================== Final pass — inherited colours from styles.css ========================================================================== */ /* base link colour is the old gold; specific rules above still win */ .theme-draft a { color: var(--graphite); } .theme-draft a:hover { color: var(--blue); } .theme-draft .portfolio-hover, .theme-draft .portfolio-hover-content, .theme-draft .portfolio-hover-content * { color: #fff; } /* the Skills dropdown trigger is a .btn, which carries a 4px radius */ .theme-draft #mainNav .nav-link.btn, .theme-draft #mainNav .nav-link { border-radius: 0; } .theme-draft .navbar-brand { color: var(--graphite); } /* equal-height portfolio cards so the hairline boxes align across a row */ .theme-draft .portfolio .row > [class*="col-"] { display: flex; } .theme-draft .portfolio .portfolio-item { width: 100%; display: flex; flex-direction: column; } .theme-draft .portfolio .portfolio-item .portfolio-caption { flex: 1 1 auto; } /* ========================================================================== Tweaks ========================================================================== */ /* styles.css draws its active marker as .active::after — but Bootstrap's dropdown caret is the *same* pseudo-element, so the two cases split: plain links drop the pseudo entirely, the Skills toggle gets its caret put back inline (otherwise its border shows as a bar under our red rule). */ .theme-draft #mainNav .navbar-nav .nav-link.active:not(.dropdown-toggle)::after { content: none; } .theme-draft #mainNav .navbar-nav .dropdown-toggle.active::after { position: static; background: transparent; width: 0; height: 0; border-top: .3em solid currentColor; border-right: .3em solid transparent; border-left: .3em solid transparent; border-bottom: 0; margin-left: .35em; vertical-align: .18em; } /* section headings, a size up across every page */ .theme-draft .section-heading, .theme-draft .page-section h2.section-heading, .theme-draft .page-section .section-heading.h2 { font-size: .95rem; letter-spacing: .18em; margin-bottom: .8rem; } /* about rows: breathing room after each, slightly smaller photos */ .theme-draft .aboutRow { padding: 3.2rem 0 3.2rem; } .theme-draft .aboutRow img:not(.emoji) { max-width: 87%; margin-inline: auto; } /* the birth marker holds text rather than an image — centre it */ .theme-draft .timeline > li:last-child .timeline-image { display: flex; align-items: center; justify-content: center; } /* ========================================================================== Skills — the coin as an engineering part drawing Plan view (the flipping coin) sits inside an SVG annotation layer that carries centre lines, a diameter callout, a hatched section view and a title block. Container and overlay share one aspect ratio so the geometry stays registered at any width. ========================================================================== */ .theme-draft .coin-drawing { position: relative; width: 100%; max-width: 900px; margin: 0 auto; aspect-ratio: 900 / 620; perspective: 1800px; } .theme-draft .coin-annot { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .theme-draft .an-centre { stroke: var(--blue); stroke-width: 1; stroke-dasharray: 18 4 3 4; /* drafting centre line */ opacity: .65; } .theme-draft .an-dim { stroke: var(--blue); stroke-width: 1; } .theme-draft .an-ext { stroke: var(--blue); stroke-width: 1; opacity: .7; } .theme-draft .an-fill { fill: var(--blue); } .theme-draft .an-hatch { stroke: var(--blue); stroke-width: 1; opacity: .5; } .theme-draft .an-sect { fill: url(#hatch); } .theme-draft .an-outline { fill: none; stroke: var(--graphite); stroke-width: 1; } .theme-draft .an-plate { fill: var(--paper); } .theme-draft .an-txt { font-family: var(--mono); font-size: 15px; letter-spacing: .1em; fill: var(--blue); } .theme-draft .an-key { fill: var(--graphite); font-size: 13px; } .theme-draft .an-mid { text-anchor: middle; } .theme-draft .an-end { text-anchor: end; } /* the coin itself, positioned as the plan view */ .theme-draft .coin-drawing .coin { position: absolute; left: 10%; top: 14.52%; width: 46.67%; height: auto; aspect-ratio: 1 / 1; max-width: none; transition: transform 1150ms cubic-bezier(.18, .72, .22, 1); } .theme-draft .coin-drawing .coin-face { padding: 13% 14%; } .theme-draft .coin-drawing .coin-face p { font-size: .78rem; line-height: 1.5; } .theme-draft .coin-drawing .coin-face h4 { font-size: 1.05rem; margin-bottom: .6rem; } @media (prefers-reduced-motion: reduce) { .theme-draft .coin-drawing .coin { transition-duration: 1ms; } } /* below this the plan view gets too small to hold its own text, so the annotations are dropped and the part becomes a plain flipping tile */ @media (max-width: 1000px) { .theme-draft .coin-annot { display: none; } .theme-draft .coin-drawing { aspect-ratio: auto; display: flex; justify-content: center; } .theme-draft .coin-drawing .coin { position: static; width: min(460px, 92vw); } .theme-draft .coin-drawing .coin-face { padding: 14% 15%; } } @media (max-width: 767px) { .theme-draft .coin-drawing .coin { aspect-ratio: 2 / 3; } .theme-draft .coin-drawing .coin-face { padding: 2rem 1.4rem; } } /* ========================================================================== Portfolio — hover caption + ongoing (non-clickable) card ========================================================================== */ /* .tag is themed grey for the modals, but the same class sits on the dark hover overlay where grey-on-graphite is ~1.6:1. Keep it near-white there. */ .theme-draft .portfolio-hover .tag { color: #F2F1EC !important; opacity: 1 !important; } /* an experience with no write-up yet: no modal, no pointer, and the caption centres because there is no plus icon above it to clear */ .theme-draft .portfolio-link--static { cursor: default; } .theme-draft .portfolio-link--static .tag { bottom: 0; } /* the existing portfolio art is all 3:2 — pin the ratio so a differently proportioned photo cannot push its caption out of line with the row */ .theme-draft .img-portfolio { aspect-ratio: 3 / 2; object-fit: cover; }