/** * Hapster share control. * * Written against the theme's own design tokens (:root in style.css) so the * control reads as part of the system rather than as an embedded widget. Every * value below is either a token or derived from one — no ad-hoc colours. * * Accessibility rules that must survive restyling: * - every interactive element keeps a >=44x44px hit area (WCAG 2.2, 2.5.8) * - :focus-visible outlines stay >=3:1 against their background (1.4.11) * - nothing here may rely on hover alone to expose an action (1.4.13) */ /* * Declared on the panel as well as the control: share.js portals the panel to * while it is open, so it stops inheriting anything scoped to * .hapster-share. Theme tokens are fine — they live on :root — but this one is * local and would silently fall back to the hard-coded default. */ .hapster-share, .hapster-share__panel { --hc-accent-text: #33735e; } .hapster-share { position: relative; display: inline-flex; /* * --brand-accent-strong (#5FAE94) is a decorative fill colour. Measured * against white it is 2.64:1, which fails WCAG 1.4.3 for text (needs 4.5:1) * and 1.4.11 for a focus indicator (needs 3:1). Using it for the eyebrow, the * "copied" confirmation and the focus ring was a real AA failure. * * --hc-accent-text is the same hue darkened to 5.59:1 on white and 5.35:1 on * --off-white, so it passes as text on both surfaces the panel uses while * still reading as the Hapster green. The undarkened token stays for fills, * borders and icons, where it is decorative and accompanied by a text label. */ } /* ------------------------------------------------------------------ trigger */ /* * The trigger inherits the class list of the button it replaces, so on the * marketing pages it keeps the exact pill styling of the adjacent "Simuler le * ROI" CTA. These rules only add what the inherited classes do not provide. */ .hapster-share__trigger { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; cursor: pointer; font: inherit; line-height: 1.2; -webkit-tap-highlight-color: transparent; } /* * Base treatment. Styled here rather than by inheriting the block's Tailwind * utilities: those were measured NOT to resolve on this page (the old trigger * computed to 15.72px/400 despite carrying `text-sm font-semibold`, because the * fluid --fs-lead was winning), which is a large part of why the control looked * like it came from somewhere else. */ .hapster-share__trigger { padding: 0.625rem 1.125rem; border: 1px solid var(--hairline, #eceef1); border-radius: 999px; background: var(--hapster-surface, #fff); color: var(--ink-600, #2a3340); font-size: 0.875rem; font-weight: 600; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, transform 0.15s ease; } .hapster-share__trigger:hover { border-color: var(--ink-900, #0b0f14); color: var(--ink-900, #0b0f14); } /* * CTA-row variant — used where the control sits beside "Contactez-nous" and * "Simuler le ROI". * * Geometry is matched to those siblings, measured from the live page: * padding 14px 24px, 14px/700 type, pill radius, 1px border => a 50px box, * identical to the outlined ROI button. Share stays the tertiary action by * colour weight (hairline border, --ink-600 text) rather than by being smaller, * which is what made it read as a foreign element. */ .hapster-share__trigger--cta { min-height: 48px; padding: 0.875rem 1.5rem; font-size: 0.875rem; font-weight: 700; line-height: 1.25; } .hapster-share__trigger--cta:hover { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .hapster-share__trigger--cta:hover { transform: none; } } /* * Inline variant — the article-meta row in the blog-header block, where the * surrounding items are small muted text and a pill would be too loud. */ .hapster-share__trigger--inline { padding: 0.25rem 0.5rem; border-color: transparent; background: none; color: var(--text-gray, #66615a); font-size: 0.75rem; font-weight: 600; } .hapster-share__trigger--inline:hover { border-color: transparent; color: var(--ink-900, #0b0f14); } .hapster-share__trigger svg { flex: 0 0 auto; } .hapster-share[data-state="open"] .hapster-share__trigger { border-color: var(--brand-accent-strong, #5fae94); color: var(--brand-accent-strong, #5fae94); } .hapster-share :focus-visible, .hapster-share__panel :focus-visible { outline: 3px solid var(--hc-accent-text, #33735e); outline-offset: 2px; border-radius: 8px; } /* -------------------------------------------------------------------- panel */ /* * position: fixed, with the coordinates written by share.js on open. * * Absolute positioning was tried first and is wrong here. The control is dropped * into arbitrary prerendered markup, so it has no control over its ancestors: an * `overflow: hidden` or a `transform` anywhere above it would clip the panel or * change its containing block. It also has no idea whether the trigger sits at * the start or the end of its row — anchoring to the trigger's right edge put * the panel at x = -186px, off the left of the viewport, on /a-propos/. * * Fixed positioning plus a JS collision pass reproduces what Radix's collision * detection did in React and which the static export dropped. Coordinates are * set as inline styles; the values below are only the fallback for the moment * before the first positioning pass. */ .hapster-share__panel { position: fixed; z-index: 60; inset-block-start: 0; inset-inline-start: 0; width: min(22.5rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem; border: 1px solid var(--hairline, #eceef1); border-radius: var(--radius-2xl, 24px); background: var(--hapster-surface, #fff); box-shadow: 0 20px 48px rgb(8 20 30 / 16%); text-align: start; } .hapster-share__panel[hidden] { display: none; } .hapster-share__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-block-end: 0.875rem; border-block-end: 1px solid var(--hairline, #eceef1); } .hapster-share__eyebrow { margin: 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hc-accent-text, #33735e); } .hapster-share__close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; /* 44px hit area via padding; the visual box stays small and unobtrusive. */ width: 44px; height: 44px; margin: -0.75rem -0.5rem -0.75rem 0; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ink-400, #6b7585); cursor: pointer; } .hapster-share__close:hover { color: var(--ink-900, #0b0f14); background: var(--off-white, #fafaf8); } .hapster-share__doc-title { margin: 0.875rem 0 0; font-size: 0.9375rem; font-weight: 700; line-height: 1.35; color: var(--ink-900, #0b0f14); } .hapster-share__section-label { margin: 1.125rem 0 0.625rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hapster-muted, #66615a); } /* ------------------------------------------------------------ native share */ /* * Hidden until share.js confirms navigator.share exists. Rendering it * server-side and revealing it client-side keeps the HTML identical for every * visitor, which is required for full-page caching. */ .hapster-share__native { display: none; } [data-hapster-native-share="true"] .hapster-share__native { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 44px; margin-block-start: 1rem; padding: 0.75rem 1rem; border: 0; border-radius: 18px; background: color-mix(in srgb, var(--brand-accent-strong, #5fae94) 10%, transparent); color: var(--brand-accent-ink, #0a2a22); font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: background-color 0.15s ease; } [data-hapster-native-share="true"] .hapster-share__native:hover { background: color-mix(in srgb, var(--brand-accent-strong, #5fae94) 16%, transparent); } /* ----------------------------------------------------------------- networks */ /* * auto-fit rather than a fixed 3 columns: the provider list is configurable, and * a fixed grid left the four default networks as 3 + 1 with two empty cells. * This packs 4 onto one row in the 360px panel and still looks right with 3 or 5. */ .hapster-share__networks { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 0.625rem; margin: 0; padding: 0; list-style: none; } .hapster-share__network { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; min-height: 76px; padding: 0.75rem 0.5rem; border: 1px solid var(--hairline, #eceef1); border-radius: 18px; color: var(--ink-900, #0b0f14); text-align: center; text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease; } .hapster-share__network:hover, .hapster-share__network:focus-visible { border-color: var(--brand-accent-strong, #5fae94); background: color-mix(in srgb, var(--brand-accent-strong, #5fae94) 5%, transparent); } /* Icon is decorative — every tile carries a visible text label — but the darker tone keeps it legible for low-vision users at 20px. */ .hapster-share__network svg { color: var(--hc-accent-text, #33735e); } .hapster-share__network-label { font-size: 0.6875rem; font-weight: 700; line-height: 1; } /* --------------------------------------------------------------- copy link */ .hapster-share__copy { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 44px; margin-block-start: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--hairline, #eceef1); border-radius: 18px; background: none; color: var(--ink-900, #0b0f14); font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .hapster-share__copy:hover { border-color: var(--brand-accent-strong, #5fae94); background: color-mix(in srgb, var(--brand-accent-strong, #5fae94) 5%, transparent); } .hapster-share__copy-idle, .hapster-share__copy-done { display: inline-flex; align-items: center; gap: 0.5rem; } .hapster-share__copy-done { display: none; color: var(--hc-accent-text, #33735e); } .hapster-share__copy[data-copied="true"] .hapster-share__copy-idle { display: none; } .hapster-share__copy[data-copied="true"] .hapster-share__copy-done { display: inline-flex; } /* --ink-400 on --off-white measures 4.46:1, just under the 4.5:1 AA threshold. --hapster-muted is 5.87:1 on the same background. */ .hapster-share__url { margin: 0.75rem 0 0; padding: 0.5rem 0.75rem; border-radius: 12px; background: var(--off-white, #fafaf8); color: var(--hapster-muted, #66615a); font-size: 0.6875rem; line-height: 1.5; overflow-wrap: anywhere; } /* Row wrapper used when the control is appended to a singular view. */ .hapster-share-row { display: flex; justify-content: flex-start; margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--hairline, #eceef1); } /* ------------------------------------------------------------------ mobile */ /* * Below 40rem the popover becomes a bottom sheet. An absolutely positioned * 360px panel anchored to a button near the viewport edge would otherwise * overflow horizontally or be clipped by an ancestor's overflow. */ @media (max-width: 39.99rem) { /* !important overrides the inline coordinates written by share.js, which are for the anchored desktop panel and are meaningless for a full-width sheet. */ .hapster-share__panel { inset: auto 0 0 0 !important; width: 100% !important; max-height: 85vh; border-inline: 0; border-block-end: 0; border-start-start-radius: var(--radius-2xl, 24px); border-start-end-radius: var(--radius-2xl, 24px); border-end-start-radius: 0; border-end-end-radius: 0; padding-block-end: max(1.25rem, env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgb(8 20 30 / 20%); } .hapster-share__networks { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); } } @media (prefers-reduced-motion: reduce) { .hapster-share *, .hapster-share *::before, .hapster-share *::after { transition: none !important; animation: none !important; } } /* Forced-colors: keep borders visible when the palette is replaced. */ @media (forced-colors: active) { .hapster-share__panel, .hapster-share__network, .hapster-share__copy { border: 1px solid CanvasText; } .hapster-share :focus-visible { outline: 3px solid Highlight; } }