:root { --font-size-xs: .75rem; --font-size-sm: .86rem; --font-size-base: .9rem; --font-size-lg: 1rem; --fix-size-base: 1rem } @media (min-width:1500px) and (min-resolution: 2dppx) { :root { --font-vw-term: 1.05vw; --font-size-xs: clamp(0.75rem, calc(var(--font-vw-term) - 0.23rem), 1.05rem); --font-size-sm: clamp(0.86rem, calc(var(--font-vw-term) - 0.12rem), 1.16rem); --font-size-base: clamp(0.9rem, calc(var(--font-vw-term) - 0.08rem), 1.2rem); --font-size-lg: clamp(1rem, calc(var(--font-vw-term) + 0.02rem), 1.3rem); } } @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto } } :root { --app-em: var(--font-size-lg); } :root { --bg: #f2f5f8; --surface: #ffffff; --surface-soft: #f7f9fb; --surface-sunk: #eef2f6; --text: #1d2935; --muted: #595f64; --line: #e4e9ee; --accent: #6686a3; --accent-strong: #496c8b; --accent-soft: #e8f0f6; --accent-hover-soft: #dfeaf2; --accent-ink: #ffffff; --sage: #9bac9f; --sage-soft: #e9efea; --sage-ink: #596f60; --sage-hover: #dee7e0; --sage-hover-ink: #516657; --mist-soft: #eeecf1; --mist-ink: #645d6f; --mist-hover: #e4e1e9; --amber-soft: #f6efe3; --amber-ink: #795a2f; --amber-hover: #eee3d2; --rose-soft: #f4e8e5; --rose-ink: #80524b; --rose-hover: #eadbd7; --positive: #40694f; --positive-soft: #e9f0eb; --negative: #9c6259; --negative-soft: #f4e8e5; --warn: #8a6a3c; --warn-soft: #f6efe3; --news-text: #333; --image-brightness: 1; --image-contrast: 1; --image-saturate: 1; --star: #bd9d5b; --star-off: #d4dae0; --dot: #c1cad2; --shadow: 0 calc(var(--app-em)*1.125) calc(var(--app-em)*3.375) rgba(39, 58, 75, .09); --shadow-soft: 0 calc(var(--app-em)*0.5) calc(var(--app-em)*1.75) rgba(39, 58, 75, .07); --shadow-tiny: 0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.875) rgba(39, 58, 75, .05); --shadow-menu: 0 calc(var(--app-em)*1.5) calc(var(--app-em)*3.5) rgba(24, 39, 53, .18), 0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.75) rgba(24, 39, 53, .12); --shadow-modal: 0 calc(var(--app-em)*1.5) calc(var(--app-em)*4) rgba(24, 39, 53, .28), 0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.75) rgba(24, 39, 53, .16); --radius: calc(var(--app-em)*1); --container: calc(var(--app-em) * 90); --sp-1: calc(var(--app-em)*0.25); --sp-2: calc(var(--app-em)*0.5); --sp-3: calc(var(--app-em)*0.75); --sp-4: calc(var(--app-em)*1); --sp-5: calc(var(--app-em)*1.25); --sp-6: calc(var(--app-em)*1.5); --sp-7: calc(var(--app-em)*1.75); --sp-8: calc(var(--app-em)*2); --sp-10: calc(var(--app-em)*2.5); --sp-12: calc(var(--app-em)*3); --r-xs: calc(var(--app-em)*0.375); --r-sm: calc(var(--app-em)*0.5); --r-md: calc(var(--app-em)*0.625); --r-lg: calc(var(--app-em)*0.8125); --r-xl: calc(var(--app-em)*1.375); --r-pill: calc(var(--app-em)*6.25); --hair: calc(var(--app-em)*0.0625); --control-h: calc(var(--app-em)*2.875); --head-offset: calc(var(--app-em)*6); --code-bg: #f4f7fa; --code-border: #dfe6ee; --code-ink: #1d2935; --code-comment: #69788a; --code-punct: #5f6f7e; --code-value: #8c1d54; --code-string: #3f6b1f; --code-operator: #8a5f2b; --code-keyword: #0a5f8a; --code-function: #b8304c; --code-variable: #27388a; --code-regex: #8a5a00; --code-select: #b3d4fc; --code-shadow: 0 var(--hair) #fff; --fs-meta: calc(var(--app-em)*0.9375); --fs-sm: var(--app-em); --fs-ui: calc(var(--app-em)*.95); --fs-body: calc(var(--app-em)*1.125); --fs-lead: calc(var(--app-em)*1.1); --fs-h4: calc(var(--app-em)*1.25); --fs-h3: calc(var(--app-em)*1.4); --fs-h2: calc(var(--app-em)*1.6); --fs-h1: calc(var(--app-em)*2); } :root[data-theme="dark"] { --bg: #131820; --surface: #1b222c; --surface-soft: #222a35; --surface-sunk: #171e27; --text: #dee4ea; --muted: #94a2b0; --line: #2b3440; --accent: #7ea2c2; --accent-strong: #9cc0dd; --accent-soft: #1f2c3a; --accent-hover-soft: #26374a; --accent-ink: #101821; --sage-soft: #22302a; --sage-ink: #a9c5b1; --sage-hover: #2a3a33; --sage-hover-ink: #a9c5b1; --mist-soft: #2a2734; --mist-ink: #b9b1c7; --mist-hover: #33303f; --amber-soft: #2d2619; --amber-ink: #d3b788; --amber-hover: #3a3020; --rose-soft: #33241f; --rose-ink: #d09187; --rose-hover: #402d27; --positive: #7cae92; --positive-soft: #1e2c25; --negative: #d09187; --negative-soft: #33241f; --warn: #d3b788; --warn-soft: #2d2619; --news-text: #b7c2cc; --image-brightness: .8; --image-contrast: 1.05; --image-saturate: .95; --star-off: #3a4552; --dot: #4a5563; --shadow: 0 calc(var(--app-em)*1.125) calc(var(--app-em)*3.375) rgba(0,0,0,.45); --shadow-soft: 0 calc(var(--app-em)*0.5) calc(var(--app-em)*1.75) rgba(0,0,0,.34); --shadow-tiny: 0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.875) rgba(0,0,0,.3); --shadow-menu: 0 calc(var(--app-em)*1.5) calc(var(--app-em)*3.5) rgba(0,0,0,.62), 0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.75) rgba(0,0,0,.4); --shadow-modal: 0 calc(var(--app-em)*1.5) calc(var(--app-em)*4) rgba(0,0,0,.62), 0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.75) rgba(0,0,0,.4); --code-bg: #141b24; --code-border: #2b3440; --code-ink: #dee4ea; --code-comment: #8798aa; --code-punct: #9aa8b6; --code-value: #e59ac0; --code-string: #a9cf94; --code-operator: #d8b98a; --code-keyword: #8bbcdd; --code-function: #f09a99; --code-variable: #adb9f2; --code-regex: #e0b263; --code-select: #2c4159; --code-shadow: none; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #131820; --surface: #1b222c; --surface-soft: #222a35; --surface-sunk: #171e27; --text: #dee4ea; --muted: #94a2b0; --line: #2b3440; --accent: #7ea2c2; --accent-strong: #9cc0dd; --accent-soft: #1f2c3a; --accent-hover-soft: #26374a; --accent-ink: #101821; --sage-soft: #22302a; --sage-ink: #a9c5b1; --sage-hover: #2a3a33; --sage-hover-ink: #a9c5b1; --mist-soft: #2a2734; --mist-ink: #b9b1c7; --mist-hover: #33303f; --amber-soft: #2d2619; --amber-ink: #d3b788; --amber-hover: #3a3020; --rose-soft: #33241f; --rose-ink: #d09187; --rose-hover: #402d27; --positive: #7cae92; --positive-soft: #1e2c25; --negative: #d09187; --negative-soft: #33241f; --warn: #d3b788; --warn-soft: #2d2619; --news-text: #b7c2cc; --image-brightness: .8; --image-contrast: 1.05; --image-saturate: .95; --star-off: #3a4552; --dot: #4a5563; --shadow: 0 calc(var(--app-em)*1.125) calc(var(--app-em)*3.375) rgba(0,0,0,.45); --shadow-soft: 0 calc(var(--app-em)*0.5) calc(var(--app-em)*1.75) rgba(0,0,0,.34); --shadow-tiny: 0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.875) rgba(0,0,0,.3); --shadow-menu: 0 calc(var(--app-em)*1.5) calc(var(--app-em)*3.5) rgba(0,0,0,.62), 0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.75) rgba(0,0,0,.4); --shadow-modal: 0 calc(var(--app-em)*1.5) calc(var(--app-em)*4) rgba(0,0,0,.62), 0 calc(var(--app-em)*0.25) calc(var(--app-em)*0.75) rgba(0,0,0,.4); --code-bg: #141b24; --code-border: #2b3440; --code-ink: #dee4ea; --code-comment: #8798aa; --code-punct: #9aa8b6; --code-value: #e59ac0; --code-string: #a9cf94; --code-operator: #d8b98a; --code-keyword: #8bbcdd; --code-function: #f09a99; --code-variable: #adb9f2; --code-regex: #e0b263; --code-select: #2c4159; --code-shadow: none; color-scheme: dark; } } :root[data-accent="blue"] { --accent: #6686a3; --accent-strong: #496c8b; --accent-soft: #e8f0f6; --accent-hover-soft: #dfeaf2; } :root[data-accent="sage"] { --accent: #849b89; --accent-strong: #5f7c68; --accent-soft: #e9f0eb; --accent-hover-soft: #dee7e0; } :root[data-accent="mauve"] { --accent: #90859d; --accent-strong: #71667e; --accent-soft: #f0edf3; --accent-hover-soft: #e4e1e9; } :root[data-theme="dark"][data-accent="blue"] { --accent: #7ea2c2; --accent-strong: #9cc0dd; --accent-soft: #1f2c3a; --accent-hover-soft: #26374a; } :root[data-theme="dark"][data-accent="sage"] { --accent: #87a68f; --accent-strong: #a6c4ae; --accent-soft: #212c24; --accent-hover-soft: #2a3a33; } :root[data-theme="dark"][data-accent="mauve"] { --accent: #a294ae; --accent-strong: #c0b1cc; --accent-soft: #282433; --accent-hover-soft: #33303f; } * { box-sizing: border-box; } html { direction: ltr; scroll-padding-top: var(--head-offset); } body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: var(--font-size-lg); line-height: 1.6; -webkit-font-smoothing: antialiased; } body > * { font-size: var(--fs-body); } button, a { -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.2; letter-spacing: -.022em; text-wrap: balance; } p { margin: 0; } :focus-visible { outline: none; } .icon { width: calc(var(--app-em)*1.25); height: calc(var(--app-em)*1.25); flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .container { width: min(calc(100% - var(--sp-10)), var(--container)); margin-inline: auto; } .sr-only { position: absolute; width: var(--hair); height: var(--hair); padding: 0; margin: calc(var(--hair)*-1); overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; z-index: 100; left: var(--sp-4); top: calc(var(--app-em)*-6); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-lg); background: var(--accent-strong); color: var(--accent-ink); font-size: var(--fs-ui); font-weight: 600; transition: top .2s ease; } .skip-link:focus { top: var(--sp-3); } .icon-button, .soft-button, .primary-button { border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--app-em)*0.5625); text-align: left; letter-spacing: .02em; transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; } .icon-button { width: calc(var(--app-em)*2.75); height: calc(var(--app-em)*2.75); border-radius: var(--r-lg); background: var(--surface-soft); color: var(--muted); position: relative; } .icon-button:hover { color: var(--accent-strong); background: var(--accent-soft); } .soft-button { min-height: var(--control-h); padding: 0 calc(var(--app-em)*1.125); border-radius: var(--r-lg); background: var(--surface-soft); color: var(--text); font-size: var(--fs-ui); font-weight: 600; } .soft-button:hover { background: var(--accent-soft); color: var(--accent-strong); } .soft-button--danger:hover { background: var(--negative-soft); color: var(--negative); } .primary-button { min-height: var(--control-h); padding: 0 calc(var(--app-em)*1.25); border-radius: var(--r-lg); color: #fff; background: #4267af; font-size: var(--fs-ui); font-weight: 600; box-shadow: 0 var(--sp-2) var(--sp-5) rgba(66,103,175,.18); } .primary-button:hover, .soft-button:hover { transform: translateY(calc(var(--app-em)*-0.0625)); } .primary-button:hover { background: #35548f; color: #fff; } .avatar { border-radius: 50%; background: var(--accent-soft); object-fit: cover; width: calc(var(--app-em)*2.75); height: calc(var(--app-em)*2.75); } .avatar--initial { display: grid; place-items: center; flex: none; background: var(--avatar-bg, var(--accent-strong)); color: #fff; font-size: var(--fs-sm); font-weight: 700; line-height: 1; letter-spacing: -.02em; user-select: none; } .avatar--tone-1 { --avatar-bg: #496a86; } .avatar--tone-2 { --avatar-bg: #3f755d; } .avatar--tone-3 { --avatar-bg: #7b5c2f; } .avatar--tone-4 { --avatar-bg: #6c557d; } .avatar--tone-5 { --avatar-bg: #2f7075; } .avatar--tone-6 { --avatar-bg: #854f47; } .avatar--tone-7 { --avatar-bg: #4f5f91; } .avatar--tone-8 { --avatar-bg: #626d3f; } .avatar--tone-9 { --avatar-bg: #7b4f68; } .avatar--tone-10 { --avatar-bg: #4e6270; } .avatar--sm { width: var(--sp-8); height: var(--sp-8); } .avatar--lg { width: calc(var(--app-em)*4.5); height: calc(var(--app-em)*4.5); } .avatar--xl { width: calc(var(--app-em)*7); height: calc(var(--app-em)*7); } .cover-image { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .cover-image, .story-text img, .item__text img {filter: brightness(var(--image-brightness)) contrast(var(--image-contrast)) saturate(var(--image-saturate));} .chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .chips a { display: inline-flex; align-items: center; height: calc(var(--app-em)*1.6875); padding: 0 calc(var(--app-em)*0.6875); border-radius: var(--r-sm); font-size: var(--fs-meta); font-weight: 600; transition: background .18s, color .18s; } .cat-link { --cat-link-bg: var(--accent-soft); --cat-link-color: var(--accent-strong); --cat-link-hover-bg: var(--accent-hover-soft); --cat-link-hover-color: var(--accent-strong); background: var(--cat-link-bg); color: var(--cat-link-color); } .cat-link:hover { background: var(--cat-link-hover-bg); color: var(--cat-link-hover-color); } .cat-link-2 { --cat-link-bg: var(--sage-soft); --cat-link-color: var(--sage-ink); --cat-link-hover-bg: var(--sage-hover); --cat-link-hover-color: var(--sage-hover-ink); } .cat-link-3 { --cat-link-bg: var(--amber-soft); --cat-link-color: var(--amber-ink); --cat-link-hover-bg: var(--amber-hover); --cat-link-hover-color: var(--amber-ink); } .cat-link-4 { --cat-link-bg: var(--mist-soft); --cat-link-color: var(--mist-ink); --cat-link-hover-bg: var(--mist-hover); --cat-link-hover-color: var(--mist-ink); } .cat-link-5 { --cat-link-bg: var(--rose-soft); --cat-link-color: var(--rose-ink); --cat-link-hover-bg: var(--rose-hover); --cat-link-hover-color: var(--rose-ink); } .chips--tags a { background: var(--surface-soft); color: var(--muted); font-weight: 500; height: calc(var(--app-em)*2.125); padding: 0 var(--sp-3); } .chips--tags a:hover { background: var(--accent-soft); color: var(--accent-strong); } .chips--plain a { background: transparent; color: var(--muted); height: auto; padding: 0; font-weight: 600; } .chips--plain a:hover { background: transparent; color: var(--accent-strong); } .meta-item { display: inline-flex; align-items: center; gap: calc(var(--app-em)*0.375); color: var(--muted); font-size: var(--fs-meta); white-space: nowrap; } .meta-item .icon { width: var(--sp-4); height: var(--sp-4); } .meta-item--author { font-weight: 600; color: var(--text); } .meta-item--author a { color: inherit; } .meta-item--author a:hover { color: var(--accent-strong); } .meta-dot { width: calc(var(--app-em)*0.1875); height: calc(var(--app-em)*0.1875); border-radius: 50%; background: var(--dot); flex: none; } .badge { display: inline-flex; align-items: center; height: calc(var(--app-em)*1.5); padding: 0 var(--sp-2); border-radius: var(--r-xs); background: var(--surface-soft); color: var(--muted); font-size: var(--fs-meta); font-weight: 600; } .badge--new { background: var(--positive-soft); color: var(--positive); } .pin-label { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-xs); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-meta); font-weight: 600; } .counter { display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--app-em)*1.75); height: calc(var(--app-em)*1.75); margin-left: var(--sp-2); padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-meta); font-weight: 600; } .icon-action { display: inline-grid; place-items: center; width: calc(var(--app-em)*2.125); height: calc(var(--app-em)*2.125); border-radius: var(--r-md); background: var(--surface-soft); color: var(--muted); cursor: pointer; transition: background .18s, color .18s; } .icon-action:hover, .icon-action.is-active { background: var(--accent-soft); color: var(--accent-strong); } .icon-action .icon { width: var(--sp-4); height: var(--sp-4); } .visual { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; background: linear-gradient(145deg,#dce8f0,#bacbd8); } .visual::before, .visual::after { content: ""; position: absolute; border-radius: 44% 56% 61% 39% / 54% 40% 60% 46%; } .visual::before { width: 78%; height: 62%; right: -8%; top: 13%; background: #7797ae; transform: rotate(-13deg); box-shadow: calc(var(--app-em)*-11.25) calc(var(--app-em)*9.375) 0 rgba(255,255,255,.62); } .visual::after { width: 38%; height: 34%; left: 17%; top: 18%; background: rgba(255,255,255,.7); } .news-list > :nth-child(3n+2) .visual, .related-grid > :nth-child(3n+2) .visual, .hero-slide:nth-child(3n+2) .visual { background: linear-gradient(145deg,#e3e9e2,#c4d0c5); } .news-list > :nth-child(3n+2) .visual::before, .related-grid > :nth-child(3n+2) .visual::before, .hero-slide:nth-child(3n+2) .visual::before { width: 65%; height: 76%; right: 4%; top: 8%; left: auto; background: #92aa98; transform: rotate(18deg); box-shadow: calc(var(--app-em)*-10.625) calc(var(--app-em)*6.875) 0 rgba(255,255,255,.68); } .news-list > :nth-child(3n+2) .visual::after, .related-grid > :nth-child(3n+2) .visual::after, .hero-slide:nth-child(3n+2) .visual::after { width: 28%; height: 28%; right: 12%; bottom: 9%; left: auto; top: auto; background: #f2f4ef; } .news-list > :nth-child(3n) .visual, .related-grid > :nth-child(3n) .visual, .hero-slide:nth-child(3n) .visual { background: linear-gradient(145deg,#e8e6eb,#cfcbd5); } .news-list > :nth-child(3n) .visual::before, .related-grid > :nth-child(3n) .visual::before, .hero-slide:nth-child(3n) .visual::before { width: 70%; height: 65%; left: -7%; right: auto; top: 8%; background: #aaa6b4; transform: rotate(-18deg); box-shadow: calc(var(--app-em)*12.5) calc(var(--app-em)*11.25) 0 rgba(255,255,255,.55); } .news-list > :nth-child(3n) .visual::after, .related-grid > :nth-child(3n) .visual::after, .hero-slide:nth-child(3n) .visual::after { width: 31%; height: 31%; left: 40%; right: auto; bottom: 12%; top: auto; background: #e3ecf1; } [data-theme="dark"] .visual { filter: brightness(.56) saturate(.85); } .utility { border-bottom: var(--hair) solid var(--line); background: var(--surface); color: var(--muted); font-size: var(--fs-meta); } .utility__inner { min-height: calc(var(--app-em)*2.625); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; } .utility__links { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--app-em)*1.375); } .utility a:hover { color: var(--accent-strong); } .site-header { position: sticky; top: 0; z-index: 30; background: var(--surface); box-shadow: 0 calc(var(--app-em)*0.4375) calc(var(--app-em)*1.875) rgba(39,58,75,.05); } .site-header.is-unstuck { position: relative; } [data-theme="dark"] .site-header { box-shadow: 0 calc(var(--app-em)*0.4375) calc(var(--app-em)*1.875) rgba(0,0,0,.35); } .header-main { min-height: calc(var(--app-em)*5.75); display: flex; align-items: center; gap: calc(var(--app-em)*1.875); } .brand { display: inline-flex; align-items: center; gap: calc(var(--app-em)*0.8125); flex: 0 1 auto; min-width: 0; } .brand__mark { width: calc(var(--app-em)*2.6875); height: calc(var(--app-em)*2.6875); border-radius: calc(var(--app-em)*0.875); background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; box-shadow: inset 0 0 0 var(--hair) rgba(73,108,139,.08); } .brand__mark .icon { width: calc(var(--app-em)*1.5625); height: calc(var(--app-em)*1.5625); } .brand__text { display: block; min-width: 0; } .brand__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(var(--app-em)*1.22); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; } .brand__tagline { display: block; color: var(--muted); font-size: var(--fs-meta); letter-spacing: .06em; text-transform: uppercase; } .primary-nav { display: flex; align-items: center; gap: calc(var(--app-em)*1.375); font-size: var(--fs-ui); font-weight: 600; } .primary-nav a { position: relative; padding: calc(var(--app-em)*0.625) 0; } .primary-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: var(--sp-1); height: calc(var(--app-em)*0.125); border-radius: var(--r-pill); background: var(--accent); transition: right .25s ease; } .primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { right: 0; } .header-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; flex: 0 0 auto; } .menu-button { display: none; } .icon-button .icon-close, .icon-button[aria-expanded="true"] .icon-search, .icon-button[aria-expanded="true"] .icon-menu { display: none; } .icon-button[aria-expanded="true"] .icon-close { display: block; } .icon-button[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-strong); } .theme-sun { display: none; } [data-theme="dark"] .theme-moon { display: none; } [data-theme="dark"] .theme-sun { display: block; } .search-panel { padding: 0 0 calc(var(--app-em)*1.125); } .search-panel[hidden] { display: none; } .search-form { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: var(--sp-2); } .search-form input[type="search"] { min-width: 0; height: calc(var(--app-em)*3.125); border: var(--hair) solid var(--line); border-radius: var(--r-lg); background: var(--surface-soft); padding: 0 var(--sp-4); color: var(--text); font-size: var(--fs-ui); } .search-form input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 var(--sp-1) var(--accent-soft); } .search-form__advanced { display: inline-flex; align-items: center; padding: 0 var(--sp-3); color: var(--muted); font-size: var(--fs-meta); } .search-form__advanced:hover { color: var(--accent-strong); } .category-bar { position: relative; border-top: var(--hair) solid var(--line); background: var(--surface); } .category-scroll { min-height: calc(var(--app-em)*3.375); display: flex; align-items: center; overflow: visible; overscroll-behavior-x: contain; } .category-scroll.is-dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; } .category-scroll.has-fade-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--sp-8)), transparent); mask-image: linear-gradient(to left, #000 calc(100% - var(--sp-8)), transparent); } .category-scroll.has-fade-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--sp-8)), transparent); mask-image: linear-gradient(to right, #000 calc(100% - var(--sp-8)), transparent); } .category-scroll.has-fade-left.has-fade-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--sp-8), #000 calc(100% - var(--sp-8)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--sp-8), #000 calc(100% - var(--sp-8)), transparent); } .category-scroll:has(> .category-menu > .category-menu__item--parent:hover), .category-scroll:has(> .category-menu > .category-menu__item--parent.is-focus-open), .category-scroll:has(> .category-menu > .category-menu__item--parent.is-open) { -webkit-mask-image: none; mask-image: none; } .category-menu > .category-menu__item--parent:hover > .category-menu__submenu, .category-menu > .category-menu__item--parent.is-focus-open > .category-menu__submenu, .category-menu > .category-menu__item--parent.is-open > .category-menu__submenu { position: fixed; inset-inline: auto; } .category-menu, .category-menu__submenu { margin: 0; padding: 0; list-style: none; } .category-menu { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .category-menu__item { position: relative; flex: none; } .category-menu__row { display: flex; align-items: center; min-width: 0; border-radius: var(--r-md); } .category-link { min-height: calc(var(--app-em)*2.75); display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; border-radius: var(--r-md); background: transparent; padding: calc(var(--app-em)*0.5625) calc(var(--app-em)*0.8125); color: var(--muted); font-size: var(--fs-ui); font-weight: 600; } .category-link:hover, .category-link.is-active, .category-menu__row:has(.category-link.is-active) { background: var(--accent-soft); color: var(--accent-strong); } .category-menu__item--parent > .category-menu__row > .category-link { padding-inline-end: var(--sp-2); } .category-menu__item--parent > .category-menu__row:hover { background: var(--accent-soft); color: var(--accent-strong); } .category-menu__item--parent > .category-menu__row:hover > .category-link { background: transparent; color: inherit; } .category-link__count { color: var(--muted); font-size: var(--fs-meta); font-weight: 600; opacity: .75; } .category-link.is-active .category-link__count { color: inherit; } .category-link__icon { width: calc(var(--app-em)*1.125); height: calc(var(--app-em)*1.125); border-radius: var(--r-xs); } .category-menu__toggle { width: calc(var(--app-em)*2.75); height: calc(var(--app-em)*2.75); display: grid; place-items: center; flex: none; margin-inline-start: calc(var(--sp-2)*-1); border: 0; border-radius: var(--r-md); background: transparent; color: var(--muted); cursor: pointer; } .category-menu__toggle:hover { color: var(--accent-strong); } .category-menu__toggle .icon { width: var(--sp-4); height: var(--sp-4); transition: transform .18s ease; } .category-link:focus-visible, .category-menu__toggle:focus-visible { outline: calc(var(--hair)*2) solid var(--accent-strong); outline-offset: calc(var(--hair)*2); } .category-menu__submenu { display: none; min-width: calc(var(--app-em)*18.5); max-width: min(calc(var(--app-em)*24), calc(100vw - var(--sp-6))); max-height: calc(100vh - var(--head-offset) - var(--sp-6)); overflow-y: auto; gap: var(--sp-1); padding: var(--sp-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-menu); } .category-menu > .category-menu__item > .category-menu__submenu { position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 38; } .category-menu > .category-menu__item:nth-last-child(-n+2) > .category-menu__submenu { inset-inline-start: auto; inset-inline-end: 0; } .category-menu > .category-menu__item--parent:hover > .category-menu__submenu, .category-menu > .category-menu__item--parent.is-focus-open > .category-menu__submenu, .category-menu__item--parent.is-open > .category-menu__submenu { display: grid; } .category-menu > .category-menu__item--parent:hover > .category-menu__row .category-menu__toggle .icon, .category-menu > .category-menu__item--parent.is-focus-open > .category-menu__row .category-menu__toggle .icon, .category-menu__item--parent.is-open > .category-menu__row .category-menu__toggle .icon { transform: rotate(180deg); } .category-menu__submenu .category-menu__item { width: 100%; } .category-menu__submenu .category-menu__row { position: relative; width: 100%; } .category-menu__submenu .category-link, .category-menu__submenu .category-menu__item--parent > .category-menu__row > .category-link { width: 100%; min-width: 0; flex: 1; justify-content: flex-start; white-space: nowrap; padding-block: var(--sp-2); padding-inline: var(--sp-3) calc(var(--app-em)*2.75 + var(--sp-3)); color: var(--text); font-weight: 500; } .category-menu__submenu .category-link__name { min-width: 0; flex: 1 1 auto; overflow: hidden; overflow-wrap: normal; text-overflow: ellipsis; white-space: nowrap; } .category-menu__submenu .category-link__count { min-width: calc(var(--app-em)*1.5); flex: none; margin-inline-start: auto; text-align: end; font-variant-numeric: tabular-nums; line-height: 1; } .category-menu__submenu .category-menu__toggle { position: absolute; inset-block-start: 50%; inset-inline-end: 0; margin-inline-start: 0; transform: translateY(-50%); } .category-menu__submenu .category-menu__submenu { min-width: 0; max-width: none; max-height: none; overflow: visible; margin-block-start: var(--sp-1); padding: 0 0 0 var(--sp-4); border-radius: 0; background: transparent; box-shadow: none; } .user-menu { position: relative; } .user-menu__toggle { list-style: none; cursor: pointer; } .user-menu__toggle::-webkit-details-marker { display: none; } .user-menu__name { max-width: calc(var(--app-em)*7.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu__badge { display: inline-grid; place-items: center; min-width: calc(var(--app-em)*1.375); height: calc(var(--app-em)*1.375); padding: 0 var(--sp-1); border-radius: var(--r-pill); background: var(--accent-strong); color: var(--accent-ink); font-size: var(--font-size-xs); font-weight: 700; } .user-menu__panel { position: absolute; right: 0; top: calc(100% + var(--sp-2)); z-index: 40; width: calc(var(--app-em)*21); max-width: calc(100vw - var(--sp-6)); padding: var(--sp-4); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-menu); } .user-menu__panel--login { width: calc(var(--app-em)*20); max-width: calc(100vw - var(--sp-6)); } .user-menu__head { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: var(--hair) solid var(--line); } .user-menu__profile { display: block; font-weight: 600; } .user-menu__group { display: flex; align-items: center; gap: var(--sp-1); color: var(--muted); font-size: var(--fs-meta); } .user-menu__group img { width: calc(var(--app-em)*1); height: auto; } .user-menu__list { display: grid; gap: var(--sp-1); padding: var(--sp-3) 0; } .user-menu__list a { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2); border-radius: var(--r-md); color: var(--text); font-size: var(--fs-ui); } .user-menu__list a:hover { background: var(--surface-soft); color: var(--accent-strong); } .user-menu__count { margin-left: auto; color: var(--muted); font-size: var(--fs-meta); } .user-menu__foot { padding-top: var(--sp-3); border-top: var(--hair) solid var(--line); } .user-menu__foot .soft-button { width: 100%; justify-content: center; } .user-menu__links { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); color: var(--muted); font-size: var(--fs-meta); } .user-menu__links a:hover { color: var(--accent-strong); } .soc-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: var(--hair) solid var(--line); } .soc-links:empty { display: none; } .soc-links__item { display: grid; place-items: center; width: calc(var(--app-em)*2.25); height: calc(var(--app-em)*2.25); border-radius: var(--r-md); background: var(--surface-soft); color: var(--muted); } .icon--brand { width: calc(var(--app-em)*1.125); height: calc(var(--app-em)*1.125); fill: currentColor; stroke: none; } .soc-links__item:hover { background: var(--accent-soft); color: var(--accent-strong); } .soc-links:empty { display: none; } .site-main { padding-top: var(--sp-6); padding-bottom: var(--sp-8); } .hero { padding: 0 0 calc(var(--app-em)*1.75); } .hero-stage { position: relative; min-height: calc(var(--app-em)*29.375); overflow: hidden; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow); } .hero-slide { display: none; min-height: calc(var(--app-em)*29.375); grid-template-columns: 1.05fr .95fr; } /*.hero-slide.is-active { display: grid; animation: air-reveal .45s cubic-bezier(.22,1,.36,1); }*/ /* Hero slider – plynulé prolínání */ .hero-stage { display: grid; } .hero-slide { grid-area: 1 / 1; display: block; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 650ms ease, visibility 650ms; } .hero-slide.is-active { display: block; opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; } .hero-controls, .hero-arrows { z-index: 3; } @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } } @keyframes air-reveal { from { transform: translateY(var(--sp-2)); opacity: .6; } to { transform: none; opacity: 1; } } .hero-copy { padding: calc(var(--app-em)*3.375) calc(var(--app-em)*3.375) calc(var(--app-em)*5.125); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .hero-title { max-width: calc(var(--app-em)*43.75); margin: var(--sp-5) 0 var(--sp-5); font-size: calc(var(--app-em)*2); line-height: 1.06; letter-spacing: -.035em; } .hero-title a:hover { color: var(--accent-strong); } .hero-lead { max-width: calc(var(--app-em)*37.5); color: var(--news-text); font-size: var(--fs-lead); line-height: 1.6; } .hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--app-em)*0.9375); margin-top: var(--sp-6); color: var(--muted); font-size: var(--fs-meta); } .hero-cta { margin-top: var(--sp-6); } .hero-media { position: relative; min-height: calc(var(--app-em)*25.625); margin: var(--sp-6); border-radius: calc(var(--app-em)*1.125); overflow: hidden; background: var(--surface-sunk); } .hero-media__link { position: absolute; inset: 0; display: block; border-radius: inherit; } .hero-controls { position: absolute; left: calc(var(--app-em)*3.375); bottom: calc(var(--app-em)*2.125); z-index: 4; display: flex; align-items: center; gap: calc(var(--app-em)*0.5625); } .hero-dot { width: calc(var(--app-em)*2.75); height: calc(var(--app-em)*1.75); padding: calc(var(--app-em)*0.71875) 0; border: 0; border-radius: var(--r-pill); background: var(--surface-sunk); background-clip: content-box; cursor: pointer; transition: background .25s ease; } .hero-dot.is-active { background: var(--accent); } .hero-arrows { position: absolute; right: var(--sp-6); bottom: calc(var(--app-em)*2.125); z-index: 4; display: flex; gap: var(--sp-2); } .hero-arrow { width: calc(var(--app-em)*2.625); height: calc(var(--app-em)*2.625); border: 0; border-radius: var(--r-md); background: var(--surface); color: var(--text); box-shadow: var(--shadow-soft); cursor: pointer; display: grid; place-items: center; } .hero-arrow:hover { background: var(--accent-soft); color: var(--accent-strong); } .hero-arrow .icon-play { display: none; } .hero-arrow[aria-pressed="true"] .icon-play { display: block; } .hero-arrow[aria-pressed="true"] .icon-pause { display: none; } .hero-media .pin-label { position: absolute; z-index: 3; left: var(--sp-4); top: var(--sp-4); background: var(--surface); box-shadow: var(--shadow-soft); } .layout { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--app-em)*20.625); gap: var(--sp-7); align-items: start; } .layout__main { min-width: 0; display: grid; gap: var(--sp-4); align-content: start; } .layout__main > *, .feed > *, .sidebar > *, .gate > *, .auth-form > *, .form-body > *, .form-grid > *, .thread > * { min-width: 0; } .section-heading { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-5); margin: var(--sp-2) 0 var(--sp-5); } .section-heading h1, .section-heading h2 { font-size: var(--fs-h2); line-height: 1.15; } .section-heading p { margin-top: calc(var(--app-em)*0.4375); color: var(--muted); font-size: var(--fs-sm); } .section-heading__link, .widget__link { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--accent-strong); font-size: var(--fs-meta); font-weight: 600; white-space: nowrap; } .section-heading__link .icon, .widget__link .icon { width: var(--sp-4); height: var(--sp-4); } .section-heading__link:hover, .widget__link:hover { text-decoration: underline; } .section-intro { padding: var(--sp-5) var(--sp-6); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); } .section-intro h1 { font-size: var(--fs-h2); } .section-intro p { margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-sm); } .panel { padding: var(--sp-6); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); } .pagetools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); } .pagetools__sort { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-meta); } .speedbar { color: var(--muted); font-size: var(--fs-meta); } .speedbar__inner { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); } .speedbar a:hover { color: var(--accent-strong); } .feed { display: grid; gap: var(--sp-4); } .news-list { display: grid; gap: var(--sp-4); } .story-card { display: grid; grid-template-columns: calc(var(--app-em)*15.625) minmax(0,1fr); gap: var(--sp-6); padding: calc(var(--app-em)*1.125); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); transition: transform .25s ease, box-shadow .25s ease; } .story-card:hover { transform: translateY(calc(var(--app-em)*-0.125)); box-shadow: var(--shadow); } .story-card--pinned { box-shadow: var(--shadow-soft), inset 0 0 0 var(--hair) var(--accent); } .story-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-sunk); } .story-media .visual { transition: transform .5s cubic-bezier(.22,1,.36,1); } .story-card:hover .visual, .story-card:hover .cover-image { transform: scale(1.04); } .story-media .cover-image { transition: transform .5s cubic-bezier(.22,1,.36,1); } .story-media .pin-label { position: absolute; z-index: 2; left: var(--sp-2); top: var(--sp-2); background: var(--surface); } .story-body { min-width: 0; display: flex; flex-direction: column; padding: calc(var(--app-em)*0.375) var(--sp-1) var(--sp-1) 0; } .story-top { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--app-em)*0.6875); color: var(--muted); font-size: var(--fs-meta); } .story-title { margin: calc(var(--app-em)*0.875) 0 var(--sp-2); font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.024em; } .story-title a:hover { color: var(--accent-strong); } .story-text { color: var(--news-text); font-size: var(--fs-sm); line-height: 1.55; } .story-text :last-child { margin-bottom: 0; } .edit-note { margin-top: var(--sp-3); color: var(--muted); font-size: var(--fs-meta); } .story-tools { margin-top: auto; padding-top: calc(var(--app-em)*1.125); display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--app-em)*0.6875); color: var(--muted); font-size: var(--fs-meta); } .story-actions { display: inline-flex; align-items: center; gap: var(--sp-2); } .story-rate { display: inline-flex; align-items: center; gap: var(--sp-2); } .read-link { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--accent-strong); font-size: var(--fs-sm); font-weight: 600; } .read-link .icon { width: var(--sp-4); height: var(--sp-4); } .read-link:hover { text-decoration: underline; } .sidebar { display: grid; gap: calc(var(--app-em)*1.125); align-content: start; min-width: 0; } .widget { border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); padding: calc(var(--app-em)*1.375); } .widget__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: calc(var(--app-em)*0.9375); margin-bottom: calc(var(--app-em)*1.0625); } .widget h2 { font-size: var(--fs-h4); letter-spacing: -.02em; } .widget--ad { padding: 0; background: transparent; box-shadow: none; } .widget--auto:not(:has(li)):not(:has(a)) { display: none; } .popular-list { display: grid; margin: 0; padding: 0; list-style: none; } .popular-item { border-top: var(--hair) solid var(--line); } .popular-item:first-child { border-top: 0; } .popular-item:first-child .popular-item__link { padding-top: 0; } .popular-item__link { display: grid; grid-template-columns: calc(var(--app-em)*4.75) minmax(0,1fr); gap: calc(var(--app-em)*0.8125); padding: calc(var(--app-em)*0.8125) 0; } .popular-item__link:not(:has(.popular-item__thumb)) { grid-template-columns: minmax(0,1fr); } .popular-item__thumb { position: relative; height: calc(var(--app-em)*3.875); overflow: hidden; border-radius: calc(var(--app-em)*0.5625); background: var(--accent-soft); } .popular-item__thumb .visual { background: var(--accent-soft); } .popular-item__thumb .visual::before { width: calc(var(--app-em)*3.375); height: calc(var(--app-em)*3.375); right: calc(var(--app-em)*-0.75); left: auto; top: calc(var(--app-em)*0.375); bottom: auto; border-radius: 50%; background: var(--accent); opacity: .42; transform: none; box-shadow: calc(var(--app-em)*-2.375) calc(var(--app-em)*2.375) 0 rgba(255,255,255,.7); } .popular-item__thumb .visual::after { display: none; } [data-theme="dark"] .popular-item__thumb .visual::before { box-shadow: calc(var(--app-em)*-2.375) calc(var(--app-em)*2.375) 0 rgba(255,255,255,.05); } .popular-item__body { min-width: 0; } .popular-item__title { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; overflow-wrap: break-word; } .popular-item__link:hover .popular-item__title { color: var(--accent-strong); } .popular-item__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-top: calc(var(--app-em)*0.375); color: var(--muted); font-size: var(--fs-meta); } .popular-item__meta > * { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; } .popular-item__meta .icon { width: calc(var(--app-em)*0.875); height: calc(var(--app-em)*0.875); } .widget--poll .poll-question, .poll-card .poll-question { margin-bottom: calc(var(--app-em)*0.875); color: var(--muted); font-size: var(--fs-sm); } .poll-list { display: grid; gap: var(--sp-2); } .poll-total { margin-top: var(--sp-3); color: var(--muted); font-size: var(--fs-meta); } .poll-total--closed { color: var(--warn); } .poll-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: calc(var(--app-em)*0.5625); margin-top: calc(var(--app-em)*0.9375); } .poll-actions > .primary-button { min-width: 0; flex-shrink: 1; } .poll-actions__results { flex: none; margin-inline-start: auto; } .poll-actions > .primary-button:focus-visible, .poll-actions__results:focus-visible { outline: calc(var(--hair)*2) solid var(--accent-strong); outline-offset: calc(var(--hair)*2); } .poll-block { margin-top: var(--sp-4); } .poll-card { padding: calc(var(--app-em)*1.375); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); } .poll-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); } .poll-card__title { font-size: var(--fs-h4); } .tabs { display: flex; flex-wrap: wrap; gap: calc(var(--app-em)*0.375); } .tabs__btn { border: 0; border-radius: var(--r-sm); background: var(--surface-soft); padding: var(--sp-2) var(--sp-2); color: var(--muted); cursor: pointer; font-size: var(--fs-meta); font-weight: 600; } .tabs__btn.is-active { color: var(--accent-strong); background: var(--accent-soft); } .tab-panel[hidden] { display: none; } .archive-list { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); } .archive-list > br, #dle_news_archive_link > br, #dle_news_archive > br { display: none; } .skin-select select { width: 100%; } .accent-picker { min-inline-size: 0; margin: var(--sp-4) 0 0; padding: 0; border: 0; } .accent-picker__label { width: 100%; margin-bottom: var(--sp-3); color: var(--muted); font-size: var(--fs-meta); font-weight: 600; } .accent-picker__options { display: flex; align-items: center; gap: var(--sp-3); } .accent-picker__swatch { position: relative; display: block; border-radius: 50%; cursor: pointer; } .accent-picker__dot { display: grid; place-items: center; width: calc(var(--app-em)*2.625); height: calc(var(--app-em)*2.625); border: calc(var(--hair)*2) solid rgba(255,255,255,.72); border-radius: 50%; background: var(--swatch); box-shadow: var(--shadow-tiny); color: #fff; transition: transform .18s ease, box-shadow .18s ease; } .accent-picker__check { width: calc(var(--app-em)*1.25); height: calc(var(--app-em)*1.25); opacity: 0; filter: drop-shadow(0 var(--hair) calc(var(--hair)*2) rgba(0,0,0,.24)); transform: scale(.7); transition: opacity .18s ease, transform .18s ease; } .accent-picker__input:checked + .accent-picker__dot { box-shadow: 0 0 0 calc(var(--hair)*2) var(--surface), 0 0 0 calc(var(--hair)*4) var(--accent-strong), var(--shadow-tiny); } .accent-picker__input:checked + .accent-picker__dot .accent-picker__check { opacity: 1; transform: scale(1); } .accent-picker__input:focus-visible + .accent-picker__dot { outline: calc(var(--hair)*2) solid var(--text); outline-offset: calc(var(--hair)*4); } @media (hover: hover) { .accent-picker__swatch:hover .accent-picker__dot { transform: translateY(calc(var(--hair)*-2)); } } .wide-section { margin-top: var(--sp-6); padding: calc(var(--app-em)*1.625); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-soft); } .wide-section__head { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-5); margin-bottom: var(--sp-5); } .wide-section h2 { font-size: var(--fs-h4); } .wide-section__head p { margin-top: calc(var(--app-em)*0.375); color: var(--muted); font-size: var(--fs-meta); } .comment-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-3); } .comment-card { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); border-radius: var(--r-lg); background: var(--surface-soft); padding: var(--sp-4); } .comment-card__top { display: flex; align-items: center; gap: var(--sp-3); } .comment-card__who b { display: block; font-size: var(--fs-sm); font-weight: 600; } .comment-card__when { display: block; color: var(--muted); font-size: var(--fs-meta); } .comment-card__text { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; } .comment-card__link { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: auto; color: var(--accent-strong); font-size: var(--fs-meta); font-weight: 600; } .comment-card__link .icon { width: var(--sp-4); height: var(--sp-4); } .comment-card__link:hover { text-decoration: underline; } .partners { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } .partner { min-width: 0; padding-right: var(--sp-4); border-right: var(--hair) solid var(--line); } .partner:last-child { border-right: 0; padding-right: 0; } .partner__link { display: grid; gap: var(--sp-2); } .partner__title { font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; } .partner__link:hover .partner__title { color: var(--accent-strong); } .partner__text { color: var(--muted); font-size: var(--fs-meta); line-height: 1.5; } .partner__meta { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--muted); font-size: var(--fs-meta); opacity: .8; } .partner__meta .icon { width: calc(var(--app-em)*0.875); height: calc(var(--app-em)*0.875); } .partners__promo { margin-top: var(--sp-5); } .dle-ad { position: relative; display: block; overflow: hidden; min-height: calc(var(--app-em)*15.625); padding: var(--sp-6); border-radius: var(--radius); background: var(--surface-sunk); box-shadow: var(--shadow-soft); color: var(--text); } .dle-ad::before { content: ""; position: absolute; width: calc(var(--app-em)*15); height: calc(var(--app-em)*15); right: calc(var(--app-em)*-4.625); top: calc(var(--app-em)*-5.1875); border-radius: 50%; background: #c7d4dd; box-shadow: calc(var(--app-em)*-6.25) calc(var(--app-em)*11.875) 0 #d5dfe5; } .dle-ad__label { position: absolute; z-index: 3; top: var(--sp-4); right: var(--sp-4); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); background: var(--surface); color: var(--muted); font-size: var(--fs-meta); font-weight: 600; } .dle-ad__title { position: relative; z-index: 2; display: block; max-width: calc(var(--app-em)*12.5); margin-top: var(--sp-8); font-size: var(--fs-h3); line-height: 1.16; letter-spacing: -.028em; } .dle-ad__text { position: relative; z-index: 2; display: block; margin-top: var(--sp-3); max-width: calc(var(--app-em)*15); color: var(--muted); font-size: var(--fs-meta); } .dle-ad:hover .dle-ad__title { color: var(--accent-strong); } .dle-ad--wide { min-height: calc(var(--app-em)*9); } .dle-ad--wide .dle-ad__title { max-width: calc(var(--app-em)*25); margin-top: 0; } .dle-ad--wide .dle-ad__text { max-width: calc(var(--app-em)*30); } [data-theme="dark"] .dle-ad::before { background: #2b3743; box-shadow: calc(var(--app-em)*-6.25) calc(var(--app-em)*11.875) 0 #242e39; } .pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: calc(var(--app-em)*0.4375); margin: var(--sp-6) 0 var(--sp-2); } .pagination__pages { display: inline-flex; align-items: center; flex-wrap: wrap; gap: calc(var(--app-em)*0.4375); } .pagination__pages > a, .pagination__pages > span, .pagination__arrow { min-width: calc(var(--app-em)*2.75); height: calc(var(--app-em)*2.75); padding: 0 calc(var(--app-em)*0.8125); border-radius: var(--r-md); background: var(--surface); display: inline-grid; place-items: center; color: var(--muted); font-size: var(--fs-ui); font-weight: 600; box-shadow: var(--shadow-tiny); } .pagination__pages > a:hover, .pagination__edge > a:hover .pagination__arrow { color: var(--accent-strong); background: var(--accent-soft); } .pagination__pages > span { color: var(--accent-ink); background: var(--accent-strong); box-shadow: none; } .pagination__pages > span.nav_ext { color: var(--muted); background: transparent; border-color: transparent; box-shadow: none; } .pagination__edge > a, .pagination__edge > span { display: inline-flex; border-radius: var(--r-md); } .pagination__arrow { width: calc(var(--app-em)*2.75); padding-inline: 0; cursor: default; } .pagination__edge > a .pagination__arrow { cursor: pointer; } .pagination__edge:empty { display: none; } .pagination__label { color: var(--muted); font-size: var(--fs-meta); } .pagination--split { justify-content: flex-start; } .fullstory { padding: calc(var(--app-em)*1.625); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); } .fullstory--pinned { box-shadow: var(--shadow-soft), inset 0 0 0 var(--hair) var(--accent); } .fullstory__head { padding-bottom: var(--sp-4); border-bottom: var(--hair) solid var(--line); } .fullstory__title { margin: var(--sp-2) 0 var(--sp-2); font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -.032em; } .fullstory__meta { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--app-em)*0.6875); } .fullstory__actions { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-1); margin-left: auto; } .fullstory__actions:empty { display: none; } .fullstory__actions .icon-action { background: transparent; } .fullstory__actions .icon-action:hover { background: var(--surface-soft); } .fullstory__actions .icon-action.is-active { background: var(--accent-soft); color: var(--accent-strong); } .fullstory__actions a:focus-visible .icon-action { color: var(--accent-strong); box-shadow: 0 0 0 var(--sp-1) var(--accent-soft); } .fullstory__media { position: relative; margin: var(--sp-5) 0; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-sunk); } .fullstory__pages { margin-top: var(--sp-5); } .fullstory__tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--hair) solid var(--line); } .fullstory__tags-label { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-meta); font-weight: 600; } .fullstory__tags-label .icon { width: var(--sp-4); height: var(--sp-4); } .story-nav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); margin-top: var(--sp-4); } .story-nav:empty { display: none; } .story-nav__item { display: grid; gap: var(--sp-1); padding: var(--sp-4); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-tiny); } .story-nav__item:hover { box-shadow: var(--shadow-soft); } .story-nav__item--next { text-align: right; grid-column: 2; } .story-nav__label { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--muted); font-size: var(--fs-meta); } .story-nav__item--next .story-nav__label { justify-content: flex-end; } .story-nav__label .icon { width: var(--sp-4); height: var(--sp-4); } .story-nav__title { font-size: var(--fs-sm); font-weight: 600; } .related { margin-top: var(--sp-6); } .related-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-4); } .related-card { display: grid; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-tiny); } .related-card:hover { box-shadow: var(--shadow-soft); } .related-card__media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: var(--surface-sunk); } .related-card__body { display: grid; gap: var(--sp-2); } .related-card__title { font-size: var(--fs-sm); line-height: 1.35; } .related-card__title a:hover { color: var(--accent-strong); } .discussion { margin-top: var(--sp-6); } .thread { display: grid; gap: calc(var(--app-em)*0.875); } .thread__item { padding: calc(var(--app-em)*1.375) var(--sp-6); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); } .thread__item--reply { background: var(--surface-soft); box-shadow: none; } .thread__item--own { background: var(--surface-soft); box-shadow: none; } .thread__top { display: flex; align-items: center; gap: var(--sp-3); } .thread__avatar { position: relative; flex: none; } .thread__online { position: absolute; right: 0; bottom: 0; width: calc(var(--app-em)*0.75); height: calc(var(--app-em)*0.75); border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 calc(var(--app-em)*0.125) var(--surface); } .thread__ident { min-width: 0; } .thread__who { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-ui); font-weight: 600; } .thread__who img { width: calc(var(--app-em)*1); height: auto; } .thread__author { min-width: 0; } .thread__badge { padding:0 var(--sp-2); border-radius: var(--r-xs); background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-meta); font-weight: 600; } .thread__when { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-meta); } .thread__when a:hover { color: var(--accent-strong); } .thread__mass { margin-left: auto; } .thread__text { margin-top: calc(var(--app-em)*0.875); color: var(--news-text); font-size: var(--fs-sm); line-height: 1.6; } .thread__images { margin-top: var(--sp-3); } .thread__signature { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: var(--hair) solid var(--line); color: var(--muted); font-size: var(--fs-meta); } .thread__actions { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--app-em)*0.375); margin-top: calc(var(--app-em)*0.875); } .thread__btn { display: inline-flex; align-items: center; gap: calc(var(--app-em)*0.4375); min-height: calc(var(--app-em)*2.125); padding: 0 var(--sp-3); border-radius: var(--r-md); color: var(--muted); cursor: pointer; font-size: var(--fs-meta); font-weight: 600; transition: background .18s ease, color .18s ease; } .thread__btn:hover { background: var(--surface-soft); color: var(--accent-strong); } .thread__btn--danger:hover { background: var(--negative-soft); color: var(--negative); } .thread__btn .icon { width: var(--sp-4); height: var(--sp-4); } .thread__replies { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--muted); font-size: var(--fs-meta); } .thread__replies .icon { width: var(--sp-4); height: var(--sp-4); } .thread__rate { display: inline-flex; align-items: center; gap: var(--sp-1); } .thread__actions .thread__rate { margin-left: auto; } .thread__stars { display: inline-flex; align-items: center; } .vote-pill { display: inline-flex; align-items: center; gap: calc(var(--app-em)*0.4375); min-height: calc(var(--app-em)*2.125); padding: 0 var(--sp-3); border-radius: var(--r-md); color: var(--muted); font-size: var(--fs-meta); font-weight: 600; cursor: pointer; transition: background .18s ease, color .18s ease; } .vote-pill .icon { width: var(--sp-4); height: var(--sp-4); } .vote-pill--up { color: var(--positive); } .vote-pill--down { color: var(--negative); } .vote-pill--up:hover { background: var(--positive-soft); } .vote-pill--down:hover { background: var(--negative-soft); } .vote-score { min-width: calc(var(--app-em)*1.5); text-align: center; color: var(--text); font-size: var(--fs-meta); font-weight: 600; } .thread__rate.is-positive .vote-score { color: var(--positive); } .thread__rate.is-negative .vote-score { color: var(--negative); } .reply-form { margin-top: var(--sp-4); padding: var(--sp-6); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); } .reply-form__title { font-size: var(--fs-h4); } .reply-form__note { margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-meta); } .reply-form__note a, .form-actions__hint a { color: var(--accent-strong); font-weight: 600; } .form-body { display: grid; gap: var(--sp-4); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-4); } .form-grid--three { grid-template-columns: repeat(3, minmax(0,1fr)); } .form-row { display: grid; gap: var(--sp-2); min-width: 0; margin-top: var(--sp-4); } .form-body > .form-row, .form-grid > .form-row, .reply-form .form-row:first-of-type { margin-top: 0; } .form-row--inline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); } .form-row--check { display: flex; align-items: center; gap: var(--sp-2); } .form-label { color: var(--muted); font-size: var(--fs-meta); font-weight: 600; } .form-req { color: var(--negative); margin-left: var(--sp-1); } .form-hint, .form-actions__hint { color: var(--muted); font-size: var(--fs-meta); } .form-inline { display: flex; gap: var(--sp-2); } .form-inline .form-input { flex: 1 1 auto; min-width: 0; } .form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); } .form-sep { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--hair) solid var(--line); font-size: var(--fs-ui); } .auth-form { display: grid; gap: var(--sp-4); } .auth-form__title { font-size: var(--fs-h2); overflow-wrap: anywhere; } .auth-form__lead { color: var(--muted); font-size: var(--fs-sm); } .auth-form__lead a { color: var(--accent-strong); } .addvote { margin-top: var(--sp-4); } .addvote > summary { display: inline-flex; list-style: none; cursor: pointer; } .addvote > summary::-webkit-details-marker { display: none; } .addvote__body { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface-soft); } .profile-settings { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: var(--hair) solid var(--line); } .profile-settings > summary { display: inline-flex; list-style: none; cursor: pointer; } .profile-settings > summary::-webkit-details-marker { display: none; } .profile-settings > .form-body { margin-top: var(--sp-5); } .search-simple { display: grid; gap: var(--sp-4); } .search-advanced { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-4); } .search-fieldset { min-width: 0; margin: 0; padding: var(--sp-4); border: var(--hair) solid var(--line); border-radius: var(--r-lg); } .search-fieldset legend { padding: 0 var(--sp-2); color: var(--muted); font-size: var(--fs-meta); font-weight: 600; } .search-fieldset--wide, .search-actions { grid-column: 1 / -1; } .search-result-msg { margin-top: var(--sp-4); color: var(--muted); font-size: var(--fs-sm); } .result-card { padding: var(--sp-5); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); } .result-card + .result-card { margin-top: var(--sp-3); } .result-card__top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); } .result-card__title { margin: var(--sp-2) 0; font-size: var(--fs-h4); } .result-card__title a:hover { color: var(--accent-strong); } .result-card__text { color: var(--news-text); font-size: var(--fs-sm); } .result-card__tools { margin-top: var(--sp-3); } .profile__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5); } .profile__name { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-h2); } .profile__name img { width: calc(var(--app-em)*1.25); height: auto; } .profile__status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-meta); } .is-online { color: var(--positive); font-weight: 600; } .profile__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); } .profile__actions > a { min-height: var(--control-h); padding: 0 calc(var(--app-em)*1.125); border-radius: var(--r-lg); background: var(--surface-soft); color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--app-em)*0.5625); font-size: var(--fs-ui); font-weight: 600; line-height: 1; letter-spacing: .02em; text-align: left; transition: transform .2s ease, background .2s ease, color .2s ease; } .profile__actions > a:hover { background: var(--accent-soft); color: var(--accent-strong); transform: translateY(calc(var(--app-em)*-0.0625)); } .profile__action-content { display: inline-flex; align-items: center; gap: calc(var(--app-em)*0.5625); } .profile__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; gap: var(--sp-4); margin-top: var(--sp-6); } .profile__facts { margin: 0; display: grid; grid-template-columns: auto 1fr; align-content: start; align-items: baseline; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); } .profile__facts dt { color: var(--muted); font-size: var(--fs-meta); } .profile__facts dd { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); } .profile__link { color: var(--accent-strong); font-size: var(--fs-meta); } .profile__about { margin-top: var(--sp-6); } .profile__about h2 { margin-bottom: var(--sp-2); font-size: var(--fs-h4); } .profile__name, .profile__status, .profile__actions > a, .profile__facts, .profile__facts dt, .profile__link, .profile__about h2, .profile__about .text, .profile .notice--warn { font-size: var(--fs-ui); } .pm-menu { display: flex; gap: var(--sp-2); } .pm-menu span { cursor: pointer; } .pm-status { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-5); color: var(--muted); font-size: var(--fs-meta); } .pm-status__bar { grid-column: 1 / -1; grid-row: 2; min-width: 0; } .pm-status__text { grid-column: 2; grid-row: 1; text-align: end; font-variant-numeric: tabular-nums; } .pm-dialog { margin-top: var(--sp-4); } .stats-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-4); } .stats-card { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface-soft); } .stats-card__label { display: block; color: var(--muted); font-size: var(--fs-meta); font-weight: 600; } .stats-card__value { display: block; margin: var(--sp-1) 0; font-size: calc(var(--app-em)*2.25); line-height: 1; letter-spacing: -.03em; } .stats-card__hint { color: var(--muted); font-size: var(--fs-meta); } .stats-groups { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-4); margin-top: var(--sp-5); } .stats-group h2 { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); font-size: var(--fs-h4); } .stats-group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); } .stats-group li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: var(--hair) solid var(--line); } .stats-group a { color: var(--accent-strong); } .stats-db { margin-top: var(--sp-5); color: var(--muted); font-size: var(--fs-meta); } .stats-top-title { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-h4); } .table-scroll { overflow-x: auto; } .staticpage .static-meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); } .static-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .static-tools .soft-button { cursor: pointer; } .notice { display: flex; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); background: var(--warn-soft); color: var(--warn); } .notice__icon { flex: none; } .notice__title { display: block; font-size: var(--fs-ui); } .notice__text { margin-top: var(--sp-1); font-size: var(--fs-sm); } .notice__text a { color: var(--accent-strong); font-weight: 600; text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: calc(var(--app-em)*0.1875); } .notice__text a:hover { color: var(--text); } .notice--warn { margin-top: var(--sp-3); font-size: var(--fs-meta); } .profile-popup { display: grid; gap: var(--sp-5); } .profile-popup__summary { display: flex; align-items: flex-start; gap: var(--sp-4); } .profile-popup__avatar { position: relative; flex: none; } .profile-popup__identity { flex: 1; min-width: 0; } .profile-popup__name { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-ui); overflow-wrap: anywhere; } .profile-popup__details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); margin: 0; } .profile-popup__details > div { display: contents; } .profile-popup dt { color: var(--muted); font-size: var(--fs-meta); } .profile-popup dd { min-width: 0; margin: 0; color: var(--text); font-size: var(--fs-meta); font-weight: 600; overflow-wrap: anywhere; } .profile-popup__links { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); padding-top: var(--sp-1); font-size: var(--fs-meta); } .profile-popup__links:not(:has(a)) { display: none; } .profile-popup__link { color: var(--accent-strong); } .profile-popup__link a:hover { color: var(--accent); } .profile-popup__link--rss { margin-inline-start: auto; padding-inline-start: var(--sp-3); border-inline-start: var(--hair) solid var(--line); } .profile-popup__link--rss:empty { display: none; } @media (max-width: 30em) { .profile-popup__details { grid-template-columns: 1fr; } .profile-popup__details > div { display: grid; gap: var(--sp-1); } } .page--gate { display: grid; place-items: center; min-height: 100vh; padding: 0; background: var(--bg); } .gate { width: min(calc(var(--app-em) * 50), calc(100% - var(--sp-6))); padding-block: var(--sp-6); display: grid; gap: var(--sp-4); } .gate__back { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-meta); } .gate__back:hover { color: var(--accent-strong); } .gate__card { display: grid; gap: var(--sp-5); padding: var(--sp-8); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow); } .page--gate .gate__card > .staticpage { padding: 0; box-shadow: none; } .brand--gate { justify-self: center; } .gate__foot { text-align: center; color: var(--muted); font-size: var(--fs-meta); } .page--offline { display: grid; place-items: center; min-height: 100vh; padding: 0; } .offline { width: min(calc(var(--app-em)*32), calc(100% - var(--sp-6))); padding-block: var(--sp-6); display: grid; justify-items: center; gap: var(--sp-4); text-align: center; } .offline__art { width: calc(var(--app-em)*20); height: auto; } .offline__title { font-size: var(--fs-h2); } .offline__reason { color: var(--muted); font-size: var(--fs-sm); } .offline__foot { color: var(--muted); font-size: var(--fs-meta); } .site-footer { background: var(--surface-sunk); } .footer-grid { padding: var(--sp-12) 0 calc(var(--app-em)*2.375); display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-12); } .footer-brand p { max-width: calc(var(--app-em)*22.5); margin-top: var(--sp-4); color: var(--muted); font-size: var(--fs-sm); } .footer-brand__links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); } .footer-col h2 { margin-bottom: calc(var(--app-em)*0.875); font-size: var(--fs-ui); } .footer-col a { display: block; margin: 3px 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; } .footer-col a:hover, .footer-bottom a:hover { color: var(--accent-strong); } .footer-bottom { min-height: calc(var(--app-em)*3.875); border-top: var(--hair) solid var(--line); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-meta); } .to-top { position: fixed; right: calc(var(--app-em)*1.625); bottom: calc(var(--app-em)*1.625); z-index: 20; width: var(--control-h); height: var(--control-h); border: 0; border-radius: calc(var(--app-em)*0.875); background: var(--surface); color: var(--accent-strong); box-shadow: var(--shadow); cursor: pointer; display: grid; place-items: center; opacity: 0; transform: translateY(var(--sp-2)); pointer-events: none; transition: .25s ease; } .to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } @media (max-width: 66.25em) { .primary-nav { display: none; } .menu-button { display: inline-flex; } .site-header.is-menu-open .primary-nav { position: absolute; left: var(--sp-5); right: var(--sp-5); top: calc(var(--app-em)*5.25); z-index: 35; display: grid; gap: var(--sp-1); padding: calc(var(--app-em)*0.875); border-radius: calc(var(--app-em)*0.875); background: var(--surface); box-shadow: var(--shadow); } .site-header.is-menu-open .primary-nav a { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); } .site-header.is-menu-open .primary-nav a::after { display: none; } .site-header.is-menu-open .primary-nav a:hover { background: var(--surface-soft); } .category-scroll { overflow-x: auto; scrollbar-width: none; } .category-scroll::-webkit-scrollbar { display: none; } .category-menu { align-items: flex-start; } .category-menu__item--parent:hover > .category-menu__row .category-menu__toggle .icon { transform: none; } .category-menu__item--parent.is-focus-open > .category-menu__submenu, .category-menu__item--parent.is-open > .category-menu__submenu { display: grid; } .category-menu__item--parent.is-focus-open > .category-menu__row .category-menu__toggle .icon, .category-menu__item--parent.is-open > .category-menu__row .category-menu__toggle .icon { transform: rotate(180deg); } .layout { grid-template-columns: 1fr; } .sidebar { grid-template-columns: repeat(2, minmax(0,1fr)); } .hero-slide { grid-template-columns: 1fr 42%; } .hero-copy { padding: calc(var(--app-em)*2.625) calc(var(--app-em)*2.375) calc(var(--app-em)*4.875); } .hero-title { font-size: calc(var(--app-em)*1.75); } .hero-controls { left: calc(var(--app-em)*2.375); } .comment-grid, .partners, .related-grid, .stats-groups { grid-template-columns: repeat(2, minmax(0,1fr)); } .search-advanced { grid-template-columns: 1fr; } .profile__grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-6); } } @media (max-width: 47.5em) { .container { width: min(calc(100% - var(--sp-6)), var(--container)); } .utility { display: none; } .header-main { min-height: calc(var(--app-em)*4.5); gap: var(--sp-3); } .brand__tagline, .soft-button span, .user-menu__name { display: none; } .brand__mark { width: calc(var(--app-em)*2.375); height: calc(var(--app-em)*2.375); border-radius: var(--r-md); } .brand__name { font-size: calc(var(--app-em)*1.3125); } .site-header.is-menu-open .primary-nav { top: calc(var(--app-em)*4.375); } .search-form { grid-template-columns: minmax(0,1fr) auto; } .search-form__advanced { grid-column: 1 / -1; } .hero-stage, .hero-slide { min-height: auto; } .hero-slide.is-active { display: flex; flex-direction: column; } .hero-copy { padding: calc(var(--app-em)*.5625) calc(var(--app-em)*1.5625) calc(var(--app-em)*4.6875); order: 2; } .hero-title { margin: calc(var(--app-em)*1.375) 0 calc(var(--app-em)*0.875); font-size: calc(var(--app-em)*1.625); } .hero-lead { font-size: var(--fs-sm); } .hero-media { aspect-ratio: 16 / 9; min-height: auto; margin: var(--sp-3); order: 1; } .hero-controls { left: calc(var(--app-em)*1.5625); bottom: calc(var(--app-em)*1.5); } .hero-arrows { right: var(--sp-3); bottom: calc(var(--app-em)*1.5); } .story-card { grid-template-columns: 1fr; padding: var(--sp-3); gap: var(--sp-3); } .story-media { aspect-ratio: 16 / 9;} .story-body { padding: var(--sp-2) var(--sp-2) var(--sp-1); } .sidebar, .comment-grid, .partners, .related-grid, .stats-cards, .stats-groups, .form-grid, .form-grid--three, .story-nav, .footer-grid { grid-template-columns: 1fr; } .story-nav__item--next { grid-column: 1; text-align: left; } .story-nav__item--next .story-nav__label { justify-content: flex-start; } .partner { border-right: 0; border-bottom: var(--hair) solid var(--line); padding: 0 0 var(--sp-3); } .partner:last-child { border-bottom: 0; padding-bottom: 0; } .thread__item { padding: var(--sp-4); } .fullstory { padding: var(--sp-4); } .fullstory__title { font-size: calc(var(--app-em)*1.5); } .panel { padding: var(--sp-4); } .pmlist { overflow-x: auto; } table.pm { min-width: calc(var(--app-em)*34); } .pm th.pm_last_user, .pm td.pm_last_user { width: calc(var(--app-em)*9); } .pm_navigation, .pm_navigation tbody, .pm_navigation tr, .pm_navigation td { display: block; width: 100%; } .pm_navigation td:last-child { display: flex; align-items: center; gap: var(--sp-2); white-space: normal; } #pmlist_doaction { width: auto; max-width: none; margin-inline-end: 0; flex: 1 1 auto; } .pm_navigation .bbcodes { flex: none; } .footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; } .footer-grid { padding-top: var(--sp-8); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-iteration-count: 1 !important; transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow !important; transition-duration: .12s !important; } .hero-slide.is-active { animation: none; } .story-card:hover, .primary-button:hover, .soft-button:hover, .to-top { transform: none !important; } .story-card:hover .visual, .story-card:hover .cover-image { transform: none; } .to-top { transition: opacity .12s ease; } } @media print { .utility, .site-header, .sidebar, .to-top, .site-footer, .story-tools, .fullstory__actions, .story-nav, .discussion, .wide-section, .pagination, .hero-controls, .hero-arrows { display: none !important; } body { background: #fff; color: #000; } .layout { grid-template-columns: 1fr; } .fullstory, .panel, .story-card { box-shadow: none; } } @media (min-width: 66.251em) { .category-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .category-scroll::-webkit-scrollbar { display: none; } .category-menu { width: max-content; flex: none; flex-wrap: nowrap; } } /* DLE AIR - clean corporate hero, version 2 */ .hero-stage { background:#f4f6f9; } .hero-slide { position:relative; isolation:isolate; height:540px; min-height:540px; overflow:hidden; } .hero-slide.is-active { display:block; } .hero-media { position:absolute; inset:0; z-index:-1; min-height:0; height:100%; margin:0; border-radius:0; } .hero-media__link { display:block; width:100%; height:100%; border-radius:0; } .hero-media .cover-image { display:block; width:100%; height:100%; object-fit:cover; object-position:center; } .hero-slide::after { content:none; } .hero-copy { position:relative; z-index:1; box-sizing:border-box; min-height:540px; max-width:760px; padding:75px 65px 105px; color:#252525; } .hero-title { font-size:clamp(2.1rem,4vw,2.6rem); line-height:1.12; } .hero-title a, .hero-title a:hover { color:#000000; } .hero-lead { color:#252525; font-size:1.1rem; } .hero-copy .hero-cta { background:#4267af; color:#fff; } .hero-copy .hero-cta:hover { background:#345492; color:#fff; } .hero-media .pin-label { display:none; } .hero-controls { left:65px; bottom:25px; } .hero-dot { background:rgba(66,103,175,.35); background-clip:content-box; display: none; } .hero-dot.is-active { background:#4267af; } @media (max-width: 767px) { .hero-media .cover-image { object-fit: cover; object-position: 62% bottom; } } .hero-slide::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient( to bottom, #f4f6f9 0%, rgba(244, 246, 249, 0.98) 30%, rgba(244, 246, 249, 0.85) 48%, rgba(244, 246, 249, 0) 78% ); } .hero-slide.is-active { display:block; } .hero-stage,.hero-slide { height:490px; min-height:490px; } .hero-media { position:absolute; inset:0; height:100%; aspect-ratio:auto; margin:0; order:initial; } .hero-copy { min-height:490px; max-width:none; padding:55px 24px 115px; order:initial; justify-content:center; } .hero-title { font-size:clamp(1.8rem,7vw,2.5rem); } .hero-lead { font-size:.95rem; } .hero-controls { left:24px; bottom:23px; } .hero-arrows { right:16px; bottom:20px; } } /* ========================================== AIR - HOMEPAGE / THREE COLUMN ARTICLES ========================================== */ .layout--home { grid-template-columns: minmax(0, 1fr); } /* Homepage bez sidebaru */ .layout.layout--home { grid-template-columns: minmax(0, 1fr); } .layout--home .feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; } /* Nadpis sekce pres vsechny sloupce */ .layout--home .feed > .section-heading { grid-column: 1 / -1; } /* Karty clanku */ .layout--home .story-card { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; } /* Obrazek nad obsahem */ .layout--home .story-media { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; } .layout--home .story-media .cover-image { display: block; width: 100%; height: 100%; object-fit: cover; } /* Obsah karty */ .layout--home .story-body { display: flex; flex-direction: column; flex: 1; min-width: 0; } /* Spodni ovladaci panel */ .layout--home .story-tools { margin-top: auto; } /* Tablet */ @media (max-width: 1100px) { .layout--home .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Mobil */ @media (max-width: 650px) { .layout--home .feed { grid-template-columns: minmax(0, 1fr); gap: 18px; } } /* Homepage - category sections */ .home-sections { display: grid; gap: 48px; min-width: 0; } .home-section { min-width: 0; } .home-section .section-heading { margin: 0 0 24px; } .home-section__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; } .home-section__grid .story-card { display: flex; flex-direction: column; height: 100%; min-width: 0; overflow: hidden; } .home-section__grid .story-media { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; } .home-section__grid .story-media .cover-image { display: block; width: 100%; height: 100%; object-fit: cover; } .home-section__grid .story-body { display: flex; flex-direction: column; flex: 1; min-width: 0; } .home-section__grid .story-tools { margin-top: auto; } @media (max-width: 1100px) { .home-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 650px) { .home-section__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } .home-sections { gap: 32px; } } /* AIR - dropdown Nase sluzby */ .primary-nav .nav-dropdown { position: relative; } .primary-nav .nav-dropdown__head { display: flex; align-items: center; gap: 5px; } .primary-nav .nav-dropdown__toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 32px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; } .primary-nav .nav-dropdown__toggle .icon { width: 14px; height: 14px; transition: transform .2s ease; } .primary-nav .nav-dropdown__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); } .primary-nav .nav-dropdown__menu { display: none; position: absolute; top: 100%; left: 0; z-index: 100; width: 260px; padding: 10px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-soft); } .primary-nav .nav-dropdown__menu.is-open { display: flex; flex-direction: column; } .primary-nav .nav-dropdown__menu a { display: block; padding: 10px 12px; border-radius: 7px; font-size: var(--fs-ui); } .primary-nav .nav-dropdown__menu a::after { display: none; } .primary-nav .nav-dropdown__menu a:hover { background: var(--accent-soft); color: var(--accent-strong); } /* Desktop - otevreni na hover */ @media (min-width: 992px) { .primary-nav .nav-dropdown:hover .nav-dropdown__menu, .primary-nav .nav-dropdown:focus-within .nav-dropdown__menu { display: flex; flex-direction: column; } } /* Mobilni navigace */ @media (max-width: 991px) { .primary-nav .nav-dropdown { width: 100%; } .primary-nav .nav-dropdown__head { justify-content: space-between; } .primary-nav .nav-dropdown__menu { position: static; width: 100%; padding: 5px 0 5px 15px; box-shadow: none; background: transparent; } } /* ========================================== HOMEPAGE – JAK PROBÍHÁ SPOLUPRÁCE ========================================== */ .home-process { padding: 70px 0 0px; } .home-process__heading { text-align: center; margin-bottom: 65px; } .home-process__heading h2 { margin: 0; font-size: clamp(28px, 3vw, 42px); font-weight: 700; line-height: 1.2; } .home-process__divider { display: block; width: 65px; height: 2px; margin: 22px auto 0; background: #4267af; } /* Časová osa */ .home-process__timeline { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); row-gap: 35px; align-items: center; max-width: 1050px; margin: 0 auto; } .home-process__timeline::before { content: ""; position: absolute; top: 20px; bottom: 100px; left: 50%; border-left: 2px dashed #b5bdc9; transform: translateX(-50%); } /* Karty */ .process-card { position: relative; width: 100%; max-width: 360px; overflow: visible; border-radius: 12px; background: var(--surface); box-shadow: 0 12px 35px rgba(27, 48, 79, 0.09); text-align: center; } .process-card--left { grid-column: 1; justify-self: end; } .process-card--right { grid-column: 3; justify-self: start; } /* Střídání karet na ose */ .process-card:nth-child(1) { grid-row: 1; } .process-card:nth-child(2) { grid-row: 2; } .process-card:nth-child(3) { grid-row: 3; } .process-card:nth-child(4) { grid-row: 4; } /* Spojovací čáry */ .process-card::before { content: ""; position: absolute; top: 50%; width: 45px; border-top: 2px dashed #b5bdc9; } .process-card--left::before { right: -45px; } .process-card--right::before { left: -45px; } /* Body na středové ose */ .process-card::after { content: ""; position: absolute; top: calc(50% - 5px); width: 10px; height: 10px; border: 2px solid #aab4c2; border-radius: 50%; background: var(--surface); z-index: 2; } .process-card--left::after { right: -50px; } .process-card--right::after { left: -50px; } /* Modré nadpisy karet */ .process-card__title { padding: 18px 16px; background: #4267af; color: #fff; } .process-card--left .process-card__title { border-radius: 12px 12px 0 0; } .process-card--right .process-card__title { border-radius: 0 0 12px 12px; } .process-card__title h3 { margin: 0; color: inherit; font-size: 19px; font-weight: 700; line-height: 1.4; } /* Obsah karet */ .process-card__content { padding: 25px 25px 28px; color: var(--text); } .process-card__icon { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: 0 auto 18px; /* border: 2px solid #4267af; */ border-radius: 50%; color: #4267af; font-size: 26px; font-weight: 700; } .process-card__content p { margin: 0; color: var(--text); font-size: 15px; line-height: 1.7; } /* Mobilní zobrazení */ @media (max-width: 767px) { .home-process { padding: 45px 0 55px; } .home-process__heading { margin-bottom: 35px; } .home-process__timeline { display: flex; flex-direction: column; gap: 0px; padding-left: 22px; } .home-process__timeline::before { top: 20px; bottom: 20px; left: 5px; transform: none; } .process-card { max-width: none; width: 100%; } .process-card::before { display: none; } .process-card::after, .process-card--left::after, .process-card--right::after { left: -22px; right: auto; } .process-card__title, .process-card--left .process-card__title, .process-card--right .process-card__title { border-radius: 12px 12px 0 0; } .process-card--right { display: flex; flex-direction: column; } .process-card--right .process-card__title { order: -1; } .process-card__content { padding: 22px; } } /* ========================================== KOMPAKTNÍ ČASOVÁ OSA – DESKTOP ========================================== */ @media (min-width: 768px) { .home-process__timeline { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); grid-template-rows: repeat(4, 160px); row-gap: 0; align-items: start; } .process-card { margin: 0 !important; transform: none !important; } .process-card:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; } .process-card:nth-child(2) { grid-column: 3; grid-row: 2 / span 2; } .process-card:nth-child(3) { grid-column: 1; grid-row: 3 / span 2; } .process-card:nth-child(4) { grid-column: 3; grid-row: 4 / span 2; } } /* Posun pouze pravých karet nahoru */ @media (min-width: 768px) { .home-process__timeline .process-card:nth-child(2), .home-process__timeline .process-card:nth-child(4) { transform: translateY(-65px) !important; } } /* ========================================== JAK PROBÍHÁ SPOLUPRÁCE – MOBIL ========================================== */ @media (max-width: 767px) { .home-process__timeline { display: flex; flex-direction: column; gap: 25px; } .home-process__timeline .process-card { margin: 0 !important; transform: none !important; } } @media (max-width: 767px) { /* Skrytí časové osy a spojovacích bodů */ .home-process__timeline::before, .home-process__timeline .process-card::before, .home-process__timeline .process-card::after { display: none; } /* Odstranění odsazení pro osu */ .home-process__timeline { padding-left: 0; gap: 25px; } } /* ========================================== HOMEPAGE – KOLIK STOJÍ VÁŠ NOVÝ WEB ========================================== */ .home-prices { display: grid; grid-template-columns: 1fr 1fr; margin: 70px 0; overflow: hidden; border-radius: 16px; background: var(--surface); } /* Levá tmavá část */ .home-prices__intro { position: relative; display: flex; align-items: center; background: #101216; color: #fff; padding: 65px 75px 65px 55px; } .home-prices__intro::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px); background-size: 42px 42px; pointer-events: none; } .home-prices__intro-inner { position: relative; z-index: 1; max-width: 510px; } .home-prices__intro h2 { margin: 0 0 30px; color: #fff; font-size: clamp(30px, 3vw, 48px); line-height: 1.2; font-weight: 700; } .home-prices__intro p { color: rgba(255,255,255,.88); font-size: 16px; line-height: 1.8; margin-bottom: 20px; } .home-prices__highlight { border-left: 4px solid #4267af; padding-left: 20px; margin: 30px 0; } .home-prices__highlight h3 { color: #fff; font-size: 23px; margin: 0 0 10px; } .home-prices__highlight p { margin: 0; } .home-prices__button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; padding: 15px 25px; border-radius: 8px; background: #4267af; color: #fff; font-weight: 700; text-decoration: none; transition: background .2s ease, transform .2s ease; } .home-prices__button:hover { background: #34528f; color: #fff; transform: translateY(-2px); } /* Pravá část */ .home-prices__factors { display: flex; flex-direction: column; justify-content: center; padding: 45px 55px; gap: 0; background: var(--surface); color: var(--text); } .home-prices__factor { display: flex; align-items: center; gap: 25px; padding: 25px 0; } .home-prices__factor + .home-prices__factor { border-top: 1px solid var(--line); } .home-prices__icon { display: flex; flex: 0 0 76px; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: #4267af; color: #fff; font-size: 24px; font-weight: 700; } .home-prices__factor h3 { margin: 0 0 10px; color: var(--text); font-size: 20px; font-weight: 700; } .home-prices__factor p { margin: 0; color: var(--text); font-size: 15px; line-height: 1.7; } /* Tablet */ @media (max-width: 991px) { .home-prices__intro { padding: 45px 35px; } .home-prices__factors { padding: 30px; } .home-prices__factor { gap: 15px; } .home-prices__icon { flex-basis: 60px; width: 60px; height: 60px; } } /* Mobil */ @media (max-width: 767px) { .home-prices { display: flex; flex-direction: column; margin: 45px 0; } .home-prices__intro { padding: 40px 25px; } .home-prices__intro h2 { font-size: 30px; } .home-prices__intro p { font-size: 15px; } .home-prices__highlight h3 { font-size: 20px; } .home-prices__factors { padding: 15px 25px; } .home-prices__factor { gap: 16px; padding: 22px 0; } .home-prices__icon { flex: 0 0 56px; width: 56px; height: 56px; font-size: 18px; } .home-prices__factor h3 { font-size: 17px; } .home-prices__factor p { font-size: 14px; } } /* ========================================== HOMEPAGE – REFERENCE ========================================== */ .reference-card { display: flex; flex-direction: column; height: 100%; padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 12px 35px rgba(27, 48, 79, 0.07); text-align: center; transition: transform .25s ease, box-shadow .25s ease; } .reference-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(27, 48, 79, 0.12); } /* Obrazek */ .reference-card__media { display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 8 / 5; background: #eef2f7; } .reference-card__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .reference-card:hover .reference-card__image { transform: scale(1.035); } .reference-card__placeholder { display: block; width: 100%; height: 100%; background: #e9eef5; } /* Obsah */ .reference-card__body { display: flex; flex: 1; flex-direction: column; align-items: center; padding: 22px 10px 10px; } .reference-card__badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; } .reference-card__badges:empty { display: none; } .reference-card__badge { display: inline-flex; align-items: center; min-height: calc(var(--app-em) * 1.6875); padding: 0 calc(var(--app-em) * 0.6875); border-radius: var(--r-sm); font-size: var(--fs-meta); font-weight: 600; line-height: 1.4; background: #e8eef8; color: #4267af; } .reference-card__badge--new { background: #e8f4eb; color: #28794a; } .reference-card__badge--updated { background: #edf0f5; color: #536174; } .reference-card__title { margin: 14px 0 22px; font-size: 21px; font-weight: 700; line-height: 1.4; text-align: center; } .reference-card__title a { color: inherit; text-decoration: none; } .reference-card__title a:hover { color: #4267af; } /* Tlacitko */ .reference-card__button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: auto; padding: 12px 22px; border-radius: 8px; background: #4267af; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; transition: background .2s ease; } .reference-card__button:hover { background: #34528f; color: #fff; } .reference-card__button .icon { width: 16px; height: 16px; } /* Mobil */ @media (max-width: 767px) { .reference-card { padding: 14px; } .reference-card__body { padding: 20px 8px 8px; } .reference-card__title { font-size: 19px; } } .home-process__cta { margin-top: 35px; } .home-process__phone { width: 18px; height: 18px; flex-shrink: 0; } /* Tlacitko pod sekci Jak probiha spoluprace */ .home-process__cta { display: flex; justify-content: center; margin-top: 45px; } .home-process__button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border-radius: 9px; background: #4267af; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; transition: background .2s ease, transform .2s ease; } .home-process__button:hover { background: #34528f; color: #fff; transform: translateY(-2px); } .home-process__button .icon { width: 18px; height: 18px; } @media (max-width: 767px) { .home-process__cta { margin-top: 30px; } } .home-process__cta { margin-top: 35px; } .home-process__phone { width: 18px; height: 18px; flex-shrink: 0; } /* ========================================== ABOUT PAGE - AIR ========================================== */ .about-page { --about-blue: #4267af; --about-text: #17283b; --about-muted: #617083; color: var(--about-text); } .about-page *, .about-page *::before, .about-page *::after { box-sizing: border-box; } /* INTRO */ .about-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 60px; padding: 40px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-soft); } .about-intro__media { position: relative; padding: 0 35px 45px 0; } .about-intro__photos { position: relative; min-height: 460px; } .about-intro__photos img { display: block; object-fit: cover; border-radius: 16px; } .about-intro__photos img:first-child { width: 85%; height: 410px; } .about-intro__photos img:nth-child(2) { position: absolute; right: 0; bottom: 0; width: 55%; height: 210px; border: 7px solid #f1f5f9; } .about-intro__since { position: absolute; left: 20px; bottom: 5px; display: flex; flex-direction: column; align-items: center; padding: 18px 24px; border-radius: 12px; background: var(--about-blue); color: #fff; box-shadow: 0 12px 30px rgba(35, 61, 107, .16); } .about-intro__since strong { font-size: 32px; line-height: 1.1; } .about-intro__since span { font-size: 12px; margin-top: 5px; } .about-intro__content > h1 { margin: 0 0 30px; font-size: clamp(30px, 3vw, 42px); line-height: 1.2; } .about-feature { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; margin-bottom: 25px; } .about-feature__number { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #e8eef8; color: var(--about-blue); font-weight: 700; } .about-feature h2 { margin: 0 0 8px; font-size: 19px; line-height: 1.35; } .about-feature p { margin: 0; color: var(--about-muted); line-height: 1.50; } .about-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; padding: 14px 24px; border-radius: 9px; background: var(--about-blue); color: #fff; font-weight: 700; text-decoration: none; transition: background .2s ease; } .about-button:hover { background: #34528f; color: #fff; } /* SECTION HEADINGS */ .about-heading { text-align: center; margin-bottom: 42px; } .about-heading h2 { margin: 0; font-size: clamp(27px, 3vw, 36px); } .about-heading__line { display: block; width: 60px; height: 2px; margin: 17px auto 0; background: var(--about-blue); } /* SERVICES */ .about-services { padding: 75px 0; } .about-services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .about-service { display: flex; flex-direction: column; align-items: center; padding: 38px 28px 30px; border-radius: 16px; background: #fff; box-shadow: 0 12px 35px rgba(27, 48, 79, .07); text-align: center; } .about-service > img { width: 120px; height: 120px; object-fit: contain; margin-bottom: 24px; } .about-service h3 { margin: 0 0 14px; font-size: 21px; } .about-service p { margin: 0 0 25px; color: var(--about-muted); line-height: 1.7; } .about-service a { display: inline-flex; align-items: center; gap: 9px; margin-top: auto; color: var(--about-blue); font-weight: 700; text-decoration: none; } .about-service a:hover { text-decoration: none; } /* TEAM */ .about-team { padding: 25px 0 50px; } .about-team__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .about-person { padding: 24px 18px 28px; border-radius: 16px; background: #fff; text-align: center; box-shadow: 0 12px 35px rgba(27, 48, 79, .07); } .about-person img { display: block; width: 100%; max-width: 180px; height: 190px; object-fit: contain; margin: 0 auto 20px; } .about-person h3 { margin: 0 0 8px; font-size: 20px; } .about-person p { margin: 0; color: var(--about-muted); font-size: 14px; } /* RESPONSIVE */ @media (max-width: 1024px) { .about-intro { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-soft); padding: 40px; gap: 30px; } .about-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .about-intro { grid-template-columns: 1fr; gap: 25px; padding: 30px 12px 40px; } } .about-intro__media { padding-right: 15px; } .about-intro__photos { min-height: 320px; } .about-intro__photos img:first-child { height: 290px; } .about-intro__photos img:nth-child(2) { height: 145px; } .about-intro__since { left: 10px; padding: 12px 16px; } .about-intro__since strong { font-size: 26px; } .about-feature { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; } .about-feature__number { width: 40px; height: 40px; } @media (max-width: 767px) { .about-services, .about-team { padding: 50px 0; } .about-services__grid, .about-team__grid { grid-template-columns: 1fr; } .about-team__grid { gap: 12px; } .about-person { padding: 18px 10px; } .about-person img { height: 135px; } } /* ========================================= STATICKÉ STRÁNKY – PLNÁ ŠÍŘKA BEZ SIDEBARU ========================================= */ .layout--static { grid-template-columns: minmax(0, 1fr); } .layout--static .layout__main { width: 100%; min-width: 0; max-width: none; } /* ========================================= ABOUT - LEFT VISUAL ========================================= */ .about-visual { position: relative; width: 100%; height: 560px; min-height: 560px; } .about-visual__images { position: relative; width: 100%; height: 100%; } /* ========================================= HLAVNÍ FOTOGRAFIE ========================================= */ .about-visual__main { position: absolute; left: 0; top: 50px; width: calc(68% - 20px); height: 510px; display: block; object-fit: cover; border-radius: 10px; } /* ========================================= MENŠÍ FOTOGRAFIE ========================================= */ .about-visual__secondary { position: absolute; right: 0; bottom: 0; width: 32%; height: 260px; display: block; object-fit: cover; border-radius: 10px; } /* ========================================= Å ESTIÚHELNÍK - TEKNI ========================================= */ .about-visual__certification { position: absolute; top: 0; right: 12%; z-index: 2; width: 280px; height: 280px; padding: 30px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #4267af; color: #fff; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%); } /* ========================================= ABOUT - MOBILNÍ ZOBRAZENÍ ========================================= */ @media screen and (max-width: 991px) { .about-visual, .about-visual__images { position: relative; width: 100%; height: auto; min-height: 0; } .about-visual__main { position: relative; display: block; top: auto; left: auto; right: auto; bottom: auto; width: 100%; height: auto; object-fit: cover; border-radius: 10px; } .about-visual__secondary, .about-visual__certification { display: none; } } /* ABOUT - tlačítko na stÅ™ed */ .about-cta { display: flex; justify-content: center; margin-top: 30px; } /* TEAM – ikony u portrétů */ .about-team__photo { position: relative; display: inline-block; margin-bottom: 20px; } .about-team__avatar { display: block; width: 180px; height: 180px; border-radius: 50%; object-fit: cover; } .about-team__icon { position: absolute; right: -12px; bottom: -8px; width: 65px; height: 65px; object-fit: contain; z-index: 2; } /* TEAM – portréty s ikonami */ .about-team__photo { position: relative; display: inline-block; width: 180px; height: 180px; margin-bottom: 20px; } .about-team__photo .about-team__avatar { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .about-team__photo .about-team__icon { position: absolute; right: -10px; bottom: -5px; width: 65px; height: 65px; object-fit: contain; z-index: 2; } /* ========================================= HOMEPAGE – KDO STOJÍ ZA VAŠÍM WEBEM ========================================= */ .home-about { padding: 80px 0; } /* Nadpis a úvodní text */ .home-about__heading { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: start; margin-bottom: 60px; } .home-about__heading h2 { margin: 0; font-size: clamp(32px, 3.5vw, 52px); line-height: 1.2; font-weight: 700; color: var(--text, #17283d); } .home-about__intro p { margin: 0 0 12px; line-height: 1.8; } .home-about__intro p:last-child { margin-bottom: 0; } /* Hlavní rozložení */ .home-about__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 30px; align-items: stretch; } /* Velká fotografie */ .home-about__main-photo { min-width: 0; min-height: 460px; overflow: hidden; border-radius: 12px; } .home-about__main-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Pravá část */ .home-about__right { display: flex; flex-direction: column; min-width: 0; gap: 30px; } /* Tři informační boxy */ .home-about__benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); } .home-about__benefit { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; min-width: 0; min-height: 200px; padding: 25px 12px; text-align: center; color: var(--text); } .home-about__benefit + .home-about__benefit { border-left: 1px solid var(--line); } .home-about__benefit img { display: block; width: 52px; height: 52px; object-fit: contain; } .home-about__benefit h3 { margin: 0; color: var(--text); font-size: 18px; line-height: 1.35; font-weight: 700; } /* Spodní část – fotografie a tlačítko */ .home-about__bottom { position: relative; flex: 1; min-height: 230px; padding: 0; } /* Spodní fotografie */ .home-about__secondary-photo { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; } .home-about__secondary-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Výkroj kolem tlačítka */ .home-about__bottom::after { content: ""; position: absolute; right: 0; bottom: 0; width: 166px; height: 70px; background: var(--bg); border-radius: 16px 0 0 0; z-index: 1; } /* Tlačítko */ .home-about__button { position: absolute; right: 8px; bottom: 0px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 14px 28px; border-radius: 8px; background: #4267af; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s ease; } .home-about__button:hover { background: #34538f; color: #fff; text-decoration: none; } /* ========================================= HOMEPAGE – KDO STOJÍ ZA VAŠÍM WEBEM MOBILNÍ ZOBRAZENÍ ========================================= */ @media screen and (max-width: 991px) { .home-about { padding: 45px 0; } /* Nadpis a text pod sebe */ .home-about__heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; } .home-about__heading h2 { font-size: 30px; } /* Fotografie a pravá část pod sebe */ .home-about__grid { grid-template-columns: 1fr; gap: 24px; } .home-about__main-photo { min-height: 0; } .home-about__main-photo img { height: auto; } /* Tři výhody pod sebe */ .home-about__benefits { grid-template-columns: 1fr; } .home-about__benefit { min-height: 130px; padding: 20px; gap: 12px; } .home-about__benefit + .home-about__benefit { border-left: 0; border-top: 1px solid var(--line); } /* Spodní fotografie s tlačítkem */ .home-about__bottom { position: relative; min-height: 240px; } .home-about__secondary-photo { position: absolute; inset: 0; } .home-about__button { right: 8px; bottom: 0px; } } /* ========================================= ABOUT HOMEPAGE – TABLET ========================================= */ @media screen and (min-width: 768px) and (max-width: 991px) { .home-about__benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-about__benefit { min-height: 170px; padding: 20px 12px; } .home-about__benefit + .home-about__benefit { border-top: 0; border-left: 1px solid var(--line); } } /* ========================================= HOMEPAGE - ZAVERECNE CTA ========================================= */ .home-cta { margin-top: 60px; margin-bottom: 60px; padding: 18px; } .home-cta__panel { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 190px; padding: 40px 50px; overflow: hidden; border-radius: 14px; background: var(--surface-sunk); } /* Dekorativni kruhy z puvodniho AIR */ .home-cta__panel::before { content: ""; position: absolute; width: 240px; height: 240px; right: -74px; top: -83px; border-radius: 50%; background: #c7d4dd; box-shadow: -100px 190px 0 #d5dfe5; } /* Text */ .home-cta__text { position: relative; z-index: 1; max-width: 680px; } .home-cta__text h2 { margin: 0 0 16px; font-size: clamp(26px, 3vw, 38px); line-height: 1.2; font-weight: 700; } .home-cta__text p { margin: 0; color: var(--muted); line-height: 1.7; } /* Tlacitko */ .home-cta__button { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 12px; flex-shrink: 0; min-height: 54px; padding: 15px 25px; border-radius: 8px; background: #4267af; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s ease; } .home-cta__button:hover { background: #34538f; color: #fff; text-decoration: none; } .home-cta__button .icon { width: 18px; height: 18px; } /* Tablet */ @media (max-width: 991px) { .home-cta__panel { gap: 25px; padding: 35px; } } /* Mobil */ @media (max-width: 767px) { .home-cta { margin-top: 40px; margin-bottom: 40px; padding: 12px; } .home-cta__panel { flex-direction: column; align-items: flex-start; gap: 25px; min-height: 0; padding: 30px 24px; } .home-cta__text h2 { font-size: 26px; } .home-cta__button { width: 100%; white-space: normal; text-align: center; } } /* Tmavy rezim */ [data-theme="dark"] .home-cta__panel::before { background: #2b3743; box-shadow: -100px 190px 0 #242e39; } /* ========================================= FOOTER - FIREMNI UPRAVY AIR ========================================= */ /* Kontakty */ .footer-contact address { margin: 0 0 15px; color: var(--muted); font-style: normal; line-height: 1.4; font-weight: 500; } .footer-contact a { display: block; } /* Pravni odkazy */ .footer-legal { display: flex; flex-wrap: wrap; gap: 10px 20px; } .footer-legal a { text-decoration: none; } .footer-legal a:hover { color: var(--accent); } /* Plovouci poptavka */ .floating-inquiry { position: fixed; right: 24px; bottom: 80px; z-index: 900; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 15px; border-radius: 10px; background: #4267af; color: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); font-weight: 600; text-decoration: none; opacity: 0; visibility: hidden; pointer-events: none; transform-origin: right bottom; transform: translateX(calc(100% + 30px)) rotate(90deg); transition: opacity .55s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1), visibility .55s, background-color .2s; } .floating-inquiry.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0) rotate(0deg); } .floating-inquiry:hover { background: #34538f; color: #fff; text-decoration: none; } .floating-inquiry .icon { width: 16px; height: 16px; } /* Mobil */ @media (max-width: 575px) { .floating-inquiry { padding: 9px 12px; font-size: 12px; } } /* Omezeni animaci */ @media (prefers-reduced-motion: reduce) { .floating-inquiry, .floating-inquiry.is-visible { transition: none; } } /* ========================================= COOKIE CONSENT - AIR ========================================= */ .cookie-bar[hidden], .cookie-modal[hidden] { display: none !important; } /* Cookie lista */ .cookie-bar { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 99999; } .cookie-bar__inner { max-width: 1200px; margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 25px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 35px rgba(0, 0, 0, .18); } .cookie-bar__text strong { display: block; margin-bottom: 4px; font-size: 18px; color: var(--text); } .cookie-bar__text p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); } .cookie-bar__text a { color: #4267af; text-decoration: underline; } .cookie-bar__actions { display: flex; gap: 10px; flex-shrink: 0; } /* Tlacitka */ .cookie-btn { border: 0; border-radius: 7px; padding: 11px 18px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .2s ease, transform .2s ease; } .cookie-btn:hover { transform: translateY(-2px); } .cookie-btn--primary { background: #4267af; color: #fff; } .cookie-btn--primary:hover { background: #34538f; color: #fff; } .cookie-btn--secondary { background: var(--surface-sunk); color: var(--text); } .cookie-btn--secondary:hover { background: var(--line); } /* Modalni okno */ .cookie-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .55); } .cookie-modal__box { position: relative; width: 100%; max-width: 600px; max-height: calc(100dvh - 40px); overflow-y: auto; padding: 30px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 15px 50px rgba(0, 0, 0, .2); } .cookie-modal__box h3 { margin: 0 35px 25px 0; color: var(--text); } .cookie-modal__close { position: absolute; right: 18px; top: 12px; border: 0; background: transparent; color: var(--text); font-size: 30px; cursor: pointer; } /* Nastaveni jednotlivych kategorii */ .cookie-option { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); } .cookie-option strong { color: var(--text); } .cookie-option p { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); } /* Prepinace */ .cookie-switch { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; } .cookie-switch input { position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .cookie-switch span { position: absolute; inset: 0; background: #aeb7c5; border-radius: 30px; pointer-events: none; transition: background-color .2s ease; } .cookie-switch span::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s ease; } .cookie-switch input:checked + span { background: #4267af; } .cookie-switch input:checked + span::before { transform: translateX(22px); } .cookie-switch input:focus-visible + span { outline: 2px solid #4267af; outline-offset: 3px; } .cookie-switch input:disabled { cursor: not-allowed; } .cookie-switch input:disabled + span { opacity: .7; } /* Ulozeni */ .cookie-save { margin-top: 25px; width: 100%; } /* Mobil */ @media (max-width: 767px) { .cookie-bar { left: 10px; right: 10px; bottom: 10px; } .cookie-bar__inner { display: block; padding: 18px; } .cookie-bar__actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 15px; } .cookie-bar__actions .cookie-btn--primary { grid-column: 1 / -1; } .cookie-modal__box { padding: 22px; } } @media (prefers-reduced-motion: reduce) { .cookie-btn, .cookie-switch span, .cookie-switch span::before { transition: none; } } /* ========================================= FOOTER AIR - MOBILNI UPRAVY ========================================= */ @media (max-width: 575px) { /* Mensi mezery mezi sloupci */ .footer-grid { gap: 25px; } /* Kontaktni udaje */ .footer-contact address { margin-bottom: 12px; line-height: 1.5; } .footer-contact a { margin-bottom: 6px; line-height: 1.4; } /* Spodni cast paticky */ .footer-bottom { flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding-top: 20px; padding-bottom: 35px; text-align: center; } .footer-legal { justify-content: center; align-items: center; gap: 10px 16px; } .footer-bottom span { line-height: 1.5; } .footer-legal a { line-height: 1.5; } } /* CONTACT PAGE */ .contact-page { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-soft); padding: 40px; } .contact-page__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 50px; align-items: start; } .contact-page__left, .contact-page__right { min-width: 0; } .contact-info__intro { margin-bottom: 25px; line-height: 1.7; color: var(--muted); } .contact-info h2 { margin-bottom: 30px; font-size: 24px; } .contact-info__items { display: grid; gap: 28px; } .contact-info__item { display: flex; align-items: center; gap: 20px; } .contact-info__icon { width: 60px; height: 60px; flex: 0 0 60px; display: flex; align-items: center; justify-content: center; background: #4267af; color: #fff; border-radius: 50%; } .contact-info__icon svg { width: 26px; height: 26px; } .contact-info__item h3 { margin: 0 0 5px; font-size: 17px; } .contact-info__item p, .contact-info__item a { margin: 0; line-height: 1.5; color: var(--muted); } .contact-info__item a:hover { color: var(--accent-strong); } .contact-info__legal { margin-top: 35px; color: var(--muted); line-height: 1.7; } .contact-page__right .contact-form h2 { margin-bottom: 22px; font-size: 24px; } /* TABLET */ @media (max-width: 991px) { .contact-page { padding: 30px; } .contact-page__grid { grid-template-columns: 1fr; gap: 35px; } } /* MOBILE */ @media (max-width: 575px) { .contact-page { padding: 20px; } .contact-info__icon { width: 48px; height: 48px; flex-basis: 48px; } .contact-info__icon svg { width: 22px; height: 22px; } .contact-info__item { gap: 15px; } } .contact-map { margin-top: 40px; width: 100%; } .contact-map iframe { display: block; width: 100%; height: 350px; border: 0; border-radius: 12px; } @media (max-width: 767px) { .contact-map { margin-top: 25px; } .contact-map iframe { height: 280px; } } .contact-map { margin-top: 40px; overflow: hidden; border-radius: 18px; } .contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Letadélko vedle nadpisu */ .thank-you-heading { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 5px; } .thank-you-heading img { display: block; width: 65px; height: auto; flex-shrink: 0; } .thank-you-heading .text-succes { margin: 0; text-align: left; } /* HERO – odstranění překryvného gradientu na desktopu */ @media (min-width: 768px) { .hero-slide::after { content: none; } } .brand__logo { display: block; width: auto; height: 40px; object-fit: contain; } @media (max-width: 767px) { .brand__text { display: none; } .brand__logo { height: 32px; width: auto; } } @media (max-width: 767px) { .site-footer .brand__text { display: flex; flex-direction: column; } .site-footer .brand__tagline { display: block; } } .contact-map-consent { position: relative; min-height: 400px; } .contact-map-placeholder { display: flex; align-items: center; justify-content: center; min-height: 400px; padding: 30px; text-align: center; background: var(--surface-sunk); border-radius: 16px; } .contact-map-placeholder__inner { max-width: 520px; } .contact-map-placeholder h3 { margin-bottom: 15px; } .contact-map-placeholder p { margin-bottom: 25px; line-height: 1.7; } .contact-map-consent iframe { width: 100%; height: 400px; } /* Skrytí upozornění po načtení mapy */ .contact-map-placeholder[hidden] { display: none !important; } /* ===================================================== CONTACT ERROR MODAL ===================================================== */ .contact-error-modal[hidden] { display: none !important; } .contact-error-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; } .contact-error-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .60); } .contact-error-dialog { position: relative; width: 100%; max-width: 480px; padding: 32px; background: var(--surface, #fff); color: var(--text, #1e293b); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .20); text-align: center; } .contact-error-dialog h3 { margin: 0 24px 16px; font-size: 21px; line-height: 1.35; } .contact-error-dialog p { margin: 0 0 24px; line-height: 1.7; } .contact-error-close { position: absolute; top: 12px; right: 16px; border: 0; background: transparent; color: inherit; font-size: 28px; cursor: pointer; } .contact-error-ok { cursor: pointer; } .contact-modal-open { overflow: hidden; } @media (max-width: 575px) { .contact-error-dialog { padding: 28px 20px; } } /* Detail článku bez sidebaru – kategorie 1 a 2 */ .page--article .layout.layout--wide { grid-template-columns: minmax(0, 1fr); max-width: 1100px; margin-inline: auto; }