:root {
--color-primary: #EF1493;
--color-primary-hover: #C81278;
--color-primary-soft: #F7EEF2;
--color-bg: #F7EEF2;
--color-surface: #ffffff;
--color-surface-muted: #f9eeef;
--color-text: #111111;
--color-muted: #6F6870;
--color-border: #eadde2;
--color-border-strong: #d7c8ce;
--color-inverse: #ffffff;
--color-footer: #111111;
--color-footer-muted: #bdb4b8;
--font-serif: 'Playfair Display', serif;
--font-sans: 'Montserrat', sans-serif;
--font-display: var(--font-serif);
--font-body: var(--font-sans);
--font-accent: 'Playfair Display', serif;
--container-max: 82.5rem;
--content-max: 47.5rem;
--gutter: clamp(1.25rem, 3vw, 2.5rem);
--space-2xs: clamp(0.375rem, 0.5vw, 0.5rem);
--space-xs: clamp(0.625rem, 1vw, 0.875rem);
--space-sm: clamp(1rem, 1.5vw, 1.5rem);
--space-md: clamp(1.5rem, 3vw, 2.75rem);
--space-lg: clamp(2.5rem, 5vw, 4.5rem);
--space-xl: clamp(4.5rem, 9vw, 8.5rem);
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--header-height: 5.75rem;
--transition-fast: 160ms ease;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 1rem; line-height: 1.65; text-rendering: optimizelegibility; }
body.is-navigation-open { overflow: hidden; }
img, svg, video, iframe { max-width: 100%; }
img { display: block; width: 100%; height: auto; }
figure, p { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--color-primary); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { top: var(--space-sm); left: var(--space-sm); z-index: 100; width: auto; height: auto; padding: var(--space-xs) var(--space-sm); margin: 0; overflow: visible; clip: auto; background: var(--color-surface); box-shadow: 0 0 0 2px var(--color-primary); }
.site-container { width: min(calc(100% - (var(--gutter) * 2)), var(--container-max)); margin-inline: auto; }
.content-container { width: min(100%, var(--content-max)); }
.section { padding-block: var(--space-xl); }
.section--soft { background: var(--color-primary-soft); }
.section--surface { background: var(--color-surface); }
.site-main { min-height: 60vh; padding-block: var(--space-xl); }
.site-main > .entry { width: min(100%, var(--content-max)); }
h1, h2, h3, h4, h5, h6 { margin: 0; overflow-wrap: break-word; color: var(--color-text); font-family: var(--font-display); font-weight: 500; line-height: 0.98; letter-spacing: -0.035em; }
h1, .heading-1 { font-size: clamp(3.25rem, 7vw, 7rem); }
h2, .heading-2 { font-size: clamp(2.6rem, 5.25vw, 5.25rem); }
h3, .heading-3 { font-size: clamp(1.9rem, 3vw, 3rem); }
h4, .heading-4 { font-size: clamp(1.4rem, 2vw, 1.85rem); }
p + p { margin-top: var(--space-sm); }
.entry-header { margin-bottom: var(--space-md); }
.entry-title, .archive-title, .not-found h1 { font-size: clamp(2.8rem, 6vw, 5.5rem); }
.entry-content > * + * { margin-top: var(--space-sm); }
.entry-content { overflow-wrap: anywhere; }
.entry-content pre, .entry-content .wp-block-table { max-width: 100%; overflow-x: auto; }
.entry-content table { max-width: 100%; }
.entry-list { display: grid; gap: var(--space-lg); }
.eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--color-primary); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; }
.eyebrow::before { width: 1.5rem; height: 1px; background: currentcolor; content: ''; }
.text-accent, .handwritten-accent { color: var(--color-primary); font-family: var(--font-accent); font-size: 1.25em; font-weight: 400; letter-spacing: -0.04em; line-height: 0.85; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0.75rem 1.2rem; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-inverse); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.045em; line-height: 1; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
.button:hover { border-color: var(--color-primary-hover); background: var(--color-primary-hover); color: var(--color-inverse); transform: translateY(-1px); }
.button--secondary, .button.is-style-outline { background: transparent; color: var(--color-primary); }
.button--secondary:hover, .button.is-style-outline:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.button--header { min-height: 2.5rem; padding-inline: 1.1rem; border-radius: 999px; font-size: 0.68rem; }
.text-link { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--color-primary); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; }
.text-link::after { content: '→'; transition: transform var(--transition-fast); }
.text-link:hover::after { transform: translateX(0.2rem); }
.card { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color var(--transition-fast), transform var(--transition-fast); }
.card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.card__content { padding: var(--space-md); }
.card__title { margin-bottom: var(--space-xs); font-size: clamp(1.5rem, 2.4vw, 2.15rem); }
.card__meta { color: var(--color-muted); font-size: 0.78rem; }
.icon-wrap { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-primary); }
.icon-wrap svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentcolor; stroke-width: 1.5; }
.image-frame { overflow: hidden; background: var(--color-surface-muted); }
.image-frame img { aspect-ratio: var(--image-ratio, 4 / 5); object-fit: cover; transition: transform 400ms ease; }
.card:hover .image-frame img { transform: scale(1.025); }
label { display: inline-block; margin-bottom: 0.4rem; color: var(--color-text); font-size: 0.78rem; font-weight: 700; }
input:not([type='checkbox']):not([type='radio']), select, textarea { width: 100%; min-height: 3rem; padding: 0.75rem 0.875rem; border: 1px solid var(--color-border); border-radius: 0; background: var(--color-surface); color: var(--color-text); line-height: 1.4; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
textarea { min-height: 8rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 1; }
input:not([type='checkbox']):not([type='radio']):focus, select:focus, textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgb(239 20 147 / 12%); outline: 0; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--color-primary); }
.site-header { position: sticky; top: 0; z-index: 20; min-height: var(--header-height); border-bottom: 1px solid transparent; background: rgb(255 250 248 / 94%); backdrop-filter: blur(0.75rem); transition: border-color var(--transition-fast); }
.site-header:focus-within { border-bottom-color: var(--color-border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-height); gap: var(--space-md); }
.site-branding { position: relative; display: block; flex: 0 0 4rem; width: 4rem; min-width: 4rem; height: var(--header-height); }
.site-branding .custom-logo-link { display: block; }
.site-branding .custom-logo { width: auto; max-width: 11rem; max-height: 4rem; }
.site-branding__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; }
.site-header__actions { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.site-navigation ul { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(0.95rem, 1.5vw, 1.55rem); padding: 0; margin: 0; list-style: none; }
.site-navigation a { color: var(--color-text); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.005em; text-decoration: none; }
.site-navigation a:hover, .site-navigation .current-menu-item > a, .site-navigation .current-menu-ancestor > a { color: var(--color-primary); }
.site-navigation-toggle { display: none; min-width: 2.75rem; min-height: 2.75rem; padding: 0.45rem; border: 0; background: transparent; color: var(--color-text); }
.site-navigation-toggle__bar { display: block; width: 1.5rem; height: 1px; margin: 0.28rem; background: currentcolor; transition: transform var(--transition-fast); }
.site-footer { padding-block: clamp(3.5rem, 7vw, 6.5rem) var(--space-md); background: var(--color-footer); color: var(--color-inverse); }
.site-footer__inner { display: grid; gap: var(--space-lg); }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-lg); align-items: start; }
.site-footer__brand { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.04em; }
.site-footer__brand .custom-logo-link { display: inline-block; }
.site-footer__brand .custom-logo { width: auto; max-width: 10rem; max-height: 2.5rem; }
.site-footer nav ul { display: grid; gap: 0.45rem; padding: 0; margin: 0; list-style: none; }
.site-footer__navigation ul { grid-template-columns: repeat(2, minmax(5rem, 1fr)); column-gap: var(--space-md); }
.site-footer a { color: var(--color-footer-muted); font-size: 0.72rem; text-decoration: none; }
.site-footer a:hover { color: var(--color-primary); }
.site-footer__social ul { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.site-footer__social a { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; border: 1px solid rgb(255 255 255 / 24%); border-radius: 50%; color: var(--color-inverse); }
.site-footer__social a:hover { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-inverse); }
.site-footer__bottom { padding-top: var(--space-sm); border-top: 1px solid rgb(255 255 255 / 17%); }
.site-footer__copyright { color: var(--color-footer-muted); font-size: 0.68rem; }
.site-main--home { padding-block: 0; overflow: clip; }
.home-hero { padding-block: clamp(1.75rem, 3vw, 3rem) clamp(2.5rem, 4vw, 4rem); }
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(20rem, 0.68fr); align-items: center; gap: clamp(2rem, 4.5vw, 5rem); }
.home-hero__content { max-width: 36rem; padding-block: 0; }
.home-hero__title { display: grid; gap: 0.1em; font-size: clamp(3rem, 4.8vw, 5.25rem); }
.home-hero__title .handwritten-accent { margin-left: clamp(0.35rem, 1.4vw, 1.25rem); font-size: 1.1em; }
.home-hero__intro { max-width: 30rem; margin-top: clamp(1rem, 1.8vw, 1.5rem); color: var(--color-muted); font-size: clamp(0.95rem, 1.2vw, 1.05rem); }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: clamp(1rem, 1.8vw, 1.5rem); }
.home-hero__visual { position: relative; width: min(100%, 31rem); justify-self: end; }
.home-image-placeholder { position: relative; display: grid; min-height: 100%; overflow: hidden; border: 1px solid var(--color-border); background-color: var(--color-surface-muted); }
.home-image-placeholder::before, .home-image-placeholder::after { position: absolute; content: ''; }
.home-image-placeholder::before { inset: 10% 12%; border: 1px solid var(--color-primary); }
.home-image-placeholder::after { right: -10%; bottom: 10%; width: 72%; aspect-ratio: 1; border: 1px solid var(--color-border-strong); border-radius: 50%; }
.home-image-placeholder__stamp { z-index: 1; align-self: end; justify-self: start; margin: var(--space-sm); padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--color-primary); background: var(--color-surface); color: var(--color-primary); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.25; text-transform: uppercase; }
.home-image-placeholder--hero { aspect-ratio: 0.88; }
.home-image-placeholder--hero::before { inset: 0 14% 0 auto; width: 43%; border-color: var(--color-primary); }
.home-image-placeholder--audience { aspect-ratio: 0.98; }
.home-image-placeholder--project { aspect-ratio: 1.15; }
.home-image-placeholder--project::before { inset: 12%; }
.home-disciplines { border-block: 1px solid var(--color-border); background: var(--color-surface); }
.home-disciplines__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 0; margin: 0; list-style: none; }
.home-disciplines__item { display: grid; justify-items: center; gap: var(--space-xs); min-height: 9.25rem; padding: var(--space-md) var(--space-xs); border-right: 1px solid var(--color-border); color: var(--color-text); font-size: 0.67rem; font-weight: 700; line-height: 1.35; text-align: center; }
.home-disciplines__item:first-child { border-left: 1px solid var(--color-border); }
.home-disciplines__icon { width: 2.25rem; height: 2.25rem; border: 0; }
.home-audience__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.7fr); align-items: center; gap: clamp(2rem, 7vw, 8rem); }
.home-audience__content { max-width: 44rem; }
.home-audience__title { display: grid; gap: 0.06em; margin-top: var(--space-sm); font-size: clamp(2.8rem, 5vw, 5.5rem); }
.home-audience__intro { max-width: 35rem; margin-top: var(--space-md); color: var(--color-muted); }
.home-audience__segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-block: var(--space-md); }
.home-audience__segment { padding-top: var(--space-xs); border-top: 1px solid var(--color-border); }
.home-audience__segment-number { color: var(--color-primary); font-size: 0.7rem; font-weight: 700; }
.home-audience__segment h3 { margin-top: var(--space-xs); font-size: clamp(1.3rem, 2vw, 1.8rem); }
.home-audience__segment p { margin-top: var(--space-xs); color: var(--color-muted); font-size: 0.78rem; line-height: 1.55; }
.home-audience__visual { align-self: stretch; }
.home-projects__header { display: flex; align-items: end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.home-projects__header h2 { margin-top: var(--space-sm); font-size: clamp(2.8rem, 5vw, 5.5rem); }
.home-projects__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.home-project { display: flex; flex-direction: column; border-radius: 0; }
.home-project__image .home-image-placeholder { border: 0; border-bottom: 1px solid var(--color-border); }
.home-project__category { margin-bottom: var(--space-xs); color: var(--color-primary); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.home-project .text-link { margin-top: var(--space-sm); }
.home-projects__footer { display: flex; justify-content: center; margin-top: var(--space-lg); }
.editorial-page { padding-block: 0; }
.editorial-intro__content { max-width: 48rem; }
.editorial-intro h1, .about-hero h1, .books-hero h1, .collaboration-hero h1 { font-size: clamp(3.5rem, 7vw, 7rem); }
.editorial-intro__lead, .about-hero__lead, .books-hero__lead, .collaboration-hero__lead { margin-top: var(--space-sm); font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.05; }
.editorial-intro__text, .about-hero__intro, .books-hero p:not(.eyebrow), .collaboration-hero p:not(.eyebrow) { max-width: 39rem; margin-top: var(--space-sm); color: var(--color-muted); }
.editorial-placeholder { position: relative; display: grid; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-primary-soft); }
.editorial-placeholder::before, .editorial-placeholder::after { position: absolute; content: ''; }
.editorial-placeholder::before { inset: 12%; border: 1px solid var(--color-primary); }
.editorial-placeholder::after { right: -16%; bottom: -12%; width: 58%; aspect-ratio: 1; border: 1px solid var(--color-border-strong); border-radius: 50%; }
.editorial-placeholder > span { z-index: 1; align-self: end; justify-self: start; margin: var(--space-sm); padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--color-primary); background: var(--color-surface); color: var(--color-primary); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.editorial-placeholder--service { aspect-ratio: 0.82; }
.editorial-placeholder--service-alt { aspect-ratio: 0.82; background: var(--color-surface-muted); }
.editorial-placeholder--portrait { min-height: 39rem; }
.editorial-placeholder--portrait::before { inset: 0 18% 0 auto; width: 36%; }
.editorial-placeholder--book { aspect-ratio: 0.84; }
.editorial-placeholder--collage-one { width: 74%; aspect-ratio: 0.8; }
.editorial-placeholder--collage-two { position: absolute; right: 0; bottom: 0; width: 54%; aspect-ratio: 0.88; background: var(--color-surface-muted); }
.service-list .site-container { display: grid; gap: clamp(4rem, 10vw, 10rem); }
.service-feature { display: grid; grid-template-columns: minmax(14rem, 0.74fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 8vw, 9rem); }
.service-feature--reverse .service-feature__visual { order: 2; }
.service-feature__content { max-width: 35rem; }
.service-feature__number { color: var(--color-primary); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; }
.service-feature h2 { margin-top: var(--space-xs); font-size: clamp(2.2rem, 4vw, 4rem); }
.editorial-checklist { display: grid; gap: 0.45rem; padding: 0; margin: var(--space-md) 0; list-style: none; }
.editorial-checklist li { display: flex; gap: 0.55rem; color: var(--color-muted); font-size: 0.9rem; }
.editorial-checklist li::before { flex: 0 0 auto; width: 0.45rem; height: 0.45rem; margin-top: 0.5em; border: 1px solid var(--color-primary); border-radius: 50%; content: ''; }
.about-hero__grid, .books-hero__grid, .collaboration-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.7fr); align-items: center; gap: clamp(2rem, 8vw, 9rem); }
.about-hero__signature { margin-top: var(--space-md); font-size: clamp(2rem, 4vw, 3.5rem); }
.about-proof__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.about-proof__item { display: grid; justify-items: center; gap: var(--space-2xs); padding: var(--space-md); border-right: 1px solid var(--color-border); text-align: center; }
.about-proof__item:first-child { border-left: 1px solid var(--color-border); }
.about-proof__item strong { color: var(--color-primary); font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 500; line-height: 1; }
.about-proof__item span { color: var(--color-muted); font-size: 0.72rem; }
.about-traits h2 { max-width: 36rem; margin-top: var(--space-sm); font-size: clamp(2.5rem, 5vw, 5rem); }
.about-traits__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-sm); padding: 0; margin: var(--space-lg) 0 0; list-style: none; }
.about-traits__grid li { display: grid; justify-items: center; gap: var(--space-xs); color: var(--color-muted); font-size: 0.75rem; text-align: center; }
.books-hero__content .button { margin-top: var(--space-md); }
.books-help__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.7fr); gap: var(--space-lg); }
.books-help h2, .books-process h2, .collaboration-process h2 { max-width: 39rem; margin-top: var(--space-sm); font-size: clamp(2.5rem, 5vw, 5rem); }
.editorial-process { display: grid; grid-template-columns: repeat(var(--process-count, 5), minmax(0, 1fr)); gap: var(--space-sm); padding: 0; margin: var(--space-lg) 0; list-style: none; }
.editorial-process__step { display: grid; gap: var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 0.78rem; }
.editorial-process__number { color: var(--color-primary); font-size: 0.8rem; font-weight: 700; }
.collaboration-hero__content h2 { margin-top: var(--space-lg); font-size: clamp(1.9rem, 3vw, 2.8rem); }
.collaboration-specialties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem var(--space-md); padding: 0; margin: var(--space-md) 0 0; list-style: none; }
.collaboration-specialties li { color: var(--color-muted); font-size: 0.85rem; }
.collaboration-specialties li::before { display: inline-block; width: 0.4rem; height: 0.4rem; margin-right: 0.5rem; border: 1px solid var(--color-primary); border-radius: 50%; content: ''; }
.collaboration-hero__visual { position: relative; min-height: 32rem; }
.collaboration-process .editorial-process { --process-count: 3; }
.collaboration-process .button { margin-top: var(--space-sm); }
.portfolio-archive__intro { padding-bottom: var(--space-lg); }
.portfolio-archive__intro h1, .portfolio-single h1 { margin-top: var(--space-sm); font-size: clamp(3.5rem, 7vw, 7rem); }
.portfolio-archive__intro p { margin-top: var(--space-sm); font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.05; }
.portfolio-filters { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
.portfolio-filter { padding: 0.5rem 0.85rem; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text); font-size: 0.68rem; font-weight: 700; text-decoration: none; }
.portfolio-filter:hover, .portfolio-filter.is-active { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-inverse); }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.portfolio-card { display: flex; flex-direction: column; border-radius: 0; }
.portfolio-card__image { display: block; overflow: hidden; background: var(--color-surface-muted); }
.portfolio-card__image img, .portfolio-card__placeholder { width: 100%; aspect-ratio: 1.12; object-fit: cover; }
.portfolio-card__image img { transition: transform 400ms ease; }
.portfolio-card__image:hover img { transform: scale(1.025); }
.portfolio-card__placeholder { position: relative; display: grid; place-items: end start; overflow: hidden; border-bottom: 1px solid var(--color-border); background: var(--color-primary-soft); }
.portfolio-card__placeholder::before, .portfolio-card__placeholder::after { position: absolute; content: ''; }
.portfolio-card__placeholder::before { inset: 12%; border: 1px solid var(--color-primary); }
.portfolio-card__placeholder::after { right: -10%; bottom: -18%; width: 60%; aspect-ratio: 1; border: 1px solid var(--color-border-strong); border-radius: 50%; }
.portfolio-card__placeholder > span { z-index: 1; margin: var(--space-xs); padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--color-primary); background: var(--color-surface); color: var(--color-primary); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.portfolio-card__category { margin-bottom: var(--space-xs); color: var(--color-primary); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.portfolio-card .text-link { margin-top: var(--space-sm); }
.portfolio-empty { padding: var(--space-lg); border: 1px solid var(--color-border); color: var(--color-muted); text-align: center; }
.home-projects .portfolio-card__image img, .home-projects .portfolio-card__placeholder { aspect-ratio: 1.15; }
.portfolio-single__hero-grid { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(18rem, 0.72fr); align-items: center; gap: clamp(2rem, 7vw, 8rem); }
.portfolio-single__subtitle { max-width: 35rem; margin-top: var(--space-md); color: var(--color-muted); font-size: clamp(1.1rem, 2vw, 1.45rem); }
.portfolio-single__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-block: var(--space-md); }
.portfolio-single__facts div { padding-top: var(--space-xs); border-top: 1px solid var(--color-border); }
.portfolio-single__facts dt { color: var(--color-primary); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.portfolio-single__facts dd { margin: var(--space-2xs) 0 0; font-size: 0.82rem; }
.portfolio-single__main-image img, .portfolio-single__main-image .portfolio-card__placeholder { aspect-ratio: 0.9; }
.portfolio-single__intro .entry-content { max-width: 45rem; }
.portfolio-single__story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.portfolio-single__story-grid article { padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.portfolio-single__story-grid h2 { margin-bottom: var(--space-sm); font-size: clamp(1.8rem, 3vw, 2.8rem); }
.portfolio-single__story-grid p { color: var(--color-muted); }
.portfolio-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.portfolio-gallery__grid img { aspect-ratio: 1.2; object-fit: cover; }
.portfolio-single__cta { background: var(--color-primary-soft); text-align: center; }
.portfolio-single__cta h2 { margin-bottom: var(--space-md); font-size: clamp(2.5rem, 5vw, 5rem); }
.references-page h1 { margin-top:var(--space-sm); font-size:clamp(3.5rem,7vw,7rem); }.references-page__intro{margin-top:var(--space-sm);font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.5rem)}.references-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm);margin-top:var(--space-lg)}.reference-card{min-width:0;padding:var(--space-md);border:1px solid var(--color-border);background:var(--color-surface)}.reference-card__quote{color:var(--color-primary);font-family:var(--font-display);font-size:4rem;line-height:.5}.reference-card blockquote{margin:var(--space-sm) 0;overflow-wrap:anywhere;color:var(--color-text);font-family:var(--font-display);font-size:clamp(1.5rem,2.5vw,2.25rem);line-height:1.15}.reference-card__rating{color:var(--color-primary);letter-spacing:.15em}.reference-card footer{display:flex;align-items:center;gap:var(--space-xs);margin-top:var(--space-md);color:var(--color-muted);font-size:.78rem}.reference-card footer img{flex:0 0 auto;width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover}.reference-card footer div{min-width:0;overflow-wrap:anywhere}.reference-card footer strong,.reference-card footer span{display:block}.reference-card footer strong{color:var(--color-text)}
/* Blog */
.blog-archive__intro { max-width: 52rem; padding-bottom: var(--space-lg); }
.blog-archive__intro h1, .blog-single__header h1 { margin-top: var(--space-xs); font-size: clamp(3.5rem, 7vw, 7rem); }
.blog-archive__lede { margin-top: var(--space-sm); color: var(--color-muted); font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.1; }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.article-card { display: flex; flex-direction: column; min-width: 0; }
.article-card__image { display: block; overflow: hidden; background: var(--color-surface-muted); }
.article-card__image img, .article-card__placeholder { width: 100%; aspect-ratio: 1.08; object-fit: cover; }
.article-card__image img { transition: transform 400ms ease; }
.article-card__image:hover img { transform: scale(1.025); }
.article-card__placeholder { position: relative; display: grid; place-items: end start; overflow: hidden; border-bottom: 1px solid var(--color-border); background: var(--color-primary-soft); }
.article-card__placeholder::before { position: absolute; inset: 12%; border: 1px solid var(--color-primary); content: ''; }
.article-card__placeholder > span { z-index: 1; margin: var(--space-xs); padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--color-primary); background: var(--color-surface); color: var(--color-primary); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.article-card__body { display: flex; flex: 1; flex-direction: column; padding-top: var(--space-sm); }
.article-card__category { margin-bottom: var(--space-2xs); color: var(--color-primary); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.article-card__title { font-size: clamp(1.6rem, 2.5vw, 2.25rem); }
.article-card__title a { color: inherit; text-decoration: none; }
.article-card__title a:hover { color: var(--color-primary); }
.article-card__date { display: block; margin-top: var(--space-xs); color: var(--color-muted); font-size: 0.72rem; }
.article-card__excerpt { margin-top: var(--space-xs); color: var(--color-muted); font-size: 0.85rem; }
.article-card .text-link { margin-top: auto; padding-top: var(--space-sm); }
.blog-empty { max-width: 42rem; padding: var(--space-lg); border: 1px solid var(--color-border); background: var(--color-surface); text-align: center; }
.blog-empty h2 { margin-top: var(--space-xs); font-size: clamp(2rem, 4vw, 3.5rem); }
.blog-empty p:last-child { margin-top: var(--space-sm); color: var(--color-muted); }
.navigation.pagination { display: flex; justify-content: center; margin-top: var(--space-lg); }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs); }
.nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; padding-inline: 0.45rem; border: 1px solid var(--color-border); color: var(--color-text); font-size: 0.72rem; font-weight: 700; text-decoration: none; }
.nav-links a.page-numbers:hover, .nav-links .page-numbers.current { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-inverse); }
.blog-single__article { padding-top: var(--space-xl); }
.blog-single__header { max-width: 52rem; margin-inline: auto; }
.blog-single__header .eyebrow a { color: inherit; text-decoration: none; }
.blog-single__date { display: block; margin-top: var(--space-sm); color: var(--color-muted); font-size: 0.78rem; }
.blog-single__image { max-width: 68rem; margin: var(--space-lg) auto 0; }
.blog-single__image img { width: 100%; aspect-ratio: 1.85; object-fit: cover; }
.blog-single__content { max-width: 44rem; margin: var(--space-lg) auto 0; color: var(--color-text); font-size: clamp(1rem, 1.25vw, 1.14rem); line-height: 1.75; overflow-wrap: anywhere; }
.blog-single__content > * { max-width: 100%; }
.blog-single__content h2, .blog-single__content h3, .blog-single__content h4 { margin-top: var(--space-lg); line-height: 1.12; }
.blog-single__content h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.blog-single__content h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.blog-single__content h4 { font-size: clamp(1.2rem, 2vw, 1.6rem); }
.blog-single__content p, .blog-single__content ul, .blog-single__content ol, .blog-single__content blockquote, .blog-single__content figure, .blog-single__content .wp-block-table, .blog-single__content pre { margin-block: var(--space-md); }
.blog-single__content ul, .blog-single__content ol { padding-left: 1.3em; }
.blog-single__content li + li { margin-top: 0.35em; }
.blog-single__content a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.blog-single__content blockquote { padding: var(--space-sm) 0 var(--space-sm) var(--space-md); border-left: 2px solid var(--color-primary); font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.15; }
.blog-single__content img { height: auto; }
.blog-single__content figcaption, .blog-single__content .wp-element-caption { margin-top: var(--space-2xs); color: var(--color-muted); font-size: 0.75rem; text-align: center; }
.blog-single__content .wp-block-gallery { display: grid; gap: var(--space-xs); }
.blog-single__content .wp-block-button__link { border-radius: 0; background: var(--color-primary); font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.blog-single__content .wp-block-separator { width: 100%; border: 0; border-top: 1px solid var(--color-border); }
.blog-single__content .wp-block-table { overflow-x: auto; }
.blog-single__content table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.blog-single__content th, .blog-single__content td { padding: 0.65em; border: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.blog-single__content pre { padding: var(--space-sm); overflow-x: auto; background: var(--color-text); color: var(--color-inverse); font-size: 0.82em; }
.blog-single__content code { overflow-wrap: anywhere; font-size: 0.9em; }
.blog-single__content .wp-block-embed { overflow: hidden; }
.blog-single__content .wp-block-embed iframe { max-width: 100%; }
.blog-single__back { max-width: 44rem; margin: var(--space-lg) auto 0; }
.blog-related { margin-top: var(--space-xl); border-top: 1px solid var(--color-border); }
.blog-related h2 { margin-top: var(--space-xs); font-size: clamp(2.5rem, 5vw, 4.5rem); }
/* Contact */
.contact-hero__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.72fr); align-items: center; gap: clamp(2rem, 8vw, 9rem); }
.contact-hero h1 { margin-top: var(--space-xs); font-size: clamp(3.5rem, 7vw, 7rem); }
.contact-hero__lead { max-width: 33rem; margin-top: var(--space-sm); font-family: var(--font-display); font-size: clamp(1.55rem, 3vw, 2.6rem); line-height: 1.08; }
.contact-details { display: grid; gap: var(--space-xs); margin-top: var(--space-lg); }
.contact-details p { display: grid; gap: var(--space-2xs); margin: 0; padding-top: var(--space-xs); border-top: 1px solid var(--color-border); font-size: 0.9rem; }
.contact-details span { color: var(--color-primary); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.contact-details a { color: var(--color-text); text-decoration-color: var(--color-primary); text-underline-offset: 0.2em; }
.contact-details__placeholder { color: var(--color-muted); }
.contact-details__socials { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--color-border); font-size: 0.78rem; }
.contact-details__socials span { flex-basis: 100%; }
.contact-hero__visual .editorial-placeholder--contact { width: 100%; min-height: 0; aspect-ratio: 0.82; }
.contact-form-section__grid { display: grid; grid-template-columns: minmax(0, 0.65fr) minmax(25rem, 1fr); gap: clamp(2rem, 8vw, 9rem); align-items: start; }
.contact-form-section__intro h2 { margin-top: var(--space-xs); font-size: clamp(2.5rem, 5vw, 4.5rem); }
.contact-form-section__intro p { margin-top: var(--space-sm); color: var(--color-muted); }
.contact-form-wrap { min-width: 0; }
.form-notice { margin-bottom: var(--space-md); padding: var(--space-sm); border: 1px solid var(--color-border); }
.form-notice p { margin: 0; }
.form-notice--success { border-color: var(--color-primary); background: var(--color-primary-soft); }
.form-notice--error, .form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: var(--color-primary); }
.contact-form { padding: var(--space-md); border: 1px solid var(--color-border); background: var(--color-surface); }
.contact-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.form-field { min-width: 0; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { display: inline-block; margin-bottom: 0.4rem; color: var(--color-text); font-size: 0.75rem; font-weight: 700; }
.form-field label span[aria-hidden='true'], .contact-form__required span { color: var(--color-primary); }
.form-field textarea { min-height: 10rem; resize: vertical; }
.form-field__error { margin-top: 0.35rem; color: var(--color-primary); font-size: 0.72rem; }
.contact-form__required { margin: var(--space-sm) 0; color: var(--color-muted); font-size: 0.72rem; }
.contact-form__honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.home-hero__visual > img, .home-audience__visual > img, .service-feature__visual > img, .about-hero__portrait > img, .books-hero__visual > img, .contact-hero__visual > img { width: 100%; height: 100%; object-fit: cover; }
.home-hero__visual > img { aspect-ratio: 0.92; }.home-audience__visual > img { aspect-ratio: 0.82; }.service-feature__visual > img { aspect-ratio: 0.82; }.about-hero__portrait > img { min-height: 39rem; }.books-hero__visual > img { aspect-ratio: 0.84; }.contact-hero__visual > img { height: auto; min-height: 0; aspect-ratio: 0.82; }
.editorial-collage-image { position: absolute; object-fit: cover; }.editorial-collage-image--one { width: 74%; aspect-ratio: 0.8; }.editorial-collage-image--two { right: 0; bottom: 0; width: 54%; aspect-ratio: 0.88; }
@media (max-width: 69.99rem) {
.site-header__actions { gap: var(--space-sm); }
.site-navigation-toggle { display: block; }
.site-navigation { position: absolute; z-index: 30; top: 100%; right: 0; left: 0; display: none; max-height: calc(100vh - var(--header-height)); padding: var(--space-md) var(--gutter) var(--space-lg); overflow-y: auto; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.site-navigation.is-open { display: block; }
.site-navigation ul { align-items: flex-start; flex-direction: column; gap: var(--space-sm); }
.site-navigation a { font-size: 0.9rem; }
.site-navigation-toggle[aria-expanded='true'] > .site-navigation-toggle__bar--top { transform: translateY(0.16rem) rotate(45deg); }
.site-navigation-toggle[aria-expanded='true'] > .site-navigation-toggle__bar--bottom { transform: translateY(-0.16rem) rotate(-45deg); }
.home-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.72fr); gap: var(--space-lg); }
.home-disciplines__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-disciplines__item:nth-child(4) { border-left: 1px solid var(--color-border); }
.home-disciplines__item:nth-child(-n + 3) { border-bottom: 1px solid var(--color-border); }
.home-audience__grid { grid-template-columns: 1fr; }
.home-audience__visual { max-width: 34rem; }
.service-feature { gap: var(--space-lg); }
.about-traits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.books-help__grid { grid-template-columns: 1fr; }
.editorial-process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portfolio-single__hero-grid { grid-template-columns: 1fr; }
.portfolio-single__main-image { max-width: 34rem; }
.references-grid { grid-template-columns: 1fr; }
.article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-hero__grid, .contact-form-section__grid { grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr); gap: var(--space-lg); }
}
@media (max-width: 43.99rem) {
:root { --header-height: 4.9rem; }
.site-branding .custom-logo { max-width: 8.5rem; max-height: 3.15rem; }
.button--header { display: none; }
.site-footer__top { grid-template-columns: 1fr; gap: var(--space-md); }
.site-footer__navigation ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-hero { padding-top: var(--space-md); }
.home-hero__grid { grid-template-columns: 1fr; }
.home-hero__content { padding-block: 0; }
.home-hero__visual { width: min(100%, 30rem); max-width: 30rem; margin-inline: auto; justify-self: center; }
.home-image-placeholder--hero { aspect-ratio: 1; }
.home-disciplines__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-disciplines__item { min-height: 7.5rem; border-bottom: 1px solid var(--color-border); }
.home-disciplines__item:nth-child(odd) { border-left: 1px solid var(--color-border); }
.home-disciplines__item:nth-child(4) { border-left: 0; }
.home-disciplines__item:nth-child(5) { border-left: 1px solid var(--color-border); }
.home-disciplines__item:nth-child(5), .home-disciplines__item:nth-child(6) { border-bottom: 0; }
.home-audience__segments { grid-template-columns: 1fr; }
.home-audience__visual { max-width: 100%; }
.home-projects__grid { grid-template-columns: 1fr; }
.service-feature, .service-feature--reverse { grid-template-columns: 1fr; }
.service-feature--reverse .service-feature__visual { order: 0; }
.service-feature__visual { max-width: 28rem; }
.editorial-placeholder--portrait { min-height: 28rem; }
.about-hero__grid, .books-hero__grid, .collaboration-hero__grid { grid-template-columns: 1fr; }
.about-hero__portrait, .books-hero__visual { max-width: 30rem; }
.about-proof__grid { grid-template-columns: 1fr; }
.about-proof__item, .about-proof__item:first-child { border: 0; border-top: 1px solid var(--color-border); }
.about-proof__item:last-child { border-bottom: 1px solid var(--color-border); }
.about-traits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.editorial-process { grid-template-columns: 1fr; gap: var(--space-sm); }
.collaboration-specialties { grid-template-columns: 1fr; }
.collaboration-hero__visual { min-height: 25rem; }
.portfolio-grid { grid-template-columns: 1fr; }
.portfolio-single__facts, .portfolio-single__story-grid, .portfolio-gallery__grid { grid-template-columns: 1fr; }
.portfolio-filters { flex-wrap: nowrap; padding-bottom: var(--space-xs); overflow-x: auto; }
.portfolio-filter { white-space: nowrap; }
.article-grid { grid-template-columns: 1fr; }
.blog-archive__intro h1, .blog-single__header h1 { font-size: clamp(3rem, 15vw, 4.5rem); }
.blog-single__article { padding-top: var(--space-lg); }
.blog-single__image img { aspect-ratio: 1.2; }
.blog-single__content { margin-top: var(--space-md); }
.nav-links .page-numbers { min-width: 2.25rem; }
.contact-hero__grid, .contact-form-section__grid { grid-template-columns: minmax(0, 1fr); }
.contact-hero__content, .contact-hero__visual { width: 100%; min-width: 0; }
.contact-hero__visual { max-width: 30rem; }
.about-hero__portrait > img { min-height: 28rem; }
.books-hero__visual > img, .service-feature__visual > img { max-width: 100%; }
.contact-form { padding: var(--space-sm); }
.contact-form__grid { grid-template-columns: 1fr; }
.form-field--full { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
/* Offer and legal page variants. */
.offer-page__content, .legal-page__hero-content { max-width: 52rem; }
.offer-page h1, .legal-page h1 { margin-top: var(--space-xs); font-size: clamp(3.25rem, 7vw, 6.5rem); }
.offer-page__lead, .legal-page__lead { margin-top: var(--space-sm); font-family: var(--font-display); font-size: clamp(1.65rem, 3vw, 2.7rem); line-height: 1.1; }
.offer-page__content > p:last-child { max-width: 42rem; margin-top: var(--space-md); color: var(--color-muted); }
.offer-page__form-section h2 { font-size: clamp(2.25rem, 4vw, 4rem); }
.offer-page__note { max-width: 42rem; margin-top: var(--space-sm); color: var(--color-muted); }
.offer-page__placeholder { max-width: 52rem; margin-top: var(--space-md); padding: var(--space-md); border: 1px solid var(--color-border); background: var(--color-surface); }
.offer-page__placeholder p { margin: 0 0 var(--space-sm); color: var(--color-muted); }
.legal-page__content { padding-top: var(--space-lg); }
.legal-page__links { display: grid; gap: 0; max-width: 58rem; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--color-border); }
.legal-page__links li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: var(--space-xs); align-items: center; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.75rem); }
.legal-page__links span { color: var(--color-primary); font-family: var(--font-sans); }
.legal-page__links small { color: var(--color-muted); font-family: var(--font-sans); font-size: 0.68rem; text-align: right; }
.legal-page__note { max-width: 58rem; margin-top: var(--space-lg); padding: var(--space-lg); background: var(--color-primary-soft); font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.4rem); }
.home-references h2 { margin-top: var(--space-xs); font-size: clamp(2.5rem, 5vw, 4.75rem); }.home-references__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-sm); margin-block:var(--space-lg) var(--space-md); }.home-references__empty { max-width:38rem; padding:var(--space-md); border:1px solid var(--color-border); color:var(--color-muted); }.home-cta { padding-block:var(--space-lg); background:var(--color-primary); color:var(--color-inverse); }.home-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); }.home-cta .eyebrow { color:inherit; }.home-cta h2 { margin-top:var(--space-xs); font-size:clamp(2.2rem,4vw,4.5rem); }.button--inverse { border-color:var(--color-surface); background:var(--color-surface); color:var(--color-primary); }
.service-list--compact .site-container { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm); }.service-list--compact .service-feature { display:block; min-height:100%; padding:var(--space-md); border:1px solid var(--color-border); background:var(--color-surface); }.service-list--compact .service-feature__content { max-width:none; }.service-list--compact .service-feature h2 { font-family:var(--font-sans); font-size:clamp(1.35rem,2vw,2rem); letter-spacing:.02em; text-transform:uppercase; }.service-list--compact .editorial-checklist { margin-top:var(--space-sm); }
@media (max-width:69.99rem){.home-references__grid{grid-template-columns:1fr;}}@media(max-width:43.99rem){.home-cta__inner{align-items:flex-start;flex-direction:column;}.service-list--compact .site-container{grid-template-columns:1fr;}}
.full-service { background: var(--color-primary-soft); }.full-service__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem,.76fr); align-items:center; gap:clamp(2rem,7vw,7rem); }.full-service__content,.full-service__visual { min-width:0; }.full-service h2 { margin-top:var(--space-xs); font-size:clamp(2.4rem,5vw,5rem); }.full-service__content > p:not(.eyebrow) { max-width:35rem; margin-top:var(--space-sm); color:var(--color-muted); }.full-service .button { margin-top:var(--space-md); }.full-service__visual .editorial-placeholder { width:100%; min-height:0; aspect-ratio:1.15; }.full-service__visual img { width:100%; height:auto; min-height:0; aspect-ratio:1.15; object-fit:cover; }@media(max-width:43.99rem){.full-service__grid{grid-template-columns:minmax(0,1fr);}.full-service__content,.full-service__visual{width:100%;}.full-service__visual{max-width:32rem;}}
.site-branding__fallback { position:absolute; top:.35rem; left:0; z-index:2; display:block; width:8rem; height:8rem; overflow:hidden; border-radius:50%; }.site-branding__fallback img { display:block; width:100%; height:100%; object-fit:cover; }.home-hero__visual > img { object-position:52% 25%; }.about-hero__portrait > img { width:100%; height:100%; min-height:39rem; object-fit:cover; object-position:54% 22%; }@media(max-width:69.99rem){.site-branding{flex-basis:4rem;width:4rem;min-width:4rem;}.site-branding__fallback{width:6.5rem;height:6.5rem;}}@media(max-width:43.99rem){.site-branding{flex-basis:3.15rem;width:3.15rem;min-width:3.15rem;}.site-branding__fallback{top:.3rem;width:5.25rem;height:5.25rem;}.home-hero__visual > img{object-position:54% 18%;}.about-hero__portrait > img{min-height:28rem;object-position:54% 20%;}}
@media (max-width: 43.99rem) { .legal-page__links li { grid-template-columns: 1.25rem minmax(0, 1fr); } .legal-page__links small { grid-column: 2; text-align: left; } }
/* 0.2.10 — Master rails. Hero geometry is the single source of truth
for every major two-column section: identical outer container, identical
right media column width and identical inter-column gap. */
:root {
--split-visual-width: 31rem;
--split-gap: clamp(2rem, 4.5vw, 5rem);
}
.home-hero__grid,
.home-audience__grid,
.about-hero__grid,
.books-hero__grid,
.collaboration-hero__grid,
.books-help__grid,
.portfolio-single__hero-grid,
.contact-hero__grid,
.contact-form-section__grid,
.full-service__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, var(--split-visual-width));
gap: var(--split-gap);
align-items: center;
}
/* Left column always begins on the same rail as the hero copy. */
.home-hero__content,
.home-audience__content,
.about-hero__content,
.books-hero__content,
.collaboration-hero__content,
.portfolio-single__hero-grid > :first-child,
.contact-hero__content,
.contact-form-section__intro,
.full-service__content,
.books-help__grid > :first-child {
min-width: 0;
justify-self: stretch;
}
/* Right column always occupies exactly the hero image rail. */
.home-hero__visual,
.home-audience__visual,
.about-hero__portrait,
.books-hero__visual,
.collaboration-hero__visual,
.portfolio-single__main-image,
.contact-hero__visual,
.contact-form-wrap,
.full-service__visual,
.books-help__grid > :last-child {
width: 100%;
max-width: none;
min-width: 0;
justify-self: stretch;
}
/* Full-width sections share the exact same outer rails as the hero. */
.home-disciplines > .site-container,
.home-projects > .site-container,
.home-references > .site-container,
.about-proof > .site-container,
.about-traits > .site-container,
.books-process > .site-container,
.collaboration-process > .site-container,
.service-list > .site-container,
.portfolio-archive > .site-container,
.references-page .site-container,
.blog-archive .site-container,
.blog-related .site-container,
.legal-page__content > .site-container,
.offer-page > .site-container,
.site-footer > .site-container {
width: min(calc(100% - (var(--gutter) * 2)), var(--container-max));
margin-inline: auto;
}
/* Keep the hero's visual size as the master reference. */
.home-hero__visual { width: 100%; }
@media (max-width: 69.99rem) {
:root {
--split-visual-width: 24rem;
--split-gap: var(--space-lg);
}
.home-hero__grid,
.home-audience__grid,
.about-hero__grid,
.books-hero__grid,
.collaboration-hero__grid,
.books-help__grid,
.portfolio-single__hero-grid,
.contact-hero__grid,
.contact-form-section__grid,
.full-service__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, var(--split-visual-width));
gap: var(--split-gap);
}
}
@media (max-width: 43.99rem) {
.home-hero__grid,
.home-audience__grid,
.about-hero__grid,
.books-hero__grid,
.collaboration-hero__grid,
.books-help__grid,
.portfolio-single__hero-grid,
.contact-hero__grid,
.contact-form-section__grid,
.full-service__grid {
grid-template-columns: minmax(0, 1fr);
}
.home-hero__visual,
.home-audience__visual,
.about-hero__portrait,
.books-hero__visual,
.collaboration-hero__visual,
.portfolio-single__main-image,
.contact-hero__visual,
.contact-form-wrap,
.full-service__visual,
.books-help__grid > :last-child {
width: min(100%, 30rem);
max-width: 30rem;
margin-inline: auto;
justify-self: center;
}
}
/* 0.2.11 — Keep split placeholders inside the exact hero visual rail.
Placeholder aspect-ratio must derive height from the fixed rail width,
never derive width from the stretched grid-row height. */
.home-audience__visual,
.full-service__visual,
.books-help__grid > :last-child,
.collaboration-hero__visual,
.contact-hero__visual {
align-self: center;
}
.home-audience__visual > .home-image-placeholder,
.full-service__visual > .home-image-placeholder,
.books-help__grid > :last-child > .home-image-placeholder,
.collaboration-hero__visual > .home-image-placeholder,
.contact-hero__visual > .home-image-placeholder {
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 0;
height: auto;
}
/* 0.3.0 — Ordinary Page content now lives in Gutenberg (post_content).
These rules let core blocks keep the established Jenifer visual system. */
.jenifer-gutenberg-page { padding-block: 0; }
.jenifer-gutenberg-page > .wp-block-group { margin-block: 0; }
.jenifer-gutenberg-page .wp-block-columns { margin-bottom: 0; }
.jenifer-gutenberg-page .wp-block-column { min-width: 0; }
.jenifer-gutenberg-page .wp-block-image { margin: 0; }
.jenifer-gutenberg-page .wp-block-image img { display: block; width: 100%; height: auto; }
.jenifer-gutenberg-page .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.9rem;
padding: .75rem 1.2rem;
border: 1px solid var(--color-primary);
border-radius: var(--radius-sm);
background: var(--color-primary);
color: var(--color-inverse);
font-family: var(--font-sans);
font-size: .72rem;
font-weight: 700;
letter-spacing: .045em;
line-height: 1;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.jenifer-gutenberg-page .wp-block-button__link:hover {
border-color: var(--color-primary-hover);
background: var(--color-primary-hover);
color: var(--color-inverse);
transform: translateY(-1px);
}
.jenifer-gutenberg-page .jenifer-button--secondary .wp-block-button__link {
background: transparent;
color: var(--color-primary);
}
.jenifer-gutenberg-page .jenifer-button--secondary .wp-block-button__link:hover {
background: var(--color-primary-soft);
color: var(--color-primary);
}
/* Editable discipline strip: icons are decorative CSS, labels remain normal blocks. */
.gutenberg-disciplines {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.gutenberg-discipline {
display: grid;
place-items: center;
align-content: center;
gap: var(--space-xs);
min-height: 9.25rem;
padding: var(--space-md) var(--space-xs);
border-right: 1px solid var(--color-border);
font-size: .67rem;
font-weight: 700;
line-height: 1.35;
text-align: center;
}
.gutenberg-discipline:first-child { border-left: 1px solid var(--color-border); }
.gutenberg-discipline::before {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
color: var(--color-primary);
font-size: 1.2rem;
font-weight: 400;
content: "✦";
}
.gutenberg-discipline--2::before { content: "▣"; }
.gutenberg-discipline--3::before { content: "▤"; }
.gutenberg-discipline--4::before { content: "✎"; }
.gutenberg-discipline--5::before { content: "▥"; }
.gutenberg-discipline--6::before { content: "♡"; }
.gutenberg-discipline p { margin: 0; }
/* Core image figures inside the visual rails must behave like the previous PHP images. */
.home-hero__visual > .wp-block-image,
.home-audience__visual > .wp-block-image,
.about-hero__portrait > .wp-block-image,
.books-hero__visual > .wp-block-image,
.contact-hero__visual > .wp-block-image,
.full-service__visual > .wp-block-image {
width: 100%;
height: 100%;
}
.home-hero__visual > .wp-block-image img { aspect-ratio: .92; object-fit: cover; object-position: 52% 25%; }
.home-audience__visual > .wp-block-image img { aspect-ratio: .82; object-fit: cover; }
.about-hero__portrait > .wp-block-image img { min-height: 39rem; object-fit: cover; object-position: 54% 22%; }
.books-hero__visual > .wp-block-image img { aspect-ratio: .84; object-fit: cover; }
.contact-hero__visual > .wp-block-image img { aspect-ratio: .82; object-fit: cover; }
.full-service__visual > .wp-block-image img { aspect-ratio: 1.15; object-fit: cover; }
/* The old visual placeholders are now ordinary editable Groups. */
.jenifer-editor-placeholder { min-height: 24rem; }
.jenifer-editor-placeholder > p {
z-index: 1;
align-self: end;
justify-self: start;
margin: var(--space-sm);
padding: var(--space-2xs) var(--space-xs);
border: 1px solid var(--color-primary);
background: var(--color-surface);
color: var(--color-primary);
font-size: .62rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
/* Core Columns/List wrappers used by the migrated editable sections. */
.home-audience__segments.wp-block-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-proof__grid.wp-block-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-proof__item h3 { color: var(--color-primary); font-size: clamp(2.5rem, 5vw, 4.5rem); }
.about-proof__item p { color: var(--color-muted); font-size: .72rem; }
.editorial-process.wp-block-list > li {
display: grid;
gap: var(--space-xs);
padding-top: var(--space-xs);
border-top: 1px solid var(--color-border);
color: var(--color-muted);
font-size: .78rem;
}
/* Gutenberg shortcode blocks do not add frontend chrome. */
.jenifer-gutenberg-page .wp-block-shortcode { margin: 0; }
@media (max-width: 69.99rem) {
.gutenberg-disciplines { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 43.99rem) {
.gutenberg-disciplines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-audience__segments.wp-block-columns,
.about-proof__grid.wp-block-columns { grid-template-columns: 1fr; }
.about-hero__portrait > .wp-block-image img { min-height: 28rem; object-position: 54% 20%; }
}
/* 0.3.2 — Compact first-section spacing across inner pages.
The previous Gutenberg migration left both .site-main and the first .section
with large vertical padding, effectively doubling the gap below the header. */
.jenifer-gutenberg-page,
.portfolio-archive,
.portfolio-single {
padding-block: 0;
}
.jenifer-gutenberg-page > .section:first-child,
.portfolio-archive > .section:first-child,
.portfolio-single > .section:first-child {
padding-top: clamp(1.75rem, 3vw, 3rem);
}
@media (max-width: 43.99rem) {
.jenifer-gutenberg-page > .section:first-child,
.portfolio-archive > .section:first-child,
.portfolio-single > .section:first-child {
padding-top: var(--space-md);
}
}
/* ==========================================================================
0.3.6 — VISUAL REBUILD FROM THE APPROVED JENIFER MOCKUPS
========================================================================== */
:root {
--color-primary: #EF1493;
--color-primary-hover: #C81278;
--color-primary-soft: #F7EEF2;
--color-bg: #F7EEF2;
--color-surface: #fffefd;
--color-surface-muted: #fbedf0;
--color-text: #111111;
--color-muted: #6F6870;
--color-border: #efdde2;
--color-border-strong: #e1c5cf;
--color-footer: #111111;
--font-serif: 'Playfair Display', serif;
--font-sans: 'Montserrat', sans-serif;
--font-accent: 'Playfair Display', serif;
--container-max: 78rem;
--gutter: clamp(1.1rem, 3vw, 2.5rem);
--radius-sm: .45rem;
--radius-md: .9rem;
--radius-lg: 1.35rem;
--shadow-card: 0 12px 32px rgb(73 28 47 / 6%);
--header-height: 6.1rem;
}
body {
background:
radial-gradient(circle at 12% 10%, rgb(239 20 147 / 2.5%), transparent 25rem),
linear-gradient(180deg, #F7EEF2 0%, #fff 48%, #fff8f6 100%);
color: var(--color-text);
font-family: var(--font-sans);
line-height: 1.58;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
font-weight: 400;
letter-spacing: -.035em;
line-height: 1.02;
}
h1, .heading-1 { font-size: clamp(3rem, 6.1vw, 6.3rem); }
h2, .heading-2 { font-size: clamp(2.25rem, 4.6vw, 4.55rem); }
h3, .heading-3 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
.redesign-serif-accent {
color: var(--color-primary);
font-style: italic;
}
.eyebrow {
gap: .7rem;
font-size: .72rem;
font-weight: 800;
letter-spacing: .12em;
}
.eyebrow::before { width: 2rem; }
.section { padding-block: clamp(3.4rem, 6vw, 6.4rem); }
.section--surface { background: rgb(255 255 255 / 68%); }
/* Header / wordmark */
.site-header {
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid rgb(235 214 222 / 72%);
background: rgb(255 250 248 / 93%);
backdrop-filter: blur(16px);
}
.site-header__inner { min-height: var(--header-height); gap: clamp(1.25rem, 3vw, 3rem); }
.brand-wordmark {
position: relative;
display: inline-grid;
flex: 0 0 auto;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
align-items: end;
min-width: 9.8rem;
color: var(--color-text);
line-height: 1;
text-decoration: none;
}
.brand-wordmark:hover { color: var(--color-text); }
.brand-wordmark__main {
grid-column: 1 / 2;
font-family: var(--font-sans);
font-size: 1.12rem;
font-weight: 800;
letter-spacing: .22em;
}
.brand-wordmark__script {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
margin-left: -.15rem;
color: var(--color-primary);
font-family: var(--font-accent);
font-size: 1.05rem;
font-style: italic;
transform: rotate(-7deg);
}
.brand-wordmark small {
grid-column: 1 / 2;
margin-top: .38rem;
color: #8b7e84;
font-size: .42rem;
font-weight: 700;
letter-spacing: .12em;
}
.site-header__actions { flex: 1; justify-content: flex-end; }
.site-navigation ul { gap: clamp(.85rem, 1.5vw, 1.55rem); }
.site-navigation a {
position: relative;
padding-block: 1rem;
font-size: .72rem;
font-weight: 750;
}
.site-navigation .current-menu-item > a::after,
.site-navigation .current-menu-ancestor > a::after {
position: absolute;
right: 0;
bottom: .52rem;
left: 0;
height: 2px;
border-radius: 99px;
background: var(--color-primary);
content: '';
}
.button, .jenifer-gutenberg-page .wp-block-button__link {
min-height: 3rem;
padding: .8rem 1.35rem;
border-radius: .5rem;
box-shadow: 0 9px 20px rgb(239 20 147 / 10%);
font-size: .7rem;
font-weight: 800;
letter-spacing: .03em;
}
.button--header { min-height: 2.85rem; padding-inline: 1.35rem; border-radius: .75rem; }
.jenifer-gutenberg-page .jenifer-button--secondary .wp-block-button__link {
background: rgb(255 255 255 / 74%);
box-shadow: none;
}
/* Shared card language */
.redesign-card,
.card,
.reference-card,
.contact-form-wrap,
.legal-item {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: rgb(255 255 255 / 91%);
box-shadow: var(--shadow-card);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgb(73 28 47 / 9%); }
/* Homepage hero */
.site-main--home { overflow: clip; }
.home-hero {
position: relative;
padding-block: clamp(2.15rem, 4vw, 4.5rem) clamp(2.2rem, 4vw, 4rem);
background:
radial-gradient(circle at 73% 44%, rgb(239 20 147 / 7%), transparent 26rem),
linear-gradient(105deg, #F7EEF2 0%, #fff6f4 48%, #f8e4e6 100%);
}
.home-hero::after {
position: absolute;
right: 4%;
bottom: 8%;
width: 12rem;
height: 12rem;
border: 1px solid rgb(239 20 147 / 10%);
border-radius: 50%;
content: '';
}
.home-hero__grid {
position: relative;
z-index: 2;
grid-template-columns: minmax(0, 1fr) minmax(26rem, 33rem) !important;
gap: clamp(2rem, 5vw, 5rem) !important;
}
.home-hero__content { max-width: 40rem; }
.home-hero__title {
display: block;
margin-top: 1rem;
font-size: clamp(3.05rem, 5.2vw, 5.55rem);
line-height: .98;
}
.home-hero__title .redesign-serif-accent {
display: inline-block;
margin-top: .08em;
font-family: var(--font-accent);
font-style: italic;
font-weight: 400;
letter-spacing: -0.03em;
}
.home-hero__intro {
max-width: 37rem;
margin-top: .9rem;
color: #4f464b;
font-size: clamp(.9rem, 1vw, 1rem);
line-height: 1.62;
}
.home-hero__intro--strong { margin-top: 1.1rem; }
.home-hero__actions { gap: .75rem; margin-top: 1.6rem; }
.home-hero__visual {
position: relative;
align-self: end;
overflow: hidden;
border-radius: 2rem 2rem .75rem .75rem;
box-shadow: 0 24px 60px rgb(89 38 54 / 13%);
}
.home-hero__visual::before {
position: absolute;
z-index: 2;
inset: auto 1rem 1rem auto;
padding: .55rem .8rem;
border: 1px solid rgb(239 20 147 / 26%);
border-radius: .6rem;
background: rgb(255 250 248 / 84%);
color: var(--color-primary);
font-family: var(--font-accent);
font-size: 1rem;
content: 'Máte nápad? Já mu dám směr.';
transform: rotate(-4deg);
backdrop-filter: blur(7px);
}
.home-hero__visual > .wp-block-image img {
aspect-ratio: .88 !important;
min-height: 31rem;
object-fit: cover;
object-position: 50% 22%;
}
/* disciplines strip */
.redesign-disciplines { padding-block: 0; background: #fff; box-shadow: 0 12px 35px rgb(73 28 47 / 4%); }
.gutenberg-disciplines {
grid-template-columns: repeat(12, minmax(5.8rem, 1fr));
overflow-x: auto;
scrollbar-width: thin;
}
.gutenberg-discipline {
min-height: 7.3rem;
padding: 1.2rem .75rem;
border-right: 1px solid var(--color-border);
font-size: .67rem;
white-space: nowrap;
}
.gutenberg-discipline::before {
width: 2rem;
height: 2rem;
font-size: 1.35rem;
}
/* audience */
.redesign-audience { background: linear-gradient(180deg, #fff 0%, #fffaf9 100%); }
.home-audience__content { max-width: none; }
.home-audience__title { margin-top: .8rem; text-align: center; }
.redesign-audience .eyebrow { display: flex; justify-content: center; }
.redesign-audience-grid {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 1rem !important;
margin-top: 2.4rem;
}
.home-audience__segment {
grid-column: span 2;
min-height: 15rem;
padding: 1.55rem;
border-top: 3px solid var(--color-primary);
}
.home-audience__segment:nth-child(4) { grid-column: 2 / span 2; }
.home-audience__segment:nth-child(5) { grid-column: 4 / span 2; }
.home-audience__segment h3 {
margin-top: .75rem;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 800;
letter-spacing: .01em;
line-height: 1.25;
text-transform: uppercase;
}
.home-audience__segment p { margin-top: .75rem; color: var(--color-muted); font-size: .82rem; }
.home-audience__segment-number { font-size: 1.55rem; font-family: var(--font-serif); }
/* Portfolio blocks */
.redesign-projects { background: linear-gradient(180deg, #fff5f6 0%, #fff 100%); }
.redesign-projects .site-container > h2,
.redesign-references .site-container > h2 { margin-top: .7rem; }
.section-lead { max-width: 33rem; margin-top: .85rem; color: var(--color-muted); }
.home-projects__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.portfolio-card { border-radius: .9rem; }
.portfolio-card__image {
display: grid;
height: clamp(7rem, 8vw, 7.75rem);
place-items: center;
overflow: hidden;
border-radius: .9rem .9rem 0 0;
background: linear-gradient(135deg, #fbe4eb, #fff6f4);
}
.portfolio-card__image img {
display: block;
width: 100%;
height: 100%;
padding: clamp(.7rem, 1.4vw, 1rem) clamp(.9rem, 1.8vw, 1.3rem);
aspect-ratio: auto;
object-fit: contain;
object-position: center;
}
.portfolio-card__image:hover img { transform: none; }
.portfolio-card__placeholder {
display: grid;
width: 100%;
height: 100%;
min-height: 0;
aspect-ratio: auto;
place-items: center;
background: linear-gradient(135deg, #fdebf0, #f7e1dd);
color: var(--color-primary);
font-size: .75rem;
}
.portfolio-card .card__content { padding: 1.15rem; }
.portfolio-card__category { color: var(--color-primary); font-size: .63rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-card .card__title { margin-top: .5rem; font-size: 1.42rem; }
.portfolio-card .card__title a { text-decoration: none; }
.portfolio-card .card__meta { min-height: 2.6em; margin-top: .4rem; }
.portfolio-card .text-link { margin-top: 1rem; font-size: .68rem; text-transform: uppercase; }
/* References */
.redesign-references { background: #fffaf9; }
.home-references__grid,
.references-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.reference-card { position: relative; padding: 1.6rem; }
.reference-card__quote { position: absolute; top: .75rem; right: 1.25rem; color: rgb(239 20 147 / 14%); font-family: var(--font-serif); font-size: 5rem; line-height: 1; }
.reference-card blockquote { position: relative; z-index: 1; margin: 1rem 0; color: #50464b; font-family: var(--font-serif); font-size: 1.15rem; font-style: italic; line-height: 1.45; }
.reference-card__rating { color: var(--color-primary); letter-spacing: .18em; }
.reference-card footer { display: flex; gap: .8rem; align-items: center; margin-top: 1.2rem; }
.reference-card footer img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }
.reference-card footer strong, .reference-card footer span { display: block; font-size: .76rem; }
.reference-card footer span { color: var(--color-muted); }
/* final homepage CTA */
.redesign-home-cta {
padding-block: clamp(2.4rem, 4vw, 4rem);
background: linear-gradient(105deg, #ed006f 0%, #EF1493 55%, #cf4d72 100%);
color: #fff;
}
.redesign-home-cta .home-cta__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; }
.redesign-home-cta h2 { color: #fff; font-size: clamp(2.1rem, 4vw, 3.8rem); }
.redesign-home-cta p { max-width: 46rem; margin-top: .55rem; color: rgb(255 255 255 / 88%); }
.redesign-home-cta .wp-block-buttons { margin-top: 1.2rem; }
.redesign-home-cta .wp-block-button__link { border-color: #fff; background: #fff; color: var(--color-primary); }
.redesign-home-cta a { color: inherit; }
.home-cta__email { font-size: .8rem; }
.home .footer-cta { display: none; }
/* Inner page hero */
.redesign-inner-hero,
.redesign-books-hero,
.redesign-about,
.redesign-collaboration,
.redesign-contact,
.offer-redesign {
padding-top: clamp(2.8rem, 5vw, 5.5rem) !important;
background:
radial-gradient(circle at 82% 20%, rgb(239 20 147 / 5%), transparent 26rem),
linear-gradient(180deg, #F7EEF2 0%, #fff6f4 100%);
}
.redesign-inner-hero .editorial-intro__content { max-width: 52rem; }
.redesign-inner-hero h1 { margin-top: .8rem; font-size: clamp(3.2rem, 6vw, 6rem); }
.editorial-intro__lead { max-width: 42rem; margin-top: 1.25rem; font-size: clamp(1.45rem, 2.6vw, 2.5rem); }
/* Services */
.redesign-service-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem !important;
}
.redesign-service-grid .service-feature {
display: block;
min-height: 32rem;
padding: 1.55rem;
}
.service-feature__number { color: var(--color-primary); font-family: var(--font-serif); font-size: 2.4rem; }
.redesign-service-grid .service-feature h2 {
margin-top: .65rem;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 800;
letter-spacing: .015em;
line-height: 1.25;
}
.editorial-checklist { gap: .46rem; margin-block: 1.2rem; }
.editorial-checklist li { color: #51484d; font-size: .82rem; }
.editorial-checklist li::before { width: .35rem; height: .35rem; margin-top: .55em; border: 0; background: var(--color-primary); }
.service-feature__note { margin-top: 1rem; color: var(--color-muted); font-size: .74rem; }
.redesign-full-service { padding-top: 1.2rem; background: #fff; }
.redesign-full-service .full-service__grid {
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: linear-gradient(100deg, #fff1f3 0%, #fff 55%);
box-shadow: var(--shadow-card);
}
.full-service__content { padding: clamp(2rem, 4vw, 4rem); }
.full-service__content h2 { margin-top: .8rem; font-size: clamp(2rem, 4vw, 3.8rem); }
.full-service__content p { margin-top: 1rem; }
.full-service__content .wp-block-buttons { margin-top: 1.5rem; }
.full-service__visual { align-self: stretch !important; }
.full-service__visual .wp-block-image, .full-service__visual img { height: 100% !important; }
.full-service__visual img { aspect-ratio: auto !important; min-height: 25rem; object-fit: cover; object-position: 50% 20%; }
/* Process / How I work */
.redesign-process-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem !important; }
.process-card { padding: clamp(1.4rem, 2vw, 2rem); }
.process-card:nth-child(5) { grid-column: 1 / -1; }
.process-card h2 { color: var(--color-primary); font-family: var(--font-serif); font-size: clamp(1.65rem, 2.6vw, 2.45rem); }
.process-card p { margin-top: .65rem; color: #51484d; font-size: .85rem; }
/* Books */
.books-hero__grid, .about-hero__grid, .collaboration-hero__grid, .contact-hero__grid {
grid-template-columns: minmax(0, 1fr) minmax(24rem, 31rem) !important;
}
.books-hero__content h1, .about-hero__content h1, .collaboration-hero__content h1, .contact-hero__content h1 { margin-top: .8rem; }
.books-hero__content h3 { margin-top: 1.5rem; font-size: 1.6rem; }
.books-hero__content p { margin-top: .8rem; max-width: 38rem; }
.books-hero__content .wp-block-buttons { margin-top: 1.4rem; }
.redesign-book-visual,
.redesign-book-cover,
.redesign-collab-visual,
.redesign-contact-visual {
min-height: 31rem;
border-radius: 1.2rem;
background:
linear-gradient(145deg, rgb(255 255 255 / 20%), rgb(239 20 147 / 8%)),
radial-gradient(circle at 70% 20%, #f8d9e2 0 4rem, transparent 4.1rem),
linear-gradient(135deg, #fce8eb, #fff8f4 55%, #eed9dc);
}
.redesign-book-visual::before { inset: 16% 13%; border-radius: 1rem; transform: rotate(-4deg); }
.books-help__grid { align-items: stretch !important; }
.books-help__grid > .wp-block-column:last-child { padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid var(--color-border); border-radius: 1rem; background: var(--color-primary-soft); }
.redesign-book-list li { padding-block: .38rem; border-bottom: 1px solid rgb(225 197 207 / 60%); }
.redesign-statement { padding: clamp(2rem, 4vw, 4rem); border: 1px solid var(--color-border); border-radius: 1rem; background: var(--color-primary-soft); text-align: center; }
.redesign-statement p { margin-top: .75rem; font-size: 1.05rem; }
/* About */
.about-hero__content { max-width: 42rem; }
.about-hero__lead { margin-block: 1.15rem 1.6rem; font-size: clamp(1.8rem, 3.3vw, 3.2rem); }
.about-hero__content > p:not(.eyebrow) { margin-top: .72rem; color: #51484d; font-size: .88rem; }
.about-hero__portrait { overflow: hidden; border-radius: 1.25rem; box-shadow: var(--shadow-card); }
.about-hero__portrait img { min-height: 45rem !important; object-fit: cover; object-position: 50% 18%; }
.redesign-values-grid { display: grid !important; grid-template-columns: repeat(4, minmax(10.5rem, 13rem)); justify-content: center; gap: .9rem !important; }
.about-value { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .85rem .9rem; min-height: 4.9rem; text-align: center; }
.about-value__number { color: var(--color-primary); font-family: var(--font-serif); font-size: 2.2rem; line-height: 1; }
.about-value h3 { margin-top: .35rem; font-family: var(--font-sans); font-size: .9rem; font-weight: 800; }
/* Collaboration */
.collaboration-hero__content > p:not(.eyebrow) { margin-top: .85rem; }
.collaboration-hero__content h2 { margin-top: 1.75rem; font-size: 2rem; }
.collaboration-specialties-text { color: var(--color-primary); font-weight: 700; }
.redesign-collaboration-cta {
padding: clamp(2rem, 4vw, 4rem);
border: 1px solid var(--color-border);
border-radius: 1rem;
background: linear-gradient(120deg, #fff0f3 0%, #ffdce8 100%);
}
.redesign-collaboration-cta p { margin-top: .8rem; }
.redesign-collaboration-cta .wp-block-buttons { margin-top: 1.4rem; }
/* Contact */
.contact-hero__content > p:not(.eyebrow) { margin-top: .75rem; max-width: 38rem; }
.contact-quote { color: var(--color-primary); font-family: var(--font-serif); font-size: 1.35rem; font-style: italic; }
.contact-details { display: grid; gap: .45rem; margin-top: 1.6rem; }
.contact-details p { display: grid; grid-template-columns: 5rem 1fr; gap: .75rem; align-items: baseline; margin: 0 !important; }
.contact-details span { color: var(--color-primary); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.contact-details a { text-decoration: none; }
.redesign-contact-form > h2 { font-size: clamp(2.25rem, 4vw, 4rem); }
.redesign-contact-form > p { margin-top: .7rem; color: var(--color-muted); }
.redesign-contact-form .contact-form-wrap { margin-top: 2rem; padding: clamp(1.3rem, 3vw, 2.4rem); }
.contact-form__grid { gap: 1rem; }
.form-field label { font-size: .76rem; }
input:not([type='checkbox']):not([type='radio']), select, textarea {
min-height: 3.35rem;
border-radius: .55rem;
background: #fff;
}
textarea { min-height: 10rem; }
.contact-form .button { margin-top: 1rem; }
/* Offer / referral */
.offer-redesign .offer-redesign__content { max-width: 58rem; }
.offer-redesign__content h1 { margin-top: .8rem; }
.offer-redesign__content h2 { margin-top: 2.7rem; color: var(--color-primary); font-size: clamp(1.65rem, 3vw, 2.8rem); }
.offer-redesign__content h3 { margin-top: 1.4rem; font-size: 1.75rem; }
.offer-redesign__content p { margin-top: .75rem; max-width: 52rem; }
.offer-quote { padding: 1.2rem 1.35rem; border-left: 3px solid var(--color-primary); border-radius: .4rem; background: #fff; font-family: var(--font-serif); font-size: 1.2rem; font-style: italic; }
.offer-reward { color: var(--color-primary); }
.offer-redesign__content .wp-block-buttons { margin-top: 2rem; }
/* Legal */
.redesign-legal-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem !important; }
.legal-item { position: relative; padding: 1.4rem 1.5rem; }
.legal-item__number { color: var(--color-primary); font-family: var(--font-serif); font-size: 1.5rem; }
.legal-item h3 { margin-top: .4rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 750; letter-spacing: 0; }
/* Portfolio archive */
.portfolio-archive__intro {
padding-top: clamp(3rem, 5vw, 5rem) !important;
background: linear-gradient(180deg, #F7EEF2 0%, #fff4f2 100%);
}
.portfolio-archive__intro h1 { margin-top: .75rem; font-size: clamp(3.5rem, 6vw, 6rem); }
.portfolio-archive__intro p { margin-top: .8rem; color: var(--color-muted); font-family: var(--font-serif); font-size: clamp(1.3rem, 2vw, 2rem); }
.portfolio-filters { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 2rem; }
.portfolio-filter {
padding: .65rem 1rem;
border: 1px solid var(--color-border);
border-radius: 999px;
background: #fff;
font-size: .7rem;
font-weight: 750;
text-decoration: none;
}
.portfolio-filter.is-active, .portfolio-filter:hover { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
/* Portfolio single / case study */
.portfolio-single__hero { background: linear-gradient(180deg, #F7EEF2 0%, #fff5f4 100%); }
.portfolio-single__hero-grid { align-items: start !important; }
.portfolio-single h1 { margin-top: .6rem; font-size: clamp(3rem, 6vw, 5.7rem); }
.portfolio-single__subtitle { margin-top: .9rem; font-family: var(--font-serif); font-size: clamp(1.25rem, 2.3vw, 2.15rem); }
.portfolio-single__facts { display: grid; gap: .6rem; margin-block: 1.5rem; }
.portfolio-single__facts div { display: grid; grid-template-columns: 5rem 1fr; gap: .75rem; }
.portfolio-single__facts dt { color: var(--color-primary); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.portfolio-single__facts dd { margin: 0; }
.portfolio-single__main-image { overflow: hidden; border-radius: 1.25rem; box-shadow: var(--shadow-card); }
.portfolio-single__main-image img { aspect-ratio: .98; object-fit: cover; }
.portfolio-single__story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.portfolio-single__story article { padding: 1.5rem; border: 1px solid var(--color-border); border-radius: 1rem; background: #fff; box-shadow: var(--shadow-card); }
.portfolio-single__story h2 { color: var(--color-primary); font-size: 2rem; }
.portfolio-gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.portfolio-gallery__grid img { border-radius: .9rem; }
.portfolio-single__cta .site-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 2rem; border: 1px solid var(--color-border); border-radius: 1rem; background: var(--color-primary-soft); }
/* Footer CTA + footer */
.footer-cta {
padding-block: clamp(2rem, 4vw, 3.6rem);
background: linear-gradient(100deg, #ed006f 0%, #EF1493 65%, #d65378 100%);
color: #fff;
}
.footer-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.footer-cta h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.5rem); }
.footer-cta p { max-width: 48rem; margin-top: .5rem; color: rgb(255 255 255 / 88%); font-size: .86rem; }
.button--inverse { border-color: #fff; background: #fff; color: var(--color-primary); box-shadow: none; }
.button--inverse:hover { border-color: #fff; background: rgb(255 255 255 / 90%); color: var(--color-primary-hover); }
.site-footer { padding-block: clamp(2.8rem, 5vw, 4.8rem) 1.4rem; background: #111; }
.site-footer__top { grid-template-columns: 1.15fr .8fr 1fr 1fr 1.15fr; gap: clamp(1.2rem, 3vw, 3rem); }
.brand-wordmark--footer { color: #fff; }
.brand-wordmark--footer:hover { color: #fff; }
.brand-wordmark--footer .brand-wordmark__main { font-size: 1.35rem; }
.brand-wordmark--footer small { color: #a8a0a4; }
.site-footer__social-links { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; }
.site-footer__social-links a { color: #d9d1d5; font-size: .68rem; text-decoration: none; }
.site-footer__column h3 { margin-bottom: 1rem; color: #fff; font-family: var(--font-sans); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.site-footer ul { padding: 0; margin: 0; list-style: none; }
.footer-menu { display: grid; gap: .34rem; }
.site-footer .footer-menu a, .site-footer__contact p, .site-footer__contact a { color: #c5bdc1; font-size: .72rem; text-decoration: none; }
.site-footer__contact p + p { margin-top: .35rem; }
.site-footer__tagline { align-self: center; color: #fff; font-family: var(--font-accent); font-size: clamp(1.1rem, 2vw, 1.7rem); font-style: italic; line-height: 1.45; transform: rotate(-4deg); }
.site-footer__tagline span { color: var(--color-primary); font-size: 1.4em; }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.2rem; margin-top: 2rem; border-top: 1px solid rgb(255 255 255 / 13%); }
.site-footer__copyright, .site-footer__legal a { color: #8e878a; font-size: .64rem; text-decoration: none; }
/* Responsive */
@media (max-width: 72rem) {
.site-navigation ul { gap: .75rem; }
.site-navigation a { font-size: .68rem; }
.home-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.redesign-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__top { grid-template-columns: 1fr 1fr 1fr; }
.site-footer__tagline { grid-column: 2 / -1; }
}
@media (max-width: 60rem) {
.site-navigation { position: fixed; inset: var(--header-height) 0 auto; display: none; padding: 1.5rem var(--gutter) 2rem; border-bottom: 1px solid var(--color-border); background: #F7EEF2; }
.site-navigation.is-open { display: block; }
.site-navigation ul { display: grid; gap: 0; }
.site-navigation a { display: block; padding: .85rem 0; font-size: .9rem; }
.site-navigation-toggle { display: inline-grid; place-items: center; }
.site-header .button--header { display: none; }
.home-hero__grid,
.books-hero__grid,
.about-hero__grid,
.collaboration-hero__grid,
.contact-hero__grid { grid-template-columns: 1fr !important; }
.home-hero__visual,
.books-hero__visual,
.about-hero__portrait,
.collaboration-hero__visual,
.contact-hero__visual { width: min(100%, 38rem) !important; margin-inline: auto; }
.redesign-audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.home-audience__segment,
.home-audience__segment:nth-child(4),
.home-audience__segment:nth-child(5) { grid-column: auto; }
.redesign-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portfolio-single__story-grid { grid-template-columns: 1fr; }
.home-references__grid, .references-grid { grid-template-columns: 1fr; }
}
@media (max-width: 43.99rem) {
:root { --header-height: 5.1rem; }
.brand-wordmark { min-width: 8rem; }
.brand-wordmark__main { font-size: .95rem; }
.brand-wordmark__script { font-size: .9rem; }
.home-hero { padding-top: 1.7rem; }
.home-hero__title { font-size: clamp(2.7rem, 13vw, 4.4rem); }
.home-hero__visual > .wp-block-image img { min-height: 28rem; }
.gutenberg-disciplines { grid-template-columns: repeat(12, 7.2rem); }
.redesign-audience-grid,
.redesign-service-grid,
.redesign-process-grid,
.redesign-values-grid,
.redesign-legal-grid,
.home-projects__grid,
.portfolio-grid { grid-template-columns: 1fr !important; }
.process-card:nth-child(5) { grid-column: auto; }
.redesign-home-cta .home-cta__inner { grid-template-columns: 1fr; }
.redesign-service-grid .service-feature { min-height: 0; }
.about-hero__portrait img { min-height: 32rem !important; }
.portfolio-gallery__grid { grid-template-columns: 1fr; }
.portfolio-single__cta .site-container { display: grid; }
.footer-cta__inner { align-items: flex-start; flex-direction: column; }
.site-footer__top { grid-template-columns: 1fr 1fr; }
.site-footer__brand, .site-footer__tagline { grid-column: 1 / -1; }
.site-footer__bottom { flex-direction: column; }
}
/* 0.3.7 — restore the real WordPress logo and keep it on the approved header rail. */
.site-header .site-branding {
position: relative;
display: block;
flex: 0 0 4.5rem;
width: 4.5rem;
min-width: 4.5rem;
height: var(--header-height);
}
.site-header .site-branding .custom-logo-link,
.site-header .site-branding__fallback {
position: absolute;
top: .25rem;
left: 0;
z-index: 2;
display: block;
width: 7.4rem;
height: 7.4rem;
overflow: hidden;
border-radius: 50%;
}
.site-header .site-branding .custom-logo,
.site-header .site-branding__fallback img {
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
}
@media (max-width: 69.99rem) {
.site-header .site-branding { flex-basis: 4rem; width: 4rem; min-width: 4rem; }
.site-header .site-branding .custom-logo-link,
.site-header .site-branding__fallback { width: 6.2rem; height: 6.2rem; }
}
@media (max-width: 43.99rem) {
.site-header .site-branding { flex-basis: 3.15rem; width: 3.15rem; min-width: 3.15rem; }
.site-header .site-branding .custom-logo-link,
.site-header .site-branding__fallback { top: .3rem; width: 5.1rem; height: 5.1rem; }
}
/* 0.3.9 — compact homepage hero.
* Keep the exact Gutenberg copy, but reduce the first screen to roughly half
* the previous height and keep the opening question on one desktop line.
*/
@media (min-width: 70rem) {
.home-hero {
padding-block: 1.35rem 1.55rem;
}
.home-hero__grid {
grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem) !important;
align-items: center;
gap: clamp(1.75rem, 3vw, 3.25rem) !important;
}
.home-hero__content {
max-width: 46rem;
}
.home-hero .eyebrow {
margin-bottom: .45rem;
font-size: .68rem;
}
.home-hero__title {
margin-top: .35rem;
font-size: clamp(2.65rem, 3.25vw, 3.55rem);
line-height: .94;
letter-spacing: -0.035em;
}
.home-hero__title .redesign-serif-accent {
margin-top: .12em;
font-size: 1.02em;
line-height: .96;
letter-spacing: -0.035em;
}
.home-hero__intro {
max-width: 43rem;
margin-top: .48rem;
font-size: .82rem;
line-height: 1.46;
}
.home-hero__intro--strong {
margin-top: .62rem;
}
.home-hero__actions {
gap: .55rem;
margin-top: .85rem;
}
.home-hero__actions .wp-block-button__link {
min-height: 2.55rem;
padding: .7rem 1.05rem;
font-size: .65rem;
}
.home-hero__visual {
width: 100%;
max-width: 27rem;
justify-self: end;
border-radius: 1.35rem .9rem .7rem .7rem;
}
.home-hero__visual > .wp-block-image,
.home-hero__visual > .wp-block-image img {
width: 100%;
height: 26rem;
min-height: 0 !important;
aspect-ratio: auto !important;
}
.home-hero__visual > .wp-block-image img {
object-fit: cover;
object-position: 50% 24%;
}
.home-hero__visual::before {
right: .65rem;
bottom: .65rem;
padding: .42rem .62rem;
font-size: .8rem;
}
.home-hero::after {
display: none;
}
}
@media (min-width: 70rem) and (max-width: 84rem) {
.home-hero__title {
font-size: 2.65rem;
}
.home-hero__grid {
grid-template-columns: minmax(0, 1fr) minmax(21rem, 24rem) !important;
}
.home-hero__visual {
max-width: 24rem;
}
.home-hero__visual > .wp-block-image,
.home-hero__visual > .wp-block-image img {
height: 24rem;
}
}
/* Keep the mobile/tablet hierarchy compact too, without forcing one-line text. */
@media (max-width: 69.99rem) {
.home-hero {
padding-block: 1.25rem 1.75rem;
}
.home-hero__title {
font-size: clamp(2.45rem, 7vw, 3.5rem);
}
.home-hero__intro {
margin-top: .65rem;
font-size: .9rem;
line-height: 1.5;
}
.home-hero__actions {
margin-top: 1rem;
}
.home-hero__visual > .wp-block-image img {
min-height: 0 !important;
aspect-ratio: 4 / 5 !important;
}
}
/* 0.3.10 — global compact typography pass */
h1, .heading-1 { font-size: clamp(2.7rem, 5.1vw, 4.95rem); }
h2, .heading-2 { font-size: clamp(2.05rem, 4.1vw, 3.75rem); }
h3, .heading-3 { font-size: clamp(1.35rem, 2.35vw, 2rem); }
.entry-title, .archive-title, .not-found h1 { font-size: clamp(2.4rem, 5vw, 4.6rem); }
.card__title, .article-card__title { font-size: clamp(1.25rem, 2vw, 1.8rem); }
.home-hero__title {
margin-top: .7rem;
font-size: clamp(2.45rem, 4.15vw, 4.3rem);
line-height: .96;
}
.home-hero__intro {
max-width: 34rem;
margin-top: .75rem;
font-size: clamp(.88rem, .95vw, .96rem);
line-height: 1.58;
}
.home-hero__actions { margin-top: 1.25rem; }
.home-hero__visual > .wp-block-image img { min-height: 26rem; }
.home-audience__title,
.home-projects__header h2,
.home-references h2 {
font-size: clamp(2.4rem, 4.35vw, 4.15rem);
line-height: .98;
}
.home-audience__title {
max-width: 11.5ch;
margin-inline: auto;
}
.redesign-audience-grid { margin-top: 1.9rem; gap: .9rem !important; }
.home-audience__segment {
min-height: 12.75rem;
padding: 1.3rem;
border-top-width: 2px;
}
.home-audience__segment-number { font-size: 1.25rem; }
.home-audience__segment h3 {
margin-top: .55rem;
font-size: .88rem;
line-height: 1.2;
letter-spacing: .005em;
}
.home-audience__segment p {
margin-top: .6rem;
font-size: .8rem;
line-height: 1.5;
}
.editorial-intro h1,
.about-hero h1,
.books-hero h1,
.collaboration-hero h1,
.contact-hero h1,
.portfolio-archive__intro h1,
.portfolio-single h1,
.offer-page h1,
.legal-page h1,
.redesign-inner-hero h1 {
font-size: clamp(2.7rem, 5vw, 4.9rem);
line-height: .98;
}
.editorial-intro__lead,
.about-hero__lead,
.books-hero__lead,
.collaboration-hero__lead,
.contact-hero__lead,
.offer-page__lead,
.legal-page__lead,
.portfolio-archive__intro p,
.portfolio-single__subtitle {
font-size: clamp(1.15rem, 2vw, 1.9rem);
line-height: 1.12;
}
.about-traits h2,
.books-help h2,
.books-process h2,
.collaboration-process h2,
.portfolio-single__cta h2,
.blog-related h2,
.contact-form-section__intro h2,
.redesign-contact-form > h2,
.full-service__content h2,
.home-cta h2,
.redesign-home-cta h2,
.footer-cta h2 {
font-size: clamp(1.85rem, 3.4vw, 3.15rem);
line-height: 1.02;
}
.process-card h2 { font-size: clamp(1.35rem, 2.15vw, 1.9rem); }
.about-proof__item strong,
.about-proof__item h3 { font-size: clamp(2rem, 3.7vw, 3.4rem); }
@media (max-width: 69.99rem) {
.home-audience__title,
.home-projects__header h2,
.home-references h2 { max-width: 100%; }
}
@media (max-width: 43.99rem) {
.home-hero__title { font-size: clamp(2.15rem, 10vw, 3.3rem); }
.home-audience__title,
.home-projects__header h2,
.home-references h2,
.redesign-inner-hero h1,
.editorial-intro h1,
.about-hero h1,
.books-hero h1,
.collaboration-hero h1,
.contact-hero h1,
.portfolio-archive__intro h1,
.portfolio-single h1,
.offer-page h1,
.legal-page h1 {
font-size: clamp(2.2rem, 10vw, 3.5rem);
}
.home-audience__segment { min-height: 0; }
}
/* 0.3.11 — compact homepage / section rhythm + footer corrections */
.section {
padding-block: clamp(1.7rem, 3vw, 3.2rem);
}
/* Hero: deliberately smaller than 0.3.9/0.3.10. */
.home-hero {
padding-block: clamp(1rem, 1.8vw, 1.65rem) clamp(1.1rem, 2vw, 1.8rem);
}
@media (min-width: 70rem) {
.home-hero__grid {
grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem) !important;
gap: clamp(1.5rem, 2.5vw, 2.6rem) !important;
}
.home-hero__content { max-width: 42rem; }
.home-hero__title {
margin-top: .25rem;
font-size: clamp(2.15rem, 2.75vw, 2.8rem);
line-height: .94;
}
.home-hero__title .redesign-serif-accent {
display: block;
max-width: 18ch;
margin-top: .1em;
font-size: .98em;
line-height: .96;
}
.home-hero__intro {
max-width: 39rem;
margin-top: .42rem;
font-size: .78rem;
line-height: 1.42;
}
.home-hero__intro--strong { margin-top: .5rem; }
.home-hero__actions { margin-top: .7rem; }
.home-hero__visual { max-width: 24rem; }
.home-hero__visual > .wp-block-image,
.home-hero__visual > .wp-block-image img {
height: 22.5rem;
min-height: 0 !important;
aspect-ratio: auto !important;
}
}
/* Audience heading: one or at most two lines on desktop. */
.home-audience__title {
max-width: 27ch;
margin-inline: auto;
font-size: clamp(2rem, 3.25vw, 3.15rem);
line-height: .98;
}
.home-audience__title br { display: none; }
.home-audience__title .redesign-serif-accent { white-space: nowrap; }
.redesign-audience-grid { margin-top: 1.35rem; }
/* Inner page sections were also too airy. */
.redesign-inner-hero,
.redesign-books-hero,
.redesign-about,
.redesign-collaboration,
.redesign-contact,
.offer-redesign {
padding-top: clamp(1.4rem, 2.5vw, 2.75rem) !important;
padding-bottom: clamp(1.7rem, 3vw, 3.2rem) !important;
}
/* Final pink CTA: half the previous vertical footprint. */
.redesign-home-cta {
padding-block: clamp(1rem, 1.8vw, 1.7rem);
}
.redesign-home-cta .home-cta__inner {
column-gap: 2rem;
row-gap: .3rem;
}
.redesign-home-cta h2 { font-size: clamp(1.55rem, 2.4vw, 2.35rem); }
.redesign-home-cta p { margin-top: .15rem; font-size: .78rem; line-height: 1.4; }
.redesign-home-cta .wp-block-buttons { margin-top: .35rem; }
.redesign-home-cta .wp-block-button__link { min-height: 2.4rem; padding: .6rem .95rem; }
.home-cta__email { font-size: .7rem !important; }
/* Keep the generic pre-footer CTA compact on inner pages too. */
.footer-cta { padding-block: clamp(1rem, 2vw, 1.8rem); }
.footer-cta h2 { font-size: clamp(1.55rem, 2.5vw, 2.4rem); }
.footer-cta p { margin-top: .25rem; }
/* Footer uses exactly the same WordPress logo source as the header. */
.site-footer__logo .custom-logo-link,
.site-footer__logo-fallback { display: inline-block; }
.site-footer__logo .custom-logo,
.site-footer__logo-fallback img {
display: block;
width: 5.75rem;
height: 5.75rem;
max-width: none;
max-height: none;
border-radius: 50%;
object-fit: cover;
}
.site-footer__social-links { margin-top: .9rem; }
.site-footer__credit,
.site-footer__credit a {
color: #bdb5b9;
font-size: .64rem;
text-decoration: none;
}
.site-footer__credit a:hover { color: var(--color-primary); }
@media (max-width: 69.99rem) {
.home-audience__title { max-width: 22ch; }
}
@media (max-width: 43.99rem) {
.section { padding-block: 1.5rem; }
.home-audience__title { max-width: 16ch; font-size: clamp(1.9rem, 9vw, 2.8rem); }
.redesign-home-cta { padding-block: 1rem; }
.site-footer__logo .custom-logo,
.site-footer__logo-fallback img { width: 5rem; height: 5rem; }
}
/* 0.3.12 — homepage hero typography aligned with Jenifer's current IG editorial style. */
.home-hero__title {
font-family: var(--font-serif);
font-weight: 400;
letter-spacing: -0.035em;
}
.home-hero__title .redesign-serif-accent {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
letter-spacing: -0.045em;
line-height: .94;
}
/* 0.3.16 — Gutenberg-safe editorial emphasis and fixed audience line break. */
.home-hero__title em,
.home-audience__title em,
.redesign-statement em,
.about-hero__lead em {
color: var(--color-primary);
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
letter-spacing: -0.04em;
}
/* The audience title is one real Heading block. Keep Shift+Enter/
meaningful
* instead of suppressing it in CSS, so frontend and Gutenberg behave alike. */
.home-audience__title {
display: block;
max-width: 27ch;
margin-inline: auto;
text-align: center;
}
.home-audience__title br { display: initial; }
.home-audience__title em { white-space: nowrap; }
/* The old custom span was not a native RichText format and made Heading blocks
* fragile after editing. Native is supported by core/heading. */
.home-hero__title .redesign-serif-accent,
.home-audience__title .redesign-serif-accent,
.redesign-statement .redesign-serif-accent,
.about-hero__lead .redesign-serif-accent {
font-family: inherit;
}
/* 0.3.17 — footer rebuilt to match the approved reference. */
.site-footer {
padding-block: clamp(2.2rem, 4vw, 3.6rem) 1.15rem;
}
.site-footer__top {
grid-template-columns: 1.12fr .82fr 1.02fr 1fr 1.12fr;
gap: clamp(1.15rem, 2.5vw, 2.6rem);
align-items: start;
}
.site-footer__wordmark {
position: relative;
display: inline-grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
align-items: end;
width: max-content;
color: #fff !important;
text-decoration: none !important;
}
.site-footer__wordmark-main {
grid-column: 1;
grid-row: 1;
font-family: var(--font-sans);
font-size: 1.45rem;
font-weight: 800;
letter-spacing: .23em;
line-height: 1;
}
.site-footer__wordmark-script {
grid-column: 2;
grid-row: 1;
align-self: end;
margin-left: -.2rem;
margin-bottom: -.13rem;
color: var(--color-primary);
font-family: var(--font-accent);
font-size: 1.15rem;
font-weight: 400;
line-height: 1;
transform: rotate(-7deg);
}
.site-footer__wordmark-sub {
grid-column: 1 / -1;
grid-row: 2;
margin-top: .48rem;
color: #aaa1a6;
font-family: var(--font-sans);
font-size: .47rem;
font-weight: 700;
letter-spacing: .12em;
line-height: 1;
}
.site-footer__social-label {
margin-top: 1.25rem;
color: #d7d0d4;
font-size: .62rem;
}
.site-footer__social-links {
display: flex;
gap: .42rem;
margin-top: .55rem;
}
.site-footer__social-links a {
display: inline-grid;
width: 1.55rem;
height: 1.55rem;
place-items: center;
border: 1px solid rgb(239 20 147 / 60%);
border-radius: 50%;
color: #fff;
font-size: .48rem;
font-weight: 800;
letter-spacing: .02em;
}
.site-footer__social-links a:hover {
border-color: var(--color-primary);
background: var(--color-primary);
color: #fff;
}
.site-footer__column h3 {
margin-bottom: .8rem;
}
.site-footer .footer-menu li + li {
margin-top: .43rem;
}
.site-footer .footer-menu a,
.site-footer__contact p,
.site-footer__contact a {
font-size: .69rem;
line-height: 1.45;
}
.site-footer__tagline {
justify-self: end;
align-self: center;
font-size: clamp(1rem, 1.55vw, 1.35rem);
line-height: 1.3;
transform: rotate(-4deg);
}
.site-footer__tagline span {
display: block;
margin-top: .35rem;
font-size: 1.55em;
}
.site-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding-top: .9rem;
margin-top: 1.7rem;
}
.site-footer__copyright,
.site-footer__credit,
.site-footer__credit a {
margin: 0;
color: #8e878a;
font-size: .6rem;
font-weight: 400;
text-decoration: none;
}
.site-footer__credit {
margin-left: auto;
text-align: right;
}
.site-footer__credit a {
color: #c9c1c5;
font-weight: 700;
}
.site-footer__credit a:hover { color: var(--color-primary); }
@media (max-width: 69.99rem) {
.site-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-footer__brand { grid-column: 1; }
.site-footer__tagline { grid-column: 3; }
}
@media (max-width: 43.99rem) {
.site-footer__top { grid-template-columns: 1fr 1fr; }
.site-footer__brand,
.site-footer__tagline { grid-column: 1 / -1; }
.site-footer__tagline { justify-self: start; }
.site-footer__bottom {
align-items: flex-start;
flex-direction: column;
gap: .55rem;
}
.site-footer__credit { margin-left: 0; text-align: left; }
}
/* 0.3.18 — restore the approved circular WordPress logo in the footer. */
.site-footer__brand .site-footer__logo { display: block; }
.site-footer__brand .site-footer__logo .custom-logo-link,
.site-footer__brand .site-footer__logo-fallback { display: inline-block; }
.site-footer__brand .site-footer__logo .custom-logo,
.site-footer__brand .site-footer__logo-fallback img {
display: block;
width: 5.75rem;
height: 5.75rem;
max-width: none;
max-height: none;
border-radius: 50%;
object-fit: cover;
}
@media (max-width: 43.99rem) {
.site-footer__brand .site-footer__logo .custom-logo,
.site-footer__brand .site-footer__logo-fallback img { width: 5rem; height: 5rem; }
}
/* 0.3.19 — compact pre-footer CTA with a real photo transition, matching the approved mockup. */
.redesign-home-cta {
position: relative;
display: flex;
min-height: clamp(10.5rem, 13vw, 12.75rem);
align-items: center;
padding-block: 0 !important;
background-image:
linear-gradient(90deg,
rgb(239 20 147 / 100%) 0%,
rgb(239 20 147 / 100%) 42%,
rgb(239 20 147 / 96%) 50%,
rgb(239 20 147 / 78%) 57%,
rgb(239 20 147 / 34%) 66%,
rgb(239 20 147 / 0%) 76%),
url('../images/footer-cta-workspace.jpg');
background-position: center, center;
background-size: cover, cover;
background-repeat: no-repeat;
}
.redesign-home-cta .home-cta__inner {
display: block !important;
width: 100%;
padding-block: clamp(1.15rem, 2vw, 1.75rem);
}
.redesign-home-cta .home-cta__inner > * {
max-width: min(42rem, 48%);
}
.redesign-home-cta h2 {
margin: 0;
font-size: clamp(1.65rem, 2.4vw, 2.45rem);
line-height: 1.02;
}
.redesign-home-cta p {
margin-top: .38rem;
font-size: clamp(.72rem, .8vw, .82rem);
line-height: 1.45;
}
.redesign-home-cta .wp-block-buttons {
margin-top: .78rem;
}
.redesign-home-cta .wp-block-button__link {
min-height: 2.35rem;
padding: .58rem 1rem;
}
.redesign-home-cta .home-cta__email {
margin-top: .55rem;
font-size: .68rem !important;
}
/* The small label inside the hero image: wife's IG message. */
.home-hero__visual::before {
content: 'Máte nápad? Já mu dám směr.';
max-width: calc(100% - 2rem);
white-space: nowrap;
}
@media (max-width: 69.99rem) {
.redesign-home-cta {
background-image:
linear-gradient(90deg,
rgb(239 20 147 / 100%) 0%,
rgb(239 20 147 / 100%) 50%,
rgb(239 20 147 / 83%) 62%,
rgb(239 20 147 / 18%) 78%),
url('../images/footer-cta-workspace.jpg');
background-position: center, 58% center;
}
.redesign-home-cta .home-cta__inner > * { max-width: 56%; }
}
@media (max-width: 43.99rem) {
.redesign-home-cta {
min-height: 11.5rem;
background-image:
linear-gradient(90deg,
rgb(239 20 147 / 96%) 0%,
rgb(239 20 147 / 92%) 58%,
rgb(239 20 147 / 68%) 100%),
url('../images/footer-cta-workspace.jpg');
background-position: center, 70% center;
}
.redesign-home-cta .home-cta__inner > * { max-width: 88%; }
.home-hero__visual::before {
font-size: .82rem;
white-space: normal;
}
}
/* 0.3.20 — contained pre-footer CTA: content-width card with a soft photo transition. */
.redesign-home-cta {
display: block;
min-height: 0;
padding: clamp(1.15rem, 2.2vw, 1.8rem) 0 !important;
background: #fffaf9 !important;
}
.redesign-home-cta > .home-cta__inner.site-container {
position: relative;
display: block !important;
width: min(calc(100% - (var(--gutter) * 2)), var(--container-max)) !important;
min-height: clamp(9.5rem, 12vw, 11rem);
padding: clamp(1.25rem, 2vw, 1.7rem) clamp(1.35rem, 2.5vw, 2rem);
overflow: hidden;
border: 1px solid rgb(239 20 147 / 12%);
border-radius: 1.15rem;
background-image:
linear-gradient(90deg,
rgb(239 20 147 / 100%) 0%,
rgb(239 20 147 / 100%) 38%,
rgb(239 20 147 / 96%) 47%,
rgb(239 20 147 / 72%) 56%,
rgb(239 20 147 / 28%) 66%,
rgb(239 20 147 / 0%) 76%),
url('../images/footer-cta-workspace-photo.jpg');
background-position: center, right center;
background-size: cover, 62% auto;
background-repeat: no-repeat;
box-shadow: 0 14px 34px rgb(73 28 47 / 8%);
}
.redesign-home-cta > .home-cta__inner.site-container > * {
max-width: min(38rem, 48%) !important;
}
.redesign-home-cta h2 {
margin: 0;
color: #fff;
font-size: clamp(1.55rem, 2.25vw, 2.25rem);
line-height: 1.02;
}
.redesign-home-cta p {
margin-top: .32rem;
color: rgb(255 255 255 / 92%);
font-size: clamp(.72rem, .78vw, .82rem);
line-height: 1.42;
}
.redesign-home-cta .wp-block-buttons { margin-top: .7rem; }
.redesign-home-cta .wp-block-button__link {
min-height: 2.35rem;
padding: .58rem 1rem;
border-color: #fff;
background: #fff;
color: var(--color-primary);
}
.redesign-home-cta .wp-block-button__link:hover {
border-color: #111;
background: #111;
color: #fff;
}
.redesign-home-cta .home-cta__email,
.redesign-home-cta .home-cta__email a {
color: rgb(255 255 255 / 90%);
font-size: .68rem !important;
}
/* Let the last content section finish cleanly before the CTA card. */
.site-main > .redesign-home-cta:last-child { margin-bottom: 0; }
.site-main > .redesign-home-cta:last-child + * { margin-top: 0; }
@media (max-width: 69.99rem) {
.redesign-home-cta > .home-cta__inner.site-container {
background-image:
linear-gradient(90deg,
rgb(239 20 147 / 100%) 0%,
rgb(239 20 147 / 100%) 45%,
rgb(239 20 147 / 87%) 57%,
rgb(239 20 147 / 32%) 73%,
rgb(239 20 147 / 0%) 86%),
url('../images/footer-cta-workspace-photo.jpg');
background-size: cover, 68% auto;
}
.redesign-home-cta > .home-cta__inner.site-container > * { max-width: 56% !important; }
}
@media (max-width: 43.99rem) {
.redesign-home-cta { padding-block: 1rem !important; }
.redesign-home-cta > .home-cta__inner.site-container {
min-height: 10rem;
padding: 1.25rem;
border-radius: .9rem;
background-image:
linear-gradient(90deg,
rgb(239 20 147 / 96%) 0%,
rgb(239 20 147 / 94%) 58%,
rgb(239 20 147 / 76%) 100%),
url('../images/footer-cta-workspace-photo.jpg');
background-position: center, 74% center;
background-size: cover, auto 100%;
}
.redesign-home-cta > .home-cta__inner.site-container > * { max-width: 94% !important; }
}
/* 0.3.21 — remove the visible "tooth" in the contained pre-footer CTA.
The photo and the pink field are now separate layers with a smooth overlay,
so there is no hard/diagonal seam in the middle of the banner. */
.redesign-home-cta > .home-cta__inner.site-container {
isolation: isolate;
background: #EF1493 !important;
background-image: none !important;
}
.redesign-home-cta > .home-cta__inner.site-container::after {
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 38%;
background: url('../images/footer-cta-workspace-clean.jpg') 62% center / cover no-repeat;
content: '';
}
.redesign-home-cta > .home-cta__inner.site-container::before {
position: absolute;
z-index: 1;
inset: 0;
background: linear-gradient(90deg,
#EF1493 0%,
#EF1493 40%,
rgb(239 20 147 / 98%) 46%,
rgb(239 20 147 / 86%) 52%,
rgb(239 20 147 / 58%) 59%,
rgb(239 20 147 / 24%) 66%,
rgb(239 20 147 / 0%) 74%);
content: '';
pointer-events: none;
}
.redesign-home-cta > .home-cta__inner.site-container > * {
position: relative;
z-index: 2;
}
@media (max-width: 69.99rem) {
.redesign-home-cta > .home-cta__inner.site-container::after {
left: 34%;
background-position: 66% center;
}
.redesign-home-cta > .home-cta__inner.site-container::before {
background: linear-gradient(90deg,
#EF1493 0%,
#EF1493 43%,
rgb(239 20 147 / 90%) 54%,
rgb(239 20 147 / 48%) 67%,
rgb(239 20 147 / 0%) 82%);
}
}
@media (max-width: 43.99rem) {
.redesign-home-cta > .home-cta__inner.site-container::after {
left: 0;
background-position: 72% center;
opacity: .52;
}
.redesign-home-cta > .home-cta__inner.site-container::before {
background: linear-gradient(90deg,
rgb(239 20 147 / 100%) 0%,
rgb(239 20 147 / 96%) 64%,
rgb(239 20 147 / 78%) 100%);
}
}
/* 0.3.23 — compact footer height; remove the inherited grid gap that created the large empty band. */
.site-footer {
padding-block: clamp(1.65rem, 2.7vw, 2.35rem) .75rem;
}
.site-footer > .site-container.site-footer__inner {
gap: 0;
}
.site-footer__top {
row-gap: 1rem;
}
.site-footer__bottom {
margin-top: .9rem;
padding-top: .7rem;
}
.site-footer__tagline {
align-self: start;
padding-top: .2rem;
}
@media (max-width: 43.99rem) {
.site-footer {
padding-block: 1.5rem .75rem;
}
.site-footer__bottom {
margin-top: 1rem;
padding-top: .7rem;
}
}
/* 0.3.27 — unified compact hero rhythm across the whole site.
All page openings now use the same visual height target, spacing and title scale.
Content-heavy heroes may grow naturally so no text is clipped. */
:root {
--jenifer-hero-height: 19.5rem;
--jenifer-hero-h1: clamp(2.15rem, 3.15vw, 3.2rem);
--jenifer-hero-lead: clamp(1.05rem, 1.6vw, 1.5rem);
}
/* Shared hero shell. */
.redesign-inner-hero,
.redesign-books-hero,
.redesign-about,
.redesign-collaboration,
.redesign-contact,
.offer-redesign,
.portfolio-archive__intro,
.portfolio-single__hero {
box-sizing: border-box;
padding-top: clamp(1.05rem, 1.8vw, 1.55rem) !important;
padding-bottom: clamp(1.05rem, 1.8vw, 1.55rem) !important;
}
/* Short text-only hero containers get one consistent height. */
.redesign-inner-hero > .site-container,
.portfolio-archive__intro > .site-container {
display: flex;
min-height: var(--jenifer-hero-height);
box-sizing: border-box;
flex-direction: column;
justify-content: center;
}
/* Two-column heroes use the same height rail. */
.books-hero__grid,
.about-hero__grid,
.collaboration-hero__grid,
.contact-hero__grid,
.portfolio-single__hero-grid {
min-height: var(--jenifer-hero-height);
align-items: center !important;
}
/* One title scale for every inner-page hero. */
.redesign-inner-hero h1,
.books-hero__content h1,
.about-hero__content h1,
.collaboration-hero__content h1,
.contact-hero__content h1,
.offer-redesign__content h1,
.legal-page__hero h1,
.portfolio-archive__intro h1,
.portfolio-single__hero h1 {
margin-top: .45rem;
font-size: var(--jenifer-hero-h1) !important;
line-height: .96;
letter-spacing: -0.035em;
}
/* Secondary hero copy is smaller too, so the heading doesn't dominate the page. */
.editorial-intro__lead,
.books-hero__lead,
.about-hero__lead,
.collaboration-hero__lead,
.contact-hero__lead,
.offer-page__lead,
.legal-page__lead,
.portfolio-archive__intro p,
.portfolio-single__subtitle {
margin-top: .65rem;
font-size: var(--jenifer-hero-lead) !important;
line-height: 1.12;
}
/* Keep hero copy tighter vertically. */
.redesign-inner-hero .eyebrow,
.redesign-books-hero .eyebrow,
.redesign-about .eyebrow,
.redesign-collaboration .eyebrow,
.redesign-contact .eyebrow,
.offer-redesign .eyebrow,
.portfolio-archive__intro .eyebrow {
margin-bottom: 0;
}
.redesign-inner-hero p:not(.eyebrow),
.books-hero__content > p:not(.eyebrow),
.collaboration-hero__content > p:not(.eyebrow),
.contact-hero__content > p:not(.eyebrow) {
margin-top: .55rem;
}
/* Visuals on the regular two-column hero pages sit on the same compact rail. */
.redesign-book-visual,
.redesign-collab-visual,
.redesign-contact-visual {
min-height: var(--jenifer-hero-height) !important;
height: var(--jenifer-hero-height);
}
.books-hero__visual > .wp-block-image,
.books-hero__visual > .wp-block-image img,
.contact-hero__visual > .wp-block-image,
.contact-hero__visual > .wp-block-image img,
.portfolio-single__main-image,
.portfolio-single__main-image img {
min-height: 0 !important;
max-height: var(--jenifer-hero-height);
}
.books-hero__visual > .wp-block-image img,
.contact-hero__visual > .wp-block-image img,
.portfolio-single__main-image img {
height: var(--jenifer-hero-height) !important;
aspect-ratio: auto !important;
object-fit: cover;
}
/* Homepage follows the same compact scale instead of being a separate giant opening. */
@media (min-width: 70rem) {
.home-hero {
padding-block: 1rem 1.15rem;
}
.home-hero__grid {
min-height: var(--jenifer-hero-height);
align-items: center !important;
}
.home-hero__title {
font-size: clamp(2rem, 2.45vw, 2.55rem) !important;
line-height: .94;
}
.home-hero__visual,
.home-hero__visual > .wp-block-image,
.home-hero__visual > .wp-block-image img {
height: var(--jenifer-hero-height) !important;
min-height: 0 !important;
max-height: var(--jenifer-hero-height);
}
.home-hero__visual > .wp-block-image img {
aspect-ratio: auto !important;
object-fit: cover;
}
}
@media (max-width: 69.99rem) {
:root { --jenifer-hero-height: 17rem; }
.redesign-inner-hero > .site-container,
.portfolio-archive__intro > .site-container,
.books-hero__grid,
.about-hero__grid,
.collaboration-hero__grid,
.contact-hero__grid,
.portfolio-single__hero-grid {
min-height: 0;
}
}
@media (max-width: 43.99rem) {
:root {
--jenifer-hero-h1: clamp(2rem, 9vw, 2.8rem);
--jenifer-hero-lead: clamp(1rem, 5vw, 1.3rem);
}
.redesign-inner-hero,
.redesign-books-hero,
.redesign-about,
.redesign-collaboration,
.redesign-contact,
.offer-redesign,
.portfolio-archive__intro,
.portfolio-single__hero {
padding-block: 1.15rem !important;
}
}
/* 0.3.28 — homepage keeps its own hero; all inner-page heroes share one compact rail and centered copy. */
:root {
--jenifer-inner-hero-height: 13.5rem;
--jenifer-inner-hero-h1: clamp(2rem, 2.75vw, 2.85rem);
--jenifer-inner-hero-lead: clamp(1rem, 1.35vw, 1.28rem);
}
/* Inner hero shell only — homepage is intentionally excluded. */
.redesign-inner-hero,
.redesign-books-hero,
.redesign-about,
.redesign-collaboration,
.redesign-contact,
.offer-redesign,
.portfolio-archive__intro,
.portfolio-single__hero {
padding-top: .75rem !important;
padding-bottom: .75rem !important;
}
.redesign-inner-hero > .site-container,
.portfolio-archive__intro > .site-container,
.books-hero__grid,
.about-hero__grid,
.collaboration-hero__grid,
.contact-hero__grid,
.portfolio-single__hero-grid {
min-height: var(--jenifer-inner-hero-height) !important;
align-items: center !important;
}
/* Center the complete text rail in every inner hero. */
.redesign-inner-hero .editorial-intro__content,
.references-page__hero,
.legal-page__hero-content,
.books-hero__content,
.about-hero__content,
.collaboration-hero__content,
.contact-hero__content,
.offer-redesign__content,
.portfolio-archive__intro > .site-container,
.portfolio-single__hero-grid > :first-child {
text-align: center;
}
.redesign-inner-hero .editorial-intro__content,
.references-page__hero,
.legal-page__hero-content,
.offer-redesign__content {
max-width: 54rem;
margin-inline: auto;
}
.redesign-inner-hero .eyebrow,
.redesign-books-hero .eyebrow,
.redesign-about .eyebrow,
.redesign-collaboration .eyebrow,
.redesign-contact .eyebrow,
.offer-redesign .eyebrow,
.portfolio-archive__intro .eyebrow,
.portfolio-single__hero .eyebrow {
justify-content: center;
margin-inline: auto;
}
.redesign-inner-hero h1,
.books-hero__content h1,
.about-hero__content h1,
.collaboration-hero__content h1,
.contact-hero__content h1,
.offer-redesign__content h1,
.legal-page__hero h1,
.portfolio-archive__intro h1,
.portfolio-single__hero h1 {
margin-top: .35rem;
font-size: var(--jenifer-inner-hero-h1) !important;
line-height: .98;
}
.editorial-intro__lead,
.books-hero__lead,
.about-hero__lead,
.collaboration-hero__lead,
.contact-hero__lead,
.offer-page__lead,
.legal-page__lead,
.portfolio-archive__intro p,
.portfolio-single__subtitle {
max-width: 42rem;
margin: .45rem auto 0;
font-size: var(--jenifer-inner-hero-lead) !important;
line-height: 1.16;
}
.redesign-inner-hero p:not(.eyebrow),
.books-hero__content > p:not(.eyebrow),
.about-hero__content > p:not(.eyebrow),
.collaboration-hero__content > p:not(.eyebrow),
.contact-hero__content > p:not(.eyebrow),
.offer-redesign__content > p:not(.eyebrow) {
margin-left: auto;
margin-right: auto;
}
.books-hero__content .wp-block-buttons,
.collaboration-hero__content .wp-block-buttons,
.contact-hero__content .wp-block-buttons,
.offer-redesign__content .wp-block-buttons,
.portfolio-single__hero .wp-block-buttons {
justify-content: center;
}
/* Lists remain readable, but the list block itself is centered in the hero column. */
.collaboration-hero__content .wp-block-list,
.offer-redesign__content .wp-block-list {
width: fit-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
}
/* Keep visual rails compact and aligned to the same inner-hero height. */
.redesign-book-visual,
.redesign-collab-visual,
.redesign-contact-visual {
min-height: var(--jenifer-inner-hero-height) !important;
height: var(--jenifer-inner-hero-height) !important;
}
.books-hero__visual > .wp-block-image,
.books-hero__visual > .wp-block-image img,
.contact-hero__visual > .wp-block-image,
.contact-hero__visual > .wp-block-image img,
.portfolio-single__main-image,
.portfolio-single__main-image img {
max-height: var(--jenifer-inner-hero-height) !important;
}
.books-hero__visual > .wp-block-image img,
.contact-hero__visual > .wp-block-image img,
.portfolio-single__main-image img {
height: var(--jenifer-inner-hero-height) !important;
}
/* Restore the homepage hero as its own, deliberately different composition. */
@media (min-width: 70rem) {
.home-hero {
padding-block: clamp(2.15rem, 4vw, 4.5rem) clamp(2.2rem, 4vw, 4rem);
}
.home-hero__grid {
min-height: 0 !important;
align-items: center !important;
}
.home-hero__title {
font-size: clamp(2.65rem, 4vw, 4.25rem) !important;
line-height: .96;
}
.home-hero__visual,
.home-hero__visual > .wp-block-image,
.home-hero__visual > .wp-block-image img {
height: auto !important;
max-height: none;
}
.home-hero__visual > .wp-block-image img {
min-height: 31rem !important;
aspect-ratio: .88 !important;
}
}
@media (max-width: 69.99rem) {
:root { --jenifer-inner-hero-height: 11.75rem; }
.redesign-inner-hero > .site-container,
.portfolio-archive__intro > .site-container,
.books-hero__grid,
.about-hero__grid,
.collaboration-hero__grid,
.contact-hero__grid,
.portfolio-single__hero-grid {
min-height: 0 !important;
}
}
@media (max-width: 43.99rem) {
:root {
--jenifer-inner-hero-h1: clamp(1.9rem, 8vw, 2.5rem);
--jenifer-inner-hero-lead: clamp(.98rem, 4.6vw, 1.18rem);
}
.redesign-inner-hero,
.redesign-books-hero,
.redesign-about,
.redesign-collaboration,
.redesign-contact,
.offer-redesign,
.portfolio-archive__intro,
.portfolio-single__hero {
padding-block: .9rem !important;
}
}
/* 0.3.29 — exceptions: Books, Collaboration and Contact keep their original 0.3.27 two-column hero composition. */
.redesign-books-hero,
.redesign-collaboration,
.redesign-contact {
padding-top: clamp(1.05rem, 1.8vw, 1.55rem) !important;
padding-bottom: clamp(1.05rem, 1.8vw, 1.55rem) !important;
}
.books-hero__grid,
.collaboration-hero__grid,
.contact-hero__grid {
min-height: var(--jenifer-hero-height) !important;
align-items: center !important;
}
.books-hero__content,
.collaboration-hero__content,
.contact-hero__content {
text-align: left !important;
}
.redesign-books-hero .eyebrow,
.redesign-collaboration .eyebrow,
.redesign-contact .eyebrow {
justify-content: flex-start !important;
margin-inline: 0 !important;
}
.books-hero__content h1,
.collaboration-hero__content h1,
.contact-hero__content h1 {
margin-top: .45rem;
font-size: var(--jenifer-hero-h1) !important;
line-height: .96;
letter-spacing: -.035em;
}
.books-hero__lead,
.collaboration-hero__lead,
.contact-hero__lead {
max-width: 39rem;
margin: .65rem 0 0 !important;
font-size: var(--jenifer-hero-lead) !important;
line-height: 1.12;
}
.books-hero__content > p:not(.eyebrow),
.collaboration-hero__content > p:not(.eyebrow),
.contact-hero__content > p:not(.eyebrow) {
margin-left: 0 !important;
margin-right: 0 !important;
}
.books-hero__content .wp-block-buttons,
.collaboration-hero__content .wp-block-buttons,
.contact-hero__content .wp-block-buttons {
justify-content: flex-start !important;
}
.collaboration-hero__content .wp-block-list {
width: auto !important;
max-width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
}
.redesign-book-visual,
.redesign-collab-visual,
.redesign-contact-visual {
min-height: var(--jenifer-hero-height) !important;
height: var(--jenifer-hero-height) !important;
}
.books-hero__visual > .wp-block-image,
.books-hero__visual > .wp-block-image img,
.contact-hero__visual > .wp-block-image,
.contact-hero__visual > .wp-block-image img {
max-height: var(--jenifer-hero-height) !important;
}
.books-hero__visual > .wp-block-image img,
.contact-hero__visual > .wp-block-image img {
height: var(--jenifer-hero-height) !important;
}
@media (max-width: 69.99rem) {
.books-hero__grid,
.collaboration-hero__grid,
.contact-hero__grid {
min-height: 0 !important;
}
}
@media (max-width: 43.99rem) {
.redesign-books-hero,
.redesign-collaboration,
.redesign-contact {
padding-block: 1.15rem !important;
}
.redesign-book-visual,
.redesign-collab-visual,
.redesign-contact-visual {
height: auto !important;
min-height: 0 !important;
}
}
/* 0.3.30 — keep the hero image label level. */
.home-hero__visual::before {
transform: none !important;
}
/* 0.3.31 — homepage discipline strip at half height. */
.redesign-disciplines .gutenberg-discipline {
min-height: 3.7rem;
padding: .45rem .4rem;
gap: .15rem;
font-size: .61rem;
line-height: 1.15;
}
.redesign-disciplines .gutenberg-discipline::before {
width: 1.25rem;
height: 1.25rem;
font-size: .95rem;
line-height: 1;
}
@media (max-width: 43.99rem) {
.redesign-disciplines .gutenberg-discipline {
min-height: 3.6rem;
padding: .4rem .35rem;
}
}
/* 0.3.33 — mobile affordance for the horizontally scrollable homepage discipline rail. */
.redesign-disciplines {
position: relative;
}
.discipline-scroll-arrow {
display: none;
}
@media (max-width: 43.99rem) {
.redesign-disciplines .gutenberg-disciplines {
scroll-snap-type: x proximity;
scroll-behavior: smooth;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.redesign-disciplines .gutenberg-disciplines::-webkit-scrollbar {
display: none;
}
.redesign-disciplines .gutenberg-discipline {
scroll-snap-align: start;
}
.discipline-scroll-arrow {
position: absolute;
z-index: 8;
top: 50%;
display: grid;
width: 2rem;
height: 2rem;
padding: 0;
place-items: center;
border: 1px solid rgb(239 20 147 / 28%);
border-radius: 999px;
background: rgb(255 255 255 / 92%);
box-shadow: 0 5px 16px rgb(67 23 44 / 13%);
color: var(--color-primary);
cursor: pointer;
transform: translateY(-50%);
transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.discipline-scroll-arrow svg {
width: .82rem;
height: .82rem;
fill: none;
stroke: currentColor;
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
}
.discipline-scroll-arrow--prev { left: .45rem; }
.discipline-scroll-arrow--next { right: .45rem; }
.discipline-scroll-arrow.is-hidden {
opacity: 0;
pointer-events: none;
}
.discipline-scroll-arrow:active {
transform: translateY(-50%) scale(.94);
box-shadow: 0 2px 8px rgb(67 23 44 / 12%);
}
}
/* 0.3.34 — exact Jenifer brand identity from the approved web/Instagram manual.
Primary pair: Playfair Display + Montserrat. No decorative third font. */
:root {
--color-primary: #EF1493;
--color-primary-hover: #C81278;
--color-primary-soft: #F7EEF2;
--color-bg: #F7EEF2;
--color-surface: #FFFFFF;
--color-surface-muted: #F7EEF2;
--color-text: #111111;
--color-muted: #6F6870;
--color-gold: #B79A5D;
--color-footer: #111111;
--font-serif: 'Playfair Display', serif;
--font-sans: 'Montserrat', sans-serif;
--font-display: var(--font-serif);
--font-body: var(--font-sans);
--font-accent: var(--font-serif);
}
body,
button,
input,
select,
textarea {
font-family: var(--font-sans);
font-weight: 400;
}
h1, h2, h3, h4, h5, h6,
.entry-title,
.archive-title,
.not-found h1 {
font-family: var(--font-serif);
font-weight: 400;
line-height: 1.1;
letter-spacing: -.02em;
}
/* Pink italic is the only editorial accent — exactly as in the brand guide. */
.redesign-serif-accent,
.text-accent,
.handwritten-accent,
.home-hero__title em,
.home-audience__title em,
.redesign-statement em,
.about-hero__lead em,
.contact-quote,
.offer-quote,
.reference-card blockquote,
.site-footer__tagline,
.brand-wordmark__script,
.home-hero__visual::before {
color: var(--color-primary);
font-family: var(--font-serif) !important;
font-style: italic;
font-weight: 400;
letter-spacing: -.015em;
}
/* UI hierarchy: Montserrat only. */
.site-navigation a {
font-family: var(--font-sans);
font-weight: 500;
letter-spacing: 0;
}
.button,
.wp-block-button__link,
.text-link {
font-family: var(--font-sans);
font-weight: 600;
}
.eyebrow,
.gutenberg-discipline,
.card__meta,
label,
.site-footer,
.site-footer__column,
.site-footer__bottom {
font-family: var(--font-sans);
}
.eyebrow {
font-weight: 500;
letter-spacing: .14em;
}
.service-feature h2,
.home-audience__segment h3,
.card__title,
.article-card__title,
.about-value h3,
.legal-item h3,
.site-footer__column h3 {
font-family: var(--font-sans);
font-weight: 700;
letter-spacing: 0;
}
/* Keep the recently approved compact geometry; only normalize line rhythm to the brand. */
.home-hero__title,
.books-hero__content h1,
.collaboration-hero__content h1,
.contact-hero__content h1,
.redesign-inner-hero h1,
.portfolio-archive__intro h1,
.portfolio-single h1 {
font-family: var(--font-serif) !important;
font-weight: 400 !important;
line-height: 1.06 !important;
letter-spacing: -.02em !important;
}
/* Gold is a restrained separator/detail, never a competing primary accent. */
.editorial-rule,
.brand-gold-rule {
border-color: var(--color-gold);
color: var(--color-gold);
}
/* Footer keeps the approved dark composition, now in the same brand typography. */
.site-footer__tagline {
color: #FFFFFF;
line-height: 1.28;
transform: none;
}
.site-footer__column h3 {
font-weight: 600;
}
@media (max-width: 43.99rem) {
.site-navigation a { font-weight: 500; }
.eyebrow { letter-spacing: .14em; }
}
/* 0.3.35 — keep eyebrow labels on brand pink inside special hero layouts. */
.books-hero .eyebrow,
.collaboration-hero .eyebrow,
.contact-hero .eyebrow {
color: var(--color-primary) !important;
}
/* 0.3.36 — force the approved brand typography exactly. */
html,
body {
font-family: 'Montserrat', sans-serif;
}
h1, h2, h3, h4, h5, h6,
.entry-title,
.archive-title,
.not-found h1,
.home-hero__title,
.home-audience__title,
.redesign-inner-hero h1,
.books-hero__content h1,
.collaboration-hero__content h1,
.contact-hero__content h1,
.portfolio-archive__intro h1,
.portfolio-single h1,
.editorial-intro h1,
.about-hero h1,
.offer-page h1,
.legal-page h1 {
font-family: 'Playfair Display', serif !important;
font-synthesis: none;
}
.redesign-serif-accent,
.text-accent,
.handwritten-accent,
.home-hero__title em,
.home-audience__title em,
.redesign-statement em,
.about-hero__lead em,
.contact-quote,
.offer-quote,
.reference-card blockquote,
.site-footer__tagline,
.brand-wordmark__script,
.home-hero__visual::before {
font-family: 'Playfair Display', serif !important;
font-style: italic !important;
font-synthesis: none;
}
/* 0.3.37 — authoritative brand typography. Exactly two typefaces:
Playfair Display = editorial / serif. Montserrat = UI / body. */
:root {
--font-serif: 'Playfair Display', serif;
--font-display: 'Playfair Display', serif;
--font-accent: 'Playfair Display', serif;
--font-sans: 'Montserrat', sans-serif;
--font-body: 'Montserrat', sans-serif;
}
html,
body,
p,
li,
a,
button,
input,
select,
textarea,
label,
.site-header,
.site-navigation,
.site-footer,
.button,
.wp-block-button__link,
.eyebrow,
.gutenberg-discipline,
.card__meta,
.service-feature h2,
.home-audience__segment h3,
.card__title,
.article-card__title,
.about-value h3,
.legal-item h3,
.site-footer__column h3 {
font-family: 'Montserrat', sans-serif !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.archive-title,
.not-found h1,
.home-hero__title,
.home-audience__title,
.redesign-inner-hero h1,
.books-hero__content h1,
.collaboration-hero__content h1,
.contact-hero__content h1,
.portfolio-archive__intro h1,
.portfolio-single h1,
.editorial-intro h1,
.about-hero h1,
.offer-page h1,
.legal-page h1,
.editorial-intro__lead,
.about-hero__lead,
.books-hero__lead,
.collaboration-hero__lead,
.contact-hero__lead,
.portfolio-archive__intro p,
.portfolio-single__subtitle,
.reference-card__quote,
.reference-card blockquote,
.blog-archive__lede,
.blog-single__content blockquote,
.legal-page__links,
.legal-page__note,
.process-card h2,
.about-proof__item strong,
.about-proof__item h3,
.service-feature__number,
.about-value__number,
.legal-item__number {
font-family: 'Playfair Display', serif !important;
}
.redesign-serif-accent,
.text-accent,
.handwritten-accent,
.home-hero__title em,
.home-audience__title em,
.redesign-statement em,
.about-hero__lead em,
.contact-quote,
.offer-quote,
.reference-card blockquote,
.site-footer__tagline,
.brand-wordmark__script,
.home-hero__visual::before {
font-family: 'Playfair Display', serif !important;
font-style: italic !important;
}
/* Brand manual weights. */
h1, h2, h3, h4, h5, h6,
.home-hero__title,
.home-audience__title,
.redesign-inner-hero h1,
.books-hero__content h1,
.collaboration-hero__content h1,
.contact-hero__content h1 {
font-weight: 400 !important;
}
.site-navigation a,
.eyebrow {
font-family: 'Montserrat', sans-serif !important;
font-weight: 500 !important;
}
.button,
.wp-block-button__link {
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
}
/* 0.3.38 — final brand typography lock.
Approved identity only: Playfair Display + Montserrat.
Editorial pink accent uses the real Playfair Display SemiBold Italic cut. */
:root {
--font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
--font-accent: "Playfair Display", Georgia, "Times New Roman", serif;
--font-sans: "Montserrat", Arial, sans-serif;
--font-body: "Montserrat", Arial, sans-serif;
}
/* Editorial headings = Playfair Display Regular. */
h1, h2, h3, h4, h5, h6,
.home-hero__title,
.home-audience__title,
.redesign-inner-hero h1,
.books-hero__content h1,
.collaboration-hero__content h1,
.contact-hero__content h1,
.portfolio-archive__intro h1,
.portfolio-single h1,
.editorial-intro h1,
.about-hero h1,
.offer-page h1,
.legal-page h1 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
font-style: normal !important;
font-weight: 400 !important;
font-synthesis: none !important;
}
/* Pink editorial accent = SAME family, SemiBold Italic — not a script font. */
.home-hero__title em,
.home-audience__title em,
.redesign-statement em,
.about-hero__lead em,
.redesign-serif-accent,
.text-accent,
.handwritten-accent,
.contact-quote,
.offer-quote,
.reference-card blockquote,
.site-footer__tagline {
font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
font-style: italic !important;
font-weight: 600 !important;
font-synthesis: none !important;
letter-spacing: -0.018em !important;
}
/* The homepage brand sentence is the canonical example from the manual. */
.home-hero__title em {
display: block;
color: #EF1493 !important;
line-height: 1.03 !important;
}
/* Everything functional / explanatory = Montserrat. */
body, p, li, a, button, input, select, textarea, label,
.site-header, .site-navigation, .site-footer,
.button, .wp-block-button__link, .eyebrow, .gutenberg-discipline,
.card__meta, .service-feature h2, .home-audience__segment h3,
.card__title, .article-card__title, .about-value h3,
.legal-item h3, .site-footer__column h3 {
font-family: "Montserrat", Arial, sans-serif !important;
font-synthesis: none !important;
}
/* 0.3.39 — exact brand-manual typography correction.
H1 = Playfair Display Regular. Pink emphasis = Playfair Display Italic REGULAR.
The prior 600 italic override was intentionally removed from the visual result. */
.home-hero__title {
font-family: "Playfair Display", serif !important;
font-style: normal !important;
font-weight: 400 !important;
font-size: clamp(2.625rem, 4.65vw, 4.5rem) !important; /* 42px mobile → 72px desktop */
line-height: 1.111 !important; /* 72 / 80 brand-manual rhythm */
letter-spacing: -0.025em !important;
}
.home-hero__title em,
.home-hero__title .redesign-serif-accent,
.home-audience__title em,
.redesign-statement em,
.about-hero__lead em,
.redesign-serif-accent,
.text-accent,
.handwritten-accent,
.contact-quote,
.offer-quote,
.reference-card blockquote,
.site-footer__tagline {
font-family: "Playfair Display", serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-synthesis: none !important;
letter-spacing: -0.02em !important;
}
.home-hero__title em {
display: block;
font-size: 1em !important;
line-height: 1.111 !important;
color: #EF1493 !important;
}
@media (max-width: 43.99rem) {
.home-hero__title {
font-size: 2.625rem !important;
line-height: 1.143 !important; /* 42/48 */
}
.home-hero__title em {
line-height: 1.143 !important;
}
}
/* 0.3.40 — hero accent must visibly remain the SAME Playfair Display face.
Do not use the separate Playfair Italic font file here: its glyph design is
substantially different. The pink line uses the regular Playfair glyphs
with a restrained synthetic oblique, preserving the brand skeleton. */
.home-hero__title {
font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
font-style: normal !important;
font-weight: 400 !important;
font-synthesis: none !important;
}
.home-hero__title em,
.home-hero__title .redesign-serif-accent {
font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
font-style: oblique 10deg !important;
font-weight: 400 !important;
font-synthesis: style !important;
letter-spacing: -0.02em !important;
color: #EF1493 !important;
}
/* 0.3.42 — keep the approved pre-0.3.41 typography everywhere,
but preserve the larger header menu requested from the newer build. */
.site-navigation a {
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 17px !important;
line-height: 22px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
}
@media (max-width: 47.99rem) {
.site-navigation a {
font-size: 15px !important;
line-height: 20px !important;
}
}
/* 0.3.43 — redesign the demand form to use an editorial pink backdrop
instead of the extra outer bordered wrapper. */
.redesign-contact-form .contact-form-wrap {
position: relative;
isolation: isolate;
margin-top: 2rem;
padding: clamp(1rem, 2.5vw, 1.6rem) 0 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
.redesign-contact-form .contact-form-wrap::before {
content: "";
position: absolute;
inset: clamp(.9rem, 2vw, 1.25rem) 0 0 clamp(1rem, 2.6vw, 1.9rem);
border-radius: 1.45rem;
background: linear-gradient(180deg, #f8e6ed 0%, #f1d9e3 100%);
z-index: 0;
}
.redesign-contact-form .contact-form,
.redesign-contact-form .form-notice {
position: relative;
z-index: 1;
}
.redesign-contact-form .contact-form {
padding: clamp(1.5rem, 3vw, 2.45rem);
border: 1px solid var(--color-border);
border-radius: 1.05rem;
background: rgb(255 255 255 / 95%);
box-shadow: 0 18px 38px rgb(73 28 47 / 8%);
}
.redesign-contact-form .contact-form__grid {
gap: 1rem 1.1rem;
}
.redesign-contact-form .contact-form__required {
margin-top: 1rem;
}
@media (max-width: 47.99rem) {
.redesign-contact-form .contact-form-wrap {
padding-top: .8rem;
}
.redesign-contact-form .contact-form-wrap::before {
inset: .7rem 0 0 .7rem;
border-radius: 1rem;
}
.redesign-contact-form .contact-form {
padding: 1.15rem;
border-radius: .95rem;
}
}
/* 0.3.44 — align “Jak pracuji” cards with the approved services card system. */
.process-card {
display: block;
min-height: 100%;
}
.process-card__number {
margin: 0;
}
.process-card h2 {
margin-top: .65rem;
color: var(--color-ink);
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 1rem !important;
font-style: normal !important;
font-weight: 800 !important;
letter-spacing: .015em !important;
line-height: 1.25 !important;
text-transform: uppercase;
}
.process-card p {
margin-top: .65rem;
color: #51484d;
font-size: .85rem;
}
/* 0.3.45 — exact visual parity for Jak pracuji number + title with Služby. */
.process-card .process-card__number {
margin: 0 !important;
color: var(--color-primary) !important;
font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
font-size: 2.4rem !important;
font-style: normal !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
line-height: 1 !important;
}
.process-card h2 {
margin-top: .65rem !important;
color: var(--color-text) !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 1rem !important;
font-style: normal !important;
font-weight: 800 !important;
letter-spacing: .015em !important;
line-height: 1.25 !important;
text-transform: uppercase !important;
}
/* 0.3.46 — exact Služby visual language for Jak pracuji cards. */
.redesign-process-grid .process-card {
padding: 1.55rem;
}
/* Same number treatment as .service-feature__number in Služby. */
.redesign-process-grid .process-card__number {
margin: 0 !important;
color: var(--color-primary) !important;
font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
font-size: 2.4rem !important;
font-style: normal !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
line-height: 1.65 !important;
}
/* Služby card headings end up Regular because the global brand heading rule
is authoritative. Mirror that exact visual result here. */
.redesign-process-grid .process-card h2 {
margin-top: .65rem !important;
color: var(--color-text) !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 1rem !important;
font-style: normal !important;
font-weight: 400 !important;
letter-spacing: .015em !important;
line-height: 1.25 !important;
text-transform: uppercase !important;
}
.redesign-process-grid .process-card__list {
gap: .46rem;
margin-block: 1.2rem 0;
}
.redesign-process-grid .process-card__list li {
color: #51484d;
font-size: .82rem;
line-height: 1.55;
}
.redesign-process-grid .process-card__list li::before {
width: .35rem;
height: .35rem;
margin-top: .55em;
border: 0;
background: var(--color-primary);
}
/* 0.3.47 — keep the fifth Jak pracuji card at the same width as one card
in the two-column grid, centered on the last row. */
@media (min-width: 44rem) {
.redesign-process-grid .process-card:nth-child(5) {
grid-column: 1 / -1;
width: calc((100% - 1rem) / 2);
justify-self: center;
}
}
@media (max-width: 43.99rem) {
.redesign-process-grid .process-card:nth-child(5) {
grid-column: auto;
width: 100%;
}
}
/* 0.3.48 — Jak pracuji uses the same desktop grid rhythm as Služby:
three equal cards per row. With five cards the last row naturally contains
cards 04 and 05 at the standard one-card width. */
@media (min-width: 70rem) {
.redesign-process-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 1rem !important;
}
.redesign-process-grid .process-card:nth-child(5) {
grid-column: auto !important;
width: auto !important;
justify-self: stretch !important;
}
}
/* Tablet: keep a practical two-column grid. */
@media (min-width: 44rem) and (max-width: 69.99rem) {
.redesign-process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.redesign-process-grid .process-card:nth-child(5) {
grid-column: auto !important;
width: auto !important;
justify-self: stretch !important;
}
}
/* Mobile: one card per row. */
@media (max-width: 43.99rem) {
.redesign-process-grid {
grid-template-columns: 1fr !important;
}
}
/* 0.3.49 — independently editable homepage hero accent + refined mobile hamburger. */
.home-hero__accent {
max-width: 39rem;
margin: .08em 0 .32em;
color: #EF1493;
font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
font-size: clamp(1.9rem, 2.8vw, 2.8rem);
font-style: oblique 10deg;
font-weight: 400;
font-synthesis: style;
letter-spacing: -0.02em;
line-height: 1.08;
}
/* The accent is now its own Gutenberg block; legacy inline accent styling is
kept only as a compatibility fallback for a manually preserved old page. */
.home-hero__title + .home-hero__accent {
margin-top: .08em;
}
@media (max-width: 47.99rem) {
.home-hero__accent {
font-size: 1.75rem;
line-height: 1.12;
}
}
/* Smaller three-line navigation trigger on phone/tablet. */
@media (max-width: 69.99rem) {
.site-navigation-toggle {
width: 2.25rem;
min-width: 2.25rem;
height: 2.25rem;
min-height: 2.25rem;
padding: .38rem;
align-content: center;
justify-items: center;
gap: .22rem;
}
.site-navigation-toggle__bar {
width: 1.2rem;
height: 1.5px;
margin: 0;
transform-origin: center;
}
.site-navigation-toggle[aria-expanded='true'] > .site-navigation-toggle__bar--top {
transform: translateY(.235rem) rotate(45deg);
}
.site-navigation-toggle[aria-expanded='true'] > .site-navigation-toggle__bar--middle {
opacity: 0;
transform: scaleX(.5);
}
.site-navigation-toggle[aria-expanded='true'] > .site-navigation-toggle__bar--bottom {
transform: translateY(-.235rem) rotate(-45deg);
}
}
/* 0.3.51 — homepage section headlines match the approved Audience headline scale. */
.home-projects > .site-container > h2,
.home-references > .site-container > h2 {
font-size: clamp(2rem, 3.25vw, 3.15rem) !important;
line-height: .98 !important;
}
@media (max-width: 43.99rem) {
.home-projects > .site-container > h2,
.home-references > .site-container > h2 {
font-size: clamp(1.9rem, 9vw, 2.8rem) !important;
}
}
/* 0.3.52 — rebalance homepage hero: the portrait supports the copy instead of dominating it. */
@media (min-width: 70rem) {
.home-hero__grid {
grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem) !important;
gap: clamp(1.6rem, 2.4vw, 2.4rem) !important;
}
.home-hero__visual {
width: 100% !important;
max-width: 21rem !important;
justify-self: end !important;
}
.home-hero__visual > .wp-block-image,
.home-hero__visual > .wp-block-image img {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: .88 !important;
}
}
@media (min-width: 44rem) and (max-width: 69.99rem) {
.home-hero__visual {
max-width: 20rem !important;
}
}
@media (max-width: 43.99rem) {
.home-hero__visual {
width: min(100%, 19rem) !important;
max-width: 19rem !important;
}
}
/* 0.3.53 — mobile-only left alignment for homepage audience title */
@media (max-width: 43.99rem) {
.redesign-audience .eyebrow {
justify-content: flex-start !important;
}
.redesign-audience .home-audience__content,
.redesign-audience .home-audience__title,
.redesign-audience .home-audience__intro {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.redesign-audience .home-audience__title {
max-width: none !important;
}
}
/* 0.3.54 — audience section aligned left on every viewport.
Desktop cards use the same 3-column rhythm as Services; row two starts at the left. */
.redesign-audience .eyebrow {
justify-content: flex-start !important;
}
.redesign-audience .home-audience__content,
.redesign-audience .home-audience__title,
.redesign-audience .home-audience__intro {
text-align: left !important;
}
.redesign-audience .home-audience__title {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.redesign-audience-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.redesign-audience-grid .home-audience__segment,
.redesign-audience-grid .home-audience__segment:nth-child(4),
.redesign-audience-grid .home-audience__segment:nth-child(5) {
grid-column: auto !important;
}
@media (max-width: 69.99rem) {
.redesign-audience-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 43.99rem) {
.redesign-audience-grid {
grid-template-columns: 1fr !important;
}
}
/* 0.3.55 — left aligned does not mean flush to the viewport.
Audience uses the exact same horizontal content rails as the homepage hero. */
.redesign-audience > .home-audience__content.site-container {
width: min(calc(100% - (var(--gutter) * 2)), var(--container-max)) !important;
max-width: var(--container-max) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.redesign-audience .home-audience__title,
.redesign-audience .eyebrow,
.redesign-audience .redesign-audience-grid {
margin-left: 0 !important;
margin-right: 0 !important;
}
@media (max-width: 43.99rem) {
.redesign-audience > .home-audience__content.site-container {
width: calc(100% - (var(--gutter) * 2)) !important;
}
}
/* 0.3.56 — audience alignment: use the section gutter itself so Gutenberg
wrapper variations cannot make the content flush to the viewport. */
.redesign-audience {
padding-left: var(--gutter) !important;
padding-right: var(--gutter) !important;
}
.redesign-audience .home-audience__content {
width: 100% !important;
max-width: var(--container-max) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.redesign-audience .eyebrow,
.redesign-audience .home-audience__title,
.redesign-audience .home-audience__intro,
.redesign-audience .redesign-audience-grid {
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
}
.redesign-audience .eyebrow {
justify-content: flex-start !important;
}
/* 0.3.57 — make the Services full-service split panel as compact as the homepage CTA banner. */
.redesign-full-service {
padding-top: 1rem;
}
.redesign-full-service .full-service__grid {
grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
gap: 0;
min-height: clamp(12rem, 14vw, 14rem);
background: linear-gradient(90deg, #fff1f3 0%, #fff1f3 56%, #fff 56%);
}
.redesign-full-service .full-service__content {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(1.35rem, 1.9vw, 2rem) clamp(1.6rem, 2.3vw, 2.4rem);
}
.redesign-full-service .full-service__content h2 {
margin-top: .4rem;
max-width: 11ch;
font-size: clamp(1.8rem, 2.6vw, 3rem);
line-height: 1.02;
}
.redesign-full-service .full-service__content p {
max-width: 31rem;
margin-top: .45rem;
font-size: clamp(.88rem, .94vw, .98rem);
line-height: 1.42;
}
.redesign-full-service .full-service__content .wp-block-buttons {
margin-top: .85rem;
}
.redesign-full-service .full-service__visual {
align-self: stretch !important;
min-height: clamp(12rem, 14vw, 14rem);
}
.redesign-full-service .full-service__visual .wp-block-image,
.redesign-full-service .full-service__visual img {
height: 100% !important;
}
.redesign-full-service .full-service__visual img {
width: 100%;
min-height: clamp(12rem, 14vw, 14rem);
aspect-ratio: auto !important;
object-fit: cover;
object-position: 50% 22%;
}
@media (max-width: 69.99rem) {
.redesign-full-service .full-service__grid {
grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.66fr);
min-height: clamp(11rem, 20vw, 13rem);
}
}
@media (max-width: 43.99rem) {
.redesign-full-service .full-service__grid {
grid-template-columns: 1fr;
min-height: 0;
background: #fff1f3;
}
.redesign-full-service .full-service__content {
padding: 1.35rem 1.25rem;
}
.redesign-full-service .full-service__content h2 {
max-width: none;
font-size: clamp(1.7rem, 8vw, 2.4rem);
}
.redesign-full-service .full-service__visual {
min-height: 14rem;
}
.redesign-full-service .full-service__visual img {
min-height: 14rem;
object-position: center 18%;
}
}
/* 0.3.58 — true compact Full-service banner, matching the homepage CTA height. */
@media (min-width: 44rem) {
.redesign-full-service .full-service__grid {
grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .95fr) !important;
gap: 0 !important;
height: clamp(13.25rem, 15vw, 15.75rem) !important;
min-height: 0 !important;
}
.redesign-full-service .full-service__content {
justify-content: center !important;
padding: clamp(1.1rem, 1.6vw, 1.55rem) clamp(1.5rem, 2.1vw, 2rem) !important;
}
.redesign-full-service .full-service__content .eyebrow {
margin: 0 !important;
}
.redesign-full-service .full-service__content h2 {
max-width: none !important;
margin-top: .3rem !important;
font-size: clamp(1.7rem, 2.15vw, 2.35rem) !important;
line-height: 1.02 !important;
}
.redesign-full-service .full-service__content p {
max-width: 36rem !important;
margin-top: .3rem !important;
font-size: clamp(.78rem, .82vw, .88rem) !important;
line-height: 1.35 !important;
}
.redesign-full-service .full-service__content .wp-block-buttons {
margin-top: .55rem !important;
}
.redesign-full-service .full-service__visual,
.redesign-full-service .full-service__visual .wp-block-image,
.redesign-full-service .full-service__visual img {
height: 100% !important;
min-height: 0 !important;
}
.redesign-full-service .full-service__visual img {
width: 100% !important;
aspect-ratio: auto !important;
object-fit: cover !important;
object-position: 50% 28% !important;
}
}
@media (max-width: 43.99rem) {
.redesign-full-service .full-service__grid {
height: auto !important;
min-height: 0 !important;
}
}
/* 0.3.59 — pricing card in Jak pracuji. */
.redesign-process-grid .process-card--pricing {
display: flex;
flex-direction: column;
}
.redesign-process-grid .process-card--pricing > p:not(.process-card__number):not(.process-card__price) {
margin-top: .65rem;
color: #51484d;
font-size: .82rem;
line-height: 1.55;
}
.redesign-process-grid .process-card__price {
margin-top: 1rem !important;
color: var(--color-primary) !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 1rem !important;
line-height: 1.35 !important;
}
.redesign-process-grid .process-card__price strong { font-weight: 600; }
.redesign-process-grid .process-card__price small {
display: inline-block;
margin-top: .18rem;
color: #6f6870;
font-size: .72rem;
font-weight: 400;
}
.redesign-process-grid .process-card__actions {
margin-top: auto;
padding-top: 1.15rem;
}
.redesign-process-grid .process-card__actions .wp-block-button__link {
min-height: 2.45rem;
padding: .65rem 1rem;
font-size: .75rem;
}
/* 0.3.60 — pricing card uses the same bullet rhythm as all other process cards. */
.redesign-process-grid .process-card--pricing .process-card__pricing-list {
margin-top: 1.2rem;
}
.redesign-process-grid .process-card--pricing .process-card__pricing-list li {
color: #51484d;
font-size: .82rem;
line-height: 1.55;
}
.redesign-process-grid .process-card--pricing .process-card__price-value {
color: var(--color-primary);
font-family: "Montserrat", Arial, sans-serif;
font-size: 1rem;
font-weight: 600;
}
.redesign-process-grid .process-card--pricing .process-card__price-vat {
display: inline-block;
margin-top: .18rem;
color: #6f6870;
font-size: .72rem;
font-weight: 400;
}
/* 0.3.61 — Reference is part of Portfolio, not a standalone frontend section. */
.portfolio-archive__references {
margin-top: clamp(3rem, 6vw, 5.5rem);
padding-top: clamp(2.2rem, 4vw, 3.5rem);
border-top: 1px solid var(--color-border);
scroll-margin-top: 7rem;
}
.portfolio-archive__references > h2 {
margin-top: .65rem;
max-width: 18ch;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(2.2rem, 4.3vw, 4.2rem);
font-weight: 400;
line-height: 1.04;
}
.portfolio-archive__references .references-grid {
margin-top: 1.6rem;
}
@media (max-width: 43.99rem) {
.portfolio-archive__references {
margin-top: 2.25rem;
padding-top: 1.75rem;
}
.portfolio-archive__references > h2 {
font-size: clamp(2rem, 10vw, 2.85rem);
}
}
/* 0.3.62 — normal Gutenberg Portfolio Page powered by shortcodes. */
.portfolio-page .portfolio-archive__content {
padding-top: clamp(2rem, 4vw, 4rem);
}
.portfolio-page__references {
background: #fffaf9;
}
.portfolio-page .portfolio-archive__references {
margin-top: 0;
}
.portfolio-page .portfolio-archive__references > .eyebrow,
.portfolio-page .portfolio-archive__references > h2 {
text-align: left;
}
/* 0.3.63 — Portfolio references heading uses the same scale as homepage section headings. */
.portfolio-page .portfolio-archive__references > h2 {
max-width: none !important;
font-size: clamp(2rem, 3.25vw, 3.15rem) !important;
line-height: .98 !important;
}
@media (max-width: 43.99rem) {
.portfolio-page .portfolio-archive__references > h2 {
font-size: clamp(1.9rem, 9vw, 2.8rem) !important;
}
}
/* 0.3.64 — restore Portfolio hero brand styling after reference heading changes. */
.portfolio-page .portfolio-archive__intro,
.portfolio-archive .portfolio-archive__intro {
text-align: center;
}
.portfolio-page .portfolio-archive__intro > .site-container,
.portfolio-archive .portfolio-archive__intro > .site-container {
display: flex;
min-height: var(--jenifer-hero-height);
flex-direction: column;
justify-content: center;
align-items: center;
}
.portfolio-page .portfolio-archive__intro .eyebrow,
.portfolio-archive .portfolio-archive__intro .eyebrow {
color: var(--color-primary) !important;
justify-content: center;
margin-inline: auto;
font-size: 0.78rem !important;
font-weight: 500 !important;
letter-spacing: .14em !important;
}
.portfolio-page .portfolio-archive__intro h1,
.portfolio-archive .portfolio-archive__intro h1 {
margin-top: .35rem;
font-family: 'Playfair Display', serif !important;
font-size: var(--jenifer-inner-hero-h1) !important;
font-weight: 400 !important;
line-height: .98 !important;
letter-spacing: -.02em !important;
}
.portfolio-page .portfolio-archive__intro p:not(.eyebrow),
.portfolio-archive .portfolio-archive__intro p:not(.eyebrow) {
max-width: 42rem;
margin: .45rem auto 0;
color: var(--color-muted) !important;
font-family: 'Playfair Display', serif !important;
font-size: var(--jenifer-inner-hero-lead) !important;
font-weight: 400 !important;
line-height: 1.16 !important;
}
@media (max-width: 43.99rem) {
.portfolio-page .portfolio-archive__intro .eyebrow,
.portfolio-archive .portfolio-archive__intro .eyebrow {
font-size: .72rem !important;
}
.portfolio-page .portfolio-archive__intro h1,
.portfolio-archive .portfolio-archive__intro h1 {
font-size: clamp(2.3rem, 9vw, 3.2rem) !important;
}
.portfolio-page .portfolio-archive__intro p:not(.eyebrow),
.portfolio-archive .portfolio-archive__intro p:not(.eyebrow) {
font-size: clamp(1.1rem, 4.6vw, 1.45rem) !important;
}
}
/* 0.3.67 — Collaboration page: text-only hero + homepage-sized CTA banner */
.redesign-collaboration .collaboration-hero__grid {
grid-template-columns: minmax(0, 1fr) !important;
min-height: auto !important;
gap: 0 !important;
align-items: start !important;
}
.redesign-collaboration .collaboration-hero__visual {
display: none !important;
}
.redesign-collaboration .collaboration-hero__content {
max-width: 62rem;
}
.redesign-collaboration .collaboration-hero__content > p:not(.eyebrow),
.redesign-collaboration .collaboration-hero__content .wp-block-list,
.redesign-collaboration .collaboration-hero__content h2 {
max-width: 48rem;
}
.redesign-collaboration-cta {
display: flex;
flex-direction: column;
justify-content: center;
min-height: clamp(9.5rem, 12vw, 11rem);
padding: clamp(1.25rem, 2vw, 1.7rem) clamp(1.35rem, 2.5vw, 2rem) !important;
border-radius: 1.15rem;
}
.redesign-collaboration-cta h2 {
margin-top: 0;
}
.redesign-collaboration-cta p {
margin-top: .32rem;
max-width: 36rem;
}
.redesign-collaboration-cta .wp-block-buttons {
margin-top: .7rem;
}
@media (max-width: 69.99rem) {
.redesign-collaboration .collaboration-hero__content > p:not(.eyebrow),
.redesign-collaboration .collaboration-hero__content .wp-block-list,
.redesign-collaboration .collaboration-hero__content h2 {
max-width: 100%;
}
}
/* 0.3.68 — Contact page: text-only hero */
.redesign-contact .contact-hero__grid {
grid-template-columns: minmax(0, 1fr) !important;
min-height: auto !important;
gap: 0 !important;
align-items: start !important;
}
.redesign-contact .contact-hero__visual {
display: none !important;
}
.redesign-contact .contact-hero__content {
max-width: 62rem;
}
.redesign-contact .contact-hero__content > p:not(.eyebrow),
.redesign-contact .contact-hero__content .contact-hero__lead,
.redesign-contact .contact-hero__content .jenifer-contact-details {
max-width: 48rem;
}
@media (max-width: 69.99rem) {
.redesign-contact .contact-hero__content > p:not(.eyebrow),
.redesign-contact .contact-hero__content .contact-hero__lead,
.redesign-contact .contact-hero__content .jenifer-contact-details {
max-width: 100%;
}
}
/* 0.3.69 — Center the References heading block inside Portfolio. */
.portfolio-page .portfolio-archive__references > .eyebrow,
.portfolio-page .portfolio-archive__references > h2 {
text-align: center !important;
margin-left: auto;
margin-right: auto;
}
/* 0.3.70 — Center the Portfolio references eyebrow too. */
.portfolio-page .portfolio-archive__references > .eyebrow {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: fit-content;
margin-left: auto !important;
margin-right: auto !important;
}
/* 0.3.71 — structured collaboration offers grid and detail pages. */
.redesign-collaboration-offers {
min-height: 0 !important;
padding: clamp(1.6rem, 2.5vw, 2.3rem) !important;
}
.redesign-collaboration-offers > h2 {
margin: 0;
font-size: clamp(2rem, 3.2vw, 3rem);
line-height: 1.02;
}
.redesign-collaboration-offers > p {
margin-top: .35rem;
color: #51484d;
}
.collaboration-offers-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-top: 1.45rem;
}
.collaboration-offer-card {
display: flex;
min-height: 13rem;
padding: 1.35rem;
border: 1px solid rgb(239 20 147 / 16%);
border-radius: .9rem;
background: rgb(255 255 255 / 82%);
box-shadow: 0 10px 28px rgb(73 28 47 / 5%);
color: var(--color-text);
flex-direction: column;
text-decoration: none;
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.collaboration-offer-card:hover,
.collaboration-offer-card:focus-visible {
border-color: var(--color-primary);
box-shadow: 0 16px 34px rgb(73 28 47 / 9%);
transform: translateY(-3px);
}
.collaboration-offer-card h3 {
margin: 0;
font-family: 'Playfair Display', serif !important;
font-size: clamp(1.55rem, 2vw, 2.15rem);
font-style: normal !important;
font-weight: 400 !important;
letter-spacing: 0;
line-height: 1.08;
color: #231a1e;
font-synthesis: none !important;
}
.collaboration-offer-card__divider {
display: block;
width: 100%;
height: 1px;
margin-top: .8rem;
background: rgb(239 20 147 / 18%);
}
.collaboration-offer-card__content {
margin-top: .8rem;
}
.collaboration-offer-card__role {
display: block;
color: var(--color-primary);
font-family: 'Montserrat', sans-serif;
font-size: .68rem;
font-weight: 600;
letter-spacing: .12em;
line-height: 1.35;
text-transform: uppercase;
}
.collaboration-offer-card p {
margin: .45rem 0 0;
color: #625a60;
font-size: .82rem;
line-height: 1.55;
}
.collaboration-offer-card__more {
margin-top: auto;
padding-top: 1rem;
color: var(--color-primary);
font-size: .7rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
.collaboration-offers-empty {
margin-top: 1.35rem;
padding: 1.2rem 1.3rem;
border: 1px solid rgb(239 20 147 / 14%);
border-radius: .75rem;
background: rgb(255 255 255 / 62%);
color: var(--color-muted);
}
.collaboration-offer-single__hero {
background: linear-gradient(180deg, #f7eef2 0%, #fff4f2 100%);
}
.collaboration-offer-single__hero-inner {
display: flex;
min-height: 18rem;
max-width: var(--container-max);
flex-direction: column;
justify-content: center;
}
.collaboration-offer-single__hero .eyebrow {
justify-content: flex-start;
}
.collaboration-offer-single__role {
margin-top: .65rem;
color: var(--color-primary);
font-size: .75rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
}
.collaboration-offer-single__hero h1 {
max-width: 16ch;
margin-top: .35rem;
font-size: clamp(2.6rem, 5vw, 4.8rem);
font-weight: 400;
line-height: .98;
}
.collaboration-offer-single__lead {
max-width: 44rem;
margin-top: .75rem;
color: #5f565c;
font-size: clamp(1rem, 1.5vw, 1.25rem);
line-height: 1.5;
}
.collaboration-offer-single__content {
max-width: 54rem;
}
.collaboration-offer-single__content > * + * {
margin-top: 1rem;
}
.collaboration-offer-single__content h2 {
margin-top: 2.25rem;
font-size: clamp(2rem, 3.4vw, 3.2rem);
}
.collaboration-offer-single__content h3 {
margin-top: 1.8rem;
font-size: clamp(1.45rem, 2.2vw, 2rem);
}
.collaboration-offer-single__back {
margin-top: 2.5rem !important;
}
@media (max-width: 69.99rem) {
.collaboration-offers-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 43.99rem) {
.collaboration-offers-grid {
grid-template-columns: 1fr;
}
.collaboration-offer-card {
min-height: 0;
}
.collaboration-offer-single__hero-inner {
min-height: 14rem;
}
}
/* 0.3.72 — Collaboration offers are template-owned, not dependent on legacy Gutenberg CTA migration. */
.editorial-page--collaboration > .wp-block-group.collaboration-cta,
.editorial-page--collaboration .collaboration-cta.section--surface {
display: none !important;
}
.collaboration-offers-section {
padding-top: clamp(2.2rem, 4vw, 3.8rem);
padding-bottom: clamp(2.2rem, 4vw, 3.8rem);
background: #fff;
}
.collaboration-offers-section .redesign-collaboration-cta {
min-height: 0;
padding: clamp(1.5rem, 2.4vw, 2.1rem) !important;
}
.collaboration-offers-section .collaboration-offers-grid {
margin-top: 1.5rem;
}
.collaboration-offers-section .collaboration-offers-empty {
margin-top: 1.25rem;
}
/* 0.3.75 — collaboration card preview is fully editor-controlled. */
.collaboration-offer-card {
min-height: 12rem;
padding: 1.25rem 1.3rem;
}
.collaboration-offer-card h3 {
font-size: clamp(1.35rem, 1.75vw, 1.8rem);
line-height: 1.1;
}
.collaboration-offer-card__divider {
margin-top: .7rem;
}
.collaboration-offer-card__content {
margin-top: .72rem;
}
.collaboration-offer-card__role {
margin-bottom: .38rem;
}
.collaboration-offer-card p {
margin: 0;
font-size: .8rem;
line-height: 1.48;
}
/* 0.3.76 — collaboration offer detail hero aligned with the rest of the site. */
.collaboration-offer-single__hero {
padding-block: clamp(1.7rem, 3vw, 3.2rem);
}
.collaboration-offer-single__hero-inner {
min-height: 0;
padding-block: clamp(.25rem, 1vw, .75rem);
}
.collaboration-offer-single__role {
margin-top: .45rem;
}
.collaboration-offer-single__hero h1 {
max-width: 14ch;
margin-top: .2rem;
font-size: clamp(2.35rem, 4vw, 3.85rem);
line-height: .98;
}
.collaboration-offer-single__body.section {
padding-top: clamp(1.8rem, 3vw, 3rem);
}
@media (max-width: 43.99rem) {
.collaboration-offer-single__hero {
padding-block: clamp(1.35rem, 5vw, 2rem);
}
.collaboration-offer-single__hero-inner {
padding-block: 0;
}
.collaboration-offer-single__hero h1 {
max-width: 12ch;
font-size: clamp(2rem, 10vw, 2.75rem);
}
}
/* 0.3.77 — collaboration offer detail content redesign. */
.collaboration-offer-single__content {
max-width: 72rem;
}
.collaboration-offer-single__article {
max-width: 58rem;
margin: 0 auto;
}
.co-intro-card {
padding: clamp(1.5rem, 2.2vw, 2rem);
border: 1px solid rgba(255, 20, 147, .14);
border-radius: 1.8rem;
background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,238,242,.82));
box-shadow: 0 18px 48px rgba(17, 17, 17, .05);
}
.co-intro-card__inner {
max-width: 48rem;
}
.co-intro-card__text + .co-intro-card__text {
margin-top: .95rem;
}
.co-intro-card p {
margin: 0;
font-size: 1.06rem;
line-height: 1.82;
color: var(--text-color);
}
.co-intro-card p:first-child {
font-size: clamp(1.08rem, 1.4vw, 1.22rem);
}
.co-steps {
display: grid;
gap: 1.4rem;
margin-top: 1.75rem;
}
.co-step-card {
padding: clamp(1.4rem, 2.4vw, 1.95rem);
border: 1px solid rgba(255, 20, 147, .13);
border-radius: 1.8rem;
background: rgba(255, 255, 255, .84);
box-shadow: 0 18px 42px rgba(17, 17, 17, .04);
}
.co-step-card__header {
display: flex;
align-items: baseline;
gap: .9rem;
padding-bottom: .95rem;
margin-bottom: 1rem;
border-bottom: 1px solid rgba(255, 20, 147, .14);
}
.co-step-card__number {
font-family: var(--font-display);
font-size: clamp(2rem, 3vw, 2.55rem);
line-height: 1;
color: var(--color-primary);
flex: 0 0 auto;
}
.co-step-card__header h2 {
margin: 0;
font-family: var(--font-body);
font-size: clamp(1.05rem, 1.25vw, 1.18rem);
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
line-height: 1.3;
color: var(--color-heading);
}
.co-step-card__body > * + * {
margin-top: .95rem;
}
.co-step-card__body p,
.co-article-flow p {
margin: 0;
font-size: 1.03rem;
line-height: 1.82;
color: var(--text-color);
}
.co-subtitle {
margin: .25rem 0 0;
font-family: var(--font-display);
font-size: clamp(1.45rem, 2.2vw, 1.9rem);
line-height: 1.1;
color: var(--color-heading);
}
.co-label {
margin: .2rem 0 0;
font-size: .82rem !important;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-primary) !important;
}
.co-quote {
margin: .4rem 0 0;
padding: .95rem 1.1rem;
border-left: 3px solid var(--color-primary);
border-radius: 0 1rem 1rem 0;
background: rgba(255, 20, 147, .05);
}
.co-quote p {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.18rem, 1.9vw, 1.38rem);
line-height: 1.35;
color: var(--color-heading);
}
.co-list {
margin: 0;
padding-left: 1.2rem;
}
.co-list li + li {
margin-top: .42rem;
}
.co-inline-cta {
margin-top: 1.2rem !important;
}
.co-inline-cta .button {
pointer-events: none;
}
.collaboration-offer-single__back {
max-width: 58rem;
margin: 1.4rem auto 0;
}
@media (max-width: 43.99rem) {
.collaboration-offer-single__article {
max-width: 100%;
}
.co-intro-card,
.co-step-card {
border-radius: 1.35rem;
padding: 1.1rem;
}
.co-step-card__header {
gap: .7rem;
align-items: flex-start;
}
.co-step-card__header h2 {
font-size: .98rem;
}
.co-step-card__body p,
.co-article-flow p,
.co-intro-card p {
font-size: 1rem;
line-height: 1.74;
}
}
/* 0.3.79 — show collaboration card summary in the offer detail. */
.collaboration-offer-single__summary {
margin: 0 auto 1.4rem;
padding: clamp(1.35rem, 2.2vw, 1.9rem);
border: 1px solid rgba(255, 20, 147, .13);
border-radius: 1.8rem;
background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,240,244,.88));
box-shadow: 0 16px 40px rgba(17, 17, 17, .04);
}
.collaboration-offer-single__summary-title {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important;
font-weight: 400;
line-height: 1.02;
color: var(--color-heading);
}
.collaboration-offer-single__summary-divider {
display: block;
width: 100%;
height: 1px;
margin: .9rem 0 .95rem;
background: rgba(255, 20, 147, .18);
}
.collaboration-offer-single__summary-role {
margin: 0;
font-size: .95rem;
line-height: 1.55;
color: var(--color-muted);
}
.collaboration-offer-single__summary-text {
margin-top: .7rem;
}
.collaboration-offer-single__summary-text p {
margin: 0;
font-size: 1.02rem;
line-height: 1.72;
color: var(--text-color);
}
@media (max-width: 43.99rem) {
.collaboration-offer-single__summary {
padding: 1.1rem;
border-radius: 1.35rem;
}
.collaboration-offer-single__summary-title {
font-size: clamp(1.5rem, 7vw, 1.9rem) !important;
}
}
/* 0.3.80 — collaboration offer preview is integrated into the hero. */
.collaboration-offer-single__hero {
background: linear-gradient(180deg, #f7eef2 0%, #fff4f2 100%);
}
.collaboration-offer-single__hero-inner {
display: flex;
min-height: 0;
max-width: var(--container-max);
align-items: flex-start;
justify-content: flex-start;
}
.collaboration-offer-single__hero-copy {
max-width: 58rem;
}
.collaboration-offer-single__hero h1 {
max-width: 14ch;
margin-top: .35rem;
font-size: clamp(2.35rem, 4.4vw, 4.15rem);
font-weight: 400;
line-height: .98;
}
.collaboration-offer-single__hero-card {
max-width: 44rem;
margin-top: 1.2rem;
padding: clamp(1.15rem, 2vw, 1.5rem);
border: 1px solid rgba(255, 20, 147, .14);
border-radius: 1.55rem;
background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,238,242,.9));
box-shadow: 0 18px 42px rgba(17, 17, 17, .05);
}
.collaboration-offer-single__hero-card-text p {
margin: 0;
font-size: clamp(1rem, 1.25vw, 1.08rem);
line-height: 1.72;
color: var(--text-color);
}
.collaboration-offer-single__hero-card-text p + p {
margin-top: .75rem;
}
.collaboration-offer-single__body {
padding-top: clamp(2.2rem, 4vw, 3.2rem);
}
@media (max-width: 43.99rem) {
.collaboration-offer-single__hero h1 {
max-width: 100%;
font-size: clamp(2rem, 10vw, 3.1rem);
}
.collaboration-offer-single__hero-card {
margin-top: 1rem;
padding: 1rem;
border-radius: 1.2rem;
}
.collaboration-offer-single__hero-card-text p {
font-size: .98rem;
line-height: 1.65;
}
}
/* 0.3.81 — collaboration detail hero: use the empty right side for the preview.
The article now starts below as normal editorial content instead of another giant card. */
.collaboration-offer-single__hero {
padding-block: clamp(2rem, 3.4vw, 3.4rem);
}
.collaboration-offer-single__hero-inner {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(20rem, .72fr);
align-items: center;
gap: clamp(2rem, 6vw, 6rem);
}
.collaboration-offer-single__hero-copy {
max-width: 42rem;
}
.collaboration-offer-single__hero h1 {
max-width: 13ch;
margin-top: .55rem;
font-size: clamp(2.5rem, 4.6vw, 4.35rem);
}
.collaboration-offer-single__hero-card {
width: 100%;
max-width: 31rem;
margin: 0;
padding: clamp(1.25rem, 2.2vw, 1.7rem);
justify-self: end;
border: 1px solid rgba(239, 20, 147, .18);
border-radius: 1.35rem;
background:
linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,240,244,.92));
box-shadow: 0 18px 44px rgba(17,17,17,.05);
}
.collaboration-offer-single__hero-card-kicker {
margin: 0 0 .8rem;
color: var(--color-primary);
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.collaboration-offer-single__hero-card-title {
margin: 0 0 .55rem;
font-family: var(--font-display);
font-size: clamp(1.7rem, 2.5vw, 2.15rem) !important;
font-weight: 400;
line-height: 1.05;
}
.collaboration-offer-single__hero-card-role {
margin: 0 0 .9rem;
padding-bottom: .85rem;
border-bottom: 1px solid rgba(239, 20, 147, .16);
color: var(--color-muted);
font-size: .86rem;
line-height: 1.5;
}
.collaboration-offer-single__hero-card-text p {
margin: 0;
font-size: .96rem;
line-height: 1.68;
color: var(--color-text);
}
.collaboration-offer-single__hero-card-text p + p {
margin-top: .7rem;
}
/* The body should begin cleanly with “Ne člověka…” — no second oversized wrapper. */
.co-intro-flow {
max-width: 58rem;
margin: 0 auto 1.6rem;
padding: 0;
}
.co-intro-flow > * + * {
margin-top: .9rem;
}
.co-intro-flow p {
margin: 0;
font-size: 1.04rem;
line-height: 1.78;
color: var(--color-text);
}
.co-intro-flow p:first-child {
font-size: clamp(1.08rem, 1.5vw, 1.2rem);
}
.co-steps {
margin-top: 1.5rem;
}
@media (max-width: 69.99rem) {
.collaboration-offer-single__hero-inner {
grid-template-columns: 1fr;
gap: 1.4rem;
}
.collaboration-offer-single__hero-card {
max-width: 44rem;
justify-self: start;
}
}
@media (max-width: 43.99rem) {
.collaboration-offer-single__hero {
padding-block: 1.45rem 1.75rem;
}
.collaboration-offer-single__hero h1 {
max-width: 100%;
font-size: clamp(2.1rem, 10vw, 3rem);
}
.collaboration-offer-single__hero-card {
padding: 1rem;
border-radius: 1rem;
}
.co-intro-flow p {
font-size: 1rem;
line-height: 1.7;
}
}
/* 0.3.82 — compact collaboration offer hero.
Remove generic site-main top/bottom padding and stack the quick overview directly under the title. */
.collaboration-offer-single.site-main {
padding-block: 0 !important;
}
.collaboration-offer-single__hero {
padding-block: clamp(1.65rem, 2.6vw, 2.5rem) clamp(1.9rem, 3vw, 2.8rem);
}
.collaboration-offer-single__hero-inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 1.15rem;
}
.collaboration-offer-single__hero-copy {
max-width: 58rem;
}
.collaboration-offer-single__hero h1 {
max-width: 14ch;
margin-top: .45rem;
font-size: clamp(2.45rem, 4.2vw, 3.9rem);
}
.collaboration-offer-single__hero-card {
width: min(100%, 52rem);
max-width: 52rem;
margin: 0;
padding: clamp(1.1rem, 1.8vw, 1.45rem);
justify-self: start;
border-radius: 1.2rem;
}
.collaboration-offer-single__hero-card-kicker {
margin-bottom: .65rem;
}
.collaboration-offer-single__hero-card-role {
margin-bottom: .7rem;
padding-bottom: .7rem;
}
.collaboration-offer-single__body.section {
padding-top: clamp(1.9rem, 3vw, 2.8rem);
}
@media (max-width: 69.99rem) {
.collaboration-offer-single__hero-inner {
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
.collaboration-offer-single__hero-card {
max-width: 100%;
}
}
@media (max-width: 43.99rem) {
.collaboration-offer-single__hero {
padding-block: 1.25rem 1.55rem;
}
.collaboration-offer-single__hero h1 {
font-size: clamp(2rem, 10vw, 2.8rem);
}
.collaboration-offer-single__hero-card {
padding: .95rem;
border-radius: 1rem;
}
}
/* 0.3.83 — Referral Partner is theme-owned and uses the Jak pracuji card language. */
.referral-partner-detail {
width: 100%;
}
.referral-partner-grid {
width: 100%;
margin: 0;
}
.referral-partner-grid .referral-card {
padding: 1.55rem;
}
.referral-partner-grid .referral-card__content {
margin-top: 1rem;
}
.referral-partner-grid .referral-card__content > * + * {
margin-top: .8rem;
}
.referral-partner-grid .referral-card__content p {
margin-top: 0;
color: #51484d;
font-size: .84rem;
line-height: 1.62;
}
.referral-partner-grid .referral-card__content blockquote {
margin: .85rem 0 0;
padding: .8rem .9rem;
border-left: 3px solid var(--color-primary);
background: rgba(239,20,147,.045);
color: var(--color-text);
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 1rem;
font-style: italic;
line-height: 1.45;
}
.referral-partner-grid .referral-card__strong {
color: var(--color-text) !important;
font-weight: 600;
}
.referral-partner-grid .referral-card__aside,
.referral-partner-grid .referral-card__example {
padding: .8rem .9rem;
border-radius: .8rem;
background: var(--color-primary-soft);
}
.referral-partner-grid .referral-card__label {
margin-top: 1rem !important;
color: var(--color-primary) !important;
font-size: .68rem !important;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.referral-partner-grid .referral-card__big {
color: var(--color-primary) !important;
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 2.45rem !important;
line-height: 1 !important;
}
.referral-levels {
display: grid;
gap: .55rem;
margin-top: 1rem;
}
.referral-levels p {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .75rem .85rem;
border-bottom: 1px solid var(--color-border);
}
.referral-levels span {
font-size: .76rem;
line-height: 1.35;
}
.referral-levels strong {
flex: 0 0 auto;
color: var(--color-primary);
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 1.35rem;
font-weight: 400;
}
.referral-partner-grid .referral-card__no {
color: var(--color-primary) !important;
font-weight: 700;
}
.referral-partner-cta {
margin-top: 1rem;
padding: clamp(1.55rem, 2.8vw, 2.35rem);
border: 1px solid var(--color-border);
border-radius: 1.05rem;
background: var(--color-primary-soft);
}
.referral-partner-cta h2 {
max-width: 44rem;
margin-top: .7rem;
font-size: clamp(2rem, 3.7vw, 3.4rem) !important;
}
.referral-partner-cta > p:not(.eyebrow) {
max-width: 44rem;
margin-top: .75rem;
}
.referral-partner-cta__actions {
margin-top: 1.25rem !important;
}
.referral-partner-cta__note {
color: var(--color-muted);
font-size: .72rem;
line-height: 1.55;
}
@media (min-width: 70rem) {
.referral-partner-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 1rem !important;
}
/* Keep every Referral card at normal one-card width, including 05. */
.referral-partner-grid .process-card:nth-child(5) {
grid-column: auto !important;
width: auto !important;
justify-self: stretch !important;
}
}
@media (min-width: 44rem) and (max-width: 69.99rem) {
.referral-partner-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.referral-partner-grid .process-card:nth-child(5) {
grid-column: auto !important;
width: auto !important;
justify-self: stretch !important;
}
}
@media (max-width: 43.99rem) {
.referral-partner-grid {
grid-template-columns: 1fr !important;
}
.referral-partner-cta {
padding: 1.2rem;
}
}
/* 0.3.84 — Referral detail routing fix for production permalink /spoluprace/110/. */
.collaboration-offer-single .referral-partner-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 1rem !important;
max-width: none !important;
margin-inline: 0 !important;
}
.collaboration-offer-single .referral-partner-grid > .referral-card {
width: auto !important;
max-width: none !important;
grid-column: auto !important;
justify-self: stretch !important;
}
@media (max-width: 69.99rem) {
.collaboration-offer-single .referral-partner-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 43.99rem) {
.collaboration-offer-single .referral-partner-grid {
grid-template-columns: 1fr !important;
}
}
/* 0.3.85 — collaboration detail hero centered + referral CTA banner matched to homepage proportions. */
.collaboration-offer-single__hero {
padding-block: clamp(1.25rem, 2.2vw, 2rem) clamp(1.65rem, 2.8vw, 2.35rem);
}
.collaboration-offer-single__hero-inner {
justify-items: center;
text-align: center;
gap: 1rem;
}
.collaboration-offer-single__hero-copy {
max-width: 56rem;
text-align: center;
}
.collaboration-offer-single__hero h1 {
margin-inline: auto;
max-width: 16ch;
}
.collaboration-offer-single__hero-card {
justify-self: center;
width: min(100%, 48rem);
max-width: 48rem;
margin-inline: auto;
}
.collaboration-offer-single__hero-card,
.collaboration-offer-single__hero-card * {
text-align: left;
}
.referral-partner-cta {
width: 100%;
min-height: clamp(9.5rem, 12vw, 11rem);
margin-top: clamp(1.15rem, 2vw, 1.5rem);
padding: clamp(1.25rem, 2vw, 1.7rem) clamp(1.35rem, 2.5vw, 2rem);
border-radius: 1.15rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.referral-partner-cta .eyebrow,
.referral-partner-cta h2,
.referral-partner-cta > p:not(.eyebrow),
.referral-partner-cta__note {
max-width: min(38rem, 58%);
}
.referral-partner-cta h2 {
margin-top: .35rem;
font-size: clamp(1.55rem, 2.25vw, 2.25rem) !important;
line-height: 1.02;
}
.referral-partner-cta > p:not(.eyebrow) {
margin-top: .32rem;
font-size: clamp(.8rem, .9vw, .95rem);
line-height: 1.45;
}
.referral-partner-cta__actions {
margin-top: .7rem !important;
}
.referral-partner-cta__note {
margin-top: .65rem !important;
font-size: .68rem;
line-height: 1.5;
}
@media (max-width: 69.99rem) {
.collaboration-offer-single__hero-card {
width: min(100%, 44rem);
max-width: 44rem;
}
.referral-partner-cta .eyebrow,
.referral-partner-cta h2,
.referral-partner-cta > p:not(.eyebrow),
.referral-partner-cta__note {
max-width: 72%;
}
}
@media (max-width: 43.99rem) {
.collaboration-offer-single__hero {
padding-block: 1.15rem 1.45rem;
}
.collaboration-offer-single__hero-inner,
.collaboration-offer-single__hero-copy {
text-align: left;
justify-items: start;
}
.collaboration-offer-single__hero h1 {
margin-inline: 0;
}
.collaboration-offer-single__hero-card {
width: 100%;
max-width: 100%;
justify-self: stretch;
margin-inline: 0;
}
.referral-partner-cta {
min-height: 0;
padding: 1.25rem;
border-radius: .95rem;
}
.referral-partner-cta .eyebrow,
.referral-partner-cta h2,
.referral-partner-cta > p:not(.eyebrow),
.referral-partner-cta__note {
max-width: 100%;
}
.referral-partner-cta h2 {
font-size: clamp(1.75rem, 8vw, 2.3rem) !important;
}
}
/* 0.3.86 — theme-owned Portfolio + Reference editorial page. */
.portfolio-reference-page.site-main {
padding-block: 0 !important;
}
.portfolio-reference-hero {
padding-block: clamp(2.2rem, 4vw, 3.8rem);
background: linear-gradient(180deg, #f7eef2 0%, #fff4f2 100%);
}
.portfolio-reference-hero__inner {
display: flex;
min-height: clamp(12rem, 20vw, 17rem);
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.portfolio-reference-hero .eyebrow {
justify-content: center;
color: var(--color-primary);
font-size: .78rem;
font-weight: 500;
letter-spacing: .14em;
}
.portfolio-reference-hero h1 {
max-width: 18ch;
margin-top: .6rem;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(2.65rem, 5vw, 4.5rem);
font-weight: 400;
line-height: .98;
letter-spacing: -.025em;
}
.portfolio-reference-hero__lead {
margin-top: .7rem;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(1.15rem, 2vw, 1.55rem);
line-height: 1.25;
color: var(--color-muted);
}
.portfolio-reference-story {
padding-block: clamp(2.8rem, 5.5vw, 5rem);
}
.portfolio-reference-story__grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
gap: clamp(2rem, 6vw, 6rem);
align-items: center;
}
.portfolio-reference-story__opening,
.portfolio-reference-story__point {
max-width: 42rem;
}
.portfolio-reference-story__lead {
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(1.85rem, 3.2vw, 3rem);
line-height: 1.06;
letter-spacing: -.025em;
}
.portfolio-reference-story__rhythm {
margin-top: 1.4rem;
}
.portfolio-reference-story__rhythm p,
.portfolio-reference-story__point p {
margin: 0;
font-size: clamp(.92rem, 1.1vw, 1rem);
line-height: 1.72;
color: #51484d;
}
.portfolio-reference-story__rhythm p + p,
.portfolio-reference-story__point p + p {
margin-top: .65rem;
}
.portfolio-reference-story__point {
padding: clamp(1.35rem, 2.4vw, 2rem);
border: 1px solid rgba(239,20,147,.14);
border-radius: 1.25rem;
background: var(--color-primary-soft);
}
.portfolio-reference-story__point p:last-child {
color: var(--color-text);
}
.portfolio-reference-projects {
padding-block: clamp(2.8rem, 5vw, 4.8rem);
background: #fff;
}
.portfolio-reference-section-heading {
margin-bottom: clamp(1.6rem, 3vw, 2.5rem);
}
.portfolio-reference-section-heading h2 {
max-width: 17ch;
margin-top: .55rem;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(2.2rem, 3.8vw, 3.6rem);
font-weight: 400;
line-height: 1.02;
}
.portfolio-reference-projects .jenifer-portfolio-shortcode {
margin-top: 0;
}
.portfolio-reference-projects .portfolio-filters {
margin-bottom: 1.4rem;
}
.portfolio-reference-projects .portfolio-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.portfolio-reference-page .portfolio-page__references {
padding-block: clamp(2.8rem, 5vw, 4.5rem);
background: #fffaf9;
}
.portfolio-reference-page .portfolio-archive__references {
margin-top: 0;
padding-top: 0;
border-top: 0;
text-align: center;
}
.portfolio-reference-page .portfolio-archive__references > .eyebrow {
display: inline-flex;
justify-content: center;
width: auto;
margin-inline: auto;
}
.portfolio-reference-page .portfolio-archive__references > h2 {
max-width: none !important;
margin-top: .55rem;
font-size: clamp(2.1rem, 3.25vw, 3.15rem) !important;
line-height: .98 !important;
text-align: center !important;
}
.portfolio-reference-page .portfolio-archive__references .references-grid {
margin-top: 1.7rem;
text-align: left;
}
@media (max-width: 69.99rem) {
.portfolio-reference-story__grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.portfolio-reference-story__opening,
.portfolio-reference-story__point {
max-width: 100%;
}
.portfolio-reference-projects .portfolio-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 43.99rem) {
.portfolio-reference-hero {
padding-block: 1.5rem 1.8rem;
}
.portfolio-reference-hero__inner {
min-height: 0;
align-items: flex-start;
text-align: left;
}
.portfolio-reference-hero .eyebrow {
justify-content: flex-start;
}
.portfolio-reference-hero h1 {
font-size: clamp(2.3rem, 10vw, 3.15rem);
}
.portfolio-reference-story,
.portfolio-reference-projects,
.portfolio-reference-page .portfolio-page__references {
padding-block: 2.2rem;
}
.portfolio-reference-story__lead {
font-size: clamp(1.7rem, 8vw, 2.35rem);
}
.portfolio-reference-story__point {
padding: 1.1rem;
border-radius: 1rem;
}
.portfolio-reference-projects .portfolio-grid {
grid-template-columns: 1fr;
}
.portfolio-reference-section-heading h2 {
font-size: clamp(2rem, 9vw, 2.8rem);
}
}
/* 0.3.89 — Portfolio & reference section-heading balance. */
.portfolio-reference-section-heading {
margin-bottom: 0 !important;
text-align: center;
}
.portfolio-reference-section-heading > .eyebrow {
display: inline-flex;
justify-content: center;
width: auto;
margin-inline: auto;
}
.portfolio-reference-section-heading h2,
.portfolio-reference-page .portfolio-archive__references > h2 {
max-width: 24ch !important;
margin: .45rem auto 0 !important;
font-family: "Playfair Display", Georgia, serif !important;
font-size: clamp(1.85rem, 2.7vw, 2.65rem) !important;
font-weight: 400 !important;
line-height: 1.03 !important;
text-align: center !important;
}
/* One shared medium gap between both headings and their project/reference content. */
.portfolio-reference-projects .jenifer-portfolio-shortcode,
.portfolio-reference-page .portfolio-archive__references > .references-grid,
.portfolio-reference-page .portfolio-archive__references > .portfolio-empty {
margin-top: clamp(1.35rem, 2vw, 1.65rem) !important;
}
@media (max-width: 43.99rem) {
.portfolio-reference-section-heading h2,
.portfolio-reference-page .portfolio-archive__references > h2 {
max-width: 18ch !important;
font-size: clamp(1.8rem, 8.2vw, 2.4rem) !important;
}
}
/* 0.3.90 — Complete contact / invoicing / bank details. */
.contact-details--complete {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem !important;
width: 100%;
max-width: none !important;
margin-top: clamp(1.4rem, 2.4vw, 2rem) !important;
}
.contact-details--complete .contact-info-card {
min-width: 0;
padding: clamp(1.25rem, 2vw, 1.65rem);
border: 1px solid rgba(239, 20, 147, .14);
border-radius: 1rem;
background: rgba(255, 255, 255, .72);
box-shadow: 0 12px 30px rgba(73, 28, 47, .04);
}
.contact-details--complete .contact-info-card--bank {
grid-column: 1 / -1;
}
.contact-details--complete .contact-info-card__eyebrow {
display: block !important;
margin: 0 0 .55rem !important;
padding: 0 !important;
border: 0 !important;
color: var(--color-primary) !important;
font-size: .68rem !important;
font-weight: 600 !important;
letter-spacing: .12em !important;
text-transform: uppercase;
}
.contact-details--complete .contact-info-card h2 {
margin: 0 !important;
font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
font-size: clamp(1.55rem, 2.3vw, 2.05rem) !important;
font-weight: 400 !important;
line-height: 1.06;
}
.contact-details--complete .contact-info-card__subline {
display: block !important;
margin: .25rem 0 0 !important;
padding: 0 !important;
border: 0 !important;
color: var(--color-muted);
font-size: .82rem !important;
}
.contact-info-list {
display: grid;
gap: 0;
margin-top: 1rem;
}
.contact-details--complete .contact-info-row {
display: grid;
grid-template-columns: 6.7rem minmax(0, 1fr);
gap: .85rem;
align-items: start;
padding: .65rem 0;
border-top: 1px solid var(--color-border);
font-size: .82rem;
line-height: 1.5;
}
.contact-details--complete .contact-info-row > span {
color: var(--color-primary);
font-size: .66rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
}
.contact-details--complete .contact-info-row a {
color: var(--color-text);
text-decoration: none;
}
.contact-details--complete .contact-info-row a:hover {
color: var(--color-primary);
}
.contact-details--complete .contact-info-row small {
display: block;
margin-top: .15rem;
color: var(--color-muted);
font-size: .72rem;
}
.contact-details--complete .contact-info-card__note {
display: block !important;
margin: 1rem 0 0 !important;
padding: .85rem 1rem !important;
border: 0 !important;
border-radius: .75rem;
background: var(--color-primary-soft);
color: var(--color-text);
font-size: .78rem !important;
line-height: 1.5;
}
.contact-info-card__whatsapp {
display: inline-block;
margin-top: .35rem;
color: var(--color-primary) !important;
font-weight: 600;
text-decoration: none;
}
.contact-info-card__bank-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.5rem;
}
.contact-info-card__swift {
display: grid !important;
gap: .15rem !important;
margin: 0 !important;
padding: .3rem 0 0 !important;
border: 0 !important;
text-align: right;
}
.contact-info-card__swift span {
color: var(--color-primary);
font-size: .62rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.contact-info-card__swift strong {
font-size: .86rem;
}
.contact-bank-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.contact-bank-account {
padding: 1rem;
border-radius: .8rem;
background: var(--color-primary-soft);
}
.contact-bank-account__currency {
display: block !important;
margin: 0 0 .45rem !important;
padding: 0 !important;
border: 0 !important;
color: var(--color-primary);
font-size: .7rem !important;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.contact-bank-account .contact-info-row {
padding: .55rem 0;
}
@media (max-width: 69.99rem) {
.contact-details--complete {
grid-template-columns: 1fr;
}
.contact-details--complete .contact-info-card--bank {
grid-column: auto;
}
}
@media (max-width: 43.99rem) {
.contact-details--complete {
gap: .8rem !important;
margin-top: 1.15rem !important;
}
.contact-details--complete .contact-info-card {
padding: 1rem;
border-radius: .85rem;
}
.contact-details--complete .contact-info-row {
grid-template-columns: 5.3rem minmax(0, 1fr);
gap: .6rem;
font-size: .78rem;
}
.contact-bank-grid {
grid-template-columns: 1fr;
}
.contact-info-card__bank-head {
display: block;
}
.contact-info-card__swift {
margin-top: .75rem !important;
text-align: left;
}
}
/* 0.3.91 — complete legal/contact footer details. */
.site-footer__contact p:first-of-type strong {
color: #fff;
}
.site-footer__contact p:nth-of-type(2) {
color: #9f979b;
font-size: .63rem;
}
.site-footer__bottom {
align-items: flex-start;
}
.site-footer__copyright {
max-width: min(64rem, 78%);
line-height: 1.55;
}
.site-footer__credit {
white-space: nowrap;
}
@media (max-width: 69.99rem) {
.site-footer__copyright {
max-width: 70%;
}
}
@media (max-width: 43.99rem) {
.site-footer__copyright {
max-width: 100%;
}
.site-footer__credit {
white-space: normal;
}
}
/* 0.3.92 — split footer copyright and legal notice onto separate lines. */
.site-footer__copyright-line,
.site-footer__copyright-legal {
display: block;
}
.site-footer__copyright-legal {
margin-top: .22rem;
}
\n\n/* 0.3.93 — standalone Contact and dedicated Project Request page. */\n.contact-hero--standalone {\n\tpadding-block: clamp(1.6rem, 3vw, 2.8rem);\n}\n\n.contact-hero__standalone-inner {\n\tmax-width: var(--container-max);\n}\n\n.contact-hero__standalone-inner h1 {\n\tmax-width: 15ch;\n\tmargin-top: .45rem;\n\tfont-size: clamp(2.45rem, 4.2vw, 3.9rem);\n\tline-height: 1;\n}\n\n.contact-hero__standalone-inner > p:not(.eyebrow) {\n\tmax-width: 43rem;\n\tmargin-top: .55rem;\n}\n\n.contact-hero__standalone-inner .contact-quote {\n\tcolor: var(--color-primary);\n\tfont-family: "Playfair Display", Georgia, "Times New Roman", serif;\n\tfont-size: clamp(1.2rem, 2vw, 1.65rem);\n\tfont-style: italic;\n}\n\n.contact-details-section {\n\tpadding-top: clamp(1.5rem, 3vw, 2.6rem);\n}\n\n.project-request-page__hero {\n\tpadding-block: clamp(1.6rem, 3vw, 2.7rem);\n\ttext-align: center;\n}\n\n.project-request-page__hero-inner {\n\tmax-width: 56rem;\n\tmargin-inline: auto;\n}\n\n.project-request-page__hero .eyebrow {\n\tjustify-content: center;\n}\n\n.project-request-page__hero h1 {\n\tmargin-top: .4rem;\n\tfont-size: clamp(2.45rem, 4.2vw, 3.9rem);\n}\n\n.project-request-page__hero p:not(.eyebrow) {\n\tmargin-top: .55rem;\n\tcolor: var(--color-muted);\n}\n\n.project-request-page__form-section {\n\tpadding-top: clamp(1.25rem, 2vw, 1.8rem);\n}\n\n.project-request-page .redesign-contact-form .contact-form-wrap {\n\tmargin-top: 0;\n\tpadding-top: .65rem;\n}\n\n.project-request-page .redesign-contact-form .contact-form-wrap::before {\n\ttop: 0;\n\tright: 1.2rem;\n\tbottom: auto;\n\tleft: 1.2rem;\n\theight: 3px;\n\tborder-radius: 999px;\n\tbackground: #111111;\n}\n\n.project-request-page .contact-form__privacy {\n\tmax-width: 70rem;\n\tmargin-top: .75rem;\n\tfont-size: .78rem;\n\tline-height: 1.55;\n}\n\n.project-request-page .contact-form__privacy a {\n\tcolor: var(--color-primary);\n\tfont-weight: 600;\n\ttext-underline-offset: .16em;\n}\n\n@media (max-width: 43.99rem) {\n\t.project-request-page__hero {\n\t\tpadding-block: 1.25rem 1.5rem;\n\t\ttext-align: left;\n\t}\n\n\t.project-request-page__hero .eyebrow {\n\t\tjustify-content: flex-start;\n\t}\n\n\t.project-request-page .redesign-contact-form .contact-form-wrap::before {\n\t\tright: .7rem;\n\t\tleft: .7rem;\n\t}\n}\n
/* 0.3.94 — Project request form: explicit black top rule. */
.project-request-page .redesign-contact-form .contact-form-wrap::before {
display: none !important;
}
.project-request-page .redesign-contact-form .contact-form {
border-top: 4px solid #111111 !important;
}
@media (max-width: 43.99rem) {
.project-request-page .redesign-contact-form .contact-form {
border-top-width: 3px !important;
}
}
/* 0.3.95 — consent-first cookie banner and settings. */
.cookie-consent[hidden],
.cookie-settings[hidden] {
display: none !important;
}
.cookie-consent {
position: fixed;
z-index: 10000;
left: 0;
right: 0;
bottom: 0;
padding: 1rem;
opacity: 0;
transform: translateY(1rem);
transition: opacity 180ms ease, transform 180ms ease;
pointer-events: none;
}
.cookie-consent.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.cookie-consent__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(1rem, 3vw, 2.5rem);
align-items: end;
width: min(100%, 72rem);
margin: 0 auto;
padding: clamp(1.1rem, 2vw, 1.45rem);
border: 1px solid rgba(239, 20, 147, .18);
border-radius: 1.1rem;
background: rgba(255, 250, 249, .98);
box-shadow: 0 20px 70px rgba(17, 17, 17, .18);
backdrop-filter: blur(16px);
}
.cookie-consent__copy {
max-width: 44rem;
}
.cookie-consent__eyebrow,
.cookie-settings__eyebrow {
margin: 0 0 .4rem;
color: var(--color-primary);
font-size: .66rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.cookie-consent h2,
.cookie-settings h2 {
margin: 0;
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-weight: 400;
line-height: 1.05;
color: var(--color-heading);
}
.cookie-consent h2 {
font-size: clamp(1.55rem, 2.5vw, 2.25rem);
}
.cookie-consent__copy > p:not(.cookie-consent__eyebrow) {
margin: .55rem 0 0;
color: #5f565b;
font-size: .8rem;
line-height: 1.55;
}
.cookie-consent__policy {
display: inline-block;
margin-top: .6rem;
color: var(--color-primary);
font-size: .72rem;
font-weight: 600;
text-decoration: none;
}
.cookie-consent__actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .55rem;
min-width: min(24rem, 100%);
}
.cookie-consent__button {
min-height: 2.75rem;
padding: .7rem 1rem;
border-radius: .65rem;
font-family: inherit;
font-size: .72rem;
font-weight: 700;
letter-spacing: .02em;
cursor: pointer;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.cookie-consent__button--primary {
border: 1px solid #111;
background: #111;
color: #fff;
}
.cookie-consent__button--primary:hover,
.cookie-consent__button--primary:focus-visible {
border-color: var(--color-primary);
background: var(--color-primary);
}
.cookie-consent__button--secondary {
grid-column: 1 / -1;
border: 1px solid rgba(17, 17, 17, .22);
background: transparent;
color: #111;
}
.cookie-consent__button--secondary:hover,
.cookie-consent__button--secondary:focus-visible {
border-color: #111;
background: #111;
color: #fff;
}
.cookie-settings {
position: fixed;
z-index: 10020;
inset: 0;
display: grid;
place-items: center;
padding: 1rem;
}
.cookie-settings__backdrop {
position: absolute;
inset: 0;
background: rgba(17, 17, 17, .62);
backdrop-filter: blur(5px);
}
.cookie-settings__dialog {
position: relative;
z-index: 1;
width: min(100%, 38rem);
max-height: min(88vh, 46rem);
overflow: auto;
padding: clamp(1.25rem, 3vw, 2rem);
border: 1px solid rgba(239, 20, 147, .16);
border-radius: 1.15rem;
background: #fffaf9;
box-shadow: 0 25px 90px rgba(0,0,0,.28);
}
.cookie-settings__close {
position: absolute;
top: .75rem;
right: .85rem;
width: 2rem;
height: 2rem;
border: 0;
background: transparent;
color: #111;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.cookie-settings h2 {
max-width: 26rem;
font-size: clamp(1.8rem, 4vw, 2.75rem);
}
.cookie-settings__intro {
margin: .65rem 0 0;
color: #5f565b;
font-size: .82rem;
line-height: 1.55;
}
.cookie-settings__categories {
display: grid;
gap: .7rem;
margin-top: 1.25rem;
}
.cookie-settings__category {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
align-items: center;
padding: .95rem 1rem;
border: 1px solid rgba(239, 20, 147, .13);
border-radius: .8rem;
background: rgba(255,255,255,.8);
}
.cookie-settings__category strong,
.cookie-settings__category small {
display: block;
}
.cookie-settings__category strong {
font-size: .86rem;
}
.cookie-settings__category small {
margin-top: .25rem;
color: #6f666b;
font-size: .72rem;
line-height: 1.45;
}
.cookie-settings__category input {
width: 1.2rem;
height: 1.2rem;
accent-color: var(--color-primary);
}
.cookie-settings__category--locked {
background: var(--color-primary-soft);
}
.cookie-settings__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
}
.cookie-settings__footer a {
color: var(--color-primary);
font-size: .72rem;
font-weight: 600;
text-decoration: none;
}
.cookie-settings-open {
overflow: hidden;
}
@media (max-width: 50rem) {
.cookie-consent__inner {
grid-template-columns: 1fr;
align-items: stretch;
}
.cookie-consent__actions {
min-width: 0;
}
}
@media (max-width: 34rem) {
.cookie-consent {
padding: .65rem;
}
.cookie-consent__inner {
padding: 1rem;
border-radius: .9rem;
}
.cookie-consent__actions {
grid-template-columns: 1fr;
}
.cookie-consent__button--secondary {
grid-column: auto;
}
.cookie-settings {
padding: .65rem;
align-items: end;
}
.cookie-settings__dialog {
width: 100%;
max-height: 92vh;
border-radius: 1rem;
}
.cookie-settings__footer {
align-items: stretch;
flex-direction: column;
}
}
/* 0.3.97 — Project request hero uses the same compact height as other inner pages. */
.project-request-page__hero.redesign-inner-hero {
padding-top: .75rem !important;
padding-bottom: .75rem !important;
}
.project-request-page__hero > .project-request-page__hero-inner {
min-height: var(--jenifer-inner-hero-height) !important;
display: flex;
flex-direction: column;
justify-content: center;
}
.project-request-page__hero h1 {
font-size: var(--jenifer-inner-hero-h1) !important;
line-height: .98;
}
.project-request-page__hero p:not(.eyebrow) {
font-size: var(--jenifer-inner-hero-lead) !important;
line-height: 1.16;
}
@media (max-width: 43.99rem) {
.project-request-page__hero.redesign-inner-hero {
padding-top: .9rem !important;
padding-bottom: .9rem !important;
}
}
/* 0.3.98 — actual project request page spacing fix.
The large gap came from the generic .site-main vertical padding, not the hero itself. */
.project-request-page.site-main {
padding-block: 0 !important;
}
.project-request-page__hero.redesign-inner-hero {
padding-block: 0 !important;
}
.project-request-page__hero > .project-request-page__hero-inner {
min-height: var(--jenifer-inner-hero-height) !important;
height: var(--jenifer-inner-hero-height) !important;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.project-request-page__hero .eyebrow {
justify-content: center !important;
}
.project-request-page__hero h1 {
margin-top: .45rem !important;
font-size: var(--jenifer-inner-hero-h1) !important;
line-height: 1 !important;
}
.project-request-page__hero p:not(.eyebrow) {
margin-top: .45rem !important;
font-size: var(--jenifer-inner-hero-lead) !important;
line-height: 1.16 !important;
}
.project-request-page__form-section {
padding-top: clamp(1.6rem, 2.5vw, 2.25rem) !important;
}
@media (max-width: 43.99rem) {
.project-request-page__hero > .project-request-page__hero-inner {
height: auto !important;
min-height: var(--jenifer-inner-hero-height) !important;
align-items: flex-start;
text-align: left;
}
.project-request-page__hero .eyebrow {
justify-content: flex-start !important;
}
}
/* 0.3.99 — project form: only ONE top rule, black #111111. */
.project-request-page .redesign-contact-form,
.project-request-page .redesign-contact-form .contact-form-wrap {
border-top: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.project-request-page .redesign-contact-form .contact-form-wrap {
padding-top: 0 !important;
}
.project-request-page .redesign-contact-form .contact-form-wrap::before,
.project-request-page .redesign-contact-form .contact-form-wrap::after,
.project-request-page .redesign-contact-form::before,
.project-request-page .redesign-contact-form::after {
display: none !important;
content: none !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
.project-request-page .redesign-contact-form .contact-form {
margin-top: 0 !important;
border: 1px solid var(--color-border) !important;
border-top: 4px solid #111111 !important;
background: rgb(255 255 255 / 95%) !important;
}
@media (max-width: 43.99rem) {
.project-request-page .redesign-contact-form .contact-form {
border-top-width: 3px !important;
}
}
/* 0.3.100 — unify the pink top rule across all primary card grids. */
.redesign-audience-grid .home-audience__segment,
.redesign-service-grid .service-feature,
.redesign-process-grid .process-card {
border-top: 3px solid var(--color-primary) !important;
}
/* Keep the same rule on every viewport. */
@media (max-width: 43.99rem) {
.redesign-audience-grid .home-audience__segment,
.redesign-service-grid .service-feature,
.redesign-process-grid .process-card {
border-top-width: 3px !important;
}
}
/* 0.3.101 — unify primary card grids with the contact form black top rule. */
.redesign-audience-grid .home-audience__segment,
.redesign-service-grid .service-feature,
.redesign-process-grid .process-card {
border-top-color: #111111 !important;
}
/* 0.3.102 — partner feedback: dark primary CTAs + explicit Instagram profiles. */
.button:not(.button--secondary):not(.button--inverse),
.jenifer-gutenberg-page .wp-block-button:not(.jenifer-button--secondary) .wp-block-button__link,
.contact-form .button,
.cookie-consent__button--primary,
.cookie-settings__footer .cookie-consent__button--primary {
border-color: #111111 !important;
background: #111111 !important;
color: #ffffff !important;
}
.button:not(.button--secondary):not(.button--inverse):hover,
.button:not(.button--secondary):not(.button--inverse):focus-visible,
.jenifer-gutenberg-page .wp-block-button:not(.jenifer-button--secondary) .wp-block-button__link:hover,
.jenifer-gutenberg-page .wp-block-button:not(.jenifer-button--secondary) .wp-block-button__link:focus-visible,
.contact-form .button:hover,
.contact-form .button:focus-visible,
.cookie-consent__button--primary:hover,
.cookie-consent__button--primary:focus-visible,
.cookie-settings__footer .cookie-consent__button--primary:hover,
.cookie-settings__footer .cookie-consent__button--primary:focus-visible {
border-color: #2b2b2b !important;
background: #2b2b2b !important;
color: #ffffff !important;
}
.site-footer__instagram-links {
display: grid;
gap: .45rem;
margin-top: .75rem;
}
.site-footer__instagram-links a {
display: grid;
grid-template-columns: 3.5rem minmax(0, 1fr);
gap: .55rem;
align-items: baseline;
color: #d9d1d5;
font-size: .68rem;
text-decoration: none;
}
.site-footer__instagram-links a span {
color: #8f858b;
font-size: .6rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.site-footer__instagram-links a strong {
font-weight: 500;
}
.site-footer__instagram-links a:hover,
.site-footer__instagram-links a:focus-visible {
color: #ffffff;
}
/* 0.3.103 — Contact page: use the same compact inner-page hero rail as the rest of the site. */
.contact-page.site-main {
padding-block: 0 !important;
}
.contact-page .contact-hero--standalone {
padding-block: .75rem !important;
}
.contact-page .contact-hero__standalone-inner {
min-height: var(--jenifer-inner-hero-height) !important;
max-width: var(--container-max);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.contact-page .contact-hero__standalone-inner .eyebrow {
margin: 0 !important;
justify-content: flex-start !important;
}
.contact-page .contact-hero__standalone-inner h1 {
max-width: 18ch;
margin: .35rem 0 0 !important;
font-size: var(--jenifer-inner-hero-h1) !important;
line-height: .98 !important;
}
.contact-page .contact-hero__standalone-inner > p:not(.eyebrow) {
max-width: 43rem;
margin: .34rem 0 0 !important;
font-size: .94rem !important;
line-height: 1.28 !important;
}
.contact-page .contact-hero__standalone-inner .contact-quote {
margin-top: .42rem !important;
font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
font-size: clamp(1.05rem, 1.55vw, 1.35rem) !important;
font-style: italic;
line-height: 1.15 !important;
}
.contact-page .contact-details-section {
padding-top: clamp(1.5rem, 2.4vw, 2rem) !important;
}
@media (max-width: 43.99rem) {
.contact-page .contact-hero--standalone {
padding-block: .9rem !important;
}
.contact-page .contact-hero__standalone-inner {
min-height: 0 !important;
}
.contact-page .contact-hero__standalone-inner h1 {
font-size: var(--jenifer-inner-hero-h1) !important;
}
.contact-page .contact-hero__standalone-inner > p:not(.eyebrow) {
font-size: .92rem !important;
}
}
/* 0.3.104 — Contact page hero centered to avoid collision with header logo and improve mobile balance. */
.contact-page .contact-hero--standalone {
padding-block: .95rem !important;
}
.contact-page .contact-hero__standalone-inner {
align-items: center !important;
text-align: center !important;
padding-top: .35rem;
}
.contact-page .contact-hero__standalone-inner .eyebrow {
justify-content: center !important;
}
.contact-page .contact-hero__standalone-inner h1 {
max-width: 13ch;
margin-inline: auto !important;
}
.contact-page .contact-hero__standalone-inner > p:not(.eyebrow) {
max-width: 36rem;
margin-inline: auto !important;
}
.contact-page .contact-hero__standalone-inner .contact-quote {
max-width: 34rem;
margin-inline: auto !important;
}
@media (max-width: 43.99rem) {
.contact-page .contact-hero--standalone {
padding-block: 1rem !important;
}
.contact-page .contact-hero__standalone-inner {
padding-top: 0;
}
.contact-page .contact-hero__standalone-inner h1,
.contact-page .contact-hero__standalone-inner > p:not(.eyebrow),
.contact-page .contact-hero__standalone-inner .contact-quote {
max-width: 100%;
}
}
/* 0.3.105 — legal release: portfolio transparency, referral terms, legal hub. */
.portfolio-reference-transparency {
max-width: 58rem;
margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
padding: clamp(1.25rem, 2.4vw, 1.8rem);
border: 1px solid var(--color-border);
border-top: 3px solid #111111;
border-radius: 1rem;
background: rgba(255,255,255,.68);
text-align: left;
}
.portfolio-reference-transparency .eyebrow { margin: 0 0 .6rem; }
.portfolio-reference-transparency h3 { margin: 0 0 .85rem; font-family: var(--font-serif); font-size: clamp(1.55rem, 2.6vw, 2.15rem); font-weight: 400; }
.portfolio-reference-transparency p { margin: .55rem 0 0; color: var(--color-muted); font-size: .86rem; line-height: 1.62; }
.referral-legal-section { margin-top: clamp(1.5rem, 3vw, 2.6rem); }
.referral-legal-details { border: 1px solid var(--color-border); border-top: 3px solid #111111; border-radius: 1rem; background: rgba(255,255,255,.78); overflow: clip; }
.referral-legal-details summary { cursor: pointer; list-style: none; padding: clamp(1.15rem, 2.4vw, 1.7rem); display: grid; gap: .2rem; }
.referral-legal-details summary::-webkit-details-marker { display: none; }
.referral-legal-details summary span { font-family: var(--font-serif); font-size: clamp(1.55rem, 2.8vw, 2.25rem); }
.referral-legal-details summary small { color: var(--color-muted); font-size: .8rem; }
.referral-legal-details[open] summary { border-bottom: 1px solid var(--color-border); }
.referral-legal-details__body { padding: clamp(1.15rem, 2.5vw, 1.8rem); }
.referral-legal-details__tip { padding: 1rem; border-radius: .8rem; background: var(--color-primary-soft); }
.legal-hub-page.site-main { padding-block: 0; }
.legal-hub-hero { text-align: center; }
.legal-hub-hero__inner { min-height: var(--jenifer-inner-hero-height); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.legal-hub-hero .eyebrow { justify-content: center; }
.legal-hub-hero h1 { margin: .35rem 0 0; font-size: var(--jenifer-inner-hero-h1); }
.legal-hub-hero p:not(.eyebrow) { max-width: 44rem; margin: .6rem auto 0; color: var(--color-muted); }
.legal-hub-nav { padding-block: 1.2rem; }
.legal-hub-nav__grid { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.legal-hub-nav__grid a { padding: .6rem .8rem; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text); font-size: .76rem; text-decoration: none; background: #fff; }
.legal-hub-nav__grid a:hover { border-color: #111; }
.legal-hub-documents { display: grid; gap: 1rem; max-width: 74rem; }
.legal-document { scroll-margin-top: 7rem; border: 1px solid var(--color-border); border-top: 3px solid #111111; border-radius: 1rem; background: #fff; overflow: clip; }
.legal-document summary { cursor: pointer; list-style: none; display: grid; gap: .18rem; padding: clamp(1rem, 2.2vw, 1.55rem); }
.legal-document summary::-webkit-details-marker { display: none; }
.legal-document summary span { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.7vw, 2.15rem); line-height: 1.05; }
.legal-document summary small { color: var(--color-muted); font-size: .78rem; }
.legal-document[open] summary { border-bottom: 1px solid var(--color-border); background: var(--color-primary-soft); }
.legal-richtext { padding: clamp(1.15rem, 2.5vw, 2rem); max-width: 66rem; }
.legal-richtext h2 { margin: 0 0 1rem; font-family: var(--font-serif); font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 400; }
.legal-richtext h2:not(:first-child) { margin-top: 2.4rem; }
.legal-richtext h3 { margin: 1.45rem 0 .45rem; font-size: .9rem; font-weight: 700; letter-spacing: .015em; }
.legal-richtext p, .legal-richtext li { font-size: .84rem; line-height: 1.68; }
.legal-richtext p { margin: .55rem 0; }
.legal-richtext ul, .legal-richtext ol { margin: .5rem 0 .8rem 1.2rem; padding: 0; }
.legal-richtext li + li { margin-top: .35rem; }
.legal-richtext hr { margin: 2.25rem 0; border: 0; border-top: 1px solid var(--color-border); }
.legal-note { padding: .85rem 1rem; border-radius: .75rem; background: var(--color-primary-soft); }
.legal-table-wrap { overflow-x: auto; margin: 1rem 0; }
.legal-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.legal-table th, .legal-table td { padding: .7rem; border: 1px solid var(--color-border); text-align: left; vertical-align: top; font-size: .75rem; line-height: 1.5; }
.legal-table th { background: var(--color-primary-soft); }
.legal-code-list { counter-reset: legalcode; list-style: none; margin-left: 0 !important; }
.legal-code-list li { position: relative; padding-left: 2.4rem; margin-top: .8rem; }
.legal-code-list li::before { counter-increment: legalcode; content: counter(legalcode, decimal-leading-zero); position: absolute; left: 0; top: 0; color: var(--color-primary); font-family: var(--font-serif); font-size: 1.15rem; }
@media (max-width: 43.99rem) {
.legal-hub-hero__inner { min-height: 0; padding-block: 1.3rem; }
.legal-hub-nav__grid { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; }
.legal-hub-nav__grid a { flex: 0 0 auto; }
.legal-richtext { padding: 1rem; }
.referral-legal-details__body { padding: 1rem; }
}
/* 0.3.111 — unified Portfolio card component
* Homepage and /portfolio/ intentionally use the exact same card geometry and
* logo renderer. Do not add contextual image rules for either section.
*/
.portfolio-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.75rem), 18.75rem));
gap: 1.2rem;
justify-content: start;
align-items: stretch;
margin-top: 2rem;
}
.portfolio-cards-grid .portfolio-card {
width: 100%;
max-width: 18.75rem;
margin: 0;
border-radius: .9rem;
}
.portfolio-cards-grid .portfolio-card__image {
display: flex;
width: 100%;
height: 7.75rem;
align-items: center;
justify-content: center;
overflow: hidden;
box-sizing: border-box;
border-radius: .9rem .9rem 0 0;
background: linear-gradient(135deg, #fbe4eb, #fff6f4);
}
.portfolio-cards-grid .portfolio-card__image > img.portfolio-card__logo {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 !important;
padding: 1rem 1.15rem !important;
box-sizing: border-box !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: 50% 50% !important;
transform: none !important;
}
.portfolio-cards-grid .portfolio-card__image:hover > img.portfolio-card__logo {
transform: none !important;
}
.portfolio-cards-grid .portfolio-card__placeholder {
width: 100%;
height: 100%;
min-height: 0;
aspect-ratio: auto;
}
/* Neutralise legacy contextual differences between homepage and Portfolio. */
.home-projects .portfolio-card__image img,
.portfolio-reference-projects .portfolio-card__image img,
.portfolio-grid .portfolio-card__image img {
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: center !important;
}
@media (max-width: 43.99rem) {
.portfolio-cards-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
.portfolio-cards-grid .portfolio-card {
width: 100%;
max-width: 18.75rem;
}
}
/* 0.3.112 — Portfolio detail refinement.
Keep the approved hero composition, but make facts readable as full-width rows,
keep the project CTA left-aligned, reduce the hero visual and remove the old gallery rail. */
.portfolio-single__hero-content {
min-width: 0;
}
.portfolio-single__facts {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
width: 100%;
margin: 1.35rem 0 1.1rem;
text-align: left;
}
.portfolio-single__facts > div {
display: grid !important;
grid-template-columns: minmax(5.25rem, 7rem) minmax(0, 1fr) !important;
gap: 1rem;
align-items: start;
width: 100%;
padding: .72rem 0 !important;
border-top: 1px solid rgba(17, 17, 17, .16) !important;
}
.portfolio-single__facts > div:last-child {
border-bottom: 1px solid rgba(17, 17, 17, .16);
}
.portfolio-single__facts dt,
.portfolio-single__facts dd {
text-align: left;
}
.portfolio-single__facts dd {
line-height: 1.55;
}
.portfolio-single__hero-content > .button {
display: table;
margin: .25rem 0 0 !important;
}
.portfolio-single__main-image {
width: min(100%, 28.5rem);
max-width: 28.5rem !important;
margin-inline: auto;
background: #fff;
}
.portfolio-single__image-link {
display: block;
width: 100%;
cursor: zoom-in;
}
.portfolio-single__main-image .portfolio-single__image-link img,
.portfolio-single__main-image > img {
display: block;
width: 100%;
height: clamp(10rem, 14vw, 11.5rem) !important;
max-height: 11.5rem !important;
object-fit: contain !important;
object-position: center !important;
background: #fff;
}
.portfolio-single__story article {
border-color: #111111 !important;
}
.portfolio-single__story h2 {
color: #111111 !important;
}
@media (max-width: 69.99rem) {
.portfolio-single__main-image {
width: min(100%, 27rem);
}
}
@media (max-width: 43.99rem) {
.portfolio-single__facts > div {
grid-template-columns: 5.25rem minmax(0, 1fr) !important;
gap: .75rem;
}
.portfolio-single__main-image {
width: 100%;
}
.portfolio-single__main-image .portfolio-single__image-link img,
.portfolio-single__main-image > img {
height: 10.5rem !important;
}
}
/* 0.3.113 — Portfolio detail aligned with the visual language of the rest of the site. */
.portfolio-single__hero .eyebrow {
display: inline-flex;
margin: 0 auto .4rem;
}
.portfolio-single__hero-content > .button {
display: inline-flex;
margin: .45rem auto 0 !important;
}
/* The case-study columns use the same simple top-rule rhythm as Services / How I work. */
.portfolio-single__story-grid {
gap: clamp(1.35rem, 2.4vw, 2.25rem) !important;
}
.portfolio-single__story article {
padding: 1.25rem 0 0 !important;
border: 0 !important;
border-top: 1px solid #111111 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.portfolio-single__story h2 {
color: #111111 !important;
}
/* Hero image opens in an in-page modal instead of navigating away. */
.portfolio-single__image-button {
display: block;
width: 100%;
padding: 0;
border: 0;
border-radius: inherit;
background: transparent;
cursor: zoom-in;
appearance: none;
}
.portfolio-single__main-image .portfolio-single__image-button img {
display: block;
width: 100%;
height: clamp(10rem, 14vw, 11.5rem) !important;
max-height: 11.5rem !important;
object-fit: contain !important;
object-position: center !important;
background: #fff;
}
.portfolio-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
display: grid;
place-items: center;
padding: clamp(1rem, 3vw, 2.5rem);
opacity: 0;
visibility: hidden;
transition: opacity .2s ease, visibility .2s ease;
}
.portfolio-lightbox.is-open {
opacity: 1;
visibility: visible;
}
.portfolio-lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(17, 17, 17, .78);
backdrop-filter: blur(5px);
}
.portfolio-lightbox__dialog {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: min(92vw, 72rem);
max-height: 88vh;
padding: clamp(.75rem, 1.5vw, 1.25rem);
border-radius: 1.1rem;
background: #fff;
box-shadow: 0 2rem 5rem rgba(0, 0, 0, .28);
}
.portfolio-lightbox__image {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: calc(88vh - 2.5rem);
object-fit: contain;
}
.portfolio-lightbox__close {
position: absolute;
top: .65rem;
right: .65rem;
z-index: 2;
display: grid;
place-items: center;
width: 2.55rem;
height: 2.55rem;
padding: 0;
border: 0;
border-radius: 999px;
background: #111111;
color: #fff;
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
}
body.is-portfolio-lightbox-open {
overflow: hidden;
}
/* Make the closing project CTA a compact band rather than another tall section. */
.portfolio-single__cta {
padding-block: clamp(.8rem, 1.5vw, 1.2rem) !important;
}
.portfolio-single__cta .site-container {
min-height: 0 !important;
padding: clamp(.85rem, 1.6vw, 1.15rem) clamp(1rem, 2vw, 1.5rem) !important;
}
.portfolio-single__cta h2 {
margin: 0 !important;
font-size: clamp(1.65rem, 2.7vw, 2.55rem) !important;
line-height: 1.05;
}
@media (max-width: 43.99rem) {
.portfolio-single__main-image .portfolio-single__image-button img {
height: 10.5rem !important;
}
.portfolio-single__cta .site-container {
gap: .75rem;
text-align: center;
}
.portfolio-single__cta .button {
justify-self: center;
}
}
/* 0.3.114 — Portfolio story cards: exact card shell used across Services / How I work. */
.portfolio-single__story article {
min-height: 100%;
padding: 1.55rem !important;
border: 1px solid var(--color-border) !important;
border-top: 3px solid #111111 !important;
border-radius: var(--radius-md) !important;
background: rgb(255 255 255 / 91%) !important;
box-shadow: var(--shadow-card) !important;
}
@media (max-width: 43.99rem) {
.portfolio-single__story article {
padding: 1.35rem !important;
}
}
/* 0.3.115 — Portfolio & Reference heading system + gallery-driven case-study hero. */
/* The page hero follows the same compact inner-page heading rhythm as the rest of the site. */
.portfolio-reference-hero {
padding-top: .75rem !important;
padding-bottom: .75rem !important;
}
.portfolio-reference-hero__inner {
min-height: var(--jenifer-inner-hero-height) !important;
}
.portfolio-reference-hero .eyebrow {
font-size: .72rem !important;
font-weight: 800 !important;
letter-spacing: .12em !important;
}
.portfolio-reference-hero h1 {
max-width: 18ch;
margin-top: .35rem !important;
font-size: var(--jenifer-inner-hero-h1) !important;
line-height: .98 !important;
}
.portfolio-reference-hero__lead {
max-width: 42rem;
margin: .45rem auto 0 !important;
font-size: var(--jenifer-inner-hero-lead) !important;
line-height: 1.16 !important;
}
/* Section headings use the same left-aligned eyebrow + serif headline system as homepage sections. */
.portfolio-reference-section-heading,
.portfolio-reference-page .portfolio-archive__references {
text-align: left !important;
}
.portfolio-reference-section-heading > .eyebrow,
.portfolio-reference-page .portfolio-archive__references > .eyebrow {
display: inline-flex;
justify-content: flex-start !important;
width: auto;
margin-inline: 0 !important;
}
.portfolio-reference-section-heading h2,
.portfolio-reference-page .portfolio-archive__references > h2 {
max-width: 24ch !important;
margin: .55rem 0 0 !important;
font-family: "Playfair Display", Georgia, serif !important;
font-size: clamp(2rem, 3.25vw, 3.15rem) !important;
font-weight: 400 !important;
line-height: .98 !important;
text-align: left !important;
}
@media (max-width: 43.99rem) {
.portfolio-reference-hero {
padding-top: .75rem !important;
padding-bottom: .75rem !important;
}
.portfolio-reference-hero__inner {
align-items: center !important;
text-align: center !important;
}
.portfolio-reference-hero .eyebrow {
justify-content: center !important;
}
.portfolio-reference-section-heading h2,
.portfolio-reference-page .portfolio-archive__references > h2 {
max-width: 18ch !important;
font-size: clamp(1.9rem, 9vw, 2.8rem) !important;
}
}
/* 0.3.116 — Portfolio detail hero image is always a portrait 4:5 visual. */
.portfolio-single__main-image {
width: min(100%, 23rem) !important;
max-width: 23rem !important;
aspect-ratio: 4 / 5;
margin-inline: auto;
overflow: hidden;
background: #fff;
}
.portfolio-single__image-button {
width: 100%;
height: 100%;
}
.portfolio-single__main-image .portfolio-single__image-button img {
display: block;
width: 100% !important;
height: 100% !important;
max-height: none !important;
aspect-ratio: 4 / 5 !important;
object-fit: cover !important;
object-position: center !important;
background: #fff;
}
@media (max-width: 69.99rem) {
.portfolio-single__main-image {
width: min(100%, 22rem) !important;
max-width: 22rem !important;
}
}
@media (max-width: 43.99rem) {
.portfolio-single__main-image {
width: min(88vw, 21rem) !important;
max-width: 21rem !important;
}
.portfolio-single__main-image .portfolio-single__image-button img {
height: 100% !important;
max-height: none !important;
}
}
/* 0.3.117 — Portfolio detail media behaves like the logo preview field:
* show the complete gallery image, centered, never cropped. The media field
* is intentionally about as tall as the left hero content from eyebrow to CTA.
*/
.portfolio-single__main-image {
display: flex !important;
width: min(100%, 29rem) !important;
max-width: 29rem !important;
height: clamp(19.5rem, 23vw, 21.5rem) !important;
aspect-ratio: auto !important;
align-items: center;
justify-content: center;
margin-inline: auto;
padding: .8rem !important;
box-sizing: border-box;
overflow: hidden;
background: #fff;
}
.portfolio-single__image-button {
display: flex !important;
width: 100% !important;
height: 100% !important;
align-items: center;
justify-content: center;
}
.portfolio-single__main-image .portfolio-single__image-button img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: 50% 50% !important;
background: transparent !important;
}
@media (max-width: 69.99rem) {
.portfolio-single__main-image {
width: min(100%, 27rem) !important;
max-width: 27rem !important;
height: clamp(18.5rem, 42vw, 21rem) !important;
}
}
@media (max-width: 43.99rem) {
.portfolio-single__main-image {
width: min(92vw, 27rem) !important;
max-width: 27rem !important;
height: clamp(18rem, 78vw, 21rem) !important;
padding: .65rem !important;
}
}
/* 0.3.118 — Corrected Portfolio detail hero media geometry.
* Keep the full gallery visual visible, but give it a portrait-shaped field so
* the image uses the available area instead of becoming a tiny stamp inside a
* wide landscape panel. The field height roughly matches eyebrow → CTA.
*/
.portfolio-single__main-image {
display: flex !important;
width: clamp(16.5rem, 20vw, 18.5rem) !important;
max-width: 18.5rem !important;
height: auto !important;
aspect-ratio: 4 / 5 !important;
align-items: center !important;
justify-content: center !important;
margin-inline: auto !important;
padding: .5rem !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: #fff !important;
}
.portfolio-single__image-button {
display: flex !important;
width: 100% !important;
height: 100% !important;
align-items: center !important;
justify-content: center !important;
}
.portfolio-single__main-image .portfolio-single__image-button img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: 50% 50% !important;
background: transparent !important;
}
@media (max-width: 69.99rem) {
.portfolio-single__main-image {
width: clamp(16rem, 32vw, 18rem) !important;
max-width: 18rem !important;
}
}
@media (max-width: 43.99rem) {
.portfolio-single__main-image {
width: min(82vw, 18rem) !important;
max-width: 18rem !important;
padding: .4rem !important;
}
}
/* 0.3.120 — Portfolio detail hero media: keep the full gallery visual visible,
* scale it large inside a tall frame, and use the same pink accent border as
* the Portfolio / Klient / Rok / Sluzby labels.
*/
.portfolio-single__main-image {
display: flex !important;
width: min(100%, 22rem) !important;
max-width: 22rem !important;
height: 27rem !important;
min-height: 27rem !important;
max-height: none !important;
aspect-ratio: auto !important;
align-items: center !important;
justify-content: center !important;
margin-inline: auto !important;
padding: .55rem !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: #fff !important;
border: 1px solid var(--color-primary) !important;
}
.portfolio-single__image-button {
display: flex !important;
width: 100% !important;
height: 100% !important;
align-items: center !important;
justify-content: center !important;
}
.portfolio-single__main-image .portfolio-single__image-button img,
.portfolio-single__main-image img {
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-width: 100% !important;
max-height: 100% !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: center !important;
background: transparent !important;
}
@media (max-width: 69.99rem) {
.portfolio-single__main-image {
width: min(100%, 21rem) !important;
max-width: 21rem !important;
height: 26rem !important;
min-height: 26rem !important;
max-height: none !important;
}
}
@media (max-width: 43.99rem) {
.portfolio-single__main-image {
width: min(88vw, 20rem) !important;
max-width: 20rem !important;
height: 25rem !important;
min-height: 25rem !important;
max-height: none !important;
padding: .45rem !important;
}
}
/* 0.3.122 — Legal VOP PDF switcher/downloads */
.legal-vop-downloads { display: grid; gap: .75rem; margin: 0 0 2rem; }
.legal-vop-download { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-top: 2px solid #111; background: #fff; }
.legal-vop-download > div { display: grid; gap: .18rem; }
.legal-vop-download strong { color: #111; font-size: 1rem; }
.legal-vop-download span { color: var(--color-muted); font-size: .82rem; }
.legal-vop-download .button { flex: 0 0 auto; min-height: 2.7rem; padding: .7rem 1rem; }
@media (max-width: 43.99rem) { .legal-vop-download { align-items: stretch; flex-direction: column; } .legal-vop-download .button { width: 100%; } }
/* 0.3.125 — Portfolio & reference typography hierarchy.
* The story lead and section headlines use the site's primary serif family
* and intentionally sit below the hero title in visual scale.
*/
.portfolio-reference-story__lead {
font-family: var(--font-serif) !important;
font-size: clamp(1.85rem, 2.7vw, 2.55rem) !important;
font-weight: 400 !important;
line-height: 1.08 !important;
letter-spacing: -.025em !important;
}
.portfolio-reference-section-heading h2,
.portfolio-reference-page .portfolio-archive__references > h2 {
font-family: var(--font-serif) !important;
font-size: clamp(1.8rem, 2.45vw, 2.4rem) !important;
font-weight: 400 !important;
line-height: 1.04 !important;
letter-spacing: -.025em !important;
}
@media (max-width: 43.99rem) {
.portfolio-reference-story__lead {
font-size: clamp(1.65rem, 7vw, 2.05rem) !important;
}
.portfolio-reference-section-heading h2,
.portfolio-reference-page .portfolio-archive__references > h2 {
font-size: clamp(1.65rem, 6.8vw, 2rem) !important;
}
}
/* 0.3.127 — Collaboration page typography hierarchy.
* Keep the hero headline aligned with the standard inner-page hero scale,
* and ensure headings below hero stay clearly smaller than the hero itself.
*/
.redesign-collaboration .collaboration-hero__content h1 {
font-size: var(--jenifer-inner-hero-h1) !important;
line-height: .98 !important;
}
.redesign-collaboration .collaboration-hero__lead {
font-size: var(--jenifer-inner-hero-lead) !important;
line-height: 1.16 !important;
}
.redesign-collaboration .collaboration-hero__content h2,
.redesign-collaboration-cta h2 {
font-family: var(--font-serif) !important;
font-size: clamp(1.8rem, 2.45vw, 2.35rem) !important;
font-weight: 400 !important;
line-height: 1.04 !important;
letter-spacing: -.025em !important;
}
@media (max-width: 43.99rem) {
.redesign-collaboration .collaboration-hero__content h1 {
font-size: clamp(2.35rem, 11vw, 3.35rem) !important;
}
.redesign-collaboration .collaboration-hero__content h2,
.redesign-collaboration-cta h2 {
font-size: clamp(1.65rem, 6.8vw, 2rem) !important;
}
}
/* 0.3.130 — Native e-mail project request form. */
.jenifer-native-lead-form .form-field__optional {
color: var(--color-muted);
font-weight: 500;
}
.jenifer-native-lead-form .contact-form__privacy {
margin: .85rem 0 1.15rem;
color: var(--color-muted);
font-size: .78rem;
line-height: 1.55;
}
.jenifer-native-lead-form .contact-form__privacy a {
color: var(--color-primary);
font-weight: 600;
text-underline-offset: .16em;
}
.jenifer-native-lead-form .contact-form .button {
margin-top: .15rem;
}
/* 0.3.132 — Kraťas-style reviews component for the Jenifer homepage. */
.home-references.redesign-references {
padding-block: clamp(3.2rem, 6vw, 5.6rem);
background: #fffaf9;
}
.home-references.redesign-references > .wp-block-group,
.home-references.redesign-references > .site-container {
text-align: center;
}
.home-references.redesign-references .eyebrow {
display: inline-flex;
justify-content: center;
margin-inline: auto;
}
.home-references.redesign-references h2 {
max-width: 22ch;
margin: .55rem auto 0;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(2rem, 3.3vw, 3.2rem);
font-weight: 400;
line-height: 1.02;
letter-spacing: -.02em;
}
.jenifer-review-intro {
max-width: 47rem;
margin: .95rem auto 0;
color: var(--color-muted);
font-size: .88rem;
line-height: 1.7;
text-align: center;
}
.home-references__grid.jenifer-review-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
margin-top: clamp(1.6rem, 3vw, 2.15rem);
text-align: left;
}
.jenifer-review-source-card,
.home-references .reference-card--home,
.home-references .reference-card--google-placeholder {
min-height: 16.5rem;
padding: 1.45rem;
border: 1px solid rgba(62, 45, 52, .09);
border-radius: 1.15rem;
background: #fff;
box-shadow: 0 .8rem 2.2rem rgba(50, 30, 39, .055);
}
.jenifer-review-source-card {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.jenifer-review-source-card__mark,
.reference-card__avatar {
display: inline-grid;
width: 2.55rem;
height: 2.55rem;
flex: 0 0 2.55rem;
place-items: center;
border-radius: 50%;
background: var(--color-primary-soft);
color: var(--color-primary);
font-family: "Montserrat", Arial, sans-serif;
font-size: 1rem;
font-weight: 700;
}
.jenifer-review-source-card.is-placeholder .jenifer-review-source-card__mark,
.reference-card__avatar--google {
background: #fff;
border: 1px solid #e8e2e5;
color: #4285f4;
}
.jenifer-review-source-card > div:not(.jenifer-review-source-card__mark) {
margin-top: 1.05rem;
}
.jenifer-review-source-card strong,
.jenifer-review-source-card span {
display: block;
}
.jenifer-review-source-card strong {
font-size: .88rem;
font-weight: 700;
}
.jenifer-review-source-card span {
margin-top: .16rem;
color: var(--color-muted);
font-size: .72rem;
line-height: 1.45;
}
.jenifer-review-source-card > p {
margin: auto 0 0;
color: #655a60;
font-size: .78rem;
line-height: 1.6;
}
.home-references .reference-card {
display: flex;
flex-direction: column;
position: relative;
}
.home-references .reference-card__quote {
display: none;
}
.home-references .reference-card__rating {
margin: 0;
color: #ef1493;
font-size: .9rem;
letter-spacing: .14em;
}
.home-references .reference-card blockquote {
margin: .95rem 0 1.25rem;
color: #40373c;
font-family: "Montserrat", Arial, sans-serif;
font-size: .82rem;
font-style: normal;
font-weight: 400;
line-height: 1.7;
}
.home-references .reference-card footer {
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid rgba(62, 45, 52, .08);
}
.home-references .reference-card footer img,
.home-references .reference-card__media {
width: 2.55rem;
height: 2.55rem;
padding: 0;
border-radius: 50%;
object-fit: cover;
}
.home-references .reference-card__media--logo {
padding: .25rem;
border: 1px solid rgba(62, 45, 52, .08);
background: #fff;
object-fit: contain;
}
.home-references .reference-card footer strong {
color: var(--color-text);
font-size: .76rem;
font-weight: 700;
}
.home-references .reference-card footer span {
margin-top: .12rem;
color: var(--color-muted);
font-size: .68rem;
}
.home-references .reference-card--google-placeholder {
opacity: .78;
}
@media (max-width: 74rem) {
.home-references__grid.jenifer-review-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 43.99rem) {
.home-references.redesign-references {
padding-block: 2.5rem;
}
.home-references.redesign-references h2 {
font-size: clamp(1.9rem, 9vw, 2.6rem);
}
.home-references__grid.jenifer-review-grid {
grid-template-columns: 1fr;
gap: .8rem;
}
.jenifer-review-source-card,
.home-references .reference-card--home,
.home-references .reference-card--google-placeholder {
min-height: 0;
padding: 1.25rem;
border-radius: 1rem;
}
.jenifer-review-source-card > p {
margin-top: 1.2rem;
}
}
/* 0.3.133 — Match Kraťas review structure: summary + verification + exactly three cards. */
.home-references__grid.jenifer-review-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.jenifer-review-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
margin-top: 1.45rem;
padding: 1.15rem 1.3rem;
border: 1px solid rgba(62, 45, 52, .13);
background: #fff;
text-align: left;
}
.jenifer-review-summary__identity {
display: flex;
align-items: center;
gap: .85rem;
min-width: 0;
}
.jenifer-review-summary__mark {
display: inline-grid;
width: 2.45rem;
height: 2.45rem;
flex: 0 0 2.45rem;
place-items: center;
border: 1px solid rgba(239, 20, 147, .18);
border-radius: 50%;
background: #fff8fc;
color: var(--color-primary);
font-family: "Montserrat", Arial, sans-serif;
font-size: .82rem;
font-weight: 700;
}
.jenifer-review-summary__identity strong,
.jenifer-review-summary__identity span {
display: block;
}
.jenifer-review-summary__identity strong {
color: var(--color-text);
font-size: .82rem;
font-weight: 700;
}
.jenifer-review-summary__identity span,
.jenifer-review-summary__score {
color: var(--color-muted);
font-size: .7rem;
line-height: 1.45;
}
.jenifer-review-summary__identity span {
margin-top: .12rem;
}
.jenifer-review-summary__score {
flex: 0 0 auto;
white-space: nowrap;
}
.jenifer-review-verification {
margin-top: .85rem;
border: 1px solid rgba(62, 45, 52, .13);
background: #fff;
text-align: left;
}
.jenifer-review-verification summary {
position: relative;
padding: .95rem 1.3rem;
cursor: pointer;
list-style: none;
color: var(--color-text);
font-size: .8rem;
font-weight: 700;
}
.jenifer-review-verification summary::-webkit-details-marker {
display: none;
}
.jenifer-review-verification summary::after {
content: '+';
position: absolute;
right: 1.3rem;
top: 50%;
transform: translateY(-50%);
color: var(--color-muted);
font-size: 1rem;
font-weight: 400;
}
.jenifer-review-verification[open] summary::after {
content: '−';
}
.jenifer-review-verification p {
max-width: 62rem;
margin: 0;
padding: 0 1.3rem 1.15rem;
color: var(--color-muted);
font-size: .76rem;
line-height: 1.65;
}
@media (max-width: 74rem) {
.home-references__grid.jenifer-review-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 55rem) {
.home-references__grid.jenifer-review-grid {
grid-template-columns: 1fr;
}
.jenifer-review-summary {
align-items: flex-start;
flex-direction: column;
gap: .75rem;
}
.jenifer-review-summary__score {
padding-left: 3.3rem;
white-space: normal;
}
}
/* 0.3.134 — Manually shared client review form (/hodnoceni/). */
.review-submit-page {
background: var(--color-surface, #f6f3ef);
}
.review-submit-hero {
padding-bottom: clamp(2rem, 4vw, 4rem);
}
.review-submit-hero__inner,
.review-submit-section__inner {
max-width: 980px;
}
.review-submit-hero h1 {
max-width: 760px;
margin-bottom: 1.25rem;
font-size: clamp(2.6rem, 4vw, 4rem);
line-height: 1.02;
}
.review-submit-hero__lead {
max-width: 760px;
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
line-height: 1.65;
}
.review-submit-section {
padding-top: clamp(2rem, 4vw, 4rem);
}
.jenifer-review-form {
max-width: 900px;
}
.review-form {
background: #fff;
border: 1px solid rgba(17, 17, 17, .12);
padding: clamp(1.25rem, 3vw, 2.5rem);
}
.review-form .form-field small {
display: block;
margin-top: .45rem;
font-size: .82rem;
opacity: .7;
}
.review-rating-fieldset {
border: 0;
padding: 0;
margin: 0;
}
.review-rating-fieldset legend {
font-weight: 700;
margin-bottom: .85rem;
}
.review-rating-options {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: .55rem;
}
.review-rating-options label {
position: relative;
display: flex;
min-height: 72px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: .15rem;
border: 1px solid rgba(17, 17, 17, .14);
background: #fff;
cursor: pointer;
padding: .6rem;
transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.review-rating-options label:hover {
transform: translateY(-1px);
border-color: rgba(17, 17, 17, .35);
}
.review-rating-options input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.review-rating-options span {
font-size: .92rem;
letter-spacing: .05em;
}
.review-rating-options small {
margin: 0;
font-size: .72rem;
}
.review-rating-options label:has(input:checked) {
border-color: #111;
background: #f4eee8;
}
.review-rating-options label:has(input:focus-visible) {
outline: 2px solid #111;
outline-offset: 2px;
}
.review-consent-field label {
display: flex;
align-items: flex-start;
gap: .7rem;
font-weight: 400;
line-height: 1.5;
}
.review-consent-field input {
margin-top: .25rem;
flex: 0 0 auto;
}
@media (max-width: 760px) {
.review-rating-options {
grid-template-columns: 1fr;
}
.review-rating-options label {
min-height: 54px;
flex-direction: row;
justify-content: space-between;
}
}
/* 0.3.139 — Photography & visual content service. Real-image-first presentation. */
.gutenberg-discipline a {
color: inherit;
text-decoration: none;
}
.gutenberg-discipline--photography::before { content: "▣"; }
.gutenberg-discipline--photography a:hover { color: var(--color-primary); }
.service-feature__description {
margin-top: 1.25rem;
color: #51484d;
font-size: .88rem;
line-height: 1.7;
}
.service-feature__highlight {
margin-top: 1rem;
font-size: .88rem;
line-height: 1.6;
}
.redesign-service-grid .service-feature:nth-child(7) { grid-column: 2; }
.photography-page { overflow: clip; background: #fff; }
.photography-page .section { padding-block: clamp(4rem, 7vw, 7.5rem); }
.photography-page .section--surface { background: linear-gradient(180deg, #fffaf9 0%, #fff 100%); }
.photography-hero { padding-top: clamp(3.5rem, 6vw, 6.5rem) !important; background: #fff; }
.photography-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .75fr);
gap: clamp(3rem, 7vw, 7rem);
align-items: center;
}
.photography-hero__grid--without-image { grid-template-columns: minmax(0, 54rem); }
.photography-hero__content { max-width: 47rem; }
.photography-hero__content h1 {
max-width: 44rem;
margin: .7rem 0 1.7rem;
font-size: clamp(3.3rem, 6.7vw, 6.4rem);
line-height: .94;
}
.photography-hero__copy { max-width: 42rem; }
.photography-hero__copy p { margin: 0 0 .9rem; font-size: clamp(.98rem, 1.25vw, 1.08rem); line-height: 1.72; }
.photography-hero__content .button { margin-top: 1.2rem; }
.photography-hero__visual { min-width: 0; }
.photography-hero__visual .photo-item { margin: 0; }
.photography-hero__visual img { width: 100%; aspect-ratio: .82; object-fit: cover; display: block; }
.photography-emphasis {
font-family: var(--font-serif);
font-size: clamp(1.28rem, 2vw, 1.7rem) !important;
line-height: 1.35 !important;
}
.photography-section-heading { max-width: 58rem; margin-bottom: clamp(2.2rem, 4vw, 4rem); }
.photography-section-heading h2,
.photography-copy-grid h2,
.photography-moments__content h2,
.photography-final-cta h2 {
margin-top: .65rem;
font-size: clamp(2.6rem, 5vw, 5rem);
line-height: 1;
}
.photography-type-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.15rem;
}
.photography-type-card {
display: grid;
grid-template-columns: minmax(12rem, .9fr) minmax(0, 1.1fr);
min-height: 25rem;
border: 1px solid var(--color-border);
background: #fff;
overflow: hidden;
}
.photography-type-card.no-photo { grid-template-columns: 1fr; min-height: auto; }
.photography-type-card__media { min-height: 100%; }
.photography-type-card__media .photo-item,
.photography-type-card__media .photo-item__open,
.photography-type-card__media img { width: 100%; height: 100%; }
.photography-type-card__media img { display: block; object-fit: cover; min-height: 25rem; }
.photography-type-card__content { padding: clamp(1.5rem, 3vw, 2.5rem); align-self: center; }
.photography-type-card__content h3 { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.35; letter-spacing: .02em; }
.photography-type-card__content p { margin: .75rem 0 0; color: #51484d; font-size: .88rem; line-height: 1.68; }
.photography-gallery { background: #fff; }
.photography-section-heading--gallery { margin-bottom: 1.7rem; }
.photography-gallery__lead { margin: .9rem 0 0; font-family: var(--font-serif); font-size: clamp(1.6rem, 2.7vw, 2.5rem); }
.photo-gallery-filters {
display: flex;
flex-wrap: wrap;
gap: .55rem;
margin-bottom: 2rem;
}
.photo-gallery-filter {
appearance: none;
border: 1px solid var(--color-border);
background: #fff;
padding: .68rem .95rem;
font: inherit;
font-size: .72rem;
font-weight: 700;
letter-spacing: .02em;
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.photo-gallery-filter:hover,
.photo-gallery-filter.is-active { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.photo-masonry {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-auto-rows: 8px;
grid-auto-flow: dense;
gap: .9rem;
}
.photo-item {
position: relative;
grid-column: span 4;
margin: 0;
background: #f6f3ef;
}
.photo-item--wide { grid-column: span 8; }
.photo-item--portrait { grid-column: span 4; }
.photo-item[hidden] { display: none !important; }
.photo-item__open {
display: block;
width: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: zoom-in;
}
.photo-item img { display: block; width: 100%; height: auto; }
.photo-item__open img { transition: transform .3s ease, filter .3s ease; }
.photo-item__open:hover img { transform: scale(1.012); filter: brightness(.97); }
.photo-item figcaption { padding: .72rem .8rem .85rem; color: var(--color-muted); font-size: .72rem; line-height: 1.45; background: #fff; }
.photo-masonry--portfolio,
.photo-masonry--portfolio-teaser { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.photo-masonry--spaces { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 2.2rem; }
.photo-masonry--spaces .photo-item { grid-column: span 3; }
.photo-masonry--spaces .photo-item--wide { grid-column: span 6; }
.photo-gallery-admin-note {
padding: 1.25rem 1.4rem;
border: 1px dashed var(--color-primary);
background: var(--color-primary-soft, #fff1f7);
font-size: .8rem;
line-height: 1.55;
}
.photo-gallery-admin-note--hero { align-self: stretch; display: grid; place-items: center; min-height: 25rem; }
.photography-copy-grid {
display: grid;
grid-template-columns: minmax(15rem, .78fr) minmax(0, 1.22fr);
gap: clamp(3rem, 8vw, 8rem);
align-items: start;
}
.photography-prose { max-width: 43rem; }
.photography-prose p { margin: 0 0 1rem; line-height: 1.72; }
.photography-prose .button { margin-top: 1rem; }
.photography-moments__grid {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(19rem, .7fr);
gap: clamp(2.5rem, 6vw, 6rem);
align-items: center;
}
.photography-moments__grid--without-image { grid-template-columns: minmax(0, 48rem); }
.photography-moments__media img { display: block; width: 100%; max-height: 48rem; object-fit: cover; }
.photography-moments__content p { margin: .8rem 0 0; line-height: 1.7; }
.photography-brand-list {
margin: 1.5rem 0;
padding: 0;
list-style: none;
}
.photography-brand-list li { position: relative; margin: .55rem 0; padding-left: 1rem; line-height: 1.55; }
.photography-brand-list li::before { content: ''; position: absolute; left: 0; top: .68em; width: .32rem; height: .32rem; border-radius: 50%; background: var(--color-primary); }
.photography-spaces__uses { color: var(--color-muted); font-size: .84rem; }
.photography-inquiry__inner { max-width: 1040px; }
.photo-inquiry-form-wrap { max-width: 980px; }
.photo-inquiry-form { padding: clamp(1.4rem, 3vw, 2.6rem); border: 1px solid var(--color-border); background: #fff; }
.photography-final-cta { background: #111; color: #fff; }
.photography-final-cta__inner { max-width: 900px; text-align: center; }
.photography-final-cta .eyebrow { color: var(--color-primary); justify-content: center; }
.photography-final-cta h2 { color: #fff; }
.photography-final-cta p { max-width: 46rem; margin: 1rem auto 0; color: rgba(255,255,255,.76); }
.photography-final-cta .photography-emphasis { color: #fff; }
.photography-final-cta .button { margin-top: 1.6rem; }
.photo-lightbox {
position: fixed;
inset: 0;
z-index: 999999;
display: grid;
place-items: center;
padding: clamp(1rem, 3vw, 2.5rem);
background: rgba(5, 5, 5, .94);
opacity: 0;
transition: opacity .18s ease;
}
.photo-lightbox.is-open { opacity: 1; }
.photo-lightbox__inner { max-width: min(94vw, 1500px); max-height: 90vh; text-align: center; }
.photo-lightbox__inner img { display: block; max-width: 100%; max-height: 84vh; width: auto; height: auto; margin-inline: auto; object-fit: contain; }
.photo-lightbox__inner p { margin: .8rem auto 0; color: rgba(255,255,255,.78); font-size: .8rem; }
.photo-lightbox__close {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 2;
width: 2.8rem;
height: 2.8rem;
border: 1px solid rgba(255,255,255,.45);
border-radius: 50%;
background: rgba(0,0,0,.35);
color: #fff;
font-size: 1.8rem;
line-height: 1;
cursor: pointer;
}
.photo-lightbox-open { overflow: hidden; }
/* Photography presentation inside Portfolio & reference. */
.portfolio-photography { border-top: 1px solid var(--color-border); }
.portfolio-photography__inner { display: grid; gap: 2rem; }
.portfolio-photography__heading { max-width: 52rem; }
.portfolio-photography__heading > p:last-child { margin-top: 1rem; max-width: 45rem; line-height: 1.65; color: var(--color-muted); }
.portfolio-photography__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.portfolio-photography-filter-view { padding-top: 1rem; }
.portfolio-photography-filter-view__head { max-width: 48rem; margin-bottom: 1.8rem; }
.portfolio-photography-filter-view__head h3 { margin: .55rem 0 .75rem; font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 400; }
.portfolio-photography-filter-view__head p:last-child { color: var(--color-muted); line-height: 1.65; }
.portfolio-photography-filter-view__cta { margin-top: 1.6rem; }
.portfolio-photography-filter-view__empty { padding: 2rem 0; color: var(--color-muted); }
@media (max-width: 1020px) {
.redesign-service-grid .service-feature:nth-child(7) { grid-column: auto; }
.photography-hero__grid,
.photography-moments__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.photography-type-card { grid-template-columns: 1fr; }
.photography-type-card__media img { min-height: 18rem; max-height: 24rem; }
}
@media (max-width: 760px) {
.photography-page .section { padding-block: 3.4rem; }
.photography-hero__grid,
.photography-moments__grid,
.photography-copy-grid { grid-template-columns: 1fr; }
.photography-hero__visual { order: -1; }
.photography-hero__visual img { aspect-ratio: 1 / 1.08; }
.photography-hero__content h1 { font-size: clamp(2.8rem, 13vw, 4.4rem); }
.photography-type-grid { grid-template-columns: 1fr; }
.photo-masonry,
.photo-masonry--portfolio,
.photo-masonry--portfolio-teaser,
.photo-masonry--spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.photo-masonry .photo-item,
.photo-masonry--portfolio .photo-item,
.photo-masonry--portfolio-teaser .photo-item,
.photo-masonry--spaces .photo-item { grid-column: span 1; }
.photo-masonry .photo-item--wide,
.photo-masonry--portfolio .photo-item--wide,
.photo-masonry--portfolio-teaser .photo-item--wide,
.photo-masonry--spaces .photo-item--wide { grid-column: span 2; }
.photo-gallery-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; }
.photo-gallery-filter { flex: 0 0 auto; }
.photography-final-cta__inner { text-align: left; }
.photography-final-cta .eyebrow { justify-content: flex-start; }
.photography-final-cta p { margin-left: 0; }
}
@media (max-width: 480px) {
.photo-masonry,
.photo-masonry--portfolio,
.photo-masonry--portfolio-teaser,
.photo-masonry--spaces { grid-template-columns: 1fr; }
.photo-masonry .photo-item,
.photo-masonry--portfolio .photo-item,
.photo-masonry--portfolio-teaser .photo-item,
.photo-masonry--spaces .photo-item,
.photo-masonry .photo-item--wide,
.photo-masonry--portfolio .photo-item--wide,
.photo-masonry--portfolio-teaser .photo-item--wide,
.photo-masonry--spaces .photo-item--wide { grid-column: 1; }
}
/* 0.3.141 — Photography page scale refinement.
* Keep the photography landing page editorial and image-led without oversized typography.
*/
.photography-page .section {
padding-block: clamp(2.75rem, 4.25vw, 4.75rem);
}
.photography-hero {
padding-top: clamp(2.4rem, 3.8vw, 4rem) !important;
}
.photography-hero__grid {
gap: clamp(2rem, 4.5vw, 4.5rem);
}
.photography-hero__content {
max-width: 42rem;
}
.photography-hero__content h1 {
max-width: 40rem;
margin: .55rem 0 1.3rem;
font-size: clamp(2.65rem, 4.6vw, 4.45rem);
line-height: .98;
}
.photography-hero__copy {
max-width: 39rem;
}
.photography-hero__copy p {
margin-bottom: .72rem;
font-size: clamp(.92rem, 1vw, 1rem);
line-height: 1.66;
}
.photography-hero__content .button {
margin-top: .9rem;
}
.photography-emphasis {
font-size: clamp(1.08rem, 1.55vw, 1.42rem) !important;
line-height: 1.4 !important;
}
.photography-section-heading {
max-width: 50rem;
margin-bottom: clamp(1.5rem, 2.6vw, 2.6rem);
}
.photography-section-heading h2,
.photography-copy-grid h2,
.photography-moments__content h2,
.photography-final-cta h2 {
margin-top: .5rem;
font-size: clamp(2rem, 3.35vw, 3.45rem);
line-height: 1.04;
}
.photography-gallery__lead {
margin-top: .65rem;
font-size: clamp(1.3rem, 2vw, 1.9rem);
}
.photography-type-grid {
gap: .9rem;
}
.photography-type-card {
grid-template-columns: minmax(11rem, .85fr) minmax(0, 1.15fr);
min-height: 20rem;
}
.photography-type-card__media img {
min-height: 20rem;
}
.photography-type-card__content {
padding: clamp(1.2rem, 2.1vw, 1.9rem);
}
.photography-type-card__content h3 {
margin-bottom: .8rem;
font-size: .92rem;
}
.photography-type-card__content p {
margin-top: .55rem;
font-size: .84rem;
line-height: 1.62;
}
.photo-gallery-filters {
margin-bottom: 1.4rem;
}
.photo-gallery-filter {
padding: .58rem .82rem;
font-size: .68rem;
}
.photography-copy-grid {
grid-template-columns: minmax(14rem, .72fr) minmax(0, 1.28fr);
gap: clamp(2rem, 4.5vw, 4.75rem);
}
.photography-prose {
max-width: 40rem;
}
.photography-prose p,
.photography-moments__content p {
font-size: .95rem;
line-height: 1.66;
}
.photography-moments__grid {
grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .72fr);
gap: clamp(2rem, 4.2vw, 4.5rem);
}
.photography-moments__media img {
max-height: 38rem;
}
.photography-brand-list {
margin: 1.1rem 0;
}
.photography-brand-list li {
margin: .4rem 0;
font-size: .92rem;
}
.photo-masonry--spaces {
margin-top: 1.5rem;
}
.photography-inquiry__inner {
max-width: 960px;
}
.photo-inquiry-form-wrap {
max-width: 900px;
}
.photo-inquiry-form {
padding: clamp(1.2rem, 2.2vw, 2rem);
}
.photography-final-cta__inner {
max-width: 780px;
}
.photography-final-cta p {
margin-top: .8rem;
font-size: .95rem;
}
.photography-final-cta .button {
margin-top: 1.2rem;
}
@media (max-width: 1020px) {
.photography-type-card__media img {
min-height: 16rem;
max-height: 21rem;
}
}
@media (max-width: 760px) {
.photography-page .section {
padding-block: 2.6rem;
}
.photography-hero {
padding-top: 2.25rem !important;
}
.photography-hero__content h1 {
font-size: clamp(2.35rem, 10.5vw, 3.25rem);
line-height: 1;
}
.photography-section-heading h2,
.photography-copy-grid h2,
.photography-moments__content h2,
.photography-final-cta h2 {
font-size: clamp(1.9rem, 8.5vw, 2.7rem);
line-height: 1.06;
}
.photography-section-heading {
margin-bottom: 1.5rem;
}
.photography-hero__copy p,
.photography-prose p,
.photography-moments__content p {
font-size: .92rem;
}
.photography-emphasis {
font-size: 1.15rem !important;
}
.photography-type-card__content {
padding: 1.15rem;
}
}
/* 0.3.142 — Final photography brief (/foceni/). */
.photography-page--final .section {
padding-block: clamp(2.8rem, 4vw, 4.6rem);
}
.photography-page--final .photography-hero {
padding-top: clamp(2.4rem, 3.5vw, 3.8rem) !important;
}
.photography-page--final .photography-hero__grid {
grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .72fr);
gap: clamp(2rem, 4vw, 4rem);
}
.photography-page--final .photography-hero__content h1 {
max-width: 44rem;
font-size: clamp(2.55rem, 4vw, 3.8rem);
line-height: 1.02;
letter-spacing: -.025em;
}
.photography-page--final .photography-hero__lead {
font-family: var(--font-serif);
font-size: clamp(1.18rem, 1.65vw, 1.48rem) !important;
line-height: 1.42 !important;
}
.photography-hero__actions {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin-top: 1.2rem;
}
.photography-hero__actions .button { margin-top: 0; }
.photography-topic-strip {
border-block: 1px solid var(--color-border);
background: #fff;
}
.photography-topic-strip .site-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .6rem 1rem;
padding-block: .9rem;
font-size: .72rem;
font-weight: 700;
letter-spacing: .075em;
}
.photography-topic-strip span { color: var(--color-primary); }
.photography-page--final .photography-section-heading h2,
.photography-page--final .photography-copy-grid h2,
.photography-page--final .photography-moments__content h2,
.photography-page--final .photography-final-cta h2 {
font-size: clamp(1.95rem, 3vw, 3rem);
line-height: 1.06;
}
.photography-page--final .photography-section-heading {
max-width: 52rem;
margin-bottom: clamp(1.6rem, 2.4vw, 2.5rem);
}
.photography-offer-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.photography-offer-card {
position: relative;
padding: clamp(1.35rem, 2.2vw, 2rem);
border: 1px solid var(--color-border);
background: #fff;
}
.photography-offer-card__number {
margin: 0 0 .8rem;
color: var(--color-primary);
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
}
.photography-offer-card h3 {
margin: 0 0 1rem;
font-size: 1rem;
line-height: 1.35;
}
.photography-offer-card ul {
display: flex;
flex-wrap: wrap;
gap: .42rem .6rem;
margin: 0;
padding: 0;
list-style: none;
}
.photography-offer-card li {
font-size: .82rem;
line-height: 1.45;
color: #51484d;
}
.photography-offer-card li:not(:last-child)::after { content: " ·"; color: var(--color-primary); }
.photography-offer-card__note {
margin: 1.15rem 0 0;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
font-size: .86rem;
line-height: 1.65;
}
.photography-offer-card .text-link { display: inline-block; margin-top: 1rem; }
.photography-pricing-final { background: #fff; }
.photo-price-validity {
display: inline-block;
margin: 1rem 0 1.2rem;
padding: .55rem .75rem;
background: var(--color-primary);
color: #fff;
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.photo-price-group {
padding-block: clamp(2rem, 3vw, 3rem);
border-top: 1px solid var(--color-border);
}
.photo-price-group__head { max-width: 50rem; margin-bottom: 1.3rem; }
.photo-price-group__head h3 { margin: .5rem 0 0; font-family: var(--font-serif); font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 400; line-height: 1.3; }
.photo-price-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .85rem;
}
.photo-price-card {
display: flex;
flex-direction: column;
min-height: 100%;
padding: 1.25rem;
border: 1px solid var(--color-border);
background: #fff;
}
.photo-price-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding-bottom: .85rem;
border-bottom: 1px solid var(--color-border);
}
.photo-price-card h3 {
margin: 0;
font-size: .84rem;
line-height: 1.38;
letter-spacing: .02em;
}
.photo-price-card__price {
flex: 0 0 auto;
margin: 0;
color: var(--color-primary);
font-size: .92rem;
font-weight: 700;
white-space: nowrap;
}
.photo-price-card__meta {
display: flex;
flex-wrap: wrap;
gap: .35rem .8rem;
margin: .8rem 0 0;
font-size: .72rem;
font-weight: 600;
color: #51484d;
}
.photo-price-card > p:not(.photo-price-card__price) {
margin: .85rem 0 0;
font-size: .82rem;
line-height: 1.62;
color: #51484d;
}
.photo-price-card__fineprint {
padding-top: .8rem;
border-top: 1px dashed var(--color-border);
font-size: .72rem !important;
}
.photo-price-card__extra { margin-top: auto !important; padding-top: 1rem; color: #111 !important; }
.photo-price-group__cta { margin-top: 1.25rem; }
.photo-price-group__extra { margin: 1rem 0 0; font-size: .86rem; }
.photo-price-group--other {
display: grid;
grid-template-columns: minmax(15rem, .7fr) minmax(0, 1.3fr);
gap: clamp(2rem, 4vw, 4rem);
}
.photo-price-group--other .photo-price-group__head { margin-bottom: 0; }
.photo-price-group__cta--commercial { padding-top: 0; border-top: 0; }
.photo-sensitive-kids {
display: grid;
grid-template-columns: minmax(14rem, .7fr) minmax(0, 1.3fr);
gap: clamp(2rem, 4vw, 4rem);
margin: 1rem 0 2.2rem;
padding: clamp(1.4rem, 2.5vw, 2.2rem);
background: #fff7fa;
border-left: 3px solid var(--color-primary);
}
.photo-sensitive-kids h3 { margin: .5rem 0 0; font-family: var(--font-serif); font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 400; line-height: 1.25; }
.photo-sensitive-kids p { margin: 0 0 .8rem; font-size: .88rem; line-height: 1.65; }
.photo-sensitive-kids__note { margin-top: 1rem !important; font-weight: 600; }
.photo-info-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .85rem;
}
.photo-info-grid article {
padding: 1.3rem;
border: 1px solid var(--color-border);
background: #fff;
}
.photo-info-grid article:first-child { grid-column: span 2; }
.photo-info-grid h3 { margin: 0 0 .8rem; font-size: .9rem; }
.photo-info-grid p,
.photo-info-grid li { font-size: .82rem; line-height: 1.62; color: #51484d; }
.photo-info-grid ul { margin: 0 0 1rem; padding-left: 1.05rem; }
.photo-info-price { color: var(--color-primary) !important; font-size: 1rem !important; font-weight: 700; }
.photo-process-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: .7rem;
}
.photo-process-grid article {
padding: 1.2rem;
border: 1px solid var(--color-border);
background: #fff;
}
.photo-process-grid span { color: var(--color-primary); font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.photo-process-grid h3 { margin: .7rem 0 .65rem; font-size: .82rem; line-height: 1.35; }
.photo-process-grid p { margin: 0; color: #51484d; font-size: .8rem; line-height: 1.58; }
.photo-conditional[hidden] { display: none !important; }
.photo-conditional fieldset { margin: 0; padding: 1rem; border: 1px solid var(--color-border); }
.photo-conditional legend { padding: 0 .4rem; font-weight: 700; }
.photo-checkbox-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem 1rem; }
.photo-checkbox-grid label { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 400; }
.photo-school-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem; border: 1px solid var(--color-border); }
.photo-form-assurance { margin: .85rem 0 0; font-size: .78rem; color: var(--color-muted); }
.photography-page--final .photography-moments__grid {
grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
gap: clamp(2rem, 4vw, 4rem);
}
.photography-page--final .photography-moments__media img { max-height: 34rem; }
@media (max-width: 1100px) {
.photo-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.photography-page--final .section { padding-block: 2.5rem; }
.photography-page--final .photography-hero__grid,
.photography-page--final .photography-copy-grid,
.photography-page--final .photography-moments__grid,
.photo-price-group--other,
.photo-sensitive-kids { grid-template-columns: 1fr; }
.photography-page--final .photography-hero__content h1 {
font-size: clamp(2.2rem, 10vw, 2.9rem);
line-height: 1.03;
}
.photography-page--final .photography-section-heading h2,
.photography-page--final .photography-copy-grid h2,
.photography-page--final .photography-moments__content h2,
.photography-page--final .photography-final-cta h2 {
font-size: clamp(1.75rem, 7.8vw, 2.4rem);
}
.photography-topic-strip .site-container { justify-content: flex-start; font-size: .66rem; }
.photography-offer-grid,
.photo-price-grid,
.photo-info-grid,
.photo-process-grid,
.photo-checkbox-grid,
.photo-school-grid { grid-template-columns: 1fr; }
.photo-info-grid article:first-child { grid-column: auto; }
.photo-price-card__top { align-items: flex-start; }
.photo-price-card__price { font-size: .88rem; white-space: normal; text-align: right; }
.photo-sensitive-kids { gap: 1rem; }
.photography-hero__actions { flex-direction: column; align-items: flex-start; }
.photography-hero__actions .button { width: 100%; text-align: center; }
}
/* 0.3.144 — Photography page: remove generic site-main top/bottom padding.
* The hero already owns its spacing; stacking both created the large blank gap below the header.
*/
.photography-page.site-main {
padding-block: 0 !important;
}
/* 0.3.145 — Photography: one shared card/grid language across the whole page.
Mirrors the approved Služby / Jak pracuji system: 3/2/1 columns,
black top rule, rounded cards, pink editorial accents and bullet rhythm. */
.photography-page--final .photography-offer-grid,
.photography-page--final .photo-price-grid,
.photography-page--final .photo-info-grid,
.photography-page--final .photo-process-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 1rem !important;
align-items: stretch;
}
.photography-page--final .photography-offer-card,
.photography-page--final .photo-price-card,
.photography-page--final .photo-info-grid article,
.photography-page--final .photo-process-grid article,
.photography-page--final .photo-sensitive-kids {
min-height: 100%;
padding: 1.55rem !important;
border: 1px solid var(--color-border) !important;
border-top: 3px solid #111111 !important;
border-radius: var(--radius-md) !important;
background: rgb(255 255 255 / 91%) !important;
box-shadow: var(--shadow-card) !important;
}
/* CO MŮŽU FOTIT — same hierarchy as service cards. */
.photography-page--final .photography-offer-card__number,
.photography-page--final .photo-process-grid article > span {
display: block;
margin: 0 !important;
color: var(--color-primary) !important;
font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
font-size: 2.4rem !important;
font-style: normal !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
line-height: 1.1 !important;
}
.photography-page--final .photography-offer-card h3,
.photography-page--final .photo-process-grid h3,
.photography-page--final .photo-info-grid h3,
.photography-page--final .photo-price-card h3 {
margin: .8rem 0 0 !important;
color: var(--color-text) !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 1rem !important;
font-style: normal !important;
font-weight: 400 !important;
letter-spacing: .015em !important;
line-height: 1.3 !important;
text-transform: uppercase !important;
}
.photography-page--final .photography-offer-card ul {
display: grid !important;
gap: .46rem !important;
margin: 1.2rem 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
.photography-page--final .photography-offer-card li {
position: relative;
padding-left: 1rem;
color: #51484d !important;
font-size: .82rem !important;
line-height: 1.55 !important;
}
.photography-page--final .photography-offer-card li::before {
position: absolute;
top: .57em;
left: 0;
width: .35rem;
height: .35rem;
border-radius: 50%;
background: var(--color-primary);
content: "";
}
.photography-page--final .photography-offer-card li::after { content: none !important; }
.photography-page--final .photography-offer-card__note {
margin: 1.2rem 0 0 !important;
padding-top: 1rem !important;
border-top: 1px solid var(--color-border) !important;
color: #51484d;
font-size: .82rem !important;
line-height: 1.58 !important;
}
.photography-page--final .photography-offer-card .text-link {
margin-top: 1.15rem;
font-size: .72rem;
font-weight: 700;
}
/* CENÍK — same card shell, price remains the pink dominant datum. */
.photography-page--final .photo-price-grid { counter-reset: photo-price-card; }
.photography-page--final .photo-price-card {
counter-increment: photo-price-card;
display: flex;
flex-direction: column;
}
.photography-page--final .photo-price-card::before {
display: block;
margin: 0 0 .8rem;
color: var(--color-primary);
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 2.4rem;
font-weight: 700;
letter-spacing: .1em;
line-height: 1.1;
content: counter(photo-price-card, decimal-leading-zero);
}
.photography-page--final .photo-price-card__top {
display: block !important;
padding: 0 0 1rem !important;
border-bottom: 1px solid var(--color-border) !important;
}
.photography-page--final .photo-price-card h3 { margin: 0 !important; }
.photography-page--final .photo-price-card__price {
margin: .7rem 0 0 !important;
color: var(--color-primary) !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
line-height: 1.35 !important;
white-space: normal !important;
}
.photography-page--final .photo-price-card__meta {
display: grid !important;
gap: .45rem !important;
margin: 1rem 0 0 !important;
}
.photography-page--final .photo-price-card__meta span {
position: relative;
padding-left: 1rem;
color: #51484d;
font-size: .82rem;
font-weight: 400;
line-height: 1.5;
}
.photography-page--final .photo-price-card__meta span::before {
position: absolute;
top: .55em;
left: 0;
width: .35rem;
height: .35rem;
border-radius: 50%;
background: var(--color-primary);
content: "";
}
.photography-page--final .photo-price-card > p:not(.photo-price-card__price) {
margin-top: 1rem !important;
color: #51484d !important;
font-size: .82rem !important;
line-height: 1.58 !important;
}
.photography-page--final .photo-price-card__fineprint {
padding-top: 1rem !important;
border-top: 1px solid var(--color-border) !important;
}
/* CO JE V CENĚ — no oversized first card; every card follows the same grid. */
.photography-page--final .photo-info-grid article:first-child {
grid-column: auto !important;
}
.photography-page--final .photo-info-grid .photo-info-card__number {
margin: 0 !important;
color: var(--color-primary) !important;
font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
font-size: 2.4rem !important;
font-style: normal !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
line-height: 1.65 !important;
}
.photography-page--final .photo-info-grid h3 { margin-top: .65rem !important; }
.photography-page--final .photo-info-grid ul {
display: grid;
gap: .46rem;
margin: 1rem 0 !important;
padding: 0 !important;
list-style: none;
}
.photography-page--final .photo-info-grid li {
position: relative;
padding-left: 1rem;
}
.photography-page--final .photo-info-grid li::before {
position: absolute;
top: .58em;
left: 0;
width: .35rem;
height: .35rem;
border-radius: 50%;
background: var(--color-primary);
content: "";
}
.photography-page--final .photo-info-grid p,
.photography-page--final .photo-info-grid li {
color: #51484d;
font-size: .82rem;
line-height: 1.58;
}
.photography-page--final .photo-info-price {
margin-top: 1rem !important;
color: var(--color-primary) !important;
font-size: 1rem !important;
font-weight: 700 !important;
}
/* JAK FOCENÍ PROBÍHÁ — same 3-card desktop rhythm as Jak pracuji. */
.photography-page--final .photo-process-grid article {
display: block;
}
.photography-page--final .photo-process-grid p {
margin: .75rem 0 0 !important;
color: #51484d !important;
font-size: .82rem !important;
line-height: 1.58 !important;
}
/* The sensitive-kids panel is also a card, not a visually unrelated banner. */
.photography-page--final .photo-sensitive-kids {
grid-template-columns: minmax(14rem, .7fr) minmax(0, 1.3fr) !important;
gap: clamp(2rem, 4vw, 4rem) !important;
margin: 1rem 0 2.2rem !important;
border-left-width: 1px !important;
}
.photography-page--final .photo-sensitive-kids h3 {
margin-top: .8rem !important;
color: var(--color-text) !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 1rem !important;
font-weight: 400 !important;
letter-spacing: .015em !important;
line-height: 1.3 !important;
text-transform: uppercase !important;
}
@media (min-width: 44rem) and (max-width: 69.99rem) {
.photography-page--final .photography-offer-grid,
.photography-page--final .photo-price-grid,
.photography-page--final .photo-info-grid,
.photography-page--final .photo-process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 43.99rem) {
.photography-page--final .photography-offer-grid,
.photography-page--final .photo-price-grid,
.photography-page--final .photo-info-grid,
.photography-page--final .photo-process-grid,
.photography-page--final .photo-sensitive-kids {
grid-template-columns: 1fr !important;
}
.photography-page--final .photography-offer-card,
.photography-page--final .photo-price-card,
.photography-page--final .photo-info-grid article,
.photography-page--final .photo-process-grid article,
.photography-page--final .photo-sensitive-kids {
padding: 1.35rem !important;
border-top-width: 3px !important;
}
.photography-page--final .photography-offer-card__number,
.photography-page--final .photo-process-grid article > span,
.photography-page--final .photo-price-card::before {
font-size: 2.05rem !important;
}
}
\n\n/* 0.3.146 — Photography gallery: never repeat hero and keep masonry in normal document flow. */
.photography-gallery .photo-masonry--main {
display: block;
columns: 3;
column-gap: .9rem;
}
.photography-gallery .photo-masonry--main .photo-item {
display: inline-block;
width: 100%;
margin: 0 0 .9rem;
break-inside: avoid;
grid-column: auto;
grid-row-end: auto !important;
}
@media (max-width: 960px) {
.photography-gallery .photo-masonry--main { columns: 2; }
}
@media (max-width: 620px) {
.photography-gallery .photo-masonry--main { columns: 1; }
}
/* 0.3.150 — Editorial photo respects the source image aspect ratio. */
.photography-page--final .photography-moments__media {
display: flex;
align-items: center;
justify-content: flex-start;
min-width: 0;
}
.photography-page--final .photography-moments__media .kg-gallery-item--single,
.photography-page--final .photography-moments__media .kg-gallery-item--single .kg-gallery-item__open,
.photography-page--final .photography-moments__media .photo-item--moment {
width: auto;
height: auto;
max-width: 100%;
margin: 0;
}
.photography-page--final .photography-moments__media .kg-gallery-item--single .kg-gallery-item__open {
display: block;
}
.photography-page--final .photography-moments__media img {
display: block;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 42rem !important;
object-fit: contain !important;
object-position: center !important;
}
@media (max-width: 760px) {
.photography-page--final .photography-moments__media {
justify-content: center;
}
.photography-page--final .photography-moments__media img {
max-height: 34rem !important;
}
}
/* 0.3.151 — Editorial moment uses the same visual frame as the photography hero.
* Keep the section compact and vertically centred instead of letting portrait
* source images dictate an oversized section height. */
.photography-page--final .photography-moments {
padding-block: clamp(2.4rem, 3.4vw, 3.8rem) !important;
}
.photography-page--final .photography-moments__grid {
grid-template-columns: minmax(20rem, .72fr) minmax(0, 1.08fr) !important;
gap: clamp(2rem, 4vw, 4rem) !important;
align-items: center !important;
}
.photography-page--final .photography-moments__media {
display: block !important;
width: 100%;
min-width: 0;
}
.photography-page--final .photography-moments__media .kg-gallery-item--single,
.photography-page--final .photography-moments__media .kg-gallery-item--single .kg-gallery-item__open,
.photography-page--final .photography-moments__media .photo-item--moment {
display: block;
width: 100% !important;
max-width: none !important;
}
.photography-page--final .photography-moments__media img {
display: block;
width: 100% !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
aspect-ratio: .82 !important;
object-fit: cover !important;
object-position: center !important;
}
.photography-page--final .photography-moments__content {
align-self: center;
max-width: 35rem;
}
@media (max-width: 760px) {
.photography-page--final .photography-moments {
padding-block: 2.4rem !important;
}
.photography-page--final .photography-moments__grid {
grid-template-columns: 1fr !important;
gap: 1.75rem !important;
}
.photography-page--final .photography-moments__media {
max-width: 32rem;
margin-inline: auto;
}
}
/* 0.3.152 — Editorial image follows the actual source-photo ratio.
* Do not crop portrait, landscape or square photographs into a fixed frame. */
.photography-page--final .photography-moments__grid {
grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr) !important;
align-items: center !important;
}
.photography-page--final .photography-moments__media {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0;
}
.photography-page--final .photography-moments__media .kg-gallery-item--single,
.photography-page--final .photography-moments__media .kg-gallery-item--single .kg-gallery-item__open,
.photography-page--final .photography-moments__media .photo-item--moment {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 100% !important;
margin: 0 !important;
}
.photography-page--final .photography-moments__media img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 36rem !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: center !important;
}
@media (max-width: 760px) {
.photography-page--final .photography-moments__grid {
grid-template-columns: 1fr !important;
}
.photography-page--final .photography-moments__media img {
max-height: none !important;
}
}
/* 0.3.153 — Focení: use the same form visual system as Poptat projekt. */
.photography-inquiry__inner {
max-width: var(--container-max) !important;
}
.photography-inquiry .photography-section-heading {
max-width: 56rem;
}
.photography-inquiry .photo-inquiry-form-wrap {
max-width: none !important;
margin-top: clamp(1.4rem, 2.5vw, 2rem);
}
.photography-inquiry .photo-inquiry-form-wrap.redesign-contact-form {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.photography-inquiry .photo-inquiry-form-wrap.redesign-contact-form::before,
.photography-inquiry .photo-inquiry-form-wrap.redesign-contact-form::after {
display: none !important;
content: none !important;
}
.photography-inquiry .redesign-contact-form .photo-inquiry-form {
margin-top: 0 !important;
padding: clamp(1.5rem, 3vw, 2.45rem) !important;
border: 1px solid var(--color-border) !important;
border-top: 4px solid #111111 !important;
border-radius: 1.05rem !important;
background: rgb(255 255 255 / 95%) !important;
box-shadow: 0 18px 38px rgb(73 28 47 / 8%) !important;
}
.photography-inquiry .contact-form__grid {
gap: 1rem 1.1rem;
}
.photography-inquiry .contact-form__required {
margin: 1rem 0 0;
}
.photography-inquiry .contact-form__privacy {
max-width: 70rem;
margin-top: .75rem;
font-size: .78rem;
line-height: 1.55;
}
.photography-inquiry .contact-form__privacy a {
color: var(--color-primary);
font-weight: 600;
text-underline-offset: .16em;
}
.photography-inquiry .photo-form-assurance {
margin-top: .8rem;
font-size: .78rem;
line-height: 1.55;
color: var(--color-muted);
}
/* 0.3.153 — Portfolio & reference: photography teaser/filter is a real grid,
not CSS multi-columns that can stack all images into the first column. */
.portfolio-photography .kg-gallery-grid,
.portfolio-photography-filter-view .kg-gallery-grid,
.kg-gallery.jenifer-portfolio-teaser .kg-gallery-grid,
.kg-gallery.jenifer-portfolio .kg-gallery-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: clamp(.8rem, 1.4vw, 1.2rem) !important;
columns: auto !important;
column-gap: normal !important;
}
.portfolio-photography .kg-gallery-item,
.portfolio-photography-filter-view .kg-gallery-item,
.kg-gallery.jenifer-portfolio-teaser .kg-gallery-item,
.kg-gallery.jenifer-portfolio .kg-gallery-item {
display: block !important;
width: 100% !important;
margin: 0 !important;
min-width: 0;
background: #fff !important;
padding: clamp(.45rem, .9vw, .7rem) !important;
box-sizing: border-box !important;
}
.portfolio-photography .kg-gallery-item__open,
.portfolio-photography-filter-view .kg-gallery-item__open,
.kg-gallery.jenifer-portfolio-teaser .kg-gallery-item__open,
.kg-gallery.jenifer-portfolio .kg-gallery-item__open {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--color-surface, #f6f3ef);
}
.portfolio-photography .kg-gallery-item img,
.portfolio-photography-filter-view .kg-gallery-item img,
.kg-gallery.jenifer-portfolio-teaser .kg-gallery-item img,
.kg-gallery.jenifer-portfolio .kg-gallery-item img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.portfolio-photography .kg-gallery-item figcaption,
.portfolio-photography-filter-view .kg-gallery-item figcaption {
padding: .7rem .15rem 0;
}
@media (max-width: 900px) {
.portfolio-photography .kg-gallery-grid,
.portfolio-photography-filter-view .kg-gallery-grid,
.kg-gallery.jenifer-portfolio-teaser .kg-gallery-grid,
.kg-gallery.jenifer-portfolio .kg-gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 560px) {
.photography-inquiry .redesign-contact-form .photo-inquiry-form {
padding: 1.15rem !important;
border-top-width: 3px !important;
border-radius: .95rem !important;
}
.portfolio-photography .kg-gallery-grid,
.portfolio-photography-filter-view .kg-gallery-grid,
.kg-gallery.jenifer-portfolio-teaser .kg-gallery-grid,
.kg-gallery.jenifer-portfolio .kg-gallery-grid {
grid-template-columns: 1fr !important;
}
}
/* 0.3.154 — Portfolio photography teaser uses white framed tiles with visible white gaps, matching the rest of the portfolio visuals. */
/* 0.3.155 — Photography pricing polish: framed introductory-price badge and regular-weight prices. */
.photography-page--final .photo-price-validity {
box-shadow: 0 0 0 1px #111111;
}
.photography-page--final .photo-price-card__price,
.photography-page--final .photo-info-price,
.photography-page--final .photo-price-card__extra strong,
.photography-page--final .photo-price-group__extra strong {
font-weight: 400 !important;
}
/* 0.3.156 — Photography grids use the exact approved Jak pracuji card language.
* Keep photography-specific data, but not a second visual component system. */
.photography-page--final .photography-offer-card,
.photography-page--final .photo-price-card,
.photography-page--final .photo-info-grid article,
.photography-page--final .photo-process-grid article,
.photography-page--final .photo-sensitive-kids {
padding: 1.55rem !important;
border: 1px solid var(--color-border) !important;
border-top: 3px solid #111111 !important;
border-radius: var(--radius-md) !important;
background: rgb(255 255 255 / 91%) !important;
box-shadow: var(--shadow-card) !important;
}
/* Number treatment = Jak pracuji / Služby exactly. */
.photography-page--final .photography-offer-card__number,
.photography-page--final .photo-process-grid article > span,
.photography-page--final .photo-price-card::before {
display: block !important;
margin: 0 !important;
color: var(--color-primary) !important;
font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
font-size: 2.4rem !important;
font-style: normal !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
line-height: 1.65 !important;
}
/* Heading treatment = Jak pracuji exactly. */
.photography-page--final .photography-offer-card h3,
.photography-page--final .photo-price-card h3,
.photography-page--final .photo-info-grid h3,
.photography-page--final .photo-process-grid h3 {
margin: .65rem 0 0 !important;
color: var(--color-text) !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 1rem !important;
font-style: normal !important;
font-weight: 400 !important;
letter-spacing: .015em !important;
line-height: 1.25 !important;
text-transform: uppercase !important;
}
/* Price header must no longer look like a separate mini-component. */
.photography-page--final .photo-price-card__top {
display: block !important;
padding: 0 !important;
border: 0 !important;
}
.photography-page--final .photo-price-card__price {
margin: .65rem 0 0 !important;
color: var(--color-primary) !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 1rem !important;
font-weight: 400 !important;
line-height: 1.35 !important;
}
/* Bullets + body rhythm = Jak pracuji. */
.photography-page--final .photo-price-card__meta,
.photography-page--final .photography-offer-card ul {
display: grid !important;
gap: .46rem !important;
margin: 1.2rem 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
.photography-page--final .photo-price-card__meta span,
.photography-page--final .photography-offer-card li {
position: relative !important;
padding-left: 1rem !important;
color: #51484d !important;
font-size: .82rem !important;
font-weight: 400 !important;
line-height: 1.55 !important;
}
.photography-page--final .photo-price-card__meta span::before,
.photography-page--final .photography-offer-card li::before {
position: absolute !important;
top: .55em !important;
left: 0 !important;
width: .35rem !important;
height: .35rem !important;
margin: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: var(--color-primary) !important;
content: "" !important;
}
.photography-page--final .photo-price-card > p:not(.photo-price-card__price),
.photography-page--final .photo-process-grid p,
.photography-page--final .photo-info-grid p,
.photography-page--final .photo-info-grid li,
.photography-page--final .photography-offer-card__note {
color: #51484d !important;
font-size: .82rem !important;
line-height: 1.55 !important;
}
.photography-page--final .photo-price-card > p:not(.photo-price-card__price),
.photography-page--final .photo-process-grid p {
margin-top: .65rem !important;
}
.photography-page--final .photo-price-card__fineprint,
.photography-page--final .photography-offer-card__note {
margin-top: 1.2rem !important;
padding-top: 1rem !important;
border-top: 1px solid var(--color-border) !important;
}
/* 0.3.157 — Pricing data follows the same bullet rhythm as Jak pracuji.
Price is no longer a standalone row under the heading. */
.photography-page--final .photo-price-card__top {
margin: 0 !important;
}
.photography-page--final .photo-price-card__meta {
margin-top: 1.2rem !important;
}
.photography-page--final .photo-price-card__meta .photo-price-card__price {
position: relative !important;
display: block !important;
margin: 0 !important;
padding-left: 1rem !important;
color: var(--color-primary) !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: .9rem !important;
font-weight: 400 !important;
line-height: 1.55 !important;
}
.photography-page--final .photo-price-card__meta .photo-price-card__price::before {
position: absolute !important;
top: .55em !important;
left: 0 !important;
width: .35rem !important;
height: .35rem !important;
border-radius: 50% !important;
background: var(--color-primary) !important;
content: "" !important;
}
/* 0.3.158 — Pricing cards now use the exact Jak pracuji list markup.
Keep price as one ordinary checklist item, only pink and regular weight. */
.photography-page--final .photo-price-card.process-card--pricing .photo-price-card__meta {
display: flex !important;
flex-direction: column !important;
gap: .46rem !important;
margin: 1.2rem 0 0 !important;
padding: 0 !important;
border: 0 !important;
}
.photography-page--final .photo-price-card.process-card--pricing .photo-price-card__meta li {
position: relative !important;
display: list-item !important;
margin: 0 !important;
padding: 0 0 0 1rem !important;
color: #51484d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: .82rem !important;
font-weight: 400 !important;
line-height: 1.55 !important;
list-style: none !important;
}
.photography-page--final .photo-price-card.process-card--pricing .photo-price-card__meta li::before {
position: absolute !important;
top: .55em !important;
left: 0 !important;
width: .35rem !important;
height: .35rem !important;
margin: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: var(--color-primary) !important;
content: "" !important;
}
.photography-page--final .photo-price-card.process-card--pricing .photo-price-card__meta li.photo-price-card__price {
color: var(--color-primary) !important;
font-size: .82rem !important;
font-weight: 400 !important;
}
.photography-page--final .photo-price-card.process-card--pricing .photo-price-card__meta li.photo-price-card__price::before {
background: var(--color-primary) !important;
}
/* 0.3.159 — Photography pricing cards are the actual Jak pracuji component.
No pseudo number, no photography-specific heading/list rhythm. */
.photography-page--final .photo-price-grid.redesign-process-grid .photo-price-card::before {
display: none !important;
content: none !important;
}
.photography-page--final .photo-price-grid.redesign-process-grid .photo-price-card {
counter-increment: none !important;
padding: 1.55rem !important;
}
.photography-page--final .photo-price-grid.redesign-process-grid .photo-price-card .process-card__number {
margin: 0 !important;
color: var(--color-primary) !important;
font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
font-size: 2.4rem !important;
font-style: normal !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
line-height: 1.65 !important;
}
.photography-page--final .photo-price-grid.redesign-process-grid .photo-price-card h2 {
margin-top: .65rem !important;
color: var(--color-text) !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 1rem !important;
font-style: normal !important;
font-weight: 400 !important;
letter-spacing: .015em !important;
line-height: 1.25 !important;
text-transform: uppercase !important;
}
.photography-page--final .photo-price-grid.redesign-process-grid .photo-price-card .process-card__list {
display: grid !important;
gap: .46rem !important;
margin: 1.2rem 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
.photography-page--final .photo-price-grid.redesign-process-grid .photo-price-card .process-card__list li {
position: relative !important;
margin: 0 !important;
padding: 0 0 0 1rem !important;
color: #51484d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: .82rem !important;
font-weight: 400 !important;
line-height: 1.55 !important;
list-style: none !important;
}
.photography-page--final .photo-price-grid.redesign-process-grid .photo-price-card .process-card__list li::before {
position: absolute !important;
top: .55em !important;
left: 0 !important;
width: .35rem !important;
height: .35rem !important;
margin: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: var(--color-primary) !important;
content: "" !important;
}
/* Keep the user's requested regular price weight, while matching the exact
Jak pracuji price size/placement. */
.photography-page--final .photo-price-grid.redesign-process-grid .photo-price-card .process-card__price-value {
color: var(--color-primary) !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 1rem !important;
font-weight: 400 !important;
line-height: 1.35 !important;
}
.photography-page--final .photo-price-grid.redesign-process-grid .photo-price-card__fineprint,
.photography-page--final .photo-price-grid.redesign-process-grid .photo-price-card__extra {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* 0.3.160 — Photography price cards now literally reuse the Jak pracuji card component.
There is intentionally no photo-price-card class on the rendered cards, so no legacy
photography card typography can override the shared process component. */
.photography-page--final .photo-price-grid.redesign-process-grid > .process-card {
min-height: 100%;
}
/* 0.3.161 — Reviews: match the site's body typography / Kraťas-style review cards.
* Keep pink only for the rating/accent; testimonial copy is normal black body text.
* The avatar explicitly wins over the old generic footer-span display:block rule.
*/
.reference-card blockquote,
.home-references .reference-card blockquote,
.portfolio-reference-page .reference-card blockquote,
.references-page .reference-card blockquote {
color: #111111 !important;
font-family: var(--font-sans, "Montserrat", Arial, sans-serif) !important;
font-size: .9rem !important;
font-style: normal !important;
font-weight: 400 !important;
font-synthesis: none !important;
letter-spacing: 0 !important;
line-height: 1.65 !important;
}
.reference-card footer .reference-card__avatar,
.home-references .reference-card footer .reference-card__avatar,
.portfolio-reference-page .reference-card footer .reference-card__avatar,
.references-page .reference-card footer .reference-card__avatar {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 2.55rem !important;
height: 2.55rem !important;
min-width: 2.55rem !important;
min-height: 2.55rem !important;
padding: 0 !important;
border-radius: 50% !important;
font-family: var(--font-sans, "Montserrat", Arial, sans-serif) !important;
font-size: .82rem !important;
font-style: normal !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
}
/* 0.3.162 — Added standard accent numbering to the “Co je v ceně” grid to match the rest of the photography page card system. */
/* 0.3.163 — Reviews: all initial/brand marks are optically centered in their circles.
* These selectors intentionally beat older generic `span { display:block; }` rules.
*/
.jenifer-review-summary__identity > .jenifer-review-summary__mark,
.jenifer-review-source-card > .jenifer-review-source-card__mark,
.reference-card footer > .reference-card__avatar {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
line-height: 1 !important;
text-align: center !important;
}
.jenifer-review-summary__identity > .jenifer-review-summary__mark {
width: 2.45rem !important;
height: 2.45rem !important;
min-width: 2.45rem !important;
min-height: 2.45rem !important;
flex: 0 0 2.45rem !important;
margin: 0 !important;
}
.jenifer-review-source-card > .jenifer-review-source-card__mark,
.reference-card footer > .reference-card__avatar {
width: 2.55rem !important;
height: 2.55rem !important;
min-width: 2.55rem !important;
min-height: 2.55rem !important;
flex: 0 0 2.55rem !important;
margin: 0 !important;
}
/* 0.3.165 — scalable standalone reference archive.
* Important: pagination links use their own class; the page wrapper must never
* share sizing rules with a 2.65rem pagination button.
*/
.references-archive-page.site-main {
display: block !important;
width: auto !important;
height: auto !important;
min-height: 60vh;
padding-block: 0 !important;
border: 0 !important;
background: transparent !important;
}
.references-archive-hero {
padding-block: .75rem !important;
}
.references-archive-hero__inner {
display: flex;
min-height: var(--jenifer-inner-hero-height) !important;
max-width: 64rem;
flex-direction: column;
justify-content: center;
}
.references-archive-page .references-archive-hero h1 {
max-width: 18ch;
margin: .35rem 0 0 !important;
font-size: var(--jenifer-inner-hero-h1) !important;
font-weight: 400;
line-height: .98 !important;
letter-spacing: -.03em;
}
.references-archive-hero p:last-child {
max-width: 46rem;
margin-top: .45rem;
color: var(--color-muted);
font-size: var(--jenifer-inner-hero-lead);
line-height: 1.16;
}
.references-archive-content {
padding-top: clamp(2.4rem, 4vw, 4rem);
}
.references-archive-summary { margin: 0 0 1rem; }
.references-archive-verification { margin: 0 0 1.6rem; }
.references-archive-verification__body {
display: grid;
gap: .75rem;
max-width: 62rem;
padding-top: .9rem;
}
.references-archive-filters {
display: flex;
flex-wrap: wrap;
gap: .55rem;
margin: 0 0 1.8rem;
}
.references-archive-filter {
display: inline-flex;
align-items: center;
min-height: 2.6rem;
padding: .65rem .9rem;
border: 1px solid var(--color-border);
color: var(--color-text);
background: #fff;
text-decoration: none;
font-size: .78rem;
font-weight: 700;
}
.references-archive-filter:hover,
.references-archive-filter.is-active {
border-color: var(--color-primary);
color: #fff;
background: var(--color-primary);
}
.references-archive-page .references-archive-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: 1rem;
margin-top: 0;
}
.references-archive-grid .reference-card {
display: flex;
min-height: 100%;
flex-direction: column;
padding: 1.45rem;
border: 1px solid rgba(62,45,52,.09);
border-radius: 1.15rem;
background: #fff;
box-shadow: 0 .8rem 2.2rem rgba(50,30,39,.055);
}
.references-archive-grid .reference-card footer {
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid rgba(62,45,52,.08);
}
.references-archive-pagination {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-top: 2rem;
}
.references-archive-pagination__page {
display: grid;
place-items: center;
width: 2.65rem;
height: 2.65rem;
border: 1px solid var(--color-border);
color: var(--color-text);
background: #fff;
text-decoration: none;
font-weight: 700;
}
.references-archive-pagination__page.is-active,
.references-archive-pagination__page:hover {
border-color: var(--color-primary);
color: #fff;
background: var(--color-primary);
}
.portfolio-reference-archive-link { margin-top: 1.5rem; }
@media (max-width: 900px) {
.references-archive-page .references-archive-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.references-archive-page .references-archive-hero h1 {
font-size: var(--jenifer-inner-hero-h1) !important;
}
.references-archive-page .references-archive-grid {
grid-template-columns: 1fr;
}
.references-archive-filters {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: .35rem;
}
.references-archive-filter { white-space: nowrap; }
}
/* 0.3.166 — Preserve the original paragraph structure inside client reviews. */
.reference-card .reference-card__text > p {
margin: 0 0 .9rem;
}
.reference-card .reference-card__text > p:last-child {
margin-bottom: 0;
}
/* 0.3.167 — Reference archive hero now uses the same compact inner-page typography and vertical rail as the rest of the site. */