/* ========================================================================== Studio FB USA - Ensaio ARCHIVE (/sessions/ and /session-type//) Scope: body.ensaio-archive (body_class added by studiofb-ensaio-render.php on is_post_type_archive('ensaio') || is_tax('tipo_ensaio')). Loads AFTER studiofb-ensaio.css, which carries the shared pieces (.ensaio-eyebrow, .ensaio-cta, .ensaio-btn and, since revision 1, the session cards .ensaio-card / .ensaio-grid and the small SEO heading .ensaio-h2-small, also used by the "Other sessions" block of the single). Same tokens: Paper/Ink only, hover inverts, radius 0. Served from wp-content/uploads/studiofb/studiofb-ensaio-archive.css. ========================================================================== */ body.ensaio-archive { --e-ink: #1A1A1A; --e-paper: #F4F1EA; --e-ink-70: rgba(26, 26, 26, .66); --e-line: rgba(26, 26, 26, .22); --e-paper-2: rgba(26, 26, 26, .045); --e-display: var(--font-display, "Fraunces", "Playfair Display", Georgia, serif); --e-body: var(--font-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif); --e-gap: clamp(4px, .6vw, 10px); --e-shell: 1520px; --e-measure: 80ch; /* reading measure of the Studio notes block (theme pages) */ --e-pad: clamp(1rem, 4vw, 3rem); --e-ease: cubic-bezier(.2, .7, .2, 1); --e-fast: 200ms; --e-slow: 900ms; background: var(--e-paper); color: var(--e-ink); } /* --- Divi wrappers -------------------------------------------------------- Rodada 2: the archive body layout is printed straight into #main-content; there is NO .et-l--body element on the page (only the header and the footer carry .et-l), so the five rules that used to hang off .et-l--body never matched. The real wrappers: */ body.ensaio-archive #main-content, body.ensaio-archive #main-content .et_pb_section { background: var(--e-paper); } body.ensaio-archive #main-content .et_pb_section { padding: 0; } body.ensaio-archive #main-content .et_pb_row { width: 100%; max-width: none; margin: 0; padding: 0; } body.ensaio-archive #main-content .et_pb_column { width: 100%; margin: 0; } body.ensaio-archive #main-content .et_pb_module { margin-bottom: 0; } body.ensaio-archive .et_pb_code_inner, body.ensaio-archive .et_pb_code { line-height: inherit; } /* --- The carries the class too ------------------------------------- studiofb_ensaio_render.php adds `ensaio-archive` with body_class, so every bare `.ensaio-archive { ... }` box rule also hit : the whole document was clamped to 1520px and pinned to the left (body:has(.sfb2){margin:0} out-specifies margin:0 auto), with no horizontal padding. That is the "does not fill the page / text glued to the edge" the owner reported. Box rules below are written as `body.ensaio-archive .ensaio-archive`; this reset is the belt to that braces. */ body.ensaio-archive { max-width: none; margin: 0; padding: 0; } /* Nav solid from the first paint (no dark hero here). */ body.ensaio-archive .nav { background: rgba(244, 241, 234, .94); backdrop-filter: blur(12px); border-bottom-color: var(--e-line); } body.ensaio-archive .nav .brand, body.ensaio-archive .nav .nav__links a, body.ensaio-archive .nav .nav__toggle { color: var(--e-ink); } body.ensaio-archive .nav .btn--solid { background: var(--e-ink); color: var(--e-paper); border-color: var(--e-ink); } body.ensaio-archive .nav .btn--solid:hover, body.ensaio-archive .nav .btn--solid:focus-visible { background: var(--e-paper); color: var(--e-ink); } /* --- Head ------------------------------------------------------------------ */ /* Same measure as the home shell (.v-shell): min(100% - 2 gutters, 1520px), centred. */ body.ensaio-archive .ensaio-archive { width: min(100% - 2 * var(--v-gutter, 1.25rem), var(--e-shell)); max-width: none; margin-inline: auto; padding: calc(var(--v-nav-h, 4.5rem) + clamp(2rem, 4.5vw, 3.75rem)) 0 clamp(2rem, 5vw, 4rem); } body.ensaio-archive:has(.sfb2-head) .ensaio-archive { padding-top: clamp(2rem, 4.5vw, 3.75rem); } /* the global header prints a .sfb2-head spacer: do not add the nav height twice */ body.ensaio-archive .et-l--body .et_pb_column .et_pb_module, body.ensaio-archive .et-l--body .et_pb_module { margin-bottom: 0 !important; } .ensaio-archive__sub { margin-top: .35rem; color: var(--e-ink); } /* small SEO H2 (.ensaio-h2-small from studiofb-ensaio.css) */ .ensaio-archive__head { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; padding-bottom: clamp(1.25rem, 3vw, 2rem); border-bottom: 1px solid var(--e-ink); } .ensaio-archive__title { font-family: var(--e-display); font-weight: 400; font-style: normal; font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0; font-size: clamp(2.4rem, 6.2vw, 5.5rem); line-height: .98; letter-spacing: -.02em; margin: 0; color: var(--e-ink); max-width: 16ch; text-wrap: balance; } .ensaio-archive__count { font-family: var(--e-body); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--e-ink-70); margin: 0; font-feature-settings: "tnum" 1; } /* --- Filter chips (links to /session-type//) ------------------------- */ .ensaio-chips { margin: clamp(1rem, 2vw, 1.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); } .ensaio-chips ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; } .ensaio-chip { display: inline-flex; align-items: center; font-family: var(--e-body); font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: .6rem .9rem; border: 1px solid var(--e-ink); border-radius: 0; color: var(--e-ink); background: transparent; text-decoration: none; font-feature-settings: "tnum" 1; transition: background var(--e-fast) var(--e-ease), color var(--e-fast) var(--e-ease); } .ensaio-chip:hover, .ensaio-chip:focus-visible, .ensaio-chip.is-current { background: var(--e-ink); color: var(--e-paper); } /* hover inverts */ .ensaio-chip:focus-visible { outline: 2px solid var(--e-ink); outline-offset: 3px; } /* --- Grid of sessions: .ensaio-grid / .ensaio-card rules moved to studiofb-ensaio.css (shared with the single) --- */ .ensaio-archive__empty { font-family: var(--e-body); color: var(--e-ink-70); } body.ensaio-archive figcaption, body.ensaio-archive .wp-element-caption { display: none !important; } /* never captions/filenames */ /* --- Institutional note (native divi/text with class ensaio-archive-note) --- */ body.ensaio-archive .ensaio-archive-note { width: min(100% - 2 * var(--v-gutter, 1.25rem), var(--e-shell)); max-width: none; margin: clamp(1.5rem, 4vw, 3rem) auto 0; padding: 0; } body.ensaio-archive .ensaio-archive-note .et_pb_text_inner { max-width: 65ch; border-left: 1px solid var(--e-ink); padding-left: clamp(1.25rem, 3vw, 2.5rem); font-family: var(--e-body); font-size: 1.0625rem; line-height: 1.6; color: var(--e-ink-70); } body.ensaio-archive .ensaio-archive-note p { margin: 0 0 1em; color: inherit; } body.ensaio-archive .ensaio-archive-note p:last-child { margin-bottom: 0; } body.ensaio-archive .ensaio-archive-note a { color: var(--e-ink); text-decoration: underline; text-underline-offset: .18em; } body.ensaio-archive .ensaio-archive-note a:hover, body.ensaio-archive .ensaio-archive-note a:focus-visible { background: var(--e-ink); color: var(--e-paper); -webkit-text-fill-color: var(--e-paper); text-decoration: none; } /* hover inverts: Paper on Ink */ @media (prefers-reduced-motion: reduce) { .ensaio-chip { transition: none; } } /* ========================================================================== THEME PAGES as LANDING PAGES (Rodada 2) /photography// whenever the term carries sfb_h1. Rendered by studiofb_ensaio_theme_html() as `
`, so it inherits the Home v2 system from the global header sheet (403774 -> 00-style.css): the .v-shell measure, the fluid type scale, .v-btn / .v-link / .v-chip with hover inversion, the .rv reveal (the footer layout carries the IntersectionObserver) and the .sfb2-book HappyForms skin. Nothing here re-declares a colour: Paper and Ink only, radius 0. Everything below is scoped to .sfb2-lp so /sessions/ and the plain term archives are untouched. ========================================================================== */ .sfb2-lp { --lp-line: var(--v-line); } .sfb2-lp .lp-strip, .sfb2-lp .lp-cards, .sfb2-lp .lp-creds, .sfb2-lp .lp-more__list { list-style: none; margin: 0; padding: 0; } /* --- 1. hero: the breakout grid of the home, copy on the shell, photograph to the edge --- */ .sfb2-lp .sfb2-lp-hero { display: grid; grid-template-columns: var(--v-grid); column-gap: var(--v-gutter); align-items: stretch; padding: clamp(1.5rem, 4vw, 3.5rem) 0 0; } .sfb2-lp .lp-hero__copy { grid-column: shell-start / span 7; grid-row: 1; align-self: center; min-width: 0; padding: clamp(1.5rem, 3vw, 3rem) 0; } .sfb2-lp .lp-hero__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; padding-bottom: 1rem; margin-bottom: clamp(1.25rem, 3vw, 2.25rem); border-bottom: 1px solid var(--v-ink); } .sfb2-lp .lp-hero__meta span { white-space: nowrap; } .sfb2-lp .sfb2-lp-hero h1 { font-size: clamp(2.15rem, 1rem + 3.5vw, 4.6rem); line-height: 1.02; max-width: 17ch; } .sfb2-lp .lp-hero__display { font-size: clamp(1.5rem, .9rem + 1.9vw, 2.6rem); line-height: 1.1; max-width: 24ch; margin-top: clamp(1rem, 2vw, 1.6rem); opacity: .78; } .sfb2-lp .lp-hero__deck { margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-top: clamp(1.25rem, 2.5vw, 2rem); border-top: 1px solid var(--lp-line); display: grid; gap: .9rem; max-width: 60ch; } .sfb2-lp .lp-hero__deck .v-lead { max-width: none; font-size: 1.0625rem; line-height: 1.6; opacity: .82; } .sfb2-lp .lp-hero__anchor { max-width: none; font-size: .95rem; opacity: .78; } .sfb2-lp .lp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.75rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); } .sfb2-lp .lp-hero__actions .v-link { font-size: .95rem; } .sfb2-lp .lp-hero__photo { grid-column: 9 / -1; grid-row: 1; align-self: center; margin: 0; min-width: 0; height: min(72svh, 42rem); min-height: 20rem; } .sfb2-lp .lp-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--lp-hero-focus, var(--lp-focus, 50% 18%)); } /* Landscape hero: the photograph stays in the right-hand column like every other theme page, it only takes one more grid column so a wide frame is not cropped to a tall sliver. */ .sfb2-lp .lp-hero--wide .lp-hero__copy { grid-column: shell-start / span 6; } .sfb2-lp .lp-hero--wide .lp-hero__photo { grid-column: 8 / -1; } @media (max-width: 1024px) { .sfb2-lp .sfb2-lp-hero { align-items: start; row-gap: clamp(1.5rem, 4vw, 2.5rem); } .sfb2-lp .lp-hero__copy, .sfb2-lp .lp-hero--wide .lp-hero__copy { grid-column: shell-start / shell-end; grid-row: 1; padding: 0; } .sfb2-lp .lp-hero__photo, .sfb2-lp .lp-hero--wide .lp-hero__photo { grid-column: 4 / -1; grid-row: 2; align-self: start; height: min(58svh, 32rem); min-height: 18rem; } } @media (max-width: 640px) { .sfb2-lp .lp-hero__photo { grid-column: 1 / -1; height: auto; min-height: 0; aspect-ratio: 4 / 5; } .sfb2-lp .lp-hero--wide .lp-hero__photo { grid-column: 1 / -1; height: auto; min-height: 0; aspect-ratio: 3 / 2; } .sfb2-lp .sfb2-lp-hero h1 { max-width: none; } .sfb2-lp .lp-hero__display { max-width: none; } } /* --- 2. credentials strip: facts only, one hairline band --- */ .sfb2-lp .sfb2-lp-creds { padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; border-top: 1px solid var(--v-ink); border-bottom: 1px solid var(--lp-line); } .sfb2-lp .lp-creds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem var(--v-gutter); } .sfb2-lp .lp-creds li { display: grid; gap: .4rem; align-content: start; min-width: 0; } .sfb2-lp .lp-creds__k { opacity: .62; } .sfb2-lp .lp-creds__v { font-size: .95rem; line-height: 1.45; text-wrap: pretty; } @media (max-width: 980px) { .sfb2-lp .lp-creds { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .sfb2-lp .lp-creds { grid-template-columns: 1fr; gap: 1rem; } } /* --- 3. the sessions of this theme + the highlights strip --- */ .sfb2-lp .sfb2-lp-work { padding: var(--v-space-s) 0 0; } .sfb2-lp .lp-work__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .75rem 2rem; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); } .sfb2-lp .lp-work__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); max-width: calc(var(--n, 3) * 23rem); } @media (max-width: 560px) { .sfb2-lp .lp-work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .75rem; } } /* highlights: a contact sheet of photographs from these sessions, every tile the same square so the last row can never balloon (a flex "justified" row does, and there is no JS on this template). */ .sfb2-lp .lp-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(4px, .6vw, 10px); margin-top: clamp(1.5rem, 3vw, 2.5rem); } .sfb2-lp .lp-strip__item { min-width: 0; background: var(--v-paper2); overflow: hidden; } .sfb2-lp .lp-strip__link { display: block; position: relative; aspect-ratio: 1; overflow: hidden; } .sfb2-lp .lp-strip__link img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--v-ease); } .sfb2-lp .lp-strip__link::after { content: ""; position: absolute; inset: 0; background: var(--v-ink); opacity: 0; transition: opacity var(--v-t) var(--v-ease); } @media (hover: hover) { .sfb2-lp .lp-strip__link:hover::after, .sfb2-lp .lp-strip__link:focus-visible::after { opacity: .16; } .sfb2-lp .lp-strip__link:hover img { transform: scale(1.03); } } .sfb2-lp .lp-strip__link:focus-visible { outline: 2px solid var(--v-ink); outline-offset: 3px; } @media (max-width: 980px) { .sfb2-lp .lp-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .sfb2-lp .lp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --- 4. the institutional sections as ordinary site sections (Rodada 2b, owner): alternating photograph + text, a card grid when the copy carries a list, and a full-bleed band with a photograph and the CTA as the last one. No "Studio notes". --- */ .sfb2-lp .sfb2-lp-split { padding: var(--v-space-s) 0 0; } .sfb2-lp .lp-split__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) var(--v-gutter); align-items: center; } .sfb2-lp .lp-split__media { grid-column: 1 / 7; grid-row: 1; margin: 0; min-width: 0; } .sfb2-lp .lp-split__body { grid-column: 8 / 13; grid-row: 1; min-width: 0; max-width: 80ch; } .sfb2-lp .lp-split--flip .lp-split__media { grid-column: 7 / 13; } .sfb2-lp .lp-split--flip .lp-split__body { grid-column: 1 / 6; } .sfb2-lp .lp-split__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--lp-focus, 50% 18%); background: var(--v-paper2); } .sfb2-lp .lp-split__body h2 { margin-bottom: 1.1rem; } @media (max-width: 900px) { .sfb2-lp .lp-split__media, .sfb2-lp .lp-split__body, .sfb2-lp .lp-split--flip .lp-split__media, .sfb2-lp .lp-split--flip .lp-split__body { grid-column: 1 / -1; } .sfb2-lp .lp-split__media { grid-row: 1; } .sfb2-lp .lp-split__body { grid-row: 2; } .sfb2-lp .lp-split__img { aspect-ratio: 3 / 2; } } .sfb2-lp .sfb2-lp-cards { padding: var(--v-space-s) 0 0; } .sfb2-lp .lp-cards__lead { max-width: 70ch; margin-top: 1.1rem; } .sfb2-lp .lp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem) var(--v-gutter); margin-top: clamp(1.5rem, 3vw, 2.5rem); } .sfb2-lp .lp-card { border-top: 1px solid var(--v-ink); padding-top: 1rem; min-width: 0; } .sfb2-lp .lp-card__k { margin-bottom: .6rem; } .sfb2-lp .lp-card__b { font-size: .98rem; line-height: 1.55; opacity: .84; } .sfb2-lp .sfb2-lp-band { position: relative; isolation: isolate; margin-top: var(--v-space-s); padding: clamp(3.5rem, 8vw, 7rem) 0; color: var(--v-paper); background: var(--v-ink); overflow: hidden; } .sfb2-lp .lp-band__media { position: absolute; inset: 0; z-index: -1; } .sfb2-lp .lp-band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,26,26,.88) 0%, rgba(26,26,26,.72) 55%, rgba(26,26,26,.55) 100%); } .sfb2-lp .lp-band__img { width: 100%; height: 100%; object-fit: cover; object-position: var(--lp-focus, 50% 18%); } .sfb2-lp .lp-band__in { position: relative; } .sfb2-lp .lp-band__body { max-width: 62ch; margin-top: 1.2rem; font-size: 1.0625rem; line-height: 1.62; } .sfb2-lp .lp-band__body p { margin: 0 0 1.1em; } .sfb2-lp .lp-band__body p:last-child { margin-bottom: 0; } .sfb2-lp .lp-band__body strong { font-weight: 600; } .sfb2-lp .lp-band__body a, .sfb2-lp .lp-split__body a, .sfb2-lp .lp-cards a { border-bottom: 1px solid currentColor; padding: .05em .15em; margin: 0 -.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background var(--v-t) var(--v-ease), color var(--v-t) var(--v-ease); } .sfb2-lp .lp-split__body a:hover, .sfb2-lp .lp-split__body a:focus-visible, .sfb2-lp .lp-cards a:hover, .sfb2-lp .lp-cards a:focus-visible { background: var(--v-ink); color: var(--v-paper); border-color: transparent; } .sfb2-lp .lp-band__body a:hover, .sfb2-lp .lp-band__body a:focus-visible { background: var(--v-paper); color: var(--v-ink); border-color: transparent; } .sfb2-lp .lp-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.75rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); } .sfb2-lp .lp-band__actions .v-btn { background: var(--v-paper); color: var(--v-ink); border-color: var(--v-paper); } .sfb2-lp .lp-band__actions .v-btn:hover, .sfb2-lp .lp-band__actions .v-btn:focus-visible { background: transparent; color: var(--v-paper); } .sfb2-lp .lp-band__actions .v-link:hover, .sfb2-lp .lp-band__actions .v-link:focus-visible { background: var(--v-paper); color: var(--v-ink); } .sfb2-lp .lp-band :focus-visible { outline-color: var(--v-paper); } /* Owner rule: in a cropped photograph the people sit in the upper part of the frame. Scoped to the landing pages: the single (/sessions//) and /sessions/ keep their own crop. */ .sfb2-lp .ensaio-card__media img, .sfb2-lp .lp-strip__img { object-position: var(--lp-focus, 50% 18%); } /* --- 5. service areas: the shared block, with the section rhythm of this page --- */ .sfb2-lp .sfb2-lp-areas .sfb2-areas { padding-top: var(--v-space-s); } /* --- 6. book: the .sfb2-book grid and HappyForms skin come from the global sheet --- */ .sfb2-lp .sfb2-lp-book { border-top: 1px solid var(--v-ink); margin-top: var(--v-space-s); padding: var(--v-space-s) 0; } .sfb2-lp .sfb2-lp-book .book__copy .v-lead { max-width: 44ch; } .sfb2-lp .sfb2-lp-book .book__form { scroll-margin-top: calc(var(--v-nav-h) + 1rem); } .sfb2-lp .sfb2-lp-book .happyforms-message-notice h2 { font-size: 1.5rem; } /* --- 7. the other session types --- */ .sfb2-lp .sfb2-lp-more { padding: 0 0 var(--v-space-s); } .sfb2-lp .lp-more__label { opacity: .62; margin-bottom: 1rem; } .sfb2-lp .lp-more__list { display: flex; flex-wrap: wrap; gap: .5rem; } /* Ads land on #book: never let the anchor sit under the fixed header. */ .sfb2-lp #book { scroll-margin-top: calc(var(--v-nav-h) + .5rem); } @media (prefers-reduced-motion: reduce) { .sfb2-lp .lp-strip__link img, .sfb2-lp .lp-strip__link::after, .sfb2-lp .lp-split__body a, .sfb2-lp .lp-band__body a { transition: none; } }