*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb} :before,:after{--tw-content: ""} html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent} body{margin:0;line-height:inherit} hr{height:0;color:inherit;border-top-width:1px} abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted} h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit} a{color:inherit;text-decoration:inherit} b,strong{font-weight:bolder} code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em} small{font-size:80%} sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sub{bottom:-.25em} sup{top:-.5em} table{text-indent:0;border-color:inherit;border-collapse:collapse} button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0} button,select{text-transform:none} button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none} :-moz-focusring{outline:auto} :-moz-ui-invalid{box-shadow:none} progress{vertical-align:baseline} ::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto} [type=search]{-webkit-appearance:textfield;outline-offset:-2px} ::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} summary{display:list-item} blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0} fieldset{margin:0;padding:0} legend{padding:0} ol,ul,menu{list-style:none;margin:0;padding:0} dialog{padding:0} textarea{resize:vertical} input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af} input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af} button,[role=button]{cursor:pointer} :disabled{cursor:default} img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle} img,video{max-width:100%;height:auto} [hidden]:where(:not([hidden=until-found])){display:none} html,body{margin:0;padding:0;overflow-x:hidden} .bda-portfolio-shell{min-height:100vh;display:flex;flex-direction:column} /* Canvas color lives here, spanning the true full viewport width — .bda-portfolio itself only constrains its *content* to a comfortable max-width:1160px reading column, so without this, everything outside that centered column (on any viewport wider than 1160px) fell through to the page's plain white background, showing as ugly pale gutters flanking the content, between the full-width dark header and footer. */ .bda-portfolio-shell>main{flex:1 0 auto;display:flex;flex-direction:column;background:var(--bda-canvas)} .bda-portfolio{font-family:var(--bda-font-body);color:var(--bda-ink);background:var(--bda-canvas);max-width:1160px;margin:0 auto;padding:6rem 2rem} .bda-hero{text-align:center;padding:5rem 0 6rem;border-bottom:1px solid var(--bda-border);position:relative;overflow:hidden} /* Breaks the photo hero out of .bda-portfolio's own max-width/padding so it reaches the true viewport edges, the same "full-bleed section inside a centered container" technique the hero needs to look like a real photo hero rather than a boxed-in thumbnail. Only kicks in when a real hero photo is present (:has), so a plain text-only hero (the manual "Header" block, or an already-published pre-redesign page) keeps its original boxed layout untouched. */ .bda-hero:has(.bda-hero-photo){min-height:70vh;display:flex;align-items:center;justify-content:center;padding:0;border-bottom:none;margin:-6rem calc(50% - 50vw) 0;width:100vw} .bda-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0} .bda-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,.6) 100%)} /* color lives here (inherited by .bda-name), not on .bda-name itself — an inherited value loses to *any* explicit declaration regardless of its specificity, so a user's own color pick for the H1 via the Style Manager always wins. Setting color directly on .bda-hero:has(...) .bda-name instead (tried first) has two class-level selectors, which beats the plain .bda-name{color:...} rule GrapesJS writes when styling via an existing class — the user's edit visibly did nothing. */ .bda-hero:has(.bda-hero-photo) .bda-hero-content{color:var(--bda-canvas)} .bda-hero-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1.1rem;padding:4rem 2rem} .bda-hero:has(.bda-hero-photo) .bda-profile{border:3px solid var(--bda-canvas)} .bda-profile{width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:1.5rem} .bda-hero-image{width:100%;max-height:420px;object-fit:cover;margin-bottom:2.5rem} .bda-name{font-family:var(--bda-font-display);font-size:3.4rem;font-weight:300;margin-bottom:.75rem;letter-spacing:-.01em} .bda-discipline{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bda-accent)} .bda-hero-text{font-size:1.05rem;line-height:1.8;color:var(--bda-muted);max-width:46ch;margin:2rem auto 0} /* Full-viewport parallax hero, modeled directly on samlejeune.art's own markup (fetched and inspected directly:

, background-attachment:fixed, no at all — not guessed at). A new modifier class, not a change to the .bda-hero-photo -based rules above — same "additive, never rename" precedent as the rest of this hero's history: any already-published page using the old -based hero keeps its original 70vh boxed treatment untouched; only new onboardings emit .bda-hero--photo (a background-image on the section itself) and get this full-bleed parallax treatment. Trade-off accepted: unlike the old , this isn't double-click-swappable via GrapesJS's Asset Manager (no Background style-manager sector is wired up in this editor) — "Reset site & redo setup wizard" is the supported way to change a hero photo afterward. */ .bda-hero--photo{background-size:cover;background-position:center;background-attachment:fixed;height:100svh;min-height:560px;display:flex;align-items:center;justify-content:center;padding:0;border-bottom:none;margin:-6rem calc(50% - 50vw) 0;width:100vw} @media (prefers-reduced-motion: reduce){.bda-hero--photo{background-attachment:scroll}} .bda-hero--photo .bda-hero-content{color:var(--bda-canvas)} .bda-hero--photo .bda-profile{border:3px solid var(--bda-canvas)} .bda-tagline{font-size:clamp(.85rem, 2vw, 1rem);letter-spacing:.2em;text-transform:uppercase;color:var(--bda-accent)} .bda-cta{display:inline-block;margin-top:1.25rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bda-canvas);background:var(--bda-accent);text-decoration:none;padding:.9em 2.2em;border-radius:2px;transition:background-color .2s ease} .bda-cta:hover{background:var(--bda-ink)} .bda-section-title{font-family:var(--bda-font-display);font-size:1.9rem;font-weight:300;margin-bottom:2rem;display:inline-block;padding-bottom:.5rem;border-bottom:2px solid var(--bda-secondary)} .bda-bio,.bda-statement,.bda-gallery,.bda-contact{padding:5rem 0;border-bottom:1px solid var(--bda-border)} .bda-bio-text,.bda-statement-text{font-size:1.05rem;line-height:1.9;color:var(--bda-muted);max-width:62ch} .bda-bio-text + .bda-bio-text{margin-top:1.25rem} .bda-quote{font-family:var(--bda-font-display);font-size:1.6rem;font-style:italic;color:var(--bda-secondary);border-left:2px solid var(--bda-accent);padding-left:1.5rem;margin-bottom:1.5rem} .bda-about-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;margin-top:.5rem} .bda-portrait{width:100%;max-width:320px;border-radius:2px;object-fit:cover;aspect-ratio:3/4} @media (min-width:768px){.bda-about-grid{grid-template-columns:280px 1fr;align-items:start}} .bda-categories{padding:5rem 0 6rem;border-bottom:1px solid var(--bda-border)} .bda-categories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem} .bda-category-card{display:block;position:relative;overflow:hidden;border-radius:2px;aspect-ratio:4/3;text-decoration:none;background:var(--bda-border)} .bda-category-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;transition:transform .5s ease} .bda-category-card:hover .bda-category-card-img{transform:scale(1.04)} .bda-category-card-label{position:absolute;inset:0;display:flex;align-items:flex-end;padding:1.1rem 1.3rem;background:linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 60%);font-family:var(--bda-font-display);font-size:1.3rem;font-weight:300;color:#fff} .bda-category-section{margin-bottom:3.5rem} .bda-category-section:last-child{margin-bottom:0} .bda-category-heading{font-family:var(--bda-font-display);font-size:1.5rem;font-weight:300;margin-bottom:1.2rem;padding-bottom:.4rem;border-bottom:1px solid var(--bda-secondary)} .bda-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1rem} .bda-grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .5s ease} .bda-grid-item{margin:0;position:relative;overflow:hidden;border-radius:2px} .bda-grid-item:hover img{transform:scale(1.05)} .bda-placeholder-img{width:100%;aspect-ratio:1;background:var(--bda-border);display:flex;align-items:center;justify-content:center;color:var(--bda-muted);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase} .bda-grid-item figcaption{position:absolute;left:0;right:0;bottom:0;margin-top:0;padding:.75rem 1rem;background:linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%);color:#fff;font-size:.78rem;letter-spacing:.03em;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease} .bda-grid-item:hover figcaption{opacity:1;transform:translateY(0)} /* Search + category-chip controls shared by both the auto-generated Gallery system page and the draggable Gallery block (one component, PortfolioGalleryGrid, renders both) — client-side only, no server round-trip per keystroke/click. */ .bda-gallery-controls{margin-bottom:2.5rem;display:flex;flex-direction:column;gap:1rem} .bda-gallery-search{font:inherit;font-size:.95rem;padding:.65rem .9rem;border:1px solid var(--bda-border);border-radius:999px;background:var(--bda-canvas);color:var(--bda-ink);max-width:22rem;width:100%;box-sizing:border-box} .bda-gallery-search:focus{outline:2px solid var(--bda-accent);outline-offset:1px} .bda-gallery-chips{display:flex;flex-wrap:wrap;gap:.6rem} .bda-gallery-chip{font-family:inherit;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;padding:.4rem 1rem;border:1px solid var(--bda-border);border-radius:999px;background:transparent;color:var(--bda-muted);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease} .bda-gallery-chip:hover{border-color:var(--bda-accent);color:var(--bda-ink)} .bda-gallery-chip.active{background:var(--bda-accent);border-color:var(--bda-accent);color:var(--bda-canvas)} .bda-gallery-hint{margin-top:2.5rem;font-size:.8rem;color:var(--bda-muted);font-style:italic} .bda-contact{display:flex;flex-direction:column;gap:1rem} /* Matches .bda-contact's own pre-existing column+gap exactly, so a freshly-dropped Contact block renders identically to before this class existed — it exists purely so Instagram/Email can be independently arranged via "Adjust layout" without also moving the heading or the contact form below them. */ .bda-contact-links{display:flex;flex-direction:column;gap:1rem} .bda-ig,.bda-email{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bda-ink);text-decoration:none;border-bottom:1px solid var(--bda-border);padding-bottom:2px;width:fit-content} .bda-contact-form-mount{margin-top:1rem} .bda-contact-form{display:flex;flex-direction:column;gap:1.25rem;max-width:32rem} .bda-contact-field{display:flex;flex-direction:column;gap:.4rem} .bda-contact-field label{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bda-muted)} .bda-contact-field input,.bda-contact-field textarea{font:inherit;font-size:.95rem;padding:.65rem .75rem;border:1px solid var(--bda-border);border-radius:2px;background:var(--bda-canvas);color:var(--bda-ink);resize:vertical} .bda-contact-field input:focus,.bda-contact-field textarea:focus{outline:2px solid var(--bda-accent);outline-offset:1px} .bda-contact-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .bda-contact-error{color:#b3261e;font-size:.85rem;margin:0} .bda-contact-sent{font-size:.95rem;color:var(--bda-ink)} .bda-contact-submit{align-self:flex-start;padding:.75rem 1.75rem;background:var(--bda-accent);color:var(--bda-canvas);border:none;border-radius:2px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer} .bda-contact-submit:disabled{opacity:.6;cursor:default} .bda-divider{border:none;border-top:1px solid var(--bda-border);margin:2rem 0} .bda-text{font-size:1rem;line-height:1.8;color:var(--bda-muted)} .bda-image{max-width:100%;height:auto} /* Blog — index list + individual post. Content prose (.bda-blog-content) styles exactly the fixed, predictable tag set markdown-it can produce (see BLOG_SANITIZE_OPTS in _lib/portfolio-sanitize.js) — nothing more, since that sanitizer allows nothing more. */ .bda-blog-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2.5rem;margin-top:1rem} .bda-blog-card{text-decoration:none;color:inherit;display:block} .bda-blog-card-cover{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:2px;margin-bottom:1rem;background:var(--bda-border)} .bda-blog-card-title{font-family:var(--bda-font-display);font-size:1.3rem;font-weight:300;color:var(--bda-ink);margin-bottom:.5rem} .bda-blog-card:hover .bda-blog-card-title{color:var(--bda-accent)} .bda-blog-card-date{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bda-secondary);margin-bottom:.6rem;display:block} .bda-blog-card-excerpt{font-size:.92rem;line-height:1.7;color:var(--bda-muted)} .bda-blog-empty{color:var(--bda-muted);font-style:italic} .bda-blog-post-cover{width:100%;max-height:480px;object-fit:cover;border-radius:2px;margin-bottom:2rem} .bda-blog-post-title{font-family:var(--bda-font-display);font-size:2.1rem;font-weight:300;margin-bottom:.5rem;line-height:1.2} .bda-blog-post-date{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bda-secondary);margin-bottom:2.5rem;display:block} .bda-blog-content{font-size:1.05rem;line-height:1.9;color:var(--bda-muted);max-width:70ch} .bda-blog-content h1,.bda-blog-content h2,.bda-blog-content h3,.bda-blog-content h4{font-family:var(--bda-font-display);font-weight:300;color:var(--bda-ink);margin:2rem 0 1rem} .bda-blog-content h1{font-size:1.7rem} .bda-blog-content h2{font-size:1.4rem} .bda-blog-content h3{font-size:1.2rem} .bda-blog-content p{margin-bottom:1.25rem} .bda-blog-content ul,.bda-blog-content ol{margin:0 0 1.25rem 1.5rem} .bda-blog-content li{margin-bottom:.4rem} .bda-blog-content blockquote{border-left:2px solid var(--bda-accent);padding-left:1.5rem;font-style:italic;color:var(--bda-secondary);margin:0 0 1.25rem} .bda-blog-content a{color:var(--bda-accent);text-decoration:underline} .bda-blog-content img{max-width:100%;border-radius:2px;margin:1.5rem 0} .bda-blog-content code{background:var(--bda-border);padding:.15em .4em;border-radius:2px;font-size:.9em} .bda-blog-content pre{background:var(--bda-ink);color:var(--bda-canvas);padding:1.25rem;border-radius:2px;overflow-x:auto;margin-bottom:1.25rem} .bda-blog-content pre code{background:none;padding:0} .bda-blog-content table{width:100%;border-collapse:collapse;margin-bottom:1.25rem} .bda-blog-content th,.bda-blog-content td{border:1px solid var(--bda-border);padding:.5rem .75rem;text-align:left} .bda-blog-content hr{border:none;border-top:1px solid var(--bda-border);margin:2rem 0} /* Gallery image detail page — fixed template, one instance per portfolio_gallery_images row (see GalleryImageView, PortfolioPublic.jsx). */ .bda-gallery-image-detail-img{width:100%;max-height:640px;object-fit:contain;border-radius:2px;margin-bottom:1.5rem;background:var(--bda-border)} .bda-gallery-image-detail-category{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bda-secondary);text-decoration:none;display:inline-block;margin-bottom:1rem} .bda-gallery-image-detail-category:hover{color:var(--bda-accent)} .bda-gallery-image-detail-description{font-size:1.05rem;line-height:1.8;color:var(--bda-muted);max-width:70ch;margin-bottom:2rem;white-space:pre-wrap} .bda-gallery-image-detail-back{font-size:.85rem;color:var(--bda-accent);text-decoration:underline;display:inline-block} /* .bda-shell-nav/-footer span the true full viewport width (background only) — their actual content is constrained to the same max-width:1160px reading column as .bda-portfolio via a -nav-inner/-footer-inner wrapper, with responsive edge padding (clamp, not a fixed 1.75rem) so the nav/dropdown never sit uncomfortably close to a wide viewport's true edge. */ .bda-shell-nav{font-family:var(--bda-font-body);background:var(--bda-ink);position:relative} .bda-shell-nav-inner{max-width:1160px;margin:0 auto;padding:1.1rem clamp(1rem, 4vw, 2.5rem);display:flex;align-items:center;justify-content:space-between} .bda-shell-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--bda-font-display);font-size:1.125rem;color:var(--bda-canvas);text-decoration:none} .bda-shell-brand:hover{color:var(--bda-accent)} .bda-shell-logo{width:28px;height:28px;border-radius:50%;object-fit:cover} .bda-shell-links{display:flex;align-items:center;gap:1.75rem;font-size:.78rem} .bda-shell-link{color:var(--bda-canvas);text-decoration:none;text-transform:uppercase;letter-spacing:.08em} .bda-shell-link:hover{color:var(--bda-accent)} .bda-shell-link.active{color:var(--bda-accent);font-weight:500;text-decoration:none} /* Hamburger toggle — hidden checkbox + its , a CSS-only open/close mechanism (no JS): PortfolioShell.jsx injects this markup via dangerouslySetInnerHTML, where a

Works

grel

Your subheading