/*
Link affordance.
Two problems, one file.
1. INLINE LINKS RELIED ON COLOUR ALONE. The theme gives a link #0777ff and no underline until
hover, so a link inside a paragraph is distinguished from the sentence around it by hue and
nothing else. That fails WCAG 1.4.1 (Use of Colour) for anyone who cannot separate the two,
and it is simply easy to miss for everyone else. The underline goes back, but thin and
offset so it reads as a modern link rather than a 1996 one.
2. STANDALONE SECTION LINKS READ AS STRAY TEXT. A section that ends with its own link is
written as
- a paragraph whose only child is a link. Rendered with the
ordinary inline treatment it looks like the leftover first three words of a sentence
someone forgot to finish. It is navigation, so it is styled as navigation.
WHY THIS NEEDS NO PAGE EDITS. "p > a:only-child" matches exactly the shape those links already
have, everywhere on the site, including every one written before this file existed. Nothing to
republish, and no class anyone has to remember to add for the next one.
Loaded from the page template, so it applies site-wide. Remove the to remove all of it.
*/
/* ---- 1. inline links carry an underline, not just a colour ---- */
.content-column a,
.page-block a {
/* Thin and offset: present enough to be unmistakable, quiet enough to read through.
Both properties degrade harmlessly - an older engine just draws its default underline. */
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
text-decoration-color: rgba(7, 119, 255, 0.4);
transition: text-decoration-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.content-column a:hover,
.content-column a:focus,
.page-block a:hover,
.page-block a:focus {
text-decoration-color: currentColor;
}
/* Headings and images that happen to be links are not prose, and an underline under a 32px
heading or across the bottom of a photograph is noise rather than signal. */
.content-column h1 a,
.content-column h2 a,
.content-column h3 a,
.content-column h4 a,
.content-column h5 a,
.page-block h1 a,
.page-block h2 a,
.page-block h3 a,
.page-block h4 a,
.page-block h5 a,
.content-column a:has(img),
.page-block a:has(img) {
text-decoration: none;
}
/* The jumbotron, the menu and the footer have their own visual logic and were never the
problem this file is fixing. */
.jumbotron a,
.navbar a,
.page-footer a,
.mega-menu a {
text-decoration: none;
}
/* ---- 2. a paragraph that is nothing but a link is a section link ---- */
/*
Consecutive section links sit on ONE line rather than stacking.
A section that ends with two or three of these produced a column of short blue fragments
down the left margin, each on its own line with a full paragraph gap between them - which
reads as three unrelated afterthoughts rather than one row of places to go next. Making the
PARAGRAPH inline-block lets siblings flow together; a following heading is block-level and
still starts its own line.
Excludes image links, which are pictures and must keep their own line.
*/
.content-column p:has(> a:only-child):not(:has(img)) {
display: inline-block;
/* Tight to the section above, generous to the right of the next link along, and enough
below to clear the heading that follows. */
margin: 0 2.25em 1.6em 0;
}
.content-column p > a:only-child {
display: inline-block;
font-weight: 600;
text-decoration: none;
/* The theme's hover blue. As the resting colour it holds its own against near-black body
text, where the lighter #0777ff read as a different typeface rather than a link. */
/* The SAME blue as every other link on the site (#0777ff, the theme's a colour). An earlier
version used the darker hover blue here, on the argument that bare text needed the extra
contrast - but once the link has a frame, the frame carries that, and the darker tone was
just a second blue with no job. Two blues for two kinds of link is a distinction a reader
has to decode and learns nothing from. */
color: #0777ff;
/* Outlined rather than filled: a section can end with two or three of these, and three
solid blocks of colour would shout louder than the section they follow. The frame is
enough to say "this is a place to go" without competing with the prose. */
border: 1px solid currentColor;
border-radius: 3px;
padding: 0.55em 1.2em;
line-height: 1.25;
transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
/*
Fills on hover: the frame was the invitation, this is the acknowledgement.
It fills with the SAME blue it is outlined in - the company blue - so the whole control uses
one colour and only inverts. Filling with a darker shade would introduce a second blue for
no reason other than that the theme happens to have one.
*/
.content-column p > a:only-child:hover,
.content-column p > a:only-child:focus {
background-color: #0777ff;
border-color: #0777ff;
color: #ffffff;
text-decoration: none;
}
/*
THE KNOWLEDGE BASE KEEPS THE PLAIN BLUE LINK.
Everything above is for marketing pages, where a link is usually one of a handful of chosen
next steps and deserves to look like a decision. Documentation is the opposite: an article
can carry dozens of cross-references mid-sentence, and framing each of them - or even
underlining them all - turns a paragraph into a fence. The Confluence content also arrives
with its own conventions, which the site should not argue with.
Scoped to body.kb-page, set by the Knowledge Base page template, so it covers the article,
the navigation and anything else rendered there. Two classes beat the one-class selectors
above, so these win without !important.
*/
.kb-page .content-column a,
.kb-page .page-block a {
text-decoration: none;
text-decoration-color: currentColor;
}
/* The theme's own rule underlines on hover, which is all documentation needs. */
.kb-page .content-column a:hover,
.kb-page .content-column a:focus,
.kb-page .page-block a:hover,
.kb-page .page-block a:focus {
text-decoration: underline;
}
/* A paragraph that is only a link is an ordinary link here, not a call to action. */
.kb-page .content-column p:has(> a:only-child) {
display: block;
margin: 0 0 1em 0;
}
.kb-page .content-column p > a:only-child {
display: inline;
font-weight: inherit;
border: 0;
padding: 0;
border-radius: 0;
background: transparent;
}
.kb-page .content-column p > a:only-child:hover,
.kb-page .content-column p > a:only-child:focus {
background: transparent;
color: #0777ff;
text-decoration: underline;
}
/* An image on its own line is a picture, not a section link: no frame, no padding, no weight. */
.content-column p > a:only-child:has(img) {
font-weight: inherit;
border: 0;
padding: 0;
border-radius: 0;
}
.content-column p > a:only-child:has(img):hover,
.content-column p > a:only-child:has(img):focus {
background-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
.content-column a,
.page-block a,
.content-column p > a:only-child {
transition: none;
}
}