/** * Charme home screen. * * Scoped behind `ch-` so it sits alongside the theme stylesheet without * fighting it. The brand colour still comes from the admin theme options * (--primary-color, set on by the master layout); everything here is * derived from it or from a neutral scale, so re-branding in the admin * continues to re-brand this page. * * Mobile-first. Every breakpoint is min-width. */ .ch-section, .ch-hero { --ch-primary: var(--primary-color, #3ca5c6); --ch-on-primary: var(--font-color, #ffffff); --ch-ink: #17141a; --ch-ink-soft: #55505e; --ch-ink-faint: #857f90; --ch-surface: #ffffff; --ch-surface-alt: #faf7f8; --ch-surface-warm: #fdf6f4; --ch-line: #ece7ea; --ch-accent: #b8607a; --ch-gold: #c8a24a; --ch-radius-sm: 10px; --ch-radius: 18px; --ch-radius-lg: 28px; --ch-shadow-sm: 0 2px 8px rgba(23, 20, 26, .06); --ch-shadow: 0 12px 32px rgba(23, 20, 26, .09); --ch-shadow-lg: 0 24px 60px rgba(23, 20, 26, .13); --ch-gap: 1.25rem; --ch-ease: cubic-bezier(.22, .61, .36, 1); } /* ------------------------------------------------------------- primitives */ .ch-section *, .ch-hero * { box-sizing: border-box; } .ch-section { padding: 3rem 0; background: var(--ch-surface); color: var(--ch-ink); /* Sections carry full-bleed decoration; never let it widen the document. */ overflow: hidden; } .ch-section--categories, .ch-section--why, .ch-section--testimonials { background: var(--ch-surface-alt); } .ch-eyebrow { margin: 0 0 .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ch-accent); } .ch-eyebrow--light { color: rgba(255, 255, 255, .82); } .ch-section__head { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.75rem; } /* * The theme claims the bare
tag site-wide for its own site header: * * header { position:absolute; top:52px; left:0; width:100%; z-index:4 } * * A section head marked up as
was therefore torn out of flow and * pinned to the top of the document -- nine of them stacked on top of each * other. The markup now uses a div, and this keeps the head in flow whatever * element it is written with: two classes outrank a bare tag selector, so it * holds regardless of which stylesheet loads last. */ .ch-section .ch-section__head, .ch-hero .ch-section__head { position: static; top: auto; left: auto; z-index: auto; } .ch-section__head--center { text-align: center; align-items: center; } .ch-section__title { margin: 0; font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.35rem); line-height: 1.18; font-weight: 700; letter-spacing: -.02em; color: var(--ch-ink); /* Long service and category names must wrap, not spill. */ overflow-wrap: anywhere; } .ch-section__subtitle { margin: 2.25rem 0 1.25rem; font-size: 1.05rem; font-weight: 600; color: var(--ch-ink-soft); } .ch-section__lead { margin: .6rem 0 0; max-width: 56ch; color: var(--ch-ink-soft); line-height: 1.65; } .ch-section__head--center .ch-section__lead { margin-inline: auto; } .ch-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .95rem; color: var(--ch-primary); text-decoration: none; white-space: nowrap; } .ch-link:hover, .ch-link:focus-visible { color: var(--ch-accent); text-decoration: underline; } .ch-link i { transition: transform .25s var(--ch-ease); } .ch-link:hover i { transform: translateX(3px); } /* ---------------------------------------------------------------- buttons */ .ch-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; /* 48px tall: comfortably above the 44px touch-target minimum. */ min-height: 48px; padding: .75rem 1.5rem; border: 1px solid transparent; border-radius: 999px; font-size: .95rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform .2s var(--ch-ease), box-shadow .2s var(--ch-ease), background-color .2s var(--ch-ease), color .2s var(--ch-ease); } .ch-btn--primary { background: var(--ch-primary); color: var(--ch-on-primary); box-shadow: var(--ch-shadow-sm); } .ch-btn--primary:hover { color: var(--ch-on-primary); transform: translateY(-2px); box-shadow: var(--ch-shadow); } .ch-btn--ghost { background: transparent; border-color: var(--ch-line); color: var(--ch-ink); } .ch-btn--ghost:hover { border-color: var(--ch-primary); color: var(--ch-primary); } .ch-btn--light { background: #fff; color: var(--ch-ink); } .ch-btn--light:hover { color: var(--ch-primary); transform: translateY(-2px); } .ch-btn--block { width: 100%; } .ch-btn--lg { min-height: 54px; padding: .9rem 2rem; font-size: 1rem; } /* * Icon colour. * * The theme's icon script swaps each injected SVG's hard-coded stroke for * var(--Iconsax-Color). Nothing defines that variable outside the theme's own * components, so on this page the stroke resolved to `none` and every icon * rendered as an empty box -- the blank tiles in "Why Charme", the missing * rating stars, the absent arrows on the "View all" links. Binding it to * currentColor lets each icon simply take the colour of the text around it. */ .ch-section [icon-name], .ch-hero [icon-name] { --Iconsax-Color: currentColor; } /* A visible focus ring everywhere, for keyboard users. */ .ch-section :focus-visible, .ch-hero :focus-visible { outline: 3px solid var(--ch-primary); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .ch-section *, .ch-hero * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ------------------------------------------------------------------- hero */ .ch-hero { position: relative; /* * The theme's header is position:absolute and overlays the top of the * page, and it grows to ~145px once the nav wraps. Nothing reserves room * for it, so the hero has to: this top padding is what keeps the heading * clear of the header at every width. */ padding: 9.75rem 0 3rem; background: radial-gradient(120% 90% at 12% 0%, var(--ch-surface-warm) 0%, transparent 60%), linear-gradient(180deg, #fff 0%, var(--ch-surface-alt) 100%); overflow: hidden; } /* * Scrim behind the overlaid header. * * The theme's header is position:absolute over the top of the page, its nav is * white, and both configured logo assets are white-on-transparent -- every * other page puts a dark breadcrumb image behind it. This hero is light, so * without a backdrop the logo and nav vanish. A soft dark-to-transparent wash * continues the promo bar above it and dissolves into the hero, which keeps * the header readable without darkening the design. */ .ch-hero::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 200px; background: linear-gradient(180deg, rgba(20, 24, 46, .82) 0%, rgba(20, 24, 46, .45) 45%, rgba(20, 24, 46, 0) 100%); /* Below the header (z-index 4), above the hero's own background. */ z-index: 1; pointer-events: none; } /* Hero content sits above the scrim. */ .ch-hero__grid { z-index: 2; } .ch-hero__glow { position: absolute; inset-block-start: -30%; inset-inline-end: -18%; width: 46rem; max-width: 90vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ch-primary) 22%, transparent) 0%, transparent 68%); pointer-events: none; } .ch-hero__grid { position: relative; display: grid; gap: 2.5rem; align-items: center; } .ch-hero__title { margin: 0 0 1rem; font-size: clamp(2rem, 1.35rem + 3vw, 3.75rem); line-height: 1.08; font-weight: 700; letter-spacing: -.03em; color: var(--ch-ink); overflow-wrap: anywhere; } .ch-hero__accent { display: inline-block; background: linear-gradient(120deg, var(--ch-primary), var(--ch-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .ch-hero__lead { margin: 0 0 1.75rem; max-width: 52ch; font-size: clamp(1rem, .96rem + .2vw, 1.13rem); line-height: 1.65; color: var(--ch-ink-soft); } /* ----------------------------------------------------------- hero: search */ .ch-search { position: relative; display: grid; gap: .75rem; padding: .75rem; background: #fff; border: 1px solid var(--ch-line); border-radius: var(--ch-radius-lg); box-shadow: var(--ch-shadow); } .ch-search__field { display: flex; flex-direction: column; gap: .15rem; min-width: 0; padding: .55rem .9rem; border-radius: var(--ch-radius); background: var(--ch-surface-alt); } .ch-search__label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ch-ink-faint); } .ch-search__control { display: flex; align-items: center; gap: .5rem; width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: var(--ch-ink); font-size: .98rem; text-align: start; } .ch-search__control i { flex: none; color: var(--ch-primary); } .ch-search__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ch-search__input { width: 100%; min-width: 0; border: 0; background: none; color: var(--ch-ink); font-size: .98rem; } .ch-search__input::placeholder { color: var(--ch-ink-faint); } .ch-search__input:focus { outline: none; } .ch-search__spinner { flex: none; width: 16px; height: 16px; border: 2px solid var(--ch-line); border-top-color: var(--ch-primary); border-radius: 50%; animation: ch-spin .7s linear infinite; } @keyframes ch-spin { to { transform: rotate(360deg); } } .ch-search__submit { width: 100%; } .ch-search, .ch-hero__trust { max-width: 46rem; } .ch-search__results { position: absolute; inset-inline: 0; top: calc(100% + .5rem); z-index: 40; max-height: 22rem; margin: 0; padding: .4rem; overflow-y: auto; list-style: none; background: #fff; border: 1px solid var(--ch-line); border-radius: var(--ch-radius); box-shadow: var(--ch-shadow-lg); } .ch-search__results[hidden] { display: none; } .ch-suggestion { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .6rem .7rem; border: 0; border-radius: var(--ch-radius-sm); background: none; color: var(--ch-ink); font-size: .95rem; text-align: start; text-decoration: none; cursor: pointer; } .ch-suggestion:hover, .ch-suggestion[aria-selected='true'] { background: var(--ch-surface-warm); color: var(--ch-ink); } .ch-suggestion img { flex: none; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; } .ch-suggestion--empty { color: var(--ch-ink-faint); cursor: default; } .ch-suggestion--empty:hover { background: none; } /* ------------------------------------------------------- hero: chips/trust */ .ch-hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; } .ch-chip { display: inline-block; padding: .45rem 1rem; border: 1px solid var(--ch-line); border-radius: 999px; background: #fff; color: var(--ch-ink-soft); font-size: .85rem; text-decoration: none; transition: all .2s var(--ch-ease); } .ch-chip:hover { border-color: var(--ch-primary); color: var(--ch-primary); transform: translateY(-1px); } .ch-hero__trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 1rem; margin: 2rem 0 0; } .ch-hero__trust dt { font-size: .92rem; font-weight: 700; color: var(--ch-ink); } .ch-hero__trust dd { margin: .15rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--ch-ink-faint); } /* -------------------------------------------------------- hero: showcase */ .ch-hero__showcase { /* On phones the collage is decorative weight the page does not need. */ display: none; } .ch-hero__cards { display: grid; grid-template-columns: repeat(2, 1fr); /* * The collage needs a definite height of its own. Without one the tall * card's grid area was sized by the two cards beside it (646px) while its * image sized itself from its own aspect-ratio (420px), leaving a blank * strip between the photo and its caption. Fixing the container's ratio * and giving both rows an equal share lets every image fill its card. */ grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 4 / 5; gap: 1rem; /* * The collage is portrait, so its height grows 1.25x with the column it * sits in. Unbounded, that reached 695x869 on a 1920 screen and pushed the * hero past the fold. Capping the width keeps it a supporting image beside * the copy instead of the thing that sets the hero's height. */ max-width: 26rem; margin-inline-start: auto; } .ch-hero__card { position: relative; overflow: hidden; border-radius: var(--ch-radius-lg); background: var(--ch-surface-alt); box-shadow: var(--ch-shadow); } .ch-hero__card a { display: block; color: inherit; text-decoration: none; } .ch-hero__card, .ch-hero__card a { /* Grid and flex children default to min-height:auto, which would stop the card shrinking to its track. */ min-height: 0; height: 100%; } .ch-hero__card img { display: block; width: 100%; height: 100%; object-fit: cover; /* These are portraits; bias the crop upward so faces are not cut off. */ object-position: 50% 22%; } .ch-hero__card--1 { grid-row: span 2; } .ch-hero__card-body { position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-direction: column; gap: .1rem; padding: 2.5rem 1rem .9rem; background: linear-gradient(180deg, transparent, rgba(23, 20, 26, .82)); color: #fff; } .ch-hero__card-title { font-size: .95rem; font-weight: 600; line-height: 1.3; } .ch-hero__card-price { font-size: .82rem; color: rgba(255, 255, 255, .85); } /* The placeholder collage inherits the same grid, so its tiles just fill. */ .ch-skeleton { background: linear-gradient(100deg, var(--ch-surface-alt) 20%, #f1ecee 40%, var(--ch-surface-alt) 60%); background-size: 220% 100%; animation: ch-shimmer 1.4s ease-in-out infinite; } @keyframes ch-shimmer { to { background-position: -220% 0; } } /* ------------------------------------------------------------- categories */ .ch-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr)); gap: var(--ch-gap); margin: 0; padding: 0; list-style: none; } .ch-category { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem .5rem; border: 1px solid transparent; border-radius: var(--ch-radius); background: #fff; color: var(--ch-ink); text-align: center; text-decoration: none; transition: all .25s var(--ch-ease); } .ch-category:hover { border-color: var(--ch-line); color: var(--ch-ink); transform: translateY(-4px); box-shadow: var(--ch-shadow); } .ch-category__media { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; overflow: hidden; border-radius: 50%; background: var(--ch-surface-warm); } .ch-category__media img { width: 100%; height: 100%; object-fit: cover; } .ch-category__name { font-size: .9rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; } .ch-category__count { font-size: .76rem; color: var(--ch-ink-faint); } /* ------------------------------------------------------------------ grids */ .ch-grid { display: grid; gap: var(--ch-gap); } .ch-grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); } .ch-grid--blogs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); } /* ------------------------------------------------------------------ cards */ .ch-card { display: flex; flex-direction: column; /* min-width:0 stops long titles from forcing the grid track wider. */ min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--ch-line); border-radius: var(--ch-radius); transition: transform .25s var(--ch-ease), box-shadow .25s var(--ch-ease); } .ch-card:hover { transform: translateY(-4px); box-shadow: var(--ch-shadow); } .ch-card__media { position: relative; display: block; overflow: hidden; background: var(--ch-surface-alt); } .ch-card__media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; /* Beauty photography is nearly always a portrait. Centring a 4:3 crop on one cuts the head off and leaves a torso, so bias the crop upward. */ object-position: 50% 22%; transition: transform .4s var(--ch-ease); } .ch-card:hover .ch-card__media img { transform: scale(1.04); } .ch-card__media--avatar img { aspect-ratio: 1 / 1; } .ch-card__body { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1.1rem; } .ch-card__kicker { margin: 0; display: flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ch-accent); } .ch-card__kicker--location { letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--ch-ink-faint); } .ch-card__title { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: 1.02rem; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; } .ch-card__title a { color: var(--ch-ink); text-decoration: none; } .ch-card__title a:hover { color: var(--ch-primary); } .ch-card__excerpt { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--ch-ink-soft); } .ch-card__provider { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; font-size: .85rem; color: var(--ch-ink-soft); text-decoration: none; } .ch-card__provider:hover { color: var(--ch-primary); } .ch-card__provider img { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .ch-card__provider span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ch-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; /* Pin price and rating to the card foot so buttons line up across a row. */ margin-top: auto; padding-top: .35rem; } .ch-card__actions { display: grid; /* Side by side only once each button has room for its own label. */ grid-template-columns: 1fr; gap: .5rem; } @media (min-width: 380px) { .ch-card__actions { grid-template-columns: 1fr 1fr; } } .ch-card__actions .ch-btn { padding-inline: .9rem; /* "View profile" wrapped to two lines while "Book Now" stayed on one, leaving the pair uneven. */ white-space: nowrap; } .ch-verified { display: inline-grid; place-items: center; color: var(--ch-primary); font-size: 1rem; } /* ------------------------------------------------------------------ price */ .ch-price { display: flex; align-items: baseline; gap: .4rem; margin: 0; flex-wrap: wrap; } .ch-price strong { font-size: 1.15rem; font-weight: 700; color: var(--ch-ink); } .ch-price del { font-size: .85rem; color: var(--ch-ink-faint); } .ch-price__label { font-size: .76rem; color: var(--ch-ink-faint); } /* ----------------------------------------------------------------- rating */ .ch-rating { display: inline-flex; align-items: center; gap: .28rem; margin: 0; font-size: .85rem; color: var(--ch-ink-soft); } .ch-rating__star, .ch-testimonial__rating .is-filled { color: var(--ch-gold); } .ch-rating strong { color: var(--ch-ink); } .ch-rating__count { color: var(--ch-ink-faint); } .ch-rating--none { font-size: .8rem; color: var(--ch-ink-faint); } /* ------------------------------------------------------------------- tags */ .ch-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; } .ch-tag { max-width: 100%; padding: .25rem .6rem; border-radius: 999px; background: var(--ch-surface-warm); color: var(--ch-ink-soft); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ----------------------------------------------------------------- badges */ .ch-badge { position: absolute; inset-block-start: .75rem; inset-inline-start: .75rem; padding: .3rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .02em; } .ch-badge--sale { background: var(--ch-accent); color: #fff; } .ch-badge--offer { position: static; display: inline-block; margin-bottom: .6rem; background: rgba(255, 255, 255, .92); color: var(--ch-ink); } /* ----------------------------------------------------------------- offers */ .ch-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--ch-gap); } .ch-offer { position: relative; display: flex; min-height: 15rem; overflow: hidden; border-radius: var(--ch-radius-lg); background: linear-gradient(135deg, var(--ch-accent), var(--ch-primary)); isolation: isolate; } .ch-offer__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .5; } .ch-offer__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .5rem; width: 100%; padding: 1.5rem; background: linear-gradient(180deg, transparent 20%, rgba(23, 20, 26, .68)); color: #fff; } .ch-offer__title { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; } .ch-offer__text { margin: 0; max-width: 40ch; font-size: .9rem; line-height: 1.55; color: rgba(255, 255, 255, .88); } /* --------------------------------------------------------------- benefits */ .ch-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--ch-gap); margin: 0; padding: 0; list-style: none; } .ch-benefit { padding: 1.5rem; background: #fff; border: 1px solid var(--ch-line); border-radius: var(--ch-radius); } .ch-benefit__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .9rem; border-radius: 14px; background: var(--ch-surface-warm); color: var(--ch-primary); font-size: 1.35rem; } .ch-benefit__title { margin: 0 0 .4rem; font-size: 1.02rem; font-weight: 650; } .ch-benefit__text { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--ch-ink-soft); } /* ----------------------------------------------------------- testimonials */ .ch-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--ch-gap); margin: 0; padding: 0; list-style: none; } .ch-testimonial { display: flex; flex-direction: column; gap: .8rem; height: 100%; margin: 0; padding: 1.6rem; background: #fff; border: 1px solid var(--ch-line); border-radius: var(--ch-radius); } .ch-testimonial__rating { display: flex; gap: .15rem; margin: 0; color: var(--ch-line); } .ch-testimonial__quote { margin: 0; font-size: .98rem; line-height: 1.7; color: var(--ch-ink-soft); } .ch-testimonial__author { margin-top: auto; font-weight: 650; color: var(--ch-ink); } /* ----------------------------------------------------------- provider CTA */ .ch-section--provider-cta { background: var(--ch-surface); } .ch-provider-cta { position: relative; display: grid; gap: 2rem; align-items: center; padding: 2.5rem 1.75rem; overflow: hidden; border-radius: var(--ch-radius-lg); background: linear-gradient(135deg, var(--ch-ink) 0%, #3a2d3d 55%, var(--ch-accent) 140%); color: #fff; } .ch-provider-cta .ch-section__title { color: #fff; } .ch-provider-cta__lead { margin: .75rem 0 0; max-width: 48ch; line-height: 1.65; color: rgba(255, 255, 255, .82); } .ch-provider-cta__points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .6rem 1.25rem; margin: 1.5rem 0; padding: 0; list-style: none; } .ch-provider-cta__points li { display: flex; align-items: flex-start; gap: .5rem; font-size: .92rem; line-height: 1.5; color: rgba(255, 255, 255, .9); } .ch-provider-cta__points i { flex: none; margin-top: .1rem; color: var(--ch-gold); } .ch-provider-cta__media { display: none; } .ch-provider-cta__media img { display: block; width: 100%; max-width: 22rem; margin-inline: auto; height: auto; } /* --------------------------------------------------------------- newsletter */ .ch-newsletter { display: grid; gap: 1.5rem; align-items: center; padding: 2rem 1.75rem; border-radius: var(--ch-radius-lg); background: var(--ch-surface-warm); border: 1px solid var(--ch-line); } .ch-newsletter__lead { margin: .5rem 0 0; color: var(--ch-ink-soft); } .ch-newsletter__form { display: flex; flex-wrap: wrap; gap: .6rem; } .ch-newsletter__input { flex: 1 1 14rem; min-width: 0; min-height: 48px; padding: .75rem 1.1rem; border: 1px solid var(--ch-line); border-radius: 999px; background: #fff; color: var(--ch-ink); font-size: .95rem; } .ch-newsletter__input::placeholder { color: var(--ch-ink-faint); } /* ------------------------------------------------------------ promo video */ .ch-section--video { background: var(--ch-surface-alt); } /* * A scroll-snap rail. These are portrait clips, so they read as a row of * reels; a native scroller handles touch, trackpad and keyboard without a * slider library, and each card snaps into place. */ .ch-reels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13rem, 15rem); gap: var(--ch-gap); margin: 0; padding: .25rem .25rem 1rem; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; } .ch-reel { scroll-snap-align: start; min-width: 0; } .ch-reel__trigger, .ch-reel__player { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; padding: 0; border: 1px solid var(--ch-line); border-radius: var(--ch-radius); background: var(--ch-ink); cursor: pointer; transition: transform .25s var(--ch-ease), box-shadow .25s var(--ch-ease); } .ch-reel__trigger:hover { transform: translateY(-4px); box-shadow: var(--ch-shadow); } .ch-reel__poster, .ch-reel__media { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; } .ch-reel__poster--blank { background: linear-gradient(160deg, var(--ch-accent), var(--ch-primary)); } /* Vary the stand-in panels so a row of uploads does not read as one flat block. */ .ch-reel:nth-child(3n + 2) .ch-reel__poster--blank { background: linear-gradient(160deg, var(--ch-primary), #2f2a44); } .ch-reel:nth-child(3n) .ch-reel__poster--blank { background: linear-gradient(160deg, #2f2a44, var(--ch-accent)); } .ch-reel__play { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 3.5rem; height: 3.5rem; padding-inline-start: .2rem; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ch-ink); box-shadow: var(--ch-shadow); transition: transform .25s var(--ch-ease); } .ch-reel__trigger:hover .ch-reel__play { transform: translate(-50%, -50%) scale(1.08); } .ch-reel__label { position: absolute; inset-inline: 0; bottom: 0; padding: 2.5rem .85rem .85rem; background: linear-gradient(180deg, transparent, rgba(23, 20, 26, .85)); color: #fff; font-size: .85rem; font-weight: 600; line-height: 1.35; text-align: start; } .ch-reel__player { cursor: default; } @media (min-width: 768px) { .ch-reels { grid-auto-columns: minmax(14rem, 16rem); } } /* ------------------------------------------------ availability & portfolio */ .ch-card__meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin: 0; } .ch-availability { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; color: #2f7d5d; } .ch-availability__dot { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; } .ch-portfolio { display: flex; gap: .35rem; margin: 0; padding: 0; list-style: none; } .ch-portfolio li { flex: 1 1 0; min-width: 0; } .ch-portfolio img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; } /* ------------------------------------------------------------ how it works */ .ch-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--ch-gap); margin: 0; padding: 0; list-style: none; counter-reset: ch-step; } .ch-step { position: relative; padding: 1.5rem 1.25rem; background: #fff; border: 1px solid var(--ch-line); border-radius: var(--ch-radius); } .ch-step__number { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: .9rem; border-radius: 50%; background: var(--ch-primary); color: var(--ch-on-primary); font-size: .95rem; font-weight: 700; } .ch-step__title { margin: 0 0 .35rem; font-size: 1rem; font-weight: 650; } .ch-step__text { margin: 0; font-size: .87rem; line-height: 1.6; color: var(--ch-ink-soft); } /* -------------------------------------------------------- custom request */ .ch-section--request { background: var(--ch-surface-alt); } .ch-request { display: grid; gap: 1.5rem; align-items: center; padding: 2rem 1.75rem; border: 1px solid var(--ch-line); border-radius: var(--ch-radius-lg); background: #fff; } .ch-request__lead { margin: .6rem 0 0; max-width: 60ch; line-height: 1.65; color: var(--ch-ink-soft); } @media (min-width: 768px) { .ch-request { grid-template-columns: 1fr auto; padding: 2.5rem; } } /* --------------------------------------------------------- skeletons */ /* * The shape of a section before it has content. Shown when no location is * chosen yet, so the page reads as complete while the hero asks for one. */ .ch-skeletons { display: grid; gap: var(--ch-gap); } .ch-skeletons--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); } .ch-skeletons--categories { grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr)); } .ch-skeleton-card { display: flex; flex-direction: column; gap: .6rem; padding: 0 0 1.1rem; overflow: hidden; border: 1px solid var(--ch-line); border-radius: var(--ch-radius); background: #fff; } .ch-skeleton-card .ch-skeleton--line { margin-inline: 1.1rem; } .ch-skeleton-tile { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem .5rem; } .ch-skeleton--media { display: block; width: 100%; aspect-ratio: 4 / 3; } .ch-skeleton--circle { display: block; width: 4.5rem; height: 4.5rem; border-radius: 50%; } .ch-skeleton--line { display: block; height: .7rem; border-radius: 999px; } .ch-skeleton--short { width: 55%; } .ch-skeleton-tile .ch-skeleton--line { width: 70%; } /* ------------------------------------------------------- section states */ .ch-state { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 2.5rem 1.25rem; text-align: center; border: 1px dashed var(--ch-line); border-radius: var(--ch-radius); background: #fff; } .ch-state__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--ch-surface-warm); color: var(--ch-primary); font-size: 1.35rem; } .ch-state__title { margin: 0; font-size: 1.1rem; font-weight: 650; } .ch-state__text { margin: 0; max-width: 44ch; font-size: .92rem; line-height: 1.6; color: var(--ch-ink-soft); } .ch-state--error .ch-state__icon { background: #fdf1f1; color: #c0453f; } .ch-state .ch-btn { margin-top: .4rem; } /* ------------------------------------------------------------ breakpoints */ @media (min-width: 576px) { .ch-search__submit { width: auto; justify-self: start; } } @media (min-width: 768px) { .ch-section { padding: 4rem 0; } .ch-section__head { flex-direction: row; align-items: flex-end; justify-content: space-between; } .ch-section__head--center { flex-direction: column; align-items: center; } .ch-search { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; } .ch-search__submit { width: auto; height: 100%; } .ch-newsletter { grid-template-columns: 1.1fr 1fr; padding: 2.5rem; } .ch-provider-cta { padding: 3rem; } .ch-offer { min-height: 17rem; } } @media (min-width: 992px) { .ch-hero { padding: 9.5rem 0 4.5rem; } .ch-provider-cta { grid-template-columns: 1.25fr .75fr; } .ch-provider-cta__media { display: block; } } @media (min-width: 1200px) { .ch-section { padding: 5rem 0; } /* * The collage only earns its place once there is room for it beside the * copy. Splitting at 992px left the heading in a 359px column on a 1024 * screen and made the hero 1.35x the viewport; below 1200 the copy now * gets the full width and the collage steps aside. */ .ch-hero__grid { grid-template-columns: minmax(0, 1fr) auto; gap: 3.5rem; /* The theme's container keeps widening past 1920; without a ceiling the search bar and trust row stretch to over 1000px and the hero reads as sparse rather than spacious. */ max-width: 82.5rem; margin-inline: auto; } .ch-hero__showcase { display: block; } .ch-categories { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); } }