/* * The client-facing surface. Everything here is themed from the Client row via * --client-* custom properties set inline on , so adding a client is a * database insert rather than a stylesheet edit. */ /* The theme is the client's decision, never the visitor's OS: repainting a white-labelled page to someone's dark mode pairs their accent with a background they never approved. */ .client[data-theme="dark"] { --ink: #ececec; --ink-soft: #a0a0a0; --rule: #333; --page: #141414; --panel: #1e1e1e; } .client[data-heading="serif"] { --font-heading: var(--font-serif); } /* Client overrides land last so a half-filled brand kit still coheres. */ .client { background: var(--client-page, var(--page)); color: var(--client-ink, var(--ink)); } .client h1, .client h2, .client .hero__title { font-family: var(--font-heading); } /* --- Hero ----------------------------------------------------------------- */ .hero { border-bottom: 3px solid var(--client-accent); background-color: var(--client-accent); background-size: cover; background-position: center; } .hero__inner { max-width: 1140px; margin: 0 auto; padding: 2.5rem 1.5rem; color: var(--client-accent-contrast); } .hero--image { position: relative; } .hero--image .hero__inner { position: relative; padding: 6.5rem 1.5rem; min-height: 340px; display: flex; flex-direction: column; justify-content: center; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); } /* The scrim follows the text rather than washing the whole picture: heaviest behind the words, fading to nothing over the part of the photograph worth seeing. A flat top-to-bottom gradient does one of those jobs badly. */ .hero--image::before { content: ""; position: absolute; inset: 0; } .hero--left.hero--image::before { background: linear-gradient(100deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.08) 78%, rgba(0, 0, 0, 0) 100%); } .hero--right.hero--image::before { background: linear-gradient(260deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.08) 78%, rgba(0, 0, 0, 0) 100%); } .hero--center.hero--image::before { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55)); } .hero--right .hero__inner { text-align: right; align-items: flex-end; } .hero--center .hero__inner { text-align: center; align-items: center; } .hero--right .hero__body, .hero--center .hero__body { margin-left: auto; } .hero--center .hero__body { margin-right: auto; } .hero__title { display: inline-block; font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; line-height: 1.15; color: inherit; text-decoration: none; } .hero__tagline { margin: 0.5rem 0 0; font-size: 1.05rem; opacity: 0.92; } .hero__body { margin: 0.75rem 0 0; max-width: 60ch; opacity: 0.88; } .hero__logo { display: inline-block; } .hero__logo img { max-height: 72px; max-width: min(100%, 340px); width: auto; display: block; } /* A sideways fade needs width to work. On a phone there isn't any, so the gradient goes vertical and the text returns to the left — an angled scrim at 400px just darkens everything unevenly. Must come after the alignment rules: same specificity, so source order decides. */ @media (max-width: 700px) { .hero--image::before, .hero--left.hero--image::before, .hero--right.hero--image::before { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.62)); } .hero--right .hero__inner, .hero--center .hero__inner { text-align: left; align-items: flex-start; } .hero--right .hero__body, .hero--center .hero__body { margin-left: 0; } .hero--image .hero__inner { padding: 3.5rem 1.25rem; min-height: 240px; } } /* --- Layout --------------------------------------------------------------- */ .client__main { max-width: 1140px; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; } .client__footer { padding: 1.5rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 0.85rem; text-align: center; } /* --- Video cards ---------------------------------------------------------- */ /* auto-fit rather than a fixed three, so a client with two videos doesn't leave a ragged hole. */ .grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } @media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } } .card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--page); transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease; } .card__link:hover, .card__link:focus-visible { border-color: var(--client-accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09); } /* A 16:9 box so a missing thumbnail doesn't change the layout. */ .card__thumb { position: relative; aspect-ratio: 16 / 9; background: var(--panel); display: flex; align-items: center; justify-content: center; overflow: hidden; } .card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .card__placeholder { font-size: 1.75rem; color: var(--ink-soft); opacity: 0.5; } .card__duration { position: absolute; right: 0.5rem; bottom: 0.5rem; padding: 0.1rem 0.4rem; border-radius: 3px; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 0.75rem; font-variant-numeric: tabular-nums; } .card__body { padding: 0.9rem 1rem 1.1rem; } .card__title { margin: 0; font-size: 1.05rem; line-height: 1.35; } .card__blurb { margin: 0.4rem 0 0; color: var(--ink-soft); font-size: 0.9rem; } /* --- One video ------------------------------------------------------------ */ .video__title { font-size: 1.5rem; margin: 0 0 1rem; } /* Intrinsic ratio keeps the iframe responsive without JS. */ .video__frame { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; border-radius: var(--radius); } .video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video__description { margin-top: 1.5rem; } .video__back { margin-top: 2rem; } /* --- Stats a client's own audience sees ----------------------------------- */ .stats__caveat { background: var(--panel); border-left: 3px solid var(--client-accent); padding: 1rem 1.25rem; font-size: 0.92rem; } .stats__caveat h2 { margin: 0 0 0.5rem; font-size: 1rem; } .stats__caveat p { margin: 0 0 0.5rem; } /* --- The passcode gate ---------------------------------------------------- */ .unlock { max-width: 420px; margin: 3rem auto; padding: 0 1.5rem; } .unlock h1 { font-size: 1.4rem; margin-bottom: 0.75rem; } .unlock .errors { margin-bottom: 1rem; }