/* Clearflow Lanka — small additions on top of the Industry design system (_ds/industry-.../styles.css). Link this AFTER that stylesheet. No JS anywhere on the site depends on this file; it's pure CSS. */ /* Footer / nav link hover states (the design export used a non-standard style-hover="" attribute that plain browsers ignore — real :hover here). */ .footer-link { color: #cfe0fa; text-decoration: none; } .footer-link:hover { color: #fff; text-decoration: underline; } .review-btn { transition: background 0.15s ease; } .review-btn:hover { background: rgba(238, 242, 248, 0.1); } /* Primary nav links — base styles live here (not inline) so the mobile media query below can actually change them; an inline style on the element would always beat a stylesheet media query, override or not. */ .nav-link { display: inline-block; padding: 8px 12px; border-radius: 4px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; text-decoration: none; color: var(--color-text); } .nav-link:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); } .nav-link-active { color: var(--color-accent-700); background: var(--color-accent-100); } /* Image-slot placeholder: shown until a real photo is dropped in at the same path referenced in the HTML comment just above each one. */ .img-pending { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; background: repeating-linear-gradient(45deg, var(--color-surface) 0 10px, var(--color-bg) 10px 20px); color: color-mix(in srgb, var(--color-text) 55%, transparent); font-size: 12px; line-height: 1.4; } /* Header CTAs (desktop) and the sticky mobile call/WhatsApp bar (mobile) are mutually exclusive — display is set ONLY here, never inline, so these media queries are the one place controlling which one shows. */ .header-cta { display: flex; } .sticky-mobile-bar { display: flex; } /* Mobile sticky call/WhatsApp bar covers the bottom of the viewport. Pages that have the bar carry class="has-sticky-bar" on — pad the FOOTER (not body) so the extra space stays dark navy, matching the footer background, instead of showing as a pale gap below it. */ @media (max-width: 640px) { .header-cta { display: none; } body.has-sticky-bar footer { padding-bottom: 56px; } } @media (min-width: 641px) { .sticky-mobile-bar { display: none; } } /* Primary nav container. Base (desktop) rule below — kept out of the inline style attribute for the same reason as .nav-link above: a media query can't override an inline declaration of the same property. */ .nav-scroll { display: flex; align-items: center; gap: 2px; overflow-x: auto; white-space: nowrap; flex: 1; scrollbar-width: none; } /* Mobile menu toggle (checkbox-hack, no JS): a visually-hidden checkbox plus a hamburger button. Clicking/tapping the label natively toggles the checkbox even though it's invisible, and the :checked sibling selectors below open/close the panel and swap the icon — all pure CSS. Every nav link is still plain markup in the page, present and crawlable regardless of the panel's open/closed state. */ .nav-toggle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .nav-toggle-btn { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: auto; border-radius: 4px; color: var(--color-text); cursor: pointer; flex: none; } .nav-toggle-btn:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); } .nav-toggle:focus-visible ~ .nav-toggle-btn { outline: 2px solid var(--color-accent); outline-offset: 2px; } .nav-toggle-btn .icon-close { display: none; } .nav-toggle:checked ~ .nav-toggle-btn .icon-menu { display: none; } .nav-toggle:checked ~ .nav-toggle-btn .icon-close { display: block; } @media (max-width: 640px) { .nav-toggle-btn { display: flex; } /* Collapsed into a dropdown panel anchored under the sticky header (header's position:sticky already gives it a positioning context). */ .nav-scroll { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; overflow: hidden; white-space: normal; background: var(--color-bg); border-bottom: 1px solid var(--color-divider); box-shadow: var(--shadow-md); max-height: 0; transition: max-height 0.25s ease; } .nav-toggle:checked ~ .nav-scroll { max-height: 480px; overflow-y: auto; } .nav-link { display: block; padding: 14px 20px; border-radius: 0; border-top: 1px solid var(--color-divider); } .nav-link:first-child { border-top: none; } } /* Site preference: plain rounded cards, no wireframe "+" registration marks. The Industry design system (styles.css, loaded before this file) draws those marks as four children inside every .blueprint element and forces every card/button/input square (border-radius: 0) — this section overrides both site-wide rather than editing every "corner" tag out of every page. */ .blueprint > .corner { display: none; } .blueprint, .card, .btn, .input, .tag, .seg, .dialog { border-radius: var(--radius-lg); } .blueprint.duotone, .blueprint.halftone, .blueprint.plate { overflow: hidden; } /* Site preference: real photos in their natural color. The Industry design system's .duotone wrapper (styles.css) washes every image in the accent blue via a ::after overlay with mix-blend-mode:color — content:none suppresses that generated overlay everywhere the class is used, without having to strip the class off every
/
across every page. */ .duotone::after { content: none; }