/* ============================================================= Chaitus Media — main.css Editorial, gallery-like layout. Generous whitespace, restrained type, slow transitions. Mobile-first; responsive overrides live in responsive.css. ============================================================= */ /* ---------- FOUC guard ---------- header.php / static sets `html{visibility:hidden}` inline so the browser doesn't paint raw unstyled HTML before this stylesheet downloads. The rule below cancels that the moment main.css parses, so the page reveals fully styled instead of flashing through an editorial layout's worst-looking moment. A 2.5s JS failsafe in also strips the guard if main.css fails to load. */ html { visibility: visible; } /* ---------- Mobile polish (touch + iOS) ---------- */ /* Suppress the gray flash on iOS Safari when tapping links/buttons. */ a, button, [role="button"], summary, .cm-films__card, .cm-reels__card, .cm-portfolio__card { -webkit-tap-highlight-color: transparent; } /* Buttons on touch devices need a comfortable minimum tap area. */ button, .cm-btn, .cm-films__card, .cm-reels__card { -webkit-touch-callout: none; } /* iOS Safari clamps body width to viewport; protect against any rogue wide elements bleeding past on mobile. */ html, body { overflow-x: clip; } /* ---------- Layout primitives ---------- */ .cm-container { width: 100%; max-width: var(--cm-container); margin-inline: auto; padding-inline: var(--cm-gutter); } .cm-container--narrow { max-width: var(--cm-container-narrow); } .cm-container--wide { max-width: var(--cm-container-wide); } .cm-section { padding-block: clamp(4rem, 10vw, 9rem); position: relative; } .cm-section--dark { background: var(--cm-night); color: var(--cm-paper); } .cm-grid { display: grid; gap: clamp(2rem, 5vw, 5rem); } .cm-grid--2 { grid-template-columns: 1fr 1.6fr; align-items: start; } @media (max-width: 768px) { .cm-grid--2 { grid-template-columns: 1fr; } } /* ---------- Typography ---------- */ .cm-eyebrow { display: inline-block; font-family: var(--cm-font-body); font-size: var(--cm-text-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cm-ink-faint); margin-bottom: var(--cm-space-md); } .cm-eyebrow--light { color: rgba(250, 248, 245, 0.65); } .cm-display { font-family: var(--cm-font-display); font-weight: 400; font-size: var(--cm-text-3xl); line-height: 1.05; letter-spacing: -0.02em; color: inherit; margin: 0; text-wrap: balance; } .cm-display--md { font-size: var(--cm-text-2xl); } .cm-display--xl { font-size: var(--cm-text-4xl); } .cm-prose { font-size: var(--cm-text-lg); line-height: 1.7; color: var(--cm-ink-soft); max-width: 60ch; margin: var(--cm-space-md) 0 0; } .cm-prose--lead { font-size: var(--cm-text-xl); line-height: 1.5; color: var(--cm-ink-soft); font-weight: 300; } .cm-prose--center { margin-inline: auto; text-align: center; } .cm-prose--light { color: rgba(250, 248, 245, 0.78); } .cm-prose--page p { margin: 0 0 1.4em; } .cm-prose--page h2, .cm-prose--page h3 { font-family: var(--cm-font-display); font-weight: 500; letter-spacing: -0.01em; margin: 2.2em 0 0.6em; line-height: 1.2; } .cm-prose--page h2 { font-size: var(--cm-text-2xl); } .cm-prose--page h3 { font-size: var(--cm-text-xl); } .cm-prose--page a { color: var(--cm-accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* ---------- Section heading lockup ---------- */ .cm-section-heading { margin-bottom: clamp(2rem, 6vw, 5rem); max-width: 60ch; } .cm-section-heading--center { text-align: center; margin-inline: auto; } .cm-section-heading--center .cm-prose { margin-inline: auto; } /* ---------- Buttons ---------- */ .cm-btn { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.95rem 1.6rem; font-family: var(--cm-font-body); font-size: var(--cm-text-sm); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; border-radius: 0; cursor: pointer; transition: transform var(--cm-dur-base) var(--cm-ease-out), background-color var(--cm-dur-base) var(--cm-ease-out), color var(--cm-dur-base) var(--cm-ease-out), border-color var(--cm-dur-base) var(--cm-ease-out); will-change: transform; } .cm-btn:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 4px; } .cm-btn__arrow { transition: transform var(--cm-dur-base) var(--cm-ease-out); } .cm-btn:hover .cm-btn__arrow { transform: translateX(4px); } .cm-btn--primary { background: var(--cm-ink); color: var(--cm-paper); border-color: var(--cm-ink); } .cm-btn--primary:hover { background: var(--cm-night); border-color: var(--cm-night); } .cm-btn--primary-light { background: var(--cm-paper); color: var(--cm-ink); border-color: var(--cm-paper); } .cm-btn--primary-light:hover { background: var(--cm-paper-deep); border-color: var(--cm-paper-deep); } .cm-btn--ghost { background: transparent; color: var(--cm-ink); border-color: var(--cm-ink); } .cm-btn--ghost:hover { background: var(--cm-ink); color: var(--cm-paper); } .cm-btn--ghost-light { background: transparent; color: var(--cm-paper); border-color: rgba(250, 248, 245, 0.4); } .cm-btn--ghost-light:hover { background: var(--cm-paper); color: var(--cm-ink); border-color: var(--cm-paper); } /* Header CTA — visible on top of the dark hero. White text/border, fills white on hover. */ .cm-btn--header-light { background: transparent; color: var(--cm-paper); border-color: rgba(250, 248, 245, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .cm-btn--header-light:hover { background: var(--cm-paper); color: var(--cm-ink); border-color: var(--cm-paper); } /* When the header transitions to its scrolled state (dark bar over light page), invert. */ .cm-header.is-scrolled .cm-btn--header-light { border-color: rgba(250, 248, 245, 0.5); color: var(--cm-paper); } body:not(.has-3d-hero) .cm-header:not(.is-scrolled) .cm-btn--header-light { color: var(--cm-ink); border-color: var(--cm-ink); } body:not(.has-3d-hero) .cm-header:not(.is-scrolled) .cm-btn--header-light:hover { background: var(--cm-ink); color: var(--cm-paper); } /* ---------- Header ---------- */ .cm-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--cm-z-header); padding-block: 1.4rem; transition: background-color var(--cm-dur-base) var(--cm-ease-out), backdrop-filter var(--cm-dur-base) var(--cm-ease-out), padding-block var(--cm-dur-base) var(--cm-ease-out); color: var(--cm-paper); } .cm-header.is-scrolled { padding-block: 0.85rem; background: rgba(13, 10, 7, 0.85); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); } .has-3d-hero .cm-header { color: var(--cm-paper); } body:not(.has-3d-hero) .cm-header { color: var(--cm-ink); } body:not(.has-3d-hero) .cm-header.is-scrolled { color: var(--cm-paper); } .cm-header__inner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); } .cm-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: inherit; text-decoration: none; /* Same lift as the menu toggle so the wordmark stays tappable when the mobile menu is open. */ position: relative; z-index: 51; } .cm-brand picture { display: block; line-height: 0; } .cm-brand__logo { display: block; height: 38px; width: auto; max-width: 200px; object-fit: contain; } .cm-brand--footer .cm-brand__logo { height: 44px; max-width: 220px; } .cm-brand__mark { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid currentColor; font-family: var(--cm-font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; } .cm-brand__wordmark { font-weight: 500; letter-spacing: 0.01em; } .cm-nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.4rem); list-style: none; padding: 0; margin: 0; } .cm-nav__list a { font-size: var(--cm-text-sm); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; color: inherit; position: relative; padding-block: 0.4rem; transition: color var(--cm-dur-fast) var(--cm-ease-out); } .cm-nav__list a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--cm-dur-base) var(--cm-ease-out); } .cm-nav__list a:hover::after, .cm-nav__list .current-menu-item > a::after, .cm-nav__list a:focus-visible::after { transform: scaleX(1); transform-origin: left; } .cm-header__cta { display: flex; align-items: center; gap: 1.2rem; } .cm-header__phone { font-size: var(--cm-text-sm); letter-spacing: 0.03em; font-feature-settings: 'tnum'; } .cm-header__btn { padding: 0.65rem 1.1rem; font-size: var(--cm-text-xs); } .cm-menu-toggle { display: none; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; padding: 0; /* When the mobile menu opens it covers the header. The toggle needs to ride above the menu so the user can tap it to close. */ position: relative; z-index: 51; transition: color var(--cm-dur-fast) var(--cm-ease-out); } /* When the menu is open, force the toggle bars to paper white so they remain visible against the dark menu background — regardless of whether the page sits over a dark hero or a light page hero. */ .cm-menu-toggle.is-open { color: var(--cm-paper); } .cm-menu-toggle__bar { display: block; width: 24px; height: 1px; background: currentColor; transition: transform var(--cm-dur-base) var(--cm-ease-out), opacity var(--cm-dur-fast) var(--cm-ease-out); margin-inline: auto; } .cm-menu-toggle.is-open .cm-menu-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .cm-menu-toggle.is-open .cm-menu-toggle__bar:nth-child(2) { opacity: 0; } .cm-menu-toggle.is-open .cm-menu-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .cm-mobile-menu { position: fixed; inset: 0; /* Use small-viewport height so the menu fits inside the visible area when iOS Safari's address bar is showing — 100vh would extend past it on first paint and cause the footer to be cut. */ min-height: 100svh; height: 100svh; background: var(--cm-night); color: var(--cm-paper); /* Top: room for the header logo. Bottom: respect the home-bar safe area on notched devices. */ padding: 5.5rem 1.75rem max(2rem, env(safe-area-inset-bottom)) 1.75rem; display: flex; flex-direction: column; /* Below the toggle button (51) but above all page content. The header itself has z-index 50; this matches so the menu replaces the header chrome visually while the toggle stays tappable. */ z-index: 50; opacity: 0; pointer-events: none; transition: opacity var(--cm-dur-base) var(--cm-ease-out); overflow-y: auto; -webkit-overflow-scrolling: touch; } .cm-mobile-menu.is-open { opacity: 1; pointer-events: auto; } .cm-mobile-menu__nav { /* Fill the remaining space so the footer sits at the bottom and the items breathe within the available area. */ flex: 1; display: flex; align-items: center; } .cm-mobile-menu__list { list-style: none; padding: 0; margin: 0; display: flex; /* Belt-and-suspenders: explicitly set both flex-direction and the shorthand flex-flow, so a stray inline style or cached CSS can't accidentally lay items out horizontally. */ flex-direction: column; flex-flow: column nowrap; gap: 1.6rem; width: 100%; } .cm-mobile-menu__list li { /* Hairline between items for an editorial menu feel. */ border-bottom: 1px solid rgba(250, 248, 245, 0.08); padding-bottom: 1.6rem; } .cm-mobile-menu__list li:last-child { border-bottom: 0; padding-bottom: 0; } .cm-mobile-menu__list a { font-family: var(--cm-font-display); font-size: clamp(1.75rem, 7vw, 2.4rem); font-weight: 400; letter-spacing: -0.01em; color: var(--cm-paper); text-decoration: none; display: flex; align-items: center; justify-content: space-between; width: 100%; /* Add a chevron arrow on each item via ::after for that "next page" affordance — pure CSS, no extra markup. */ } .cm-mobile-menu__list a::after { content: '→'; font-family: var(--cm-font-body); font-size: 1.1rem; color: rgba(250, 248, 245, 0.4); transition: transform var(--cm-dur-fast) var(--cm-ease-out), color var(--cm-dur-fast) var(--cm-ease-out); } .cm-mobile-menu__list a:hover::after, .cm-mobile-menu__list a:active::after { transform: translateX(4px); color: var(--cm-paper); } .cm-mobile-menu__footer { display: flex; flex-direction: column; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(250, 248, 245, 0.15); flex-shrink: 0; } .cm-mobile-menu__email { font-size: var(--cm-text-base); color: rgba(250, 248, 245, 0.8); text-decoration: none; letter-spacing: 0.01em; } .cm-mobile-menu__email:hover { color: var(--cm-paper); } /* ---------- Main ---------- */ .cm-main { padding-top: 0; } body:not(.has-3d-hero) .cm-main { padding-top: 6rem; } /* ---------- Career / Work With Us page ---------- */ .cm-page-hero--career { background: var(--cm-paper-deep); padding-block: clamp(7rem, 12vw, 10rem) clamp(2rem, 5vw, 4rem); } .cm-career-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .cm-career-hero__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--cm-line); } .cm-career-hero__media > picture { display: block; width: 100%; height: 100%; } .cm-career-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } .cm-career-hero__align { font-family: var(--cm-font-display); font-style: italic; font-size: var(--cm-text-xl); line-height: 1.4; color: var(--cm-accent-deep); margin: 1.5rem 0 0; max-width: 50ch; } .cm-career-hero__cta { margin-top: 2.5rem; padding: 1.05rem 2.2rem; font-size: 0.85rem; } @media (max-width: 880px) { .cm-career-hero { grid-template-columns: 1fr; } .cm-career-hero__media { aspect-ratio: 4 / 5; max-width: 480px; margin-inline: auto; } } /* Vision pull-quote */ .cm-section--vision { padding-block: clamp(4rem, 9vw, 7rem); } .cm-career-vision { margin: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .cm-career-vision__mark { width: 32px; height: 24px; color: var(--cm-accent); } .cm-career-vision p { font-family: var(--cm-font-display); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.35; letter-spacing: -0.005em; color: var(--cm-paper); margin: 0; max-width: 24ch; } .cm-career-vision footer { font-size: var(--cm-text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250, 248, 245, 0.55); } /* Roles grid */ .cm-roles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--cm-line); border: 1px solid var(--cm-line); } .cm-roles__item { background: var(--cm-paper); padding: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; gap: 1rem; } /* Make the last item span full width when there are 5 (so the row doesn't end with a half-empty cell). */ .cm-roles__item:last-child:nth-child(odd) { grid-column: span 2; } .cm-roles__num { font-family: var(--cm-font-mono); font-size: var(--cm-text-xs); letter-spacing: 0.08em; color: var(--cm-accent-deep); } .cm-roles__title { font-family: var(--cm-font-display); font-size: var(--cm-text-xl); font-weight: 500; letter-spacing: -0.005em; margin: 0; line-height: 1.2; } .cm-roles__item p { margin: 0; font-size: var(--cm-text-base); color: var(--cm-ink-soft); line-height: 1.6; max-width: 50ch; } @media (max-width: 768px) { .cm-roles { grid-template-columns: 1fr; } .cm-roles__item:last-child:nth-child(odd) { grid-column: span 1; } } /* Apply form shell — same treatment as the appointment calendar */ .cm-section--apply { padding-block: clamp(3rem, 7vw, 6rem); } .cm-apply-form { background: var(--cm-paper); border: 1px solid var(--cm-line); padding: clamp(1.5rem, 4vw, 2.5rem); margin-top: 2rem; } .cm-apply-form > *:first-child { margin-top: 0; } .cm-apply-form > *:last-child { margin-bottom: 0; } /* ---------- Legal pages (privacy, terms, refund, shipping) ---------- */ .cm-page--legal .cm-page-hero { padding-bottom: clamp(1rem, 3vw, 2rem); } .cm-section--legal-body { padding-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem); } .cm-page--legal .cm-prose--page h2 { margin-top: 2.4em; font-size: clamp(1.4rem, 3.2vw, 1.8rem); border-top: 1px solid var(--cm-line); padding-top: 1.4em; font-weight: 500; } .cm-page--legal .cm-prose--page h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; } .cm-page--legal .cm-prose--page h3 { margin-top: 1.6em; font-size: clamp(1.1rem, 2.5vw, 1.35rem); font-weight: 500; } .cm-page--legal .cm-prose--page ul { padding-left: 1.4em; margin: 0 0 1.4em; } .cm-page--legal .cm-prose--page li { margin-bottom: 0.6em; line-height: 1.55; } .cm-page--legal .cm-prose--page strong { color: var(--cm-ink); } .cm-legal__close { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--cm-line); font-size: var(--cm-text-base); color: var(--cm-ink-faint); font-style: italic; } /* ---------- Page hero (sub-pages) ---------- */ .cm-page-hero { padding: clamp(7rem, 12vw, 11rem) 0 clamp(3rem, 6vw, 5rem); background: var(--cm-paper); } .cm-page-hero--editorial { padding-bottom: clamp(2rem, 5vw, 4rem); } .cm-page__media { margin-bottom: clamp(3rem, 6vw, 5rem); aspect-ratio: 16 / 9; overflow: hidden; } .cm-page__thumb { width: 100%; height: 100%; object-fit: cover; } /* ---------- Stats ---------- */ .cm-section--stats { padding-block: clamp(3rem, 7vw, 6rem); border-block: 1px solid var(--cm-line); } .cm-stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--cm-line); } .cm-stats--four { grid-template-columns: repeat(4, 1fr); } .cm-stats__item { background: var(--cm-paper); padding: clamp(1.4rem, 3vw, 2.4rem) 1rem; text-align: center; display: flex; flex-direction: column; gap: 0.4rem; } .cm-stats__value { font-family: var(--cm-font-display); font-size: var(--cm-text-3xl); font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--cm-ink); font-feature-settings: 'tnum'; } .cm-stats__suffix { color: var(--cm-accent); } .cm-stats__label { font-size: var(--cm-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-ink-faint); } @media (max-width: 960px) { .cm-stats { grid-template-columns: repeat(3, 1fr); } .cm-stats--four { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .cm-stats { grid-template-columns: repeat(2, 1fr); } .cm-stats--four { grid-template-columns: repeat(2, 1fr); } } /* ---------- Services grid ---------- */ .cm-services { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--cm-line); border: 1px solid var(--cm-line); } .cm-services__item { background: var(--cm-paper); } .cm-services__card { display: flex; flex-direction: column; gap: 1rem; padding: clamp(2rem, 4vw, 3.5rem); height: 100%; text-decoration: none; color: var(--cm-ink); position: relative; transition: background-color var(--cm-dur-base) var(--cm-ease-out); } .cm-services__card:hover { background: var(--cm-paper-deep); } .cm-services__num { font-family: var(--cm-font-mono); font-size: var(--cm-text-xs); letter-spacing: 0.08em; color: var(--cm-ink-faint); margin-bottom: 1rem; } .cm-services__icon { margin-bottom: 1.5rem; color: var(--cm-accent-deep); } .cm-services__title { font-family: var(--cm-font-display); font-size: var(--cm-text-xl); font-weight: 500; letter-spacing: -0.005em; margin: 0; line-height: 1.2; } .cm-services__desc { font-size: var(--cm-text-base); color: var(--cm-ink-soft); margin: 0; line-height: 1.55; } .cm-services__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 2rem; font-size: var(--cm-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-ink); transition: gap var(--cm-dur-base) var(--cm-ease-out); } .cm-services__card:hover .cm-services__more { gap: 0.7rem; } @media (max-width: 960px) { .cm-services { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .cm-services { grid-template-columns: 1fr; } } /* ---------- Our Clicks (wedding photo gallery) ---------- */ .cm-section--clicks { background: var(--cm-paper-deep); } .cm-clicks { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 220px; grid-auto-flow: dense; gap: clamp(0.6rem, 1.4vw, 1.25rem); margin-top: clamp(2rem, 5vw, 4rem); } .cm-clicks__cell { margin: 0; position: relative; overflow: hidden; background: var(--cm-line); grid-column: span 2; grid-row: span 1; } .cm-clicks__cell--span2 { grid-column: span 4; } .cm-clicks__cell--portrait { grid-column: span 2; grid-row: span 2; } .cm-clicks__cell--rowspan2 { grid-row: span 2; } .cm-clicks__cell--landscape { grid-column: span 2; } .cm-clicks__cell picture, .cm-clicks__cell img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cm-clicks__cell img { transition: transform 1.2s var(--cm-ease-out), filter 0.6s var(--cm-ease-out); filter: saturate(0.95); } .cm-clicks__cell:hover img { transform: scale(1.04); filter: saturate(1.1); } .cm-clicks__cta { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem); } @media (max-width: 1024px) { .cm-clicks { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; } .cm-clicks__cell { grid-column: span 2; } .cm-clicks__cell--span2 { grid-column: span 4; } .cm-clicks__cell--portrait { grid-column: span 2; grid-row: span 2; } } @media (max-width: 600px) { .cm-clicks { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; } .cm-clicks__cell, .cm-clicks__cell--span2, .cm-clicks__cell--portrait, .cm-clicks__cell--landscape { grid-column: span 2; grid-row: span 1; } .cm-clicks__cell--portrait, .cm-clicks__cell--rowspan2 { grid-row: span 2; } } /* ---------- Films ---------- */ .cm-films { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); } .cm-films__item { grid-column: span 3; } .cm-films__item--feature { grid-column: span 3; } .cm-films__card { display: flex; flex-direction: column; gap: 1rem; width: 100%; background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; } .cm-films__poster { position: relative; overflow: hidden; aspect-ratio: 16 / 9; } .cm-films__poster .cm-placeholder, .cm-films__poster .cm-films__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--cm-dur-slow) var(--cm-ease-out); } .cm-films__card:hover .cm-films__poster .cm-placeholder, .cm-films__card:hover .cm-films__poster .cm-films__thumb { transform: scale(1.04); } .cm-films__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 78px; height: 78px; border-radius: 50%; background: rgba(250, 248, 245, 0.9); color: var(--cm-ink); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--cm-dur-base) var(--cm-ease-out); } .cm-films__card:hover .cm-films__play { transform: translate(-50%, -50%) scale(1.08); } .cm-films__play svg { margin-left: 4px; } .cm-films__cat { display: block; font-size: var(--cm-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cm-ink-faint); } .cm-films__title { font-family: var(--cm-font-display); font-size: var(--cm-text-xl); font-weight: 400; letter-spacing: -0.005em; margin: 0.4rem 0 0; line-height: 1.2; } .cm-films__cta { text-align: center; margin-top: clamp(2rem, 5vw, 4rem); } @media (max-width: 768px) { .cm-films { grid-template-columns: 1fr; } .cm-films__item, .cm-films__item--feature { grid-column: span 1; } } /* ---------- Testimonials ---------- */ .cm-section--testimonials { background: var(--cm-paper-deep); } .cm-testimonials { position: relative; margin-top: clamp(2rem, 5vw, 4rem); } .cm-testimonials__track { position: relative; min-height: 280px; } .cm-testimonials__slide { position: absolute; inset: 0; max-width: 760px; margin-inline: auto; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity var(--cm-dur-slow) var(--cm-ease-out), transform var(--cm-dur-slow) var(--cm-ease-out); pointer-events: none; } .cm-testimonials__slide.is-active { opacity: 1; transform: translateY(0); position: relative; pointer-events: auto; } .cm-testimonials__quote { margin: 0; padding: 0; border: 0; } .cm-testimonials__mark { width: 32px; height: 24px; color: var(--cm-accent); margin: 0 auto 1.5rem; } .cm-testimonials__quote p { font-family: var(--cm-font-display); font-size: var(--cm-text-2xl); font-weight: 400; font-style: italic; line-height: 1.4; letter-spacing: -0.005em; color: var(--cm-ink); margin: 0; } .cm-testimonials__attr { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.3rem; align-items: center; } .cm-testimonials__author { font-style: normal; font-size: var(--cm-text-base); font-weight: 600; letter-spacing: 0.02em; color: var(--cm-ink); } .cm-testimonials__role { font-size: var(--cm-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cm-ink-faint); } .cm-testimonials__controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.5rem; } .cm-testimonials__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cm-line); background: var(--cm-paper); color: var(--cm-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--cm-dur-fast) var(--cm-ease-out), border-color var(--cm-dur-fast) var(--cm-ease-out); } .cm-testimonials__btn:hover { background: var(--cm-ink); color: var(--cm-paper); border-color: var(--cm-ink); } .cm-testimonials__dots { display: flex; gap: 0.5rem; } .cm-testimonials__dot { /* Visual is the 8px circle; the actual hit area is 36×36 (set via padding) so it's tappable on touch devices. The padding is transparent — only the inner background shows as the dot. */ width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; padding: 0; position: relative; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--cm-dur-fast) var(--cm-ease-out); } .cm-testimonials__dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cm-line); transition: background-color var(--cm-dur-fast) var(--cm-ease-out), transform var(--cm-dur-fast) var(--cm-ease-out); } .cm-testimonials__dot.is-active::before { background: var(--cm-ink); transform: scale(1.3); } /* ---------- Studio glimpse grid ---------- */ .cm-studio-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(220px, auto); gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2rem, 6vw, 4rem); } .cm-studio-grid__item { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; } .cm-studio-grid__item--tall { grid-row: span 2; } .cm-studio-grid__item--wide { grid-column: span 2; } .cm-studio-grid__item .cm-placeholder { flex: 1; min-height: 220px; } @media (max-width: 768px) { .cm-studio-grid { grid-template-columns: 1fr 1fr; } .cm-studio-grid__item--tall, .cm-studio-grid__item--wide { grid-column: span 2; grid-row: auto; } } .cm-caption { font-size: var(--cm-text-sm); font-style: italic; color: var(--cm-ink-faint); } /* ---------- Testimonials page — featured review video ---------- */ .cm-section--featured-review { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(3rem, 6vw, 5rem); } .cm-review-feature { display: block; width: 100%; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; } .cm-review-feature .cm-films__poster { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cm-night); } .cm-films__play--xl { width: 96px; height: 96px; } /* ---------- Vertical Shorts grid (reaction reels) ---------- */ .cm-section--reels { background: var(--cm-paper-deep); } .cm-reels { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2.5vw, 2rem); } .cm-reels__item { display: flex; } .cm-reels__card { display: flex; flex-direction: column; width: 100%; background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; } .cm-reels__poster { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--cm-night); margin-bottom: 1rem; } .cm-reels__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--cm-dur-slow) var(--cm-ease-out); } .cm-reels__card:hover .cm-reels__thumb { transform: scale(1.06); } .cm-reels__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background: rgba(250, 248, 245, 0.88); color: var(--cm-ink); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--cm-dur-base) var(--cm-ease-out); } .cm-reels__play svg { margin-left: 3px; } .cm-reels__card:hover .cm-reels__play { transform: translate(-50%, -50%) scale(1.08); } .cm-reels__meta { display: flex; flex-direction: column; gap: 0.4rem; } .cm-reels__num { font-family: var(--cm-font-mono); font-size: var(--cm-text-xs); letter-spacing: 0.08em; color: var(--cm-ink-faint); } .cm-reels__title { font-family: var(--cm-font-display); font-size: var(--cm-text-lg); font-weight: 500; letter-spacing: -0.005em; margin: 0; line-height: 1.25; } .cm-reels__caption { margin: 0; font-size: var(--cm-text-sm); color: var(--cm-ink-soft); line-height: 1.5; } /* When iframe replaces the poster, keep aspect ratio. */ .cm-reels__poster iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 1024px) { .cm-reels { grid-template-columns: repeat(3, 1fr); } .cm-reels__item:nth-child(n+4) { display: none; } /* But still render all 5 with horizontal scroll on tablet/mobile. */ } @media (max-width: 880px) { .cm-reels { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 70%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: var(--cm-gutter); padding-bottom: 1rem; margin-inline: calc(var(--cm-gutter) * -1); padding-inline: var(--cm-gutter); -webkit-overflow-scrolling: touch; } .cm-reels__item { scroll-snap-align: start; display: flex; } .cm-reels__item:nth-child(n+4) { display: flex; } } @media (max-width: 480px) { .cm-reels { grid-auto-columns: 78%; } } /* ---------- Written review quotes (testimonials page) ---------- */ .cm-review-quotes { list-style: none; padding: 0; margin: clamp(2rem, 5vw, 4rem) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); } .cm-review-quotes__item { background: var(--cm-paper); border: 1px solid var(--cm-line); padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: 1.2rem; } .cm-review-quotes__mark { width: 28px; height: 21px; color: var(--cm-accent); } .cm-review-quotes__item blockquote { margin: 0; font-family: var(--cm-font-display); font-style: italic; font-size: var(--cm-text-lg); line-height: 1.5; color: var(--cm-ink); } .cm-review-quotes__item blockquote p { margin: 0; } .cm-review-quotes__item footer { margin-top: auto; padding-top: 0.6rem; border-top: 1px solid var(--cm-line); display: flex; flex-direction: column; gap: 0.2rem; } .cm-review-quotes__item cite { font-style: normal; font-size: var(--cm-text-sm); font-weight: 600; color: var(--cm-ink); } .cm-review-quotes__item span { font-size: var(--cm-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-ink-faint); } @media (max-width: 880px) { .cm-review-quotes { grid-template-columns: 1fr; } } /* ---------- Booking glimpse (homepage) ---------- */ .cm-section--booking { padding-block: clamp(4rem, 9vw, 8rem); } .cm-booking { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); } .cm-booking__media { position: relative; aspect-ratio: 4 / 5; max-width: 560px; margin-inline: auto; width: 100%; } .cm-booking__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cm-booking__photo--accent { width: 50%; height: 50%; inset: auto -2rem -2rem auto; border: 8px solid var(--cm-paper); display: none; } .cm-booking__content { max-width: 560px; } .cm-booking__list { list-style: none; padding: 0; margin: 2rem 0 2.4rem; display: grid; gap: 0.8rem; } .cm-booking__list li { display: flex; gap: 0.8rem; align-items: flex-start; font-size: var(--cm-text-base); color: var(--cm-ink-soft); line-height: 1.5; } .cm-booking__check { flex-shrink: 0; color: var(--cm-accent); margin-top: 0.15em; } .cm-booking__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 1rem; } .cm-booking__secondary { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--cm-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cm-ink); border-bottom: 1px solid var(--cm-ink); padding-bottom: 0.4rem; transition: gap var(--cm-dur-base) var(--cm-ease-out); } .cm-booking__secondary:hover { gap: 0.8rem; } @media (min-width: 1024px) { .cm-booking__photo--accent { display: block; } } @media (max-width: 880px) { .cm-booking { grid-template-columns: 1fr; } .cm-booking__media { aspect-ratio: 4 / 3; max-width: 100%; } .cm-booking__content { max-width: 100%; } } /* ---------- Appointment page — trust strip ---------- */ .cm-trust-strip { background: var(--cm-ink); color: var(--cm-paper); padding-block: clamp(1.5rem, 3vw, 2rem); } .cm-trust-strip__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; } .cm-trust-strip__list li { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; } .cm-trust-strip__list strong { font-family: var(--cm-font-display); font-size: var(--cm-text-2xl); font-weight: 400; letter-spacing: -0.02em; color: var(--cm-paper); font-feature-settings: 'tnum'; } .cm-trust-strip__list strong.cm-trust-strip__text { font-style: italic; letter-spacing: -0.005em; } .cm-trust-strip__list span { font-size: var(--cm-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(250, 248, 245, 0.65); } @media (max-width: 768px) { .cm-trust-strip__list { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .cm-trust-strip__list strong { font-size: var(--cm-text-xl); } } /* ---------- Appointment hero CTAs ---------- */ .cm-appt-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; } .cm-appt-hero__primary { padding: 1.05rem 2.2rem; font-size: 0.85rem; } .cm-appt-hero__whatsapp { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--cm-text-sm); font-weight: 500; color: #075E54; text-decoration: none; transition: color var(--cm-dur-fast) var(--cm-ease-out); } .cm-appt-hero__whatsapp:hover { color: #128C7E; text-decoration: underline; text-underline-offset: 4px; } .cm-appt-hero__proof { display: inline-flex; align-items: center; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0.5rem 0.9rem; background: rgba(184, 149, 106, 0.12); border: 1px solid rgba(184, 149, 106, 0.3); font-size: var(--cm-text-xs); letter-spacing: 0.04em; color: var(--cm-accent-deep); } .cm-appt-hero__proof svg { color: var(--cm-accent); flex-shrink: 0; } /* ---------- Why us ---------- */ .cm-why { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--cm-line); border: 1px solid var(--cm-line); } .cm-why__item { background: var(--cm-paper); padding: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; gap: 1rem; } .cm-why__num { font-family: var(--cm-font-mono); font-size: var(--cm-text-xs); letter-spacing: 0.08em; color: var(--cm-accent-deep); } .cm-why__title { font-family: var(--cm-font-display); font-size: var(--cm-text-xl); font-weight: 500; letter-spacing: -0.005em; margin: 0; line-height: 1.2; } .cm-why__item p { margin: 0; font-size: var(--cm-text-base); color: var(--cm-ink-soft); line-height: 1.55; } @media (max-width: 1024px) { .cm-why { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .cm-why { grid-template-columns: 1fr; } } /* ---------- Recent work proof grid (smaller variant of clicks) ---------- */ .cm-section--proof { background: var(--cm-paper-deep); } .cm-proof-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 220px; gap: clamp(0.6rem, 1.4vw, 1.25rem); margin-top: clamp(2rem, 5vw, 4rem); } .cm-proof-grid__cell { margin: 0; position: relative; overflow: hidden; background: var(--cm-line); grid-column: span 2; } .cm-proof-grid__cell--span2 { grid-column: span 4; } .cm-proof-grid__cell--rowspan2 { grid-row: span 2; } .cm-proof-grid__cell--portrait { grid-column: span 2; grid-row: span 2; } .cm-proof-grid__cell--landscape { grid-column: span 2; } .cm-proof-grid__cell picture, .cm-proof-grid__cell img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cm-proof-grid__cell img { transition: transform 1s var(--cm-ease-out); } .cm-proof-grid__cell:hover img { transform: scale(1.04); } .cm-proof__cta { text-align: center; margin-top: clamp(2rem, 5vw, 3.5rem); } @media (max-width: 1024px) { .cm-proof-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; } .cm-proof-grid__cell { grid-column: span 2; } .cm-proof-grid__cell--span2 { grid-column: span 4; } .cm-proof-grid__cell--portrait { grid-column: span 2; grid-row: span 2; } } @media (max-width: 600px) { .cm-proof-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; } .cm-proof-grid__cell, .cm-proof-grid__cell--span2, .cm-proof-grid__cell--portrait, .cm-proof-grid__cell--landscape { grid-column: span 2; grid-row: span 1; } .cm-proof-grid__cell--portrait, .cm-proof-grid__cell--rowspan2 { grid-row: span 2; } } /* ---------- Section variant: soft dark (between bright sections) ---------- */ .cm-section--dark-soft { background: var(--cm-night-soft); color: var(--cm-paper); } .cm-section--dark-soft .cm-display, .cm-section--dark-soft h2 { color: var(--cm-paper); } .cm-section--dark-soft .cm-eyebrow--light { color: rgba(250, 248, 245, 0.65); } .cm-review-feature__more { text-align: center; margin-top: 2rem; } .cm-review-feature__more a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--cm-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cm-paper); text-decoration: none; border-bottom: 1px solid rgba(250, 248, 245, 0.3); padding-bottom: 0.4rem; transition: gap var(--cm-dur-base) var(--cm-ease-out), border-color var(--cm-dur-fast) var(--cm-ease-out); } .cm-review-feature__more a:hover { gap: 0.8rem; border-bottom-color: var(--cm-paper); } /* ---------- Process steps ---------- */ .cm-process { list-style: none; padding: 0; margin: clamp(2rem, 5vw, 4rem) 0 0; counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); } .cm-process__step { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--cm-paper); border-top: 1px solid var(--cm-ink); position: relative; } .cm-process__num { width: 44px; height: 44px; border-radius: 50%; background: var(--cm-ink); color: var(--cm-paper); display: inline-flex; align-items: center; justify-content: center; font-family: var(--cm-font-display); font-size: 1.4rem; font-weight: 500; position: absolute; top: -22px; left: clamp(1.6rem, 3vw, 2.4rem); } .cm-process__step h3 { font-family: var(--cm-font-display); font-size: var(--cm-text-xl); font-weight: 500; margin: 0.6rem 0 0; letter-spacing: -0.005em; line-height: 1.2; } .cm-process__step p { margin: 0; font-size: var(--cm-text-base); color: var(--cm-ink-soft); line-height: 1.55; } @media (max-width: 768px) { .cm-process { grid-template-columns: 1fr; } } /* ---------- FAQ ---------- */ .cm-faq { margin-top: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--cm-line); } .cm-faq__item { border-bottom: 1px solid var(--cm-line); padding: 0; } .cm-faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0; cursor: pointer; font-family: var(--cm-font-display); font-size: var(--cm-text-lg); font-weight: 500; letter-spacing: -0.005em; color: var(--cm-ink); transition: color var(--cm-dur-fast) var(--cm-ease-out); } .cm-faq__item summary:hover { color: var(--cm-accent-deep); } .cm-faq__item summary::-webkit-details-marker { display: none; } .cm-faq__item summary svg { flex-shrink: 0; color: var(--cm-ink-faint); transition: transform var(--cm-dur-base) var(--cm-ease-out); } .cm-faq__item[open] summary svg { transform: rotate(180deg); } .cm-faq__item p { margin: 0; padding: 0 0 1.6rem; font-size: var(--cm-text-base); color: var(--cm-ink-soft); line-height: 1.65; max-width: 60ch; } .cm-faq__item p a { color: var(--cm-accent-deep); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Appointment page ---------- */ .cm-page-hero--appointment { background: var(--cm-paper-deep); padding-block: clamp(7rem, 12vw, 10rem) clamp(2rem, 5vw, 4rem); } .cm-appt-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .cm-appt-hero__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--cm-line); } /* The element wraps the . By default it's inline, so an inner `height: 100%` resolves against the picture (which has auto height = content height) instead of the container — breaking object-fit. Forcing picture to block + 100% × 100% makes the IMG correctly fill the container. */ .cm-appt-hero__media > picture { display: block; width: 100%; height: 100%; } .cm-appt-hero__media img { width: 100%; height: 100%; object-fit: cover; /* Source photo is a tall portrait (5366×8045) with the subject's face in the upper-third. Bias the crop toward the top so the face stays in frame at every aspect-ratio. */ object-position: center 25%; } .cm-appt-hero__list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.4rem; } .cm-appt-hero__list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--cm-text-sm); color: var(--cm-ink-soft); } .cm-appt-hero__list svg { flex-shrink: 0; color: var(--cm-accent); margin-top: 0.2em; } @media (max-width: 880px) { .cm-appt-hero { grid-template-columns: 1fr; } /* Stay portrait on mobile so the tall source photo doesn't get letter-cropped down to a strip. 4:5 keeps the subject visible while staying compact enough not to dominate the page. */ .cm-appt-hero__media { aspect-ratio: 4 / 5; max-width: 480px; margin-inline: auto; } .cm-appt-hero__list { grid-template-columns: 1fr; } } /* Calendar shell — Fluent Booking output sits inside this card. */ .cm-section--calendar { padding-block: clamp(3rem, 7vw, 6rem); } .cm-appt-calendar { background: var(--cm-paper); border: 1px solid var(--cm-line); padding: clamp(1.5rem, 4vw, 2.5rem); margin-top: 2rem; } .cm-appt-calendar > *:first-child { margin-top: 0; } .cm-appt-calendar > *:last-child { margin-bottom: 0; } .cm-appt-calendar__missing { text-align: center; padding: 2rem; border: 1px dashed var(--cm-accent); background: var(--cm-paper-deep); font-size: var(--cm-text-sm); color: var(--cm-ink-soft); } .cm-appt-calendar__missing code { font-family: var(--cm-font-mono); background: var(--cm-paper); padding: 0.2em 0.4em; border: 1px solid var(--cm-line); font-size: 0.9em; } /* Explore Our Works — two-card promo on the appointment page. */ .cm-section--explore { background: var(--cm-paper-deep); } .cm-appt-explore { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2rem, 4vw, 3rem); } .cm-appt-explore__card { display: flex; flex-direction: column; background: var(--cm-paper); text-decoration: none; color: var(--cm-ink); overflow: hidden; transition: transform var(--cm-dur-base) var(--cm-ease-out), box-shadow var(--cm-dur-base) var(--cm-ease-out); } .cm-appt-explore__card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px var(--cm-shadow); } .cm-appt-explore__media { aspect-ratio: 16 / 10; overflow: hidden; } .cm-appt-explore__media > picture { display: block; width: 100%; height: 100%; } .cm-appt-explore__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--cm-dur-slow) var(--cm-ease-out); } .cm-appt-explore__card:hover .cm-appt-explore__media img { transform: scale(1.04); } .cm-appt-explore__body { padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 0.6rem; flex: 1; } .cm-appt-explore__title { font-family: var(--cm-font-display); font-size: var(--cm-text-xl); font-weight: 500; margin: 0.2rem 0 0; letter-spacing: -0.005em; } .cm-appt-explore__body p { margin: 0; color: var(--cm-ink-soft); font-size: var(--cm-text-base); line-height: 1.55; } .cm-appt-explore__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 1rem; font-size: var(--cm-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cm-ink); transition: gap var(--cm-dur-base) var(--cm-ease-out); } .cm-appt-explore__card:hover .cm-appt-explore__more { gap: 0.8rem; } @media (max-width: 768px) { .cm-appt-explore { grid-template-columns: 1fr; } } /* ---------- Final CTA ---------- */ .cm-cta { text-align: center; } .cm-cta__actions { display: inline-flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.5rem; } /* ---------- Approach (about page) ---------- */ .cm-approach { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); } .cm-approach__item { display: flex; flex-direction: column; gap: 1rem; border-top: 1px solid var(--cm-ink); padding-top: 1.5rem; } .cm-approach__num { font-family: var(--cm-font-mono); font-size: var(--cm-text-xs); letter-spacing: 0.08em; color: var(--cm-ink-faint); } .cm-approach__title { font-family: var(--cm-font-display); font-size: var(--cm-text-xl); margin: 0; font-weight: 500; letter-spacing: -0.005em; } .cm-approach__item p { margin: 0; font-size: var(--cm-text-base); color: var(--cm-ink-soft); line-height: 1.6; } @media (max-width: 768px) { .cm-approach { grid-template-columns: 1fr; } } /* Recognition list */ .cm-recognition { list-style: none; padding: 0; margin: clamp(2rem, 5vw, 3rem) 0 0; font-family: var(--cm-font-display); font-size: var(--cm-text-2xl); line-height: 1.4; color: var(--cm-ink); } .cm-recognition li { display: flex; gap: 1rem; align-items: baseline; padding-block: 1rem; border-bottom: 1px solid var(--cm-line); } .cm-recognition__bullet { color: var(--cm-accent); font-size: 2rem; line-height: 1; } /* ---------- Service detail blocks ---------- */ .cm-service-block { display: grid; grid-template-columns: auto 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--cm-line); } .cm-service-block:first-of-type { border-top: 0; } .cm-service-block__num { font-family: var(--cm-font-mono); font-size: var(--cm-text-sm); color: var(--cm-ink-faint); letter-spacing: 0.08em; } .cm-service-block__media .cm-placeholder { aspect-ratio: 4 / 5; } .cm-service-block__content h2 { margin: 0 0 1rem; } .cm-service-block__cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.6rem; font-size: var(--cm-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cm-ink); text-decoration: none; border-bottom: 1px solid var(--cm-ink); padding-bottom: 0.4rem; transition: gap var(--cm-dur-base) var(--cm-ease-out); } .cm-service-block__cta:hover { gap: 0.8rem; } @media (max-width: 768px) { .cm-service-block { grid-template-columns: 1fr; } } /* ---------- Portfolio ---------- */ .cm-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 5vw, 4rem); justify-content: center; } .cm-filters__btn { background: transparent; border: 1px solid var(--cm-line); padding: 0.7rem 1.3rem; font-size: var(--cm-text-xs); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; color: var(--cm-ink); transition: background-color var(--cm-dur-fast) var(--cm-ease-out), border-color var(--cm-dur-fast) var(--cm-ease-out), color var(--cm-dur-fast) var(--cm-ease-out); } .cm-filters__btn:hover, .cm-filters__btn.is-active { background: var(--cm-ink); color: var(--cm-paper); border-color: var(--cm-ink); } .cm-portfolio { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; gap: clamp(0.5rem, 1.5vw, 1.25rem); } .cm-portfolio__item--tall { grid-column: span 4; grid-row: span 2; } .cm-portfolio__item--wide { grid-column: span 6; } .cm-portfolio__item--square { grid-column: span 4; } .cm-portfolio__item.is-hidden { display: none; } .cm-portfolio__card { position: relative; width: 100%; height: 100%; background: transparent; border: 0; padding: 0; cursor: pointer; overflow: hidden; } .cm-portfolio__card .cm-placeholder { width: 100%; height: 100%; transition: transform var(--cm-dur-slow) var(--cm-ease-out); } .cm-portfolio__card:hover .cm-placeholder { transform: scale(1.04); } .cm-portfolio__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; background: linear-gradient(180deg, transparent 30%, rgba(13, 10, 7, 0.7) 100%); color: var(--cm-paper); opacity: 0; transition: opacity var(--cm-dur-base) var(--cm-ease-out); } .cm-portfolio__card:hover .cm-portfolio__overlay, .cm-portfolio__card:focus-visible .cm-portfolio__overlay { opacity: 1; } .cm-portfolio__cat { font-size: var(--cm-text-xs); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; } .cm-portfolio__title { font-family: var(--cm-font-display); font-size: var(--cm-text-xl); margin-top: 0.4rem; font-weight: 400; } .cm-portfolio__more { text-align: center; margin-top: clamp(2rem, 5vw, 4rem); } @media (max-width: 960px) { .cm-portfolio__item--tall, .cm-portfolio__item--wide, .cm-portfolio__item--square { grid-column: span 6; grid-row: auto; } } @media (max-width: 600px) { .cm-portfolio { grid-template-columns: 1fr; } .cm-portfolio__item--tall, .cm-portfolio__item--wide, .cm-portfolio__item--square { grid-column: span 1; } } /* Lightbox */ .cm-lightbox { position: fixed; inset: 0; background: rgba(13, 10, 7, 0.94); z-index: var(--cm-z-modal); display: flex; align-items: center; justify-content: center; padding: 2rem; color: var(--cm-paper); } .cm-lightbox[hidden] { display: none; } .cm-lightbox__close { position: absolute; top: 1.5rem; right: 1.5rem; width: 44px; height: 44px; border-radius: 50%; background: rgba(250, 248, 245, 0.1); border: 1px solid rgba(250, 248, 245, 0.3); color: var(--cm-paper); cursor: pointer; } .cm-lightbox__inner { display: grid; gap: 1.5rem; max-width: 1100px; width: 100%; } .cm-lightbox__media { aspect-ratio: 16 / 10; background: rgba(250, 248, 245, 0.05); display: flex; align-items: center; justify-content: center; } .cm-lightbox__cat { font-size: var(--cm-text-xs); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; } .cm-lightbox__title { font-family: var(--cm-font-display); font-size: var(--cm-text-2xl); font-weight: 400; margin: 0.4rem 0 0; } /* ---------- Contact ---------- */ .cm-grid--contact { grid-template-columns: 0.9fr 1.4fr; align-items: start; gap: clamp(2rem, 6vw, 6rem); } @media (max-width: 960px) { .cm-grid--contact { grid-template-columns: 1fr; } } .cm-contact-info { position: sticky; top: 6rem; } .cm-contact-info__list { margin: 2rem 0; padding: 0; } .cm-contact-info__row { display: flex; gap: 1.5rem; align-items: baseline; padding-block: 1rem; border-bottom: 1px solid var(--cm-line); } .cm-contact-info__row dt { flex: 0 0 6rem; font-size: var(--cm-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-ink-faint); } .cm-contact-info__row dd { margin: 0; font-size: var(--cm-text-base); color: var(--cm-ink); line-height: 1.5; } .cm-contact-info__link { color: var(--cm-ink); border-bottom: 1px solid var(--cm-line); } .cm-contact-info__social { padding-top: 2rem; border-top: 1px solid var(--cm-line); } .cm-form { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; } .cm-form__row { display: grid; gap: 1.5rem; } .cm-form__row--two { grid-template-columns: 1fr 1fr; } @media (max-width: 600px) { .cm-form__row--two { grid-template-columns: 1fr; } } .cm-form__field { display: flex; flex-direction: column; gap: 0.4rem; } .cm-form__label { font-size: var(--cm-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-ink-faint); } .cm-form__req { color: var(--cm-accent); } .cm-form__field input, .cm-form__field select, .cm-form__field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--cm-line); padding: 0.7rem 0; font-size: var(--cm-text-base); color: var(--cm-ink); border-radius: 0; font-family: inherit; transition: border-color var(--cm-dur-fast) var(--cm-ease-out); } .cm-form__field input:focus, .cm-form__field select:focus, .cm-form__field textarea:focus { outline: 0; border-bottom-color: var(--cm-ink); } .cm-form__field textarea { resize: vertical; min-height: 120px; } .cm-form__submit { align-self: flex-start; } .cm-section--map { padding-block: 0; } .cm-map { aspect-ratio: 16 / 6; } .cm-map iframe { width: 100%; height: 100%; border: 0; } .cm-map__placeholder { width: 100%; height: 100%; background: var(--cm-paper-deep); display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; } /* ---------- Posts (blog) ---------- */ .cm-posts { display: flex; flex-direction: column; gap: 4rem; margin-top: clamp(2rem, 5vw, 4rem); } .cm-posts--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem); } @media (max-width: 960px) { .cm-posts--grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .cm-posts--grid { grid-template-columns: 1fr; } } .cm-post-card { display: flex; flex-direction: column; gap: 1rem; } .cm-post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; } .cm-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--cm-dur-slow) var(--cm-ease-out); } .cm-post-card__media:hover img { transform: scale(1.04); } .cm-meta__date { font-size: var(--cm-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-ink-faint); } .cm-post-card__title { font-family: var(--cm-font-display); font-size: var(--cm-text-xl); font-weight: 500; letter-spacing: -0.005em; margin: 0; } .cm-post-card__title a { text-decoration: none; color: inherit; } .cm-post-card__title a:hover { color: var(--cm-accent-deep); } .cm-pagination { margin-top: 4rem; text-align: center; } .cm-pagination .nav-links { display: inline-flex; gap: 0.5rem; } .cm-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 1rem; text-decoration: none; color: var(--cm-ink); border: 1px solid var(--cm-line); } .cm-pagination .page-numbers.current { background: var(--cm-ink); color: var(--cm-paper); border-color: var(--cm-ink); } /* ---------- Footer ---------- */ .cm-footer { background: var(--cm-night); color: var(--cm-paper); padding-block: clamp(4rem, 8vw, 7rem) 2.5rem; } .cm-footer__lockup { padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid rgba(250, 248, 245, 0.15); margin-bottom: clamp(3rem, 6vw, 5rem); display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; } .cm-footer__display { font-family: var(--cm-font-display); font-size: var(--cm-text-3xl); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; margin: 0; max-width: 18ch; text-wrap: balance; } .cm-footer__cta { padding: 1rem 2rem; } .cm-footer__cta.cm-btn--primary { background: var(--cm-paper); color: var(--cm-ink); border-color: var(--cm-paper); } .cm-footer__cta.cm-btn--primary:hover { background: var(--cm-paper-deep); border-color: var(--cm-paper-deep); } .cm-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: clamp(2rem, 4vw, 3.5rem); } .cm-footer__grid--three { grid-template-columns: 1.4fr 1fr 1.3fr; } @media (max-width: 960px) { .cm-footer__grid, .cm-footer__grid--three { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .cm-footer__grid, .cm-footer__grid--three { grid-template-columns: 1fr; } } .cm-footer__col .cm-brand { color: var(--cm-paper); } .cm-footer__heading { font-family: var(--cm-font-body); font-size: var(--cm-text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250, 248, 245, 0.55); margin: 0 0 1.4rem; font-weight: 500; } .cm-footer__heading--gap { margin-top: 2rem; } .cm-footer__credit { margin: 0; font-size: var(--cm-text-xs); letter-spacing: 0.04em; color: rgba(250, 248, 245, 0.45); font-style: italic; } .cm-footer__menu, .cm-footer__contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.8rem; font-size: var(--cm-text-base); } .cm-footer__menu a, .cm-footer__contact a { color: rgba(250, 248, 245, 0.8); text-decoration: none; transition: color var(--cm-dur-fast) var(--cm-ease-out); } .cm-footer__menu a:hover, .cm-footer__contact a:hover { color: var(--cm-paper); } .cm-footer__tagline { margin: 1rem 0 0.5rem; font-style: italic; color: var(--cm-paper); font-family: var(--cm-font-display); font-size: var(--cm-text-lg); } .cm-footer__about { color: rgba(250, 248, 245, 0.65); margin: 0 0 1.5rem; max-width: 30ch; } .cm-footer__newsletter-label { display: block; font-size: var(--cm-text-sm); color: rgba(250, 248, 245, 0.7); margin-bottom: 0.8rem; } .cm-footer__newsletter-row { display: flex; border-bottom: 1px solid rgba(250, 248, 245, 0.3); } .cm-footer__newsletter-row input { flex: 1; background: transparent; border: 0; color: var(--cm-paper); padding: 0.7rem 0; font-size: var(--cm-text-base); } .cm-footer__newsletter-row input::placeholder { color: rgba(250, 248, 245, 0.4); } .cm-footer__newsletter-row input:focus { outline: 0; } .cm-footer__newsletter-btn { background: transparent; border: 0; color: var(--cm-paper); padding: 0.7rem 0 0.7rem 1rem; font-size: var(--cm-text-xs); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; } .cm-footer__bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: clamp(3rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid rgba(250, 248, 245, 0.15); font-size: var(--cm-text-xs); color: rgba(250, 248, 245, 0.55); letter-spacing: 0.04em; } .cm-footer__copy { margin: 0; } .cm-footer__legal { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; } .cm-footer__legal a { color: inherit; text-decoration: none; } .cm-footer__legal a:hover { color: var(--cm-paper); } /* ---------- Social icons ---------- */ .cm-social { list-style: none; display: flex; gap: 0.75rem; margin: 0; padding: 0; } .cm-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid currentColor; border-radius: 50%; color: inherit; opacity: 0.65; transition: opacity var(--cm-dur-fast) var(--cm-ease-out), transform var(--cm-dur-fast) var(--cm-ease-out); } .cm-social a:hover { opacity: 1; transform: translateY(-2px); } .cm-social--lg a { width: 44px; height: 44px; } /* ---------- Placeholders ---------- */ .cm-placeholder { background: linear-gradient(135deg, var(--cm-paper-deep) 0%, var(--cm-line) 100%), repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,0.02) 8px 16px); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .cm-placeholder::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(184, 149, 106, 0.15), transparent 60%); pointer-events: none; } .cm-placeholder__label { font-family: var(--cm-font-mono); font-size: var(--cm-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cm-ink-faint); padding: 0.4rem 0.8rem; background: rgba(250, 248, 245, 0.85); border: 1px solid var(--cm-line); z-index: 1; } .cm-placeholder--portrait { aspect-ratio: 3 / 4; } .cm-placeholder--landscape { aspect-ratio: 16 / 10; } .cm-placeholder--cinema { aspect-ratio: 21 / 9; } .cm-placeholder--square { aspect-ratio: 1 / 1; } .cm-placeholder--tall { aspect-ratio: 2 / 3; } .cm-placeholder--wide { aspect-ratio: 16 / 9; } /* ---------- Reveal-on-scroll utility ---------- */ /* Failsafe: if JS never adds .is-visible (script blocked, slow CDN, adblocker etc.) the page would otherwise sit with hidden content forever. After 3s of no JS, this animation force-reveals everything over 0.6s so the site never looks broken. The .is-visible path cancels the animation, so the normal scroll-driven reveal still wins when JS is healthy. */ @keyframes cm-reveal-failsafe { to { opacity: 1; transform: none; } } [data-cm-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--cm-ease-out), transform 1s var(--cm-ease-out); transition-delay: var(--cm-reveal-delay, 0s); animation: cm-reveal-failsafe 0.6s 3s var(--cm-ease-out) forwards; } [data-cm-reveal].is-visible { opacity: 1; transform: translateY(0); animation: none; } [data-cm-reveal-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--cm-ease-out), transform 0.9s var(--cm-ease-out); animation: cm-reveal-failsafe 0.6s 3s var(--cm-ease-out) forwards; } [data-cm-reveal-stagger].is-visible > * { opacity: 1; transform: translateY(0); animation: none; } [data-cm-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.08s; } [data-cm-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.16s; } [data-cm-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.24s; } [data-cm-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.32s; } [data-cm-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 0.40s; } [data-cm-reveal-stagger].is-visible > *:nth-child(n+7) { transition-delay: 0.48s; } /* ---------- 404 ---------- */ .cm-404 { text-align: center; padding-block: clamp(4rem, 10vw, 8rem); } .cm-404__actions { display: inline-flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; } .cm-404__search { margin-top: 3rem; } /* ---------- Search form ---------- */ .cm-search { display: flex; border-bottom: 1px solid var(--cm-line); max-width: 480px; margin-inline: auto; } .cm-search__input { flex: 1; border: 0; background: transparent; padding: 0.8rem 0; font-size: var(--cm-text-base); color: var(--cm-ink); } .cm-search__input:focus { outline: 0; } .cm-search__btn { background: transparent; border: 0; cursor: pointer; padding: 0.5rem 0.8rem; color: var(--cm-ink); } /* ---------- Single post extras ---------- */ .cm-single__hero { margin-bottom: clamp(2rem, 6vw, 5rem); } .cm-single__hero-img { width: 100%; height: auto; max-height: 80vh; object-fit: cover; } .cm-single__meta { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; font-size: var(--cm-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-ink-faint); } .cm-single__cat a { color: var(--cm-accent-deep); text-decoration: none; } .cm-post-tags { font-size: var(--cm-text-sm); color: var(--cm-ink-faint); } .cm-post-tags a { color: var(--cm-ink); text-decoration: underline; text-underline-offset: 3px; } .cm-post-nav { display: flex; justify-content: space-between; gap: 2rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--cm-line); font-family: var(--cm-font-display); font-size: var(--cm-text-lg); } .cm-post-nav a { text-decoration: none; color: inherit; } .cm-post-nav a:hover { color: var(--cm-accent-deep); } /* Section variants */ .cm-section--statement { padding-block: clamp(5rem, 12vw, 10rem); } .cm-section--statement .cm-display { margin-top: 1rem; }