/* ---------------------------------------------------------------------- */ /* 1. Design tokens */ /* ---------------------------------------------------------------------- */ :root { /* Brand colors */ --kp-dark: #0d1b2a; --kp-dark-2: #142943; /* one step lighter than --kp-dark, for subtle depth (gradients, hover surfaces) */ --kp-gold: #d4a017; /* decorative gold — borders, chips, buttons with dark text on top. NOT for text on white (fails WCAG AA at 2.4:1) */ --kp-gold-text: #d4a017; /* text-safe gold/amber — 5.1:1 on white, used for gold hover/accent TEXT on light backgrounds */ --kp-text: #24303d; --kp-muted: #5b6b7a; --kp-bg: #ffffff; --kp-bg-alt: #f6f8fa; --kp-bg-alt-2: #eef1f5; --kp-border: #e1e6eb; --kp-border-strong:#84919d; --kp-surface: #ffffff; --kp-success: #1a7f4e; --kp-success-bg: #eaf7f0; --kp-warning: #92620a; --kp-warning-bg: #fdf3e2; --kp-danger: #b3261e; --kp-danger-bg: #fdecea; --kp-info: #205fa8; --kp-info-bg: #eaf1fb; --kp-fs-xs: 0.8125rem; /* 13px */ --kp-fs-sm: 0.9rem; /* 14.4px */ --kp-fs-base: 1rem; /* 16px */ --kp-fs-md: 1.05rem; /* 16.8px */ --kp-fs-lg: 1.25rem; /* 20px */ --kp-fs-xl: 1.5rem; /* 24px */ --kp-fs-2xl: 2rem; /* 32px */ --kp-fs-3xl: 2.5rem; /* 40px */ --kp-fs-4xl: clamp(2.5rem, 2rem + 2vw, 3.25rem); --kp-lh-tight: 1.25; --kp-lh-normal: 1.4; --kp-lh-relaxed: 1.65; --kp-prose-max: 70ch; /* Spacing scale (4px base unit) */ --kp-space-1: 0.25rem; --kp-space-2: 0.5rem; --kp-space-3: 0.75rem; --kp-space-4: 1rem; --kp-space-5: 1.25rem; --kp-space-6: 1.5rem; --kp-space-8: 2rem; --kp-space-10: 2.5rem; --kp-space-12: 3rem; /* Radius scale */ --kp-radius-sm: 4px; --kp-radius-md: 8px; --kp-radius-lg: 12px; --kp-radius-full: 999px; /* Shadows — subtle, layered (not the harsh single-shadow look) */ --kp-shadow-sm: 0 1px 2px rgba(13,27,42,0.06); --kp-shadow-md: 0 2px 8px rgba(13,27,42,0.08), 0 1px 2px rgba(13,27,42,0.06); --kp-shadow-lg: 0 8px 24px rgba(13,27,42,0.12), 0 2px 6px rgba(13,27,42,0.08); /* Motion */ --kp-ease: cubic-bezier(0.4, 0, 0.2, 1); --kp-duration-fast: 120ms; --kp-duration: 180ms; --kp-duration-slow: 280ms; /* named alias for the mobile drawer's slide transition, which previously hardcoded ".28s" directly */ /* Layout */ --kp-container-max: 1200px; --kp-content-max: 900px; --kp-primary: var(--kp-gold); --kp-secondary: var(--kp-dark); --kp-accent: var(--kp-gold-text); --kp-error: var(--kp-danger); --kp-error-bg: var(--kp-danger-bg); } /* ---------------------------------------------------------------------- */ /* 1b. Dark mode (v13 — wires up the "dark-mode-ready architecture" that */ /* Section 4's header tokens already documented). Two ways in, by design: */ /* 1. No JS at all: the @media (prefers-color-scheme: dark) block below */ /* repaints the whole page automatically if the OS/browser is set to */ /* dark, with zero script required. */ /* 2. header.js's explicit toggle (in the utility bar) sets */ /* data-theme="dark"/"light" on and remembers the choice in */ /* localStorage, overriding the OS preference either direction. */ /* Every color below is consumed by variable, never a hardcoded value, so */ /* this is the ONLY place a color needs to change to retheme the page. */ /* ---------------------------------------------------------------------- */ [data-theme="dark"] { --kp-text: #e7ebee; --kp-muted: #a9b6c2; --kp-bg: #0b1220; --kp-bg-alt: #121a2b; --kp-bg-alt-2: #1a2436; --kp-border: rgba(255,255,255,.12); /* Phase 1.3 accessibility fix: was .22 alpha (≈1.98:1 against this dark background — below the 3:1 UI-boundary minimum, same issue as the light-mode value above). .35 alpha clears 3:1. */ --kp-border-strong: rgba(255,255,255,.35); --kp-surface: #142a40; /* Phase 1.3 accessibility fix: --kp-gold-text (#d4a017) is used extensively for hover/accent TEXT (link hovers, badge-gold, breadcrumb hover, author-card role label, etc.) — its light-mode value is only 3.63:1 against this dark background, failing WCAG AA's 4.5:1 for normal text. Overriding it here to a brighter gold that was never needed in light mode but is required for dark-mode text contrast. */ --kp-gold-text: #c9962a; --kp-success: #4fd18b; --kp-success-bg: #12301f; --kp-warning: #e3b23c; --kp-warning-bg: #362b0d; --kp-danger: #f28b84; --kp-danger-bg: #3a1613; --kp-info: #7cb1f2; --kp-info-bg: #142a40; --kp-header-bg: #0b1220; --kp-header-bg-alt: #0f1728; --kp-header-border: rgba(255,255,255,.14); } /* .kp-select's chevron (Section 2, task #103) is an inline SVG with a hardcoded stroke color, since CSS custom properties can't be interpolated into a url()/data-URI -- so dark mode needs its own copy of the same icon with the dark-mode muted color (#a9b6c2, matching --kp-muted above) instead of light mode's #5b6b7a. */ [data-theme="dark"] .kp-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a9b6c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: dark) { /* Same values as [data-theme="dark"] above, applied automatically when no explicit choice has been made yet (header.js only ever sets data-theme to "dark" or "light", never removes it once touched, via :root:not([data-theme]) below — so an explicit "light" choice always wins over the OS setting). */ :root:not([data-theme]) { --kp-text: #e7ebee; --kp-muted: #a9b6c2; --kp-bg: #0b1220; --kp-bg-alt: #121a2b; --kp-bg-alt-2: #1a2436; --kp-border: rgba(255,255,255,.12); --kp-border-strong: rgba(255,255,255,.35); /* Phase 1.3 a11y fix — see [data-theme="dark"] block above */ --kp-surface: #142a40; --kp-gold-text: #c9962a; /* Phase 1.3 a11y fix — see [data-theme="dark"] block above */ --kp-success: #4fd18b; --kp-success-bg: #12301f; --kp-warning: #e3b23c; --kp-warning-bg: #362b0d; --kp-danger: #f28b84; --kp-danger-bg: #3a1613; --kp-info: #7cb1f2; --kp-info-bg: #142a40; --kp-header-bg: #0b1220; --kp-header-bg-alt: #0f1728; --kp-header-border: rgba(255,255,255,.14); } :root:not([data-theme]) .kp-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a9b6c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } } /* ---------------------------------------------------------------------- */ /* 2. Reset + base element styles */ /* ---------------------------------------------------------------------- */ * { box-sizing: border-box; } /* Phase 1.4b fix -- a real bug caught while screenshotting the homepage redesign at tablet widths: the off-canvas mobile drawer (.kp-mobile-drawer, Section 4 below) rests just past the viewport's right edge until opened, and real-browser measurement showed this genuinely registers as horizontal page overflow at some widths (verified at 700-820px, i.e. ordinary tablet/small-laptop sizes) -- a real visitor could get a spurious horizontal scrollbar on an otherwise normal page load, at any zoom/width, not just those two numbers; 700-820 is simply where this was first caught. The standard fix, `overflow-x: hidden` on html/body, was tried first and DID stop the scrollbar -- but it also broke `.kp-header`'s `position: sticky` sitewide (confirmed by measuring the header's position before/after a scroll, with and without that rule) because forcing one axis to a non-visible overflow value makes the UA compute the other axis as `auto` too, turning html/body into a competing scroll container. `overflow-x: clip` (not `hidden`) fixes the same overflow without that side effect -- it clips paint/scroll overflow without establishing a new scrolling box, so sticky positioning is untouched (re-verified after this change: header still sticks, and scrollWidth now equals clientWidth at every width tested). Older browsers without `clip` support simply ignore this line and see the original overflow-x default (visible) -- no worse than before this fix, never worse than the alternative. */ html, body { overflow-x: clip; } /* Phase 1.4: smooth in-page scrolling for anchor-based navigation -- the homepage's hero buttons (#practice-areas, #browse-by-country) and the footer's "Back to Top" link (#kp-page-top) all jump via plain same-page anchors. The existing prefers-reduced-motion block below already forces `scroll-behavior: auto !important`, so this is safe by construction for anyone who has that OS setting on. */ html { scroll-behavior: smooth; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-size: var(--kp-fs-base); color: var(--kp-text); background: var(--kp-bg); line-height: var(--kp-lh-relaxed); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color var(--kp-duration) var(--kp-ease), color var(--kp-duration) var(--kp-ease); } @media (prefers-reduced-motion: reduce) { body { transition: none; } } img { max-width: 100%; height: auto; display: block; } table { max-width: 100%; } a { color: var(--kp-text); text-decoration: none; transition: color var(--kp-duration) var(--kp-ease); } a:visited { color: var(--kp-text); } /* pre-existing gap, fixed in v13: with no explicit :visited rule, browsers fall back to their own default (often purple/blue) once a link has been clicked -- jarring against this site's own palette, and especially against a dark background. Keeping visited links the same color as unvisited ones is a deliberate, common choice for nav/utility links; article body links still get the same var(--kp-gold-text) hover treatment either way. */ a:hover { color: #0d1b2a; text-decoration: underline; } /* Complete heading scale (Phase 1.3 adds h4/h5/h6, which previously had no font-size rule at all and silently fell back to the browser's UA default — inconsistent with every other heading level having a deliberate size). */ h1, h2, h3, h4, h5, h6 { color: var(--nl-navy); line-height: var(--kp-lh-tight); font-weight: 700; } h1 { font-size: var(--kp-fs-2xl); margin: 0 0 var(--kp-space-2); letter-spacing: -0.01em; } h2 { font-size: var(--kp-fs-lg); margin: var(--kp-space-8) 0 var(--kp-space-4); border-bottom: 2px solid var(--kp-gold); padding-bottom: var(--kp-space-2); } h3 { font-size: var(--kp-fs-md); margin: var(--kp-space-6) 0 var(--kp-space-2); } h4 { font-size: var(--kp-fs-base); margin: var(--kp-space-5) 0 var(--kp-space-2); } h5 { font-size: var(--kp-fs-sm); margin: var(--kp-space-4) 0 var(--kp-space-1); text-transform: uppercase; letter-spacing: .03em; color: var(--kp-muted); } h6 { font-size: var(--kp-fs-xs); margin: var(--kp-space-3) 0 var(--kp-space-1); text-transform: uppercase; letter-spacing: .04em; color: var(--kp-muted); } p { margin: 0 0 var(--kp-space-4); } /* Display heading (Phase 1.3) — for the one true hero/display headline (the homepage H1), which previously sized itself only via the .kp-home-hero container context. Opt-in via class so every other H1 site-wide (article titles, hub titles) keeps its current, correct --kp-fs-2xl size. */ .kp-display { font-size: var(--kp-fs-4xl); line-height: var(--kp-lh-tight); } /* ---------------------------------------------------------------------- */ /* 3. Accessibility primitives */ /* ---------------------------------------------------------------------- */ /* Visible, high-contrast focus ring for EVERY interactive element reached by keyboard — WCAG 2.4.7. Uses :focus-visible so mouse clicks don't show a ring (matches modern browser UX conventions) while Tab navigation always does. Applied to the whole page, not just new components, so links inside article body text also get a proper ring where none existed before. Phase 1.3 accessibility fix: this used var(--kp-gold) directly, which is only 2.38:1 against a white/light background — below WCAG 1.4.11's 3:1 minimum for a focus indicator, so on every light-background page (i.e. most of the site) the ring was genuinely hard to see for low-vision keyboard users. var(--kp-gold-text) is 5.16:1 on white and — since it now has its own brighter dark-mode override two sections above — 7.03:1 in dark mode too, so one token now works correctly in both themes. The header/utility-bar-specific focus rings elsewhere in this file stay on --kp-gold deliberately: they only ever sit against the dark navy header background, where plain gold already clears 7.3:1. */ a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--kp-gold-text); outline-offset: 2px; border-radius: var(--kp-radius-sm); } /* Fallback for browsers without :focus-visible support: still show a ring rather than nothing, just not as finely targeted. */ a:focus, button:focus { outline: 3px solid var(--kp-gold-text); outline-offset: 2px; } /* Skip-to-content link: invisible until keyboard-focused, then jumps to the very top of the viewport above everything else. */ .kp-skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--kp-dark); color: #fff; padding: var(--kp-space-3) var(--kp-space-5); font-weight: 700; border-radius: 0 0 var(--kp-radius-md) 0; } .kp-skip-link:focus { left: 0; } /* Respect users who've asked their OS to reduce motion — every transition/ animation in this file collapses to near-instant for them. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } .kp-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------------- */ /* 3b. Icon system (Phase 1.3) — ONE consistent icon language site-wide. */ /* Before this pass, icons were a mix of full-color emoji (search 🔍, */ /* profile 👤, 14 different colorful pictographs in the mega menu) and */ /* plain dingbat glyphs (▾ ☆ ↗) — inconsistent weight, inconsistent color, */ /* and impossible to keep visually coherent as more get added. Fixed two */ /* ways: (1) the mega menu's 14 decorative category icons were removed */ /* entirely — bold label + one-line description carries the same */ /* information without needing a picture, matching how Bloomberg Law, */ /* Reuters, and GOV.UK's own mega menus actually look (text-forward, not */ /* icon-forward); (2) every remaining FUNCTIONAL icon (search, bookmark, */ /* profile, external-link, dropdown chevron) is now the same small inline */ /* SVG style: stroke-only, currentColor, 1.8–2px stroke weight — so it */ /* always matches surrounding text color (including in dark mode and on */ /* hover) with no separate color to maintain. */ .kp-icon { display: inline-block; vertical-align: -0.125em; flex-shrink: 0; } /* ---------------------------------------------------------------------- */ /* 4. Layout — header / nav (PHASE 1.1 enterprise header redesign) */ /* Scope discipline: everything in this section styles ONLY the header */ /* block described in KnowledgeMasterPage.master + header.js. Nothing */ /* here touches breadcrumb / main / footer selectors. */ /* ---------------------------------------------------------------------- */ /* -- Dark-mode-ready architecture -------------------------------------- No visible toggle is wired up yet (out of this pass's scope), but every header/nav/footer color below already reads from these tokens, not a literal value -- so a future toggle only needs to redefine this block under [data-theme="dark"] (or a prefers-color-scheme query) and the entire header repaints correctly with zero markup changes. */ :root { --kp-header-bg: var(--kp-dark); --kp-header-bg-alt: #142a40; --kp-header-text: #e7ebee; --kp-header-text-muted: #a9b6c2; --kp-header-border: rgba(255,255,255,.12); } .kp-utility-bar { background: var(--kp-header-bg-alt); color: var(--kp-header-text-muted); font-size: var(--kp-fs-xs); border-bottom: 1px solid var(--kp-header-border); } .kp-utility-bar-inner { max-width: var(--kp-container-max); margin: 0 auto; padding: var(--kp-space-2) var(--kp-space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--kp-space-4); flex-wrap: wrap; } .kp-utility-left, .kp-utility-right { display: flex; align-items: center; gap: var(--kp-space-4); flex-wrap: wrap; } .kp-utility-bar a { color: var(--kp-header-text-muted); font-weight: 500; } .kp-utility-bar a:hover { color: var(--kp-gold); text-decoration: none; } .kp-utility-bar a:focus-visible { outline: 2px solid var(--kp-gold); outline-offset: 2px; border-radius: 2px; } .kp-utility-disabled { color: rgba(169,182,194,.55); cursor: default; } .kp-utility-disabled em { font-style: normal; margin-left: var(--kp-space-1); font-size: .9em; } .kp-utility-disabled-inline { display: none; } /* declutter the bar on real screens; still present for future wiring */ .kp-utility-active { display: block; color: var(--kp-gold); font-weight: 700; padding: var(--kp-space-1) 0; } .kp-theme-toggle { display: inline-flex; align-items: center; gap: var(--kp-space-1); border: none; background: none; color: var(--kp-header-text-muted); font-weight: 500; font-size: var(--kp-fs-xs); font-family: inherit; cursor: pointer; padding: var(--kp-space-1) 0; } .kp-theme-toggle:hover { color: var(--kp-gold); } .kp-theme-toggle:focus-visible { outline: 2px solid var(--kp-gold); outline-offset: 2px; border-radius: 2px; } .kp-theme-toggle-icon { font-size: 1em; } .kp-utility-dropdown { position: relative; } .kp-utility-dropdown summary { color: var(--kp-header-text-muted); font-weight: 500; cursor: pointer; list-style: none; } .kp-utility-dropdown summary::-webkit-details-marker { display: none; } .kp-utility-dropdown summary:hover { color: var(--kp-gold); } .kp-utility-dropdown[open] summary { color: var(--kp-gold); } .kp-utility-dropdown-panel { position: absolute; top: 100%; margin-top: var(--kp-space-2); right: 0; background: var(--kp-surface); color: var(--kp-text); border-radius: var(--kp-radius-md); box-shadow: var(--kp-shadow-md); padding: var(--kp-space-3); min-width: 200px; display: flex; flex-direction: column; z-index: 210; } .kp-utility-left .kp-utility-dropdown-panel { left: 0; right: auto; } .kp-utility-dropdown-panel-narrow { min-width: 160px; } .kp-utility-dropdown-panel a { display: block; padding: var(--kp-space-1) var(--kp-space-2); border-radius: var(--kp-radius-sm); color: var(--kp-text); font-weight: 500; } .kp-utility-dropdown-panel a:hover { background: var(--kp-bg-alt); color: var(--kp-gold-text); } .kp-utility-dropdown-panel .kp-utility-disabled { padding: var(--kp-space-1) var(--kp-space-2); font-size: var(--kp-fs-xs); } .kp-utility-note { margin: 0 0 var(--kp-space-2); padding: 0 var(--kp-space-2); font-size: var(--kp-fs-xs); color: var(--kp-muted); max-width: 220px; } /* Note: this text sits on .kp-utility-dropdown-panel's var(--kp-surface) background (white in light mode, dark surface in dark mode) -- var(--kp-muted) is themeable and WCAG-AA-safe on both, unlike var(--kp-header-text-muted) which is tuned only for the always-dark header/utility-bar background and would be low-contrast here. */ /* -- Main header -- */ .kp-header { background: var(--kp-header-bg); position: sticky; top: 0; z-index: 100; box-shadow: var(--kp-shadow-sm); transition: padding var(--kp-duration) var(--kp-ease), box-shadow var(--kp-duration) var(--kp-ease); } .kp-header-inner { max-width: var(--kp-container-max); margin: 0 auto; padding: var(--kp-space-4) var(--kp-space-6); display: flex; align-items: center; gap: var(--kp-space-6); transition: padding var(--kp-duration) var(--kp-ease); } /* Sticky "shrink elegantly on scroll" state -- toggled by header.js, pure CSS otherwise degrades gracefully to the normal header height if JS never runs. */ .kp-header--compact .kp-header-inner { padding-top: var(--kp-space-2); padding-bottom: var(--kp-space-2); } .kp-header--compact .kp-logo-mark { width: 28px; height: 28px; font-size: var(--kp-fs-sm); } .kp-logo { display: flex; align-items: center; gap: var(--kp-space-2); color: #fff; } .kp-logo:hover { color: #fff; text-decoration: none; opacity: 0.92; } .kp-logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--kp-gold); color: var(--kp-dark); font-weight: 800; border-radius: var(--kp-radius-md); font-size: var(--kp-fs-md); flex-shrink: 0; transition: width var(--kp-duration) var(--kp-ease), height var(--kp-duration) var(--kp-ease); } .kp-logo-text { font-weight: 800; font-size: var(--kp-fs-lg); letter-spacing: -0.01em; white-space: nowrap; } .kp-logo-tld { color: var(--kp-gold); } .kp-nav { display: flex; align-items: center; gap: var(--kp-space-5); flex-wrap: wrap; margin: 0 auto; } .kp-nav > a { color: var(--kp-header-text); font-weight: 600; font-size: var(--kp-fs-sm); padding: var(--kp-space-2) 0; } .kp-nav > a:hover { color: var(--kp-gold); text-decoration: none; } .kp-nav a:focus-visible, .kp-header button:focus-visible, .kp-header summary:focus-visible { outline: 2px solid var(--kp-gold); outline-offset: 2px; border-radius: 2px; } /* Dropdowns (Practice Areas / Countries mega-menus) --
/, same zero-JS pattern already used for this site's FAQ accordions: fully keyboard- and touch-operable with no JavaScript. header.js only adds Escape-to-close, click-outside-to-close, and "only one open at a time" -- pure enhancement. */ .kp-nav-dropdown { position: relative; } .kp-nav-dropdown summary { color: var(--kp-header-text); font-weight: 600; font-size: var(--kp-fs-sm); cursor: pointer; list-style: none; padding: var(--kp-space-2) 0; display: flex; align-items: center; gap: 4px; } .kp-nav-dropdown summary::-webkit-details-marker { display: none; } .kp-nav-dropdown summary:hover { color: var(--kp-gold); } .kp-nav-dropdown[open] summary { color: var(--kp-gold); } .kp-caret { font-size: .7em; transition: transform var(--kp-duration) var(--kp-ease); } .kp-nav-dropdown[open] .kp-caret { transform: rotate(180deg); } .kp-nav-dropdown-panel { position: absolute; top: 100%; left: 0; margin-top: var(--kp-space-3); background: var(--kp-surface); color: var(--kp-text); border-radius: var(--kp-radius-lg); box-shadow: var(--kp-shadow-md); padding: var(--kp-space-5); display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: var(--kp-space-5); min-width: 640px; z-index: 200; animation: kp-menu-in .16s var(--kp-ease); } @keyframes kp-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .kp-nav-dropdown-panel-simple { grid-template-columns: repeat(2, minmax(120px, 1fr)); min-width: 320px; } .kp-nav-dropdown-group h5 { margin: 0 0 var(--kp-space-2); font-size: var(--kp-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--kp-muted); } .kp-nav-dropdown-group a, .kp-nav-dropdown-panel-simple a { display: block; color: var(--kp-text); font-weight: 500; font-size: var(--kp-fs-sm); padding: var(--kp-space-1) 0; } .kp-nav-dropdown-group a:hover, .kp-nav-dropdown-panel-simple a:hover { color: var(--kp-gold-text); } .kp-nav-dropdown-panel-simple .kp-utility-disabled { padding: var(--kp-space-1) 0; font-size: var(--kp-fs-sm); } /* -- Mega menu: richer layout with descriptions, featured + quick-links -- (Phase 1.3: the per-category emoji icons were removed from markup — see the "Icon system" note above — so .kp-mm-icon no longer has any matching element; the rule is deleted rather than left as dead CSS.) -- */ .kp-mega-menu { min-width: 900px; grid-template-columns: 1fr; padding: 0; overflow: hidden; } .kp-mega-menu-groups { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: var(--kp-space-5); padding: var(--kp-space-5); } .kp-mega-menu-groups a { display: block; padding: var(--kp-space-2) 0; } .kp-mega-menu-groups a strong { display: block; font-weight: 600; font-size: var(--kp-fs-sm); color: var(--kp-text); } .kp-mega-menu-groups a:hover strong { color: var(--kp-gold-text); } .kp-mega-menu-groups a small { display: block; color: var(--kp-muted); font-size: var(--kp-fs-xs); font-weight: 400; margin-top: 2px; } .kp-mega-menu-side { background: var(--kp-bg-alt); padding: var(--kp-space-5); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kp-space-5); border-top: 1px solid var(--kp-border); } .kp-mega-menu-side h5 { margin: 0 0 var(--kp-space-2); font-size: var(--kp-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--kp-muted); } .kp-mega-menu-side a { display: block; padding: var(--kp-space-1) 0; font-size: var(--kp-fs-sm); font-weight: 500; } .kp-mega-menu-side a:hover { color: var(--kp-gold-text); } /* -- Header actions: search / CTA / mobile button -- */ .kp-header-actions { display: flex; align-items: center; gap: var(--kp-space-3); margin-left: auto; } .kp-search-widget { position: relative; } .kp-search-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; list-style: none; transition: background var(--kp-duration) var(--kp-ease); } .kp-search-toggle::-webkit-details-marker { display: none; } .kp-search-toggle:hover { background: rgba(255,255,255,.16); } .kp-search-panel { position: absolute; top: 100%; right: 0; margin-top: var(--kp-space-3); width: 360px; background: var(--kp-surface); color: var(--kp-text); border-radius: var(--kp-radius-lg); box-shadow: var(--kp-shadow-md); padding: var(--kp-space-4); z-index: 220; animation: kp-menu-in .16s var(--kp-ease); } .kp-search-form { display: flex; gap: var(--kp-space-2); } .kp-search-input { background: var(--kp-bg-alt); border: 1px solid var(--kp-border); color: var(--kp-text); border-radius: var(--kp-radius-sm); padding: var(--kp-space-2) var(--kp-space-3); font-size: var(--kp-fs-sm); flex: 1; min-width: 0; } .kp-search-input::placeholder { color: var(--kp-muted); } .kp-search-input:focus-visible { outline: 2px solid var(--kp-gold-text); outline-offset: 1px; } /* Phase 1.3 a11y fix — this sits on white/light panels, see Section 3 note */ .kp-search-btn { background: var(--kp-gold); color: var(--kp-dark); border: none; border-radius: var(--kp-radius-sm); padding: var(--kp-space-2) var(--kp-space-4); font-weight: 700; font-size: var(--kp-fs-sm); cursor: pointer; } .kp-search-btn:hover { opacity: .9; } .kp-search-suggestions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kp-space-4); margin-top: var(--kp-space-4); } .kp-search-suggestion-group h6 { margin: 0 0 var(--kp-space-2); font-size: var(--kp-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--kp-muted); } .kp-search-suggestion-group a { display: block; padding: var(--kp-space-1) 0; font-size: var(--kp-fs-sm); } .kp-search-suggestion-group a:hover { color: var(--kp-gold-text); } /* Intentionally its own rule rather than sharing .kp-btn-primary's exact classes (header CTAs need their own tighter padding to fit the header row) — but deliberately built from the SAME tokens (--kp-gold/--kp-dark) as .kp-btn-primary below, so the two stay visually identical in color and only differ in size, which is exactly what the design system intends. */ .kp-header-cta { background: var(--kp-gold); color: var(--kp-dark); font-weight: 700; font-size: var(--kp-fs-sm); padding: var(--kp-space-2) var(--kp-space-4); border-radius: var(--kp-radius-md); white-space: nowrap; transition: transform var(--kp-duration) var(--kp-ease), box-shadow var(--kp-duration) var(--kp-ease); display: inline-flex; align-items: center; gap: var(--kp-space-1); } .kp-header-cta:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--kp-shadow-sm); } .kp-header-cta-consult .kp-external-icon { font-size: .9em; } /* -- Bookmark / Profile "ready architecture" icons (Phase 1.2): honestly disabled -- same visual language as the working header icons, but a fixed muted state and a not-allowed cursor so it never reads as a broken button. */ .kp-header-icon-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.06); color: rgba(255,255,255,.45); border: none; cursor: not-allowed; } .kp-header-icon-btn:hover { background: rgba(255,255,255,.06); } .kp-mobile-menu-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; border-radius: var(--kp-radius-sm); } .kp-mobile-menu-btn:hover { background: rgba(255,255,255,.08); } .kp-mobile-menu-bars { display: block; width: 22px; height: 16px; position: relative; } .kp-mobile-menu-bars span { position: absolute; left: 0; right: 0; height: 2px; background: #fff; border-radius: 1px; transition: transform var(--kp-duration) var(--kp-ease), opacity var(--kp-duration) var(--kp-ease); } .kp-mobile-menu-bars span:nth-child(1) { top: 0; } .kp-mobile-menu-bars span:nth-child(2) { top: 7px; } .kp-mobile-menu-bars span:nth-child(3) { top: 14px; } /* Drawer-open state (header.js toggles .kp-drawer-open on ) morphs the icon into an X */ body.kp-drawer-open .kp-mobile-menu-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.kp-drawer-open .kp-mobile-menu-bars span:nth-child(2) { opacity: 0; } body.kp-drawer-open .kp-mobile-menu-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* -- Mobile full-screen drawer -- hidden by default; header.js adds .is-open. Pure CSS fallback (no JS): the drawer simply never opens, and its links stay reachable via the footer, which is present on every page regardless of JavaScript. Phase 1.4b finding: resting off-canvas via `right: 0; transform: translateX(100%)` genuinely extends this element's box past the viewport's right edge, and real-browser measurement (getBoundingClientRect + document.documentElement.scrollWidth) showed that this Chromium engine counts that as real horizontal page overflow at some widths (reproduced at ordinary tablet/small-laptop sizes, 700-820px) even though the drawer is meant to be invisible until opened -- a real visitor could hit a spurious horizontal scrollbar on a normal page load. This turned out to be true of a fixed-position element parked outside the viewport via ANY technique (transform, `right` offset, or `visibility: hidden` combined with either) -- all three were tested and all three still contributed to scrollWidth. The actual fix belongs at the root (see `html, body { overflow-x: clip }` in Section 2 above), so the drawer itself is unchanged here from its original transform-based animation. */ .kp-mobile-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 380px); background: var(--kp-surface); z-index: 400; transform: translateX(100%); transition: transform var(--kp-duration-slow) var(--kp-ease); overflow-y: auto; box-shadow: -8px 0 24px rgba(0,0,0,.18); } .kp-mobile-drawer.is-open { transform: translateX(0); } .kp-mobile-drawer-inner { padding: var(--kp-space-5); display: flex; flex-direction: column; gap: var(--kp-space-5); } .kp-mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; } .kp-mobile-drawer-header .kp-logo { color: var(--kp-text); } .kp-mobile-drawer-header .kp-logo-tld { color: var(--kp-gold-text); } .kp-mobile-drawer-close { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--kp-bg-alt); font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--kp-text); } .kp-mobile-search-form .kp-search-input { background: var(--kp-bg-alt); } .kp-mobile-accordion { display: flex; flex-direction: column; } .kp-mobile-accordion > a, .kp-mobile-accordion > details > summary { padding: var(--kp-space-4) 0; border-bottom: 1px solid var(--kp-border); font-weight: 600; color: var(--kp-text); font-size: var(--kp-fs-md); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; } .kp-mobile-accordion > a:hover { color: var(--kp-gold-text); text-decoration: none; } .kp-mobile-accordion > details > summary::-webkit-details-marker { display: none; } .kp-mobile-accordion > details > summary::after { content: "+"; font-size: 1.3em; color: var(--kp-muted); } .kp-mobile-accordion > details[open] > summary::after { content: "\2212"; } .kp-mobile-accordion-panel { display: flex; flex-direction: column; padding-bottom: var(--kp-space-2); } .kp-mobile-accordion-panel a, .kp-mobile-accordion-panel .kp-utility-disabled { padding: var(--kp-space-3) var(--kp-space-2); font-size: var(--kp-fs-sm); min-height: 44px; display: flex; align-items: center; border-radius: var(--kp-radius-sm); } .kp-mobile-accordion-panel a:hover { background: var(--kp-bg-alt); color: var(--kp-gold-text); } .kp-mobile-cta { text-align: center; } .kp-mobile-drawer-backdrop { position: fixed; inset: 0; background: rgba(13,27,42,.55); z-index: 390; opacity: 0; visibility: hidden; transition: opacity var(--kp-duration) var(--kp-ease); backdrop-filter: blur(1px); } .kp-mobile-drawer-backdrop.is-open { opacity: 1; visibility: visible; } /* JS-free safety net: if header.js hasn't run yet, the backdrop must not block clicks. */ .kp-mobile-drawer-backdrop:not(.is-open) { pointer-events: none; } /* ---- Breadcrumb ---- */ .kp-breadcrumb-bar { background: var(--kp-bg-alt); padding: var(--kp-space-3) var(--kp-space-6); font-size: var(--kp-fs-xs); color: var(--kp-muted); border-bottom: 1px solid var(--kp-border); } .kp-breadcrumb-bar a { color: var(--kp-muted); } .kp-breadcrumb-bar a:hover { color: var(--kp-gold-text); } .kp-breadcrumb-bar span { color: var(--kp-text); font-weight: 600; } /* ---- Layout ---- */ .kp-main { max-width: var(--kp-content-max); margin: 0 auto; padding: var(--kp-space-8) var(--kp-space-6); } .kp-related-cluster { max-width: var(--kp-content-max); margin: 0 auto var(--kp-space-8); padding: 0 var(--kp-space-6); } /* ---------------------------------------------------------------------- */ /* 6. Components */ /* ---------------------------------------------------------------------- */ /* ---- Buttons (Phase 1.3 full system) ---------------------------------- The v10 pass introduced .kp-btn/.kp-btn-primary/.kp-btn-secondary, but they were never actually applied to any real markup on the site (verified — zero usages), so redefining their exact look here is a zero-regression change. Six variants × three sizes × hover/focus/disabled/loading states, all token-driven so dark mode covers every one automatically: .kp-btn-primary — gold fill (the brand's one CTA color; matches the header's "Book a Consultation" button) .kp-btn-secondary — solid dark navy fill (strong but not THE cta color; matches the existing "Visit Practice Website" button) .kp-btn-outline — bordered, transparent fill .kp-btn-ghost — no border, subtle background on hover only .kp-btn-text — looks like a styled link, no padding/border .kp-btn-icon — icon-only, square, pairs with any variant above Focus-visible rings come for free from the global a/button rule in Section 3 — no separate rule needed here. ---- */ .kp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--kp-space-2); font-family: inherit; font-weight: 700; font-size: var(--kp-fs-sm); line-height: var(--kp-lh-normal); padding: var(--kp-space-3) var(--kp-space-5); border-radius: var(--kp-radius-md); border: 1px solid transparent; cursor: pointer; transition: background var(--kp-duration) var(--kp-ease), color var(--kp-duration) var(--kp-ease), border-color var(--kp-duration) var(--kp-ease), box-shadow var(--kp-duration) var(--kp-ease), transform var(--kp-duration) var(--kp-ease), opacity var(--kp-duration) var(--kp-ease); text-decoration: none; white-space: nowrap; } .kp-btn:hover { text-decoration: none; } /* Variants */ .kp-btn-primary { background: var(--kp-primary); color: var(--kp-dark); } .kp-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--kp-shadow-sm); } .kp-btn-secondary { background: var(--kp-secondary); color: #fff; } .kp-btn-secondary:hover { background: var(--kp-gold); color: var(--kp-dark); transform: translateY(-1px); } .kp-btn-outline { background: transparent; color: var(--kp-text); border-color: var(--kp-border-strong); } .kp-btn-outline:hover { border-color: var(--kp-gold); background: var(--kp-bg-alt); } .kp-btn-ghost { background: transparent; color: var(--kp-text); } .kp-btn-ghost:hover { background: var(--kp-bg-alt); } .kp-btn-text { background: transparent; color: var(--kp-accent); padding: 0; border-radius: 0; font-weight: 600; } .kp-btn-text:hover { text-decoration: underline; background: transparent; } /* Sizes — default .kp-btn (no size class) is "medium" */ .kp-btn-sm { padding: var(--kp-space-1) var(--kp-space-3); font-size: var(--kp-fs-xs); border-radius: var(--kp-radius-sm); } .kp-btn-lg { padding: var(--kp-space-4) var(--kp-space-6); font-size: var(--kp-fs-md); } /* Icon-only — square, no visible text (pair with a visually-hidden label for screen readers, same pattern as this site's existing header icon buttons) */ .kp-btn-icon { padding: var(--kp-space-2); width: 38px; height: 38px; gap: 0; } .kp-btn-icon.kp-btn-sm { width: 30px; height: 30px; padding: var(--kp-space-1); } .kp-btn-icon.kp-btn-lg { width: 46px; height: 46px; padding: var(--kp-space-3); } /* States */ .kp-btn:disabled, .kp-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; } /* Loading — hides the label text (kept in the DOM for screen readers via aria-busy, not removed) and shows a small spinning ring instead. No extra markup needed beyond adding the class + aria-busy="true" on the button. */ .kp-btn.is-loading { color: transparent; pointer-events: none; position: relative; } .kp-btn.is-loading::after { content: ""; position: absolute; width: 1em; height: 1em; border-radius: 50%; border: 2px solid var(--kp-text); border-right-color: transparent; opacity: .85; animation: kp-btn-spin .6s linear infinite; } /* Spinner color needs to contrast with each variant's own fill, not the (now-transparent) button text color the ::after would otherwise inherit. */ .kp-btn-primary.is-loading::after { border-color: var(--kp-dark); border-right-color: transparent; } .kp-btn-secondary.is-loading::after { border-color: #fff; border-right-color: transparent; } @keyframes kp-btn-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .kp-btn.is-loading::after { animation-duration: 1.2s; } } /* ---- Badges / chips ---- */ .kp-badge { display: inline-block; font-size: var(--kp-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: var(--kp-space-1) var(--kp-space-3); border-radius: var(--kp-radius-full); background: var(--kp-bg-alt-2); color: var(--kp-muted); } .kp-badge-gold { background: #fbf1d9; color: var(--kp-gold-text); } .kp-badge-success { background: var(--kp-success-bg); color: var(--kp-success); } .kp-badge-warning { background: var(--kp-warning-bg); color: var(--kp-warning); } .kp-badge-error { background: var(--kp-error-bg); color: var(--kp-error); } .kp-badge-info { background: var(--kp-info-bg); color: var(--kp-info); } /* ---- Tags (Phase 1.3) — distinct from Badges: a Badge is a small status/ count indicator (uppercase, pill-shaped, usually alone); a Tag is a bordered, sentence-case label for browsable metadata like a topic or country ("Property Law", "UAE") — meant to be clicked/filtered, and to appear several in a row without every word being shouted in caps. ---- */ .kp-tag { display: inline-flex; align-items: center; gap: var(--kp-space-1); font-size: var(--kp-fs-xs); font-weight: 600; padding: var(--kp-space-1) var(--kp-space-2); border: 1px solid var(--kp-border-strong); border-radius: var(--kp-radius-sm); color: var(--kp-muted); background: var(--kp-bg); transition: border-color var(--kp-duration) var(--kp-ease), color var(--kp-duration) var(--kp-ease); } a.kp-tag:hover { border-color: var(--kp-gold); color: var(--kp-gold-text); text-decoration: none; } .kp-tag-group { display: flex; flex-wrap: wrap; gap: var(--kp-space-2); margin: var(--kp-space-3) 0; } /* ---- Alerts / callouts ---- */ .kp-alert { display: flex; gap: var(--kp-space-3); padding: var(--kp-space-4) var(--kp-space-5); border-radius: var(--kp-radius-md); border: 1px solid transparent; font-size: var(--kp-fs-sm); margin: var(--kp-space-4) 0; } .kp-alert p:last-child { margin-bottom: 0; } .kp-alert-info { background: var(--kp-info-bg); color: var(--kp-info); border-color: color-mix(in srgb, var(--kp-info) 25%, transparent); } .kp-alert-success { background: var(--kp-success-bg); color: var(--kp-success); border-color: color-mix(in srgb, var(--kp-success) 25%, transparent); } .kp-alert-warning { background: var(--kp-warning-bg); color: var(--kp-warning); border-color: color-mix(in srgb, var(--kp-warning) 25%, transparent); } .kp-alert-danger { background: var(--kp-danger-bg); color: var(--kp-danger); border-color: color-mix(in srgb, var(--kp-danger) 25%, transparent); } .kp-alert-error { background: var(--kp-error-bg); color: var(--kp-error); border-color: color-mix(in srgb, var(--kp-error) 25%, transparent); } /* alias of -danger, brief's own term */ /* ---- Forms (Phase 1.3) — generalized from the existing .kp-search-input, which was this site's only styled input before now. The site's real forms are all intentionally mailto-based (see Contact/Newsletter — no fake backend), so these rules exist as the reusable design-system primitive ready for whenever a genuine form is built, not retrofitted onto anything that doesn't exist yet. ---- */ .kp-form-group { margin-bottom: var(--kp-space-5); } .kp-label { display: block; font-weight: 700; font-size: var(--kp-fs-sm); color: var(--kp-text); margin-bottom: var(--kp-space-2); } .kp-label-required::after { content: " *"; color: var(--kp-error); } .kp-input, .kp-select, .kp-textarea { display: block; width: 100%; font-family: inherit; font-size: var(--kp-fs-sm); color: var(--kp-text); background: var(--kp-bg-alt); border: 1px solid var(--kp-border); border-radius: var(--kp-radius-sm); padding: var(--kp-space-3) var(--kp-space-3); transition: border-color var(--kp-duration) var(--kp-ease), box-shadow var(--kp-duration) var(--kp-ease); } .kp-textarea { min-height: 8rem; resize: vertical; } /* Phase 1.4 (task #103): custom chevron so the dropdown matches the rest of the design system instead of showing each OS/browser's own default arrow glyph. `appearance: none` is safe here specifically because a replacement affordance (the chevron) is supplied in the same rule -- an `appearance:none` with no visual replacement would be an accessibility regression (no visible sign the control is a dropdown at all). */ .kp-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: var(--kp-space-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235b6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--kp-space-3) center; background-size: 18px; } .kp-select:disabled { background-image: none; } .kp-input::placeholder, .kp-textarea::placeholder { color: var(--kp-muted); } .kp-input:focus, .kp-select:focus, .kp-textarea:focus { outline: none; border-color: var(--kp-gold-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kp-gold) 25%, transparent); } /* border-color uses -text variant for 1.4.11 contrast; the box-shadow glow stays plain gold since it is a supplementary, not sole, indicator */ .kp-input:disabled, .kp-select:disabled, .kp-textarea:disabled { background: var(--kp-bg-alt-2); color: var(--kp-muted); cursor: not-allowed; } .kp-input.is-error, .kp-select.is-error, .kp-textarea.is-error { border-color: var(--kp-error); } /* Phase 1.4 (task #103): the success counterpart to .is-error, called out by name in the brief as missing. Kept to the same "border color is a secondary signal, not the only one" rule as focus and error above -- a real form should always pair this with .kp-form-success text (an icon or checkmark, not color alone), same as .is-error is always meant to be paired with a .kp-form-error message. */ .kp-input.is-success, .kp-select.is-success, .kp-textarea.is-success { border-color: var(--kp-success); } .kp-form-help { display: block; font-size: var(--kp-fs-xs); color: var(--kp-muted); margin-top: var(--kp-space-1); } .kp-form-error { display: block; font-size: var(--kp-fs-xs); color: var(--kp-error); margin-top: var(--kp-space-1); font-weight: 600; } .kp-form-success { display: block; font-size: var(--kp-fs-xs); color: var(--kp-success); margin-top: var(--kp-space-1); font-weight: 600; } /* Phase 1.4 (task #107) accessibility note for whoever builds the first real form on these primitives: the CSS above only carries the VISUAL half of error/success states. A real implementation also needs, on the input/select/textarea itself, `aria-invalid="true"` whenever `.is-error` is applied (removed once corrected) and `aria-describedby=""` so a screen-reader user gets the message read out when they land on the field, not just a sighted user seeing red/green text next to it. Documented here rather than guessed at in markup, since no real form exists yet to wire it into (see the Section 6 note above this block) -- this is exactly the same "document the requirement, don't fabricate the implementation" choice already made for the Quote Block component. */ /* Checkbox / radio — deliberately kept close to native controls (accent-color is broadly supported and needs zero custom markup/JS to theme correctly, unlike a fully custom checkbox which usually breaks keyboard/AT behavior if not done carefully) — just sized and spaced to match the rest of the system, and using this project's own gold rather than the browser default. */ .kp-checkbox-row, .kp-radio-row { display: flex; align-items: flex-start; gap: var(--kp-space-2); margin-bottom: var(--kp-space-2); font-size: var(--kp-fs-sm); } .kp-checkbox-row input, .kp-radio-row input { accent-color: var(--kp-gold); width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; } /* ---- Cards (generic primitive underlying topic cards / practice-area tiles) ---- */ .kp-card { background: var(--kp-bg); border: 1px solid var(--kp-border); border-radius: var(--kp-radius-lg); padding: var(--kp-space-5); transition: border-color var(--kp-duration) var(--kp-ease), box-shadow var(--kp-duration) var(--kp-ease), transform var(--kp-duration) var(--kp-ease); } .kp-card-interactive:hover { border-color: var(--kp-border-strong); box-shadow: var(--kp-shadow-md); transform: translateY(-2px); } /* ---- Empty / loading / error states (design-system primitives for future dynamic sections — search results, "no articles yet", etc.) ---- */ .kp-empty-state { text-align: center; padding: var(--kp-space-10) var(--kp-space-6); color: var(--kp-muted); border: 1px dashed var(--kp-border-strong); border-radius: var(--kp-radius-lg); } .kp-empty-state h3 { color: var(--kp-text); } .kp-skeleton { background: linear-gradient(90deg, var(--kp-bg-alt) 25%, var(--kp-bg-alt-2) 37%, var(--kp-bg-alt) 63%); background-size: 400% 100%; animation: kp-skeleton-shimmer 1.4s ease infinite; border-radius: var(--kp-radius-sm); display: block; } @keyframes kp-skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .kp-error-state { padding: var(--kp-space-5); border-radius: var(--kp-radius-md); background: var(--kp-danger-bg); color: var(--kp-danger); border: 1px solid color-mix(in srgb, var(--kp-danger) 25%, transparent); } /* Success state (Phase 1.3) — the one state missing from the Empty/Loading/ Error set above, e.g. for a future "search submitted" or form-confirmation moment. Same shape as .kp-error-state, success-toned. */ .kp-success-state { padding: var(--kp-space-5); border-radius: var(--kp-radius-md); background: var(--kp-success-bg); color: var(--kp-success); border: 1px solid color-mix(in srgb, var(--kp-success) 25%, transparent); } /* ---- Tabs (Phase 1.3) — pure CSS, no JavaScript required, using the standard radio-input + label technique: a group of visually-hidden radio inputs, one label per tab (which IS the clickable tab, styled to look like one), and each panel shown via a `:checked ~ .kp-tabs-panel` sibling selector. Fully keyboard-operable (native radio semantics — arrow keys move between tabs, Tab key moves in/out of the group) with zero script, consistent with this site's existing details/summary-based dropdowns. Expected markup:
...
...
(panel show/hide needs one nth-of-type rule per tab count — provided below for up to 4 tabs, the most any single page is likely to need). ---- */ .kp-tabs-input { position: absolute; opacity: 0; pointer-events: none; } .kp-tabs-list { display: flex; gap: var(--kp-space-2); border-bottom: 2px solid var(--kp-border); margin-bottom: var(--kp-space-5); flex-wrap: wrap; } .kp-tabs-label { display: inline-block; padding: var(--kp-space-3) var(--kp-space-4); font-weight: 600; font-size: var(--kp-fs-sm); color: var(--kp-muted); cursor: pointer; margin-bottom: -2px; border-bottom: 2px solid transparent; transition: color var(--kp-duration) var(--kp-ease), border-color var(--kp-duration) var(--kp-ease); } .kp-tabs-label:hover { color: var(--kp-text); } .kp-tabs-input:focus-visible + .kp-tabs-label { outline: 3px solid var(--kp-gold-text); outline-offset: 2px; border-radius: var(--kp-radius-sm); } .kp-tabs-input:checked + .kp-tabs-label { color: var(--kp-gold-text); border-bottom-color: var(--kp-gold); } .kp-tabs-panel { display: none; animation: kp-menu-in .16s var(--kp-ease); } .kp-tabs-input:nth-of-type(1):checked ~ .kp-tabs-panel:nth-of-type(1), .kp-tabs-input:nth-of-type(2):checked ~ .kp-tabs-panel:nth-of-type(2), .kp-tabs-input:nth-of-type(3):checked ~ .kp-tabs-panel:nth-of-type(3), .kp-tabs-input:nth-of-type(4):checked ~ .kp-tabs-panel:nth-of-type(4) { display: block; } /* ---- Accordion (Phase 1.3) — a general-purpose, styled details/summary component for long-form content (step-by-step guides, long FAQ pages), distinct from the ad hoc details/summary treatments already used for header dropdowns and mobile nav (.kp-nav-dropdown, .kp-mobile-accordion) — those stay exactly as they are; this is the one to reach for inside article/page BODY content. ---- */ .kp-accordion-item { border: 1px solid var(--kp-border); border-radius: var(--kp-radius-md); margin-bottom: var(--kp-space-3); overflow: hidden; } .kp-accordion-item summary { padding: var(--kp-space-4) var(--kp-space-5); font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--kp-space-3); color: var(--kp-text); background: var(--kp-bg-alt); transition: background var(--kp-duration) var(--kp-ease); } .kp-accordion-item summary::-webkit-details-marker { display: none; } .kp-accordion-item summary::after { content: ""; width: 10px; height: 10px; flex-shrink: 0; border-right: 2px solid var(--kp-muted); border-bottom: 2px solid var(--kp-muted); transform: rotate(45deg); transition: transform var(--kp-duration) var(--kp-ease); } .kp-accordion-item[open] summary::after { transform: rotate(-135deg); } .kp-accordion-item summary:hover { background: var(--kp-bg-alt-2); } .kp-accordion-item-body { padding: var(--kp-space-4) var(--kp-space-5); } /* ---- Pagination (Phase 1.3) — ready for the Resource Center / Judgment Library / Updates feed once those grow past one page of results; ships now as a real, styled, accessible component rather than being designed only once a listing needs it. ---- */ .kp-pagination { display: flex; align-items: center; justify-content: center; gap: var(--kp-space-2); margin: var(--kp-space-8) 0; list-style: none; padding: 0; } .kp-pagination li { display: flex; } .kp-pagination a, .kp-pagination span { display: flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 var(--kp-space-2); border-radius: var(--kp-radius-sm); font-weight: 600; font-size: var(--kp-fs-sm); color: var(--kp-text); } .kp-pagination a:hover { background: var(--kp-bg-alt); color: var(--kp-gold-text); text-decoration: none; } .kp-pagination .is-current { background: var(--kp-dark); color: #fff; } .kp-pagination .is-disabled { color: var(--kp-muted); pointer-events: none; opacity: .5; } /* ---- Author Card (Phase 1.3) — for the Authors & Reviewers index (a list of one or more credentialed people), distinct from a generic topic-card: carries a name, role/credential line, an initial-letter avatar (matching this site's own logo-mark convention — a colored monogram, not a stock photo placeholder, so it never looks like a broken image), and a bio excerpt. ---- */ .kp-author-card { display: flex; gap: var(--kp-space-4); padding: var(--kp-space-5); border: 1px solid var(--kp-border); border-radius: var(--kp-radius-lg); transition: border-color var(--kp-duration) var(--kp-ease), box-shadow var(--kp-duration) var(--kp-ease), transform var(--kp-duration) var(--kp-ease); } a.kp-author-card:hover { border-color: var(--kp-gold); box-shadow: var(--kp-shadow-md); transform: translateY(-2px); text-decoration: none; } .kp-author-card-avatar { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex-shrink: 0; background: var(--kp-gold); color: var(--kp-dark); font-weight: 800; font-size: var(--kp-fs-lg); border-radius: var(--kp-radius-md); } .kp-author-card-name { margin: 0 0 2px; font-size: var(--kp-fs-md); color: var(--kp-text); } .kp-author-card-role { display: block; font-size: var(--kp-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--kp-gold-text); margin-bottom: var(--kp-space-1); } .kp-author-card-bio { margin: 0; color: var(--kp-muted); font-size: var(--kp-fs-sm); } /* ---- Quick answer / byline ---- */ .kp-byline { font-size: var(--kp-fs-sm); color: var(--kp-muted); margin-bottom: var(--kp-space-4); } .kp-byline a { font-weight: 600; } .kp-quick-answer { background: var(--kp-bg-alt); border-left: 4px solid var(--kp-gold); padding: var(--kp-space-4) var(--kp-space-5); border-radius: var(--kp-radius-sm); margin: var(--kp-space-4) 0 var(--kp-space-6); font-size: var(--kp-fs-md); } .kp-quick-answer p { margin: 0; } /* ---- TOC ---- */ .kp-toc { background: var(--kp-surface); border: 1px solid var(--kp-border); border-radius: var(--kp-radius-md); padding: var(--kp-space-4) var(--kp-space-5); margin-bottom: var(--kp-space-6); } .kp-toc-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--kp-space-6); } .kp-toc-list li { margin-bottom: var(--kp-space-2); font-size: var(--kp-fs-sm); } /* ---- Body content ---- */ .kp-body h2:first-child { margin-top: 0; } .kp-body ul, .kp-body ol { padding-left: 1.4rem; } .kp-body li { margin-bottom: var(--kp-space-2); } /* Comfortable reading measure (Phase 1.3) — applied to paragraph text only, not the whole .kp-body container, so tables/comparison grids/lists inside the same article can still use the full column width. */ .kp-body p { max-width: var(--kp-prose-max); } /* ---- Structural wrapper hooks (article/hub/topic containers) — these were present in markup site-wide but had never been given their own rules; they inherited bare block-level defaults. Small, safe additive spacing so sections read as intentionally composed rather than just concatenated. ---- */ .kp-article, .kp-country-hub, .kp-topic-hub, .kp-author-page { display: block; } .kp-topic-intro, .kp-comparison, .kp-subtopics, .kp-cluster-article-list { margin: var(--kp-space-6) 0; } /* ---- FAQ (native details/summary — keyboard accessible, no JS needed) ---- */ .kp-faq details { border: 1px solid var(--kp-border); border-radius: var(--kp-radius-md); padding: var(--kp-space-3) var(--kp-space-4); margin-bottom: var(--kp-space-3); transition: border-color var(--kp-duration) var(--kp-ease); } .kp-faq details[open] { border-color: var(--kp-border-strong); } .kp-faq summary { font-weight: 700; cursor: pointer; color: var(--kp-text); } .kp-faq summary:hover { color: var(--kp-gold-text); } .kp-faq p { margin: var(--kp-space-3) 0 0; } /* ---- Sources / authorities ---- */ .kp-sources ul, .kp-authorities ul { list-style: none; padding: 0; } .kp-sources li, .kp-authorities li { padding: var(--kp-space-3) 0; border-bottom: 1px solid var(--kp-border); } /* ---- Table (Phase 1.3: generalized as .kp-table, a reusable design-system name) -- .comparison-table (this project's original, real, in-use class from the Property Law cluster articles) is kept as a full alias, not replaced, so existing generated HTML keeps rendering identically. Any future table should reach for .kp-table; both names now produce the exact same look. ---- */ .comparison-table, .kp-table { width: 100%; border-collapse: collapse; margin: var(--kp-space-4) 0; font-size: var(--kp-fs-sm); border-radius: var(--kp-radius-md); overflow: hidden; box-shadow: var(--kp-shadow-sm); } .comparison-table th, .comparison-table td, .kp-table th, .kp-table td { border: 1px solid var(--kp-border); padding: var(--kp-space-3) var(--kp-space-4); text-align: left; } .comparison-table th, .kp-table th { background: var(--kp-dark); color: #fff; font-weight: 700; } .comparison-table tr:nth-child(even), .kp-table tr:nth-child(even) { background: var(--kp-bg-alt); } .comparison-table tr:hover, .kp-table tr:hover { background: var(--kp-bg-alt-2); } .kp-table-caption { text-align: left; font-size: var(--kp-fs-xs); color: var(--kp-muted); margin-bottom: var(--kp-space-2); } /* ---- Related cluster / country grid / article lists ---- */ .kp-cluster-links, .kp-article-list, .kp-other-countries, .kp-subtopic-list { list-style: none; padding: 0; margin: 0; } .kp-cluster-links li, .kp-article-list li { padding: var(--kp-space-4) 0; border-bottom: 1px solid var(--kp-border); } .kp-link-type { display: inline-block; font-size: var(--kp-fs-xs); text-transform: uppercase; color: var(--kp-muted); margin-left: var(--kp-space-2); } .kp-article-list p { margin: var(--kp-space-1) 0 0; color: var(--kp-muted); font-size: var(--kp-fs-sm); } .kp-country-grid { display: flex; gap: var(--kp-space-3); flex-wrap: wrap; margin: var(--kp-space-4) 0; } .kp-country-card { display: inline-block; padding: var(--kp-space-3) var(--kp-space-5); background: var(--kp-dark); color: #fff !important; border-radius: var(--kp-radius-md); font-weight: 700; transition: background var(--kp-duration) var(--kp-ease), transform var(--kp-duration) var(--kp-ease); } .kp-country-card:hover { background: var(--kp-gold); color: var(--kp-dark); text-decoration: none; transform: translateY(-1px); } /* ---- Footer ---- */ .kp-footer { background: var(--kp-dark); color: #cfd8e0; margin-top: var(--kp-space-12); } /* Phase 1.2: eight footer columns (brand + 7 named groups) instead of the original five -- auto-fit rather than a fixed column count so the row wraps cleanly at any width without a chain of manually-tuned breakpoints, and so a future ninth column (e.g. once Social has a real destination) drops in without a CSS change. */ .kp-footer-inner { max-width: var(--kp-container-max); margin: 0 auto; padding: var(--kp-space-10) var(--kp-space-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--kp-space-6); } .kp-footer-brand { grid-column: span 2; } .kp-footer-col h4 { color: #fff; margin: 0 0 var(--kp-space-3); font-size: var(--kp-fs-sm); } .kp-footer-col a { display: block; color: #cfd8e0; margin-bottom: var(--kp-space-2); font-size: var(--kp-fs-sm); } .kp-footer-col a:hover { color: var(--kp-gold); } /* ---- Footer connect bar: newsletter + honestly-disabled social ---- */ .kp-footer-connect { max-width: var(--kp-container-max); margin: 0 auto; padding: 0 var(--kp-space-6) var(--kp-space-6); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--kp-space-4); border-top: 1px solid rgba(255,255,255,.1); padding-top: var(--kp-space-5); font-size: var(--kp-fs-sm); } /* Phase 1.4: .kp-newsletter-card--compact replaces the old bare .kp-footer-newsletter-mini link (kept documented here in the log, not in CSS, now that it has zero markup usage -- see PROJECT_LOG.md). The compact card's mailto link needs its own dark-bg color, since the shared .kp-newsletter-card-body p rule uses the light-mode --kp-muted token. */ .kp-newsletter-card--compact .kp-newsletter-card-body p a { color: var(--kp-gold); font-weight: 600; } .kp-newsletter-card--compact .kp-newsletter-card-body p a:hover { text-decoration: underline; } .kp-footer-social { display: flex; gap: var(--kp-space-3); } .kp-footer-social-disabled { color: #6f7f8e; cursor: not-allowed; padding: var(--kp-space-1) var(--kp-space-3); border: 1px solid rgba(255,255,255,.12); border-radius: var(--kp-radius-full); font-size: var(--kp-fs-xs); } .kp-footer-credential { max-width: var(--kp-container-max); margin: 0 auto; padding: 0 var(--kp-space-6) var(--kp-space-6); font-size: var(--kp-fs-xs); color: #a9b6c2; border-top: 1px solid rgba(255,255,255,.1); padding-top: var(--kp-space-4); } .kp-footer-credential a { color: #cfd8e0; } /* Phase 1.4: .kp-footer-bottom becomes a two-item row (copyright + Back to Top) instead of a single centered line -- wraps and re-centers on narrow screens rather than needing a separate mobile layout. */ .kp-footer-bottom { max-width: var(--kp-container-max); margin: 0 auto; padding: var(--kp-space-4) var(--kp-space-6); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--kp-space-3); font-size: var(--kp-fs-xs); border-top: 1px solid rgba(255,255,255,.1); color: #a9b6c2; } .kp-back-to-top { display: inline-flex; align-items: center; gap: var(--kp-space-1); color: #cfd8e0; font-weight: 600; padding: var(--kp-space-1) var(--kp-space-3); border-radius: var(--kp-radius-full); transition: color var(--kp-duration) var(--kp-ease), border-color var(--kp-duration) var(--kp-ease); /* Phase 1.4 (task #107) a11y fix: was rgba(255,255,255,.16), which measures only 1.63:1 against the footer's navy background -- below WCAG 1.4.11's 3:1 minimum for a UI component boundary (the pill shape is part of what signals "this is a clickable control"). .35 alpha is this project's own already-established fix for the identical problem on this identical navy background (see the --kp-border-strong dark-mode comment near the top of this file), and clears 3:1 here too. */ border: 1px solid rgba(255,255,255,.35); } .kp-back-to-top:hover, .kp-back-to-top:focus-visible { color: var(--kp-gold); border-color: var(--kp-gold); text-decoration: none; } .kp-back-to-top svg { flex-shrink: 0; } @media (min-width: 640px) { .kp-footer-bottom { justify-content: space-between; } } /* ---- Author / reviewer bio page ---- */ .kp-author-subtitle { color: var(--kp-muted); font-weight: 600; margin: -.5rem 0 var(--kp-space-4); } .kp-author-cta { margin: var(--kp-space-6) 0; } /* Same relationship to .kp-btn-secondary as .kp-header-cta has to .kp-btn-primary above: its own rule for a bespoke size, but the exact same --kp-dark/--kp-gold tokens, so the two read as one consistent "secondary button" language even though they're separate selectors. */ .kp-author-visit-btn { display: inline-block; background: var(--kp-dark); color: #fff; font-weight: 700; padding: var(--kp-space-3) var(--kp-space-6); border-radius: var(--kp-radius-md); font-size: var(--kp-fs-md); transition: background var(--kp-duration) var(--kp-ease), transform var(--kp-duration) var(--kp-ease); } .kp-author-visit-btn:hover { background: var(--kp-gold); color: var(--kp-dark); text-decoration: none; transform: translateY(-1px); } .kp-practice-areas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--kp-space-3); } .kp-practice-areas li { background: var(--kp-bg-alt); border-left: 3px solid var(--kp-gold); padding: var(--kp-space-3) var(--kp-space-4); font-weight: 600; font-size: var(--kp-fs-sm); border-radius: 0 var(--kp-radius-sm) var(--kp-radius-sm) 0; } /* ---------------------------------------------------------------------- */ /* 8. Homepage-specific */ /* ---------------------------------------------------------------------- */ /* Plain light-background hero -- superseded on the homepage by .kp-hero-v2 (Phase 1.4b premium redesign) below, but left defined rather than deleted in case a future simpler page wants the plain version; costs nothing unused. */ .kp-home-hero { text-align: center; padding: var(--kp-space-8) 0 var(--kp-space-4); } .kp-home-hero p { max-width: 700px; margin: 0 auto; color: var(--kp-muted); font-size: var(--kp-fs-md); } .kp-home-topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--kp-space-4); margin: var(--kp-space-6) 0; } .kp-home-topic-card { border: 1px solid var(--kp-border); border-radius: var(--kp-radius-lg); padding: var(--kp-space-5); transition: border-color var(--kp-duration) var(--kp-ease), box-shadow var(--kp-duration) var(--kp-ease), transform var(--kp-duration) var(--kp-ease); } .kp-home-topic-card:not(.kp-coming-soon):hover { border-color: var(--kp-gold); box-shadow: var(--kp-shadow-md); transform: translateY(-2px); } .kp-home-topic-card h3 { margin-top: 0; } .kp-home-topic-card.kp-coming-soon { opacity: .6; } .kp-home-secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kp-space-6); margin: var(--kp-space-6) 0; } .kp-home-secondary-grid h2 { font-size: var(--kp-fs-md); } .kp-home-trust-band { background: var(--kp-bg-alt); border-radius: var(--kp-radius-lg); padding: var(--kp-space-6); margin: var(--kp-space-8) 0; } .kp-home-trust-band h2 { margin-top: 0; } /* Generic homepage section rhythm -- every
on Default.aspx gets consistent vertical spacing and a divider, so eleven stacked sections read as one composed page rather than a scroll of disconnected blocks. */ .kp-home-section { margin: var(--kp-space-10) 0; padding-top: var(--kp-space-8); border-top: 1px solid var(--kp-border); } .kp-home-section:first-of-type { border-top: none; padding-top: 0; } .kp-home-section h2 { margin-top: 0; } /* Honest-curation disclaimer text (Trending Legal Updates, Popular Topics) -- small and muted so it reads as a footnote, not a headline claim. */ .kp-section-note { color: var(--kp-muted); font-size: var(--kp-fs-sm); margin: calc(var(--kp-space-2) * -1) 0 var(--kp-space-4); max-width: 640px; } /* Hero search -- larger than the header's compact search widget, since this is the brief's "primary navigation method" surface. */ .kp-home-hero-search { display: flex; gap: var(--kp-space-3); max-width: 560px; margin: var(--kp-space-6) auto 0; } .kp-home-hero-search .kp-search-input { padding: var(--kp-space-3) var(--kp-space-4); font-size: var(--kp-fs-md); } .kp-home-hero-search .kp-search-btn { padding: var(--kp-space-3) var(--kp-space-6); font-size: var(--kp-fs-md); } /* Newsletter section */ .kp-home-newsletter { text-align: center; background: var(--kp-bg-alt); border-radius: var(--kp-radius-lg); padding: var(--kp-space-8); border-top: none; } .kp-home-newsletter p { max-width: 560px; margin: 0 auto; color: var(--kp-muted); } /* ---------------------------------------------------------------------- */ /* 8c. Reusable component system (Phase 1.2) */ /* ---------------------------------------------------------------------- */ /* Component types called for in the Phase 1.2 brief: Country Cards (.kp-country-card, already existed), News Cards, Guide Cards, Resource Cards, Timeline Cards, Alert Boxes (.kp-alert, already existed), Definition Boxes, Info Cards, Statistics Blocks, Quick Summary Boxes (.kp-quick-answer, already existed), Key Takeaway Boxes, and FAQ Cards (.kp-faq-card details already inherit the existing .kp-faq details rules above via the shared .kp-faq container class -- no separate rule needed). Everything below is built from the same design tokens as the rest of the file, so dark mode (the plain-CSS @media block near the top) covers these automatically. */ /* ---- Info Card: honest "roadmap entry / coming soon" notice -- used on every practice-area subcategory and country sub-section stub page (125+ pages as of Phase 1.2). Distinct from .kp-alert (which flags a state about LEGAL content) -- this is a platform-status notice, so it gets its own neutral-info treatment instead of borrowing alert semantics. ---- */ .kp-info-card { display: flex; gap: var(--kp-space-3); background: var(--kp-info-bg); border: 1px solid color-mix(in srgb, var(--kp-info) 25%, transparent); border-radius: var(--kp-radius-md); padding: var(--kp-space-4) var(--kp-space-5); margin: var(--kp-space-5) 0; } .kp-info-card::before { content: "\24D8"; flex-shrink: 0; font-size: 1.1em; line-height: 1.3; color: var(--kp-info); } .kp-info-card p { margin: 0; color: var(--kp-text); font-size: var(--kp-fs-sm); } .kp-info-card p + p { margin-top: var(--kp-space-2); } /* ---- News Card ---- */ .kp-news-card { background: var(--kp-surface); border: 1px solid var(--kp-border); border-left: 4px solid var(--kp-gold); border-radius: var(--kp-radius-md); padding: var(--kp-space-5); } .kp-news-card h3 { margin: 0 0 var(--kp-space-2); font-size: var(--kp-fs-md); } .kp-news-card p { margin: 0; color: var(--kp-muted); font-size: var(--kp-fs-sm); } /* ---- Guide Card / Resource Card -- share the topic-card visual language as named, reusable primitives, differentiated by an optional type badge. ---- */ .kp-guide-card, .kp-resource-card { background: var(--kp-bg); border: 1px solid var(--kp-border); border-radius: var(--kp-radius-lg); padding: var(--kp-space-5); transition: border-color var(--kp-duration) var(--kp-ease), box-shadow var(--kp-duration) var(--kp-ease), transform var(--kp-duration) var(--kp-ease); } .kp-guide-card:hover, .kp-resource-card:hover { border-color: var(--kp-gold); box-shadow: var(--kp-shadow-md); transform: translateY(-2px); } .kp-guide-card h3, .kp-resource-card h3 { margin-top: 0; } .kp-resource-card-type { display: inline-block; font-size: var(--kp-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--kp-gold-text); font-weight: 700; margin-bottom: var(--kp-space-2); } /* ---- Timeline Card (compliance calendars, procedural step-by-step) ---- */ .kp-timeline { list-style: none; margin: var(--kp-space-5) 0; padding: 0; border-left: 2px solid var(--kp-border-strong); } .kp-timeline-card { position: relative; padding: 0 0 var(--kp-space-6) var(--kp-space-6); } .kp-timeline-card::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--kp-gold); border: 2px solid var(--kp-bg); } .kp-timeline-card h4 { margin: 0 0 var(--kp-space-1); font-size: var(--kp-fs-sm); } .kp-timeline-card p { margin: 0; color: var(--kp-muted); font-size: var(--kp-fs-sm); } /* ---- Definition Box (glossary-style term callouts) ---- */ .kp-definition-box { background: var(--kp-bg-alt-2); border-radius: var(--kp-radius-md); padding: var(--kp-space-4) var(--kp-space-5); margin: var(--kp-space-5) 0; } .kp-definition-box dt { font-weight: 700; color: var(--kp-text); } .kp-definition-box dd { margin: var(--kp-space-1) 0 var(--kp-space-3) 0; color: var(--kp-muted); font-size: var(--kp-fs-sm); } .kp-definition-box dd:last-child { margin-bottom: 0; } /* ---- Statistics Block ---- */ .kp-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--kp-space-5); margin: var(--kp-space-6) 0; } .kp-stat-block { text-align: center; padding: var(--kp-space-4); } .kp-stat-block strong { display: block; font-size: var(--kp-fs-xl); color: var(--kp-gold-text); } .kp-stat-block span { display: block; color: var(--kp-muted); font-size: var(--kp-fs-sm); margin-top: var(--kp-space-1); } /* ---- Key Takeaway Box ---- */ .kp-key-takeaway { background: var(--kp-dark); color: #fff; border-radius: var(--kp-radius-lg); padding: var(--kp-space-5) var(--kp-space-6); margin: var(--kp-space-6) 0; } .kp-key-takeaway h4 { margin: 0 0 var(--kp-space-2); color: var(--kp-gold); font-size: var(--kp-fs-sm); text-transform: uppercase; letter-spacing: .04em; } .kp-key-takeaway p { margin: 0; } /* ---- Newsletter Card (Phase 1.4, task #100) -- one reusable component used in two places: the homepage's dedicated Newsletter section (full size, light background) and the footer's "connect" bar (.kp-newsletter-card--compact, dark background). Deliberately NOT a fake signup form: there is no ESP wired up yet, so the CTA is a real mailto: link that opens the visitor's own mail client with a pre-filled subject/body -- honest working behaviour instead of a form that pretends to submit and either does nothing or shows a fabricated "Subscribed!" success state. This mirrors the same disclosure discipline already used for the footer's genuinely- disabled social pills and the header's honestly-labelled external consultation link: real functionality, clearly presented, never a placeholder dressed up to look automated. ---- */ .kp-newsletter-card { display: flex; align-items: center; gap: var(--kp-space-5); flex-wrap: wrap; justify-content: center; text-align: left; max-width: 640px; margin: 0 auto; } .kp-newsletter-card-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--kp-bg-alt-2); color: var(--kp-gold-text); } .kp-newsletter-card-body { flex: 1 1 260px; min-width: 200px; } .kp-newsletter-card-body h3 { margin: 0 0 var(--kp-space-1); font-size: var(--kp-fs-md); } .kp-newsletter-card-body p { margin: 0; color: var(--kp-muted); font-size: var(--kp-fs-sm); } .kp-newsletter-card > .kp-btn { flex-shrink: 0; } /* Compact variant: single-line strip for the footer's dark "connect" bar. */ .kp-newsletter-card--compact { max-width: none; margin: 0; justify-content: flex-start; gap: var(--kp-space-3); } .kp-newsletter-card--compact .kp-newsletter-card-icon { width: 36px; height: 36px; background: rgba(255,255,255,.08); color: var(--kp-gold); } .kp-newsletter-card--compact .kp-newsletter-card-body { flex: 0 1 auto; min-width: 0; } .kp-newsletter-card--compact .kp-newsletter-card-body h3 { font-size: var(--kp-fs-sm); color: #fff; margin-bottom: 2px; } .kp-newsletter-card--compact .kp-newsletter-card-body p { color: #a9b6c2; font-size: var(--kp-fs-xs); } /* ---- CTA Block (Phase 1.4, task #101) -- a self-contained call-to-action banner for article/page content: heading + one line of context + one or two real, in-platform buttons. NOT for the external consultation link (that stays a single, honestly- labelled header link, per this project's own editorial-identity decision) -- this is for internal calls to action like "report a problem" or "see the full guide." First real usage: the Accessibility Statement page's reporting section. ---- */ .kp-cta-block { display: flex; align-items: center; justify-content: space-between; gap: var(--kp-space-5); flex-wrap: wrap; background: var(--kp-bg-alt); border: 1px solid var(--kp-border); border-radius: var(--kp-radius-lg); padding: var(--kp-space-6); margin: var(--kp-space-8) 0; } .kp-cta-block-body { flex: 1 1 320px; } .kp-cta-block-body h3 { margin: 0 0 var(--kp-space-1); } .kp-cta-block-body p { margin: 0; color: var(--kp-muted); } .kp-cta-block-actions { display: flex; gap: var(--kp-space-3); flex-wrap: wrap; flex-shrink: 0; } /* Dark variant for higher-emphasis placements (matches .kp-key-takeaway's palette). */ .kp-cta-block--dark { background: var(--kp-dark); border-color: transparent; } .kp-cta-block--dark .kp-cta-block-body h3 { color: #fff; } .kp-cta-block--dark .kp-cta-block-body p { color: #cfd8e0; } /* ---- Quote Block (Phase 1.4, task #101) -- for a genuine attributed excerpt (an expert's own words, a primary-source statute/circular passage quoted verbatim, or a named reviewer's comment on an article). Ready for editorial use; not force-fit onto any existing page as a placeholder, since inventing a pull-quote with no real underlying quote would itself be a fabrication this project has consistently avoided (see: no fake testimonials on the homepage). ---- */ .kp-quote-block { position: relative; margin: var(--kp-space-6) 0; padding: var(--kp-space-5) var(--kp-space-6); border-left: 4px solid var(--kp-gold); background: var(--kp-bg-alt-2); border-radius: var(--kp-radius-md); } .kp-quote-block blockquote { margin: 0; font-size: var(--kp-fs-md); font-style: italic; color: var(--kp-text); } .kp-quote-block footer { margin-top: var(--kp-space-3); font-size: var(--kp-fs-sm); font-style: normal; color: var(--kp-muted); } .kp-quote-block footer strong { color: var(--kp-text); } /* ---- Related Content Block (Phase 1.4, task #101) -- fills the master page's existing cphRelatedCluster placeholder (previously declared but never populated by any page's code-behind -- confirmed by the markup auditor). Links only to other real, already-published pages -- never a "related" list padded with pages that don't exist yet. First real usage: the Property Law hub, linking the country pages whose property-law sections it already cross-references in body copy. ---- */ .kp-related-content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--kp-space-4); margin: var(--kp-space-4) 0; } .kp-related-content-card { display: block; padding: var(--kp-space-4) var(--kp-space-5); border: 1px solid var(--kp-border); border-radius: var(--kp-radius-md); transition: border-color var(--kp-duration) var(--kp-ease), transform var(--kp-duration) var(--kp-ease), box-shadow var(--kp-duration) var(--kp-ease); } .kp-related-content-card:hover { border-color: var(--kp-gold); transform: translateY(-2px); box-shadow: var(--kp-shadow-sm); text-decoration: none; } .kp-related-content-card-type { display: block; font-size: var(--kp-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--kp-gold-text); font-weight: 700; margin-bottom: var(--kp-space-1); } .kp-related-content-card h4 { margin: 0; font-size: var(--kp-fs-sm); color: var(--kp-text); } /* ---------------------------------------------------------------------- */ /* 8d. Homepage premium redesign — the user's own brief for this pass was */ /* explicit: keep the editorial-knowledge-platform identity (not a law */ /* firm), no fabricated stats/testimonials, and reuse the existing navy/ */ /* gold token system rather than invent a new palette (it already matches */ /* the "deep navy + white + restrained gold" direction asked for). Every */ /* class below is NEW and homepage-scoped -- .kp-country-card and */ /* .kp-home-topic-card already have real, different usages elsewhere */ /* (Property Law's country picker; 23 hub pages' subcategory grids) and */ /* are deliberately left untouched. */ /* ---------------------------------------------------------------------- */ /* ---- Hero v2 ---- */ .kp-hero-v2 { position: relative; overflow: hidden; background: var(--kp-dark); color: #fff; padding: var(--kp-space-12) var(--kp-space-6); text-align: center; border-radius: var(--kp-radius-lg); margin-top: var(--kp-space-6); } /* Decorative background only -- an abstract gradient + a faint network/globe motif built from plain CSS (radial-gradients + one inline SVG data-URI), not a stock photo of "our lawyers/office" this platform doesn't have. aria-hidden equivalent: it's a ::before, never read by assistive tech. */ .kp-hero-v2::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .55; background: radial-gradient(circle at 15% 20%, rgba(212,160,23,.16), transparent 45%), radial-gradient(circle at 85% 75%, rgba(212,160,23,.12), transparent 40%), linear-gradient(160deg, var(--kp-dark) 0%, var(--kp-dark-2) 100%); } .kp-hero-v2 > * { position: relative; z-index: 1; } .kp-hero-kicker { display: inline-block; color: var(--kp-gold); font-size: var(--kp-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--kp-space-4); } .kp-hero-v2 h1 { color: #fff; max-width: 900px; margin: 0 auto; } .kp-hero-v2 .kp-hero-sub { max-width: 680px; margin: var(--kp-space-4) auto 0; color: #cfd8e0; font-size: var(--kp-fs-md); } .kp-hero-v2 .kp-home-hero-search { margin-top: var(--kp-space-6); } .kp-hero-v2 .kp-home-hero-search .kp-search-input { border: none; } .kp-hero-actions { display: flex; gap: var(--kp-space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--kp-space-5); } /* .kp-btn-outline's default border/text colors (--kp-border-strong / --kp-text) are tuned for a light page background and would be invisible on this hero's dark fill -- scoped override, same pattern as .kp-practice-featured-card's badge override above. */ .kp-hero-actions .kp-btn-outline { border-color: rgba(255,255,255,.55); color: #fff; } .kp-hero-actions .kp-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); } /* ---- Trust cards ("Built for NRIs. Focused on Clarity.") -- honest, qualitative signals (NRI-Focused / India-Centric / Research & Updates / Editorial Independence), deliberately NOT a fabricated-statistics band. ---- */ .kp-trust-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--kp-space-5); margin: var(--kp-space-6) 0; } .kp-trust-card { padding: var(--kp-space-5); border: 1px solid var(--kp-border); border-radius: var(--kp-radius-lg); transition: border-color var(--kp-duration) var(--kp-ease), box-shadow var(--kp-duration) var(--kp-ease), transform var(--kp-duration) var(--kp-ease); } .kp-trust-card:hover { border-color: var(--kp-gold); box-shadow: var(--kp-shadow-md); transform: translateY(-2px); } .kp-trust-card-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--kp-radius-md); background: var(--kp-bg-alt-2); color: var(--kp-gold-text); margin-bottom: var(--kp-space-3); } .kp-trust-card h3 { margin: 0 0 var(--kp-space-2); font-size: var(--kp-fs-md); } .kp-trust-card p { margin: 0; color: var(--kp-muted); font-size: var(--kp-fs-sm); } /* ---- Practice Area cards: a two-tier hierarchy (one featured + many secondary) instead of fourteen visually-identical tiles. Text-forward, matching the mega menu's own (icon-free, Phase 1.3) visual language. ---- */ .kp-practice-featured-card { display: block; background: var(--kp-dark); color: #fff; border-radius: var(--kp-radius-lg); padding: var(--kp-space-6); margin-bottom: var(--kp-space-5); transition: transform var(--kp-duration) var(--kp-ease), box-shadow var(--kp-duration) var(--kp-ease); } .kp-practice-featured-card:hover { transform: translateY(-2px); box-shadow: var(--kp-shadow-lg); text-decoration: none; } /* .kp-badge-gold's default light background (#fbf1d9) is invisible on this card's dark fill, so it's overridden here rather than adding a new badge variant used nowhere else -- same "context-specific override, not a new class" pattern already used for .kp-author-visit-btn's relationship to .kp-btn-secondary. */ .kp-practice-featured-card .kp-badge-gold { background: rgba(212,160,23,.18); color: var(--kp-gold); margin-bottom: var(--kp-space-3); } .kp-practice-featured-card h3 { color: #fff; margin: 0 0 var(--kp-space-2); font-size: var(--kp-fs-lg); } .kp-practice-featured-card p { color: #cfd8e0; margin: 0; max-width: 60ch; } .kp-practice-area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--kp-space-4); } .kp-practice-area-card { display: block; padding: var(--kp-space-4) var(--kp-space-5); border: 1px solid var(--kp-border); border-radius: var(--kp-radius-md); transition: border-color var(--kp-duration) var(--kp-ease), box-shadow var(--kp-duration) var(--kp-ease), transform var(--kp-duration) var(--kp-ease); } .kp-practice-area-card:hover { border-color: var(--kp-gold); box-shadow: var(--kp-shadow-sm); transform: translateY(-1px); text-decoration: none; } .kp-practice-area-card h4 { margin: 0 0 var(--kp-space-1); font-size: var(--kp-fs-sm); color: var(--kp-text); } .kp-practice-area-card p { margin: 0; font-size: var(--kp-fs-xs); color: var(--kp-muted); } .kp-practice-area-card.kp-coming-soon { opacity: .75; } /* ---- Country tile: homepage-only, distinct from .kp-country-card (used by the real Property Law country picker) and .kp-home-topic-card (used by 23 hub pages' subcategory grids) -- a monogram badge (same visual language as the Author Card's initial avatar) + name + one real, honest line about what that country's hub actually covers. ---- */ .kp-country-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--kp-space-4); } .kp-country-tile { display: flex; gap: var(--kp-space-3); align-items: flex-start; padding: var(--kp-space-4) var(--kp-space-5); border: 1px solid var(--kp-border); border-radius: var(--kp-radius-md); transition: border-color var(--kp-duration) var(--kp-ease), box-shadow var(--kp-duration) var(--kp-ease), transform var(--kp-duration) var(--kp-ease); } .kp-country-tile:hover { border-color: var(--kp-gold); box-shadow: var(--kp-shadow-sm); transform: translateY(-1px); text-decoration: none; } .kp-country-tile-monogram { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; background: var(--kp-bg-alt-2); color: var(--kp-dark); font-weight: 800; font-size: var(--kp-fs-xs); border-radius: var(--kp-radius-sm); } .kp-country-tile h4 { margin: 0 0 2px; font-size: var(--kp-fs-sm); color: var(--kp-text); } .kp-country-tile p { margin: 0; font-size: var(--kp-fs-xs); color: var(--kp-muted); } /* ---- NRI journey grid ("Legal Guidance Designed for NRIs") -- each entry is a real, common NRI legal question mapped to a real, existing page; none of these are invented topics. ---- */ .kp-nri-journey-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--kp-space-4); } .kp-nri-journey-card { display: block; padding: var(--kp-space-4); text-align: center; border-radius: var(--kp-radius-md); transition: background var(--kp-duration) var(--kp-ease), transform var(--kp-duration) var(--kp-ease); } .kp-nri-journey-card:hover { background: var(--kp-bg-alt); transform: translateY(-1px); text-decoration: none; } .kp-nri-journey-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto var(--kp-space-2); border-radius: 50%; background: var(--kp-bg-alt-2); color: var(--kp-gold-text); } .kp-nri-journey-card h4 { margin: 0; font-size: var(--kp-fs-sm); color: var(--kp-text); } /* ---- Numbered steps ("How to Find What You Need") -- a reader-discovery flow (search/browse/explore/go deeper), not a client-intake funnel. ---- */ .kp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--kp-space-6); margin: var(--kp-space-6) 0; position: relative; } .kp-step { text-align: center; position: relative; } .kp-step-number { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto var(--kp-space-3); border-radius: 50%; background: var(--kp-gold); color: var(--kp-dark); font-weight: 800; font-size: var(--kp-fs-md); } .kp-step h4 { margin: 0 0 var(--kp-space-1); font-size: var(--kp-fs-sm); } .kp-step p { margin: 0; color: var(--kp-muted); font-size: var(--kp-fs-sm); } /* Connecting line between steps on wide screens only -- on narrow screens the grid collapses to one column and a horizontal line between stacked steps would look like a stray underline, so it's scoped to the desktop breakpoint. */ @media (min-width: 700px) { .kp-step:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: calc(50% + 32px); width: calc(100% - 64px); height: 2px; background: var(--kp-border); } } /* ---------------------------------------------------------------------- */ /* 9. Responsive rules */ /* ---------------------------------------------------------------------- */ /* ---- Header breakpoints ----------------------------------------------- Above 900px: full desktop header (mega-menu + country dropdown + search widget + CTA). At/below 900px: nav and CTA are replaced entirely by the mobile drawer + hamburger button -- never the desktop mega-menu on mobile, per the brief. The drawer itself (and its own internal accordion/backdrop rules) is NOT width-gated -- it's always position: fixed and off-screen until .is-open, so it costs nothing when unused above 900px and there's no separate "close it on resize" edge case to get wrong. */ @media (max-width: 900px) { .kp-nav { display: none; } /* Scoped to the desktop header-actions row specifically -- NOT a bare .kp-header-cta selector -- because the mobile drawer's own CTA (.kp-mobile-cta) reuses the .kp-header-cta class for shared styling and must stay visible; it's the drawer's only path to "Book a Consultation" once the desktop header is hidden below this width. */ .kp-header-actions > .kp-header-cta { display: none; } .kp-header-icon-btn { display: none; } .kp-mobile-menu-btn { display: flex; } .kp-header-inner { gap: var(--kp-space-3); } .kp-utility-disabled-inline { display: none; } .kp-footer-inner { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 700px) { h1 { font-size: var(--kp-fs-xl); } .kp-utility-bar-inner, .kp-header-inner { padding-left: var(--kp-space-4); padding-right: var(--kp-space-4); } .kp-main, .kp-related-cluster { padding-left: var(--kp-space-4); padding-right: var(--kp-space-4); } .kp-breadcrumb-bar { padding: var(--kp-space-2) var(--kp-space-4); } .kp-footer-inner { grid-template-columns: 1fr 1fr; padding: var(--kp-space-8) var(--kp-space-4); } .kp-toc-list { columns: 1; } /* Tables don't reflow to single-column on narrow screens (that would scramble which value belongs to which column), so they scroll horizontally instead — -webkit-overflow-scrolling gives that a smooth native feel on iOS Safari. */ .comparison-table, .kp-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } /* Utility bar: drop the country/language labels' verbosity, keep the essentials (Latest Updates + Contact) reachable without wrapping into a third line. */ .kp-utility-left a:first-child { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Phase 1.4 (task #102): pagination's desktop touch target (38x38) is fine for a mouse but tight for a finger -- bump to the same 44x44 minimum already used for the mobile accordion and other touch controls (WCAG 2.5.5). Gap widens slightly too so adjacent 44px targets don't feel cramped edge-to-edge. */ .kp-pagination { gap: var(--kp-space-3); } .kp-pagination a, .kp-pagination span { min-width: 44px; height: 44px; } } @media (max-width: 480px) { .kp-home-topic-grid { grid-template-columns: 1fr; } .kp-footer-inner { grid-template-columns: 1fr; } .kp-logo-text { font-size: var(--kp-fs-md); } .kp-mobile-drawer { width: 100vw; } } @media (max-width: 700px) { .kp-home-secondary-grid { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------------- */ /* Print — legal reference content is frequently printed/saved as PDF by users; strip chrome, keep the substance, save ink. */ /* ---------------------------------------------------------------------- */ @media print { .kp-utility-bar, .kp-header, .kp-mobile-drawer, .kp-mobile-drawer-backdrop, .kp-breadcrumb-bar, .kp-footer, .kp-related-cluster, .kp-skip-link { display: none; } .kp-main { max-width: 100%; padding: 0; } a { color: var(--kp-text); text-decoration: underline; } } /* Scroll lock while the mobile drawer is open (header.js adds/removes this class on ) -- prevents the page behind the drawer from scrolling on touch. */ body.kp-drawer-open { overflow: hidden; } /* The drawer and its backdrop render as direct children of , outside the
element, so they need their own focus-visible rule rather than relying on the .kp-header-scoped one above. */ .kp-mobile-drawer a:focus-visible, .kp-mobile-drawer button:focus-visible, .kp-mobile-drawer summary:focus-visible { outline: 2px solid var(--kp-gold-text); outline-offset: 2px; border-radius: 2px; } /* ========================================================================== */ :root{ --nl-navy:#0d1b2a; --nl-navy-2:#142943; --nl-gold:#d4a017; --nl-gold-light:#e0b12e; --nl-text:#24303d; --nl-muted:#5b6b7a; --nl-bg:#ffffff; --nl-bg-alt:#f6f8fa; --nl-bg-alt-2:#eef1f5; --nl-border:#e1e6eb; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:'DM Sans', sans-serif; color:var(--nl-text); background:var(--nl-bg); line-height:1.6; -webkit-font-smoothing:antialiased; } h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; } a{color:inherit;} img,svg{max-width:100%;display:block;} .nl-container { max-width: 100%; margin: 0 auto; padding: 0px 60px; } .nl-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} .nl-icon{flex-shrink:0;} /* ---------- utility bar ---------- */ .nl-utility-bar{background:var(--nl-navy-2);color:#c7d2dd;font-size:.8rem;} .nl-utility-inner { display: flex; align-items: center; justify-content: space-between; padding: 8px 60px; max-width: 100%; margin: 0 auto; flex-wrap: wrap; gap: 8px; } .nl-utility-left{display:flex;gap:20px;flex-wrap:wrap;} .nl-utility-left a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#c7d2dd;} .nl-utility-left a:hover{color:#fff;} .nl-utility-right a{text-decoration:none;color:#c7d2dd;} .nl-utility-right a:hover{color:#fff;} /* ---------- header / nav ---------- */ .nl-header{background:var(--nl-navy);position:relative;z-index:20;} .nl-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 60px; max-width: 100%; margin: 0 auto; gap: 24px; } .nl-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;} .nl-logo-text{line-height:1.1;} .nl-logo-text .nl-logo-line1{display:block;color:var(--nl-gold);font-weight:700;font-size:1rem;letter-spacing:.03em;} .nl-logo-text .nl-logo-line2{display:block;color:#fff;font-weight:600;font-size:.7rem;letter-spacing:.15em;} .nl-nav{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0;} .nl-nav a{text-decoration:none;color:#d7dee6;font-size:.9rem;font-weight:600;letter-spacing:.02em;} .nl-nav a.nl-active,.nl-nav a:hover{color:var(--nl-gold);} .nl-header-cta{background:var(--nl-gold);color:var(--nl-navy);font-weight:700;font-size:.82rem;letter-spacing:.03em;padding:12px 22px;border-radius:4px;text-decoration:none;white-space:nowrap;} .nl-header-cta:hover{background:var(--nl-gold-light);} .nl-header-flex{display:flex;align-items:center;gap:32px;} a.nl-logo img { width: 100%; max-width: 200px; } /* ---------- hero ---------- */ .nl-hero { position: relative; overflow: hidden; background-image: linear-gradient(90deg, rgba(7, 26, 47, 1) 0%, rgba(7, 26, 47, 0.98) 18%, rgb(7 26 47 / 89%) 32%, rgb(7 26 47 / 90%) 45%, rgba(7, 26, 47, 0.30) 62%, rgba(7, 26, 47, 0.08) 78%, rgba(7, 26, 47, 0) 92%), url(/assets/img/hero-nri-consultation.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff; padding: 64px 0 56px; min-height: 550px; } .nl-hero-inner { position: relative; z-index: 2; } .nl-hero-inner { max-width: 100%; margin: 0 auto; padding: 0 60px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } .nl-hero-kicker{color:var(--nl-gold);font-weight:700;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;display:block;margin-bottom:14px;} .nl-hero h1 { font-size: 2.5rem; line-height: 1.2; margin: 0 0 18px; font-weight: 500; color: #fff; } .nl-hero-sub{color:#c7d2dd;font-size:1.02rem;max-width:520px;margin:0 0 28px;} .nl-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px;} .nl-btn{display:inline-block;padding:13px 26px;border-radius:5px;font-weight:700;font-size:.9rem;text-decoration:none;letter-spacing:.01em;border:2px solid transparent;} .nl-btn-gold{background:var(--nl-gold);color:var(--nl-navy);} .nl-btn-gold:hover{background:var(--nl-gold-light);} .nl-btn-outline { border-color: #d4a017; color: #d4a017 !important; } .nl-btn-outline:hover{border-color:var(--nl-gold);color:var(--nl-gold);} .nl-trust-strip-label{color:var(--nl-gold);font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px;} .nl-flag-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;} .nl-flag{width:36px;height:26px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;line-height:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);overflow:hidden;} .nl-flag-more{font-size:.68rem;font-weight:700;background:var(--nl-gold);color:var(--nl-navy);border-color:var(--nl-gold);} .nl-hero-art{position:relative;min-height:340px;} /* .nl-hero-art-media { width: 100%; aspect-ratio: 16/11; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.35); } */ .nl-hero-art-media img{width:100%;height:100%;object-fit:cover;display:block;} .nl-hero-art-badge{position:absolute;bottom:-18px;left:-18px;background:#fff;color:var(--nl-navy);border-radius:8px;padding:14px 18px;box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;align-items:center;gap:10px;font-size:.82rem;font-weight:700;} /* ---------- generic section ---------- */ .nl-section{padding:72px 0;} .nl-section-alt{background:var(--nl-bg-alt);} .nl-section-head{text-align:center;max-width:640px;margin:0 auto 44px;} .nl-eyebrow { color: #d4a017; font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: 10px; } .nl-section-head h2{font-size:1.9rem;margin:0;color:var(--nl-navy);font-weight:700;} .nl-section-head p{color:var(--nl-muted);margin:14px 0 0;} /* ---------- why choose us ---------- */ .nl-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} .nl-feature-card{background:#fff;border:1px solid var(--nl-border);border-radius:10px;padding:28px 22px;text-align:left;} .nl-feature-icon{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--nl-gold);display:flex;align-items:center;justify-content:center;color:var(--nl-gold-text,#d4a017);margin-bottom:18px;} .nl-feature-card h3{margin:0 0 8px;font-size:1.02rem;color:var(--nl-navy);} .nl-feature-card p{margin:0;color:var(--nl-muted);font-size:.9rem;} /* ---------- services ---------- */ .nl-grid-services{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} .nl-service-card{display:block;background:#fff;border:1px solid var(--nl-border);border-radius:10px;padding:26px 20px;text-decoration:none;transition:border-color .15s,box-shadow .15s;} .nl-service-card:hover{border-color:var(--nl-gold);box-shadow:0 6px 18px rgba(13,27,42,.08);} .nl-service-icon{width:44px;height:44px;color:var(--nl-navy);margin-bottom:16px;} .nl-service-card h3{margin:0 0 8px;font-size:1rem;color:var(--nl-navy);} .nl-service-card p{margin:0;color:var(--nl-muted);font-size:.86rem;} .nl-services-cta{text-align:center;margin-top:36px;} /* ---------- stats band ---------- */ .nl-stats-band{background:var(--nl-navy);color:#fff;} .nl-stats-inner { max-width: 100%; margin: 0 auto; padding: 40px 60px; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; } .nl-stat-icon{color:var(--nl-gold);margin:0 auto 10px;width:30px;height:30px;} .nl-stat-num{font-size:1.9rem;font-weight:700;color:var(--nl-gold);display:block;} .nl-stat-label{color:#c7d2dd;font-size:.85rem;} /* ---------- trust / map section ---------- */ .nl-trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;} .nl-trust-copy h2{font-size:1.8rem;color:var(--nl-navy);margin:0 0 14px;} .nl-trust-copy > p{color:var(--nl-muted);margin:0 0 8px;max-width:440px;} .nl-globe-wrap{display:flex;justify-content:center;padding:12px 0;} .nl-globe-wrap img{width:100%;max-width:480px;height:auto;border-radius:12px;box-shadow:0 12px 30px rgba(13,27,42,.12);} .nl-checklist{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;} .nl-checklist li{display:flex;align-items:flex-start;gap:12px;font-weight:600;color:var(--nl-navy);font-size:.95rem;} .nl-check-icon{width:24px;height:24px;border-radius:50%;background:var(--nl-gold);color:var(--nl-navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;} /* ---------- how it works ---------- */ .nl-steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center;position:relative;} .nl-step{padding:0 14px;position:relative;} .nl-step-num{width:56px;height:56px;border-radius:50%;background:var(--nl-gold);color:var(--nl-navy);font-size:1.3rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;} .nl-step h4{margin:0 0 6px;color:var(--nl-navy);font-size:1rem;} .nl-step p{margin:0;color:var(--nl-muted);font-size:.85rem;} .nl-step-arrow{position:absolute;top:26px;right:-16px;color:var(--nl-border);} .nl-step:last-child .nl-step-arrow{display:none;} /* ---------- testimonials ---------- */ .nl-testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .nl-testimonial-card{background:#fff;border:1px solid var(--nl-border);border-radius:10px;padding:28px 24px;} .nl-quote-icon{color:var(--nl-gold);width:26px;height:26px;margin-bottom:14px;} .nl-testimonial-card p{color:var(--nl-text);font-size:.94rem;margin:0 0 18px;} .nl-testimonial-author{font-weight:700;color:var(--nl-navy);font-size:.88rem;} .nl-carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:30px;} .nl-carousel-dots span{width:8px;height:8px;border-radius:50%;background:var(--nl-border);display:block;} .nl-carousel-dots span.nl-dot-active{background:var(--nl-gold);} /* ---------- faq ---------- */ .nl-faq-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;} .nl-faq-list{margin-top:8px;} .nl-faq-item{border-bottom:1px solid var(--nl-border);} .nl-faq-item summary{list-style:none;cursor:pointer;padding:18px 4px;font-weight:700;color:var(--nl-navy);display:flex;align-items:center;justify-content:space-between;font-size:.98rem;} .nl-faq-item summary::-webkit-details-marker{display:none;} .nl-faq-item summary .nl-faq-toggle{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--nl-border);color:var(--nl-navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:16px;} .nl-faq-item[open] summary .nl-faq-toggle{background:var(--nl-gold);border-color:var(--nl-gold);color:var(--nl-navy);} .nl-faq-item p{margin:0 4px 18px;color:var(--nl-muted);font-size:.9rem;} .nl-faq-art{background:var(--nl-navy);border-radius:12px;padding:44px;display:flex;align-items:center;justify-content:center;min-height:280px;} /* ---------- cta banner ---------- */ .nl-cta-band{background:var(--nl-navy-2);color:#fff;} .nl-cta-inner{max-width:1200px;margin:0 auto;padding:36px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;} .nl-cta-left{display:flex;align-items:center;gap:18px;} .nl-cta-icon{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--nl-gold);flex-shrink:0;} .nl-cta-left h3 { margin: 0 0 4px; font-size: 1.15rem; color: #d4a017; } .nl-cta-left p{margin:0;color:#c7d2dd;font-size:.9rem;} /* ---------- footer ---------- */ .nl-footer{background:var(--nl-navy);color:#c7d2dd;} .nl-footer-inner { max-width: 100%; margin: 0 auto; padding: 56px 60px 33px 60px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 32px; } .nl-footer h4{color:#fff;font-size:.95rem;margin:0 0 18px;} .nl-footer-brand p{font-size:.86rem;color:#a9b6c2;margin:12px 0 18px;} .nl-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;} .nl-footer ul a{text-decoration:none;color:#a9b6c2;font-size:.86rem;} .nl-footer ul a:hover{color:var(--nl-gold);} .nl-footer-social{display:flex;gap:10px;margin-top:6px;} .nl-footer-social a{width:32px;height:32px;border-radius:50%;border:1px solid #3a4a5e;display:flex;align-items:center;justify-content:center;color:#c7d2dd;text-decoration:none;} .nl-footer-social a:hover{border-color:var(--nl-gold);color:var(--nl-gold);} .nl-footer-contact li{font-size:.86rem;color:#a9b6c2;display:flex;gap:10px;align-items:flex-start;} .nl-footer-bottom{border-top:1px solid #26374b;} .nl-footer-bottom-inner { max-width: 100%; margin: 0 auto; padding: 18px 60px; display: flex; justify-content: space-between; font-size: .8rem; color: #8a97a5; flex-wrap: wrap; gap: 8px; } ul.nl-footer-contact p { margin: 0px; } /* ---------- responsive ---------- */ @media (max-width:960px){ .nl-hero-inner{grid-template-columns:1fr;} .nl-hero-art{order:-1;} .nl-grid-4,.nl-grid-services{grid-template-columns:repeat(2,1fr);} .nl-steps-row{grid-template-columns:repeat(2,1fr);row-gap:32px;} .nl-step-arrow{display:none;} .nl-testimonial-grid{grid-template-columns:1fr;} .nl-trust-grid,.nl-faq-grid{grid-template-columns:1fr;} .nl-footer-inner{grid-template-columns:repeat(2,1fr);} .nl-header-inner{flex-wrap:wrap;} .nl-nav{width:100%;order:3;justify-content:center;flex-wrap:wrap;gap:16px 20px;padding-top:14px;margin-top:14px;border-top:1px solid rgba(255,255,255,.1);} } @media (max-width:600px){ .nl-grid-4,.nl-grid-services,.nl-stats-inner{grid-template-columns:1fr 1fr;} .nl-hero h1{font-size:1.8rem;} .nl-section{padding:48px 0;} .nl-footer-inner{grid-template-columns:1fr;} .nl-header-cta{display:none;} }