/* Access Office — footer content re-skin (access2026 theme) footer.twig's Twig/JS is intentionally untouched (see header comment in that file) — Owl Carousel and jQuery-UI accordion manage several elements' layout directly via inline styles, so this file only overrides colour, type, spacing and borders. Never set display/position/width/transform on .owl-carousel, .owl-wrapper, .owl-item or .owl-stage — Owl owns those. */ .access-slider { padding: var(--space-6) 0; overflow-x: hidden; } .access-slider .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); } /* Hard containment: Owl Carousel occasionally miscalculates internal stage width on init (a known class of bug, various trigger conditions), which can push the whole page wide. This is a fail-safe on OUR OWN wrapper div, not on any Owl-owned element (.owl-carousel/.owl-wrapper/ .owl-item/.owl-stage untouched) — clips anything that escapes Owl's own internal overflow:hidden without affecting its slide mechanics. */ #galry-demo, #owl-demo { max-width: 100%; } /* Non-home fallback branch (Related/Featured products + Completed Jobs repeat, shown on every page except home) doesn't carry .access-slider, so it never got section-level padding/max-width — mirrored here. Never touch .probox_outr's own display/position: it IS .owl-carousel on this element, Owl owns that. */ .feature_bg { padding: var(--space-6) 0; } .feature_bg .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); } .feature_bg_inner + .feature_bg_inner { margin-top: var(--space-5); } .our_pro__hdr, .project-header { margin-bottom: var(--space-4); } .our_pro__hdr h2, .project-header h2 { font-family: var(--font-heading); color: var(--color-graphite); font-size: 22px; text-transform: uppercase; letter-spacing: 0.02em; } .project-header .separator { width: 96px; height: 5px; background-image: repeating-linear-gradient(to right, var(--color-blueprint) 0, var(--color-blueprint) 1px, transparent 1px, transparent 8px); background-size: 8px 5px; margin: var(--space-2) 0; } .project-header .subtitle { font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--color-text-muted); max-width: 70ch; } /* Product / job cards inside the Owl strips — Owl sets width/position on .probox's parent (.owl-item); safe to style the card's own look. */ .probox, .featured-item { background: var(--color-surface); border: 1px solid var(--border-color); border-top: 3px solid var(--color-graphite); border-radius: 0; overflow: hidden; margin: 0 var(--space-2); } .probox .pro_pic img, .featured-item .pro_pic img { display: block; width: 100%; height: auto; } .probox .detail, .featured-item .product-detail { padding: var(--space-3); } .probox .tittle, .featured-item .tittle { font-family: var(--font-heading); font-size: 14px; color: var(--color-graphite); text-transform: none; } .probox .value_bar .shop { font-family: var(--font-body); font-size: 12px; color: var(--color-text-muted); } .probox .quicktip { background: var(--color-stock-teal); color: var(--color-white); font-size: 11px; font-weight: 600; text-transform: uppercase; padding: var(--space-1) var(--space-2); display: inline-flex; align-items: center; gap: 4px; } .access-btn { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-graphite); background: var(--color-signal); padding: var(--space-2) var(--space-3); border-radius: 0; } .customNavigation { margin-top: var(--space-3); } /* Completed Jobs — "Our Projects" single-slide carousel (home). Owl (via site-init.js, items:1/nav/dots when carries is-home-page) owns width/position on #galry-demo, .owl-wrapper, .owl-item, .owl-stage — untouched here. Everything below only styles content inside a slide, plus Owl's auto-generated .owl-nav/.owl-dots (no .owl-theme class in the markup, so those start completely unstyled — this is their only styling, not an override). */ .blog-slider #galry-demo .project-info-wrapper { display: flex; flex-wrap: wrap; background: var(--color-surface); border: 1px solid var(--border-color); border-top: 3px solid var(--color-blueprint); } .blog-slider .project-info-col { flex: 1 1 50%; min-width: 280px; } .blog-slider .project-info-col.table-like { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); padding: var(--space-6) var(--space-5); } .blog-slider .meta-blog-wrapper { display: flex; flex-direction: column; gap: var(--space-2); } .blog-slider .blog-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--color-steel); } .blog-slider .blog-count .item-index { color: var(--color-blueprint); font-weight: 600; } .blog-slider .blog-title .link-ref { border-bottom: none; padding-bottom: 0; text-transform: none; } .blog-slider .blog-title h2 { font-family: var(--font-heading); font-size: 26px; text-transform: uppercase; color: var(--color-graphite); margin: 0; } .blog-slider .blog-description p { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--color-text-muted); margin: 0; max-width: 46ch; } .blog-slider .blog-link { margin-top: var(--space-2); } .blog-slider .blog-link .link-button { display: inline-block; font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-graphite); border-bottom: 2px solid var(--color-signal); padding-bottom: 2px; } .blog-slider .project-info-col.text-right { position: relative; } .blog-slider .image-number-wrapper { position: relative; height: 100%; min-height: 320px; } .blog-slider .image-number-wrapper .link-ref { display: block; height: 100%; border-bottom: none; padding-bottom: 0; } .blog-slider .blog-image { width: 100%; height: 100%; min-height: 320px; object-fit: cover; } .blog-slider .big-number { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 1; font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1; color: var(--color-white); background: var(--color-blueprint); padding: var(--space-1) var(--space-2); } /* Owl's auto-generated controls (no default theme class applied) */ .blog-slider .owl-nav { position: absolute; top: 50%; left: 0; right: 0; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; padding: 0 var(--space-2); } .blog-slider .owl-nav [class*='owl-'] { pointer-events: auto; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 0; color: var(--color-graphite); background: var(--color-surface); border: 1px solid var(--border-color-strong); cursor: pointer; } .blog-slider .owl-nav [class*='owl-']::before { font-family: var(--font-heading); font-size: 18px; line-height: 1; } .blog-slider .owl-nav .owl-prev::before { content: '‹'; } .blog-slider .owl-nav .owl-next::before { content: '›'; } .blog-slider .owl-nav [class*='owl-']:hover { background: var(--color-graphite); color: var(--color-white); } .blog-slider .owl-nav .disabled { opacity: 0.35; cursor: default; } .blog-slider .owl-dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); } .blog-slider .owl-dot span { display: block; width: 8px; height: 8px; background: var(--border-color); transition: background .15s ease; } .blog-slider .owl-dot.active span, .blog-slider .owl-dot:hover span { background: var(--color-blueprint); } @media (max-width: 767px) { .blog-slider .project-info-wrapper { flex-direction: column; } .blog-slider .project-info-col.table-like { padding: var(--space-4); order: 2; } .blog-slider .image-number-wrapper, .blog-slider .blog-image { min-height: 220px; order: 1; } .blog-slider .blog-title h2 { font-size: 20px; } .blog-slider .owl-nav { display: none; } } /* Brands sold strip */ .brands-sold { background: var(--color-page-bg); padding: var(--space-5) 0; } .brands-sold-wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6); } .brand-logo-link { display: inline-flex; align-items: center; justify-content: center; height: 48px; } .brands-sold-wrapper img { max-height: 40px; width: auto; opacity: 0.7; filter: grayscale(1); transition: opacity .15s ease, filter .15s ease; } .brand-logo-link:hover img { opacity: 1; filter: grayscale(0); } /* Quick-action tiles (register / catalogue / facebook / contact) */ .social_por { background: var(--color-surface); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .social_por_inner { display: grid; grid-template-columns: repeat(4, 1fr); } .blog_div { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-right: 1px solid var(--border-color); } .social_por_inner a:last-child .blog_div { border-right: none; } .blog_icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; background: var(--color-page-bg); border: 1px solid var(--border-color); border-radius: 0; color: var(--color-blueprint); font-size: 15px; } .blog_icon::before { font-family: 'FontAwesome'; line-height: 1; } .blog_icon.reg_icon::before { content: '\f234'; } .blog_icon.cat_icon::before { content: '\f1c1'; } .blog_icon.fb_icon::before { content: '\f09a'; } .blog_icon.cnt_icon::before { content: '\f095'; } .blog_div:hover .blog_icon { background: var(--color-blueprint); color: var(--color-white); border-color: var(--color-blueprint); } .blog_cntn h4 { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-graphite); margin-bottom: 2px; } .blog_cntn p { font-family: var(--font-body); font-size: 12px; color: var(--color-text-muted); margin: 0; } @media (max-width: 767px) { .social_por_inner { grid-template-columns: repeat(2, 1fr); } } /* Testimonials + brands-we-sell row */ .testi_por h2, .branding_sec h2 { font-family: var(--font-heading); font-size: 18px; color: var(--color-graphite); margin-bottom: var(--space-3); } .feedtxt p { font-family: var(--font-body); font-size: 15px; font-style: italic; color: var(--color-text); } .auther_sec { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--color-text-muted); } .brnd_por img { max-height: 36px; width: auto; margin: 0 var(--space-2) var(--space-2) 0; }