(label-span + description) and (arrow).
* Override the inherited float:left on and float:right on —
* those collapse the flex layout otherwise. */
.js-menu-home li > p {
flex: 1 1 auto;
display: flex;
align-items: center;
margin: 0;
padding: 0;
height: 52px;
line-height: 1;
overflow: hidden;
white-space: nowrap;
font-size: 17px;
color: #443d35;
float: none !important;
}
/* Label span — 30px white, padded so it doesn't run hard up against the
* left edge of the dark gradient on bge.jpg. Override the inherited
* width:170px and float:left from js_joomfashion.css. */
.js-menu-home .top-home span,
.js-menu-home .center-home span,
.js-menu-home .bottom-home span {
color: #fff;
font-size: 30px;
font-weight: 500;
line-height: 1;
padding: 0 14px 0 24px;
margin: 0 !important;
flex: 0 0 auto;
width: auto !important;
white-space: nowrap;
float: none !important;
}
/* Arrow graphic anchored at right edge.
*
* arrow-web.png is 94×51
* arrow-portfolio.png is 94×52
* arrow-contact.png is 94×52
*
* Display each at its natural dimensions. Don't constrain max-height —
* that scales the 52px-tall arrows down to 51px which shrinks them
* proportionally to ~92px wide, leaving 2px of misalignment on bars 2
* and 3. Use align-self:flex-end so the arrow sits flush with the bar
* bottom (where the dark dividing line of bge.jpg starts), eliminating
* the 1px gap that align-items:center introduced. */
.js-menu-home li a {
flex: 0 0 94px;
width: 94px;
display: block;
margin: 0;
padding: 0;
line-height: 0;
float: none !important;
align-self: flex-end;
}
.js-menu-home li a img {
display: block;
height: auto;
width: 94px;
margin: 0;
}
}
/* ---- Cookies-bar leftover (defensive) ---------------------------------- */
.cpnb-outer, [class^="cpnb-"] {
display: none !important;
}
/* ---- Lightbox overlay --------------------------------------------------- */
/* Inherited template z-indices reach 99999 on the navbar/header. The
* lightbox needs to sit above everything so the dark backdrop covers
* the whole viewport (header included) and the enlarged image is on top. */
.lb-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 2147483646; /* effectively top of the stack */
cursor: zoom-out;
opacity: 0;
transition: opacity 0.2s ease;
}
.lb-overlay.lb-open { opacity: 1; }
.lb-overlay img {
max-width: 92vw;
max-height: 92vh;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
background: #fff;
}
.lb-close {
position: absolute;
top: 20px;
right: 30px;
background: transparent;
border: 0;
color: #fff;
font-size: 36px;
line-height: 1;
cursor: pointer;
padding: 8px 14px;
z-index: 2147483647;
}
.lb-close:hover { color: #ffab25; }
/* ===========================================================================
* Portfolio
* ========================================================================= */
/* Show thumbnails. The template hides .portfolio .item img with opacity:0
* because the original markup paired each thumbnail with a colour-swap
* image and JS that toggled them on hover; we don't replicate that. */
body.portfolio .blogportfolio .item img {
opacity: 1 !important;
filter: grayscale(100%) !important;
-webkit-filter: grayscale(100%);
transition: filter 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
body.portfolio .blogportfolio .item:hover img,
body.portfolio .blogportfolio .item a:hover img {
filter: grayscale(0%) !important;
-webkit-filter: grayscale(0%);
}
body.portfolio .blogportfolio .item a {
display: block;
cursor: zoom-in;
}
/* Tighter vertical rhythm — default / margin and the empty .icons
* placeholder were each adding ~30px. */
body.portfolio .blogportfolio .item p {
margin: 0;
padding: 0;
line-height: 0;
}
body.portfolio .blogportfolio .item h2 {
margin: 0 0 6px 0;
line-height: 1.2;
}
body.portfolio .blogportfolio .item .icons {
height: 0;
line-height: 0;
margin: 0;
}
/* Pull the rows closer together. Template defaults give ~80px between rows. */
body.portfolio .blogportfolio .items-row {
margin-bottom: -36px;
}
/* Hover: the thumbnail scales up and overflows its column, sitting above
* adjacent items. Every container in the chain needs overflow:visible
* because the template sets overflow:hidden on .item / .item a, which
* would otherwise clip the scaled image. */
body.portfolio .blogportfolio .items-row,
body.portfolio .blogportfolio .span4,
body.portfolio .blogportfolio .item,
body.portfolio .blogportfolio .item p,
body.portfolio .blogportfolio .item a {
overflow: visible !important;
}
body.portfolio .blogportfolio .item {
position: relative;
z-index: 1;
}
body.portfolio .blogportfolio .item img {
transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.4s ease;
transform-origin: center center;
position: relative;
z-index: 1;
}
body.portfolio .blogportfolio .item:hover {
z-index: 100;
}
body.portfolio .blogportfolio .item a:hover img {
transform: scale(1.18);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
z-index: 100;
filter: grayscale(0%) !important;
-webkit-filter: grayscale(0%);
}
/* Portfolio hero parallax — let the template's own .portfolio div.js_parallax
* min-height: 241px stand. (Earlier override here pushed it to 290px which
* made the hero too deep.) */
/* ===========================================================================
* Header background height (privacy / view-article pages only)
*
* bg-head.jpg is 130px tall. On the standard pages the template's
* min-height: 83px is correct — the header sits ABOVE the hero so the
* logo just needs to fit inside that band before the hero takes over.
* On the privacy/view-article pages there is no hero, so the logo would
* overlap the cream background below the header. Lift the header height
* to the bg image's natural size (130px) on those pages only.
* ========================================================================= */
body.view-article div.header {
min-height: 130px;
}
/* ===========================================================================
* Privacy / view-article page — typography + presentation
*
* The Joomla view-article body class triggers .js-main = bg-contain.jpg
* (set in js-custom.css line 230). The default
needs hiding (template
* styled it as a visible 3-tone line). Headings need 1.1 line-height and
* proper sizes that match the live site rather than browser defaults.
* ========================================================================= */
body.view-article .item-page hr {
display: none;
}
body.view-article .item-page h1 {
font-size: 31px;
font-weight: 500;
line-height: 1.1;
margin: 0 0 0.4em;
}
body.view-article .item-page h2 {
font-size: 30px;
font-weight: 500;
line-height: 1.1;
margin: 1em 0 0.4em;
}
body.view-article .item-page h3 {
font-size: 24px;
font-weight: 700;
line-height: 1.1;
margin: 1.2em 0 0.4em;
}
body.view-article .item-page h4 {
font-size: 18px;
font-weight: 700;
line-height: 1.2;
margin: 1em 0 0.4em;
}
body.view-article .item-page,
body.view-article .item-page p,
body.view-article .item-page ul,
body.view-article .item-page li {
font-size: 14px;
line-height: 1.5;
}
body.view-article .item-page p {
margin: 0 0 0.8em;
}
body.view-article .item-page ul {
margin: 0 0 0.8em 1.5em;
padding: 0;
}
body.view-article .item-page ul li {
list-style-type: disc;
}
/* ===========================================================================
* Hero typography (.moduletable-js_introducing)
*
* The template sets div.js_tittle h2 to 60px ("WELCOME TO" on home), but
* inner pages with class .why2 need 45px. The h1 (DIGIPIX) is already 120px
* with line-height 79px, but font-weight defaults to bold (700). Original
* site uses 500. The h3 inside js_content ("for sites that get more clicks")
* needs 22px / 500 / 1.1 line-height instead of the current bold.
* ========================================================================= */
/* Hero typography — apply font-weight 500 to h1/h2 across hero variants.
* Avoid setting line-height here on portfolio h1 because the template
* gives it line-height: 50px (matching its 75px font-size with tight
* leading); forcing 1.1 makes the title card too tall by ~33px. */
div.js_tittle h1,
div.js_tittle h2 {
font-weight: 500 !important;
line-height: 1.1;
}
div.js_tittle_portfolio h1,
div.js_tittle_portfolio h2 {
font-weight: 500 !important;
}
/* THE DIGIPIX h2 — explicit 44px line-height so the title card fills the
* full height of the hero parallax container (241px) and aligns with its
* bottom border. Without this the h2 inherits the page's tighter 24px
* line-height, leaving the card 20px short. */
div.js_tittle_portfolio h2 {
line-height: 44px;
}
/* Hero h1 size on home/inner pages only — leave portfolio h1 (75px) alone.
* The template gives .js_tittle > h1 the 120px / 79px sizing. */
div.js_tittle > h1 {
font-size: 120px;
line-height: 79px;
font-weight: 500;
}
.js_content h3,
.js_content > h3 {
font-size: 22px;
font-weight: 500;
line-height: 1.1;
}
/* ===========================================================================
* Inner pages (web-design / why-digipix / contact / home left+right panels)
*
* h1 inside .hello1/.well/.banner blocks: 31px / 500 / 1.1
* h2 in same regions: 30px / 500 / 1.1
* h3 in same regions: 24px / 700 / 1.1
* ========================================================================= */
.banner1-left h1,
.banner1-left h2,
.banner2 h1,
.banner2 h2,
.banner2-right h2,
.well h1,
.well h2,
.hello2 h1,
.hello2 h2,
.why2 h1,
.why2 h2,
.js-choose2 h2 {
font-size: 31px;
font-weight: 500;
line-height: 1.1;
}
/* h2 in main content sections is 30px specifically */
.banner2-right .js-choose2 > h2,
.well .custom > div h2:not(:first-child) {
font-size: 30px;
}
.banner1-left h3,
.banner2 h3,
.banner2-right h3,
.well h3,
.hello2 h3,
.why2 h3,
.js-choose2 h3 {
font-size: 24px;
font-weight: 700;
line-height: 1.1;
}
/* ===========================================================================
* Contact page — letter.png decorative image
*
* Original positioned the paper-letters image so they appear flying out of
* the letterbox/postbox graphic in bg-contact-main.jpg, in the gap between
* the contact panel (left) and the postbox sprite (right). The postbox
* sits roughly under the description text in the contact panel, and the
* letters are placed in the cream/orange band area to the LEFT of the
* postbox — i.e. between the contact panel column and where the form
* column used to be.
*
* .contact .js-main is set to position:relative below; the letter is
* absolute, anchored using % units against that container so it scales
* gracefully when the layout reflows.
* ========================================================================= */
.contact .js-main {
position: relative;
}
@media (min-width: 769px) {
body.contact .letter {
display: block;
position: absolute;
/* Position per design — flush against the right edge of the contact
* panel, letters appear to be flying out of the postbox graphic
* toward the panel. */
top: 230px;
left: 7%;
width: 300px;
height: auto;
z-index: 5;
pointer-events: none;
}
}
@media (max-width: 768px) {
body.contact .letter {
display: none;
}
}
/* Phone and email in the contact panel render as plain text (no underline,
* no link colour). The tags stay so tel: / mailto: still work, just
* not styled like inline links. */
body.contact .hello2 a[href^="tel:"],
body.contact .hello2 a[href^="mailto:"] {
color: inherit;
text-decoration: none;
cursor: text;
}
/* ===========================================================================
* Portfolio fixes
*
* 1. h2 font-weight 500 (template sets 'bold' = 700)
* 2. head.png on h2 → image is 320×81 but h2 only renders 50px tall.
* Either crop image or extend h2 height. Original uses 81px.
* 3. Gap between title bar and image — h2 has bottom margin of 6px.
* Set to 0 so they touch.
* 4. Triangle bg-bottom-port.png is 324×86 — already 4px wider than image.
* Need to ensure parent doesn't constrain it. Use background-size
* so the triangle scales to image width if needed.
* 5. Vertical row spacing — currently has too much white space between rows.
* The .blogportfolio .span4 has padding: 20px 0 105px (template).
* Reduce the bottom padding by 75px → 30px.
* ========================================================================= */
.portfolio .blogportfolio h2,
.portfolio .blogportfolio a h2,
.blogportfolio .item h2,
.blogportfolio .span4 .item h2 a,
.blogportfolio .page-header > h2 {
font-weight: 500 !important;
margin: 0 !important; /* close any gap to the image below */
padding: 10px 0;
line-height: 1.1;
}
/* Don't force background-size — let head.png paint at its natural 320×81 */
/* Tighten vertical row spacing — reduce bottom padding by 75px. */
body.portfolio .blogportfolio .span4 {
padding-bottom: 30px !important;
}
/* Remove the 1px left margin nudge the template applies to .blogportfolio
* .item img. Keeping it would mean the image is offset 1px to the right
* of the title bar above and triangle below, which the user noticed. */
body.portfolio .blogportfolio .item img {
margin-left: 0 !important;
}
/* Also reduce my prior negative margin on items-row since the span4 padding
* is the bigger lever here. */
body.portfolio .blogportfolio .items-row {
margin-bottom: 0;
}
/* Triangle (bg-bottom-port.png) — make sure it spans full image width.
* The image is 324×86 but parent may be narrower. Force background-size
* so the triangle aligns with image edges. */
body.portfolio .blogportfolio .span4 .item a {
background-size: 100% 86px !important;
background-position: center bottom !important;
padding-bottom: 86px !important;
}
/* ===========================================================================
* Mobile hamburger menu button
*
* Replaces the inherited green-gradient pill button (defined in js-custom.css
* with #8bcf54 border + green gradient + bold "Menu" text) with a clean
* three-line hamburger icon. Markup in build.py renders three .icon-bar
* s inside the button; this CSS draws them as horizontal bars.
* ========================================================================= */
button.navbar-toggle {
background: transparent !important;
background-image: none !important;
border: 1px solid rgba(255, 255, 255, 0.6) !important;
border-radius: 4px !important;
box-shadow: none !important;
text-shadow: none !important;
padding: 9px 10px !important;
margin: 8px 10px !important;
font-size: 0; /* hide any text fallback */
width: 44px;
height: 38px;
cursor: pointer;
}
button.navbar-toggle:hover,
button.navbar-toggle:focus {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.9) !important;
}
button.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
margin: 0 auto;
background-color: #fff;
border-radius: 1px;
}
button.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
/* ===========================================================================
* Top gap between .header and .js_banner
*
* .js_banner-parallax is position:absolute; top: 0; height 515. The visible
* gap between the header bottom (y=83) and the start of the hero artwork is
* caused by bg-why.jpg / bg-home.jpg / bg-portfolio.jpg / bg-contact.jpg —
* each starts with a few pixels of cream/tan grain at the top before the
* sky/scene begins. To hide that strip, push the parallax stage up so the
* non-content edge sits behind the header.
* ========================================================================= */
.js_banner-parallax {
top: -8px !important;
}
/* ===========================================================================
* .js-choose mobile containment
*
* Desktop: .js-choose lives in col-md-7 (width 779px), matching the
* bg-why-choose-top.png / bottom.png images natively. Triangle peak is
* baked into the bg image at ~23% from the left.
*
* Mobile (col-xs-12 takes the full viewport width): the bg images don't
* scale, so the triangle becomes invisible (anchored at left:23% of a
* 480px+ container while the dark block extends edge to edge). Constrain
* the element to the bg image's natural 779px max-width and centre it
* so the triangle and block stay aligned together.
* ========================================================================= */
@media (max-width: 768px) {
.js-choose,
.js-choose2 {
max-width: 779px;
margin-left: auto;
margin-right: auto;
}
/* If the viewport is narrower than 779px, shrink the bg image too so
* the dark block keeps its natural proportions on small screens. */
.js-choose {
background-size: 100% auto !important;
}
.js-choose2 {
background-size: 100% auto !important;
background-repeat: repeat-y !important;
}
}
/* ===========================================================================
* .js-choose: rectangular dark block + ::before decorative peak
*
* .js-choose is a plain rectangular box with a solid dark background.
* The decorative triangular peak + up-arrow at the top-left comes from
* a ::before pseudo-element layered over the top of the box, backed by
* bg-why-choose-top.png (779×96).
*
* Padding-top: 85px on .js-choose pushes the content below the peak
* area so text doesn't overlap the triangle.
*
* .js-choose2 keeps a solid dark background so the lower section is
* contiguous with the rectangular .js-choose above it — no visible seam.
* ========================================================================= */
/* .js-choose: TRANSPARENT box so the ::before image's diagonal cuts stay
* see-through — any background-color here would fill the triangle's
* transparent sides and obscure the diagonal lines. padding-top: 85px
* pushes .js-choose2 (the inner dark panel) below the peak area.
*
* .js-choose2: solid dark fill. Its top edge sits at y=85 of .js-choose,
* which is where bg-why-choose-top.png's lower rows become fully opaque
* (verified y=80 is 20px transparent, y=90-95 fully opaque), so the
* image's dark bottom seams cleanly into .js-choose2's dark fill.
*/
.js-choose {
background: none !important;
position: relative;
padding-top: 85px !important;
}
.js-choose::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 96px;
background: url("../images/bg-why-choose-top.png") no-repeat left top transparent;
background-size: auto 96px;
pointer-events: none;
}
.js-choose2 {
background-image: none !important;
background-color: rgb(80, 90, 82) !important;
}
/* Mobile rules from earlier section already cap max-width to 779px.
* With the CSS-drawn triangle they no longer need background-size:100%. */
@media (max-width: 768px) {
.js-choose,
.js-choose2 {
background-size: auto !important;
}
}