/**
* Guided Enquiry Tool — the sitewide ways in.
*
* Remember: html root font-size is 10px on this site, so 1rem = 10px.
*
* The way in is .makers-menu-cta: the last item in the main menu, drawn as a
* bordered button in the desktop row and as a plain item in the off-canvas menu.
*
* It was originally desktop-hidden because the eleven-item row had no space, and
* a second button sat in the top bar instead. There is space now — "About Us"
* and "Contact Us" were shortened and the item padding came down, see the
* measured table in header-menu.css — so the top-bar button is switched off in
* cta.php and its styles below are dormant rather than deleted.
*/
/* ------------------------------------------------ top bar button */
/*
* Line one of the top bar: LinkedIn icon, then the button, both hard right and
* on a shared centre line.
*
* THE FLOAT IS THE REASON THIS LOOKED WRONG. The site's own stylesheet carries
* #top-bar-content img { max-width: 84px; float: right }
* so the LinkedIn icon leaves the inline flow and pins itself to the right edge
* whatever the markup says — which is why the button kept landing to its LEFT
* even after being moved after it in the HTML. Clearing the float puts the icon
* back in the line, where source order decides the arrangement.
*
* text-align: right then pushes the pair to the right edge, and
* vertical-align: middle on both puts them on one centre line rather than
* sitting a step apart on the text baseline.
*/
/*
* :has() GATES ALL OF THIS. The top-bar button is currently switched off in
* cta.php — the "Enquire" button now lives in the main menu — and these rules
* change the top bar's own layout, so applying them with no button there would
* quietly rearrange the client's LinkedIn icon and contact line for nothing.
* Scoped this way they wake up only if the button is switched back on.
*/
#top-bar-content:has(.makers-topbar-cta) {
text-align: right;
}
#top-bar-content:has(.makers-topbar-cta) img {
float: none;
display: inline-block;
vertical-align: middle;
}
/*
* Breathing room between the two rows.
*
* The rows are separated by a bare
, which has no box of its own to push
* against. Making it a block gives it one, so the margin opens a real gap —
* raising line-height on the container instead would have loosened the second
* row's own text too.
*
* The number looks large because the button is 36px tall inside a ~22px line
* box: an inline-block that exceeds its line box overflows downwards, and that
* overflow eats into the gap. Roughly 14px of this is spent absorbing it, which
* leaves about 12px of actual daylight between the rows.
*/
/* Row one — LinkedIn plus the button — as a block, so it can carry the gap. */
.makers-topbar-row {
display: block;
margin-bottom: 1.2rem;
}
/*
* Small and quiet. Outlined rather than filled — on the dark top bar a solid
* yellow block shouted louder than the logo — and sized to match the LinkedIn
* icon beside it (84 x 23px) so the pair reads as one row of furniture rather
* than a call to action bolted onto the masthead.
*
* 12px text with a 1px rule lands the box at roughly 23px tall. If the font size
* or padding changes, re-measure against the icon rather than assuming.
*/
.makers-topbar-cta {
display: inline-block;
vertical-align: middle;
margin-left: 1.4rem;
/* Smaller type with more room around it — the box stays 23px to match the
icon, so the padding grows as the text shrinks. */
padding: .25rem 1.4rem;
background: transparent;
border: 1px solid #fec30d; /* the warm brand yellow Chris sampled */
font-size: 1rem;
font-weight: 300; /* light, to sit quietly beside the logo */
text-transform: uppercase;
letter-spacing: .1em; /* caps need more tracking to stay legible */
line-height: 1.6;
color: #fff;
text-decoration: none;
transition: background .3s ease, color .3s ease;
}
/*
* Prefixed with #top-bar-content to beat the site's own
* #top-bar-content a:hover { color: #f6c445 }
* An ID outranks a class however many classes you stack, so the plain
* `.makers-topbar-cta:hover` lost the colour fight and the label turned yellow
* on a yellow fill — the button went blank on hover.
*/
/* Text fades to yellow; no fill. The border stays put so nothing shifts. */
#top-bar-content .makers-topbar-cta:hover,
#top-bar-content .makers-topbar-cta:focus-visible {
background: transparent;
color: #fec30d;
text-decoration: none;
}
/*
* Hidden below 1199px along with the rest of the top-bar furniture — the mobile
* menu carries the link instead. Matches the breakpoint in header-menu.css
* where #top-bar-social is hidden, so the two stay in step.
*/
@media only screen and (max-width: 1199px) {
.makers-topbar-cta {
display: none;
}
}
/* ------------------------------------------------ main menu item */
/*
* The item is appended to the main menu, which Total renders BOTH as the desktop
* row and as the off-canvas list — so it appears in both, styled differently.
*
* In the desktop row it is drawn as a bordered button rather than a plain link,
* so it reads as an action and not as a twelfth page. The ID prefix matters:
* the theme's divider rule is four classes deep and would otherwise repaint the
* left edge grey.
*/
/*
* THE BORDER GOES ON THE TEXT, NOT ON THE LINK.
*
* The is the full height of the menu row — 50px, because that is what sets
* the row's height and the hover underline's position — so bordering it drew a
* 50px-tall box around a 16px word. The .link-inner span is the text itself, so
* the outline hugs it and centres in the row without changing the row's height.
*/
#site-navigation .makers-menu-cta > a {
margin-left: 10px;
/*
* No divider before the button.
*
* The dividers are a border-LEFT on every item after the first
* (header-menu.css) — deliberately, so that whichever item is last never
* trails one. That rule caught the button too and drew a grey line hard
* against its left edge. This is the one item that should not have one: it
* is an action, not the twelfth page. The ID prefix carries it past the
* theme's four-class selector.
*/
border-left: 0;
}
#site-navigation .makers-menu-cta > a > .link-inner {
display: inline-block;
/* 9px vertical puts the box at 36px in a 50px row — 7px of clearance top and
bottom. Horizontal padding is left alone: the row has 27px to spare and
widening the button is what would spend it. */
padding: .9rem 1.4rem;
border: 1px solid #fec30d;
line-height: 1;
transition: color .3s ease;
}
/*
* Same hover as the top-bar button: the text fades to yellow, nothing fills.
*
* The default is WHITE text — the yellow-on-yellow fill this replaced left the
* label unreadable at the moment of hovering, because the theme's own
* `#site-navigation ... a:hover { color: #f6c445 }` is an ID rule and beat the
* dark colour that was meant to sit on the fill. Fading white to yellow works
* with that rule rather than against it, and the border never moves so nothing
* shifts under the cursor.
*/
/*
* SELECTOR SHAPE MATTERS HERE, not just the ID prefix.
*
* The theme carries
* #site-navigation .dropdown-menu > li.menu-item > a:hover { color: #f6c445 }
* which is (1 id, 3 classes, 2 elements). The obvious
* `#site-navigation .makers-menu-cta > a:hover` is (1, 2, 1) and quietly loses —
* the button hovered to the theme's #f6c445 rather than the brand #fec30d the
* border is drawn in. Close enough to look right and be wrong. Matching the
* theme's own shape and adding the extra class outranks it honestly, with no
* !important.
*/
#site-navigation .dropdown-menu > li.menu-item.makers-menu-cta > a,
#site-navigation .dropdown-menu > li.menu-item.makers-menu-cta > a:link,
#site-navigation .dropdown-menu > li.menu-item.makers-menu-cta > a:visited {
color: #fff;
}
#site-navigation .dropdown-menu > li.menu-item.makers-menu-cta > a:hover,
#site-navigation .dropdown-menu > li.menu-item.makers-menu-cta > a:focus-visible {
background: none;
color: #fec30d;
/* The theme's bare `a:hover { text-decoration: underline }` reaches this one
too, and underlined nav links are the look we spent time removing. */
text-decoration: none;
}
/*
* SIDR RENAMES EVERY CLASS. Total's off-canvas menu is built by sidr, which
* clones the nav and prefixes each class with `sidr-class-` — so the item
* arrives as .sidr-class-makers-menu-cta, and a selector written against the
* original class name silently matches nothing. Both are listed here: the
* prefixed one is what actually applies today, the plain one covers the other
* mobile menu styles Total can be switched to.
*/
.sidr-class-makers-menu-cta,
#mobile-menu .makers-menu-cta,
.mobile-toggle-nav .makers-menu-cta {
display: block;
}
.sidr-class-makers-menu-cta > a,
#mobile-menu .makers-menu-cta > a,
.mobile-toggle-nav .makers-menu-cta > a {
color: #fec30d !important;
font-weight: 700;
}
/* No footer link: this site has no footer widget area. #footer is empty and
display:none — only the copyright bar renders — so there is nowhere to put
one without building a widget area first. Raised rather than invented. */
/* ------------------------------------------------ contact page: two doors
The contact page now offers a choice — the guided enquiry for a project, the
short form for a quick question. This panel is the first of those.
It lives in enquiry-cta.css rather than enquiry.css because the contact page
does not carry the form shortcode, so it never loads that stylesheet. */
.makers-contact-doors {
margin: 0 0 3rem;
padding: 3rem;
background: #f4f4f4;
border-left: 4px solid #fec30d;
}
.makers-contact-doors__title {
margin: 0 0 1rem;
font-size: 2.2rem;
font-weight: 400;
color: #212121;
}
.makers-contact-doors__text {
margin: 0 0 2rem;
max-width: 62ch;
font-size: 1.8rem;
line-height: 2.3rem;
font-weight: 300;
color: #000;
}
.makers-contact-doors__btn {
display: inline-block;
padding: 1.2rem 2.6rem;
border: 2px solid #212121;
background: #212121;
font-size: 1.4rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: #fff;
text-decoration: none;
transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.makers-contact-doors__btn:hover,
.makers-contact-doors__btn:focus-visible {
background: #fec30d;
border-color: #fec30d;
color: #212121;
text-decoration: none;
}
.makers-contact-doors__or {
margin: 0 0 1.6rem;
font-size: 2rem;
font-weight: 400;
color: #212121;
}