/* ============================================================= BHUTAN AUTOMATION — LOGO STYLES Animated logo in the navbar (traveling arrow + blinking LED) and a plain static logo in the footer. Source image: images/ba-logo-hd.png (native size 4293 x 1539) Loaded LAST in , after templatemo-tiya-golf-club.css. Shared by every page on the site (index, event, tender, login, dashboard, and the rest of the admin pages) so the navbar looks and behaves identically everywhere. ============================================================= */ /* ----------------------------------------------------------- 1. FIX — templatemo-tiya-golf-club.css caps the brand link at `max-width: 48px` (built for a small icon-style logo). That single line is why the logo was rendering tiny. Everything else in that stylesheet is harmless to us and left untouched. The footer reuses the same "navbar-brand" wrapper around its own logo (views/*.ejs share the markup), so it needs the same fix -- without it, the 48px cap silently overrides .footer-logo's own width via `max-width: 100%` resolving against the capped 48px parent instead of the real column width, which is why bumping .footer-logo's width alone didn't visibly change anything. ----------------------------------------------------------- */ .navbar .navbar-brand, .site-footer .navbar-brand { max-width: none !important; height: auto; } /* ----------------------------------------------------------- 2. LOGO FRAME — sizes the logo in the navbar and keeps its native aspect ratio so it can never stretch or distort. ----------------------------------------------------------- */ .logo-frame { position: relative; display: inline-block; width: 195px; aspect-ratio: 4293 / 1539; } .logo-img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); } @media (max-width: 480px) { .logo-frame { width: 150px; } } /* ----------------------------------------------------------- 3. ANIMATED CIRCUIT ARROW — an invisible SVG motion-path, traced over the logo's real circuit line, that steers a small arrowhead (plus a fading comet trail) around it continuously. ----------------------------------------------------------- */ .logo-circuit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .circuit-track { fill: none; stroke: none; /* the real green line already lives in the PNG */ } .arrow-glow { filter: drop-shadow(0 0 55px rgba(52, 211, 153, .95)) drop-shadow(0 0 110px rgba(16, 185, 129, .6)); } /* ----------------------------------------------------------- 4. BLINKING LED — a red circle overlay positioned exactly on the logo's red button, pulsing on a continuous cycle. ----------------------------------------------------------- */ .logo-blink-dot { position: absolute; left: 39.83%; top: 64.39%; width: 15.47%; height: 41.07%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9b8f 0%, #e6392b 45%, #8c0f0c 100%); pointer-events: none; animation: baLedBlink 1.4s ease-in-out infinite; } @keyframes baLedBlink { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 8px 3px rgba(255, 45, 35, .85), 0 0 18px 8px rgba(255, 45, 35, .35); } 50% { opacity: .22; transform: translate(-50%, -50%) scale(.82); box-shadow: 0 0 0 0 rgba(255, 45, 35, 0); } } /* ----------------------------------------------------------- 5. FOOTER LOGO — plain, static (no animation) for the dark footer background. ----------------------------------------------------------- */ .site-footer .footer-logo { width: 250px; max-width: 100%; height: auto; display: block; margin-bottom: 1rem; } /* ----------------------------------------------------------- 6. CONSISTENT NAVBAR BACKGROUND — templatemo-tiya-golf-club.css gives the navbar three different backgrounds depending on context: transparent by default, var(--secondary-color) (a dark slate) at widths <= 991px, and a sticky-scroll blue. Switching between transparent and dark slate right at the 991px breakpoint is what made the bar look like it was "changing colour" as the window resized. Pinning one solid colour here makes the navbar look identical at every screen size, on every page. Colour is #123f61 -- the same shade every hero/page-header gradient starts from, so the navbar now reads as a seamless continuation of the page rather than a separate, brighter blue bar sitting on top of it (previously #1a5888, which didn't belong to the site's navy palette at all). ----------------------------------------------------------- */ .navbar, .sticky-wrapper.is-sticky .navbar { background-color: #123f61 !important; } /* ----------------------------------------------------------- 7. HERO PHOTO, UNCROPPED — the homepage used to have a large decorative wave SVG sitting over the top of the hero photo. It cropped off the tops of both entrance pillars and part of the building signage, so it's been removed from the markup in favour of showing the photo in full. This softens the seam where the solid navbar ends and the photo begins, so it reads as an intentional edge instead of an abrupt cut. ----------------------------------------------------------- */ .hero-section { box-shadow: inset 0 70px 60px -50px rgba(0, 0, 0, .55); } /* ----------------------------------------------------------- 8. HERO CTA + QUICK-FACTS ROW — the two hero buttons and three headline facts (ISO count, incorporation year, the DGPC/Andritz joint venture) sit in one row near the top of the hero content — buttons on the left, facts on the right — so both are visible at a glance without scrolling. The certification badges below (in the site's navy) are a secondary confirmation once you scroll past the hero. ----------------------------------------------------------- */ html { scroll-behavior: smooth; } .hero-cta-stats-row { margin-top: 28px; } .hero-quick-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; text-align: left; } @media (min-width: 992px) { .hero-quick-stats { grid-template-columns: repeat(3, auto); justify-content: end; text-align: right; gap: 18px 32px; } } .hero-stat-number { color: #ffffff; font-size: 1.65rem; font-weight: 800; line-height: 1; text-shadow: 0 2px 8px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .9); } .hero-stat-label { color: rgba(255, 255, 255, .9); font-size: .82rem; margin-top: 4px; text-shadow: 0 1px 5px rgba(0, 0, 0, .85); } .hero-stats-section { position: relative; z-index: 1; background: linear-gradient(180deg, #123f61 0%, #0f3652 100%); padding: 22px 0; /* templatemo-tiya-golf-club.css pulls .hero-section's bottom edge up by 90px (margin-bottom: -90px) so a taller element below tucks under the photo. This strip (68px tall) partially cancels that pull -- enough to keep it comfortably taller than the remaining overlap (so no gap ever shows through), while still sliding the strip up closer to the hero instead of sitting a full scroll below it. */ margin-top: 28px; } @media screen and (max-width: 991px) { .hero-stats-section { /* at this breakpoint the template pushes .hero-section DOWN instead (position: relative; top: 82px), so there's no negative pull to cancel here. */ margin-top: 0; } } .hero-certified-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; } .hero-certified-label { color: rgba(255, 255, 255, .5); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-right: 4px; } .hero-cert-badge { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .85); font-size: .85rem; font-weight: 600; } .hero-cert-badge i { color: #F2CC8F; font-size: 1rem; } @media (max-width: 767px) { .hero-stat-number { font-size: 1.3rem; } .hero-cta-stats-row { margin-top: 20px; } } /* ----------------------------------------------------------- 9. ABOUT-US TEASER (homepage) — condensed "Who We Are" panel replacing the old full About Us content on the homepage, in the site's navy/gold palette. Links through to the dedicated About Us page (/about) for the full company + board detail. The right-hand column is two stacked white partner cards (DGPC, Andritz), each a clickable link out to that partner's site. ----------------------------------------------------------- */ .about-teaser-section { background: linear-gradient(180deg, #123f61 0%, #0c2c44 100%); padding: 90px 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden; } .about-teaser-section > .container { width: 100%; } .about-teaser-eyebrow { display: inline-block; color: #F2CC8F; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; } .about-teaser-headline { color: #ffffff; font-weight: 800; font-size: 2.25rem; line-height: 1.2; margin-bottom: 22px; } .about-teaser-text { color: rgba(255, 255, 255, .78); font-size: 1rem; line-height: 1.7; margin-bottom: 18px; } .about-teaser-divider { border: none; border-top: 1px solid rgba(242, 204, 143, .35); margin: 28px 0; } .about-teaser-stats { display: flex; flex-wrap: wrap; gap: 28px 40px; margin-bottom: 30px; } .about-teaser-stat-number { color: #ffffff; font-size: 1.9rem; font-weight: 800; line-height: 1; } .about-teaser-stat-label { color: rgba(255, 255, 255, .68); font-size: .85rem; margin-top: 6px; } .about-teaser-link { display: inline-flex; align-items: center; gap: 8px; color: #F2CC8F; font-weight: 700; font-size: 1rem; text-decoration: none; transition: gap .2s ease, color .2s ease; } .about-teaser-link:hover { color: #ffffff; gap: 14px; } .about-teaser-partner-cards { display: flex; flex-direction: column; justify-content: center; gap: 20px; height: 100%; } .about-teaser-partner-card { display: block; background: #ffffff; border-radius: 16px; padding: 26px 28px; text-decoration: none; box-shadow: 0 16px 34px rgba(0, 0, 0, .22); transition: transform .2s ease, box-shadow .2s ease; } .about-teaser-partner-card:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(0, 0, 0, .3); } .about-teaser-partner-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .about-teaser-partner-card-logo-frame { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex-shrink: 0; } .about-teaser-partner-card-logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .about-teaser-partner-card-name { color: #3D405B; font-size: 1.05rem; font-weight: 700; line-height: 1.3; } .about-teaser-partner-card-desc { color: #6b7280; font-size: .92rem; line-height: 1.6; margin-bottom: 16px; } .about-teaser-partner-card-link { display: inline-flex; align-items: center; gap: 6px; color: #1a5888; font-weight: 700; font-size: .9rem; } .about-teaser-partner-card:hover .about-teaser-partner-card-link { text-decoration: underline; } @media (max-width: 991px) { .about-teaser-partner-cards { margin-top: 50px; } } @media (max-width: 767px) { .about-teaser-headline { font-size: 1.7rem; } .about-teaser-section { padding: 60px 0; } } /* ----------------------------------------------------------- 10. ABOUT PAGE HEADER — compact navy banner at the top of the dedicated About Us page (views/about.ejs), matching the same gradient used for the homepage's hero-stats-section and the About-Us teaser above. ----------------------------------------------------------- */ .about-page-header { background: linear-gradient(180deg, #123f61 0%, #0f3652 100%); padding: 160px 0 60px; text-align: center; } .about-page-eyebrow { display: inline-block; color: #F2CC8F; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; } .about-page-lead { color: rgba(255, 255, 255, .82); max-width: 640px; margin: 0 auto; font-size: 1.05rem; } @media (max-width: 767px) { .about-page-header { padding: 130px 0 50px; } } /* ----------------------------------------------------------- 11. ABOUT PAGE — CONTINUOUS NAVY. The company-detail block and the Board block (views/about.ejs) used to drop to the site's default white background right after the navy page header, which read as a jarring cut to "a white page" partway through one continuous "who we are" story. Both now share this flat navy -- the same tone the header's gradient ends on, so the seam between header/company-detail/board is invisible -- with light text, and a white card behind each partner logo (DGPC's is a transparent PNG that needs a light backdrop to read) and behind each board member's bio for contrast against the navy. ----------------------------------------------------------- */ .about-detail-section { background: #0f3652; } .about-detail-section h1, .about-detail-section h2 { color: #ffffff; } .about-detail-section p { color: rgba(255, 255, 255, .78); } .about-detail-section p strong { color: #ffffff; } .about-detail-section .member-block-image-wrap { background: #ffffff; padding: 20px; border-radius: 16px; } .about-detail-section .member-block-info p { color: rgba(255, 255, 255, .78); } .about-detail-section .custom-block-wrap { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 24px 20px; } .about-detail-section .custom-block-image { border-radius: 12px; } .about-detail-section .custom-block-body h5:first-child { color: #ffffff; } .about-detail-section .custom-block-body h5[style] { color: #F2CC8F !important; } /* ----------------------------------------------------------- 12. ABOUT PAGE — FULL REDESIGN. Six content sections beneath the page header (views/about.ejs): The Adjoint Company, What We Stand For, Leadership / Board of Directors, Parent Organizations, and a Get In Touch CTA. All sit on the same flat navy used by .about-detail-section (section 11); the "odd" detail sections below get a touch darker shade so consecutive sections stay visually distinct from one another without breaking the continuous-navy story. Eyebrow/headline/ divider/stat styling mirrors the homepage teaser (section 9) and page header (section 10) for a consistent voice across all three navy surfaces. Board cards keep each director's photo (as a circular avatar) next to their name/role. ----------------------------------------------------------- */ .about-detail-section:nth-of-type(odd) { background: #0c2c44; } /* The reused .about-teaser-partner-card* component (section 9) is a white card with dark/gray text, but section 11's generic ".about-detail-section p" rule (specificity class+type) outranks the card's own single-class ".about-teaser-partner-card-desc" rule when the card is embedded here on the About page -- turning its description paragraph white-on-white and invisible. Reassert the card's intended colors at matching (class+class) specificity. */ .about-detail-section .about-teaser-partner-card-desc { color: #6b7280; } .about-detail-section .about-teaser-partner-card-name { color: #3D405B; } .about-section-eyebrow { display: inline-block; color: #F2CC8F; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; } .about-section-headline { color: #ffffff; font-weight: 800; font-size: 2.1rem; line-height: 1.25; margin-bottom: 22px; } .about-page-text { color: rgba(255, 255, 255, .78); font-size: 1rem; line-height: 1.75; margin-bottom: 18px; } .about-page-divider { border: none; border-top: 1px solid rgba(242, 204, 143, .35); margin: 28px 0; } .about-page-stats { display: flex; flex-wrap: wrap; gap: 32px; } .about-page-stat-number { color: #ffffff; font-size: 1.9rem; font-weight: 800; line-height: 1; } .about-page-stat-label { color: rgba(255, 255, 255, .68); font-size: .85rem; margin-top: 6px; max-width: 140px; } /* -- What We Stand For: value cards -- */ .about-value-card { height: 100%; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 30px 26px; transition: transform .2s ease, background .2s ease, border-color .2s ease; } .about-value-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .08); border-color: rgba(242, 204, 143, .35); } .about-value-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 12px; background: rgba(242, 204, 143, .14); color: #F2CC8F; font-size: 1.3rem; margin-bottom: 18px; } .about-value-card h5 { color: #ffffff; font-weight: 700; margin-bottom: 10px; } .about-value-card p { color: rgba(255, 255, 255, .68); font-size: .92rem; line-height: 1.65; margin-bottom: 0; } /* -- about-value-card variant with a photo instead of an icon (used by the Solutions page's "Every Layer of the System" catalogue cards) -- the image bleeds to the card's own edges via negative margins matching the card's padding, so it reads as a photo header rather than an inset thumbnail. */ .about-value-card-with-image { padding-top: 0; overflow: hidden; } .about-value-card-image { margin: 0 -26px 20px; overflow: hidden; } .about-value-card-image img { display: block; width: 100%; height: 170px; object-fit: cover; } /* -- Leadership: board of directors cards -- */ .about-board-card { height: 100%; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 26px 24px; transition: transform .2s ease, background .2s ease, border-color .2s ease; } .about-board-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .08); border-color: rgba(242, 204, 143, .35); } .about-board-card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .about-board-card-photo { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(242, 204, 143, .45); background: #ffffff; } .about-board-card-name { color: #ffffff; font-weight: 700; font-size: 1.02rem; margin-bottom: 4px; } .about-board-card-role { display: block; color: #F2CC8F; font-size: .78rem; font-weight: 600; line-height: 1.4; } .about-board-card-bio { color: rgba(255, 255, 255, .68); font-size: .88rem; line-height: 1.6; margin-bottom: 0; } /* -- Organogram: pure-CSS connector tree for the internal reporting structure (Board -> CEO -> CTO/Finance/ICT/Procurement/HR, with Project Management + Manufacturing under CTO). Each
  • draws its own elbow connector to its siblings' shared bus via ::before/::after, and each nested