/* css/theme-accent.css * * A HINT of the journey's identity on pages that must stay light and legible — * personalisation, chiefly. * * WHY THIS EXISTS AS A SEPARATE FILE. The full journey themes were briefly * applied to personalisation and it went badly: Christmas is gold-on-near-black, * which turned body text grey-on-grey and made form placeholders invisible on a * page where somebody is typing children's names into forty fields. The theme was * stripped completely as a result. This is the middle ground — the customer can * see they are still on the Christmas site, and can still read it. * * THE RULE HERE: accents may colour things that are DECORATION — a rule above a * heading, a heading itself, a progress bar, a focus ring. They may never set the * background a body of text sits on, and never a background image. That single * rule is what stops this becoming the problem it replaced, and it is why no * "put the content in a panel" workaround is needed: nothing behind the text * changes at all. * * Applied by lib/page.php via 'accent' => true, which adds * `na-accent na-accent-` to WITHOUT loading the journey's own * stylesheet or its theme-x class. */ /* Neutral default, so a page with no journey behind it still looks deliberate. */ .na-accent { --na-accent: #6c757d; --na-accent-dark: #495057; --na-accent-wash: #f4f5f7; } /* Christmas: the gold, but never the near-black it normally sits on. The dark variant is used for TEXT — #d4af37 on white is about 2:1 and fails badly. */ .na-accent-xmas { --na-accent: #d4af37; --na-accent-dark: #7a6216; --na-accent-wash: #fdfaf0; } /* Parties: the orange is the identity, but only as decoration — as text it is unreadable on white, so text uses the darker tone. */ .na-accent-parties { --na-accent: #fc9b13; --na-accent-dark: #94540a; --na-accent-wash: #fff9f0; } .na-accent-schools { --na-accent: #1e9455; --na-accent-dark: #14663b; --na-accent-wash: #f2faf5; } /* The wash is a tint of the accent at a few percent — enough to feel warm rather than white, nowhere near enough to affect the contrast of text on top of it. Panels stay pure white so anything inside one is unchanged. */ .na-accent { background-color: var(--na-accent-wash); } .na-accent .card, .na-accent .modal-content, .na-accent .list-group-item { background-color: #fff; } /* A single coloured rule under the page heading. This is the main thing that makes the page feel like it belongs to the journey, and it costs no legibility because it sits under the text rather than behind it. */ .na-accent .na-pers-heading, .na-accent h1, .na-accent h2.h4 { border-bottom: 3px solid var(--na-accent); padding-bottom: .4rem; } /* Headings take the DARK tone, never the raw accent — see the note above about gold and orange on white. */ .na-accent h1, .na-accent .na-pers-heading { color: var(--na-accent-dark); } /* Progress bars carry the journey colour. These sit on a grey track, so the bright accent is right here and readable at a glance. */ .na-accent .progress-bar { background-color: var(--na-accent); } /* Card headers get a tinted strip rather than a solid fill — a solid accent would put text on gold/orange, which is the trap this file exists to avoid. */ .na-accent .card > .card-header { background-color: var(--na-accent-wash); border-bottom: 2px solid var(--na-accent); color: var(--na-accent-dark); font-weight: 600; } /* Focus ring, so tabbing through a long form feels part of the same design. Bootstrap's default blue is the only thing being replaced. */ .na-accent .form-control:focus, .na-accent .form-select:focus { border-color: var(--na-accent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--na-accent) 30%, transparent); } /* OUTLINE buttons only. On these pages they are navigation — "Billy — Child" opens that person's questions — and Bootstrap's blue against gold or orange is the one thing that reads as a mistake rather than a theme. Text uses the dark tone; the hover fill keeps DARK text on the accent, because white on gold is about 2:1 and would undo the point of this file. Solid buttons are untouched. */ .na-accent .btn-outline-primary { color: var(--na-accent-dark); border-color: var(--na-accent); } .na-accent .btn-outline-primary:hover, .na-accent .btn-outline-primary:focus { background-color: var(--na-accent); border-color: var(--na-accent-dark); color: #1a1a1a; } /* Deliberately NOT themed, and each for a reason: .btn-success / .btn-primary — a green Save that turns gold is a recognisability loss, not a gain; .form-control background — white is the whole point; .text-muted — already tuned for contrast on white; body text colour — never touched by an accent. */