/* =================================================================== * DEJF Theme v2 — Main Stylesheet * Aligned with wireframe v4 + case detail template * Navy + Gold institutional palette · Source Serif + Inter + JetBrains Mono * =================================================================== */ :root { --navy: #1F2A50; --navy-dark: #141C36; --navy-mid: #2A3A6B; --gold: #C9A961; --gold-soft: #F5EDD8; --text: #1F2A50; --body: #3A4358; --muted: #6B7480; --line: #E5E9F0; --bg-soft: #F7F8FB; --white: #FFFFFF; --green: #2A5A3D; --green-soft: #E8F0EB; --amber: #8A6F2D; --max-width: 1240px; --content-width: 1100px; --section-pad-x: 56px; } /* ===== RESET ===== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; } html { overflow-x: clip; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--text); background: var(--white); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* `overflow-x: clip` (not `hidden`) on prevents horizontal scroll * caused by full-bleed breakouts (.hero / .page-hero use negative margins) * without clipping the breakouts themselves. */ } img { max-width: 100%; height: auto; display: block; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--gold); } .screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute !important; } .skip-link:focus { position: absolute; top: 8px; left: 8px; background: var(--gold); color: var(--navy-dark); padding: 10px 16px; z-index: 9999; clip: auto; height: auto; width: auto; } /* ===== UTILITY BAR ===== */ .utility { background: var(--navy-dark); padding: 9px 0; font-size: 11px; color: #B8BFD4; } .utility-inner { /* Full page width, matching `.nav` below it. */ width: 100%; padding: 0 var(--section-pad-x); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } /* Two-class specificity so these survive the Elementor kit's global link * color (.elementor-kit-* a), which loads after this stylesheet. */ .utility .utility-inner a { color: #B8BFD4; } .utility .utility-inner a:hover { color: var(--gold); } .utility-left, .utility-right { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .utility-right { gap: 6px; } .utility-login { padding-left: 10px; margin-left: 4px; font-weight: 500; } .lang-pill { padding: 3px 9px; border-radius: 2px; font-weight: 500; letter-spacing: 0.4px; } .lang-pill.active { background: var(--navy-mid); color: var(--white) !important; } /* Language switcher rendered from the WP "language-switcher" menu * (Polylang language-switcher item). Styled to match .lang-pill. */ .lang-switcher-menu { display: inline-flex; gap: 6px; align-items: center; list-style: none; margin: 0; padding: 0; } .lang-switcher-menu li { margin: 0; } .lang-switcher-menu a { display: inline-block; padding: 3px 9px; border-radius: 2px; font-weight: 500; letter-spacing: 0.4px; font-size: 11px; text-transform: uppercase; } .utility .lang-switcher-menu a { color: #B8BFD4; } .utility .lang-switcher-menu a:hover { color: var(--gold); } .lang-switcher-menu .current-lang > a, .lang-switcher-menu .current-lang.current-menu-item > a, .utility .lang-switcher-menu .current-lang > a { background: var(--navy-mid); color: var(--white); } /* Polylang can prepend flags; keep them tidy inline */ .lang-switcher-menu img.country-flag { display: inline-block; vertical-align: middle; margin-right: 4px; } /* ===== SITE HEADER / NAV ===== */ .site-header { background: var(--navy); position: sticky; top: 0; z-index: 100; } .nav { /* Full page width (unlike other `--max-width`-capped sections) so the * longer French/Dutch nav labels have room before wrapping or crowding * the toggle button. */ width: 100%; padding: 18px var(--section-pad-x); display: flex; justify-content: space-between; align-items: center; } .site-logo { display: flex; align-items: center; } .logo-img, .custom-logo { height: 52px; width: auto; } .logo-fallback { color: var(--white); font-family: 'Source Serif 4', serif; font-weight: 500; font-size: 18px; letter-spacing: 0.5px; display: none; } .primary-nav .nav-items { list-style: none; display: flex; gap: 26px; align-items: center; margin: 0; } .primary-nav .nav-items > li > a { font-size: 12px; color: #DCE0EE; cursor: pointer; letter-spacing: 0.5px; font-weight: 500; text-transform: uppercase; display: inline-block; padding: 6px 0; transition: color 0.2s; } .primary-nav .nav-items > li > a:hover, .primary-nav .nav-items > li.current-menu-item > a, .primary-nav .nav-items > li.current-menu-parent > a { color: var(--gold); } .primary-nav .nav-items > li.current-menu-item > a, .primary-nav .nav-items > li.current-menu-parent > a { border-bottom: 1px solid var(--gold); padding-bottom: 2px; } .primary-nav .sub-menu { display: none; position: absolute; background: var(--navy-dark); padding: 10px 0; min-width: 200px; list-style: none; margin-top: 6px; border-radius: 3px; } .primary-nav .menu-item-has-children { position: relative; } .primary-nav .menu-item-has-children:hover > .sub-menu { display: block; } .primary-nav .sub-menu li a { padding: 8px 18px; display: block; color: #DCE0EE; font-size: 12px; letter-spacing: 0.3px; text-transform: uppercase; } .primary-nav .sub-menu li a:hover { color: var(--gold); background: var(--navy-mid); } .nav-toggle { display: none; background: transparent; border: 0; padding: 8px; cursor: pointer; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--white); margin: 5px 0; transition: 0.2s; } /* ===== HERO (COMPACT — wireframe v4) ===== * Conservative pass: flat navy (no diagonal gradient or corner glow), a * plain letterhead-style tag instead of a bordered pill, and no italic * accent — reads as an official notice rather than a product landing page. */ .hero { background: var(--navy); color: var(--white); border-bottom: 2px solid var(--gold); /* Horizontal padding lives on `.hero-inner` so content lines up with * `.nav` / `.section-inner` (both use max-width + side padding). */ padding: 40px 0 36px; position: relative; overflow: hidden; /* Full-bleed: span the viewport regardless of how narrow the parent * container is (e.g. Elementor's max-width 1140px column). */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .hero-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--section-pad-x); position: relative; } .hero-inner > * { max-width: 760px; } .hero-tag { display: inline-block; font-size: 11px; color: var(--gold); border-bottom: 1px solid rgba(255,255,255,0.18); padding-bottom: 8px; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 16px; font-weight: 600; } .hero h1 { font-family: 'Source Serif 4', serif; font-size: 32px; line-height: 1.2; font-weight: 500; color: var(--white); margin-bottom: 14px; letter-spacing: -0.3px; } .hero h1 .accent { color: var(--gold); font-style: normal; } .hero p { font-size: 14px; line-height: 1.6; color: #D8DDED; max-width: 640px; margin-bottom: 20px; } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; } .btn-gold { /* !important on color: without it, Elementor's global-kit link color * (loaded after this stylesheet) repaints the text navy — invisible * against this button's navy-page background now that it's an outline * button instead of a solid gold fill. Same issue as .btn-outline-white. */ background: transparent; color: var(--gold) !important; padding: 11px 21px; border-radius: 3px; border: 1px solid var(--gold); font-weight: 600; font-size: 12.5px; cursor: pointer; letter-spacing: 0.3px; text-transform: uppercase; display: inline-block; transition: background 0.2s, border-color 0.2s; } .btn-gold:hover { background: rgba(201,169,97,0.12); border-color: #B8985A; color: var(--gold) !important; } .btn-outline-white { background: transparent; color: var(--white) !important; padding: 11px 20px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.4); font-weight: 500; font-size: 12.5px; display: inline-block; transition: all 0.2s; } .btn-outline-white:hover { border-color: var(--white); color: var(--white) !important; } .btn-outline-gold { background: transparent; color: var(--gold) !important; padding: 11px 20px; border-radius: 3px; border: 1px solid rgba(201,169,97,0.5); font-weight: 500; font-size: 12.5px; letter-spacing: 0.3px; text-transform: uppercase; display: inline-block; transition: all 0.2s; } .btn-outline-gold:hover { border-color: var(--gold); background: rgba(201,169,97,0.1); color: var(--gold) !important; } /* Page hero — used on About, FAQ, News, Contact */ .page-hero { background: var(--navy); color: var(--white); border-bottom: 2px solid var(--gold); /* Horizontal padding lives on `.page-hero-inner` so content aligns * with `.nav` / `.section-inner` (both use max-width + side padding). */ padding: 36px 0 28px; position: relative; /* Full-bleed: span the viewport regardless of how narrow the parent * container is (e.g. Elementor's max-width 1140px column). */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .page-hero-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--section-pad-x); } .page-hero h1 { font-family: 'Source Serif 4', serif; font-size: 30px; font-weight: 500; color: var(--white); letter-spacing: -0.3px; line-height: 1.2; } .page-hero .eyebrow-light { font-size: 10px; color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; } /* ===== BREADCRUMB ===== */ .breadcrumb { background: var(--bg-soft); padding: 14px var(--section-pad-x); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); } .breadcrumb-inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .breadcrumb a { color: var(--muted); } .breadcrumb a:hover { color: var(--navy); } .breadcrumb .sep { color: var(--line); } .breadcrumb .current { color: var(--navy); font-weight: 500; } /* ===== STATS ===== */ .stats { padding: 36px var(--section-pad-x); border-bottom: 1px solid var(--line); background: var(--bg-soft); } .stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: var(--max-width); margin: 0 auto; } .stat { padding-left: 18px; border-left: 1px solid var(--navy-mid); } .stat-num { font-family: 'Source Serif 4', serif; font-size: 30px; font-weight: 500; color: var(--navy); line-height: 1.1; } .stat-label { font-size: 11px; color: var(--muted); margin-top: 8px; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 500; } /* ===== SECTION ===== */ .section { padding: 56px 0; border-bottom: 1px solid var(--line); } .section-alt { background: var(--bg-soft); } .section-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--section-pad-x); } .section-inner-narrow { max-width: 880px; margin: 0 auto; padding: 0 var(--section-pad-x); } .section-head { margin-bottom: 32px; } .eyebrow { font-size: 11px; color: var(--gold); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 12px; font-weight: 600; display: flex; align-items: center; gap: 10px; } .eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--gold); } .section h2 { font-family: 'Source Serif 4', serif; font-size: 28px; font-weight: 500; color: var(--navy); margin-bottom: 12px; letter-spacing: -0.3px; line-height: 1.2; } .section-sub { font-size: 14px; color: var(--body); line-height: 1.65; } .section-footer { margin-top: 32px; } .link-more { font-size: 12px; color: var(--navy); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; } .link-more:hover { color: var(--gold); } /* ===== LAWSUITS GRID ===== * Conservative pass: flat card (no gradient fill, no shadow, no hover-lift), * a plain 2px navy top rule instead of the gold left accent bar. * * Markup is a native
/, grouped with `name="dejf-lawsuits"` * so opening one on mobile natively closes the others. holds the * badge/case-id/title/brand line and is always visible; the rest sits in * .lawsuit-body. Below 981px that's a real accordion (tap the summary to * expand/collapse, starting closed; see template-parts/lawsuit-card.php for * why only the body carries the stretched-link). At 981px and up every card * must show fully expanded simultaneously — CSS alone can't do that, because * the very `name` grouping that makes mobile behave is a mutual-exclusion * mechanism (like radio buttons): the browser closes a card the instant a * sibling in its group opens, however many are set `open` via CSS or even * the `.open` DOM property. So the actual fix is JS (the "LAWSUIT CARDS" * block in assets/js/main.js): at 981px+ it drops `name` from every card * first — making them independent — before opening all of them; below that * it restores `name` and closes them for mobile's starting state. * `.lawsuit-summary { pointer-events: none }` below just stops a desktop * click from toggling one back off. */ .lawsuits { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .lawsuit { padding: 26px; border: 1px solid var(--line); border-top: 2px solid var(--navy); background: var(--white); transition: border-color 0.2s; position: relative; overflow: hidden; } .lawsuit:hover { border-color: var(--navy-mid); border-top-color: var(--navy); } .lawsuit:hover .lawsuit-link { color: var(--gold); } .lawsuit-summary { list-style: none; cursor: pointer; position: relative; display: block; } .lawsuit-summary::-webkit-details-marker { display: none; } .lawsuit-summary::marker { content: ''; } /* Stretched link: on desktop the whole card is a click target. The overlay * sits above card content but stays transparent; h3 + "View case" remain * visible but are non-interactive as far as this link goes, so we don't * nest anchors. Lives inside .lawsuit-body (not a direct child of .lawsuit) * so it is naturally absent whenever the body is collapsed on mobile. */ .lawsuit-stretched-link { position: absolute; inset: 0; z-index: 1; text-indent: 200%; white-space: nowrap; overflow: hidden; border-radius: 4px; } .lawsuit-stretched-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .lawsuit-body > *:not(.lawsuit-stretched-link) { position: relative; z-index: 0; } .lawsuit-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; width: 100%; margin-bottom: 16px; } .badge { font-size: 10px; padding: 5px 11px; border-radius: 2px; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 600; } .badge-active { background: var(--green-soft); color: var(--green); } .badge-filed { background: #E8EDF7; color: var(--navy); } .badge-pre { background: var(--gold-soft); color: var(--amber); } .badge-settled { background: #EFEFEF; color: #555; } .case-id { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); } .case-id-light { color: rgba(255,255,255,0.7); } .lawsuit h3 { font-family: 'Source Serif 4', serif; font-size: 18px; font-weight: 500; color: var(--navy); margin-bottom: 10px; line-height: 1.3; } .lawsuit h3 a { color: inherit; } .lawsuit h3 a:hover { color: var(--gold); } .lawsuit-brands { font-size: 11px; color: var(--gold); letter-spacing: 0.8px; text-transform: uppercase; font-weight: 600; } .lawsuit-desc { font-size: 13px; color: var(--body); line-height: 1.6; margin: 16px 0 20px; } .lawsuit-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 9px 0; border-top: 1px solid var(--line); gap: 12px; } .lawsuit-row strong { color: var(--navy); font-weight: 600; text-align: right; } .lawsuit-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 12px; color: var(--navy); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; } .lawsuit-link::after { content: '→'; color: var(--gold); } .lawsuit-link:hover { color: var(--gold); } /* Chevron affordance — only meaningful where the accordion is interactive * (below 981px, see the RESPONSIVE section); hidden on desktop. */ .lawsuit-chevron { display: none; position: absolute; top: 0; right: 0; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; flex-shrink: 0; } .lawsuit-chevron::before { content: '+'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--navy); line-height: 1; } .lawsuit[open] .lawsuit-chevron::before { content: '\2212'; } @media (min-width: 981px) { /* The actual "force open" happens in JS (assets/js/main.js sets the * `open` property on every details.lawsuit at this breakpoint) — see * the comment above the LAWSUITS GRID rules for why CSS alone can't. * This just stops a desktop click from toggling it back closed. */ .lawsuit-summary { pointer-events: none; } } /* ===== CASE DETAIL PAGE ===== */ .case-header { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); color: var(--white); padding: 36px var(--section-pad-x) 28px; position: relative; overflow: hidden; } .case-header::after { content: ''; position: absolute; top: 0; right: 0; width: 380px; height: 100%; background: radial-gradient(circle at top right, rgba(201,169,97,0.12), transparent 70%); pointer-events: none; } .case-header-inner { max-width: var(--content-width); margin: 0 auto; position: relative; } .case-eyebrow { font-size: 10px; color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .case-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--gold); } .case-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .case-title-block { flex: 1; min-width: 320px; } .case-header h1 { font-family: 'Source Serif 4', serif; font-size: 30px; line-height: 1.2; font-weight: 500; color: var(--white); margin-bottom: 8px; letter-spacing: -0.3px; } .case-brands { font-size: 11px; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; margin-bottom: 16px; } .case-summary { font-size: 14px; line-height: 1.6; color: #D8DDED; max-width: 640px; } .case-id-mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #B8BFD4; } /* STATUS PANEL */ .status-panel { background: var(--white); border-bottom: 1px solid var(--line); padding: 28px var(--section-pad-x); } .status-panel-inner { max-width: var(--content-width); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: flex-start; } .status-current { padding-left: 20px; border-left: 3px solid var(--gold); } .status-tag { font-size: 10px; color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; } .status-headline { font-family: 'Source Serif 4', serif; font-size: 20px; font-weight: 500; color: var(--navy); line-height: 1.35; margin-bottom: 12px; } .status-detail { font-size: 14px; line-height: 1.65; color: var(--body); margin-bottom: 14px; } .status-detail strong { color: var(--navy); font-weight: 600; } .status-meta { display: flex; gap: 24px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding-top: 14px; border-top: 1px solid var(--line); } .status-meta strong { color: var(--navy); font-weight: 600; } .badge-inline { font-size: 9px; padding: 3px 7px; border-radius: 2px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; display: inline-block; } .at-a-glance { background: var(--bg-soft); padding: 20px 22px; border-radius: 4px; } .at-a-glance h4 { font-size: 11px; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; } .glance-row { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px; display: grid; grid-template-columns: 100px 1fr; gap: 12px; } .glance-row:last-child { border-bottom: none; } .glance-row > span { color: var(--muted); } .glance-row strong { color: var(--navy); font-weight: 600; } /* IMPACTED VEHICLES */ .vehicles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .vehicle-chip { padding: 12px 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: border-color 0.2s; } .vehicle-chip:hover { border-color: var(--navy); } .vehicle-chip .vname { font-size: 13px; font-weight: 600; color: var(--navy); } .vehicle-chip .vyears { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); } .vehicles-note { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 14px; } /* ELIGIBILITY */ .eligibility-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .eligibility-card { padding: 22px; background: var(--white); border: 1px solid var(--line); border-radius: 4px; position: relative; } .eligibility-card .step-num { font-family: 'Source Serif 4', serif; font-size: 28px; font-weight: 500; color: var(--gold); line-height: 1; margin-bottom: 12px; } .eligibility-card h4 { font-family: 'Source Serif 4', serif; font-size: 15px; font-weight: 500; color: var(--navy); margin-bottom: 8px; line-height: 1.35; } .eligibility-card p { font-size: 12.5px; color: var(--body); line-height: 1.55; } .eligibility-card p strong { color: var(--navy); font-weight: 600; } .eligibility-card .engine { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--navy); font-weight: 600; background: var(--gold-soft); padding: 3px 8px; border-radius: 2px; display: inline-block; margin-top: 8px; } .eligibility-note { margin-top: 20px; padding: 14px 18px; background: var(--white); border-left: 3px solid var(--gold); border-radius: 0 4px 4px 0; font-size: 12.5px; color: var(--body); line-height: 1.6; } .eligibility-note strong { color: var(--navy); font-weight: 600; } /* PROSE */ .prose { max-width: none; } .prose p { font-size: 14.5px; line-height: 1.75; color: var(--body); margin-bottom: 1em; } .prose strong { color: var(--navy); font-weight: 600; } .prose h3 { font-family: 'Source Serif 4', serif; font-size: 17px; font-weight: 500; color: var(--navy); margin: 1.6em 0 0.4em; } .prose a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 2px; } .prose a:hover { color: var(--gold); } .prose ul, .prose ol { margin: 0 0 1em 1.4em; } .prose li { font-size: 14.5px; line-height: 1.75; color: var(--body); margin-bottom: 0.4em; } /* PROCEEDINGS TIMELINE */ .juris-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; flex-wrap: wrap; } .juris-tab { padding: 12px 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-left: 0; border-right: 0; border-top: 0; } .juris-tab.active { color: var(--navy); border-bottom-color: var(--gold); } .juris-tab:hover:not(.active) { color: var(--navy); } .juris-tab .count { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); margin-left: 6px; padding: 2px 6px; background: var(--white); border-radius: 8px; font-weight: 500; } .timeline-pane { display: none; } .timeline-pane.active { display: block; } /* Make tabs (impacted vehicles) — reuse the jurisdiction tab styling. */ .make-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; flex-wrap: wrap; } .make-tab { padding: 12px 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-left: 0; border-right: 0; border-top: 0; } .make-tab.active { color: var(--navy); border-bottom-color: var(--gold); } .make-tab:hover:not(.active) { color: var(--navy); } .make-tab .count { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); margin-left: 6px; padding: 2px 6px; background: var(--white); border-radius: 8px; font-weight: 500; } .make-pane { display: none; } .make-pane.active { display: block; } .timeline { position: relative; padding-left: 28px; } .timeline::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 1px; background: var(--line); } .timeline-item { position: relative; padding: 0 0 22px 0; } .timeline-item:last-child { padding-bottom: 0; } .timeline-item::before { content: ''; position: absolute; left: -23px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--white); border: 2px solid var(--line); } .timeline-item.is-current::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.18); } .timeline-item.is-future::before { background: var(--white); } .timeline-date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--gold); font-weight: 500; letter-spacing: 0.3px; margin-bottom: 4px; } .timeline-item.is-future .timeline-date { color: var(--muted); } .timeline-body { font-size: 13.5px; line-height: 1.6; color: var(--body); } .timeline-body strong { color: var(--navy); font-weight: 600; } .timeline-body a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 2px; } .timeline-body a:hover { color: var(--gold); } /* CTA BAND */ .cta-band { background: var(--navy); color: var(--white); padding: 36px var(--section-pad-x); } .cta-band-inner { max-width: var(--content-width); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; } .cta-band h3 { font-family: 'Source Serif 4', serif; font-size: 22px; font-weight: 500; color: var(--white); margin-bottom: 6px; } .cta-band p { font-size: 13px; color: #B8BFD4; line-height: 1.5; } .cta-band-buttons { display: flex; gap: 12px; flex-wrap: wrap; } /* ===== NEWS TIMELINE (mirrors the procedural timeline) ===== */ .news-timeline { margin-top: 8px; } .news-tl-item { padding-bottom: 30px; } .news-tl-item:hover::before { border-color: var(--gold); } .news-tl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 7px; flex-wrap: wrap; } .news-tl-item a.timeline-date { margin-bottom: 0; text-decoration: none; transition: color 0.15s; } .news-tl-item a.timeline-date:hover { color: var(--navy); } .news-tl-item .timeline-body { font-size: 14px; line-height: 1.65; } .news-tl-item .timeline-body p { margin: 0 0 10px; } .news-tl-item .timeline-body p:last-child { margin-bottom: 0; } .news-tag { font-size: 10px; padding: 3px 9px; border-radius: 2px; background: var(--bg-soft); color: var(--navy); border: 1px solid var(--line); letter-spacing: 0.6px; text-transform: uppercase; font-weight: 600; white-space: nowrap; line-height: 1.4; } /* Year dividers (inserted by JS on the archive timeline) */ .news-year { position: relative; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; letter-spacing: 1px; color: var(--navy); margin: 4px 0 22px; } .news-year:first-child { margin-top: 0; } .news-year::before { content: ''; position: absolute; left: -25px; top: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--gold); border: 2px solid var(--gold); box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.15); } /* Lazy-load spinner */ .news-loader { display: flex; justify-content: center; padding: 30px 0 6px; min-height: 24px; } .news-loader-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--gold); opacity: 0; transition: opacity 0.2s; } .news-loader.is-loading .news-loader-spinner { opacity: 1; animation: dejf-spin 0.7s linear infinite; } @keyframes dejf-spin { to { transform: rotate(360deg); } } /* ===== FAQ ===== */ .faq-list { max-width: 880px; margin: 0 auto; } .faq { padding: 0; border-bottom: 1px solid var(--line); transition: all 0.2s; } .faq:last-child { border-bottom: none; } .faq summary { padding: 22px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; gap: 16px; } .faq summary::-webkit-details-marker { display: none; } .faq-q { font-family: 'Source Serif 4', serif; font-size: 17px; font-weight: 500; color: var(--navy); transition: color 0.2s; } .faq:hover .faq-q { color: var(--gold); } .faq-icon { color: var(--gold); font-size: 20px; font-weight: 300; transition: transform 0.2s; } .faq[open] .faq-icon { transform: rotate(45deg); } .faq-a { padding: 0 0 22px 0; font-size: 14.5px; line-height: 1.75; color: var(--body); } .faq-a p:not(:last-child) { margin-bottom: 1em; } .faq-a strong { color: var(--navy); font-weight: 600; } .faq-a a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); } .faq-categories { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; justify-content: center; } .faq-cat-pill { padding: 7px 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 20px; cursor: pointer; background: var(--white); transition: all 0.2s; } .faq-cat-pill.active, .faq-cat-pill:hover { color: var(--navy); border-color: var(--navy); } .faq-cat-pill.active { background: var(--navy); color: var(--white); } /* ===== CONTACT ===== */ .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } .contact-block h4 { font-size: 11px; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; font-weight: 600; } .contact-row { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--body); display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: start; } .contact-row > span:first-child { color: var(--muted); font-weight: 500; } .contact-row strong, .contact-row strong a { color: var(--navy); font-weight: 600; } .contact-row strong a:hover { color: var(--gold); } .contact-address { font-style: normal; line-height: 1.7; } .contact-form { max-width: 640px; } .form-row { margin-bottom: 18px; } .form-row label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--navy); margin-bottom: 6px; } .form-row input[type="text"], .form-row input[type="email"], .form-row textarea, .form-row select { width: 100%; padding: 11px 14px; font-size: 14px; font-family: inherit; color: var(--text); border: 1px solid var(--line); border-radius: 3px; background: var(--white); transition: border-color 0.2s; } .form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: none; border-color: var(--navy); } .form-row textarea { min-height: 140px; resize: vertical; } .form-row .form-note { font-size: 11px; color: var(--muted); margin-top: 4px; } .form-row.form-checkbox { display: flex; gap: 10px; align-items: flex-start; } .form-row.form-checkbox input { margin-top: 3px; } .form-row.form-checkbox label { font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--body); line-height: 1.5; margin: 0; } .form-submit { display: flex; gap: 12px; align-items: center; margin-top: 24px; } .form-message { padding: 14px 18px; border-radius: 4px; margin-bottom: 20px; font-size: 13px; line-height: 1.5; } .form-message.success { background: var(--green-soft); color: var(--green); border-left: 3px solid var(--green); } .form-message.error { background: #FAEAE8; color: #8A2A22; border-left: 3px solid #8A2A22; } /* Elementor contact-form submit button — match the site's gold CTA (.btn-gold). * Scoped to .elementor-form so other Elementor buttons are untouched; * !important is needed to override Elementor's per-element button styles. */ .elementor-form button[type="submit"], .elementor-form .elementor-button { background-color: var(--gold) !important; color: var(--navy-dark) !important; border: none !important; border-radius: 3px !important; padding: 12px 22px !important; width: auto !important; min-height: 0 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 600 !important; font-size: 12.5px !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; box-shadow: none !important; transition: background-color 0.2s !important; } .elementor-form button[type="submit"] .elementor-button-text { color: var(--navy-dark) !important; font-weight: 600 !important; letter-spacing: 0.3px !important; } .elementor-form button[type="submit"]:hover, .elementor-form .elementor-button:hover { background-color: #B8985A !important; color: var(--navy-dark) !important; } /* ===== FOOTER ===== */ .footer { background: var(--navy-dark); padding: 48px 0 24px; color: #B8BFD4; } .footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--section-pad-x); } .footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 32px; } .footer-logo, .footer .custom-logo { height: 44px; width: auto; margin-bottom: 16px; } .footer h6 { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; font-weight: 600; } .footer p, .footer li, .footer-address { font-size: 12.5px; color: #B8BFD4; line-height: 1.75; } .footer-address { font-style: normal; margin-top: 14px; font-size: 12px; } .footer-email { color: var(--gold) !important; } .footer ul, .footer-links { list-style: none; padding: 0; margin: 0; } .footer ul li, .footer-links li { padding: 3px 0; } .footer ul li a, .footer-links li a { color: #B8BFD4; } .footer ul li a:hover, .footer-links li a:hover { color: var(--white); } .footer-bottom { padding-top: 22px; border-top: 1px solid var(--navy-mid); display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #8E96B0; flex-wrap: wrap; gap: 12px; } .footer-bottom-right { display: flex; gap: 18px; } /* ===== STANDARD PAGES ===== */ .page-wrap { max-width: 880px; margin: 0 auto; padding: 56px var(--section-pad-x); } .page-header { margin-bottom: 32px; } .page-title { font-family: 'Source Serif 4', serif; font-size: 30px; font-weight: 500; color: var(--navy); letter-spacing: -0.3px; line-height: 1.2; } .page-content { font-size: 15px; line-height: 1.75; color: var(--body); } .page-content p, .page-content ul, .page-content ol { margin-bottom: 1em; } .page-content h2 { font-family: 'Source Serif 4', serif; font-size: 22px; color: var(--navy); margin: 1.6em 0 0.5em; font-weight: 500; } .page-content h3 { font-family: 'Source Serif 4', serif; font-size: 18px; color: var(--navy); margin: 1.4em 0 0.4em; font-weight: 500; } .page-content a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); } .page-content a:hover { color: var(--gold); } .page-content ul, .page-content ol { padding-left: 1.4em; } .page-content li { margin-bottom: 0.4em; } .page-content code { font-family: 'JetBrains Mono', monospace; font-size: 0.88em; background: var(--bg-soft); padding: 1px 5px; border-radius: 3px; color: var(--navy); } /* ===== EMISSIONS SCANDAL PAGE ===== */ .emissions-scandal .es-lede { font-family: 'Source Serif 4', serif; font-size: 19px; line-height: 1.55; color: var(--navy); margin-bottom: 4px; } /* Regulatory (Euro standard) timeline — horizontal stepped rail */ .es-euro { display: grid; grid-template-columns: repeat(4, 1fr); margin: 34px 0 42px; position: relative; } .es-euro::before { content: ''; position: absolute; left: 10px; right: 10px; top: 9px; height: 2px; background: var(--line); } .es-euro-step { position: relative; padding: 0 14px 0 0; } .es-euro-step::before { content: ''; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 2px solid var(--gold); } .es-euro-step.is-key::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.18); } .es-euro-year { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--gold); margin: 28px 0 6px; letter-spacing: 0.3px; } .es-euro-label { font-size: 12.5px; line-height: 1.45; color: var(--body); } /* "What is NOx?" callout */ .es-callout { background: var(--gold-soft); border-left: 3px solid var(--gold); border-radius: 4px; padding: 26px 30px; margin: 34px 0; } .es-callout-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .es-callout-head .es-icon { flex: 0 0 auto; color: var(--gold); } .emissions-scandal .es-callout h2 { margin: 0; font-family: 'Source Serif 4', serif; font-size: 22px; font-weight: 500; color: var(--navy); } .es-callout p { color: var(--body); } .es-callout p:not(:last-child) { margin-bottom: 0.9em; } /* Cost-of-pollution stat cards */ .es-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 24px 0 8px; } .es-stat { padding-left: 22px; border-left: 3px solid var(--gold); } .es-stat-num { font-family: 'Source Serif 4', serif; font-size: 40px; font-weight: 500; color: var(--navy); line-height: 1; } .es-stat-label { font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.45; } /* Health / environment feature cards */ .es-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin: 36px 0 8px; } .es-feature { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 28px; } .es-feature .es-fic { width: 46px; height: 46px; border-radius: 10px; background: var(--navy); color: var(--gold); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .emissions-scandal .es-feature h2 { font-family: 'Source Serif 4', serif; font-size: 19px; font-weight: 500; color: var(--navy); margin: 0 0 10px; } .es-feature p { font-size: 14px; line-height: 1.65; color: var(--body); margin: 0; } @media (max-width: 720px) { .es-euro { grid-template-columns: 1fr; } .es-euro::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; } .es-euro-step { padding: 0 0 20px 26px; } .es-euro-step::before { left: 0; } .es-euro-year { margin-top: 0; } .es-stats, .es-features { grid-template-columns: 1fr; } } .legal-meta { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); margin-bottom: 1.6em; } /* Legal/cookie tables */ .legal-table { width: 100%; border-collapse: collapse; margin: 1em 0 1.6em; font-size: 13px; } .legal-table th, .legal-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } .legal-table thead th { font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 2px solid var(--line); white-space: nowrap; } .legal-table tbody tr:hover { background: var(--bg-soft); } .legal-table td:first-child { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--navy); white-space: nowrap; } @media (max-width: 720px) { .legal-table, .legal-table thead, .legal-table tbody, .legal-table th, .legal-table td, .legal-table tr { display: block; } .legal-table thead { display: none; } .legal-table tr { border: 1px solid var(--line); border-radius: 4px; margin-bottom: 12px; padding: 6px 10px; } .legal-table td { border: 0; padding: 4px 0; } .legal-table td:first-child { white-space: normal; font-weight: 600; } } .empty-state { background: var(--bg-soft); border: 1px dashed var(--line); padding: 32px; border-radius: 4px; text-align: center; color: var(--muted); } .pagination { margin-top: 40px; display: flex; justify-content: center; gap: 8px; } .pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--line); border-radius: 3px; color: var(--navy); font-size: 13px; } .pagination .page-numbers.current { background: var(--navy); color: var(--white); border-color: var(--navy); } .hide-mobile {} .hide-desktop { display: none; } /* ===== ABOUT MISSION (pull-quote) ===== Featured opening statement on the About page. */ .about-mission { margin: 0 0 48px; padding: 28px 36px 28px 28px; background: linear-gradient(135deg, var(--gold-soft) 0%, #fbf6e1 100%); border-left: 4px solid var(--gold); border-radius: 0 6px 6px 0; position: relative; } .about-mission::before { content: '“'; position: absolute; top: -8px; left: 12px; font-family: 'Source Serif 4', serif; font-size: 96px; line-height: 1; color: var(--gold); opacity: 0.45; pointer-events: none; } .about-mission p { font-family: 'Source Serif 4', serif; font-size: 19px; line-height: 1.55; color: var(--navy-dark); font-weight: 400; font-style: italic; margin: 0; position: relative; z-index: 1; } /* ===== REMUNERATION GRID (callouts) ===== */ .dejf-remuneration { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 16px 0 28px; } .dejf-remuneration > div { padding: 18px 20px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); display: flex; flex-direction: column; gap: 6px; } .dejf-remuneration > div.is-chair { border-color: var(--gold); background: linear-gradient(135deg, var(--white) 0%, var(--gold-soft) 120%); } .dejf-remuneration dt { font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); font-weight: 600; } .dejf-remuneration dd { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 500; color: var(--navy); letter-spacing: -0.3px; } /* ===== FOUNDATION DOCUMENTS GRID ===== */ .dejf-docs { display: block; margin: 36px 0; padding: 32px; background: var(--bg-soft); border-radius: 8px; } .dejf-docs-head { margin-bottom: 24px; } .dejf-docs-head .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 6px; } .dejf-docs-head h3 { font-family: 'Source Serif 4', serif; font-size: 22px; line-height: 1.25; font-weight: 500; color: var(--navy); margin: 0; } /* Featured Articles of Association card */ .dejf-docs a.dejf-docs-featured, .dejf-docs a.dejf-docs-featured:link, .dejf-docs a.dejf-docs-featured:visited { display: grid; grid-template-columns: 56px 1fr auto; gap: 20px; align-items: center; padding: 22px 24px; background: var(--navy); color: var(--white); border-radius: 6px; text-decoration: none; transition: background 0.2s, transform 0.2s; margin-bottom: 22px; } .dejf-docs a.dejf-docs-featured:hover { background: var(--navy-dark); transform: translateY(-1px); color: var(--white); } .dejf-docs-featured svg { width: 36px; height: 36px; color: var(--gold); } .dejf-docs-featured-title { color: var(--white); } .dejf-docs-featured-eyebrow { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); font-weight: 600; } .dejf-docs-featured-title { font-family: 'Source Serif 4', serif; font-size: 20px; font-weight: 500; line-height: 1.2; margin-top: 3px; } .dejf-docs-featured-meta { font-size: 12px; color: #D8DDED; margin-top: 4px; } .dejf-docs-featured-cta { font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--gold); font-weight: 600; white-space: nowrap; } /* Current year row — visually emphasised */ .dejf-docs-current { display: grid; grid-template-columns: 110px 1fr; gap: 24px; align-items: center; padding: 20px 22px; background: var(--white); border: 1px solid var(--gold); border-radius: 6px; margin-bottom: 12px; } .dejf-docs-year { font-family: 'Source Serif 4', serif; font-size: 28px; font-weight: 500; color: var(--navy); line-height: 1; } .dejf-docs-year span { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-top: 4px; } .dejf-docs-row { display: flex; flex-wrap: wrap; gap: 8px; } .dejf-docs a.dejf-doc-pill, .dejf-docs a.dejf-doc-pill:link, .dejf-docs a.dejf-doc-pill:visited { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--gold-soft); color: var(--navy); font-size: 12px; font-weight: 600; letter-spacing: 0.3px; border-radius: 999px; text-decoration: none; transition: background 0.2s, color 0.2s; } .dejf-docs a.dejf-doc-pill:hover { background: var(--navy); color: var(--white); } .dejf-doc-pill .dejf-doc-arrow { color: var(--gold); transition: transform 0.2s; } .dejf-docs a.dejf-doc-pill:hover .dejf-doc-arrow { color: var(--gold); transform: translateX(2px); } /* Previous-years archive */ .dejf-docs-archive { margin-top: 10px; } .dejf-docs-archive-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 18px 0 10px; } .dejf-docs-archive-row { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 12px 16px; border-radius: 4px; transition: background 0.2s; } .dejf-docs-archive-row:hover { background: var(--white); } .dejf-docs-archive-row + .dejf-docs-archive-row { margin-top: 2px; } .dejf-docs-year-mini { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 500; color: var(--navy); } .dejf-docs-archive-row .dejf-docs-row a { font-size: 13px; color: var(--navy); border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.2s; } .dejf-docs-archive-row .dejf-docs-row a + a { margin-left: 10px; } .dejf-docs-archive-row .dejf-docs-row a:hover { color: var(--gold); border-bottom-color: var(--gold); } /* ===== ABOUT CONTACT (final address block) ===== */ .dejf-about-contact { display: inline-block; margin-top: 12px; padding: 18px 22px; background: var(--white); border-left: 3px solid var(--gold); border-radius: 0 4px 4px 0; font-size: 14px; line-height: 1.65; } .dejf-about-contact strong { color: var(--navy); font-weight: 600; } @media (max-width: 880px) { .dejf-remuneration { grid-template-columns: 1fr 1fr; } .dejf-docs-featured { grid-template-columns: 1fr; text-align: left; } .dejf-docs-featured-cta { text-align: left; } .dejf-docs-current { grid-template-columns: 1fr; gap: 12px; } .dejf-docs-archive-row { grid-template-columns: 1fr; gap: 6px; padding: 14px; } .dejf-docs-archive-row:hover { background: var(--white); } } /* ===== ABOUT PROSE ===== Used inside the text-editor widget on the About page. No max-width cap so paragraphs fill the container (the board sections beneath are full- container too — consistent gutter). */ .about-prose h2 { font-family: 'Source Serif 4', serif; font-size: 26px; font-weight: 500; color: var(--navy); letter-spacing: -0.3px; line-height: 1.25; margin: 32px 0 14px; } .about-prose h2:first-child { margin-top: 0; } .about-prose p { font-size: 15px; line-height: 1.7; color: var(--body); margin: 0 0 14px; } .about-prose p:last-child { margin-bottom: 0; } .about-prose strong { color: var(--navy); font-weight: 600; } .about-prose a { color: var(--navy); border-bottom: 1px solid var(--gold); } .about-prose a:hover { color: var(--gold); } .about-prose address { font-size: 15px; line-height: 1.7; color: var(--body); } /* ===== BOARD (About page — directors vs supervisory) ===== Two distinct visual treatments to give the page hierarchy: .dejf-board-directors — editorial featured rows, big portrait + bio .dejf-board-supervisory — compact 3-up grid, circular portraits Both share .dejf-board / .board-card primitives. */ .dejf-board { margin: 56px 0; } .dejf-board .board-section-head { margin-bottom: 32px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .dejf-board .board-section-head .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); font-weight: 500; } .dejf-board .board-section-head h2 { font-family: 'Source Serif 4', serif; font-size: 28px; font-weight: 500; color: var(--navy); letter-spacing: -0.3px; margin: 0; } .dejf-board .board-section-head .head-rule { flex: 1 0 80px; height: 1px; background: var(--line); align-self: center; } /* ── Directors: featured horizontal cards ───────────────────────── */ .dejf-board-directors .board-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } .dejf-board-directors .board-card { display: grid; grid-template-columns: 160px 1fr; gap: 32px; padding: 28px; background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 4px; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .dejf-board-directors .board-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -12px rgba(31,42,80,0.18); border-color: var(--navy); } .dejf-board-directors .board-portrait { width: 160px; height: 200px; overflow: hidden; border-radius: 3px; background: var(--bg-soft); box-shadow: 0 1px 0 var(--line); } .dejf-board-directors .board-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.92); } .dejf-board-directors .board-content { display: flex; flex-direction: column; } .dejf-board-directors .board-role { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 8px; } .dejf-board-directors .board-name { font-family: 'Source Serif 4', serif; font-size: 20px; line-height: 1.25; font-weight: 500; color: var(--navy); margin: 0 0 14px; } .dejf-board-directors .board-bio { margin: 0; } .dejf-board-directors .board-bio p { font-size: 14px; line-height: 1.65; color: var(--body); margin: 0 0 10px; } .dejf-board-directors .board-bio p:last-child { margin-bottom: 0; } /* ── Supervisory: compact 3-up grid, circular portraits ─────────── */ .dejf-board-supervisory .board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .dejf-board-supervisory .board-card { background: var(--bg-soft); border-radius: 4px; padding: 32px 24px; text-align: center; transition: transform 0.2s, background 0.2s; } .dejf-board-supervisory .board-card:hover { transform: translateY(-2px); background: var(--gold-soft); } .dejf-board-supervisory .board-portrait { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 18px; overflow: hidden; background: var(--white); box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--gold); } .dejf-board-supervisory .board-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } .dejf-board-supervisory .board-role { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--amber); font-weight: 600; margin-bottom: 6px; } .dejf-board-supervisory .board-name { font-family: 'Source Serif 4', serif; font-size: 16px; line-height: 1.3; font-weight: 500; color: var(--navy); margin: 0 0 12px; } .dejf-board-supervisory .board-bio { font-size: 13px; line-height: 1.6; color: var(--body); margin: 0; } @media (max-width: 880px) { .dejf-board-directors .board-card { grid-template-columns: 120px 1fr; gap: 22px; padding: 22px; } .dejf-board-directors .board-portrait { width: 120px; height: 150px; } .dejf-board-supervisory .board-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .dejf-board-directors .board-card { grid-template-columns: 1fr; } .dejf-board-directors .board-portrait { width: 140px; height: 170px; margin: 0 auto; } .dejf-board-directors .board-content { text-align: center; align-items: center; } .dejf-board-supervisory .board-grid { grid-template-columns: 1fr; } } /* ===== COOKIE CONSENT BANNER ===== */ .dejf-cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: var(--navy-dark); color: #E6E9F2; box-shadow: 0 -8px 30px -12px rgba(0,0,0,0.5); border-top: 2px solid var(--gold); transform: translateY(0); transition: transform 0.3s ease, opacity 0.3s ease; } .dejf-cookie-banner.is-dismissed { transform: translateY(100%); opacity: 0; } .dejf-cookie-inner { max-width: var(--max-width); margin: 0 auto; padding: 16px var(--section-pad-x); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: space-between; } .dejf-cookie-text { font-size: 13px; line-height: 1.6; margin: 0; max-width: 760px; color: #D8DDED; } .dejf-cookie-text a { color: var(--gold); border-bottom: 1px solid transparent; } .dejf-cookie-text a:hover { border-bottom-color: var(--gold); } .dejf-cookie-actions { display: flex; gap: 10px; flex-shrink: 0; } .dejf-cookie-btn { font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0.3px; padding: 10px 18px; border-radius: 3px; cursor: pointer; border: 1px solid transparent; transition: background 0.2s, border-color 0.2s, color 0.2s; } .dejf-cookie-decline { background: transparent; color: #E6E9F2; border-color: rgba(255,255,255,0.35); } .dejf-cookie-decline:hover { border-color: var(--white); } .dejf-cookie-accept { background: var(--gold); color: var(--navy-dark); } .dejf-cookie-accept:hover { background: #B8985A; } @media (max-width: 720px) { .dejf-cookie-inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px var(--section-pad-x); } .dejf-cookie-actions { justify-content: stretch; } .dejf-cookie-btn { flex: 1; } } /* ===== RESPONSIVE ===== */ @media (max-width: 980px) { :root { --section-pad-x: 32px; } .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; } .lawsuits { grid-template-columns: 1fr; } .contact { grid-template-columns: 1fr; gap: 32px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .eligibility-grid { grid-template-columns: 1fr; } .status-panel-inner { grid-template-columns: 1fr; gap: 24px; } .hero h1 { font-size: 28px; } .case-header h1 { font-size: 26px; } .section h2 { font-size: 24px; } /* Lawsuit cards become a real accordion: only .lawsuit-body's native * [open] visibility applies, so tapping the summary expands/collapses * it; the stretched-link (full-card navigation) is desktop-only here, * replaced by the explicit "View case" link inside the body. */ .lawsuit-stretched-link { display: none !important; } .lawsuit-chevron { display: block; } .lawsuit-summary { padding-right: 34px; } } @media (max-width: 720px) { :root { --section-pad-x: 20px; } .hide-mobile { display: none; } .hide-desktop { display: block; } .utility-inner { font-size: 10px; } .utility-left { gap: 10px; } .utility-right { gap: 4px; } .utility-login { display: none; } .nav { padding: 14px var(--section-pad-x); } .logo-img, .custom-logo { height: 40px; } .primary-nav { display: none; } .primary-nav.is-open { display: block; position: fixed; top: 70px; left: 0; right: 0; bottom: 0; background: var(--navy-dark); padding: 24px var(--section-pad-x); z-index: 99; overflow-y: auto; } .primary-nav.is-open .nav-items { flex-direction: column; gap: 0; align-items: stretch; } .primary-nav.is-open .nav-items > li { border-bottom: 1px solid var(--navy-mid); } .primary-nav.is-open .nav-items > li > a { display: block; padding: 16px 0; font-size: 14px; } .nav-toggle { display: block; } .hero { padding: 32px var(--section-pad-x) 28px; } .hero h1 { font-size: 24px; } .hero p { font-size: 13px; } .stats { padding: 24px var(--section-pad-x); } .stats-inner { grid-template-columns: 1fr 1fr; gap: 16px; } .stat-num { font-size: 24px; } .news-tl-item .timeline-body { font-size: 13.5px; } .news-year { font-size: 12px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-bottom { flex-direction: column; align-items: flex-start; } .contact-row { grid-template-columns: 1fr; gap: 4px; } .glance-row { grid-template-columns: 1fr; gap: 2px; } .page-title, .case-header h1 { font-size: 24px; } .vehicles-grid { grid-template-columns: 1fr; } } /* ===== ELEMENTOR COMPATIBILITY ===== Active only when the elementor plugin is detected on the page. The DEJF section template-parts already use their own .section-inner wrapper for max-width centering, so we just need to make sure they sit edge-to-edge inside whatever Elementor container wraps them. */ .page-home > .section, .page-home > .cta-band, .page-home > .hero, .page-home > .stats, .elementor-widget-shortcode > .elementor-widget-container > .section, .elementor-widget-shortcode > .elementor-widget-container > .cta-band, .elementor-widget-shortcode > .elementor-widget-container > .hero, .elementor-widget-shortcode > .elementor-widget-container > .stats { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Elementor canvas template: drop body padding/margins it may inherit */ body.elementor-canvas { margin: 0; padding: 0; background: var(--white); } body.elementor-canvas .utility, body.elementor-canvas .site-header, body.elementor-canvas .footer { display: none; } /* When Elementor edits the page, suppress the theme's homepage padding */ body.elementor-editor-active .page-home, body.elementor-preview .page-home { padding: 0; } /* --------------------------------------------------------------------------- Print (CR-008) Screen chrome is white-on-navy; on paper the navy usually drops out, which would leave the white logo and nav invisible. Force a light header/footer, dark text, and let the source swap in the black logo. Nav, utility bar and the mobile toggle are noise on paper. --------------------------------------------------------------------------- */ @media print { .utility, .primary-nav, .nav-toggle, .skip-link, .footer .footer-grid > div:not(:first-child), .footer-bottom-right { display: none !important; } .site-header, .footer { position: static !important; background: #fff !important; color: var(--navy) !important; box-shadow: none !important; } .site-header a, .footer, .footer a, .footer h6, .footer p, .footer-address, .footer-email, .footer-bottom { color: var(--navy) !important; } .logo-img, .custom-logo, .footer-logo { height: 48px !important; width: auto !important; } a[href]::after { content: none !important; } }