/* Square TD — сайт. Палитра взята из логотипа: ночное небо за замком, золото букв, синее знамя, камень и пергамент для документов. */ :root { --sky: #0f1d3a; --sky-deep: #070f22; --banner: #1c4fb0; --banner-deep: #123478; --gold: #f5b527; --gold-deep: #c9781a; --stone: #b9bec6; --stone-dim: #7d858f; --parchment: #f1e6c8; --parchment-edge: #d9c69a; --ink: #2b1d10; --ink-soft: #5a4632; --moss: #6da341; --font-display: "Rubik", "Segoe UI", system-ui, sans-serif; --font-body: "Alegreya", Georgia, "Times New Roman", serif; --measure: 70ch; --radius: 14px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; color: var(--stone); background: radial-gradient(120% 80% at 50% 0%, #1a2f5e 0%, var(--sky) 45%, var(--sky-deep) 100%) fixed; font-family: var(--font-body); font-size: 19px; line-height: 1.55; display: flex; flex-direction: column; } a { color: var(--gold); text-underline-offset: 3px; } a:hover { color: #ffd166; } a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; } /* Показываем только текущий язык; атрибут ставится инлайн-скриптом в */ html[data-lang="ru"] [data-lang="en"], html[data-lang="en"] [data-lang="ru"] { display: none !important; } /* ---- Небо: светлячки на canvas ---- */ #sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* ---- Шапка ---- */ .top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(16px, 4vw, 40px); font-family: var(--font-display); } .top .home { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--stone); font-weight: 700; font-size: 17px; letter-spacing: 0.01em; } .top .home img { height: 44px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); } .top .home span { transition: color .15s; } .top .home:hover span { color: var(--gold); } /* Переключатель языка — как маленькое синее знамя */ .lang { display: inline-flex; padding: 3px; background: var(--banner-deep); border: 2px solid var(--gold-deep); border-radius: 999px; box-shadow: 0 2px 0 #3b1f0e, inset 0 1px 0 rgba(255,255,255,.12); } .lang button { appearance: none; border: 0; background: transparent; color: #cfd8ea; font: 700 14px/1 var(--font-display); letter-spacing: .04em; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; } .lang button[aria-pressed="true"] { background: var(--gold); color: var(--ink); } .lang button:not([aria-pressed="true"]):hover { color: #fff; } /* ---- Главная ---- */ main { position: relative; z-index: 1; flex: 1; } .hero { text-align: center; padding: clamp(24px, 6vh, 64px) 20px 32px; } .hero .logo { width: min(92vw, 720px); height: auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.55)) drop-shadow(0 0 60px rgba(245,181,39,.18)); animation: settle .9s cubic-bezier(.2,.8,.2,1) both; } @keyframes settle { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } .hero p { margin: 28px auto 0; max-width: 34em; font-size: clamp(19px, 2.2vw, 23px); color: #dfe4ee; } .hero .actions { margin: 34px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } /* Кнопки: каменная плита с золотой кромкой */ .btn { display: inline-block; padding: 13px 22px; border-radius: 10px; font: 700 16px/1.2 var(--font-display); text-decoration: none; color: var(--ink); background: linear-gradient(#ffd45a, var(--gold) 55%, #e69c1f); border: 2px solid #3b1f0e; box-shadow: 0 4px 0 #3b1f0e, inset 0 1px 0 rgba(255,255,255,.55); transition: transform .08s, box-shadow .08s; } .btn:hover { color: var(--ink); filter: brightness(1.04); } .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #3b1f0e; } .btn.stone { color: #f4f6f8; background: linear-gradient(#a9b0b8, #7d858f 60%, #626a74); box-shadow: 0 4px 0 #2b2f36, inset 0 1px 0 rgba(255,255,255,.3); border-color: #2b2f36; } .btn.stone:hover { color: #fff; } .btn.stone:active { box-shadow: 0 1px 0 #2b2f36; } .hero .store-note { margin-top: 22px; font-size: 15px; color: var(--stone-dim); } /* ---- Документы: пергамент ---- */ .doc { position: relative; max-width: calc(var(--measure) + 2 * clamp(20px, 5vw, 56px)); margin: 8px auto 48px; padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 56px) clamp(36px, 6vw, 64px); color: var(--ink); background: radial-gradient(140% 60% at 50% 0%, rgba(255,255,255,.35), transparent 60%), var(--parchment); border-radius: var(--radius); box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 0 1px var(--parchment-edge), inset 0 0 0 6px var(--parchment), inset 0 0 0 7px var(--parchment-edge); } .doc h1 { margin: 0 0 6px; font: 800 clamp(30px, 4.5vw, 40px)/1.1 var(--font-display); color: var(--ink); } .doc .updated { margin: 0 0 30px; color: var(--ink-soft); font-size: 16px; } .doc h2 { margin: 34px 0 10px; font: 700 22px/1.25 var(--font-display); color: var(--ink); } .doc p, .doc li { max-width: var(--measure); } .doc p { margin: 0 0 14px; } .doc ul { padding-left: 1.3em; margin: 0 0 14px; } .doc li { margin-bottom: 6px; } .doc a { color: var(--banner); } .doc a:hover { color: var(--banner-deep); } .doc .contact { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--parchment-edge); color: var(--ink-soft); } .doc strong { color: var(--ink); } /* ---- Подвал ---- */ .foot { position: relative; z-index: 1; padding: 24px clamp(16px, 4vw, 40px) 36px; text-align: center; font: 500 14px/1.7 var(--font-display); color: var(--stone-dim); } .foot nav a { color: var(--stone); text-decoration: none; margin: 0 10px; } .foot nav a:hover { color: var(--gold); } /* ---- Мелкие экраны ---- */ @media (max-width: 520px) { body { font-size: 17px; } .top .home img { height: 36px; } .hero { padding-top: 16px; } .hero .actions { flex-direction: column; align-items: stretch; } .btn { text-align: center; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero .logo { animation: none; } #sky { display: none; } }