/* ========================================================================== T&D Law Firm - Design tokens Brand colors (green + gray) are the client's actual identity, kept as-is. Typeface pairing supports Cyrillic (EN/BG bilingual site): Lora + PT Sans. ========================================================================== */ /* Fonts are now loaded via a tag in includes/header.php (with preconnect hints) rather than @import here, since @import delays font discovery until after this stylesheet itself has loaded. */ :root { /* Brand */ --color-green: #8DC63F; /* decorative / large surfaces only - fails AA for small text on white */ --color-green-text: #5C8A22; /* darker variant, safe for text/links/icons on white */ --color-charcoal: #262626; --color-charcoal-soft: #4A4A4A; --color-gray-mid: #6E6E6E; /* AA-safe secondary text on white */ --color-gray-bg: #F5F5F5; --color-gray-border: #E2E2E2; --color-white: #FFFFFF; /* Semantic */ --color-bg: var(--color-white); --color-text: var(--color-charcoal); --color-text-muted: var(--color-gray-mid); --color-accent: var(--color-green-text); --color-accent-bg: var(--color-green); --color-surface-alt: var(--color-gray-bg); --color-border: var(--color-gray-border); --color-link: var(--color-green-text); --color-focus: #1a5fb4; /* Type */ --font-display: 'Lora', 'Noto Serif', serif; --font-body: 'PT Sans', 'Noto Sans', sans-serif; --container-width: 1180px; } /* High-contrast / accessibility mode: swapped via JS toggle on */ html[data-contrast="high"] { --color-bg: #FFFFFF; --color-text: #000000; --color-text-muted: #000000; --color-accent: #000000; --color-accent-bg: #000000; --color-surface-alt: #FFFFFF; --color-border: #000000; --color-link: #000000; } html[data-contrast="high"] a { text-decoration: underline; } html[data-contrast="high"] img { filter: grayscale(100%); } html[data-contrast="high"] .hero-slide { filter: grayscale(100%); } /* The normal tile overlay is a gradient that's only reliably dark near the very bottom - fine for a short one-line caption, but a longer title that wraps to two lines pushes its first line up into the lighter part of the gradient, where a bright photo underneath can leave the white text with poor contrast. High-contrast mode needs a stronger guarantee - but a flat, fully opaque overlay across the WHOLE tile (an earlier version of this fix) made every photo look almost entirely blacked out, which is a problem of its own. This keeps the top ~30% of the tile visibly lighter, and makes the rest reliably dark enough for a wrapped two-line caption. */ html[data-contrast="high"] .practice-tile::before, html[data-contrast="high"] .business-tile::before { background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.9) 100%); } /* Same reasoning as above: the hero slider's three mottos are different lengths, and its overlay is a left-to-right gradient rather than a flat scrim - a longer motto wrapping further left could push text into the lighter part of it. */ html[data-contrast="high"] .hero-slide::before { background: linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.9) 100%); } /* Separate, pre-existing bug this surfaced: on hover, tile captions switch to var(--color-accent-bg) for a highlight color - but that variable is remapped to black for high-contrast mode (appropriate elsewhere on the site), so hovering a tile made its own caption text turn invisible against the tile's own dark overlay. Keep it white specifically here. */ html[data-contrast="high"] .practice-tile:hover span, html[data-contrast="high"] .business-tile:hover span { color: #fff; } /* ========================================================================== Reset & base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.6; font-size: 16px; } /* Compensates for the sticky header when jumping straight to an anchor (skip link, or the "Contact this attorney" buttons that link to #contact-form) - otherwise the target lands partly hidden underneath it. --header-height is measured and kept current by JS; this fallback only matters before that first runs. */ #main-content, #contact-form { scroll-margin-top: var(--header-height, 96px); } /* Back to top button - hidden until the person has scrolled down enough that returning to the header by hand would be inconvenient. */ .back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-charcoal); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--color-green-text); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.25; color: var(--color-charcoal); margin: 0 0 0.6em; } html[data-contrast="high"] h1, html[data-contrast="high"] h2, html[data-contrast="high"] h3, html[data-contrast="high"] h4 { color: #000; } h1 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); } h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); } h3 { font-size: 1.2rem; } p { margin: 0 0 1em; } a { color: var(--color-link); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } ul { padding-left: 1.2em; } /* Visible focus states everywhere - important for keyboard users */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 5px var(--color-focus); border-radius: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--color-charcoal); color: #fff; padding: 0.75em 1.2em; } .skip-link:focus { left: 0; } .wrap { max-width: var(--container-width); margin: 0 auto; padding: 0 1.25rem; } .section { padding: 3.5rem 0; } .section.alt-bg { background: var(--color-surface-alt); } .section-title { text-align: center; max-width: 760px; margin: 0 auto 2.5rem; } .section-title .lead { color: var(--color-text-muted); } .lead { font-size: 1.05rem; color: var(--color-text-muted); } .btn { display: inline-block; padding: 0.7em 1.6em; border-radius: 2px; font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; border: 2px solid transparent; cursor: pointer; text-decoration: none; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .btn-primary:hover { background: var(--color-charcoal); border-color: var(--color-charcoal); } html[data-contrast="high"] .btn-primary { background: #000; color: #fff; } .btn-outline { background: transparent; color: var(--color-accent); border-color: var(--color-accent); } .btn-outline:hover { background: var(--color-accent); color: #fff; } .btn-block { display: block; text-align: center; width: 100%; margin-top: 1rem; } /* ========================================================================== Header / Nav ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--color-white); transition: box-shadow 0.2s ease; } .site-header.is-scrolled { box-shadow: 0 2px 10px rgba(0,0,0,0.12); } .topbar { background: var(--color-gray-bg); font-size: 0.85rem; color: var(--color-text-muted); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1.25rem; transition: padding 0.2s ease; } .site-header.is-scrolled .topbar-inner { padding: 0.3rem 1.25rem; } .topbar-phone { color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 0.4em; } .topbar-right { display: flex; align-items: center; gap: 1.2rem; } .lang-switch a { color: var(--color-text-muted); padding: 0 0.2em; } .lang-switch a.active { color: var(--color-accent); font-weight: 700; } .contrast-toggle { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-border); border-radius: 50%; width: 28px; height: 28px; padding: 0; cursor: pointer; color: var(--color-text-muted); } .contrast-toggle:hover { color: var(--color-charcoal); border-color: var(--color-charcoal); } .contrast-toggle[aria-pressed="true"] { background: var(--color-charcoal); color: #fff; border-color: var(--color-charcoal); } .main-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.25rem; gap: 1.5rem; transition: padding 0.2s ease; } .site-header.is-scrolled .main-nav-inner { padding: 0.5rem 1.25rem; } .logo { display: flex; align-items: center; gap: 0.6rem; } .logo img { height: 55px; width: auto; display: block; transition: height 0.2s ease; } .site-header.is-scrolled .logo img { height: 40px; } .logo-text { display: flex; flex-direction: column; line-height: 1.1; } .logo-td { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-charcoal); } .logo-sub { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); } .primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.6rem; } .primary-nav > ul > li { position: relative; } .primary-nav > ul > li > a { color: var(--color-charcoal); font-weight: 700; font-size: 0.95rem; padding: 0.5rem 0; display: inline-block; } .primary-nav > ul > li > a:hover { color: var(--color-accent); text-decoration: none; } .primary-nav .dropdown { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--color-border); min-width: 260px; flex-direction: column; gap: 0; padding: 0.5rem 0; box-shadow: 0 8px 20px rgba(0,0,0,0.08); z-index: 20; } .primary-nav li.has-children:hover .dropdown, .primary-nav li.has-children:focus-within .dropdown { display: flex; } .primary-nav .dropdown li a { padding: 0.5rem 1.2rem; display: block; font-weight: 400; } .primary-nav .dropdown li a:hover { background: var(--color-surface-alt); text-decoration: none; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; } .hamburger, .hamburger::before, .hamburger::after { display: block; width: 24px; height: 2px; background: var(--color-charcoal); position: relative; } .hamburger::before, .hamburger::after { content: ''; position: absolute; left: 0; } .hamburger::before { top: -7px; } .hamburger::after { top: 7px; } @media (max-width: 880px) { .nav-toggle { display: inline-flex; align-items: center; } .primary-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid var(--color-border); box-shadow: 0 10px 20px rgba(0,0,0,0.08); } .primary-nav.is-open { display: block; } .primary-nav ul { flex-direction: column; gap: 0; padding: 0.5rem 0; } .primary-nav > ul > li > a { padding: 0.8rem 1.25rem; width: 100%; } .primary-nav .dropdown { position: static; border: none; box-shadow: none; display: none; padding-left: 1rem; } .primary-nav li.has-children.is-open .dropdown { display: flex; } } /* ========================================================================== Hero slider ========================================================================== */ .hero-slider { position: relative; height: 62vh; min-height: 340px; max-height: 560px; overflow: hidden; background: var(--color-charcoal); } .hero-slides { position: relative; width: 100%; height: 100%; } .hero-slide { position: absolute; inset: 0; margin: 0; background-size: cover; background-position: center right; display: flex; align-items: center; justify-content: flex-end; opacity: 0; transition: opacity 1s ease; } .hero-slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55)); } .hero-slide.is-active { opacity: 1; z-index: 1; } .hero-slide figcaption { position: relative; z-index: 2; color: #fff; text-align: right; max-width: 560px; padding: 0 3rem; } .hero-slide .motto { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 2rem); margin: 0; } .hero-slide .translation { font-size: 1rem; opacity: 0.85; margin-top: 0.5rem; } .hero-controls { position: absolute; bottom: 1rem; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 1rem; z-index: 3; } .hero-prev, .hero-next { background: rgba(255,255,255,0.15); color: #fff; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; } .hero-prev:hover, .hero-next:hover { background: var(--color-accent-bg); } .hero-dots { display: flex; gap: 0.5rem; } .hero-dots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.5); border: none; cursor: pointer; padding: 0; } .hero-dots button.is-active { background: #fff; } @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } } /* ========================================================================== Page title band (inner pages) ========================================================================== */ .page-title-band { background: url("/images/page-header.jpg") var(--color-charcoal); background-size: cover; background-position: center; color: #fff; text-align: center; padding: 3.5rem 0 2.5rem; } .page-title-band h1 { color: #fff; margin-bottom: 0.6rem; } .page-title-band h1::after { content: ''; display: block; width: 60px; height: 3px; background: var(--color-accent-bg); margin: 0.7rem auto 0; } .breadcrumb { list-style: none; display: flex; justify-content: center; gap: 0.4rem; padding: 0; margin: 1rem 0 0; font-size: 0.9rem; } .breadcrumb li:not(:last-child)::after { content: '/'; margin-left: 0.4rem; color: rgba(255,255,255,0.5); } .breadcrumb a { color: rgba(255,255,255,0.85); } .breadcrumb li[aria-current] { color: var(--color-accent-bg); } /* High-contrast mode overrides: this band always sits on a dark background, so it needs the opposite of the generic "force headings to black" rule - and a guaranteed-solid background rather than relying on the photo/gradient. */ html[data-contrast="high"] .page-title-band { background: #000; } html[data-contrast="high"] .page-title-band h1 { color: #fff; } html[data-contrast="high"] .page-title-band h1::after { background: #fff; } /* ========================================================================== Team cards ========================================================================== */ .welcome-grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 260px)) 1fr; gap: 2rem; align-items: start; } .about-grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 260px)) 1fr; gap: 2rem; align-items: start; } .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.75rem; margin-bottom: 2.5rem; } .group-heading { border-bottom: 2px solid var(--color-border); padding-bottom: 0.5rem; margin-top: 2.5rem; } .group-heading:first-of-type { margin-top: 0; } .team-card { background: #fff; border: 1px solid var(--color-border); } .team-card-photo img { width: 100%; aspect-ratio: 4 / 4.7; object-fit: cover; } .team-card-body { padding: 1rem 1.1rem 1.3rem; } .team-card-body h3 { margin-bottom: 0.15em; font-size: 1.05rem; } .team-card .designation { display: block; color: var(--color-accent); font-weight: 700; font-size: 0.85rem; margin-bottom: 0.6em; } .team-card-intro { font-size: 0.88rem; color: var(--color-text-muted); margin-bottom: 1rem; } @media (max-width: 880px) { .welcome-grid, .about-grid { grid-template-columns: 1fr; } } /* ========================================================================== Practice / Business grids ========================================================================== */ .practice-grid, .business-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; } .practice-tile, .business-tile { position: relative; display: flex; align-items: flex-end; min-height: 160px; overflow: hidden; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; background: var(--color-charcoal); /* shows while an image loads, or if one is missing */ } .practice-tile img, .business-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .practice-tile::before, .business-tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,0.1), rgba(20,20,20,0.75)); z-index: 1; } .practice-tile span, .business-tile span { position: relative; z-index: 2; padding: 1rem; } .practice-tile:hover, .business-tile:hover { text-decoration: none; } .practice-tile:hover span, .business-tile:hover span { color: var(--color-accent-bg); } /* ========================================================================== Detail pages (practice / business) ========================================================================== */ .detail-grid { display: grid; grid-template-columns: 2.3fr 1fr; gap: 3rem; align-items: start; } .detail-hero-image { width: 100%; margin-bottom: 1.5rem; } .sidebar-heading { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--color-border); padding-bottom: 0.5rem; } .sidebar-list { list-style: none; padding: 0; margin: 0 0 2rem 0; } .sidebar-list li { border-bottom: 1px solid var(--color-border); } .sidebar-list a { display: block; padding: 0.6rem 0.2rem; } .sidebar-list li.current a { color: var(--color-accent); font-weight: 700; } .intro-copy { max-width: 900px; margin-bottom: 2rem; } @media (max-width: 880px) { .detail-grid { grid-template-columns: 1fr; } } /* ========================================================================== Team member single profile ========================================================================== */ .person-detail-grid { display: grid; grid-template-columns: 260px 1.6fr 1fr; gap: 2.5rem; align-items: start; } .person-single .team-card-body h2 { font-size: 1.2rem; margin-bottom: 0.1em; } .info-heading { font-size: 1.05rem; margin-top: 1.6em; } .check-list { list-style: none; padding: 0; } .check-list li { position: relative; padding-left: 1.3em; margin-bottom: 0.5em; } .check-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; } .person-title-line { font-weight: 700; color: var(--color-text-muted); } @media (max-width: 980px) { .person-detail-grid { grid-template-columns: 1fr; } } /* ========================================================================== Motto carousel (About Us bottom strip) ========================================================================== */ .motto-carousel { position: relative; min-height: 120px; text-align: center; } .motto-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; } .motto-slide.is-active { position: relative; opacity: 1; } .motto-slide h2 { font-style: italic; } .motto-slide p { color: var(--color-text-muted); } /* ========================================================================== Contacts ========================================================================== */ .contacts-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; } .contacts-form form { display: flex; flex-direction: column; gap: 1rem; } .form-group label { display: block; font-weight: 700; margin-bottom: 0.3em; font-size: 0.9rem; } .form-group input, .form-group textarea { width: 100%; padding: 0.65em 0.8em; border: 1px solid var(--color-border); border-radius: 2px; font-family: var(--font-body); font-size: 1rem; background: #fff; color: var(--color-text); } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-message { padding: 0.9rem 1.1rem; border-radius: 4px; margin-bottom: 1rem; font-size: 0.95rem; border: 1px solid transparent; } .form-message.success { background: #e8f5e0; color: #2f5e0f; border-color: #b8dc9a; } .form-message.error { background: #fbe9e7; color: #7a201a; border-color: #eab8b3; } @media (max-width: 880px) { .contacts-grid { grid-template-columns: 1fr; } } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--color-gray-border); border-top: 1px solid var(--color-border); padding: 1.5rem 0; /*margin-top: 2rem*/; } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.9rem; color: var(--color-text-muted); } .footer-inner nav ul { list-style: none; display: flex; gap: 1.2rem; margin: 0; padding: 0; } /* ========================================================================== Misc ========================================================================== */ .placeholder-notice { background: #FFF7E6; border: 1px solid #F0D48A; padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.95rem; } .sitemap-list, .sitemap-list ul { list-style: none; padding-left: 1.2rem; } .sitemap-list > li { margin-bottom: 0.6rem; font-weight: 700; } .sitemap-list ul { font-weight: 400; margin-top: 0.4rem; }