:root { color-scheme:dark; --bg:#07070b; --panel:#10131c; --soft:#171b28; --line:#343b50; --ink:#f7f8fc; --muted:#b5bdd0; --pink:#ff4fd8; --cyan:#23e9ff; --gold:#f2c15b; --shadow:rgba(0,0,0,.34); }
:root[data-theme="light"] { color-scheme:light; --bg:#f6f7fb; --panel:#fff; --soft:#eef2f8; --line:#cbd3e1; --ink:#101522; --muted:#505b70; --pink:#a91c8b; --cyan:#006f83; --gold:#8b5d00; --shadow:rgba(24,31,45,.12); }
@media (prefers-color-scheme:light) { :root:not([data-theme]) { color-scheme:light; --bg:#f6f7fb; --panel:#fff; --soft:#eef2f8; --line:#cbd3e1; --ink:#101522; --muted:#505b70; --pink:#a91c8b; --cyan:#006f83; --gold:#8b5d00; --shadow:rgba(24,31,45,.12); } }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--bg) url("/brand/kazan-night-from-plane.jpg") center top / cover fixed no-repeat; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.55; letter-spacing:0; } body::before { content:""; position:fixed; inset:0; z-index:-1; background:rgba(7,7,11,.79); } :root[data-theme="light"] body { background-image:url("/brand/kazan-day-from-plane.jpg"); } :root[data-theme="light"] body::before { background:rgba(246,247,251,.82); } @media (prefers-color-scheme:light) { :root:not([data-theme]) body { background-image:url("/brand/kazan-day-from-plane.jpg"); } :root:not([data-theme]) body::before { background:rgba(246,247,251,.82); } }
a { color:inherit; } .page-header { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"brand actions" "nav nav"; gap:10px 20px; padding:10px max(18px,calc((100% - 1100px)/2)); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(16px); } .brand { grid-area:brand; display:flex; align-items:center; gap:11px; min-width:0; text-decoration:none; } .brand img { width:44px; height:44px; border-radius:50%; } .brand span { min-width:0; } .brand strong,.brand small { display:block; } .brand small { color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .header-actions { grid-area:actions; display:flex; align-items:center; gap:8px; } .site-nav { grid-area:nav; display:flex; flex-wrap:wrap; gap:8px; } .site-nav a,.control,.lang-option { min-height:34px; display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:8px; padding:6px 10px; background:var(--panel); color:var(--ink); text-decoration:none; font:inherit; font-size:13px; font-weight:700; } .site-nav a:hover,.site-nav a[aria-current="page"],.lang-option:hover,.lang-option.active { border-color:var(--cyan); color:var(--cyan); } .site-nav .contact-link { background:var(--ink); color:var(--bg); border-color:var(--ink); } .control { cursor:pointer; white-space:nowrap; } .lang-menu { position:relative; } .lang-menu summary { list-style:none; } .lang-menu summary::-webkit-details-marker { display:none; } .lang-options { position:absolute; right:0; top:calc(100% + 7px); display:grid; gap:4px; min-width:155px; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:0 18px 42px var(--shadow); } .lang-option { justify-content:space-between; }
main { width:min(980px,100%); margin:0 auto; padding:32px 22px 64px; } .breadcrumbs { display:flex; gap:9px; color:var(--muted); font-size:14px; margin-bottom:34px; } .hero { min-height:420px; display:flex; flex-direction:column; justify-content:center; padding:48px 0 64px; border-bottom:1px solid var(--line); } .eyebrow { color:var(--cyan); font-size:14px; font-weight:800; text-transform:uppercase; } h1 { max-width:900px; margin:12px 0 18px; font-size:56px; line-height:1.02; overflow-wrap:anywhere; } .hero p { max-width:780px; margin:0; color:var(--muted); font-size:21px; } .content-section { padding:48px 0; border-bottom:1px solid var(--line); } h2 { margin:0 0 16px; font-size:32px; line-height:1.15; } .content-section p { max-width:820px; color:var(--muted); font-size:17px; } .content-section ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:24px 0 0; padding:0; list-style:none; } .content-section li { min-height:72px; padding:14px; border:1px solid var(--line); border-radius:8px; background:color-mix(in srgb,var(--panel) 91%,transparent); font-weight:700; } .related { padding:48px 0; } .related-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .related-links a { display:block; padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--panel); text-decoration:none; } .related-links strong,.related-links span { display:block; } .related-links strong { color:var(--cyan); margin-bottom:8px; } .related-links span { color:var(--muted); } .cta { padding:34px; border-left:4px solid var(--pink); background:var(--panel); } .cta p { color:var(--muted); } .primary { display:inline-flex; min-height:44px; align-items:center; margin-top:10px; padding:9px 16px; border-radius:8px; background:var(--ink); color:var(--bg); text-decoration:none; font-weight:800; } .page-footer { padding:28px max(20px,calc((100% - 980px)/2)); border-top:1px solid var(--line); color:var(--muted); background:color-mix(in srgb,var(--bg) 95%,transparent); } .page-footer a { color:var(--cyan); }
@media (max-width:760px) { .page-header { grid-template-columns:1fr; grid-template-areas:"brand" "actions" "nav"; } .header-actions { justify-content:space-between; } .site-nav { overflow-x:auto; flex-wrap:nowrap; padding-bottom:3px; } .site-nav a { white-space:nowrap; } main { padding:24px 16px 48px; } .hero { min-height:0; padding:38px 0 48px; } h1 { font-size:38px; } .hero p { font-size:18px; } h2 { font-size:27px; } .content-section ul,.related-links { grid-template-columns:1fr; } .cta { padding:24px 20px; } }