/* ========================================================================== Theme tokens. Defined here because chrome.css is the one stylesheet loaded by BOTH shells — base.html and the raw home-page export — so these names are available to base.css, the page stylesheets and the home page's inline styles alike. Dark is the default; `data-theme="light"` on switches the palette. The attribute is set before first paint by an inline script in , so there is no flash of the wrong theme. ========================================================================== */ :root { color-scheme: dark; /* Grounds and surfaces */ --bg: #0a0a0a; --bg-deep: #0c0c0c; --surface: #161513; --surface-2: #1f1e1c; --surface-3: #232120; --surface-glass: rgba(30, 28, 26, 0.35); --surface-panel: rgba(19, 18, 17, 0.72); --surface-faint: rgba(255, 255, 255, 0.04); /* Hairlines */ --line-10: rgba(255, 255, 255, 0.1); --line-12: rgba(255, 255, 255, 0.12); --line-14: rgba(255, 255, 255, 0.14); --line-16: rgba(255, 255, 255, 0.16); --line-18: rgba(255, 255, 255, 0.18); --line-20: rgba(255, 255, 255, 0.2); --line-30: rgba(255, 255, 255, 0.3); --line-40: rgba(255, 255, 255, 0.4); /* Text */ --text: #f5f1ec; --text-85: rgba(245, 241, 236, 0.85); --text-70: rgba(245, 241, 236, 0.7); --text-60: rgba(245, 241, 236, 0.6); --text-50: rgba(245, 241, 236, 0.5); --text-40: rgba(245, 241, 236, 0.4); /* Accent. --accent and --accent-hi are used for TEXT as well as fills, so the light theme darkens them for contrast while fills keep the vivid brand orange through --grad-accent. */ --accent: #ff6a00; --accent-hi: #ff9a3d; --accent-pale: #ffd9a8; --accent-deep: #d94e00; --accent-ink: #1c1006; --ink: #17130f; --accent-soft: rgba(255, 106, 0, 0.13); --accent-line: rgba(255, 106, 0, 0.42); --grad-accent: linear-gradient(145deg, #ff9a3d, #ff6a00 65%, #d94e00); --grad-text: linear-gradient(100deg, #ffd9a8 0%, #ff9a3d 35%, #ff6a00 70%); --grad-btn: linear-gradient(135deg, #ff9a3d, #ff6a00 70%); /* Depth */ --glow: 0 6px 16px rgba(255, 106, 0, 0.35); --glow-lg: 0 10px 30px rgba(255, 106, 0, 0.45); --shadow-card: 0 18px 40px -22px rgba(255, 106, 0, 0.55); --shadow-deep: 0 30px 60px -30px rgba(0, 0, 0, 0.9); /* Haloes keep light text legible over the animated backdrop; on a light ground they would only smudge, so the light theme drops them. */ --halo-lg: 0 2px 10px rgba(0, 0, 0, 0.85), 0 0 24px rgba(0, 0, 0, 0.6); --halo-sm: 0 2px 8px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 0, 0, 0.6); /* Chrome-specific */ --ch-header-bg: rgba(10, 10, 10, 0.82); --ch-header-bg-scrolled: rgba(10, 10, 10, 0.94); --ch-header-line: rgba(255, 255, 255, 0.09); --ch-header-line-scrolled: rgba(255, 255, 255, 0.14); --ch-header-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.95); --ch-panel-bg: rgba(10, 10, 10, 0.98); --ch-mark-bg: linear-gradient(150deg, rgba(255, 154, 61, 0.22), rgba(255, 106, 0, 0.08)); --ch-scrim: rgba(6, 6, 6, 0.82); /* Page-level surfaces that need a per-theme value */ --case-scrim: linear-gradient(to bottom, rgba(10, 10, 10, 0.35) 0%, rgba(10, 10, 10, 0) 35%, rgba(10, 10, 10, 0.15) 70%, rgba(19, 18, 17, 0.9) 100%); --chip-scrim: rgba(12, 12, 12, 0.78); --hero-veil: linear-gradient(to bottom, rgba(12, 12, 12, 0.15) 0%, rgba(12, 12, 12, 0.4) 55%, rgba(12, 12, 12, 0.1) 100%); --card-edge: rgba(12, 12, 12, 0.08); --phone-shell: #171614; /* Decorative */ --dot-grid: #3a352c; } :root[data-theme="light"] { color-scheme: light; --bg: #f4f1ec; --bg-deep: #ffffff; --surface: #ffffff; --surface-2: #fbf8f3; --surface-3: #f1ece4; --surface-glass: rgba(255, 255, 255, 0.66); --surface-panel: rgba(255, 255, 255, 0.78); --surface-faint: rgba(23, 19, 15, 0.03); --line-10: rgba(23, 19, 15, 0.1); --line-12: rgba(23, 19, 15, 0.11); --line-14: rgba(23, 19, 15, 0.13); --line-16: rgba(23, 19, 15, 0.15); --line-18: rgba(23, 19, 15, 0.16); --line-20: rgba(23, 19, 15, 0.18); --line-30: rgba(23, 19, 15, 0.26); --line-40: rgba(23, 19, 15, 0.34); --text: #17130f; /* Dark ink on a light ground fades faster than light ink on a dark one, so the muted steps carry more alpha here: at 0.52 the footer's small print measured 3.6:1, under the 4.5:1 it needs. */ --text-85: rgba(23, 19, 15, 0.88); --text-70: rgba(23, 19, 15, 0.78); --text-60: rgba(23, 19, 15, 0.7); --text-50: rgba(23, 19, 15, 0.66); --text-40: rgba(23, 19, 15, 0.6); --accent: #cf5200; --accent-hi: #a63f00; --accent-pale: #8f3600; --accent-deep: #7a2f00; --accent-soft: rgba(255, 106, 0, 0.1); --accent-line: rgba(207, 82, 0, 0.32); --grad-text: linear-gradient(100deg, #8f3600 0%, #cf5200 42%, #ff6a00 92%); --glow: 0 6px 16px rgba(207, 82, 0, 0.28); --glow-lg: 0 10px 26px rgba(207, 82, 0, 0.36); --shadow-card: 0 18px 36px -22px rgba(23, 19, 15, 0.3); --shadow-deep: 0 24px 50px -28px rgba(23, 19, 15, 0.4); --halo-lg: none; --halo-sm: none; --ch-header-bg: rgba(248, 245, 240, 0.86); --ch-header-bg-scrolled: rgba(248, 245, 240, 0.96); --ch-header-line: rgba(23, 19, 15, 0.1); --ch-header-line-scrolled: rgba(23, 19, 15, 0.15); --ch-header-shadow: 0 12px 28px -20px rgba(23, 19, 15, 0.35); --ch-panel-bg: rgba(250, 247, 243, 0.99); --ch-mark-bg: linear-gradient(150deg, rgba(255, 154, 61, 0.3), rgba(255, 106, 0, 0.12)); --ch-scrim: rgba(40, 33, 26, 0.55); --case-scrim: linear-gradient(to bottom, rgba(23, 19, 15, 0.18) 0%, rgba(23, 19, 15, 0) 30%, rgba(23, 19, 15, 0.04) 70%, rgba(255, 255, 255, 0.92) 100%); --chip-scrim: rgba(255, 255, 255, 0.9); --hero-veil: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.55) 55%, rgba(255, 255, 255, 0.15) 100%); --card-edge: rgba(23, 19, 15, 0.14); --phone-shell: #2b2622; --dot-grid: #d9d0c2; } /* The toggle swaps a whole palette at once; a short tint transition keeps that from reading as a page reload. Motion-sensitive visitors get the instant switch instead. */ @media (prefers-reduced-motion: no-preference) { :root.theme-switching body, :root.theme-switching .site-header, :root.theme-switching .site-footer, :root.theme-switching .card, :root.theme-switching .panel, :root.theme-switching .step, :root.theme-switching .faq-item { transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease; } } /* ========================================================================== Site chrome — header and footer. Loaded by base.html AND by the home page (a Claude Design .dc.html export with its own inline styles). Keeping the chrome in one file is what stops the two from drifting apart, so everything here is scoped to .site-header / .site-footer and never styles bare elements: the home page sets its own global `a` and heading rules, and this file has to survive them. ========================================================================== */ .site-header, .site-footer { --ch-text: var(--text); --ch-dim: var(--text-70); --ch-faint: var(--text-50); --ch-line: var(--ch-header-line); --ch-accent: var(--accent); --ch-accent-hi: var(--accent-hi); --ch-gutter: clamp(20px, 5vw, 64px); font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } .site-header *, .site-footer * { box-sizing: border-box; } .chrome-container { max-width: 1180px; margin: 0 auto; padding: 0 var(--ch-gutter); width: 100%; } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 60; background: var(--ch-header-bg); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--ch-header-line); transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* Denser once the page moves, so the bar separates from content that scrolls under it without being heavy at rest. */ .site-header.is-scrolled { background: var(--ch-header-bg-scrolled); border-bottom-color: var(--ch-header-line-scrolled); box-shadow: var(--ch-header-shadow); } .site-header .bar { display: flex; align-items: center; gap: 30px; padding-top: 14px; padding-bottom: 14px; position: relative; } /* ---------- Brand ---------- */ .site-header .brand, .site-footer .brand { display: inline-flex; align-items: center; gap: 11px; flex: none; text-decoration: none; color: var(--ch-text); } .brand-mark { position: relative; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--ch-mark-bg); border: 1px solid var(--accent-line); flex: none; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .brand-mark img { width: 20px; height: 20px; display: block; } .site-header .brand:hover .brand-mark, .site-footer .brand:hover .brand-mark { border-color: rgba(255, 106, 0, 0.7); box-shadow: 0 0 18px rgba(255, 106, 0, 0.35); transform: translateY(-1px); } .brand-name { font-weight: 700; font-size: 20px; letter-spacing: 0.01em; color: var(--ch-text); line-height: 1; } /* ---------- Desktop navigation ---------- */ .main-nav { display: flex; align-items: center; gap: 4px; flex: 1; } .main-nav a { position: relative; padding: 8px 2px; margin: 0 10px; font-size: 15px; font-weight: 500; color: var(--ch-dim); text-decoration: none; transition: color 0.2s ease; white-space: nowrap; } /* Underline grows from the left on hover and stays put on the current page. */ .main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background-image: linear-gradient(90deg, var(--ch-accent-hi), var(--ch-accent)); transform: scaleX(0); transform-origin: left center; transition: transform 0.25s ease; } .main-nav a:hover { color: var(--ch-text); } .main-nav a:hover::after { transform: scaleX(1); } .main-nav a.is-active { color: var(--ch-accent-hi); } .main-nav a.is-active::after { transform: scaleX(1); } .header-actions { display: flex; align-items: center; gap: 14px; flex: none; } /* The header CTA is deliberately its own button rather than .btn from base.css: the home page does not load base.css. */ .chrome-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 999px; border: 0; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none; background-image: var(--grad-btn); color: var(--accent-ink); box-shadow: 0 6px 16px rgba(255, 106, 0, 0.35); transition: box-shadow 0.25s ease, transform 0.15s ease; } /* The home page sets a global `a:hover { color }`, which outranks .chrome-btn on specificity and turned the label orange on an orange fill. Pin it. */ .chrome-btn:hover { box-shadow: 0 10px 26px rgba(255, 106, 0, 0.5); color: var(--accent-ink); } .chrome-btn:active { transform: translateY(1px); } /* ---------- Scroll progress ---------- */ .scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; overflow: hidden; } .scroll-progress span { display: block; height: 100%; width: 0; background-image: linear-gradient(90deg, rgba(255, 106, 0, 0), #ff6a00 25%, #ff9a3d); box-shadow: 0 0 12px rgba(255, 106, 0, 0.7); transition: width 0.1s linear; } /* ---------- Hamburger ---------- */ .nav-toggle { display: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--ch-line); border-radius: 12px; background: var(--surface-faint); cursor: pointer; flex: none; align-items: center; justify-content: center; transition: border-color 0.2s ease, background-color 0.2s ease; } .nav-toggle:hover { border-color: rgba(255, 106, 0, 0.45); } .nav-toggle-box { position: relative; display: block; width: 18px; height: 12px; } .nav-toggle-box span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--ch-text); transition: transform 0.28s ease, opacity 0.2s ease, top 0.2s ease; } .nav-toggle-box span:nth-child(1) { top: 0; } .nav-toggle-box span:nth-child(2) { top: 5px; } .nav-toggle-box span:nth-child(3) { top: 10px; } /* Bars collapse to the middle and cross. */ .site-header.nav-open .nav-toggle-box span:nth-child(1) { top: 5px; transform: rotate(45deg); } .site-header.nav-open .nav-toggle-box span:nth-child(2) { opacity: 0; } .site-header.nav-open .nav-toggle-box span:nth-child(3) { top: 5px; transform: rotate(-45deg); } /* ---------- Mobile panel ---------- */ @media (max-width: 940px) { .site-header .bar { gap: 14px; justify-content: space-between; } .nav-toggle { display: inline-flex; } .header-actions { display: none; } .main-nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--ch-gutter) 24px; background: var(--ch-panel-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--ch-line); /* Hidden by clipping rather than display:none so it can animate. */ max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height 0.32s ease, opacity 0.22s ease, visibility 0.32s; } .site-header.nav-open .main-nav { max-height: 78vh; overflow-y: auto; opacity: 1; visibility: visible; } .main-nav a { margin: 0; padding: 15px 2px; font-size: 17px; border-bottom: 1px solid var(--line-10); } .main-nav a::after { display: none; } .main-nav a.is-active { color: var(--ch-accent-hi); } .nav-panel-actions { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; } .nav-panel-actions .chrome-btn { width: 100%; padding: 14px 22px; font-size: 15px; } .nav-panel-mail { font-size: 14px; color: var(--ch-faint); text-decoration: none; text-align: center; } } @media (min-width: 941px) { .nav-panel-actions { display: none; } } /* ========================================================================== Footer ========================================================================== */ .site-footer { position: relative; z-index: 1; margin-top: clamp(48px, 7vw, 96px); padding: clamp(44px, 6vw, 72px) 0 26px; border-top: 1px solid var(--ch-line); color: var(--ch-dim); } /* A warm seam along the top edge, brightest in the middle — the same trick the backdrop uses, so the footer reads as part of the page and not a slab. */ .site-footer::before { content: ""; position: absolute; top: -1px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, rgba(255, 106, 0, 0), rgba(255, 106, 0, 0.55), rgba(255, 106, 0, 0)); pointer-events: none; } .footer-top { display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 0.85fr)) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 48px); } @media (max-width: 980px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; gap: 30px; } } .footer-tagline { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--ch-faint); max-width: 330px; } .footer-mail { display: inline-block; margin-top: 18px; font-size: 16px; font-weight: 600; color: var(--ch-text); text-decoration: none; border-bottom: 1px solid var(--accent-line); padding-bottom: 2px; transition: color 0.2s ease, border-color 0.2s ease; } .footer-mail:hover { color: var(--ch-accent-hi); border-color: var(--ch-accent-hi); } .footer-col h4 { margin: 0 0 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ch-faint); } .footer-col a { display: block; padding: 6px 0; font-size: 15px; color: var(--ch-dim); text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; } .footer-col a:hover { color: var(--ch-accent-hi); transform: translateX(3px); } .footer-promo { padding: 24px 22px 26px; border-radius: 18px; background: var(--surface-faint); border: 1px solid var(--accent-line); } .footer-promo h4 { color: var(--ch-accent-hi); } .footer-promo p { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--ch-faint); } /* The label is longer than this column is wide, and .chrome-btn does not wrap by default — let it wrap here rather than overflow the card. */ .footer-promo .chrome-btn { width: 100%; padding: 12px 16px; font-size: 13px; line-height: 1.3; white-space: normal; text-align: center; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; padding-top: 22px; border-top: 1px solid var(--ch-line); font-size: 13px; color: var(--text-40); } .footer-bottom a { color: var(--text-40); text-decoration: none; transition: color 0.2s ease; } .footer-bottom a:hover { color: var(--ch-accent-hi); } @media (prefers-reduced-motion: reduce) { .site-header, .main-nav, .main-nav a::after, .scroll-progress span, .nav-toggle-box span, .footer-col a, .chrome-btn { transition: none; } } /* ========================================================================== Callback button + modal Lives in the chrome so the header, the footer and any page CTA open the same dialog. The form posts to /leads — the same endpoint as the home page form — so a submit still works with JavaScript disabled. ========================================================================== */ .chrome-btn-ghost { background-image: none; background-color: var(--surface-faint); border: 1px solid var(--line-16); color: var(--ch-text); box-shadow: none; } .chrome-btn-ghost:hover { border-color: rgba(255, 106, 0, 0.5); color: var(--ch-accent-hi); box-shadow: none; } .chrome-btn svg { width: 16px; height: 16px; flex: none; } /* Visibility is class-driven: the home page is rendered by a client-side framework that does not preserve boolean attributes, so a `hidden` attribute alone would leave the dialog open on load. */ .callback-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } .callback-modal.is-open { display: flex; } .callback-backdrop { position: absolute; inset: 0; background: var(--ch-scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: callbackFade 0.2s ease both; } .callback-dialog { position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--surface); border: 1px solid var(--accent-line); border-radius: 22px; padding: 32px 30px 30px; box-shadow: var(--shadow-deep); animation: callbackRise 0.26s cubic-bezier(0.22, 1, 0.36, 1) both; color: var(--text); } @keyframes callbackFade { from { opacity: 0 } to { opacity: 1 } } @keyframes callbackRise { from { opacity: 0; transform: translateY(14px) scale(0.98) } to { opacity: 1; transform: none } } .callback-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--text-50); font-size: 22px; line-height: 1; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; } .callback-close:hover { color: var(--text); background: var(--surface-faint); } .callback-dialog h2 { margin: 0 0 10px; font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--text); } .callback-intro { margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: var(--text-60); } .callback-form { display: grid; gap: 14px; } .callback-form label { display: block; font-size: 13px; font-weight: 600; color: var(--text-50); } .callback-form input[type="text"], .callback-form input[type="tel"] { width: 100%; margin-top: 7px; padding: 13px 15px; font: inherit; font-size: 15px; color: var(--text); background: var(--bg-deep); border: 1px solid var(--line-16); border-radius: 12px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .callback-form input::placeholder { color: var(--text-40); } .callback-form input[type="text"]:focus, .callback-form input[type="tel"]:focus { outline: none; border-color: #ff6a00; box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.14); } .callback-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--text-60); cursor: pointer; } .callback-consent input { margin-top: 2px; accent-color: #ff6a00; flex: none; } .callback-consent a { color: var(--text-85); text-decoration: underline; } .callback-form button[type="submit"] { width: 100%; margin-top: 4px; padding: 14px 22px; font-size: 15px; } .callback-error { display: none; margin: 0; font-size: 14px; line-height: 1.5; color: var(--accent-hi); } .callback-error.is-visible { display: block; } .callback-done { display: none; text-align: center; padding: 10px 0 4px; } .callback-dialog.is-sent .callback-form { display: none; } .callback-dialog.is-sent .callback-done { display: block; } .callback-done-mark { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 106, 0, 0.14); color: #ff6a00; } .callback-done h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--text); } .callback-done p { margin: 0; font-size: 14px; color: var(--text-60); } @media (max-width: 420px) { .callback-dialog { padding: 28px 22px 24px; border-radius: 18px; } } @media (prefers-reduced-motion: reduce) { .callback-backdrop, .callback-dialog { animation: none; } } /* ---------- Theme toggle ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; flex: none; border: 1px solid var(--ch-line); border-radius: 12px; background: var(--surface-faint); color: var(--ch-dim); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; } .theme-toggle:hover { border-color: var(--accent-line); color: var(--accent-hi); } .theme-toggle svg { width: 19px; height: 19px; display: block; } /* Show the theme you would switch TO, not the one you are in. */ .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* ---------- Light-theme elevation ---------- On the dark ground a hairline is enough to detach a surface. On the cream ground a white card is barely a shade apart, so it lifts instead. */ :root[data-theme="light"] .card, :root[data-theme="light"] .panel, :root[data-theme="light"] .step, :root[data-theme="light"] .stat, :root[data-theme="light"] .faq-item, :root[data-theme="light"] .case-card, :root[data-theme="light"] .audit-feature, :root[data-theme="light"] .cta-panel { box-shadow: 0 1px 2px rgba(23, 19, 15, 0.04), 0 8px 20px -12px rgba(23, 19, 15, 0.16); } :root[data-theme="light"] a.card:hover, :root[data-theme="light"] .card--hover:hover, :root[data-theme="light"] .case-card:hover, :root[data-theme="light"] .audit-feature:hover { box-shadow: 0 2px 4px rgba(23, 19, 15, 0.06), 0 18px 34px -18px rgba(207, 82, 0, 0.32); } /* ---------- Telegram link ---------- */ .tg-link { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; border: 1px solid var(--ch-line); border-radius: 12px; background: var(--surface-faint); color: var(--ch-dim); text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; } .tg-link:hover { border-color: var(--accent-line); color: var(--accent-hi); } .tg-link svg { width: 20px; height: 20px; display: block; }