/* ---- css/css-bundle-v4035-82039c9a.css ---- */
/* ===== css/common-modern-core-v4031.css?v=4031 ===== */
/* BEGIN css/site-quality-phase31-40.css */
/* Phase 31–40 quality layer: no visual redesign. */
.resource-error { outline: 2px dashed currentColor; opacity: .65; }
.visually-hidden:not(:focus):not(:active) { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
@media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; } }
/* var.6: the primary document image must not display the diagnostic dashed outline. */
.doc2026__viewer > img.resource-error,
#doc2026Image.resource-error {
outline: none !important;
opacity: 1;
}
/* END css/site-quality-phase31-40.css */
/* BEGIN css/design-system-modern-ui-phase1.css */
/*
* grafo74 — Modern UI Phase 1: Design System
* Central, non-destructive visual tokens and shared component foundations.
* Version: var.3 grafo74
*/
:root {
color-scheme: light;
/* Typography */
--ds-font-sans: "Montserrat", "Segoe UI", Arial, sans-serif;
--ds-font-serif: Georgia, "Times New Roman", serif;
--ds-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
--ds-text-xs: 0.75rem;
--ds-text-sm: 0.875rem;
--ds-text-md: 1rem;
--ds-text-lg: 1.125rem;
--ds-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
--ds-text-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
--ds-leading-tight: 1.2;
--ds-leading-normal: 1.55;
/* Neutral palette */
--ds-color-bg: #f7f8fa;
--ds-color-surface: #ffffff;
--ds-color-surface-muted: #f1f3f6;
--ds-color-text: #20242a;
--ds-color-text-muted: #626b76;
--ds-color-border: #d9dee5;
--ds-color-border-strong: #b9c1cc;
/* Brand and semantic palette */
--ds-color-primary: #1d5b8f;
--ds-color-primary-hover: #174a74;
--ds-color-primary-soft: #e9f2f9;
--ds-color-accent: #9b6b2f;
--ds-color-success: #27734f;
--ds-color-warning: #986b16;
--ds-color-danger: #a53a3a;
--ds-color-focus: #176fbd;
/* Spacing: 4/8 px scale */
--ds-space-1: 0.25rem;
--ds-space-2: 0.5rem;
--ds-space-3: 0.75rem;
--ds-space-4: 1rem;
--ds-space-5: 1.5rem;
--ds-space-6: 2rem;
--ds-space-7: 3rem;
--ds-space-8: 4rem;
/* Shape */
--ds-radius-sm: 0.375rem;
--ds-radius-md: 0.625rem;
--ds-radius-lg: 1rem;
--ds-radius-pill: 999px;
/* Elevation */
--ds-shadow-sm: 0 1px 2px rgba(21, 32, 43, 0.08);
--ds-shadow-md: 0 8px 24px rgba(21, 32, 43, 0.10);
--ds-shadow-lg: 0 18px 48px rgba(21, 32, 43, 0.14);
/* Motion */
--ds-duration-fast: 140ms;
--ds-duration-normal: 220ms;
--ds-ease-standard: cubic-bezier(0.2, 0, 0, 1);
/* Layout */
--ds-container: 1200px;
--ds-page-gutter: clamp(1rem, 3vw, 2rem);
}
html {
accent-color: var(--ds-color-primary);
scroll-behavior: smooth;
}
body {
background-color: var(--ds-color-bg);
color: var(--ds-color-text);
font-family: var(--ds-font-sans);
line-height: var(--ds-leading-normal);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
::selection {
background: var(--ds-color-primary-soft);
color: var(--ds-color-text);
}
a {
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
transition: color var(--ds-duration-fast) var(--ds-ease-standard),
background-color var(--ds-duration-fast) var(--ds-ease-standard),
border-color var(--ds-duration-fast) var(--ds-ease-standard),
opacity var(--ds-duration-fast) var(--ds-ease-standard),
transform var(--ds-duration-fast) var(--ds-ease-standard);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--ds-color-focus);
outline-offset: 3px;
}
button,
input,
select,
textarea {
font: inherit;
}
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
.btn,
.main-block__button {
border-radius: var(--ds-radius-md);
transition: color var(--ds-duration-fast) var(--ds-ease-standard),
background-color var(--ds-duration-fast) var(--ds-ease-standard),
border-color var(--ds-duration-fast) var(--ds-ease-standard),
box-shadow var(--ds-duration-fast) var(--ds-ease-standard),
transform var(--ds-duration-fast) var(--ds-ease-standard);
}
button:not(:disabled),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled) {
cursor: pointer;
}
button:not(:disabled):active,
input[type="button"]:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
input[type="reset"]:not(:disabled):active,
.button:active,
.btn:active,
.main-block__button:active {
transform: translateY(1px);
}
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
cursor: not-allowed;
opacity: 0.58;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
border-color: var(--ds-color-border);
border-radius: var(--ds-radius-md);
background-color: var(--ds-color-surface);
color: var(--ds-color-text);
transition: border-color var(--ds-duration-fast) var(--ds-ease-standard),
box-shadow var(--ds-duration-fast) var(--ds-ease-standard),
background-color var(--ds-duration-fast) var(--ds-ease-standard);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
select:hover,
textarea:hover {
border-color: var(--ds-color-border-strong);
}
img,
video,
canvas,
svg {
max-width: 100%;
}
hr {
border: 0;
border-top: 1px solid var(--ds-color-border);
}
/* Shared site chrome */
.header {
background-color: color-mix(in srgb, var(--ds-color-surface) 94%, transparent);
border-bottom: 1px solid var(--ds-color-border);
box-shadow: var(--ds-shadow-sm);
}
.header__container,
._container {
max-width: var(--ds-container);
}
.header__logo,
.topnav a,
.dropbtn {
border-radius: var(--ds-radius-sm);
}
.topnav a:hover,
.topnav a:focus-visible,
.dropdown:hover .dropbtn,
.dropbtn:focus-visible {
background-color: var(--ds-color-primary-soft);
color: var(--ds-color-primary-hover);
}
.dropdown-content {
border: 1px solid var(--ds-color-border);
border-radius: var(--ds-radius-md);
background: var(--ds-color-surface);
box-shadow: var(--ds-shadow-md);
overflow: hidden;
}
/* Shared content surfaces. Existing dimensions remain untouched. */
.card,
.news__item,
.categories__item,
.products__item,
.services__item,
[class*="__card"] {
border-radius: var(--ds-radius-lg);
}
.title,
h1,
h2,
h3 {
line-height: var(--ds-leading-tight);
text-wrap: balance;
}
p,
li {
text-wrap: pretty;
}
/* Back-to-top control */
#upbutton {
border: 1px solid var(--ds-color-border);
border-radius: var(--ds-radius-pill);
background: var(--ds-color-surface);
box-shadow: var(--ds-shadow-md);
}
#upbutton:hover,
#upbutton:focus-visible {
border-color: var(--ds-color-primary);
box-shadow: var(--ds-shadow-lg);
}
/* Utility classes for future phases and gradual migration */
.ds-container {
width: min(100% - (2 * var(--ds-page-gutter)), var(--ds-container));
margin-inline: auto;
}
.ds-surface {
border: 1px solid var(--ds-color-border);
border-radius: var(--ds-radius-lg);
background: var(--ds-color-surface);
box-shadow: var(--ds-shadow-sm);
}
.ds-muted { color: var(--ds-color-text-muted); }
.ds-stack > * + * { margin-top: var(--ds-space-4); }
@media (max-width: 767px) {
:root {
--ds-page-gutter: 1rem;
}
.dropdown-content {
border-radius: var(--ds-radius-sm);
}
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
@media (forced-colors: active) {
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid CanvasText;
}
}
/* END css/design-system-modern-ui-phase1.css */
/* BEGIN css/typography-modern-ui-phase2.css */
/*
* grafo74 — Modern UI Phase 2: Typography
* Adaptive, readable and non-destructive type system.
* Version: var.4 grafo74
*/
:root {
--type-font-body: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--type-font-display: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--type-font-reading: Georgia, "Times New Roman", serif;
--type-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
--type-size-xs: 0.75rem;
--type-size-sm: 0.875rem;
--type-size-base: clamp(1rem, 0.975rem + 0.125vw, 1.0625rem);
--type-size-lg: clamp(1.125rem, 1.075rem + 0.25vw, 1.25rem);
--type-size-h4: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
--type-size-h3: clamp(1.25rem, 1.08rem + 0.8vw, 1.75rem);
--type-size-h2: clamp(1.5rem, 1.16rem + 1.4vw, 2.25rem);
--type-size-h1: clamp(1.875rem, 1.25rem + 2.6vw, 3.25rem);
--type-leading-tight: 1.15;
--type-leading-heading: 1.24;
--type-leading-body: 1.68;
--type-leading-compact: 1.42;
--type-measure: 72ch;
--type-measure-wide: 88ch;
--type-tracking-tight: -0.025em;
--type-tracking-heading: -0.015em;
--type-tracking-label: 0.025em;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: var(--type-font-body);
font-size: var(--type-size-base);
line-height: var(--type-leading-body);
font-kerning: normal;
font-synthesis: none;
font-variant-ligatures: common-ligatures contextual;
overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6,
.title,
[class$="__title"],
[class*="__title "] {
font-family: var(--type-font-display);
font-weight: 700;
line-height: var(--type-leading-heading);
letter-spacing: var(--type-tracking-heading);
text-wrap: balance;
overflow-wrap: normal;
}
h1 { font-size: var(--type-size-h1); line-height: var(--type-leading-tight); letter-spacing: var(--type-tracking-tight); }
h2 { font-size: var(--type-size-h2); }
h3 { font-size: var(--type-size-h3); }
h4 { font-size: var(--type-size-h4); }
h5 { font-size: var(--type-size-lg); }
h6 { font-size: var(--type-size-base); }
p, li, dd, dt, blockquote, figcaption, address {
hanging-punctuation: first last;
}
p {
text-wrap: pretty;
}
main p,
.main p,
[class*="content"] p,
[class*="article"] p,
[class*="text"] p {
max-width: var(--type-measure-wide);
}
small,
.small,
.caption,
figcaption,
[class*="__caption"],
[class*="__meta"],
[class*="__date"] {
font-size: var(--type-size-sm);
line-height: var(--type-leading-compact);
}
strong, b { font-weight: 700; }
abbr[title] {
text-decoration-thickness: 0.08em;
text-underline-offset: 0.16em;
}
code, kbd, samp, pre {
font-family: var(--type-font-mono);
font-size: 0.925em;
font-variant-ligatures: none;
}
pre {
line-height: 1.55;
tab-size: 2;
white-space: pre-wrap;
}
blockquote {
font-family: var(--type-font-reading);
font-size: var(--type-size-lg);
line-height: 1.65;
}
button, input, select, textarea {
letter-spacing: normal;
}
label,
button,
.button,
.btn,
.main-block__button,
.topnav a,
.dropbtn {
line-height: var(--type-leading-compact);
}
/* Preserve compact viewer controls while unifying their font stack. */
[class^="viewer"] button,
[class*=" viewer"] button,
[class^="doc2026"] button,
[class*=" doc2026"] button {
font-family: var(--type-font-body);
}
/* Do not override icon glyph fonts. */
.fa, .fas, .far, .fal, .fab,
[class^="fa-"], [class*=" fa-"] {
font-family: "Font Awesome 5 Free", "FontAwesome" !important;
}
@media (max-width: 480px) {
:root {
--type-leading-body: 1.62;
}
}
@media print {
body {
font-family: Georgia, "Times New Roman", serif;
font-size: 11pt;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
break-after: avoid;
}
p, li, blockquote {
orphans: 3;
widows: 3;
}
}
/* END css/typography-modern-ui-phase2.css */
/* BEGIN css/layout-modern-ui-phase3.css */
/*
* grafo74 — Modern UI Phase 3: Layout
* Responsive container, section rhythm, grid and media foundations.
* Version: var.5 grafo74
*/
:root {
--layout-content-max: 1200px;
--layout-reading-max: 76ch;
--layout-gutter: clamp(1rem, 2.7vw, 2rem);
--layout-section-space: clamp(2.75rem, 6vw, 6rem);
--layout-grid-gap: clamp(1rem, 2.4vw, 2rem);
--layout-card-min: 16rem;
--layout-header-height: clamp(4.5rem, 9vw, 6.5rem);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
min-width: 0;
max-width: 100%;
}
body {
overflow-x: clip;
}
.wrapper {
width: 100%;
min-height: 100vh;
min-height: 100dvh;
overflow: clip;
}
.page,
main {
min-width: 0;
flex: 1 0 auto;
}
/* One fluid container model for the legacy and BEM containers. */
._container,
[class$="__container"],
[class*="__container "] {
width: min(100% - (2 * var(--layout-gutter)), var(--layout-content-max));
max-width: var(--layout-content-max);
margin-inline: auto;
padding-inline: 0;
box-sizing: border-box;
}
/* Prevent wide descendants from forcing horizontal scrolling. */
.wrapper > *,
.page > *,
[class$="__container"] > *,
[class*="__container "] > * {
min-width: 0;
}
img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
max-width: 100%;
}
img,
picture,
video,
canvas,
svg {
height: auto;
}
iframe,
embed,
object {
display: block;
}
/* Header: flexible wrapping without changing navigation behavior. */
.header__container {
min-height: var(--layout-header-height);
display: flex;
align-items: center;
gap: clamp(0.5rem, 1.6vw, 1.25rem);
flex-wrap: wrap;
}
.header__logo {
flex: 0 0 auto;
margin-left: 0;
}
.header__datetime {
min-width: 0;
margin-left: auto;
}
.topnav {
min-width: 0;
max-width: 100%;
}
.dropdown-content {
max-width: min(22rem, calc(100vw - 2 * var(--layout-gutter)));
}
/* Consistent vertical rhythm for principal content sections. */
.services,
.practice,
.whoweare,
.man,
.contact,
.categories,
.products,
.news,
.clients,
.subscribe,
.getintouch {
padding-block: var(--layout-section-space);
}
.page > section:first-child,
.page > div:first-child {
scroll-margin-top: calc(var(--layout-header-height) + 1rem);
}
.header-block,
.practice__header,
.man__header,
.categories__header {
margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
}
.header-block__text,
.main-block__text,
.whoweare__text,
.contact__text,
.news__text,
.item-service__text,
.item-practice__text,
.item-man__text {
max-width: var(--layout-reading-max);
}
/* Replace negative-margin card rows with gap-based layouts. */
.services__body,
.practice__body,
.man__body {
margin: 0;
gap: var(--layout-grid-gap);
}
.services__column,
.practice__column,
.practice__column_2,
.practice__column_2h,
.man__column {
min-width: 0;
padding: 0;
margin: 0;
}
@supports (display: grid) {
.services__body,
.practice__body,
.man__body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-card-min)), 1fr));
align-items: stretch;
}
.services__column,
.practice__column,
.practice__column_2,
.practice__column_2h,
.man__column {
width: auto;
max-width: none;
flex: none;
}
}
.categories__items {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
gap: var(--layout-grid-gap);
}
.item-practice,
.item-man,
.services__item,
.item-category {
min-width: 0;
}
.item-practice__content,
.services__item {
padding: clamp(1.25rem, 2.5vw, 2.25rem);
}
/* Two-column editorial/media blocks collapse naturally. */
.whoweare__body,
.contact__body {
gap: clamp(1.5rem, 4vw, 4rem);
}
.whoweare__video,
.whoweare__content,
.contact__content {
min-width: 0;
}
.whoweare__video iframe {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
}
/* Tables remain usable on narrow screens without widening the page. */
table {
max-width: 100%;
}
.table-scroll,
.table-responsive,
[role="region"][aria-label*="таблиц" i] {
overflow-x: auto;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
}
/* Legacy hero stays full-width while its content follows the shared container. */
.main-block {
min-width: 0;
}
.main-block__body {
width: min(100%, 54rem);
}
.main-block__buttons {
display: flex;
flex-wrap: wrap;
gap: var(--ds-space-3, 0.75rem);
}
.main-block__button {
min-width: 0;
}
/* Preserve dedicated document/gallery viewers: only guard their outer width. */
.doc2026,
.viewer-shell,
.viewer-container,
.swiper,
.bx-wrapper {
max-width: 100%;
}
@media (max-width: 900px) {
:root {
--layout-card-min: 14rem;
}
.header__container {
align-content: center;
}
.header__datetime {
flex-basis: 100%;
margin-left: 0;
}
.whoweare__body,
.contact__body {
display: grid;
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
:root {
--layout-gutter: 1rem;
--layout-section-space: clamp(2rem, 10vw, 3.5rem);
}
.header__container {
gap: 0.5rem 0.75rem;
}
.header__logo {
font-size: clamp(1.05rem, 5vw, 1.35rem);
}
.main-block__body {
width: 100%;
}
.main-block__buttons,
.contact__body,
.contact__button {
width: 100%;
}
.main-block__button,
.contact__button {
max-width: 100%;
}
.services__body,
.practice__body,
.man__body,
.categories__items {
grid-template-columns: 1fr;
}
}
@media print {
:root {
--layout-content-max: none;
--layout-gutter: 0;
--layout-section-space: 1.5rem;
}
._container,
[class$="__container"],
[class*="__container "] {
width: 100%;
max-width: none;
}
}
/* END css/layout-modern-ui-phase3.css */
/* BEGIN css/cards-modern-ui-phase4.css */
/* Modern UI Phase 4 — Cards
Unified card surfaces without changing document-viewer geometry or behavior. */
:root {
--card-bg: var(--color-surface, #ffffff);
--card-bg-muted: var(--color-surface-subtle, #f7faf9);
--card-border: color-mix(in srgb, var(--color-primary, #086973) 16%, transparent);
--card-border-hover: color-mix(in srgb, var(--color-primary, #086973) 34%, transparent);
--card-radius: var(--radius-lg, 18px);
--card-radius-sm: var(--radius-md, 12px);
--card-shadow: 0 8px 24px rgba(15, 50, 54, 0.08);
--card-shadow-hover: 0 14px 34px rgba(15, 50, 54, 0.14);
--card-transition: 180ms ease;
}
/* Content and service cards */
.services__item,
.item-service,
.practice__item,
.item-practice,
.man__item,
.item-man,
.items__item,
.error-card {
position: relative;
overflow: hidden;
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
transition:
transform var(--card-transition),
box-shadow var(--card-transition),
border-color var(--card-transition),
background-color var(--card-transition);
}
/* Preserve the original semantic green service cards. */
.item-service_green {
background: var(--color-primary, #0d5c63);
border-color: color-mix(in srgb, var(--color-primary, #0d5c63) 82%, #ffffff);
}
.item-service_green,
.item-service_green a,
.item-service_green .item-service__title,
.item-service_green .item-service__text {
color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
.services__item:hover,
.item-service:hover,
.practice__item:hover,
.item-practice:hover,
.man__item:hover,
.item-man:hover,
.items__item:hover {
transform: translateY(-3px);
border-color: var(--card-border-hover);
box-shadow: var(--card-shadow-hover);
}
}
.services__item:focus-within,
.item-service:focus-within,
.practice__item:focus-within,
.item-practice:focus-within,
.man__item:focus-within,
.item-man:focus-within,
.items__item:focus-within {
border-color: var(--color-primary, #086973);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #086973) 20%, transparent), var(--card-shadow-hover);
}
/* Icons remain visually direct: no pale circular plate. */
.item-service__icon {
display: flex;
align-items: center;
justify-content: flex-start;
width: clamp(64px, 7vw, 88px);
min-height: clamp(64px, 7vw, 88px);
margin-inline: 0;
border-radius: 0;
background: transparent;
}
.item-service__icon img {
max-width: 78%;
max-height: 78%;
object-fit: contain;
}
/* Existing dark pictograms become clean inverse marks on green cards. */
.item-service_green .item-service__icon img {
filter: brightness(0) invert(1);
}
.item-service__title,
.item-practice__title,
.item-man__title {
margin-block: 0 var(--space-3, 0.75rem);
text-wrap: balance;
}
.item-service__text,
.item-practice__text,
.item-man__text,
.items__text {
color: var(--color-text, #22383a);
}
/* Image sections inside editorial cards */
.item-practice__image,
.item-man__image {
overflow: hidden;
border-radius: var(--card-radius-sm);
background: var(--card-bg-muted);
}
.item-practice__image img,
.item-man__image img {
transition: transform 280ms ease;
}
@media (hover: hover) and (pointer: fine) {
.item-practice:hover .item-practice__image img,
.item-man:hover .item-man__image img {
transform: scale(1.025);
}
}
/* Document viewer thumbnail cards */
.doc2026__thumbs-wrap {
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
background: color-mix(in srgb, var(--card-bg-muted) 86%, transparent);
box-shadow: 0 6px 20px rgba(15, 50, 54, 0.05);
}
.doc2026__thumb {
overflow: hidden;
border: 1px solid transparent;
border-radius: var(--card-radius-sm);
background: var(--card-bg);
box-shadow: 0 5px 16px rgba(15, 50, 54, 0.08);
transition:
transform var(--card-transition),
border-color var(--card-transition),
box-shadow var(--card-transition),
background-color var(--card-transition);
}
@media (hover: hover) and (pointer: fine) {
.doc2026__thumb:hover {
transform: translateY(-2px);
border-color: var(--card-border-hover);
box-shadow: 0 10px 24px rgba(15, 50, 54, 0.13);
}
}
.doc2026__thumb[aria-current="true"],
.doc2026__thumb.is-active,
.doc2026__thumb.active {
border-color: var(--color-accent, #cb3b94);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--color-accent, #cb3b94) 20%, transparent),
0 8px 22px rgba(15, 50, 54, 0.12);
}
.doc2026__thumb:focus-visible {
outline: 3px solid color-mix(in srgb, var(--color-primary, #086973) 48%, transparent);
outline-offset: 2px;
}
.doc2026__thumb-caption {
padding-inline: var(--space-2, 0.5rem);
font-weight: 650;
text-align: center;
}
/* Keep the main document image neutral: no card border or focus decoration. */
.doc2026__image-wrap,
.doc2026__viewer img {
outline: none;
}
@media (prefers-reduced-motion: reduce) {
.services__item,
.item-service,
.practice__item,
.item-practice,
.man__item,
.item-man,
.items__item,
.doc2026__thumb,
.item-practice__image img,
.item-man__image img {
transition: none;
}
}
@media print {
.services__item,
.item-service,
.practice__item,
.item-practice,
.man__item,
.item-man,
.items__item,
.error-card,
.doc2026__thumbs-wrap,
.doc2026__thumb {
box-shadow: none !important;
border-color: #bbb !important;
}
}
/* END css/cards-modern-ui-phase4.css */
/* BEGIN css/gallery-ux-modern-ui-phase5.css */
/* Modern UI Phase 5 — Gallery UX
Progressive media loading, clearer thumbnail states and touch-friendly strips.
This layer does not alter viewer dimensions or document rendering logic. */
:root {
--gallery-radius: var(--radius-lg, 14px);
--gallery-thumb-radius: var(--radius-md, 10px);
--gallery-accent: var(--color-primary, #086973);
--gallery-active: var(--color-accent, #cb3b94);
--gallery-transition: 220ms cubic-bezier(.2,.7,.2,1);
}
/* Horizontal thumbnail areas */
.doc2026__thumbs,
.viewer4__thumbs,
.bx-wrapper .bx-viewport,
.swiper-wrapper {
scroll-behavior: smooth;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
}
.doc2026__thumbs,
.viewer4__thumbs {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--gallery-accent) 55%, transparent) transparent;
scroll-snap-type: inline proximity;
touch-action: pan-x pan-y;
}
.doc2026__thumbs::-webkit-scrollbar,
.viewer4__thumbs::-webkit-scrollbar {
height: 8px;
}
.doc2026__thumbs::-webkit-scrollbar-track,
.viewer4__thumbs::-webkit-scrollbar-track {
background: transparent;
}
.doc2026__thumbs::-webkit-scrollbar-thumb,
.viewer4__thumbs::-webkit-scrollbar-thumb {
border-radius: 999px;
background: color-mix(in srgb, var(--gallery-accent) 48%, transparent);
}
.doc2026__thumb,
.viewer4__thumb,
.bx-wrapper li,
.swiper-slide {
scroll-snap-align: start;
}
/* Progressive image reveal. Existing images stay visible until JS marks them. */
.gallery-ux-managed {
opacity: .01;
filter: saturate(.86) contrast(.96);
transition: opacity 280ms ease, filter 360ms ease, transform var(--gallery-transition);
}
.gallery-ux-managed.gallery-ux-loaded {
opacity: 1;
filter: none;
}
.gallery-ux-managed.gallery-ux-error {
opacity: .42;
filter: grayscale(1);
}
/* Thumbnail affordance */
.doc2026__thumb,
.viewer4__thumb {
position: relative;
isolation: isolate;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.doc2026__thumb::after,
.viewer4__thumb::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
border-radius: inherit;
box-shadow: inset 0 0 0 0 transparent;
transition: box-shadow var(--gallery-transition), background-color var(--gallery-transition);
}
@media (hover: hover) and (pointer: fine) {
.doc2026__thumb:hover::after,
.viewer4__thumb:hover::after {
background: linear-gradient(to top, rgba(8,105,115,.08), transparent 42%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gallery-accent) 35%, transparent);
}
}
.doc2026__thumb[aria-current="true"]::after,
.doc2026__thumb.is-active::after,
.doc2026__thumb.active::after,
.viewer4__thumb[aria-current="true"]::after,
.viewer4__thumb.is-active::after,
.viewer4__thumb.active::after {
box-shadow: inset 0 0 0 2px var(--gallery-active);
}
.doc2026__thumb:active,
.viewer4__thumb:active {
transform: translateY(0) scale(.985);
}
/* Main image transition without borders or outlines. */
.doc2026__image-wrap,
.viewer4__stage,
.viewer4__image-wrap {
position: relative;
}
.doc2026__image-wrap img,
.viewer4__stage img,
.viewer4__image-wrap img {
transition: opacity 240ms ease, filter 300ms ease;
}
.gallery-ux-busy .doc2026__image-wrap::before,
.gallery-ux-busy .viewer4__stage::before,
.gallery-ux-busy .viewer4__image-wrap::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: var(--gallery-radius);
background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.36) 45%, transparent 70%);
background-size: 220% 100%;
animation: gallery-ux-shimmer 1.2s linear infinite;
}
@keyframes gallery-ux-shimmer {
to { background-position: -220% 0; }
}
/* Controls remain large enough for touch. */
.doc2026__controls button,
.doc2026__controls select,
.viewer4__controls button,
.viewer4__toolbar button,
.bx-controls-direction a,
.swiper-button-prev,
.swiper-button-next {
min-inline-size: 44px;
min-block-size: 44px;
touch-action: manipulation;
}
@media (max-width: 640px) {
.doc2026__thumbs,
.viewer4__thumbs {
gap: clamp(.5rem, 2.5vw, .875rem);
padding-block: .5rem;
}
.doc2026__thumb,
.viewer4__thumb {
scroll-snap-align: center;
}
}
@media (prefers-reduced-motion: reduce) {
.doc2026__thumbs,
.viewer4__thumbs { scroll-behavior: auto; }
.gallery-ux-managed,
.doc2026__thumb,
.viewer4__thumb,
.doc2026__thumb::after,
.viewer4__thumb::after,
.doc2026__image-wrap img,
.viewer4__stage img,
.viewer4__image-wrap img { transition: none !important; }
.gallery-ux-busy .doc2026__image-wrap::before,
.gallery-ux-busy .viewer4__stage::before,
.gallery-ux-busy .viewer4__image-wrap::before { animation: none; }
}
@media print {
.doc2026__thumbs-wrap,
.viewer4__thumbs,
.bx-controls,
.swiper-button-prev,
.swiper-button-next { display: none !important; }
}
/* END css/gallery-ux-modern-ui-phase5.css */
/* BEGIN css/buttons-modern-ui-phase6.css */
/* Modern UI Phase 6 — Buttons | var.11 grafo74 */
:root {
--button-height: 44px;
--button-radius: 12px;
--button-shadow: 0 7px 18px rgba(37, 63, 67, .16);
--button-shadow-hover: 0 11px 24px rgba(37, 63, 67, .22);
}
.main-block__button,
.io_button,
button.dropbtn,
.button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
min-height: var(--button-height);
border-radius: var(--button-radius);
border: 1px solid transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .45em;
padding: .65rem 1.25rem;
font-weight: 700;
line-height: 1.25;
text-align: center;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: transform .18s ease, box-shadow .18s ease,
background-color .18s ease, border-color .18s ease, color .18s ease;
}
.main-block__button { box-shadow: var(--button-shadow); }
.main-block__button_border {
color: var(--ds-color-primary, #0d5c63);
background: rgba(255,255,255,.94);
border-color: currentColor;
}
.main-block__button_white {
color: #0d5c63;
background: rgba(255,255,255,.94);
border-color: rgba(255,255,255,.72);
}
.main-block__button_green,
.io_button {
color: #fff;
background: #0d5c63;
border-color: #0d5c63;
}
.main-block__button_orange {
color: #fff;
background: #a52a2a;
border-color: #a52a2a;
}
@media (hover:hover) {
.main-block__button:hover,
.io_button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
transform: translateY(-2px);
box-shadow: var(--button-shadow-hover);
}
.main-block__button_border:hover,
.main-block__button_white:hover {
color: #fff;
background: #0d5c63;
border-color: #0d5c63;
}
.main-block__button_green:hover,
.io_button:hover { background: #094950; border-color: #094950; color:#fff; }
.main-block__button_orange:hover { background:#842020; border-color:#842020; color:#fff; }
}
.main-block__button:active,
.io_button:active,
button.dropbtn:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
transform: translateY(0) scale(.98);
box-shadow: 0 3px 9px rgba(37,63,67,.16);
}
.main-block__button:focus-visible,
.io_button:focus-visible,
button.dropbtn:focus-visible,
#upbutton:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
outline: 3px solid rgba(26, 144, 154, .4);
outline-offset: 3px;
}
button.dropbtn {
min-width: var(--button-height);
padding-inline: .75rem;
box-shadow: none;
}
.io_button_wrap { display:flex; justify-content:center; }
.io_button { width:min(100%, 28rem); }
#upbutton {
border-radius: 50%;
box-shadow: var(--button-shadow);
transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
-webkit-tap-highlight-color: transparent;
}
@media (hover:hover) {
#upbutton:hover { transform: translateY(-3px); box-shadow: var(--button-shadow-hover); }
}
@media (max-width: 600px) {
.main-block__buttons { gap: .65rem; margin-block: .5rem; }
.main-block__button { width:100%; margin:0; padding-inline:1rem; }
}
@media (prefers-reduced-motion: reduce) {
.main-block__button, .io_button, button.dropbtn, #upbutton,
input[type="button"], input[type="submit"], input[type="reset"] { transition:none; }
}
@media print {
.main-block__button, .io_button { box-shadow:none; border:1px solid #555; background:#fff!important; color:#000!important; }
#upbutton, button.dropbtn { display:none!important; }
}
/* END css/buttons-modern-ui-phase6.css */
/* BEGIN css/forms-modern-ui-phase7.css */
/* Modern UI Phase 7 — Forms
Version: var.12 grafo74
Scope: native and viewer form controls only. */
:root {
--mui-form-height: 44px;
--mui-form-radius: var(--radius-md, 12px);
--mui-form-border: rgba(16, 104, 92, 0.24);
--mui-form-border-hover: rgba(16, 104, 92, 0.48);
--mui-form-focus: rgba(20, 137, 120, 0.22);
--mui-form-bg: #fff;
--mui-form-text: #173f3a;
--mui-form-muted: #667c78;
--mui-form-accent: #148978;
}
/* Text inputs, search fields, textareas and native selects. */
:where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], textarea, select) {
box-sizing: border-box;
max-width: 100%;
min-height: var(--mui-form-height);
padding: 0.68rem 0.88rem;
border: 1px solid var(--mui-form-border);
border-radius: var(--mui-form-radius);
background-color: var(--mui-form-bg);
color: var(--mui-form-text);
font: inherit;
line-height: 1.35;
box-shadow: 0 1px 2px rgba(18, 62, 56, 0.04);
transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
:where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], textarea, select):hover:not(:disabled) {
border-color: var(--mui-form-border-hover);
}
:where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], textarea, select):focus-visible {
outline: none;
border-color: var(--mui-form-accent);
box-shadow: 0 0 0 4px var(--mui-form-focus);
}
:where(input, textarea)::placeholder {
color: var(--mui-form-muted);
opacity: 0.86;
}
textarea {
min-height: 7.5rem;
resize: vertical;
}
select {
padding-right: 2.35rem;
cursor: pointer;
}
:where(input, textarea, select):disabled {
cursor: not-allowed;
opacity: 0.62;
background-color: #f2f6f5;
}
/* Native checkbox and radio controls. */
:where(input[type="checkbox"], input[type="radio"]) {
width: 1.15rem;
height: 1.15rem;
margin: 0;
accent-color: var(--mui-form-accent);
cursor: pointer;
flex: 0 0 auto;
}
:where(input[type="checkbox"], input[type="radio"]):focus-visible {
outline: 3px solid var(--mui-form-focus);
outline-offset: 3px;
}
:where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
cursor: pointer;
}
/* Journal filter controls. */
.journal-filters__search,
.journal-filters__select {
width: 100%;
}
.journal-filters__label {
min-height: 38px;
gap: 0.65rem;
border-radius: 10px;
transition: background-color 150ms ease;
}
.journal-filters__label:hover {
background-color: rgba(20, 137, 120, 0.07);
}
.journal-filters__label:focus-within {
background-color: rgba(20, 137, 120, 0.09);
box-shadow: 0 0 0 3px var(--mui-form-focus);
}
/* Compact viewer selects should remain aligned with toolbar buttons. */
.doc2026__toolbar select,
.viewer-overlay select,
[data-viewer-overlay] select,
select[data-action="speed"] {
min-width: 5.8rem;
min-height: 44px;
padding-block: 0.55rem;
}
/* Dynamically generated viewer search and notes controls. */
:where(.viewer5-command__input, .viewer54-search__input, .viewer61-textsearch__input,
.viewer61-ocrpanel__text, .viewer63-pdfsearch__input, .viewer64-ai__input,
.viewer55-notes__text, [data-v156-folder-search], [data-v1624-search-input],
[data-kg-search]) {
width: 100%;
}
@media (max-width: 640px) {
:where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], textarea, select) {
font-size: 16px; /* prevents automatic zoom on mobile browsers */
}
.doc2026__toolbar select {
flex: 1 1 7rem;
}
}
@media (prefers-reduced-motion: reduce) {
:where(input, textarea, select, .journal-filters__label) {
transition: none !important;
}
}
@media print {
:where(input, textarea, select) {
border-color: #777 !important;
box-shadow: none !important;
background: transparent !important;
color: #000 !important;
}
}
/* END css/forms-modern-ui-phase7.css */
/* BEGIN css/animations-modern-ui-phase8.css */
/* Modern UI Phase 8 — Animations | var.13 grafo74 */
:root {
--motion-fast: 160ms;
--motion-base: 260ms;
--motion-slow: 420ms;
--motion-ease: cubic-bezier(.2,.7,.2,1);
--motion-ease-out: cubic-bezier(.16,1,.3,1);
}
html { scroll-behavior: smooth; }
/* Safe initial page entrance: never hides content. */
body.modern-ui-motion-ready .wrapper,
body.modern-ui-motion-ready .container,
body.modern-ui-motion-ready main {
animation: mui-page-enter var(--motion-slow) var(--motion-ease-out) both;
}
@keyframes mui-page-enter {
from { opacity: .86; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Progressive reveal. Content remains visible when JS is unavailable. */
.mui-reveal {
transition:
opacity var(--motion-slow) var(--motion-ease-out),
transform var(--motion-slow) var(--motion-ease-out);
}
body.modern-ui-motion-ready .mui-reveal:not(.mui-reveal-visible) {
opacity: 0;
transform: translateY(14px);
}
body.modern-ui-motion-ready .mui-reveal.mui-reveal-visible {
opacity: 1;
transform: translateY(0);
}
/* Staggered groups without changing layout. */
.mui-reveal:nth-child(2) { transition-delay: 45ms; }
.mui-reveal:nth-child(3) { transition-delay: 90ms; }
.mui-reveal:nth-child(4) { transition-delay: 135ms; }
.mui-reveal:nth-child(n/**/+5) { transition-delay: 180ms; }
/* Interactive micro-motion. */
a,
button,
input,
select,
textarea,
.item-service,
.item-practice,
.item-man,
.card,
.thumbnail,
[class*="thumb"] {
transition-duration: var(--motion-fast);
transition-timing-function: var(--motion-ease);
}
button:active,
[role="button"]:active,
.btn:active,
.button:active,
a[class*="btn"]:active,
a[class*="button"]:active {
transform: translateY(1px) scale(.985);
}
.item-service:hover,
.item-practice:hover,
.item-man:hover,
.card:hover {
transform: translateY(-3px);
}
/* Images fade in only after the browser has decoded them. */
img.mui-image-pending {
opacity: .001;
}
img.mui-image-ready {
opacity: 1;
transition: opacity var(--motion-base) ease;
}
/* Disclosure/menu transitions where supported. */
details > *:not(summary) {
animation: mui-disclosure var(--motion-base) var(--motion-ease-out) both;
}
@keyframes mui-disclosure {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Preserve viewer geometry and document controls. */
.viewer img,
.viewer-container img,
#doc2026Image,
.main-image,
.document-image {
transform: none;
}
@media (hover: none) {
.item-service:hover,
.item-practice:hover,
.item-man:hover,
.card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
transition-delay: 0ms !important;
}
body.modern-ui-motion-ready .mui-reveal,
body.modern-ui-motion-ready .mui-reveal:not(.mui-reveal-visible) {
opacity: 1 !important;
transform: none !important;
}
}
@media print {
*, *::before, *::after {
animation: none !important;
transition: none !important;
transform: none !important;
}
.mui-reveal,
img.mui-image-pending { opacity: 1 !important; }
}
/* END css/animations-modern-ui-phase8.css */
/* BEGIN css/var16-corrections.css */
/* var.16 grafo74 — approved article sheets, footer-teal controls, fullscreen thumbnails */
:root {
--site-footer-green: #0d5c63;
--site-footer-green-hover: #094950;
--article-sheet-bg: #f4faff;
--article-sheet-edge: rgba(128,174,201,.34);
}
/* A4-inspired sheets: 30/15/15/15 mm proportions, square corners. */
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child,
.article-paper-section > .Rules__container > .Rules__body > .text_hide_wrap > .item_text {
position: relative !important;
isolation: isolate !important;
box-sizing: border-box !important;
width: min(100%, 1120px) !important;
margin: 24px auto !important;
padding: clamp(34px, 7.1429cqw, 76px) clamp(24px, 7.1429cqw, 76px) clamp(34px, 7.1429cqw, 76px) clamp(86px, 14.2857cqw, 152px) !important;
overflow: hidden !important;
border: 1px solid var(--article-sheet-edge) !important;
border-radius: 0 !important;
background: radial-gradient(ellipse at 52% 43%, #fff 0%, #f8fcff 56%, #e7f4fb 100%) !important;
box-shadow: 0 24px 44px -25px rgba(31,57,72,.24), 0 8px 20px -15px rgba(31,57,72,.30), inset -18px -12px 34px rgba(115,177,214,.10) !important;
}
/* Always circular holes: explicit equal width/height circles repeated vertically. */
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::before,
.article-paper-section > .Rules__container > .Rules__body > .text_hide_wrap > .item_text::before {
content: "" !important;
position: absolute !important;
z-index: 7 !important;
top: 34px !important;
bottom: 34px !important;
left: clamp(22px, 3.45cqw, 42px) !important;
width: 20px !important;
pointer-events: none !important;
background-image: radial-gradient(circle 8px at 10px 10px,
rgba(104,113,119,.78) 0 5px,
rgba(190,199,205,.72) 5.5px 7px,
rgba(255,255,255,.98) 7.5px 8.5px,
transparent 9px) !important;
background-size: 20px clamp(92px, 12.4cqw, 132px) !important;
background-position: 0 0 !important;
background-repeat: repeat-y !important;
filter: drop-shadow(1px 2px 2px rgba(33,47,56,.20)) !important;
}
/* Lifted paper corner: white face, blue underside, clear cast shadow. */
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::after,
.article-paper-section > .Rules__container > .Rules__body > .text_hide_wrap > .item_text::after {
content: "" !important;
position: absolute !important;
z-index: 8 !important;
top: -1px !important;
right: -1px !important;
width: clamp(68px, 9.6cqw, 108px) !important;
height: clamp(68px, 9.6cqw, 108px) !important;
pointer-events: none !important;
clip-path: polygon(28% 0,100% 0,100% 100%,78% 79%,26% 70%) !important;
background: linear-gradient(225deg,
transparent 0 32%,
#fff 33% 57%,
#dceef8 58% 69%,
#9fc8df 70% 100%) !important;
box-shadow: -15px 17px 22px rgba(45,76,94,.23), -5px 6px 8px rgba(45,76,94,.17) !important;
}
/* One canonical green: exactly the established footer teal. */
.article-index-page .main-block__button,
.article-detail-page .main-block__button,
.article-detail-page .io_button,
.article-index-page .io_button,
.article-detail-page button,
.article-index-page button,
.main-block__button_green,
.io_button {
border-color: var(--site-footer-green) !important;
background: var(--site-footer-green) !important;
color: #fff !important;
}
.article-index-page .main-block__button:hover,
.article-detail-page .main-block__button:hover,
.article-detail-page .io_button:hover,
.article-index-page .io_button:hover,
.main-block__button_green:hover,
.io_button:hover {
border-color: var(--site-footer-green-hover) !important;
background: var(--site-footer-green-hover) !important;
color: #fff !important;
}
/* “Читать больше” follows its text instead of spanning the section. */
.article-index-page .io_button_wrap,
.article-detail-page .io_button_wrap {
justify-content: center !important;
}
.article-index-page .io_button,
.article-detail-page .io_button,
.article-index-page .text_hide_wrap + .io_button_wrap .io_button,
.article-detail-page .text_hide_wrap + .io_button_wrap .io_button {
width: auto !important;
max-width: max-content !important;
min-width: 0 !important;
padding-inline: 1.35rem !important;
white-space: nowrap !important;
}
/* Fullscreen thumbnail recovery on the three affected pages. */
body.three-pages-thumb-stable .viewer2026-overlay__thumbs,
body.three-pages-thumb-stable .viewer28__thumbs,
body.three-pages-thumb-stable .viewer29__thumbs,
body.three-pages-thumb-stable .viewer30__thumbs,
body.three-pages-thumb-stable .viewer4.open .viewer4__thumbs {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
min-height: 112px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
}
body.three-pages-thumb-stable .viewer2026-overlay__thumb,
body.three-pages-thumb-stable .viewer28__thumbs .viewer2026-overlay__thumb,
body.three-pages-thumb-stable .viewer29__thumbs .viewer2026-overlay__thumb,
body.three-pages-thumb-stable .viewer30__thumbs .viewer2026-overlay__thumb,
body.three-pages-thumb-stable .viewer4.open .viewer4__thumb {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
overflow: hidden !important;
}
body.three-pages-thumb-stable .viewer2026-overlay__thumb img,
body.three-pages-thumb-stable .viewer28__thumbs img,
body.three-pages-thumb-stable .viewer29__thumbs img,
body.three-pages-thumb-stable .viewer30__thumbs img,
body.three-pages-thumb-stable .viewer4.open .viewer4__thumb img {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
filter: none !important;
mix-blend-mode: normal !important;
transform: none !important;
object-fit: contain !important;
background: #fff !important;
position: relative !important;
z-index: 3 !important;
}
@media (max-width: 720px) {
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child,
.article-paper-section > .Rules__container > .Rules__body > .text_hide_wrap > .item_text {
padding: 30px 20px 30px 68px !important;
}
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::before,
.article-paper-section > .Rules__container > .Rules__body > .text_hide_wrap > .item_text::before {
left: 18px !important;
width: 18px !important;
background-image: radial-gradient(circle 7px at 9px 9px, rgba(104,113,119,.78) 0 4.5px, rgba(190,199,205,.72) 5px 6px, #fff 6.5px 7.5px, transparent 8px) !important;
background-size: 18px 96px !important;
}
.article-index-page .io_button,
.article-detail-page .io_button { width: auto !important; }
}
@media print {
.article-paper-section > .Rules__container > .Rules__body > .text_hide_wrap > .item_text {
width: 210mm !important;
min-height: 297mm !important;
padding: 15mm 15mm 15mm 30mm !important;
margin: 0 auto !important;
border: 0 !important;
background: #fff !important;
box-shadow: none !important;
}
.article-paper-section > .Rules__container > .Rules__body > .text_hide_wrap > .item_text::before,
.article-paper-section > .Rules__container > .Rules__body > .text_hide_wrap > .item_text::after { display:none !important; }
}
/* END css/var16-corrections.css */
/* ===== css/common-modern-final-chain-v4034.css?v=4034 ===== */
/* ===== css/var17-final-corrections.css ===== */
/* var.17 grafo74 — approved correction set */
:root {
--grafo-green: #0d5c63;
--grafo-green-hover: #094950;
--grafo-green-focus: rgba(13,92,99,.32);
--article-paper-bg: #f4faff;
--article-paper-edge: rgba(128,174,201,.34);
}
/* One green everywhere: the established footer colour. */
a.main-block__button,
button.main-block__button,
.io_button,
.btn_open,
.btn_close,
.main-block__button_green,
.item-service__button,
.article-index-page button,
.article-detail-page button,
.article-index-page [role="button"],
.article-detail-page [role="button"] {
border-color: var(--grafo-green) !important;
background: var(--grafo-green) !important;
background-image: none !important;
color: #fff !important;
}
a.main-block__button:hover,
button.main-block__button:hover,
.io_button:hover,
.btn_open:hover,
.btn_close:hover,
.main-block__button_green:hover,
.item-service__button:hover,
.article-index-page button:hover,
.article-detail-page button:hover {
border-color: var(--grafo-green-hover) !important;
background: var(--grafo-green-hover) !important;
color: #fff !important;
}
a.main-block__button:focus-visible,
button.main-block__button:focus-visible,
.io_button:focus-visible,
.article-index-page button:focus-visible,
.article-detail-page button:focus-visible {
outline: 3px solid var(--grafo-green-focus) !important;
outline-offset: 3px !important;
}
/* Read-more buttons follow text width. */
.io_button_wrap { justify-content: center !important; }
.io_button,
.btn_open,
.btn_close {
display: inline-flex !important;
width: auto !important;
max-width: max-content !important;
min-width: 0 !important;
padding: .72em 1.3em !important;
white-space: nowrap !important;
}
/* Approved paper: square sheet, no folded corner. */
.article-paper-section { container-type: inline-size; }
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child,
.article-paper-section > .Rules__container > .Rules__body > .io_item > .io_item_wrap > .text_hide_wrap > .item_text,
.article-paper-section > .Rules__container > .Rules__body > .text_hide_wrap > .item_text {
position: relative !important;
isolation: isolate !important;
box-sizing: border-box !important;
width: min(100%, 1120px) !important;
margin: 24px auto !important;
padding: clamp(34px,7.1429cqw,76px) clamp(24px,7.1429cqw,76px) clamp(34px,7.1429cqw,76px) clamp(86px,14.2857cqw,152px) !important;
overflow: hidden !important;
border: 1px solid var(--article-paper-edge) !important;
border-radius: 0 !important;
background: radial-gradient(ellipse at 52% 43%,#fff 0%,#f8fcff 56%,#e7f4fb 100%) !important;
box-shadow: 0 24px 44px -25px rgba(31,57,72,.24),0 8px 20px -15px rgba(31,57,72,.30),inset -18px -12px 34px rgba(115,177,214,.10) !important;
}
/* Disable every previous fold. */
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::after,
.article-paper-section > .Rules__container > .Rules__body > .io_item > .io_item_wrap > .text_hide_wrap > .item_text::after,
.article-paper-section > .Rules__container > .Rules__body > .text_hide_wrap > .item_text::after {
display: none !important;
content: none !important;
}
/* Circular holes: fixed square tile and circle geometry. */
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::before,
.article-paper-section > .Rules__container > .Rules__body > .io_item > .io_item_wrap > .text_hide_wrap > .item_text::before,
.article-paper-section > .Rules__container > .Rules__body > .text_hide_wrap > .item_text::before {
content: "" !important;
position: absolute !important;
z-index: 7 !important;
top: 34px !important;
bottom: 34px !important;
left: clamp(22px,3.45cqw,42px) !important;
width: 20px !important;
pointer-events: none !important;
background-image: radial-gradient(circle 8px at 10px 10px,rgba(104,113,119,.78) 0 5px,rgba(190,199,205,.72) 5.5px 7px,rgba(255,255,255,.98) 7.5px 8.5px,transparent 9px) !important;
background-size: 20px clamp(92px,12.4cqw,132px) !important;
background-position: 0 0 !important;
background-repeat: repeat-y !important;
filter: drop-shadow(1px 2px 2px rgba(33,47,56,.20)) !important;
}
.article-paper-section .io_item_wrap { overflow: hidden !important; }
.article-paper-section .io_item.open .io_item_wrap { max-height: none !important; overflow: visible !important; }
.article-paper-section .text_hide_wrap { overflow: visible !important; }
.article-paper-section .text_hide_wrap > .item_text > * { position: relative; z-index: 3; }
/* Fullscreen thumbnails must show actual page previews. */
.three-pages-thumb-stable .viewer2026-overlay__thumbs,
.three-pages-thumb-stable .viewer28__thumbs,
.three-pages-thumb-stable .viewer29__thumbs,
.three-pages-thumb-stable .viewer30__thumbs,
.three-pages-thumb-stable .viewer4__thumbs {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
min-height: 116px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
}
.three-pages-thumb-stable .viewer2026-overlay__thumb,
.three-pages-thumb-stable .viewer4__thumb {
flex: 0 0 88px !important;
width: 88px !important;
min-height: 104px !important;
padding: 6px !important;
overflow: hidden !important;
border-radius: 10px !important;
background: rgba(255,255,255,.94) !important;
}
.three-pages-thumb-stable .viewer2026-overlay__thumb img,
.three-pages-thumb-stable .viewer4__thumb img {
display: block !important;
width: 100% !important;
height: 78px !important;
object-fit: contain !important;
border-radius: 4px !important;
background: #fff !important;
filter: none !important;
opacity: 1 !important;
visibility: visible !important;
mix-blend-mode: normal !important;
transform: none !important;
}
.three-pages-thumb-stable .viewer2026-overlay__thumb::before,
.three-pages-thumb-stable .viewer2026-overlay__thumb::after,
.three-pages-thumb-stable .viewer4__thumb::before,
.three-pages-thumb-stable .viewer4__thumb::after { display:none !important; content:none !important; }
@media (max-width:720px) {
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child,
.article-paper-section > .Rules__container > .Rules__body > .io_item > .io_item_wrap > .text_hide_wrap > .item_text,
.article-paper-section > .Rules__container > .Rules__body > .text_hide_wrap > .item_text {
padding: 30px 20px 30px 68px !important;
}
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::before,
.article-paper-section > .Rules__container > .Rules__body > .io_item > .io_item_wrap > .text_hide_wrap > .item_text::before,
.article-paper-section > .Rules__container > .Rules__body > .text_hide_wrap > .item_text::before {
left: 18px !important;
width: 18px !important;
background-image: radial-gradient(circle 7px at 9px 9px,rgba(104,113,119,.78) 0 4.5px,rgba(190,199,205,.72) 5px 6px,#fff 6.5px 7.5px,transparent 8px) !important;
background-size: 18px 96px !important;
}
}
@media print {
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child,
.article-paper-section > .Rules__container > .Rules__body > .io_item > .io_item_wrap > .text_hide_wrap > .item_text,
.article-paper-section > .Rules__container > .Rules__body > .text_hide_wrap > .item_text {
width:210mm !important; min-height:297mm !important; padding:15mm 15mm 15mm 30mm !important;
margin:0 auto !important; border:0 !important; background:#fff !important; box-shadow:none !important;
}
.article-paper-section .item_text::before { display:none !important; }
}
/* ===== css/common-modern-secondary-v4032.css ===== */
/* SOURCE: css/var18-button-and-article-state-fix.css */
/* var.18 grafo74 — unified green buttons and correct read-more states */
:root {
--grafo-footer-green: #0d5c63;
--grafo-footer-green-hover: #094950;
--grafo-footer-green-active: #073c42;
--grafo-footer-green-focus: rgba(13, 92, 99, .34);
--grafo-paper-bg: #f4faff;
--grafo-paper-edge: rgba(128, 174, 201, .34);
}
/* The footer green is the single interactive colour across the site. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.main-block__button,
.item-service__button,
.io_button,
.btn_open,
.btn_close,
[role="button"].button,
[role="button"].btn {
border-color: var(--grafo-footer-green) !important;
background-color: var(--grafo-footer-green) !important;
background-image: none !important;
color: #fff !important;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.main-block__button:hover,
.item-service__button:hover,
.io_button:hover,
.btn_open:hover,
.btn_close:hover,
[role="button"].button:hover,
[role="button"].btn:hover {
border-color: var(--grafo-footer-green-hover) !important;
background-color: var(--grafo-footer-green-hover) !important;
color: #fff !important;
}
button:active,
.main-block__button:active,
.item-service__button:active,
.io_button:active {
background-color: var(--grafo-footer-green-active) !important;
}
button:focus-visible,
input:focus-visible,
.main-block__button:focus-visible,
.item-service__button:focus-visible,
.io_button:focus-visible {
outline: 3px solid var(--grafo-footer-green-focus) !important;
outline-offset: 3px !important;
}
/* Read-more controls: exactly one button is visible for each state. */
.io_button_wrap {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 0 !important;
margin-top: 14px !important;
}
.io_button,
.btn_open,
.btn_close {
width: auto !important;
min-width: 0 !important;
max-width: max-content !important;
padding: .72em 1.3em !important;
white-space: nowrap !important;
}
.io_item:not(.open) > .io_button_wrap > .btn_close {
display: none !important;
}
.io_item:not(.open) > .io_button_wrap > .btn_open {
display: inline-flex !important;
}
.io_item.open > .io_button_wrap > .btn_close {
display: inline-flex !important;
}
.io_item.open > .io_button_wrap > .btn_open {
display: none !important;
}
/* Expanded text uses the same approved paper component. */
.article-paper-section .io_item > .io_item_wrap {
width: 100% !important;
}
.article-paper-section .io_item > .io_item_wrap > .item_text {
position: relative !important;
isolation: isolate !important;
box-sizing: border-box !important;
width: min(100%, 1120px) !important;
margin: 24px auto !important;
padding: clamp(34px, 7.1429cqw, 76px)
clamp(24px, 7.1429cqw, 76px)
clamp(34px, 7.1429cqw, 76px)
clamp(86px, 14.2857cqw, 152px) !important;
overflow: hidden !important;
border: 1px solid var(--grafo-paper-edge) !important;
border-radius: 0 !important;
background: radial-gradient(ellipse at 52% 43%, #fff 0%, #f8fcff 56%, #e7f4fb 100%) !important;
box-shadow:
0 24px 44px -25px rgba(31, 57, 72, .24),
0 8px 20px -15px rgba(31, 57, 72, .30),
inset -18px -12px 34px rgba(115, 177, 214, .10) !important;
}
.article-paper-section .io_item > .io_item_wrap > .item_text::after {
display: none !important;
content: none !important;
}
.article-paper-section .io_item > .io_item_wrap > .item_text::before {
content: "" !important;
position: absolute !important;
z-index: 7 !important;
top: 34px !important;
bottom: 34px !important;
left: clamp(22px, 3.45cqw, 42px) !important;
width: 20px !important;
pointer-events: none !important;
background-image: radial-gradient(circle 8px at 10px 10px,
rgba(104, 113, 119, .78) 0 5px,
rgba(190, 199, 205, .72) 5.5px 7px,
rgba(255, 255, 255, .98) 7.5px 8.5px,
transparent 9px) !important;
background-size: 20px clamp(92px, 12.4cqw, 132px) !important;
background-repeat: repeat-y !important;
filter: drop-shadow(1px 2px 2px rgba(33, 47, 56, .20)) !important;
}
.article-paper-section .io_item > .io_item_wrap > .item_text > * {
position: relative;
z-index: 3;
}
.article-paper-section .io_item:not(.open) > .io_item_wrap > .item_text {
margin-bottom: 0 !important;
}
.article-paper-section .io_item:not(.open) .io_trans {
z-index: 8 !important;
}
@media (max-width: 720px) {
.article-paper-section .io_item > .io_item_wrap > .item_text {
padding: 30px 20px 30px 68px !important;
}
.article-paper-section .io_item > .io_item_wrap > .item_text::before {
left: 18px !important;
width: 18px !important;
background-image: radial-gradient(circle 7px at 9px 9px,
rgba(104, 113, 119, .78) 0 4.5px,
rgba(190, 199, 205, .72) 5px 6px,
#fff 6.5px 7.5px,
transparent 8px) !important;
background-size: 18px 96px !important;
}
}
@media print {
.io_button_wrap { display: none !important; }
.article-paper-section .io_item > .io_item_wrap > .item_text {
width: 210mm !important;
min-height: 297mm !important;
margin: 0 auto !important;
padding: 15mm 15mm 15mm 30mm !important;
border: 0 !important;
background: #fff !important;
box-shadow: none !important;
}
.article-paper-section .io_item > .io_item_wrap > .item_text::before {
display: none !important;
}
}
/* SOURCE: css/var19-article-controls-and-alignment.css */
/* var.19 grafo74 — reliable article controls, aligned paper widths, unified footer green */
:root {
--grafo-unified-green: #0d5c63;
--grafo-unified-green-hover: #094950;
--grafo-unified-green-active: #073c42;
--grafo-paper-max-width: 1120px;
--grafo-paper-bg: #f4faff;
--grafo-paper-edge: rgba(128, 174, 201, .34);
}
/* One green for every actual button/control. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.main-block__button,
.item-service__button,
.io_button,
.btn_open,
.btn_close,
.button,
.btn,
.viewer-controls button,
.viewer-toolbar button,
.controls button,
[data-pro-toggle],
[role="button"].button,
[role="button"].btn {
background: var(--grafo-unified-green) !important;
background-color: var(--grafo-unified-green) !important;
background-image: none !important;
border-color: var(--grafo-unified-green) !important;
color: #fff !important;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.main-block__button:hover,
.item-service__button:hover,
.io_button:hover,
.button:hover,
.btn:hover,
.viewer-controls button:hover,
.viewer-toolbar button:hover,
.controls button:hover,
[data-pro-toggle]:hover {
background: var(--grafo-unified-green-hover) !important;
border-color: var(--grafo-unified-green-hover) !important;
color: #fff !important;
}
button:active,
.io_button:active,
.button:active,
.btn:active {
background: var(--grafo-unified-green-active) !important;
}
/* One horizontal grid for the initial article, collapsed and expanded pages. */
.article-paper-section > .Rules__container {
box-sizing: border-box !important;
width: min(calc(100% - 32px), var(--grafo-paper-max-width)) !important;
max-width: var(--grafo-paper-max-width) !important;
margin-inline: auto !important;
padding-inline: 0 !important;
}
.article-paper-section > .Rules__container > .Rules__body,
.article-paper-section .text_hide_wrap,
.article-paper-section .io_item,
.article-paper-section .io_item_wrap {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin-inline: 0 !important;
}
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child,
.article-paper-section .io_item_wrap > .item_text {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin: 24px 0 !important;
padding: clamp(34px, 6vw, 76px)
clamp(24px, 6vw, 76px)
clamp(34px, 6vw, 76px)
clamp(86px, 12vw, 152px) !important;
overflow: hidden !important;
border: 1px solid var(--grafo-paper-edge) !important;
border-radius: 0 !important;
background: radial-gradient(ellipse at 52% 43%, #fff 0%, #f8fcff 56%, #e7f4fb 100%) !important;
box-shadow:
0 24px 44px -25px rgba(31, 57, 72, .24),
0 8px 20px -15px rgba(31, 57, 72, .30),
inset -18px -12px 34px rgba(115, 177, 214, .10) !important;
}
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::after,
.article-paper-section .io_item_wrap > .item_text::after {
display: none !important;
content: none !important;
}
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::before,
.article-paper-section .io_item_wrap > .item_text::before {
content: "" !important;
position: absolute !important;
z-index: 7 !important;
top: 34px !important;
bottom: 34px !important;
left: clamp(22px, 3.4vw, 42px) !important;
width: 20px !important;
aspect-ratio: auto !important;
pointer-events: none !important;
background-image: radial-gradient(circle 8px at 10px 10px,
rgba(104, 113, 119, .78) 0 5px,
rgba(190, 199, 205, .72) 5.5px 7px,
rgba(255, 255, 255, .98) 7.5px 8.5px,
transparent 9px) !important;
background-size: 20px clamp(92px, 11vw, 132px) !important;
background-repeat: repeat-y !important;
filter: drop-shadow(1px 2px 2px rgba(33, 47, 56, .20)) !important;
}
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child,
.article-paper-section .io_item_wrap > .item_text {
position: relative !important;
isolation: isolate !important;
}
.article-paper-section .io_item_wrap > .item_text > *,
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child > * {
position: relative;
z-index: 3;
}
/* Reliable collapsed/expanded state. */
.article-paper-section .io_item_wrap {
position: relative !important;
overflow: hidden !important;
transition: max-height .35s ease !important;
}
.article-paper-section .io_item:not(.open) > .io_item_wrap {
max-height: 190px !important;
}
.article-paper-section .io_item.open > .io_item_wrap {
max-height: none !important;
overflow: visible !important;
}
.article-paper-section .io_trans {
position: absolute !important;
inset: auto 0 0 !important;
height: 90px !important;
pointer-events: none !important;
background: linear-gradient(to bottom, rgba(244,250,255,0), rgba(244,250,255,.98)) !important;
}
.article-paper-section .io_item.open .io_trans {
display: none !important;
}
.article-paper-section .io_button_wrap {
display: flex !important;
justify-content: center !important;
align-items: center !important;
margin: 14px 0 34px !important;
}
.article-paper-section .io_button {
width: auto !important;
min-width: 0 !important;
max-width: max-content !important;
padding: .72em 1.3em !important;
white-space: nowrap !important;
cursor: pointer !important;
}
.article-paper-section .io_item:not(.open) .btn_close,
.article-paper-section .io_item.open .btn_open {
display: none !important;
}
.article-paper-section .io_item:not(.open) .btn_open,
.article-paper-section .io_item.open .btn_close {
display: inline-flex !important;
}
@media (max-width: 720px) {
.article-paper-section > .Rules__container {
width: min(calc(100% - 20px), var(--grafo-paper-max-width)) !important;
}
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child,
.article-paper-section .io_item_wrap > .item_text {
padding: 30px 20px 30px 68px !important;
}
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::before,
.article-paper-section .io_item_wrap > .item_text::before {
left: 18px !important;
width: 18px !important;
background-image: radial-gradient(circle 7px at 9px 9px,
rgba(104, 113, 119, .78) 0 4.5px,
rgba(190, 199, 205, .72) 5px 6px,
#fff 6.5px 7.5px,
transparent 8px) !important;
background-size: 18px 96px !important;
}
}
@media print {
.article-paper-section .io_button_wrap { display: none !important; }
.article-paper-section > .Rules__container { width: 210mm !important; max-width: 210mm !important; }
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child,
.article-paper-section .io_item_wrap > .item_text {
min-height: 297mm !important;
margin: 0 !important;
padding: 15mm 15mm 15mm 30mm !important;
border: 0 !important;
background: #fff !important;
box-shadow: none !important;
}
.article-paper-section .io_item_wrap { max-height: none !important; overflow: visible !important; }
.article-paper-section .io_trans,
.article-paper-section .item_text::before,
.article-paper-section .items__item::before { display: none !important; }
}
/* SOURCE: css/var21-unified-buttons-and-header-cleanup.css */
/* var.21 grafo74 — remove obsolete header down button and force one footer green */
:root {
--grafo-button-green: #0d5c63;
}
/* Every visual button uses exactly the footer green in every interaction state. */
:is(
button,
input[type="button"], input[type="submit"], input[type="reset"],
a.main-block__button, a.item-service__button,
.main-block__button, .item-service__button,
.io_button, .btn_open, .btn_close,
.button, .btn,
.w3-button, .w3-btn,
.w3-green, .w3-light-green, .w3-teal,
.viewer-controls button, .viewer-toolbar button, .controls button,
[data-pro-toggle], [role="button"]
),
:is(
button,
input[type="button"], input[type="submit"], input[type="reset"],
a.main-block__button, a.item-service__button,
.main-block__button, .item-service__button,
.io_button, .btn_open, .btn_close,
.button, .btn,
.w3-button, .w3-btn,
.w3-green, .w3-light-green, .w3-teal,
.viewer-controls button, .viewer-toolbar button, .controls button,
[data-pro-toggle], [role="button"]
):is(:hover, :focus, :focus-visible, :active) {
background: var(--grafo-button-green) !important;
background-color: var(--grafo-button-green) !important;
background-image: none !important;
border-color: var(--grafo-button-green) !important;
color: #fff !important;
filter: none !important;
}
/* Old header triangle is no longer part of the interface. Defensive fallback for cached HTML. */
.header .dropdown > .dropbtn,
.topnav > .dropdown > .dropbtn {
display: none !important;
}
/* SOURCE: css/dark-mode-modern-ui-phase10.css */
/* Modern UI Phase 10 — Dark Mode | var.23 grafo74 */
:root {
color-scheme: light;
--dm-bg: #f6f8f8;
--dm-surface: #ffffff;
--dm-surface-soft: #eef6f7;
--dm-text: #17212b;
--dm-muted: #52606d;
--dm-border: rgba(13, 92, 99, .22);
--dm-shadow: 0 14px 34px rgba(16, 35, 42, .14);
--dm-accent: #0d5c63;
--dm-accent-hover: #0d5c63;
}
html[data-theme="dark"] {
color-scheme: dark;
--dm-bg: #101719;
--dm-surface: #172226;
--dm-surface-soft: #1d2d31;
--dm-text: #edf5f5;
--dm-muted: #b7c6c8;
--dm-border: rgba(143, 207, 211, .24);
--dm-shadow: 0 16px 36px rgba(0, 0, 0, .42);
--dm-accent: #0d5c63;
--dm-accent-hover: #0d5c63;
}
html, body { background-color: var(--dm-bg); color: var(--dm-text); }
body, main, section, article, .w3-content, .content, .container { transition: background-color .24s ease, color .24s ease, border-color .24s ease; }
html[data-theme="dark"] {
background: #101719 url("../img/parallax0.webp") center center / cover fixed no-repeat;
}
html[data-theme="dark"] body {
background-color: transparent !important;
background-image: url("../img/parallax0.webp") !important;
background-position: center center !important;
background-size: cover !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
}
html[data-theme="dark"] :where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,legend,caption,small,strong,b,span:not(.pdf-label):not(.viewer-page-label)) { color: inherit; }
html[data-theme="dark"] :where(a:not(.w3-button):not(.button):not(.btn):not([class*="button"])) { color: #8fd0d4; }
html[data-theme="dark"] :where(.w3-white,.item,.card,.service-card,.practice-card,.man-card,.content-card,.article-sheet,.article-paper,.article-page,.paper-page,.item_text,.news-item,.journal-item,.viewer-panel,.viewer-toolbar,.viewer-thumbnails,.gallery-strip,.modal-content,.dropdown-content) {
background-color: var(--dm-surface) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
box-shadow: var(--dm-shadow);
}
html[data-theme="dark"] :where(input,textarea,select) {
background: #111b1e !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html[data-theme="dark"] :where(input,textarea)::placeholder { color: #91a5a8; }
html[data-theme="dark"] table { color: var(--dm-text); border-color: var(--dm-border); }
html[data-theme="dark"] :where(th,td) { border-color: var(--dm-border) !important; }
html[data-theme="dark"] :where(.article-sheet,.article-paper,.article-page,.paper-page,.readmore-sheet,.readmore-expanded) {
background: linear-gradient(145deg, #1c2a2e, #172226) !important;
color: var(--dm-text) !important;
}
html[data-theme="dark"] :where(.article-sheet,.article-paper,.article-page,.paper-page,.readmore-sheet,.readmore-expanded)::before {
filter: brightness(.74);
}
/* Documents and scanned pages must remain visually authentic. */
html[data-theme="dark"] :where(.viewer-stage,.document-stage,.pdf-stage,.main-document,.page-canvas) { background: #0a0e10 !important; }
html[data-theme="dark"] :where(.viewer-stage img,.document-stage img,.pdf-stage img,.main-document img,canvas) { filter: none !important; }
html[data-theme="dark"] footer, html[data-theme="dark"] .footer, html[data-theme="dark"] #footer {
background: #0d5c63 !important;
color: #fff !important;
}
html[data-theme="dark"] footer a, html[data-theme="dark"] .footer a, html[data-theme="dark"] #footer a { color: #fff !important; }
/* Keep all action buttons in the approved footer green in both themes. */
:where(button,.button,.btn,.w3-button,input[type="button"],input[type="submit"],a[class*="button"],a[class*="btn"]) {
--button-green: #0d5c63;
}
html[data-theme="dark"] :where(button,.button,.btn,.w3-button,input[type="button"],input[type="submit"],a[class*="button"],a[class*="btn"]):not(.theme-toggle) {
background-color: #0d5c63 !important;
background-image: none !important;
color: #fff !important;
border-color: rgba(255,255,255,.25) !important;
}
.theme-toggle {
position: fixed;
left: max(14px, env(safe-area-inset-left));
right: auto;
top: max(14px, env(safe-area-inset-top));
z-index: 2147483000;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid rgba(255,255,255,.35);
border-radius: 50%;
background: #0d5c63 !important;
color: #fff !important;
box-shadow: 0 8px 22px rgba(0,0,0,.28);
cursor: pointer;
font-size: 22px;
line-height: 1;
}
.theme-toggle:hover, .theme-toggle:focus-visible, .theme-toggle:active { background: #0d5c63 !important; transform: none; }
.theme-toggle:focus-visible { outline: 3px solid rgba(143,208,212,.75); outline-offset: 3px; }
html[data-theme="dark"] .theme-toggle { border-color: rgba(255,255,255,.45); }
@media (max-width: 700px) {
.theme-toggle { width: 42px; height: 42px; left: 10px; right:auto; top: 10px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
html, body, main, section, article, .w3-content, .content, .container { transition: none !important; }
}
@media print {
.theme-toggle { display: none !important; }
html, html[data-theme="dark"], body { color-scheme: light !important; background: #fff !important; color: #000 !important; }
}
/* var108 readability */
html[data-theme="dark"] .bgimg-1,
html[data-theme="dark"] .bgimg-2,
html[data-theme="dark"] .bgimg-3{
background-image:none !important;
background:transparent !important;
}
html[data-theme="dark"] #documents-entry,
html[data-theme="dark"] .w3-content,
html[data-theme="dark"] .w3-card,
html[data-theme="dark"] .w3-panel{
background-color: var(--dm-surface) !important;
}
/* SOURCE: css/icons-modern-ui-phase11.css */
/* Modern UI Phase 11 — Icons | var.24 grafo74 */
:root {
--ui-icon-size: 1.1em;
--ui-icon-stroke: 2;
--ui-icon-gap: .48em;
--ui-icon-muted: currentColor;
}
.ui-icon {
width: var(--ui-icon-size);
height: var(--ui-icon-size);
flex: 0 0 var(--ui-icon-size);
display: inline-block;
vertical-align: -.18em;
color: inherit;
stroke: currentColor;
stroke-width: var(--ui-icon-stroke);
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
pointer-events: none;
}
.ui-icon--filled { fill: currentColor; stroke: none; }
.ui-has-icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: var(--ui-icon-gap);
}
.ui-icon-only {
display: inline-grid !important;
place-items: center;
line-height: 1 !important;
}
.ui-icon-only > .ui-icon {
width: 1.25rem;
height: 1.25rem;
margin: 0;
}
/* Keep old glyphs available to assistive technology but visually remove them. */
.ui-icon-only > .ui-icon-legacy-glyph {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Header/menu icon */
a.icon.ui-icon-only {
min-width: 44px;
min-height: 44px;
padding: .55rem !important;
}
/* Viewer controls */
.viewer-toolbar button .ui-icon,
.doc-controls button .ui-icon,
.viewer-controls button .ui-icon,
.viewer-controls a .ui-icon,
button[onclick*="prevDoc"] .ui-icon,
button[onclick*="nextDoc"] .ui-icon {
width: 1.15rem;
height: 1.15rem;
}
/* Contact rows: icons line up instead of changing text baseline. */
.contacts-footer__item.ui-has-icon,
a[href^="mailto:"].ui-has-icon,
a[href^="tel:"].ui-has-icon {
justify-content: flex-start;
}
.contacts-footer__item .ui-icon {
width: 1rem;
height: 1rem;
opacity: .96;
}
/* Text actions */
.io_button.ui-has-icon,
.article-toggle.ui-has-icon,
[data-article-action].ui-has-icon,
.theme-toggle.ui-has-icon {
gap: .42rem;
}
/* Scroll arrows use the same vector system. */
.scroll-arrow .ui-icon,
.scroll-to-top .ui-icon,
.back-to-top .ui-icon,
a[href="#top"] .ui-icon,
button[aria-label*="Вверх"] .ui-icon,
button[title*="Вверх"] .ui-icon {
width: 1.45rem;
height: 1.45rem;
}
/* Dark mode: icons inherit the already-approved foreground color. */
html[data-theme="dark"] .ui-icon,
body.dark-mode .ui-icon {
color: inherit;
filter: none;
}
/* High contrast and keyboard focus remain obvious. */
@media (forced-colors: active) {
.ui-icon { forced-color-adjust: auto; }
}
@media (prefers-reduced-motion: reduce) {
.ui-icon { transition: none !important; animation: none !important; }
}
@media print {
.ui-icon { filter: none !important; }
.theme-toggle, .scroll-arrow, .scroll-to-top, .back-to-top { display: none !important; }
}
/* var.25 fix — the responsive menu trigger must never appear beside a fully visible menu. */
.topnav > .icon.ui-icon-only {
display: none !important;
}
@media screen and (max-width: 770px) {
.topnav > .icon.ui-icon-only {
display: inline-grid !important;
}
}
@media print {
.topnav > .icon.ui-icon-only {
display: none !important;
}
}
/* SOURCE: css/loading-experience-modern-ui-phase12.css */
/* Modern UI Phase 12 — Loading Experience | var.30 navigation performance fix */
:root {
--loading-accent: #0d5c63;
--loading-surface: #f7faf9;
--loading-track: rgba(13, 92, 99, .18);
}
html[data-theme="dark"] {
--loading-surface: #10191b;
--loading-track: rgba(255, 255, 255, .16);
}
/* Thin, non-blocking progress indicator. */
html.ui-loading::before {
content: "";
position: fixed;
z-index: 2147483646;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
var(--loading-accent) 18%,
var(--loading-accent) 58%,
transparent 78%);
transform: translateX(-75%);
animation: grafo-loading-progress 1.05s ease-in-out infinite;
pointer-events: none;
}
html.ui-loading body {
background-color: var(--loading-surface);
}
/* var.30: loading state never hides or delays page content. */
html.ui-loading body > :not(script),
html.ui-ready body > :not(script) {
opacity: 1;
}
/* Image loading states are subtle and preserve layout. */
img.ui-image-pending {
opacity: .35;
filter: saturate(.7);
transition: opacity .28s ease, filter .28s ease;
}
img.ui-image-ready {
opacity: 1;
filter: none;
}
img.ui-image-error {
opacity: .7;
}
/* Viewers and embedded documents get a stable loading surface. */
:where(iframe, embed, object).ui-frame-pending {
background:
linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent),
var(--loading-track);
background-size: 220% 100%;
animation: grafo-loading-shimmer 1.2s linear infinite;
}
:where(iframe, embed, object).ui-frame-ready {
animation: none;
background: transparent;
}
/* Keep the theme button on the requested left side. */
.theme-toggle {
left: max(14px, env(safe-area-inset-left)) !important;
right: auto !important;
}
@media (max-width: 700px) {
.theme-toggle { left: 10px !important; right: auto !important; }
}
@keyframes grafo-loading-progress {
0% { transform: translateX(-75%); }
100% { transform: translateX(115%); }
}
@keyframes grafo-loading-shimmer {
from { background-position: 120% 0; }
to { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
html.ui-loading::before { animation: none; transform: none; }
img.ui-image-pending, img.ui-image-ready { transition: none; }
:where(iframe, embed, object).ui-frame-pending { animation: none; }
}
@media print {
html.ui-loading::before { display: none !important; }
html.ui-loading body > :not(script), html.ui-ready body > :not(script) {
opacity: 1 !important;
animation: none !important;
transform: none !important;
}
}
/* SOURCE: css/accessibility-performance-modern-ui-phase14.css */
/* var.29 grafo74 — Modern UI Phase 14: Accessibility & Performance */
:root {
--ui-a11y-ring: 0 0 0 4px rgba(22, 131, 141, .24);
--ui-a11y-target: 44px;
}
.ui-skip-link {
position: fixed;
z-index: 100000;
top: max(8px, env(safe-area-inset-top));
left: max(8px, env(safe-area-inset-left));
padding: 10px 14px;
border-radius: 10px;
background: #0b5960;
color: #fff !important;
font-weight: 700;
text-decoration: none;
box-shadow: 0 8px 24px rgba(0,0,0,.25);
transform: translateY(-160%);
transition: transform 160ms ease;
}
.ui-skip-link:focus { transform: translateY(0); }
.ui-visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid #16838d;
outline-offset: 3px;
box-shadow: var(--ui-a11y-ring);
}
:where(button, input[type="button"], input[type="submit"], input[type="reset"], .ui-icon-only) {
touch-action: manipulation;
}
:where(.ui-icon-only, .topnav > .icon) {
min-width: var(--ui-a11y-target);
min-height: var(--ui-a11y-target);
}
img[loading="lazy"] {
content-visibility: auto;
}
.ui-deferred-section {
content-visibility: auto;
contain-intrinsic-size: auto 540px;
}
.ui-media-error {
min-height: 72px;
border: 1px dashed currentColor;
opacity: .72;
}
html[data-theme="dark"] .ui-skip-link,
html.dark .ui-skip-link,
body.dark-theme .ui-skip-link {
background: #d9f5f2;
color: #103c40 !important;
}
@media (prefers-contrast: more) {
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline-width: 3px;
outline-offset: 4px;
box-shadow: none;
}
:where(input, select, textarea, button) { border-width: 2px; }
}
@media (prefers-reduced-data: reduce) {
* { background-attachment: scroll !important; }
}
@media (prefers-reduced-motion: reduce) {
.ui-skip-link { transition: none; }
html { scroll-behavior: auto !important; }
}
@media print {
.ui-skip-link, .ui-live-region { display: none !important; }
.ui-deferred-section { content-visibility: visible; contain-intrinsic-size: none; }
}
/* SOURCE: css/responsive-touch-modern-ui-phase15.css */
/* var.31 — Modern UI Phase 15: Responsive & Touch UX */
:root {
--ui-vh: 1vh;
--ui-safe-top: env(safe-area-inset-top, 0px);
--ui-safe-right: env(safe-area-inset-right, 0px);
--ui-safe-bottom: env(safe-area-inset-bottom, 0px);
--ui-safe-left: env(safe-area-inset-left, 0px);
}
html {
min-height: 100%;
scroll-padding-top: calc(16px + var(--ui-safe-top));
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
min-height: 100vh;
min-height: calc(var(--ui-vh) * 100);
padding-left: var(--ui-safe-left);
padding-right: var(--ui-safe-right);
}
/* Current-page feedback without changing the established visual language. */
.topnav a[aria-current="page"]:not(.icon),
nav a[aria-current="page"] {
font-weight: 700;
text-decoration-thickness: 2px;
text-underline-offset: 0.28em;
}
/* Avoid accidental horizontal overflow from long URLs and document names. */
main,
article,
section,
.card,
.paper,
[class*="content"] {
min-width: 0;
}
main p,
article p,
main li,
article li,
main a,
article a {
overflow-wrap: anywhere;
}
img,
video,
canvas,
svg,
iframe,
embed,
object {
max-width: 100%;
}
/* Touch improvements are limited to coarse pointers and do not enlarge desktop UI. */
@media (hover: none), (pointer: coarse) {
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
.btn,
a.icon,
.viewer button,
[role="button"] {
min-width: 44px;
min-height: 44px;
}
.topnav a,
nav a,
footer a {
-webkit-tap-highlight-color: transparent;
}
a,
button,
[role="button"] {
touch-action: manipulation;
}
/* Hover transforms can feel sticky on touchscreens. */
.card:hover,
.button:hover,
.btn:hover,
button:hover {
transform: none;
}
}
@media screen and (max-width: 770px) {
body {
padding-bottom: var(--ui-safe-bottom);
}
.topnav.responsive {
max-height: calc(var(--ui-vh) * 100 - var(--ui-safe-top) - 12px);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.topnav > .icon {
margin-right: max(0px, var(--ui-safe-right));
}
#upbutton,
.theme-toggle,
[data-theme-toggle] {
margin-bottom: var(--ui-safe-bottom);
}
}
@media print {
body { min-height: auto; padding: 0; }
}
/* v.603 — active button in the upper navigation uses the established red-brown accent. */
.topnav a[aria-current="page"]:not(.icon),
.topnav a.active:not(.icon) {
background-color: rgba(133, 9, 9, 1);
color: #fff;
text-transform: uppercase;
}
/* v.1368 — stable desktop topnav activation target */
.header {
z-index: 1000 !important;
}
.header__container,
.header__datetime,
.topnav {
position: relative;
pointer-events: auto !important;
}
.topnav {
z-index: 2;
}
.topnav a[href] {
position: relative;
z-index: 3;
pointer-events: auto !important;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.topnav a[data-grafo-nav-started="1"] {
cursor: progress;
}
/* v.1370 — header topnav geometry isolation
Stable hitboxes for every upper navigation link on every page. */
/* The outer navigation/date wrapper is one stable header flex item. */
.header__container > .header__datetime {
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
margin-left: auto !important;
position: relative !important;
z-index: 20 !important;
pointer-events: auto !important;
}
/*
* Desktop/tablet navigation no longer uses legacy floats.
* One deterministic flex row means every visible label owns its full hitbox.
*/
.header__container > .header__datetime > .topnav {
display: flex !important;
flex-flow: row nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
position: relative !important;
z-index: 30 !important;
pointer-events: auto !important;
isolation: isolate !important;
}
.header__container > .header__datetime > .topnav > a {
float: none !important;
flex: 0 0 auto !important;
position: relative !important;
z-index: 31 !important;
pointer-events: auto !important;
}
/* The legacy
was required only by the old floated layout. */
.header__container > .header__datetime > .topnav + br {
display: none !important;
}
/*
* On pages that contain a nested section.header__datetime for the clock,
* isolate it from the navigation geometry completely.
*/
.header__container > .header__datetime > section.header__datetime {
display: block !important;
position: static !important;
float: none !important;
clear: both !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 2px 0 0 !important;
padding: 0 !important;
z-index: auto !important;
pointer-events: none !important;
}
.header__container > .header__datetime > section.header__datetime *,
.header__container > .header__datetime > section.header__datetime .dropdown {
pointer-events: none !important;
}
/*
* At <=900px the nav/date wrapper gets its own full header row.
* This prevents the later buttons from being squeezed underneath the logos.
*/
@media screen and (max-width: 900px) and (min-width: 771px) {
.header__container > .header__datetime {
flex: 1 1 100% !important;
width: 100% !important;
margin-left: 0 !important;
}
.header__container > .header__datetime > .topnav {
width: 100% !important;
flex-wrap: nowrap !important;
}
}
/* Preserve the site's established mobile menu behavior. */
@media screen and (max-width: 770px) {
.header__container > .header__datetime {
flex: 1 1 100% !important;
width: 100% !important;
margin-left: 0 !important;
}
.header__container > .header__datetime > .topnav {
display: block !important;
overflow: hidden !important;
}
.header__container > .header__datetime > .topnav.responsive {
display: block !important;
overflow-y: auto !important;
}
.header__container > .header__datetime > .topnav > a {
float: none !important;
}
}
/* ===== css/navigation-content-polish-modern-ui-phase16.css ===== */
/* var.32 — Modern UI Phase 16: Navigation & Content Polish */
html { scroll-padding-top: clamp(76px, 9vw, 112px); }
body { overflow-anchor: auto; }
.ui-scroll-progress { position:fixed; inset:0 0 auto; height:3px; z-index:10020; pointer-events:none; transform-origin:left center; transform:scaleX(0); background:currentColor; color:var(--accent,#2f7d57); opacity:.72; transition:transform 80ms linear,opacity .2s ease; }
.ui-scroll-progress[hidden] { display:none; }
.ui-back-to-top { position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:max(18px,calc(env(safe-area-inset-bottom) + 18px)); width:46px; height:46px; border:0; border-radius:999px; display:grid; place-items:center; z-index:10010; cursor:pointer; background:var(--accent,#2f7d57); color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.18); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .18s ease,transform .18s ease,visibility .18s; }
.ui-back-to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
.ui-back-to-top:hover { transform:translateY(-2px); }
.ui-back-to-top:active { transform:translateY(0) scale(.96); }
.ui-back-to-top svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2.25; }
:where(main,article,section) :is(h2,h3,h4)[id] { scroll-margin-top:clamp(84px,10vw,120px); }
:where(p,li,dd,figcaption)>a { text-underline-offset:.16em; text-decoration-thickness:.08em; }
:where(p,li,dd,figcaption)>a:hover { text-decoration-thickness:.13em; }
@media (max-width:640px) { .ui-back-to-top { width:44px; height:44px; right:max(12px,env(safe-area-inset-right)); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto!important; } .ui-back-to-top,.ui-scroll-progress { transition:none!important; } }
@media print { .ui-scroll-progress,.ui-back-to-top { display:none!important; } }
/* ===== css/search-quick-navigation-modern-ui-phase17.css ===== */
/* var.33 — Modern UI Phase 17: Search & Quick Navigation */
.quick-nav-trigger {
position: fixed;
left: max(14px, env(safe-area-inset-left));
bottom: calc(86px + env(safe-area-inset-bottom));
z-index: 998;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid color-mix(in srgb, var(--accent, #2f7d32) 45%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
color: var(--accent, #2f7d32);
box-shadow: 0 8px 24px rgba(0,0,0,.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
cursor: pointer;
}
.quick-nav-trigger:hover { transform: translateY(-2px); }
.quick-nav-trigger:active { transform: translateY(0); }
.quick-nav-trigger svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; }
.quick-nav-dialog {
width: min(680px, calc(100vw - 28px));
max-height: min(76vh, 720px);
padding: 0;
border: 1px solid rgba(127,127,127,.28);
border-radius: 18px;
background: var(--surface, #fff);
color: var(--text, #202124);
box-shadow: 0 24px 80px rgba(0,0,0,.28);
overflow: hidden;
}
.quick-nav-dialog::backdrop { background: rgba(0,0,0,.42); backdrop-filter: blur(3px); }
.quick-nav-head { display:flex; align-items:center; gap:10px; padding:14px; border-bottom:1px solid rgba(127,127,127,.2); }
.quick-nav-input {
flex:1; min-width:0; height:44px; padding:0 14px; border:1px solid rgba(127,127,127,.35); border-radius:12px;
background: var(--surface, #fff); color:inherit; font:inherit; outline:none;
}
.quick-nav-input:focus { border-color: var(--accent, #2f7d32); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent, #2f7d32) 18%, transparent); }
.quick-nav-close { width:40px; height:40px; border:0; border-radius:10px; background:transparent; color:inherit; font-size:24px; cursor:pointer; }
.quick-nav-close:hover { background:rgba(127,127,127,.12); }
.quick-nav-results { margin:0; padding:8px; list-style:none; overflow:auto; max-height:calc(min(76vh, 720px) - 74px); overscroll-behavior:contain; }
.quick-nav-results button { width:100%; display:block; text-align:left; padding:11px 12px; border:0; border-radius:10px; background:transparent; color:inherit; cursor:pointer; font:inherit; }
.quick-nav-results button:hover,
.quick-nav-results button[aria-selected="true"] { background:color-mix(in srgb, var(--accent, #2f7d32) 12%, transparent); }
.quick-nav-title { display:block; font-weight:700; line-height:1.3; }
.quick-nav-snippet { display:block; margin-top:3px; opacity:.7; font-size:.9em; line-height:1.35; }
.quick-nav-empty { padding:22px 14px; text-align:center; opacity:.68; }
.quick-nav-hint { padding:0 14px 12px; font-size:.82em; opacity:.62; }
@media (max-width: 640px) {
.quick-nav-trigger { bottom: calc(76px + env(safe-area-inset-bottom)); }
.quick-nav-dialog { width:calc(100vw - 16px); max-height:82dvh; border-radius:16px; }
.quick-nav-results { max-height:calc(82dvh - 74px); }
}
@media (prefers-reduced-motion: reduce) { .quick-nav-trigger { transition:none !important; } }
@media print { .quick-nav-trigger, .quick-nav-dialog { display:none !important; } }
/* ===== css/production-hardening-modern-ui-phase19.css ===== */
/* Modern UI Phase 19/var.37: resource failures remain visible and recoverable. */
img.resource-load-error {
opacity: 0.35;
}
#doc2026Image.resource-load-error {
visibility: visible;
opacity: 1;
background: #fff;
}
.has-resource-error body::after {
content: none;
}
/* ===== css/cover-layout-var84.css?v=84 ===== */
/* var.84: keep the cover heading fully below the site header. */
.page__main-block.main-block {
position: relative;
margin-top: 0 !important;
top: auto !important;
transform: none !important;
overflow: hidden;
isolation: isolate;
background-color: #f8fafb;
scroll-margin-top: 140px;
}
.page__main-block.main-block::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(rgba(248, 250, 251, 0.93), rgba(248, 250, 251, 0.93)),
url("../img/cover-background.webp");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
pointer-events: none;
}
.page__main-block .main-block__container {
width: min(calc(100% - 48px), 1360px);
max-width: 1360px;
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(360px, 0.78fr) minmax(560px, 1.22fr);
grid-template-areas:
"heading image"
"body image";
align-items: start;
column-gap: clamp(54px, 5vw, 86px);
row-gap: 28px;
/* Extra top space prevents the fixed header from covering the heading. */
padding: clamp(82px, 7vw, 106px) 0 clamp(54px, 6vw, 88px) !important;
margin: 0 auto !important;
top: auto !important;
transform: none !important;
}
.page__main-block .main-block__heading {
grid-area: heading;
position: relative !important;
inset: auto !important;
z-index: 2;
min-width: 0;
max-width: 520px;
align-self: end;
margin: 0 !important;
transform: none !important;
}
.page__main-block .main-block__title,
.page__main-block .main-block__subtitle {
position: static !important;
inset: auto !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: none !important;
}
.page__main-block .main-block__title {
margin: 0 0 8px !important;
color: #34465a !important;
font-size: clamp(34px, 3vw, 48px) !important;
line-height: 1.12 !important;
letter-spacing: -0.02em !important;
font-weight: 800 !important;
}
.page__main-block .main-block__subtitle {
margin: 0 !important;
max-width: 520px;
color: #34465a !important;
font-size: clamp(28px, 2.35vw, 40px) !important;
line-height: 1.18 !important;
font-weight: 700 !important;
}
.page__main-block .main-block__body {
grid-area: body;
align-self: start;
min-width: 0;
max-width: 520px;
padding: 0 !important;
margin: 0 !important;
position: relative;
inset: auto !important;
z-index: 2;
transform: none !important;
}
.page__main-block .main-block__body > *:not(:last-child) { margin-bottom: 30px; }
.page__main-block .main-block__text { max-width: 500px; font-size: 16px; line-height: 1.5; }
.page__main-block .main-block__buttons { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.page__main-block .main-block__button { min-height: 44px; padding: 11px 22px; border-radius: 10px; }
.page__main-block .main-block__image._ibg {
grid-area: image;
position: relative !important;
inset: auto !important;
width: 100%;
height: auto;
min-width: 0;
align-self: center;
overflow: hidden;
border-radius: 16px;
opacity: 1 !important;
background: transparent;
box-shadow: 0 14px 34px rgba(31, 37, 44, 0.15);
transform: none !important;
}
.page__main-block .main-block__image._ibg > img[src*="cover_"] {
position: static !important;
inset: auto !important;
display: block;
width: 100% !important;
height: auto !important;
max-height: 610px;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: center;
margin: 0;
}
.page__main-block .main-block__image .topnav,
.page__main-block .main-block__image .header__menu,
.page__main-block .main-block__image .menu__list,
.page__main-block .main-block__image nav { display: none !important; }
@media (max-width: 1100px) {
.page__main-block .main-block__container {
width: min(calc(100% - 36px), 1080px);
grid-template-columns: minmax(310px, 0.86fr) minmax(430px, 1.14fr);
column-gap: 36px;
padding-top: 82px !important;
}
}
@media (max-width: 800px) {
.page__main-block .main-block__container {
width: min(calc(100% - 30px), 760px);
grid-template-columns: 1fr;
grid-template-areas: "heading" "body" "image";
gap: 26px;
padding-top: 76px !important;
padding-bottom: 48px !important;
}
.page__main-block .main-block__heading,
.page__main-block .main-block__body { max-width: none; }
.page__main-block .main-block__image._ibg { width: min(100%, 720px); justify-self: center; }
.page__main-block .main-block__image._ibg > img[src*="cover_"] {
max-height: 480px;
aspect-ratio: auto;
object-fit: contain;
}
}
@media (max-width: 480px) {
.page__main-block .main-block__container {
width: min(calc(100% - 24px), 460px);
gap: 22px;
padding-top: 68px !important;
padding-bottom: 36px !important;
}
.page__main-block .main-block__title { font-size: 31px !important; }
.page__main-block .main-block__subtitle { font-size: 25px !important; }
.page__main-block .main-block__image._ibg { border-radius: 12px; }
.page__main-block .main-block__image._ibg > img[src*="cover_"] { max-height: 360px; }
}
/* ===== css/buttons-approved-var94.css?v=94 ===== */
/* var.94 — approved outlined buttons, direct final override */
@media(max-width:600px){html body a.main-block__button,html body button.main-block__button,html body a.io_button{min-height:42px!important;padding:9px 16px!important;font-size:15px!important}}
/* ===== css/shared-buttons-v94.css?v=1014 ===== */
/* v.972 — extracted from identical inline HTML styles. */
/* var.94 inline approved buttons */
/* var.94 — approved outlined buttons, direct final override */
:root{--v94-accent:#086b75;--v94-hover:#075963;--v94-soft:#f2fafb;--v94-focus:rgba(8,107,117,.24)}
html body a.main-block__button,
html body button.main-block__button,
html body a.item-service__button,
html body button.item-service__button,
html body a.io_button,
html body button.io_button,
html body .read-more__button,
html body [class*="read-more"] button {
box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;
width:auto!important;min-width:0!important;min-height:44px!important;height:auto!important;padding:10px 20px!important;margin:0!important;
border:1px solid var(--v94-accent)!important;border-radius:8px!important;background:#fff!important;background-color:#fff!important;background-image:none!important;
color:var(--v94-accent)!important;box-shadow:none!important;text-shadow:none!important;filter:none!important;font:inherit!important;font-size:16px!important;
font-weight:650!important;line-height:1.25!important;letter-spacing:0!important;text-decoration:none!important;transform:none!important;cursor:pointer!important;
transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease!important
}
html body a.main-block__button:hover,html body button.main-block__button:hover,html body a.item-service__button:hover,html body button.item-service__button:hover,
html body a.io_button:hover,html body button.io_button:hover,html body .read-more__button:hover,html body [class*="read-more"] button:hover,
html body a.main-block__button:focus,html body button.main-block__button:focus,html body a.io_button:focus,
html body a.main-block__button:active,html body button.main-block__button:active,html body a.io_button:active{
border-color:var(--v94-hover)!important;background:var(--v94-soft)!important;background-color:var(--v94-soft)!important;background-image:none!important;
color:var(--v94-hover)!important;box-shadow:0 4px 14px rgba(8,107,117,.10)!important;filter:none!important;transform:none!important
}
html body a.main-block__button:focus-visible,html body button.main-block__button:focus-visible,html body a.io_button:focus-visible{outline:3px solid var(--v94-focus)!important;outline-offset:3px!important}
html body a.main-block__button.main-block__button_border::after,html body a.item-service__button::after{content:"›"!important;font-size:24px!important;font-weight:400!important;line-height:.75!important;margin-left:3px!important;color:currentColor!important}
html body a.io_button.btn_open::after{content:"⌄"!important;font-size:20px!important;line-height:.75!important;margin-left:3px!important;color:currentColor!important}
html body a.io_button.btn_close::after{content:"⌃"!important;font-size:20px!important;line-height:.75!important;margin-left:3px!important;color:currentColor!important}
html body .item-service_green a.main-block__button_white,html body a.main-block__button.main-block__button_white{
width:100%!important;min-height:0!important;padding:8px 14px!important;border:1px solid rgba(255,255,255,.88)!important;background:transparent!important;background-color:transparent!important;
color:#fff!important;border-radius:8px!important;font-size:14px!important;font-weight:600!important;line-height:1.25!important;box-shadow:none!important
}
html body .item-service_green a.main-block__button_white:hover,html body a.main-block__button.main-block__button_white:hover{
border-color:#fff!important;background:rgba(255,255,255,.08)!important;color:#fff!important;box-shadow:none!important
}
html body .main-block__buttons,html body .io_button_wrap{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important}
html body .io_button_wrap{margin-top:18px!important}
@media(max-width:600px){html body a.main-block__button,html body button.main-block__button,html body a.io_button{min-height:42px!important;padding:9px 16px!important;font-size:15px!important}}
/* ===== css/shared-inline-utilities.css?v=1014 ===== */
/* Общие utility-правила, вынесенные из повторяющихся inline style HTML. */
.icon { font-size: 15px; }
#date, #time { color: blue; }
.g74-nowrap { white-space: nowrap; }
.g74-img-28x40 { width: 28px; height: 40px; margin-left: 10px; }
.g74-img-60x60 { width: 60px; height: 60px; margin-left: 10px; }
.g74-img-28x28 { width: 28px; height: 28px; margin-left: 10px; }
/* ===== css/ui-consistency-audit-var97.css?v=97 ===== */
/* var.97 — UI Consistency Audit
Conservative normalization layer. No content, media or layout concept changes. */
:root {
--ui97-radius-control: 8px;
--ui97-focus-color: #0d5c63;
--ui97-focus-ring: 0 0 0 3px rgba(13, 92, 99, .24);
--ui97-transition: 180ms ease;
}
/* Predictable box model on every page. */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
/* Prevent isolated media overflow while preserving original proportions. */
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
/* One keyboard-focus language for links and controls. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--ui97-focus-color);
outline-offset: 3px;
box-shadow: var(--ui97-focus-ring);
}
/* Keep button typography and interaction consistent across native buttons. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
font: inherit;
}
button:not(:disabled),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled),
[role="button"]:not([aria-disabled="true"]) {
cursor: pointer;
}
button:disabled,
input:disabled,
[aria-disabled="true"] {
cursor: not-allowed;
}
/* Approved outlined actions: identical radius and transition on all page families. */
:where(.io_button, .cover-readmore-button, #documents-entry, .button, [class*="button"]):not(.swiper-button-next):not(.swiper-button-prev) {
border-radius: var(--ui97-radius-control);
transition-property: color, background-color, border-color, box-shadow, opacity, transform;
transition-duration: 180ms;
transition-timing-function: ease;
}
/* Footer/avatar media must not inherit accidental dimensions from article styles. */
:where(footer, .footer, #footer) img {
object-fit: contain;
}
/* Stable anchor positioning under sticky navigation. */
:where([id]) { scroll-margin-top: 76px; }
/* Avoid accidental horizontal scrolling caused by long legal/document strings. */
:where(main, article, .content, .container, .wrapper) {
overflow-wrap: anywhere;
}
@media (max-width: 480px) {
:where(.io_button, .cover-readmore-button, #documents-entry, .button, [class*="button"]):not(.swiper-button-next):not(.swiper-button-prev) {
max-width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
:where(.io_button, .cover-readmore-button, #documents-entry, .button, [class*="button"]) {
transition-duration: 0.01ms !important;
}
}
/* ===== css/seo-var99.css?v=99 ===== */
/* var.99 — semantic SEO helpers. No visible layout changes. */
.seo-visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ===== css/site-search.css?v=103 ===== */
/* var.103 — Global search by site sections */
.site-search-trigger {
position: fixed;
left: max(66px, calc(env(safe-area-inset-left) + 66px));
bottom: calc(86px + env(safe-area-inset-bottom));
z-index: 998;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--accent, #2f7d32) 45%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
color: var(--accent, #2f7d32);
box-shadow: 0 8px 24px rgba(0,0,0,.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
cursor: pointer;
}
.site-search-trigger:hover { transform: translateY(-2px); }
.site-search-trigger:active { transform: translateY(0); }
.site-search-trigger svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; }
.site-search-trigger__badge {
position: absolute;
left: 50%;
bottom: -7px;
transform: translateX(-50%);
padding: 1px 5px;
border-radius: 999px;
background: var(--accent, #2f7d32);
color: #fff;
font-size: 9px;
font-weight: 700;
line-height: 1.25;
letter-spacing: .02em;
}
.site-search-dialog {
width: min(760px, calc(100vw - 28px));
max-height: min(82vh, 780px);
padding: 0;
border: 1px solid rgba(127,127,127,.28);
border-radius: 18px;
background: var(--surface, #fff);
color: var(--text, #202124);
box-shadow: 0 24px 80px rgba(0,0,0,.28);
overflow: hidden;
}
.site-search-dialog::backdrop { background: rgba(0,0,0,.42); backdrop-filter: blur(3px); }
.site-search-head { display:flex; align-items:center; gap:10px; padding:14px; border-bottom:1px solid rgba(127,127,127,.2); }
.site-search-field { flex:1; min-width:0; position:relative; }
.site-search-field svg { position:absolute; left:14px; top:50%; width:20px; height:20px; transform:translateY(-50%); fill:none; stroke:currentColor; stroke-width:2; opacity:.65; pointer-events:none; }
.site-search-input {
width:100%; height:46px; padding:0 14px 0 44px; border:1px solid rgba(127,127,127,.35); border-radius:12px;
background:var(--surface, #fff); color:inherit; font:inherit; outline:none;
}
.site-search-input:focus { border-color:var(--accent, #2f7d32); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent, #2f7d32) 18%, transparent); }
.site-search-close { width:40px; height:40px; border:0; border-radius:10px; background:transparent; color:inherit; font-size:24px; cursor:pointer; }
.site-search-close:hover { background:rgba(127,127,127,.12); }
.site-search-status { padding:9px 16px; border-bottom:1px solid rgba(127,127,127,.14); font-size:.86em; opacity:.72; }
.site-search-results { max-height:calc(min(82vh, 780px) - 145px); padding:8px; overflow:auto; overscroll-behavior:contain; }
.site-search-group + .site-search-group { margin-top:10px; padding-top:8px; border-top:1px solid rgba(127,127,127,.16); }
.site-search-page-title { margin:0; padding:6px 10px 5px; font-size:.82em; line-height:1.3; text-transform:uppercase; letter-spacing:.045em; color:var(--accent, #2f7d32); }
.site-search-result { display:block; padding:10px 12px; border-radius:10px; color:inherit; text-decoration:none; }
.site-search-result:hover,
.site-search-result[aria-selected="true"] { background:color-mix(in srgb, var(--accent, #2f7d32) 12%, transparent); color:inherit; }
.site-search-section-title { display:block; font-weight:700; line-height:1.3; }
.site-search-snippet { display:block; margin-top:4px; opacity:.72; font-size:.9em; line-height:1.4; }
.site-search-result mark { padding:0 .08em; border-radius:2px; background:color-mix(in srgb, var(--accent, #2f7d32) 24%, transparent); color:inherit; }
.site-search-empty { padding:28px 16px; text-align:center; opacity:.68; }
.site-search-hint { padding:0 14px 12px; font-size:.82em; opacity:.62; }
@media (max-width:640px) {
.site-search-trigger { left:max(64px, calc(env(safe-area-inset-left) + 64px)); bottom:calc(76px + env(safe-area-inset-bottom)); }
.site-search-dialog { width:calc(100vw - 16px); max-height:86dvh; border-radius:16px; }
.site-search-results { max-height:calc(86dvh - 145px); }
.site-search-hint { display:none; }
}
@media (prefers-reduced-motion:reduce) { .site-search-trigger { transition:none !important; } }
@media print { .site-search-trigger, .site-search-dialog { display:none !important; } }
/* ===== css/floating-controls-layout-var106.css?v=1344 ===== */
/* var.106 — approved final floating controls layout */
:root {
--floating-control-height: 44px;
--floating-control-width: 112px;
--floating-control-gap: 10px;
--floating-edge: max(14px, env(safe-area-inset-left));
--floating-edge-right: max(14px, env(safe-area-inset-right));
--floating-bottom: calc(18px + env(safe-area-inset-bottom));
--floating-dark-green: #0e5f5f;
--floating-green: #07943f;
}
/* Two-button floating column on the right: page search above site search. */
.quick-nav-trigger,
.site-search-trigger {
box-sizing: border-box !important;
width: var(--floating-control-width) !important;
height: var(--floating-control-height) !important;
min-width: var(--floating-control-width) !important;
min-height: var(--floating-control-height) !important;
max-width: var(--floating-control-width) !important;
border: 2px solid rgba(255,255,255,.92) !important;
border-radius: 999px !important;
color: #fff !important;
box-shadow: 0 4px 16px rgba(0,0,0,.27) !important;
font-family: Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.quick-nav-trigger,
.site-search-trigger {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 0 14px !important;
}
.quick-nav-trigger { background: var(--floating-dark-green) !important; }
.site-search-trigger { background: var(--floating-green) !important; }
/* Right: page search above site search. */
.quick-nav-trigger,
.site-search-trigger {
left: auto !important;
right: var(--floating-edge-right) !important;
}
.site-search-trigger { bottom: var(--floating-bottom) !important; }
.quick-nav-trigger {
bottom: calc(var(--floating-bottom) + var(--floating-control-height) + var(--floating-control-gap)) !important;
}
.quick-nav-trigger svg,
.site-search-trigger svg {
flex: 0 0 auto;
width: 22px !important;
height: 22px !important;
color: currentColor;
}
.quick-nav-trigger__label,
.site-search-trigger__label { white-space: nowrap; }
.site-search-trigger__badge { display: none !important; }
/* Approved up arrow: plain green arrow, centered above the right-side search controls. */
#upbutton {
right: calc(var(--floating-edge-right) + (var(--floating-control-width) - 44px) / 2) !important;
bottom: calc(var(--floating-bottom) + (var(--floating-control-height) * 2) + (var(--floating-control-gap) * 2)) !important;
width: 44px !important;
height: 44px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#upbutton svg { width: 44px !important; height: 44px !important; }
#upbutton img { display: none !important; }
@media (max-width: 640px) {
:root {
--floating-control-width: 106px;
--floating-control-gap: 8px;
--floating-edge: max(10px, env(safe-area-inset-left));
--floating-edge-right: max(10px, env(safe-area-inset-right));
--floating-bottom: calc(10px + env(safe-area-inset-bottom));
}
.quick-nav-trigger,
.site-search-trigger { padding-left: 11px !important; padding-right: 11px !important; }
}
@media print {
.quick-nav-trigger,
.site-search-trigger,
#upbutton { display: none !important; }
}
/* v.534 — canonical sitewide theme toggle, identical to the approved home-page control. */
html body #themeToggle.theme-toggle,
html body .theme-toggle {
position: fixed !important;
left: max(14px, env(safe-area-inset-left)) !important;
right: auto !important;
top: max(14px, env(safe-area-inset-top)) !important;
bottom: auto !important;
z-index: 2147483647 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 46px !important;
min-width: 46px !important;
max-width: 46px !important;
height: 46px !important;
min-height: 46px !important;
max-height: 46px !important;
padding: 0 !important;
margin: 0 !important;
border: 1px solid rgba(255,255,255,.35) !important;
border-radius: 50% !important;
background: #0d5c63 !important;
background-color: #0d5c63 !important;
background-image: none !important;
color: #fff !important;
box-shadow: 0 8px 22px rgba(0,0,0,.28) !important;
text-shadow: none !important;
filter: none !important;
transform: none !important;
cursor: pointer !important;
font-family: Arial, sans-serif !important;
font-size: 22px !important;
font-weight: 400 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-indent: 0 !important;
overflow: hidden !important;
opacity: 1 !important;
visibility: visible !important;
appearance: none !important;
-webkit-appearance: none !important;
}
html body #themeToggle.theme-toggle:hover,
html body #themeToggle.theme-toggle:active,
html body #themeToggle.theme-toggle:focus,
html body .theme-toggle:hover,
html body .theme-toggle:active,
html body .theme-toggle:focus {
border-color: rgba(255,255,255,.45) !important;
background: #0d5c63 !important;
background-color: #0d5c63 !important;
color: #fff !important;
box-shadow: 0 8px 22px rgba(0,0,0,.28) !important;
transform: none !important;
}
html body #themeToggle.theme-toggle:focus-visible,
html body .theme-toggle:focus-visible {
outline: 3px solid rgba(143,208,212,.75) !important;
outline-offset: 3px !important;
}
@media (max-width: 700px) {
html body #themeToggle.theme-toggle,
html body .theme-toggle {
left: max(10px, env(safe-area-inset-left)) !important;
top: max(10px, env(safe-area-inset-top)) !important;
width: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
font-size: 20px !important;
}
}
@media print {
html body #themeToggle.theme-toggle,
html body .theme-toggle {
display: none !important;
}
}
/* ===== css/shared-news-parallax.css?v=1014 ===== */
.bgimg-2 {
position: relative;
overflow: hidden;
width: 100%;
min-height: 400px;
background-image: url("../img/parallax0.webp");
background-attachment: scroll;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
/* ===== css/site-footer-compact-var112.css?v=112 ===== */
/* v.512 — compact footer and unified white outlines for site controls. */
.footer {
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
}
.footer__top {
padding: 14px 0 !important;
}
.footer__main,
.footer__container {
min-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.footer__row {
display: grid !important;
grid-template-columns: 104px max-content minmax(310px, 1fr) minmax(300px, 1fr) !important;
grid-template-rows: repeat(3, minmax(34px, auto)) !important;
grid-template-areas:
"avatar label mail copy"
"avatar label phone social"
"avatar label site social" !important;
align-items: center !important;
column-gap: 16px !important;
row-gap: 6px !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 86px 0 0 !important;
}
.footer .avatar {
grid-area: avatar !important;
width: 100px !important;
height: 100px !important;
margin: 0 !important;
}
.footer .avatar img {
width: 100px !important;
height: 100px !important;
object-fit: cover !important;
}
.footer__label {
grid-area: label !important;
align-self: start !important;
margin: 2px 0 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
.footer__contacts,
.contacts-footer {
display: contents !important;
}
.contacts-footer__item {
min-height: 34px !important;
margin: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 34px !important;
white-space: nowrap !important;
}
.contacts-footer__item:nth-child(1) { grid-area: mail !important; }
.contacts-footer__item:nth-child(2) { grid-area: phone !important; }
.contacts-footer__item:nth-child(3) { grid-area: site !important; }
.footer__bottom,
.footer__bottom .footer__container {
display: contents !important;
}
.footer__copy {
grid-area: copy !important;
align-self: center !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.45 !important;
text-align: left !important;
}
.footer__social,
.footer .social {
grid-area: social !important;
align-self: center !important;
justify-self: start !important;
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 900px) {
.footer__row {
grid-template-columns: 104px max-content minmax(220px, 1fr) !important;
grid-template-rows: repeat(4, minmax(28px, auto)) !important;
grid-template-areas:
"avatar label mail"
"avatar label phone"
"avatar label site"
"copy copy copy" !important;
padding-right: 70px !important;
}
.footer__social,
.footer .social {
display: none !important;
}
}
@media (max-width: 620px) {
.footer__top {
padding: 10px 0 !important;
}
.footer__row {
grid-template-columns: 100px minmax(0, 1fr) !important;
grid-template-rows: repeat(5, minmax(24px, auto)) !important;
grid-template-areas:
"avatar label"
"avatar mail"
"avatar phone"
"avatar site"
"copy copy" !important;
column-gap: 10px !important;
padding-right: 52px !important;
}
.contacts-footer__item {
min-height: 26px !important;
line-height: 26px !important;
white-space: normal !important;
}
.footer__copy {
font-size: 12px !important;
line-height: 1.3 !important;
}
}
/* Contact markers: keep the original circles fully visible and separate rows. */
.contacts-footer__item {
overflow: visible !important;
padding-left: 38px !important;
background-position: left center !important;
background-size: 120px 30px !important;
background-clip: border-box !important;
}
/* Keep the white outline consistent across site controls. */
html body .quick-nav-trigger,
html body .site-search-trigger,
html body #upbutton,
html body #downbutton {
box-sizing: border-box !important;
border-width: 2px !important;
border-style: solid !important;
border-color: rgba(255, 255, 255, .92) !important;
}
#upbutton,
#downbutton {
border-radius: 999px !important;
background: rgba(14, 95, 95, .28) !important;
}
/* ---- css/first-viewport-river-theme-v4093.css ---- */
/* v.640 — always-live river background with frame-level dark-mode dimming. */
html[data-site-river-background="640"] {
background: #8fc5ca url("../img/parallax0.webp?v=130") center / cover fixed no-repeat !important;
}
html[data-site-river-background="640"] body {
position: relative !important;
min-height: 100vh;
isolation: isolate;
background-color: transparent !important;
background-image: none !important;
}
.site-river-background-v640 {
position: fixed !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
display: block !important;
pointer-events: none !important;
user-select: none !important;
touch-action: none !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
z-index: -1 !important;
opacity: 0;
transition: opacity .16s linear !important;
}
.site-river-background-v640.is-ready { opacity: 1; }
.river-dimming-button-v640 {
position: fixed !important;
z-index: 2147483646 !important;
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
padding: 0 !important;
border: 1px solid rgba(255,255,255,.62) !important;
border-radius: 50% !important;
background: #0d5c63 !important;
color: #fff !important;
box-shadow: 0 8px 22px rgba(0,0,0,.30) !important;
font: 700 15px/46px Arial, sans-serif !important;
text-align: center !important;
cursor: pointer !important;
appearance: none !important;
}
.river-dimming-button-v640:hover,
.river-dimming-button-v640:focus-visible {
background: #85401f !important;
outline: 2px solid rgba(255,255,255,.9) !important;
outline-offset: 2px !important;
}
.river-dimming-button-v640[hidden] { display: none !important; }
@media (max-width: 700px) {
.river-dimming-button-v640 {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
font-size: 14px !important;
line-height: 42px !important;
}
}
@media print {
.site-river-background-v640,
.river-dimming-button-v640 { display: none !important; }
}
/* v.619 — hide all local stone/ruler strips in the selected dark mode.
The independent full-page background canvas remains untouched. */
:is(
html[data-theme="dark"],
html[data-river-theme="dark"],
html[data-rules-theme-choice="dark"]
) :is(
.bgimg-2,
.animated-river-stone-strip,
.animated-river-strip,
.animated-river-strip-v130,
[class*="river-strip"],
[class*="stone-strip"]
),
body:is(.dark-mode, .dark-theme) :is(
.bgimg-2,
.animated-river-stone-strip,
.animated-river-strip,
.animated-river-strip-v130,
[class*="river-strip"],
[class*="stone-strip"]
) {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
background: none !important;
box-shadow: none !important;
}
:is(
html[data-theme="dark"],
html[data-river-theme="dark"],
html[data-rules-theme-choice="dark"]
) :is(
.bgimg-2,
.animated-river-stone-strip,
.animated-river-strip,
.animated-river-strip-v130,
[class*="river-strip"],
[class*="stone-strip"]
)::before,
:is(
html[data-theme="dark"],
html[data-river-theme="dark"],
html[data-rules-theme-choice="dark"]
) :is(
.bgimg-2,
.animated-river-stone-strip,
.animated-river-strip,
.animated-river-strip-v130,
[class*="river-strip"],
[class*="stone-strip"]
)::after,
body:is(.dark-mode, .dark-theme) :is(
.bgimg-2,
.animated-river-stone-strip,
.animated-river-strip,
.animated-river-strip-v130,
[class*="river-strip"],
[class*="stone-strip"]
)::before,
body:is(.dark-mode, .dark-theme) :is(
.bgimg-2,
.animated-river-stone-strip,
.animated-river-strip,
.animated-river-strip-v130,
[class*="river-strip"],
[class*="stone-strip"]
)::after {
display: none !important;
content: none !important;
}
/* v.622 — light mode: keep every former stone strip's dimensions,
remove its legacy decoration, and reveal the independent site background through it. */
html:not([data-theme="dark"]):not([data-river-theme="dark"]):not([data-rules-theme-choice="dark"])
body:not(.dark-mode):not(.dark-theme)
:is(
.bgimg-2,
.animated-river-stone-strip,
.animated-river-strip,
.animated-river-strip-v130,
[class*="river-strip"],
[class*="stone-strip"]
) {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
filter: none !important;
overflow: hidden !important;
}
html:not([data-theme="dark"]):not([data-river-theme="dark"]):not([data-rules-theme-choice="dark"])
body:not(.dark-mode):not(.dark-theme)
:is(
.bgimg-2,
.animated-river-stone-strip,
.animated-river-strip,
.animated-river-strip-v130,
[class*="river-strip"],
[class*="stone-strip"]
)::before,
html:not([data-theme="dark"]):not([data-river-theme="dark"]):not([data-rules-theme-choice="dark"])
body:not(.dark-mode):not(.dark-theme)
:is(
.bgimg-2,
.animated-river-stone-strip,
.animated-river-strip,
.animated-river-strip-v130,
[class*="river-strip"],
[class*="stone-strip"]
)::after {
display: none !important;
content: none !important;
background: none !important;
box-shadow: none !important;
}
/* Remove only obsolete nested renderers; the outer strip keeps its original height. */
html:not([data-theme="dark"]):not([data-river-theme="dark"]):not([data-rules-theme-choice="dark"])
body:not(.dark-mode):not(.dark-theme)
:is(
.bgimg-2,
.animated-river-stone-strip,
.animated-river-strip,
.animated-river-strip-v130,
[class*="river-strip"],
[class*="stone-strip"]
)
:is(
canvas:not(.site-river-background-v618),
.animated-river-stone-strip,
.animated-river-strip,
.animated-river-strip-v130,
[class*="legacy-river"],
[class*="stone-layer"]
) {
display: none !important;
visibility: hidden !important;
}
/* The single fixed v.618 canvas remains the only animation source. */
html[data-site-river-background="618"] body {
background-color: transparent !important;
}
/* ---- css/common-site-controls-v4033.css ---- */
/* ===== css/aquarium-screensaver-v1203.css ===== */
/* v.1203 — manual Aquarium screensaver. */
#aquariumScreensaverToggle {
position: fixed !important;
left: max(68px, calc(env(safe-area-inset-left) + 68px)) !important;
top: max(14px, env(safe-area-inset-top)) !important;
z-index: 2147483001 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
min-height: 46px !important;
padding: 0 !important;
border: 1px solid rgba(255,255,255,.35) !important;
border-radius: 50% !important;
background: #0d5c63 !important;
color: #fff !important;
box-shadow: 0 8px 22px rgba(0,0,0,.28) !important;
cursor: pointer !important;
font: 400 21px/1 Arial,sans-serif !important;
}
#aquariumScreensaverToggle:focus-visible {
outline: 3px solid rgba(143,208,212,.75) !important;
outline-offset: 3px !important;
}
#aquariumScreensaverToggle .aquarium-monitor {
width: 22px; height: 15px; box-sizing: border-box;
border: 2px solid currentColor; border-radius: 2px; position: relative;
}
#aquariumScreensaverToggle .aquarium-monitor::before {
content:""; position:absolute; left:8px; top:14px; width:2px; height:4px;
background:currentColor;
}
#aquariumScreensaverToggle .aquarium-monitor::after {
content:""; position:absolute; left:4px; top:18px; width:10px; height:2px;
background:currentColor; border-radius:2px;
}
#aquariumScreensaverOverlay {
position: fixed !important;
inset: 0 !important;
z-index: 2147482500 !important;
display: none;
overflow: hidden;
background: transparent !important;
color: #fff;
pointer-events: none;
}
html.aquarium-screensaver-active #aquariumScreensaverOverlay {
display: block !important;
}
html.aquarium-screensaver-active .site-river-background-v640 {
z-index: 2147482400 !important;
}
html.aquarium-screensaver-active body > *:not(.site-river-background-v640):not(#aquariumScreensaverOverlay):not(#aquariumScreensaverToggle) {
visibility: hidden !important;
}
html.aquarium-screensaver-active #aquariumScreensaverToggle {
visibility: visible !important;
opacity: .20 !important;
left: auto !important;
right: max(16px, env(safe-area-inset-right)) !important;
top: max(16px, env(safe-area-inset-top)) !important;
}
html.aquarium-screensaver-active #aquariumScreensaverToggle:hover,
html.aquarium-screensaver-active #aquariumScreensaverToggle:focus-visible {
opacity: 1 !important;
}
html.aquarium-screensaver-active,
html.aquarium-screensaver-active body {
overflow: hidden !important;
}
.aquarium-screensaver__clock {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%,-50%);
text-align: center;
text-shadow: 0 3px 18px rgba(0,0,0,.62);
font-family: Arial,sans-serif;
user-select: none;
}
.aquarium-screensaver__time {
font-size: clamp(54px,9vw,128px);
font-weight: 300;
line-height: .95;
letter-spacing: .02em;
}
.aquarium-screensaver__date {
margin-top: 18px;
font-size: clamp(17px,2.2vw,28px);
font-weight: 500;
}
.aquarium-screensaver__hint {
position: absolute;
left: 50%; bottom: max(22px,env(safe-area-inset-bottom));
transform: translateX(-50%);
padding: 8px 14px;
border-radius: 18px;
background: rgba(4,48,53,.42);
border: 1px solid rgba(255,255,255,.25);
font: 600 13px/1.2 Arial,sans-serif;
opacity: .72;
white-space: nowrap;
}
@media (max-width:600px) {
#aquariumScreensaverToggle {
left: max(60px,calc(env(safe-area-inset-left) + 60px)) !important;
top: max(10px,env(safe-area-inset-top)) !important;
width:42px !important; height:42px !important;
min-width:42px !important; min-height:42px !important;
}
}
@media print {
#aquariumScreensaverToggle,#aquariumScreensaverOverlay { display:none !important; }
}
/* v.1204 — final visibility guard: the Aquarium control must survive all
legacy mobile/floating-control hide rules and remain next to themeToggle. */
html body #aquariumScreensaverToggle.aquarium-screensaver-toggle,
html body button#aquariumScreensaverToggle {
position: fixed !important;
left: max(68px, calc(env(safe-area-inset-left) + 68px)) !important;
right: auto !important;
top: max(14px, env(safe-area-inset-top)) !important;
bottom: auto !important;
z-index: 2147483646 !important;
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
@media (max-width:600px) {
html body #aquariumScreensaverToggle.aquarium-screensaver-toggle,
html body button#aquariumScreensaverToggle {
left: max(60px, calc(env(safe-area-inset-left) + 60px)) !important;
top: max(10px, env(safe-area-inset-top)) !important;
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
}
}
html.aquarium-screensaver-active body #aquariumScreensaverToggle.aquarium-screensaver-toggle {
left: auto !important;
right: max(16px, env(safe-area-inset-right)) !important;
visibility: visible !important;
}
/* v.1205 — control row: theme -> dimming (when visible) -> Aquarium.
Position is calculated by JS to avoid overlap with riverDimmingButton. */
html body #aquariumScreensaverToggle.aquarium-screensaver-toggle {
left: auto !important;
right: auto !important;
}
/* v.1209 idle timer indicator. Right-click Aquarium: Off -> 2 -> 5 -> 10 -> Off. */
#aquariumScreensaverToggle .aquarium-timer-badge{position:absolute;right:-4px;bottom:-4px;min-width:17px;height:17px;padding:0 3px;box-sizing:border-box;border-radius:9px;background:#fff;color:#0d5c63;border:1px solid rgba(13,92,99,.55);font:700 9px/15px Arial,sans-serif;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.25)}
#aquariumScreensaverToggle[data-idle-minutes="0"] .aquarium-timer-badge::after{content:"×"}
#aquariumScreensaverToggle[data-idle-minutes="2"] .aquarium-timer-badge::after{content:"2"}
#aquariumScreensaverToggle[data-idle-minutes="5"] .aquarium-timer-badge::after{content:"5"}
#aquariumScreensaverToggle[data-idle-minutes="10"] .aquarium-timer-badge::after{content:"10"}
#aquariumTimerToast{position:fixed;z-index:2147483647;left:50%;top:24px;transform:translate(-50%,-10px);opacity:0;padding:10px 16px;border-radius:22px;background:rgba(5,65,71,.92);color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:0 8px 24px rgba(0,0,0,.28);font:600 14px/1.2 Arial,sans-serif;pointer-events:none;transition:opacity 180ms ease,transform 180ms ease}
#aquariumTimerToast.show{opacity:1;transform:translate(-50%,0)}
/* ===== css/page-transition-v1208.css ===== */
/* v.1359 — compositor-safe native navigation, no black intermediate frame. */
/*
* Every root HTML page already loads this stylesheet.
* Modern browsers can therefore keep the old document snapshot visible until
* the new same-origin document has painted, without JS click interception.
*/
@view-transition {
navigation: auto;
}
/* Do not animate/fade the snapshots — just bridge the document swap. */
::view-transition-old(root),
::view-transition-new(root) {
animation: none !important;
mix-blend-mode: normal !important;
}
/*
* Permanent non-black compositor backdrop.
* This is also the fallback for browsers without cross-document View Transition.
*/
html {
background-color: #314b48 !important;
}
html[data-river-theme="dark"] {
background-color: #182523 !important;
}
body {
min-height: 100vh;
}
/* Legacy transition classes must never hide or dim the document. */
:root{
--grafo-page-out: 0ms;
--grafo-page-in: 0ms;
}
html.grafo-page-entering body,
html.grafo-page-ready body,
html.grafo-page-leaving body{
opacity:1 !important;
transition:none !important;
}
html.grafo-page-leaving body{
pointer-events:auto !important;
}
html.grafo-page-entering .site-river-background-v640,
html.grafo-page-ready .site-river-background-v640,
html.grafo-page-leaving .site-river-background-v640{
opacity:1 !important;
}
/* ===== css/header-style-quick-menu-v1210c.css ===== */
/* v.1210c — static HTML quick menu based on native . */
#headerQuickMenuDetails{
position:fixed!important;
z-index:10053!important;
left:var(--floating-edge,14px)!important;
bottom:var(--floating-bottom,18px)!important;
width:var(--floating-control-width,112px)!important;
height:var(--floating-control-height,44px)!important;
margin:0!important;
padding:0!important;
pointer-events:auto!important;
}
#headerQuickMenuDetails > summary{
box-sizing:border-box!important;
width:var(--floating-control-width,112px)!important;
height:var(--floating-control-height,44px)!important;
min-width:var(--floating-control-width,112px)!important;
min-height:var(--floating-control-height,44px)!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
padding:0 13px!important;
border:2px solid rgba(255,255,255,.92)!important;
border-radius:999px!important;
background:var(--floating-dark-green,#0e5f5f)!important;
color:#fff!important;
box-shadow:0 4px 16px rgba(0,0,0,.27)!important;
font:700 15px/1 Arial,sans-serif!important;
cursor:pointer!important;
list-style:none!important;
user-select:none!important;
}
#headerQuickMenuDetails > summary::-webkit-details-marker{display:none!important}
#headerQuickMenuDetails > summary::before{
content:"☰";
font:700 19px/1 Arial,sans-serif;
}
#headerQuickMenuDetails[open] > summary{
background:#0a4f52!important;
}
.header-quick-static-panel{
position:absolute;
left:0;
bottom:calc(100% + 8px);
width:min(330px,calc(100vw - 28px));
max-height:min(70vh,620px);
box-sizing:border-box;
padding:10px;
overflow:auto;
border:2px solid rgba(255,255,255,.92);
border-radius:16px;
background:rgba(10,80,82,.97);
color:#fff;
box-shadow:0 14px 38px rgba(0,0,0,.34);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.header-quick-static-title{
padding:5px 7px 9px;
color:#fff;
font:800 15px/1.15 Arial,sans-serif;
}
.header-quick-static-links{
display:grid;
gap:5px;
}
.header-quick-static-link{
display:flex;
align-items:center;
min-height:38px;
padding:8px 11px;
box-sizing:border-box;
border-radius:9px;
color:#fff!important;
text-decoration:none!important;
font:700 13px/1.2 Arial,sans-serif;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
}
.header-quick-static-link:hover,
.header-quick-static-link:focus-visible{
background:rgba(255,255,255,.17);
border-color:rgba(255,255,255,.28);
}
.header-quick-static-link[aria-current="page"]{
background:#07943f;
border-color:rgba(255,255,255,.55);
}
.header-quick-static-separator{
height:1px;
margin:5px 3px;
background:rgba(255,255,255,.18);
}
.header-quick-static-activity{
background:rgba(255,255,255,.14);
}
@media(max-width:640px){
#headerQuickMenuDetails{
left:var(--floating-edge,10px)!important;
width:var(--floating-control-width,106px)!important;
}
#headerQuickMenuDetails > summary{
width:var(--floating-control-width,106px)!important;
min-width:var(--floating-control-width,106px)!important;
}
.header-quick-static-panel{
width:min(310px,calc(100vw - 20px));
}
}
@media print{
#headerQuickMenuDetails{display:none!important}
}
/* ===== css/remove-password-buttons-v1215.css ===== */
/* v.1215 — no Password/Access Lock button in any Viewer button row. */
#viewer2026Overlay [data-action="access-lock"],
#viewer2026Overlay .viewer122-access-lock,
.doc2026 [data-action="access-lock"],
.doc2026 .viewer122-access-lock,
.viewer4 [data-password-button],
.viewer4 [data-action="password"],
.viewer4 button[name="password"],
.viewer4 button[id*="password" i],
.viewer4 button[class*="password" i] {
display:none !important;
visibility:hidden !important;
width:0 !important;
min-width:0 !important;
max-width:0 !important;
height:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
overflow:hidden !important;
pointer-events:none !important;
}