/* ========================================================================== ACMOBOOK — Public profile concepts Five structural presentation systems over ONE renderer. Scope: body.acm-profile-concept-{concept} and body.acm-profile-style-{style} The hero renders outside the page wrapper, so concept state lives on . Accent, fonts, radii and card style continue to come from the inline CSS variables emitted by profileStudioPublicCssVars(). ========================================================================== */ body[class*="acm-profile-concept-"] { --acm-cpt-gap: 56px; --acm-cpt-hero-min: 58vh; --acm-cpt-measure: 72ch; --acm-cpt-media-radius: var(--ps-radius, 16px); --acm-cpt-heading: 1; --acm-cpt-media-cols: 3; } body[class*="acm-profile-concept-"] .acm-profile__container { max-width: 1180px; } body[class*="acm-profile-concept-"] .acm-profile-section, body[class*="acm-profile-concept-"] .ac-section-card { margin-bottom: var(--acm-cpt-gap); } body[class*="acm-profile-concept-"] .acm-profile-section > h2, body[class*="acm-profile-concept-"] .ac-section-card > h2 { font-size: calc(1.55rem * var(--acm-cpt-heading)); letter-spacing: -0.015em; line-height: 1.2; } body[class*="acm-profile-concept-"] .acm-profile-hero { min-height: var(--acm-cpt-hero-min); } /* Sections must never look identical: alternate the surface treatment. */ body[class*="acm-profile-concept-"] .acm-profile-section:nth-of-type(even) { background: color-mix(in srgb, var(--ps-accent, #635bff) 3%, transparent); } /* -------------------------------------------------------------------------- 1. HIRE ME — conversion first -------------------------------------------------------------------------- */ body.acm-profile-concept-hire_me { --acm-cpt-gap: 44px; --acm-cpt-hero-min: 52vh; --acm-cpt-media-cols: 3; } body.acm-profile-concept-hire_me .acm-profile-services, body.acm-profile-concept-hire_me .acm-profile-bookfor { border: 1px solid color-mix(in srgb, var(--ps-accent, #635bff) 26%, transparent); box-shadow: 0 18px 44px -28px color-mix(in srgb, var(--ps-accent, #635bff) 60%, transparent); background: #fff; } body.acm-profile-concept-hire_me .acm-svc-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } body.acm-profile-concept-hire_me .acm-profile-final-cta { padding-block: 56px; } /* Booking panel stays in view while the visitor reads. */ body.acm-profile-concept-hire_me .ac-profile-sidebar-col { position: sticky; top: 88px; align-self: flex-start; } /* -------------------------------------------------------------------------- 2. SHOWCASE — work first -------------------------------------------------------------------------- */ body.acm-profile-concept-showcase { --acm-cpt-gap: 72px; --acm-cpt-hero-min: 68vh; --acm-cpt-heading: 1.08; --acm-cpt-media-cols: 2; } body.acm-profile-concept-showcase .acm-profile-portfolio, body.acm-profile-concept-showcase .acm-profile-showreel { background: transparent; border: 0; box-shadow: none; padding-inline: 0; } body.acm-profile-concept-showcase .ac-portfolio-photos-grid, body.acm-profile-concept-showcase .acm-video-grid { grid-template-columns: repeat(var(--acm-cpt-media-cols), 1fr); gap: 18px; } body.acm-profile-concept-showcase .ac-portfolio-photos-grid > *:first-child { grid-column: 1 / -1; } body.acm-profile-concept-showcase .ac-portfolio-photos-grid img, body.acm-profile-concept-showcase .acm-video-grid img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; } body.acm-profile-concept-showcase .acm-profile-section:nth-of-type(even) { background: transparent; } /* -------------------------------------------------------------------------- 3. SPOTLIGHT — personality and presence -------------------------------------------------------------------------- */ body.acm-profile-concept-spotlight { --acm-cpt-gap: 80px; --acm-cpt-hero-min: 86vh; --acm-cpt-heading: 1.16; --acm-cpt-media-cols: 2; } body.acm-profile-concept-spotlight .acm-profile-hero { color: #fff; background: #0b0b12; } body.acm-profile-concept-spotlight .acm-profile-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 16, 0.15) 0%, rgba(8, 8, 16, 0.82) 100%); pointer-events: none; z-index: 1; } body.acm-profile-concept-spotlight .acm-profile-hero > * { position: relative; z-index: 2; } body.acm-profile-concept-spotlight .acm-profile-showreel { margin-inline: calc(50% - 50vw); max-width: 100vw; padding-inline: clamp(16px, 6vw, 96px); background: #0b0b12; color: #fff; padding-block: 72px; } body.acm-profile-concept-spotlight .acm-profile-showreel h2 { color: #fff; } body.acm-profile-concept-spotlight .ac-portfolio-photos-grid img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; } /* -------------------------------------------------------------------------- 4. CREATOR — content, platforms, collaborations -------------------------------------------------------------------------- */ body.acm-profile-concept-creator { --acm-cpt-gap: 40px; --acm-cpt-hero-min: 54vh; --acm-cpt-media-cols: 4; } body.acm-profile-concept-creator .ac-portfolio-photos-grid, body.acm-profile-concept-creator .acm-video-grid { grid-template-columns: repeat(var(--acm-cpt-media-cols), 1fr); gap: 10px; } body.acm-profile-concept-creator .ac-portfolio-photos-grid img, body.acm-profile-concept-creator .acm-video-grid img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; } body.acm-profile-concept-creator .acm-profile-section { border-radius: var(--ps-radius, 16px); padding: 22px; } body.acm-profile-concept-creator .acm-profile-brands { background: color-mix(in srgb, var(--ps-accent, #db2777) 7%, transparent); } /* -------------------------------------------------------------------------- 5. SIGNATURE — authority and expertise -------------------------------------------------------------------------- */ body.acm-profile-concept-signature { --acm-cpt-gap: 64px; --acm-cpt-hero-min: 56vh; --acm-cpt-measure: 62ch; --acm-cpt-media-cols: 3; } body.acm-profile-concept-signature .acm-profile__container { max-width: 1080px; } body.acm-profile-concept-signature .acm-profile-section p, body.acm-profile-concept-signature .acm-profile-overview p { max-width: var(--acm-cpt-measure); font-size: 1.04rem; line-height: 1.75; } body.acm-profile-concept-signature .acm-profile-section, body.acm-profile-concept-signature .ac-section-card { border: 0; border-top: 1px solid rgba(15, 23, 42, 0.1); border-radius: 0; box-shadow: none; background: transparent; padding-inline: 0; padding-top: 34px; } body.acm-profile-concept-signature .acm-profile-section:nth-of-type(even) { background: transparent; } body.acm-profile-concept-signature .ac-portfolio-photos-grid img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; } /* -------------------------------------------------------------------------- Visual styles — curated personalisation -------------------------------------------------------------------------- */ body.acm-profile-style-bold { --acm-cpt-heading: 1.18; } body.acm-profile-style-bold .acm-profile-section > h2 { font-weight: 800; letter-spacing: -0.03em; } body.acm-profile-style-elegant { --acm-cpt-gap: 72px; } body.acm-profile-style-elegant .acm-profile-section > h2 { font-weight: 600; letter-spacing: 0.005em; } body.acm-profile-style-creative .acm-profile-section { background: color-mix(in srgb, var(--ps-accent, #635bff) 6%, #fff); backdrop-filter: saturate(1.1); } body.acm-profile-style-minimal { --acm-cpt-gap: 48px; } body.acm-profile-style-minimal .acm-profile-section, body.acm-profile-style-minimal .ac-section-card { border: 0; box-shadow: none; background: transparent; padding-inline: 0; } body.acm-profile-style-minimal .acm-profile-section:nth-of-type(even) { background: transparent; } /* -------------------------------------------------------------------------- Responsive — 1440 / 1280 / 1024 / 768 / 430 / 390 / 375 Mobile is designed, not scaled down. -------------------------------------------------------------------------- */ @media (max-width: 1440px) { body[class*="acm-profile-concept-"] .acm-profile__container { max-width: 1120px; } } @media (max-width: 1280px) { body[class*="acm-profile-concept-"] { --acm-cpt-gap: 48px; } body.acm-profile-concept-creator { --acm-cpt-media-cols: 3; } } @media (max-width: 1024px) { body[class*="acm-profile-concept-"] { --acm-cpt-gap: 40px; --acm-cpt-hero-min: 52vh; --acm-cpt-heading: 1; } body.acm-profile-concept-spotlight { --acm-cpt-hero-min: 66vh; } /* Sticky sidebar becomes normal flow before the columns stack. */ body.acm-profile-concept-hire_me .ac-profile-sidebar-col { position: static; } } @media (max-width: 768px) { body[class*="acm-profile-concept-"] { --acm-cpt-gap: 32px; --acm-cpt-hero-min: 46vh; --acm-cpt-media-cols: 2; } body[class*="acm-profile-concept-"] .acm-profile__container { padding-inline: 16px; overflow-x: clip; } body[class*="acm-profile-concept-"] .acm-profile-section > h2, body[class*="acm-profile-concept-"] .ac-section-card > h2 { font-size: 1.32rem; } /* Full-bleed showreel would overflow once padding shrinks. */ body.acm-profile-concept-spotlight .acm-profile-showreel { margin-inline: 0; max-width: 100%; padding-inline: 16px; padding-block: 40px; border-radius: var(--acm-cpt-media-radius); } body.acm-profile-concept-showcase .ac-portfolio-photos-grid > *:first-child { grid-column: auto; } /* Touch targets stay comfortable on every concept. */ body[class*="acm-profile-concept-"] .acm-btn { min-height: 46px; } body[class*="acm-profile-concept-"] .acm-profile-sticky-bar { display: none; } } @media (max-width: 430px) { body[class*="acm-profile-concept-"] { --acm-cpt-gap: 26px; --acm-cpt-hero-min: 42vh; } body.acm-profile-concept-creator { --acm-cpt-media-cols: 2; } body[class*="acm-profile-concept-"] .acm-profile-section, body[class*="acm-profile-concept-"] .ac-section-card { padding-inline: 14px; } /* Leave room for the sticky action bar. */ body[class*="acm-profile-concept-"] .acm-profile-final-cta { margin-bottom: 84px; padding-block: 34px; } } @media (max-width: 390px) { body[class*="acm-profile-concept-"] .acm-profile-section > h2, body[class*="acm-profile-concept-"] .ac-section-card > h2 { font-size: 1.22rem; } body[class*="acm-profile-concept-"] .acm-profile-sticky-cta__identity span { display: none; } } @media (max-width: 375px) { body[class*="acm-profile-concept-"] { --acm-cpt-gap: 22px; } body[class*="acm-profile-concept-"] .acm-profile-sticky-cta__btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { body[class*="acm-profile-concept-"] * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }