/*! * Captionzy components: pages, tools, cards, forms. Loaded only on pages that use Captionzy shortcodes. * 8px spacing rhythm, 10-16px radii, WCAG AA contrast, 44px touch targets. */ .cz-page { color-scheme: light; color: var(--cz-text); font-family: var(--cz-font-body); font-size: 16px; line-height: 1.6; /* Break out of narrow theme content columns so tools get room; never wider than the viewport. */ width: min(1160px, calc(100vw - 32px)); max-width: none !important; margin-left: calc(50% - min(580px, 50vw - 16px)) !important; margin-right: 0 !important; padding: 8px 0 48px; overflow-wrap: break-word; } .cz-page *, .cz-page *::before, .cz-page *::after { box-sizing: border-box; } .cz-page img, .cz-page svg, .cz-page canvas { max-width: 100%; } :is(.cz-page, .cz-contact, .cz-finder) [hidden] { display: none !important; } .cz-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .cz-ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; } /* Typography */ .cz-h1 { font-family: var(--cz-font-head); font-weight: 800; font-size: clamp(28px, 4.2vw, 40px); line-height: 1.15; color: var(--cz-ink); margin: 0 0 8px; letter-spacing: -.02em; } .cz-h2 { font-family: var(--cz-font-head); font-weight: 800; font-size: clamp(22px, 2.8vw, 28px); line-height: 1.2; color: var(--cz-ink); margin: 0 0 16px; } .cz-kicker { display: inline-block; font-weight: 600; font-size: 14px; letter-spacing: .02em; color: var(--cz-violet-strong); background: var(--cz-tint); border-radius: 999px; padding: 4px 12px; margin: 0 0 16px; } /* Breadcrumbs */ .cz-crumbs ol { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--cz-muted); } .cz-crumbs li + li::before { content: "/"; margin-right: 8px; color: #A79FBB; } .cz-crumbs a { color: var(--cz-muted); text-decoration: underline; text-underline-offset: 2px; } .cz-crumbs a:hover { color: var(--cz-ink); } /* Tool page head */ .cz-toolhead { margin: 0 0 24px; } .cz-toolhead__lead { font-size: 18px; color: var(--cz-muted); margin: 0; max-width: 65ch; } /* Tool card */ .cz-tool { background: var(--cz-surface); border: 1px solid var(--cz-border); border-radius: 16px; box-shadow: var(--cz-shadow); padding: clamp(16px, 3vw, 32px); margin: 0 0 40px; position: relative; } .cz-grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } @media (min-width: 900px) { .cz-grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } } .cz-row { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: flex-end; } .cz-row > * { flex: 1 1 200px; min-width: 0; } .cz-field { margin: 0 0 16px; min-width: 0; } .cz-label, .cz-legend { display: block; font-weight: 600; font-size: 15px; color: var(--cz-ink); margin: 0 0 8px; } .cz-hint { font-size: 14px; color: var(--cz-muted); margin: 0 0 8px; } .cz-textarea, .cz-input, .cz-select, .cz-page textarea.cz-textarea, .cz-page input.cz-input, .cz-page select.cz-select { display: block; width: 100%; min-height: 44px; font: inherit; font-size: 16px; /* avoids iOS zoom on focus */ color: var(--cz-text); background: #FFFFFF; border: 1.5px solid var(--cz-field-border); border-radius: var(--cz-radius-s); padding: 10px 12px; transition: border-color .15s, box-shadow .15s; } .cz-textarea { resize: vertical; line-height: 1.55; min-height: 140px; } .cz-textarea--out { background: #FBFAFE; } .cz-input[type="range"], .cz-page input.cz-input[type="range"] { padding: 0; border: 0; min-height: 44px; accent-color: var(--cz-violet); background: transparent; } .cz-input[type="color"], .cz-page input.cz-input[type="color"] { padding: 4px; width: 72px; height: 44px; } .cz-textarea:focus, .cz-input:focus, .cz-select:focus { border-color: var(--cz-violet); box-shadow: 0 0 0 3px rgba(117, 86, 232, .25); outline: none; } .cz-textarea:focus-visible, .cz-input:focus-visible, .cz-select:focus-visible { outline: 3px solid var(--cz-violet); outline-offset: 1px; } .cz-select { appearance: auto; padding-right: 8px; } .cz-options { border: 1px solid var(--cz-border); border-radius: var(--cz-radius-s); padding: 12px 16px 8px; margin: 0 0 16px; min-width: 0; } .cz-options__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; } @media (min-width: 560px) { .cz-options__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cz-check { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 0; } .cz-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--cz-violet); } .cz-check label { font-size: 15px; line-height: 1.4; cursor: pointer; } /* Buttons */ .cz-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; } .cz-btn, .cz-page button.cz-btn, .cz-page a.cz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 10px 18px; font: inherit; font-weight: 600; font-size: 15px; line-height: 1.2; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s; } .cz-btn--primary, .cz-page .cz-btn--primary { background: var(--cz-violet); color: #FFFFFF; } .cz-btn--primary:hover, .cz-page .cz-btn--primary:hover { background: var(--cz-violet-strong); color: #FFFFFF; } .cz-btn--secondary, .cz-page .cz-btn--secondary { background: #FFFFFF; color: var(--cz-ink); border-color: var(--cz-field-border); } .cz-btn--secondary:hover, .cz-page .cz-btn--secondary:hover { background: #FFFFFF; color: var(--cz-ink); border-color: var(--cz-ink); } .cz-btn--chip, .cz-page .cz-btn--chip { background: var(--cz-tint); color: var(--cz-ink); border-color: transparent; border-radius: 10px; padding: 8px 14px; } .cz-btn--chip:hover, .cz-btn--chip[aria-pressed="true"], .cz-page .cz-btn--chip:hover, .cz-page .cz-btn--chip[aria-pressed="true"] { background: var(--cz-ink); color: #FFFFFF; } .cz-btn:disabled, .cz-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .cz-btn:focus-visible { outline: 3px solid var(--cz-violet); outline-offset: 2px; } .cz-btn.is-done, .cz-page .cz-btn.is-done { background: var(--cz-ok); color: #FFFFFF; border-color: var(--cz-ok); } .cz-chipbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } /* Stats and meters */ .cz-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; margin: 16px 0; } .cz-stat { background: var(--cz-bg); border: 1px solid var(--cz-border); border-radius: 12px; padding: 12px; min-width: 0; } .cz-stat__n { font-family: var(--cz-font-head); font-weight: 800; font-size: 22px; color: var(--cz-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .cz-stat__max { font-size: 14px; color: var(--cz-muted); } .cz-stat__l { display: block; font-size: 13px; color: var(--cz-muted); line-height: 1.3; margin-top: 2px; } .cz-stat.is-over .cz-stat__n { color: var(--cz-error); } .cz-meter { margin: 8px 0 0; } .cz-meter__bar { height: 8px; background: #EEEAF6; border-radius: 99px; overflow: hidden; } .cz-meter__fill { display: block; height: 100%; width: 0; background: var(--cz-violet); border-radius: 99px; transition: width .2s; } .cz-meter.is-near .cz-meter__fill { background: var(--cz-warn); } .cz-meter.is-over .cz-meter__fill { background: var(--cz-error); } .cz-meter__text { font-size: 14px; color: var(--cz-muted); margin: 6px 0 0; min-height: 1.4em; } .cz-meter.is-over .cz-meter__text { color: var(--cz-error); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .cz-meter__fill, .cz-btn, .cz-card { transition: none !important; } } .cz-notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; } .cz-notes li { border-radius: 10px; padding: 10px 12px; font-size: 15px; background: var(--cz-tint); color: var(--cz-ink); border-left: 4px solid var(--cz-violet); } .cz-notes li.is-warn { background: #FFF5E8; border-left-color: var(--cz-warn); } .cz-notes li.is-error { background: #FEF0EE; border-left-color: var(--cz-error); } .cz-notes li.is-ok { background: #ECF8F1; border-left-color: var(--cz-ok); } .cz-noscript { background: #FFF5E8; border-radius: 10px; padding: 12px; } /* Panels and previews */ .cz-panel { border: 1px solid var(--cz-border); border-radius: 14px; padding: 16px; background: #FFFFFF; margin: 0 0 16px; min-width: 0; } .cz-panel__title { font-family: var(--cz-font-head); font-size: 16px; font-weight: 700; margin: 0 0 12px; color: var(--cz-ink); } .cz-panel--preview { background: var(--cz-bg); } .cz-compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } @media (min-width: 700px) { .cz-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .cz-compare__h { font-size: 14px; margin: 0 0 6px; color: var(--cz-muted); font-family: var(--cz-font-body); font-weight: 600; } .cz-pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 15px; background: #FFFFFF; border: 1px dashed var(--cz-border); border-radius: 10px; padding: 12px; margin: 0; min-height: 80px; max-height: 360px; overflow: auto; } .cz-mock { background: #FFFFFF; border: 1px solid var(--cz-border); border-radius: 14px; padding: 12px; max-width: 420px; margin: 0 auto 8px; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; color: #111; } .cz-mock__head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 600; } .cz-mock__avatar { width: 32px; height: 32px; border-radius: 50%; background: conic-gradient(from 210deg, var(--cz-coral), var(--cz-violet), var(--cz-coral)); } .cz-mock__media { aspect-ratio: 4 / 5; border-radius: 8px; background: linear-gradient(135deg, #EAE4FB, #FFE3DE); margin: 0 0 10px; max-height: 260px; width: 100%; } .cz-mock__caption { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; line-height: 1.45; } .cz-mock__more, .cz-page button.cz-mock__more { background: none; border: 0; padding: 0; color: #737373; font: inherit; cursor: pointer; min-height: 0; } .cz-mock--tiktok { background: #121212; color: #FFFFFF; border-color: #121212; } .cz-mock--tiktok .cz-mock__more { color: #BDBDBD; } .cz-profile { background: #FFFFFF; border: 1px solid var(--cz-border); border-radius: 14px; padding: 16px; max-width: 420px; margin: 0 auto; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #111; } .cz-profile__top { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; } .cz-profile__avatar { width: 72px; height: 72px; border-radius: 50%; flex: none; background: conic-gradient(from 210deg, var(--cz-coral), var(--cz-violet), var(--cz-coral)); } .cz-profile__counts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; } .cz-profile__counts b { display: block; font-size: 16px; } .cz-profile__name { font-weight: 700; margin: 0 0 2px; font-size: 14px; overflow-wrap: anywhere; } .cz-profile__bio { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-size: 14px; line-height: 1.4; } .cz-yt { display: grid; gap: 8px; font-family: Roboto, Arial, sans-serif; color: #0F0F0F; } .cz-yt--desktop { grid-template-columns: 168px minmax(0, 1fr); align-items: start; } .cz-yt__thumb { aspect-ratio: 16 / 9; border-radius: 8px; background: linear-gradient(135deg, var(--cz-ink), var(--cz-violet)); } .cz-yt__title { margin: 0; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; } .cz-yt--desktop .cz-yt__title { font-size: 14px; } .cz-yt--mobile { max-width: 360px; } .cz-yt--mobile .cz-yt__title { font-size: 15px; } .cz-yt__meta { margin: 2px 0 0; font-size: 12px; color: #606060; } .cz-desc { background: #F2F2F2; border-radius: 12px; padding: 12px; font-family: Roboto, Arial, sans-serif; font-size: 14px; color: #0F0F0F; } .cz-desc__text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .cz-desc__more { font-weight: 600; } .cz-serp { font-family: Arial, sans-serif; background: #FFFFFF; border-radius: 12px; padding: 12px; color: #202124; } .cz-serp--desktop { max-width: 600px; } .cz-serp--mobile { max-width: 360px; } .cz-serp__site { display: flex; gap: 10px; align-items: center; font-size: 14px; margin: 0 0 4px; line-height: 1.3; overflow-wrap: anywhere; } .cz-serp__crumb { color: #4D5156; font-size: 12px; } .cz-serp__fav { width: 26px; height: 26px; border-radius: 50%; background: #F1F3F4; border: 1px solid #DADCE0; flex: none; } .cz-serp__title { margin: 0 0 4px; color: #1A0DAB; font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; } .cz-serp--mobile .cz-serp__title { font-size: 18px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .cz-serp__desc { margin: 0; color: #4D5156; font-size: 14px; line-height: 1.58; overflow-wrap: anywhere; } .cz-serp--mobile .cz-serp__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .cz-result { background: var(--cz-tint); border-radius: 14px; padding: 16px; margin: 0 0 16px; } .cz-result__big { font-family: var(--cz-font-head); font-weight: 800; font-size: clamp(26px, 4vw, 36px); color: var(--cz-ink); margin: 0; } .cz-result__sub { margin: 4px 0 0; color: var(--cz-muted); } .cz-formula { font-size: 14px; color: var(--cz-muted); background: var(--cz-bg); border-radius: 10px; padding: 8px 12px; margin: 8px 0 0; } .cz-slug { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 18px; color: var(--cz-ink); margin: 0; overflow-wrap: anywhere; min-height: 1.6em; } .cz-urlpreview { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; color: var(--cz-muted); overflow-wrap: anywhere; } .cz-status { font-weight: 600; margin: 0 0 8px; } .cz-status.is-ok { color: var(--cz-ok); } .cz-status.is-error { color: var(--cz-error); } .cz-chapters { margin: 0; padding-left: 20px; font-size: 15px; } .cz-chapters li.is-bad { color: var(--cz-error); } .cz-tablewrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } .cz-table { width: 100%; border-collapse: collapse; font-size: 15px; } .cz-table th, .cz-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--cz-border); vertical-align: top; } .cz-table th { font-weight: 600; color: var(--cz-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; } .cz-table td:first-child { overflow-wrap: anywhere; } .cz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; } .cz-chip { background: var(--cz-tint); border-radius: 999px; padding: 4px 10px; font-size: 14px; overflow-wrap: anywhere; } .cz-chip.is-dupe { background: #FEF0EE; text-decoration: line-through; } /* Style lists (font tools) */ .cz-styles { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; } .cz-style { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; border: 1px solid var(--cz-border); border-radius: 12px; padding: 12px 12px 12px 16px; background: #FFFFFF; } .cz-style__name { font-size: 13px; color: var(--cz-muted); margin: 0 0 4px; } .cz-style__out { font-size: 22px; line-height: 1.35; margin: 0; color: var(--cz-ink); overflow-wrap: anywhere; word-break: break-word; font-family: "Segoe UI Symbol", "Noto Sans Math", "Cambria Math", "STIX Two Math", var(--cz-font-body); } .cz-style__note { font-size: 13px; color: var(--cz-warn); margin: 4px 0 0; } .cz-style__bio { grid-column: 1 / -1; font-size: 14px; color: #111; background: var(--cz-bg); border-radius: 10px; padding: 8px 10px; margin: 0; overflow-wrap: anywhere; } @media (max-width: 420px) { .cz-style { grid-template-columns: minmax(0, 1fr); } .cz-style .cz-btn { width: 100%; } } /* Image tools */ .cz-drop { position: relative; border: 2px dashed var(--cz-field-border); border-radius: 16px; background: var(--cz-bg); margin: 0 0 24px; transition: background .15s, border-color .15s; } .cz-drop.is-over { background: var(--cz-tint); border-color: var(--cz-violet); } .cz-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .cz-drop__label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 24px 16px; min-height: 120px; cursor: pointer; } .cz-file:focus-visible + .cz-drop__label { outline: 3px solid var(--cz-violet); outline-offset: 2px; border-radius: 14px; } .cz-drop__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--cz-violet); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E") center / 28px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E") center / 28px no-repeat; } .cz-seg { display: flex; flex-wrap: wrap; gap: 8px; } .cz-seg label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--cz-field-border); border-radius: 999px; cursor: pointer; font-size: 15px; } .cz-seg input { accent-color: var(--cz-violet); width: 18px; height: 18px; margin: 0; } .cz-seg label:has(input:checked) { border-color: var(--cz-violet); background: var(--cz-tint); } .cz-canvaswrap { position: relative; background: repeating-conic-gradient(#EEEAF6 0% 25%, #FFFFFF 0% 50%) 50% / 20px 20px; border: 1px solid var(--cz-border); border-radius: 12px; padding: 12px; display: grid; place-items: center; min-height: 200px; } .cz-canvas { display: block; max-width: 100%; height: auto; max-height: 420px; box-shadow: var(--cz-shadow); } .cz-canvas__empty { position: absolute; margin: 0; color: var(--cz-muted); } .cz-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: 15px; margin: 12px 0 0; } .cz-dl dt { color: var(--cz-muted); } .cz-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; } /* Article sections on tool pages */ .cz-article { max-width: 760px; } .cz-sec { margin: 0 0 32px; } .cz-sec h2 { font-family: var(--cz-font-head); font-size: 22px; font-weight: 800; color: var(--cz-ink); margin: 0 0 12px; line-height: 1.25; } .cz-sec p { margin: 0 0 12px; } .cz-steps { padding-left: 24px; margin: 0; display: grid; gap: 6px; } .cz-list { padding-left: 20px; margin: 0; display: grid; gap: 6px; } .cz-example { background: var(--cz-tint); border-radius: 14px; padding: 16px; margin: 16px 0 0; } .cz-example__label { font-weight: 700; color: var(--cz-violet-strong); margin: 0 0 4px !important; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; } .cz-faq { display: grid; gap: 8px; } .cz-faq__item { border: 1px solid var(--cz-border); border-radius: 12px; background: #FFFFFF; } .cz-faq__item summary { cursor: pointer; font-weight: 600; padding: 14px 16px; min-height: 44px; list-style-position: inside; color: var(--cz-ink); } .cz-faq__item summary:focus-visible { outline: 3px solid var(--cz-violet); outline-offset: 2px; border-radius: 12px; } .cz-faq__item p { margin: 0; padding: 0 16px 16px; color: var(--cz-text); } .cz-sources ul { padding-left: 20px; margin: 0; font-size: 15px; display: grid; gap: 4px; } .cz-backlink a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } /* Cards */ .cz-cards { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); } .cz-cards--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); } .cz-card { display: flex; gap: 12px; align-items: flex-start; height: 100%; padding: 16px; background: #FFFFFF; border: 1px solid var(--cz-border); border-radius: 14px; text-decoration: none; color: var(--cz-text); transition: border-color .15s, box-shadow .15s, transform .15s; } .cz-card:hover { border-color: var(--cz-violet); box-shadow: var(--cz-shadow); color: var(--cz-text); } .cz-card:focus-visible { outline: 3px solid var(--cz-violet); outline-offset: 2px; } .cz-card.is-preview { border-style: dashed; } .cz-card__icon, .cz-catcard__icon, .cz-hubhead__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none; } .cz-card__body { display: grid; gap: 4px; min-width: 0; } .cz-card__name { font-family: var(--cz-font-head); font-weight: 700; color: var(--cz-ink); line-height: 1.3; } .cz-card__desc { font-size: 14px; color: var(--cz-muted); line-height: 1.45; } .cz-badge { display: inline-block; font-size: 12px; font-weight: 600; background: #FFF5E8; color: var(--cz-warn); border-radius: 999px; padding: 2px 8px; justify-self: start; } .cz-cat--caption { background: #F1ECFF; color: #5B3FD0; } .cz-cat--text { background: #E8F4FF; color: #0B5CAD; } .cz-cat--fonts { background: #FFEDEA; color: #B4234A; } .cz-cat--creator { background: #FFF3E0; color: #9A4A00; } .cz-cat--seo { background: #E8F7EF; color: #0F7B4D; } /* Hub */ .cz-hubhead { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 24px; } .cz-hubhead__icon { width: 56px; height: 56px; border-radius: 16px; } .cz-hubhead__icon .cz-ico { width: 28px; height: 28px; } .cz-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .cz-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--cz-border); border-radius: 999px; background: #FFFFFF; color: var(--cz-ink); text-decoration: none; font-weight: 600; font-size: 15px; } .cz-pill:hover { border-color: var(--cz-violet); color: var(--cz-ink); } .cz-empty { background: var(--cz-tint); border-radius: 12px; padding: 16px; } /* Home (below the hero) */ .cz-band__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; } .cz-band__head .cz-h2 { margin: 0; } .cz-page a.cz-viewall { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--cz-violet-strong); text-decoration: none; } .cz-page a.cz-viewall:hover { color: var(--cz-ink); } .cz-viewall .cz-ico { width: 18px; height: 18px; } .cz-page a.cz-card, .cz-page a.cz-catcard { text-decoration: none !important; border-style: solid; } .cz-page a.cz-card *, .cz-page a.cz-catcard * { text-decoration: none !important; } .cz-card { position: relative; padding-right: 52px; } .cz-card__go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cz-tint); color: var(--cz-violet-strong); transition: background-color .15s, color .15s; } .cz-card__go .cz-ico { width: 16px; height: 16px; } .cz-card:hover .cz-card__go, .cz-catcard:hover .cz-card__go { background: var(--cz-violet); color: #FFFFFF; } .cz-cards--feature { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin-bottom: 0; } .cz-cards--feature .cz-card { flex-direction: column; gap: 14px; padding: 20px 20px 56px; background: var(--cz-tint); border-color: transparent; border-radius: 18px; } .cz-cards--feature .cz-card__go { top: auto; bottom: 16px; right: 16px; transform: none; background: #FFFFFF; } .cz-cards--feature .cz-card__icon { background: #FFFFFF; } .cz-cards--feature .cz-card:hover { border-color: var(--cz-violet); } .cz-cards--grid { margin-bottom: 0; } .cz-card__icon .cz-ico { width: 22px; height: 22px; } .cz-catcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); } .cz-catcard { display: grid; gap: 8px; height: 100%; grid-template-rows: auto auto 1fr auto; padding: 20px; border-radius: 18px; border: 1px solid transparent; color: var(--cz-text); } .cz-catcard--caption { background: #F4F0FF; } .cz-catcard--text { background: #EEF6FF; } .cz-catcard--fonts { background: #FFF1EE; } .cz-catcard--creator { background: #FFF6E9; } .cz-catcard--seo { background: #EDF8F2; } .cz-catcard .cz-catcard__icon { background: #FFFFFF; } .cz-page a.cz-catcard:hover { border-color: var(--cz-violet); box-shadow: var(--cz-shadow); color: var(--cz-text); } .cz-catcard.is-preview { border: 1px dashed var(--cz-field-border); } .cz-catcard__name { font-family: var(--cz-font-head); font-weight: 800; font-size: 18px; color: var(--cz-ink); line-height: 1.25; } .cz-catcard__desc { font-size: 14px; color: var(--cz-muted); } .cz-catcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cz-catcard__count { font-size: 14px; font-weight: 700; color: var(--cz-ink); } .cz-catcard__foot .cz-card__go { position: static; transform: none; background: #FFFFFF; } .cz-filter { display: flex; align-items: center; gap: 8px; } .cz-filter__label { font-weight: 600; font-size: 15px; color: var(--cz-ink); } .cz-page select.cz-filter__select { min-height: 44px; min-width: 220px; max-width: 100%; padding: 8px 36px 8px 12px; border: 1px solid var(--cz-field-border); border-radius: 12px; background-color: #FFFFFF; color: var(--cz-ink); font: inherit; font-size: 15px; } @media (max-width: 480px) { .cz-filter { width: 100%; } .cz-page select.cz-filter__select { flex: 1; min-width: 0; } } .cz-faq__q { display: inline; font: inherit; font-weight: 600; margin: 0; color: inherit; } .cz-faq__a p { margin: 0; padding: 0 16px 16px; color: var(--cz-text); } .cz-examples { display: grid; gap: 12px; } .cz-example { background: var(--cz-tint); border-radius: 14px; padding: 16px 18px; } .cz-example__t { font-family: var(--cz-font-head); font-size: 17px; margin: 0 0 8px; color: var(--cz-ink); } .cz-example__dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; } .cz-example__dl dt { font-weight: 700; font-size: 14px; color: var(--cz-muted); } .cz-example__dl dd { margin: 0; overflow-wrap: anywhere; } .cz-example__in { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; } .cz-nl { color: var(--cz-violet-strong); } @media (max-width: 480px) { .cz-example__dl { grid-template-columns: minmax(0, 1fr); } .cz-example__dl dd + dt { margin-top: 6px; } } /* Home */ .cz-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; background: linear-gradient(160deg, #FFFFFF 0%, #F3F0FD 100%); border: 1px solid var(--cz-border); border-radius: 24px; padding: clamp(24px, 5vw, 56px); margin: 8px 0 40px; } @media (min-width: 960px) { .cz-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } } .cz-hero__title { font-family: var(--cz-font-head); font-weight: 800; font-size: clamp(32px, 5.4vw, 54px); line-height: 1.06; letter-spacing: -.025em; color: var(--cz-ink); margin: 0 0 16px; } .cz-hero__lead { font-size: clamp(17px, 2vw, 19px); color: var(--cz-muted); max-width: 56ch; margin: 0 0 24px; } .cz-hero__art { display: none; } .cz-hero__art svg { width: 100%; height: auto; } @media (min-width: 960px) { .cz-hero__art { display: block; } } .cz-band { margin: 0 0 48px; } .cz-band--tint { background: var(--cz-ink); color: #EDE9F7; border-radius: 24px; padding: clamp(24px, 4vw, 40px); color-scheme: dark; } .cz-band--tint .cz-h2 { color: #FFFFFF; } /* Draft cards (admins only) are labeled with text; no extra outline that could look like a bug. */ /* Finder */ .cz-finder { position: relative; max-width: 620px; } .cz-finder__label { display: block; font-weight: 600; margin: 0 0 8px; color: var(--cz-ink); } .cz-finder__box { position: relative; } .cz-finder__box .cz-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--cz-muted); pointer-events: none; } .cz-finder__input, .cz-finder input.cz-finder__input { width: 100%; min-height: 56px; padding: 12px 16px 12px 48px; font: inherit; font-size: 17px; border: 2px solid var(--cz-ink); border-radius: 999px; background: #FFFFFF; color: var(--cz-text); box-shadow: var(--cz-shadow); } .cz-finder__input:focus { outline: 3px solid var(--cz-violet); outline-offset: 2px; } .cz-finder__list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: 6px; background: #FFFFFF; border: 1px solid var(--cz-border); border-radius: 16px; box-shadow: 0 12px 40px rgba(36, 27, 54, .18); max-height: min(60vh, 420px); overflow: auto; } .cz-finder__opt { display: block; padding: 10px 12px; border-radius: 10px; color: var(--cz-text); text-decoration: none; min-height: 44px; } .cz-finder__opt b { display: block; color: var(--cz-ink); } .cz-finder__opt span { font-size: 13px; color: var(--cz-muted); } .cz-finder__opt[aria-selected="true"], .cz-finder__opt:hover { background: var(--cz-tint); } .cz-finder__none { padding: 12px; color: var(--cz-muted); } /* Contact form */ .cz-form { max-width: 640px; } .cz-form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; } @media (min-width: 600px) { .cz-form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .cz-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .cz-alert { border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; font-weight: 600; } .cz-alert--ok { background: #ECF8F1; color: #0B5E3A; } .cz-alert--error { background: #FEF0EE; color: #8F1C13; } /* 404 */ .cz-page--404 { text-align: left; padding-top: 32px; } .cz-page--404 .cz-finder { margin: 24px 0; } .cz-page--404 .cz-pills { margin: 0 0 24px; } @media (forced-colors: active) { .cz-card, .cz-catcard, .cz-tool, .cz-panel, .cz-btn { border: 1px solid CanvasText; } .cz-meter__fill { background: Highlight; } } /* Theme-proofing: some themes style every