/* The Six Marks — Cawood's trademark primitive and everything cut from it.
*
* Six bars, one per domain we measure, in fixed order. Heights are somebody's
* real scores or real emphasis; never decoration. Copy into any project's own
* stylesheet — see README.md for why this isn't a live dependency yet.
* Requires tokens.css and domains.css for the custom properties.
*
* Markup shape (adapt class names to your project's convention — these are
* the neutral cw- names, not a fixed contract):
*
*
*
*
*
*
*
*
*
*
* Five sizes, and no sixth:
* --eyebrow 15px / 3px bars beside a small uppercase label
* --footer 19px / 3px bars tinted set, on navy
* --lockup 24px / 4px bars nav, business card, favicon
* --opener 30px / 9px bars above a heading, in place of a rule
* --result 58px+ / 11px+ somebody's own six scores
*/
.cw-mark {
--cw-mark-height: 24px;
--cw-bar-width: 4px;
--cw-bar-gap: 2.5px;
display: inline-flex;
align-items: flex-end;
gap: var(--cw-bar-gap);
height: var(--cw-mark-height);
}
.cw-mark > * {
width: var(--cw-bar-width);
height: var(--cw-bar, 50%);
flex: none;
}
/* fixed domain order — position is meaning */
.cw-mark > *:nth-child(1) { background: var(--cw-domain-1-direction, #FF6F61); }
.cw-mark > *:nth-child(2) { background: var(--cw-domain-2-safety, #3A506B); }
.cw-mark > *:nth-child(3) { background: var(--cw-domain-3-learning, #0A7A47); }
.cw-mark > *:nth-child(4) { background: var(--cw-domain-4-tools, #5B7FA6); }
.cw-mark > *:nth-child(5) { background: var(--cw-domain-5-process, #FF9E94); }
.cw-mark > *:nth-child(6) { background: var(--cw-domain-6-ai, #7C6BB0); }
/* on a navy surface, swap to the lifted set */
.cw-mark--on-navy > *:nth-child(2) { background: var(--cw-domain-2-safety-on-navy, #8FA6C4); }
.cw-mark--on-navy > *:nth-child(3) { background: var(--cw-domain-3-learning-on-navy, #0CF57E); }
.cw-mark--on-navy > *:nth-child(6) { background: var(--cw-domain-6-ai-on-navy, #B5A6E0); }
/* sizes */
.cw-mark--eyebrow { --cw-mark-height: 15px; --cw-bar-width: 3px; --cw-bar-gap: 2px; }
.cw-mark--footer { --cw-mark-height: 19px; --cw-bar-width: 3px; --cw-bar-gap: 2px; }
.cw-mark--lockup { --cw-mark-height: 24px; --cw-bar-width: 4px; --cw-bar-gap: 2.5px; }
.cw-mark--opener { --cw-mark-height: 30px; --cw-bar-width: 9px; --cw-bar-gap: 5px; }
.cw-mark--result { --cw-mark-height: 58px; --cw-bar-width: 11px; --cw-bar-gap: 6px; }
.cw-mark--result > * { border-radius: 3px 3px 0 0; }
/* single-tint variant: three solid, three tinted — for eyebrows */
.cw-mark--tint > *:nth-child(1),
.cw-mark--tint > *:nth-child(2),
.cw-mark--tint > *:nth-child(3) { background: var(--cw-colour-coral, #FF6F61); }
.cw-mark--tint > *:nth-child(4),
.cw-mark--tint > *:nth-child(5),
.cw-mark--tint > *:nth-child(6) { background: #FFC9C2; }
/* the lockup: mark left, wordmark right, 11px apart, matched to cap height */
.cw-lockup { display: inline-flex; align-items: center; gap: 11px; }
.cw-lockup-word {
font-family: var(--cw-font-head, 'Exo 2', sans-serif);
font-weight: 800;
letter-spacing: -.01em;
color: var(--cw-colour-navy, #1C2541);
}
.cw-lockup-word b { font-weight: 800; color: var(--cw-colour-coral, #FF6F61); }
/* the mark laid flat: a divider that still names the six */
.cw-rule { display: flex; height: 6px; }
.cw-rule > * { flex: 1; }
.cw-rule--thin { height: 5px; }
.cw-rule--thick { height: 10px; }
.cw-rule--inset { border-radius: 999px; overflow: hidden; }
.cw-rule > *:nth-child(1) { background: var(--cw-domain-1-direction, #FF6F61); }
.cw-rule > *:nth-child(2) { background: var(--cw-domain-2-safety, #3A506B); }
.cw-rule > *:nth-child(3) { background: var(--cw-domain-3-learning, #0A7A47); }
.cw-rule > *:nth-child(4) { background: var(--cw-domain-4-tools, #5B7FA6); }
.cw-rule > *:nth-child(5) { background: var(--cw-domain-5-process, #FF9E94); }
.cw-rule > *:nth-child(6) { background: var(--cw-domain-6-ai, #7C6BB0); }
/* one bar, cut from the mark: a bullet whose colour names its domain */
.cw-bar { display: inline-block; width: 4px; height: 15px; flex: none; }
.cw-bar--lg { width: 5px; height: 22px; }
.cw-bar--1 { background: var(--cw-domain-1-direction, #FF6F61); }
.cw-bar--2 { background: var(--cw-domain-2-safety, #3A506B); }
.cw-bar--3 { background: var(--cw-domain-3-learning, #0A7A47); }
.cw-bar--4 { background: var(--cw-domain-4-tools, #5B7FA6); }
.cw-bar--5 { background: var(--cw-domain-5-process, #FF9E94); }
.cw-bar--6 { background: var(--cw-domain-6-ai, #7C6BB0); }
/* a list whose bullets are bars */
.cw-bar-list { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; }
.cw-bar-list > li { display: flex; align-items: center; gap: 14px; }
/* a plain - list whose bullets become bars via ::before — for content
pasted straight from a WYSIWYG editor (e.g. a Divi Text module), where
wrapping every
- in a by hand isn't practical.
Flexbox, not absolute positioning — position:relative on
- is not
reliable inside a page builder's own CSS. Defaults to a single coral bar
per item; add domain-cycling colours with :nth-child only when the items
genuinely map to the six domains in that fixed order. */
.cw-bullet-list { list-style: none; padding-left: 0; margin: 0; }
.cw-bullet-list > li {
display: flex;
align-items: flex-start;
gap: 10px;
list-style: none;
margin: 0 0 11px;
padding: 0;
}
.cw-bullet-list > li::before {
content: "";
display: block;
flex: none;
width: 4px;
height: 15px;
margin-top: 3px;
background: var(--cw-colour-coral, #FF6F61);
}
/* a scored row: label, ticked track, value */
.cw-track { position: relative; flex: 1; height: 14px; }
.cw-track-base { position: absolute; left: 0; right: 0; top: 5px; height: 4px; background: var(--cw-colour-hairline, #E4E9F1); }
.cw-track-fill { position: absolute; left: 0; top: 5px; height: 4px; width: var(--cw-fill, 0%); background: var(--cw-track-colour, var(--cw-colour-navy, #1C2541)); }
.cw-track-ticks { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, #C9D2DE 0 1px, transparent 1px 25%); }
/* motion: bars grow from the base, 80ms apart, once — never fade, never loop */
.cw-mark--animate > * { transform-origin: bottom; animation: cw-six-fill .8s cubic-bezier(.22, 1, .36, 1) both; }
.cw-mark--animate > *:nth-child(1) { animation-delay: .10s; }
.cw-mark--animate > *:nth-child(2) { animation-delay: .18s; }
.cw-mark--animate > *:nth-child(3) { animation-delay: .26s; }
.cw-mark--animate > *:nth-child(4) { animation-delay: .34s; }
.cw-mark--animate > *:nth-child(5) { animation-delay: .42s; }
.cw-mark--animate > *:nth-child(6) { animation-delay: .50s; }
@keyframes cw-six-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
.cw-mark--animate > * { animation: none; }
}
/* the mark keeps all six bars at every width — grids collapse, bars never do */
@media print {
.cw-mark > *, .cw-rule > *, .cw-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}