/* ========================================================================= Roubenky Jesenný — vizuální styl Motiv: roubená konstrukce. Vodorovné vlasové linky v rytmu skládaných trámů drží celou stránku pohromadě; mosazný akcent zastupuje světlo lampy na dřevě. Barvy přicházejí z administrace jako proměnné v . ========================================================================= */ @font-face { font-family: 'Newsreader'; font-style: normal; font-display: swap; font-weight: 200 800; src: url('../fonts/newsreader-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Newsreader'; font-style: normal; font-display: swap; font-weight: 200 800; src: url('../fonts/newsreader-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Newsreader'; font-style: italic; font-display: swap; font-weight: 200 800; src: url('../fonts/newsreader-latin-ext-wght-italic.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Newsreader'; font-style: italic; font-display: swap; font-weight: 200 800; src: url('../fonts/newsreader-latin-wght-italic.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/archivo-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/archivo-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ------------------------------------------------------------- základ */ :root { --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --wrap: 1220px; --gut: clamp(1.25rem, 4vw, 3.5rem); --sec-y: clamp(4.5rem, 9vw, 8.5rem); --r: 14px; --r-lg: 26px; --hd-h: 78px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hd-h) + 12px); } body { margin: 0; background: var(--c-bg); color: var(--c-ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; font-weight: 380; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration-color: color-mix(in srgb, var(--c-accent) 55%, transparent); text-underline-offset: 3px; } a:hover { text-decoration-color: var(--c-accent); } :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 3px; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--c-primary); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r) 0; } .skip:focus { left: 0; } /* --------------------------------------------------------- typografie */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 420; line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 0.5em; text-wrap: balance; } h2 { font-size: clamp(2rem, 3.9vw, 3.1rem); } h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.2; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } .eyebrow { display: inline-flex; align-items: center; gap: 0.7em; font-family: var(--sans); font-size: 0.72rem; font-weight: 620; letter-spacing: 0.19em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 1.15rem; } .eyebrow::before { content: ''; width: 30px; height: 1px; background: currentColor; opacity: 0.7; } .lead { font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.42rem); line-height: 1.5; font-weight: 350; color: color-mix(in srgb, var(--c-ink) 88%, var(--c-bg)); } .prose { color: var(--c-muted); } .prose h2, .prose h3 { color: var(--c-ink); margin-top: 1.7em; } .prose ul { padding-left: 1.15em; margin: 0 0 1.1em; } .prose li { margin-bottom: 0.4em; } .prose strong { color: var(--c-ink); font-weight: 600; } /* ------------------------------------------------------------ tlačítka */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; font-family: var(--sans); font-size: 0.9rem; font-weight: 560; letter-spacing: 0.045em; text-transform: uppercase; padding: 1.05em 1.9em; border: 1px solid transparent; border-radius: 999px; text-decoration: none; cursor: pointer; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn--solid { background: var(--c-accent); color: #fff; } .btn--solid:hover { background: color-mix(in srgb, var(--c-accent) 82%, #000); } .btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; } .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; } .btn--dark { background: var(--c-primary); color: var(--c-surface); } .btn--dark:hover { background: color-mix(in srgb, var(--c-primary) 82%, #000); } .btn--line { border-color: var(--c-line); color: var(--c-ink); } .btn--line:hover { border-color: var(--c-accent); color: var(--c-accent); } /* -------------------------------------------------------------- hlavička */ .hd { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--hd-h); display: flex; align-items: center; color: #fff; background: transparent; transition: background-color .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease); } .hd::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(10,14,9,.55), rgba(10,14,9,0)); opacity: 1; transition: opacity .4s var(--ease); } .hd.is-stuck, .hd--solid { background: var(--c-primary); box-shadow: 0 1px 0 rgba(255,255,255,.09), 0 12px 34px rgba(15,20,14,.24); } .hd.is-stuck::after, .hd--solid::after { opacity: 0; } .hd__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; } .hd__logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; opacity: 0; transform: translateY(-6px); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; } .hd.is-stuck .hd__logo, .hd--solid .hd__logo { opacity: 1; transform: none; pointer-events: auto; } .hd__logo img { max-height: 42px; width: auto; } .hd__logo-txt { font-family: var(--serif); font-size: 1.22rem; letter-spacing: -0.01em; white-space: nowrap; } .nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); } .nav a { font-size: .84rem; font-weight: 520; letter-spacing: .085em; text-transform: uppercase; text-decoration: none; position: relative; padding: .35rem 0; white-space: nowrap; } .nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--c-accent); transition: right .35s var(--ease); } .nav a:hover::after { right: 0; } .nav__home { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: .2rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); transition: background-color .3s var(--ease), border-color .3s var(--ease); } .nav__home::after { display: none; } .nav__home svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; } .nav__home:hover { background: var(--c-accent); border-color: var(--c-accent); } .burger { display: none; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; padding: 0; align-items: center; justify-content: center; } .burger span { display: block; width: 24px; height: 1.5px; background: currentColor; position: relative; transition: background .3s; } .burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 24px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease), top .3s var(--ease); } .burger span::before { top: -7px; } .burger span::after { top: 7px; } body.nav-open .burger span { background: transparent; } body.nav-open .burger span::before { top: 0; transform: rotate(45deg); } body.nav-open .burger span::after { top: 0; transform: rotate(-45deg); } /* ------------------------------------------------------------------ hero */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; text-align: center; padding: calc(var(--hd-h) + 3rem) var(--gut) clamp(4rem, 9vh, 7rem); } .hero__bg { position: absolute; inset: 0; z-index: 0; background: #10150E; } .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 2.2s var(--ease); } .hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); } .hero__slide.is-on { opacity: 1; } .hero__slide.is-on img { animation: kenburns 18s linear forwards; } @keyframes kenburns { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.15) translate3d(0, -1.2%, 0); } } .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(12,17,11,.52) 0%, rgba(12,17,11,.18) 34%, rgba(12,17,11,.62) 82%, rgba(12,17,11,.86) 100%); } .hero__in { position: relative; z-index: 2; max-width: 940px; } .hero__logo { margin: 0 auto clamp(1.6rem, 3.5vw, 2.6rem); } .hero__logo img { max-height: clamp(88px, 15vh, 160px); width: auto; margin-inline: auto; filter: drop-shadow(0 4px 24px rgba(0,0,0,.35)); } .hero h1 { font-size: clamp(2.7rem, 8.2vw, 6.2rem); font-weight: 350; line-height: 0.98; letter-spacing: -0.028em; margin: 0 0 clamp(1.1rem, 2.4vw, 1.7rem); text-shadow: 0 2px 30px rgba(0,0,0,.32); } .hero__sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 2vw, 1.5rem); font-weight: 300; line-height: 1.5; max-width: 42ch; margin: 0 auto; color: rgba(255,255,255,.9); text-shadow: 0 1px 18px rgba(0,0,0,.4); } .hero__btns { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); } .hero__social { display: flex; gap: .6rem; justify-content: center; margin-top: clamp(1.8rem, 3.5vw, 2.6rem); } .soc { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.42); color: #fff; transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .soc:hover { background: var(--c-accent); border-color: var(--c-accent); transform: translateY(-3px); } .soc svg { width: 17px; height: 17px; fill: currentColor; } .hero__dots { display: flex; gap: 9px; justify-content: center; margin-top: clamp(2rem, 4vw, 2.8rem); } .hero__dots button { width: 30px; height: 2px; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.35); transition: background .4s var(--ease); } .hero__dots button[aria-current="true"] { background: var(--c-accent); } .hero__down { position: absolute; left: 50%; bottom: 1.8rem; z-index: 2; transform: translateX(-50%); color: rgba(255,255,255,.75); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; display: grid; justify-items: center; gap: .5rem; } .hero__down::after { content: ''; width: 1px; height: 34px; background: linear-gradient(to bottom, currentColor, transparent); animation: drop 2.4s var(--ease) infinite; } @keyframes drop { 0%, 100% { opacity: .25; } 45% { opacity: 1; } } /* ---------------------------------------------------------------- sekce */ .sec { padding-block: var(--sec-y); position: relative; } .sec--tight { padding-block: clamp(3rem, 6vw, 5rem); } .sec--surface { background: var(--c-surface); } /* Signature: dělicí linka v rytmu skládaných trámů */ .course { border: 0; height: 7px; margin: 0; background: none; position: relative; } .course::before, .course::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--c-line); } .course::before { top: 0; } .course::after { top: 6px; opacity: .55; } .sec__head { max-width: 62ch; margin-bottom: clamp(2.4rem, 4.5vw, 3.6rem); } .sec__head--center { margin-inline: auto; text-align: center; } .sec__head--center .eyebrow::before { display: none; } /* ------------------------------------------------------ textový blok + foto */ .blk { display: grid; gap: clamp(2.2rem, 5vw, 4.5rem); align-items: center; } @media (min-width: 900px) { .blk { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } .blk--flip .blk__media { order: -1; } } .blk__media { position: relative; } .blk__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); box-shadow: 0 26px 60px -30px rgba(20, 28, 18, .55); } .blk__media::after { content: ''; position: absolute; inset: auto 0 -14px 0; height: 1px; background: var(--c-line); } @media (min-width: 900px) { .blk__media img { aspect-ratio: 3 / 4; } } .blk__body .lead { margin-bottom: 1.4rem; } /* -------------------------------------------------------------- důvody */ .reasons { display: grid; gap: 1px; background: var(--c-line); border-block: 1px solid var(--c-line); } @media (min-width: 660px) { .reasons { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .reasons { grid-template-columns: repeat(3, 1fr); } } .reason { background: var(--c-bg); padding: clamp(1.8rem, 3vw, 2.6rem); transition: background-color .4s var(--ease); } .reason:hover { background: var(--c-surface); } .reason__ico { width: 26px; height: 26px; color: var(--c-accent); margin-bottom: 1.2rem; } .reason__ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.3; } .reason h3 { font-size: 1.28rem; margin-bottom: .55rem; } .reason p { color: var(--c-muted); font-size: .96rem; margin: 0; } /* ------------------------------------------------------------- galerie */ .gal { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 720px) { .gal { grid-template-columns: repeat(3, 1fr); gap: 14px; } } @media (min-width: 1080px) { .gal { grid-template-columns: repeat(4, 1fr); } } .gal__it { position: relative; overflow: hidden; border-radius: var(--r); background: var(--c-line); cursor: zoom-in; border: 0; padding: 0; aspect-ratio: 4 / 3; } .gal__it:nth-child(6n + 1) { grid-column: span 2; aspect-ratio: 8 / 6; } @media (min-width: 720px) { .gal__it:nth-child(6n + 1) { aspect-ratio: 8 / 6; } } .gal__it img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .gal__it:hover img { transform: scale(1.06); } /* jednoduchý lightbox */ .lb { position: fixed; inset: 0; z-index: 300; display: none; background: rgba(9, 13, 8, .93); align-items: center; justify-content: center; padding: 3vh 3vw; } .lb[open], .lb.is-on { display: flex; } .lb img { max-width: 100%; max-height: 94vh; width: auto; border-radius: 6px; } .lb__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center; } .lb__btn:hover { background: rgba(255,255,255,.2); } .lb__prev { left: 2vw; } .lb__next { right: 2vw; } .lb__close { top: 2vh; right: 2vw; transform: none; } /* ------------------------------------------------------------ jednotky */ .units { width: 100%; } .utable { width: 100%; border-collapse: collapse; } .utable caption { position: absolute; left: -9999px; } .utable th { text-align: left; font-weight: 620; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); padding: 0 1rem .85rem 0; border-bottom: 1px solid var(--c-line); } .utable th:last-child, .utable td:last-child { text-align: right; padding-right: 0; } .utable td { padding: 1.45rem 1rem 1.45rem 0; border-bottom: 1px solid var(--c-line); vertical-align: middle; font-variant-numeric: tabular-nums; color: var(--c-muted); } .utable tbody tr { transition: background-color .35s var(--ease); } .utable tbody tr:hover { background: var(--c-surface); } .utable td:first-child { box-shadow: inset 0 0 0 0 var(--c-accent); transition: box-shadow .35s var(--ease), padding-left .35s var(--ease); } .utable tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 0 var(--c-accent); padding-left: .9rem; } .utable tr.is-sold { opacity: .55; } .units__name { font-family: var(--serif); font-size: 1.42rem; line-height: 1.15; color: var(--c-ink); } .units__name a { text-decoration: none; } .units__name a:hover { color: var(--c-accent); } .units__name small { display: block; font-family: var(--sans); font-size: .82rem; color: var(--c-muted); margin-top: .2rem; font-weight: 400; } .units__price { font-weight: 600; color: var(--c-ink); white-space: nowrap; } .chip { display: inline-flex; align-items: center; gap: .45em; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .42em .85em; border-radius: 999px; white-space: nowrap; } .chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .chip--available { color: #2F6B34; background: color-mix(in srgb, #2F6B34 12%, transparent); } .chip--reserved { color: #9A6B18; background: color-mix(in srgb, #9A6B18 14%, transparent); } .chip--sold { color: #6C6F68; background: color-mix(in srgb, #6C6F68 14%, transparent); } .utable .btn { padding: .72em 1.35em; font-size: .76rem; } .units__mobile { display: none; } @media (max-width: 979px) { .utable { display: none; } .units__mobile { display: grid; gap: 14px; } .ucard { position: relative; display: block; text-decoration: none; border: 1px solid var(--c-line); border-radius: var(--r); padding: 1.3rem; background: var(--c-surface); transition: border-color .35s var(--ease); } .ucard:hover { border-color: var(--c-accent); } .ucard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .ucard h3 { font-size: 1.42rem; margin: 0; } .ucard h3 small { display: block; font-family: var(--sans); font-size: .82rem; color: var(--c-muted); margin-top: .2rem; } .ucard dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem 1rem; margin: 0; font-size: .95rem; } .ucard dt { color: var(--c-muted); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; } .ucard dd { margin: .15rem 0 0; font-weight: 560; color: var(--c-ink); } .ucard--sold { opacity: .6; } } /* --------------------------------------------------------- detail jednotky */ .udet { padding-top: calc(var(--hd-h) + clamp(2.5rem, 6vw, 5rem)); } .crumbs { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 1.6rem; } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--c-accent); } .udet__head { display: grid; gap: 2rem; align-items: end; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); } @media (min-width: 900px) { .udet__head { grid-template-columns: 1.6fr 1fr; } } .udet__head h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 380; margin: 0; } .udet__price { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 400; } @media (min-width: 900px) { .udet__pricebox { text-align: right; } } .udet__hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); } .udet__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 960px) { .udet__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } } .specs { border-top: 1px solid var(--c-line); margin: 0; } .specs div { display: flex; justify-content: space-between; gap: 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--c-line); } .specs dt { color: var(--c-muted); font-size: .9rem; } .specs dd { margin: 0; font-weight: 540; text-align: right; } .benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; } .benefits li { display: flex; gap: .8rem; align-items: flex-start; font-size: .98rem; } .benefits li::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin-top: .55em; background: var(--c-accent); transform: rotate(45deg); } .aside-card { background: var(--c-primary); color: color-mix(in srgb, var(--c-surface) 92%, transparent); border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.2rem); position: sticky; top: calc(var(--hd-h) + 20px); } .aside-card h3 { color: #fff; font-size: 1.45rem; } .aside-card .agent__name { color: #fff; } .aside-card a { color: #fff; } .plans { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .plans figure { margin: 0; } .plans img { width: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); padding: 12px; cursor: zoom-in; } .plans figcaption { font-size: .82rem; color: var(--c-muted); margin-top: .5rem; } /* ---------------------------------------------------------------- mapa */ /* z-index: 0 uzavře Leaflet do vlastního stacking contextu — jeho vrstvy mají z-index 400 a bez toho by překryly kartu formuláře v patičce. */ .map-sec { position: relative; z-index: 0; } .map { height: clamp(360px, 52vh, 560px); width: 100%; background: var(--c-line); } .map .leaflet-container { font-family: var(--sans); } .map-sec--overlap { padding-bottom: 0; } /* ------------------------------------------------------------- kontakt */ .ft { background: var(--c-primary); color: color-mix(in srgb, var(--c-surface) 78%, transparent); position: relative; z-index: 1; } .ft a { color: inherit; } .ft h3 { color: #fff; } .ft__cols { display: grid; gap: clamp(2.4rem, 4vw, 3.4rem); padding-block: clamp(3rem, 6vw, 5rem); } @media (min-width: 980px) { .ft__cols { grid-template-columns: 1fr 1.55fr 1fr; align-items: start; } } /* Formulář vystupuje nahoru přes mapu. Patička na mapu přímo navazuje, vytažená je jen karta formuláře — jinak by mezi nimi zůstal pruh pozadí. */ .formcard { background: var(--c-surface); color: var(--c-ink); border-radius: var(--r-lg); padding: clamp(1.8rem, 2.6vw, 2.6rem); box-shadow: 0 34px 70px -34px rgba(10, 16, 9, .65); } @media (min-width: 980px) { .ft--lift .formcard { margin-top: clamp(-12rem, -14vw, -6rem); position: relative; z-index: 2; } } .formcard h3 { color: var(--c-ink); font-size: 1.6rem; margin-bottom: .3rem; } .formcard .note { color: var(--c-muted); font-size: .88rem; margin-bottom: 1.5rem; } .fgrid { display: grid; gap: .9rem; } @media (min-width: 560px) { .fgrid--2 { grid-template-columns: 1fr 1fr; } } .field label { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .4rem; } .field input, .field textarea, .field select { width: 100%; font: inherit; font-size: .96rem; color: var(--c-ink); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 10px; padding: .92rem 1rem; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } .field textarea { min-height: 118px; resize: vertical; } .field input:focus, .field textarea:focus { outline: 0; border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent); } .field--err input, .field--err textarea { border-color: #B4453A; } .err { color: #B4453A; font-size: .82rem; margin-top: .35rem; } .check { display: flex; gap: .7rem; align-items: flex-start; font-size: .86rem; color: var(--c-muted); } .check input { margin-top: .25em; accent-color: var(--c-accent); width: 16px; height: 16px; flex: 0 0 auto; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .flash { border-radius: 10px; padding: .95rem 1.15rem; font-size: .92rem; margin-bottom: 1.2rem; background: color-mix(in srgb, #2F6B34 13%, transparent); color: #245229; border: 1px solid color-mix(in srgb, #2F6B34 30%, transparent); } /* prodejce */ .agent__photo { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; margin-bottom: 1.2rem; border: 1px solid rgba(255,255,255,.18); } .agent__name { font-family: var(--serif); font-size: 1.6rem; color: #fff; line-height: 1.15; margin-bottom: .2rem; } .agent__role { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 1.1rem; } .agent__list { display: grid; gap: .5rem; margin: 1.2rem 0 0; font-size: .98rem; } .agent__list a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; } .agent__list a:hover { color: var(--c-accent); } .agent__list svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .65; } .agent__note { font-size: .9rem; opacity: .8; margin-top: 1.1rem; } .dev-body { font-size: .95rem; } .dev-body p { margin-bottom: .8em; } /* Patička je tmavá — barvy z .prose by tu byly nečitelné. */ .ft .prose, .ft .dev-body { color: inherit; } .ft .prose strong, .ft .prose h2, .ft .prose h3, .ft .prose h4 { color: #fff; } .ft .prose a { color: var(--c-accent); } /* spodní lišta */ .ft__bar { border-top: 1px solid rgba(255,255,255,.13); padding-block: 1.6rem; display: grid; gap: 1.2rem; align-items: center; font-size: .82rem; } @media (min-width: 860px) { .ft__bar { grid-template-columns: 1fr auto 1fr; } } .ft__links { display: flex; flex-wrap: wrap; gap: 1.4rem; } .ft__links a { text-decoration: none; opacity: .78; } .ft__links a:hover { opacity: 1; color: var(--c-accent); } .ft__mark { display: flex; justify-content: center; } .ft__mark img { max-height: 40px; width: auto; opacity: .9; } .ft__credit { opacity: .62; text-align: left; } @media (min-width: 860px) { .ft__credit { text-align: right; } } .ft__credit a { text-decoration: none; } .ft__credit a:hover { color: var(--c-accent); } /* ------------------------------------------------------------ aktuality */ .news { display: grid; gap: clamp(1.5rem, 3vw, 2.2rem); } @media (min-width: 780px) { .news { grid-template-columns: repeat(3, 1fr); } } .ncard { display: block; text-decoration: none; } .ncard img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); margin-bottom: 1.1rem; } .ncard time { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--c-accent); } .ncard h3 { font-size: 1.32rem; margin: .5rem 0 .5rem; transition: color .3s var(--ease); } .ncard:hover h3 { color: var(--c-accent); } .ncard p { color: var(--c-muted); font-size: .94rem; margin: 0; } .article { max-width: 70ch; margin-inline: auto; padding-top: calc(var(--hd-h) + clamp(2.5rem, 6vw, 5rem)); } .article h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); } .article img { border-radius: var(--r); margin: 2rem 0; } /* ---------------------------------------------------- animace při scrollu */ .rv { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .rv.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .rv { opacity: 1; transform: none; } .hero__slide.is-on img { animation: none; } } /* ---------------------------------------------------------------- mobil */ @media (max-width: 860px) { .burger { display: flex; } .nav { position: fixed; inset: 0; z-index: 90; flex-direction: column; justify-content: center; gap: 1.6rem; background: var(--c-primary); transform: translateY(-100%); transition: transform .5s var(--ease); padding: var(--hd-h) var(--gut) 3rem; } body.nav-open .nav { transform: none; } .nav a { font-size: 1.15rem; letter-spacing: .05em; } body.nav-open { overflow: hidden; } .hd.is-open { background: var(--c-primary); } .hd.is-open .hd__logo { opacity: 1; transform: none; } }