/* ========================================================================== Premium Brokers Reality – designový systém -------------------------------------------------------------------------- Barvy jsou odměřené přímo z loga (assets/img/logo.png): navy #242853, sky #6ACEFA. Sky je jasně modrá – na světlém pozadí má kontrast 1.67, takže je výhradně dekorativní. Pro text a odkazy na světlém slouží --sky-ink (5.28 = AA), na tmavých sekcích září samotné sky (7.86 = AA). ========================================================================== */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../fonts/archivo.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/instrument-sans.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC, U+2122; } :root { /* ---- barvy ---- */ --navy: #242853; --navy-deep: #171b38; --navy-soft: #2e3465; --sky: #6acefa; --sky-ink: #0e6e9e; /* čitelná varianta sky na světlém pozadí */ --sky-wash: #eaf6fd; --paper: #f7f8fa; --paper-settled: #e9f2fb; /* tón, na kterém se pozadí ustálí */ --white: #ffffff; --ink: #171b38; --ink-muted: #5a6478; --ink-faint: #8a93a6; --line: #e6e9ef; --line-strong: #d5dae4; --gold: #c8a84b; /* jen pro stav „prodáno" – nikde jinde */ /* ---- typografie ---- */ --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; /* ---- rádiusy ---- */ --r-xs: 6px; --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px; /* ---- stíny ---- */ --shadow-sm: 0 1px 2px rgba(23, 27, 56, .06), 0 2px 6px rgba(23, 27, 56, .04); --shadow: 0 2px 6px rgba(23, 27, 56, .06), 0 12px 28px -12px rgba(23, 27, 56, .16); --shadow-lg: 0 4px 12px rgba(23, 27, 56, .07), 0 28px 56px -20px rgba(23, 27, 56, .26); /* ---- rytmus ---- */ --gutter: clamp(1.25rem, 4vw, 3rem); --max: 1240px; --section-y: clamp(3.5rem, 7vw, 6.5rem); --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); } /* --------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; } /* Jedno průběžné pozadí přes celou stránku. Dřív měla každá sekce vlastní barvu a web se kvůli tomu opticky lámal na pruhy. Teď je gradient na : světlo nahoře postupně přechází do modravého nádechu a od 1500 px drží konstantní tón – zastávky jsou proto v pixelech, ne v procentech, aby vypadal stejně na krátké i dlouhé stránce. Tmavé bloky pak startují přesně z --paper-settled, takže na sebe navazují bez viditelné hrany. */ body { margin: 0; background-color: var(--paper-settled); background-image: radial-gradient(120% 62% at 88% -8%, rgba(106, 206, 250, .30), transparent 62%), radial-gradient(80% 44% at 4% 4%, rgba(106, 206, 250, .10), transparent 70%), linear-gradient(180deg, #ffffff 0, #fafcfe 340px, #f2f8fc 820px, var(--paper-settled) 1500px); background-repeat: no-repeat; color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'kern' 1, 'liga' 1; overflow-x: hidden; } /* height:auto je tu povinné – bez něj si obrázek nechá výšku z HTML atributu width/height a rozbije každý poměr stran, který mu dá CSS. */ img, svg, video { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; } :focus-visible { outline: 3px solid var(--sky-ink); outline-offset: 3px; border-radius: var(--r-xs); } /* ----------------------------------------------------------- typografie -- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); } h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); } h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: -.02em; } h4 { font-size: 1.05rem; letter-spacing: -.01em; } p { margin: 0 0 1em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } .lead { font-size: clamp(1.02rem, 1.3vw, 1.15rem); color: var(--ink-muted); max-width: 56ch; } .muted { color: var(--ink-muted); } /* ---------------------------------------------------------------- layout - */ .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } /* ---------------------------------------------------------------- panely - */ /* Obsah, který by jinak ležel holý na pozadí, sedí v panelu. Pozadí stránky pod ním zůstává jedno průběžné – panely na něm plavou, nekrájejí ho na barevné pruhy. */ .panel { position: relative; padding: clamp(1.6rem, 3.4vw, 2.75rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); } .panel--dark { overflow: hidden; color: var(--white); background: var(--navy); border-color: var(--navy); box-shadow: 0 34px 70px -38px rgba(23, 27, 56, .62); } /* Modrá záře v rohu – stejný jazyk jako velká dlaždice u služeb. */ .panel--dark::after { content: ''; position: absolute; right: -14%; bottom: -46%; width: min(46%, 460px); aspect-ratio: 1; background: radial-gradient(circle, rgba(106, 206, 250, .38), transparent 68%); pointer-events: none; } .panel--dark > * { position: relative; z-index: 1; } .panel--dark .lead, .panel--dark .muted { color: #b9c2d6; } /* Velký panel na konci stránky unese víc vzduchu. */ .panel--wide { padding: clamp(2rem, 4.6vw, 4rem); } /* Nadpis sekce stojí sám, případný doprovodný text je pod ním v úzkém sloupci. Dřívější „velký nadpis vlevo + odstavec vpravo" je vyloženě šablonovitý vzor, který dělá všechny sekce stejné. */ .section-head { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); } .section-head .muted, .section-head .lead { margin-top: .95rem; max-width: 54ch; } /* Výjimka: hlavička s odkazem vpravo (Vybrané nemovitosti → celá nabídka). Tam pravá strana nese akci, ne výplňový text, takže řádek dává smysl. */ .section-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; } .section-head--row .arrow-link { padding-bottom: .35rem; } /* --------------------------------------------------------------- tlačítka */ .btn { --btn-bg: var(--navy); --btn-fg: var(--white); display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .78rem 1.5rem; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid transparent; border-radius: var(--r-pill); font-family: var(--font-display); font-size: .93rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .25s var(--ease); } .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(36, 40, 83, .55); } .btn:active { transform: translateY(0); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy); border-color: var(--line-strong); } .btn--ghost:hover { --btn-bg: var(--white); border-color: var(--navy); } .btn--sky { --btn-bg: var(--sky); --btn-fg: var(--navy-deep); } .btn--on-dark { --btn-bg: transparent; --btn-fg: var(--white); border-color: rgba(255, 255, 255, .28); } .btn--on-dark:hover { --btn-bg: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); } /* Šipka, která se na hover posune – drobnost, ale dělá odkazy živé. */ .arrow-link { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--sky-ink); text-decoration: none; } .arrow-link svg { transition: transform .35s var(--ease-out); } .arrow-link:hover svg { transform: translateX(4px); } /* ------------------------------------------------------------------ karty */ .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } /* ----------------------------------------------------------------- štítky */ .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .34rem .68rem; border-radius: var(--r-pill); font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; background: var(--white); color: var(--navy); } .badge--prodej { background: var(--navy); color: var(--white); } .badge--pronajem { background: var(--sky); color: var(--navy-deep); } .badge--rezervovano { background: var(--gold); color: #2a2000; } /* Realizované zakázky jsou úspěch – zelená/teal místo tmavého překryvu. */ .badge--prodano { background: linear-gradient(135deg, #35A968, #218A50); color: #fff; } .badge--pronajato { background: linear-gradient(135deg, #38AECC, #1F86A8); color: #fff; } /* ------------------------------------------------------------------ mřížky */ .grid { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grid--3, .grid--4 { grid-template-columns: 1fr; } } /* ---------------------------------------------------- vstupní animace ---- */ /* Nad ohybem se animuje čistým CSS – obsah se tak ukáže hned, bez čekání na stažení motion.dev z CDN. Kdyby na tom hero viselo, na pomalé lince by první dvě vteřiny svítila prázdná stránka. */ [data-enter] { animation: enter .68s cubic-bezier(.16, 1, .3, 1) both; } @keyframes enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* Prvky s [data-reveal] jsou pod ohybem a odkrývá je motion.dev při scrollu. Schované jsou jen tehdy, když JS běží – bez něj by je nikdo neodkryl. .no-motion přidá skript, když je motion.dev nedostupný nebo si uživatel animace nepřeje. */ /* Výchozí poloha musí sedět se startem animace v site.js (10 px), jinak prvek při spuštění cvakne. Po doběhu drží stav třída .is-revealed. */ html:not(.no-js) [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(10px); } /* Během nástupu nesmí do animace mluvit vlastní CSS přechody prvku (hover transition na kartách jinak každý snímek „dopružila"). */ .is-revealing { transition: none !important; } html.no-motion [data-reveal] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } [data-reveal], [data-enter] { opacity: 1; transform: none; animation: none; } } /* --------------------------------------------------------------- pomocné - */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: 200; padding: .7rem 1.2rem; background: var(--navy); color: var(--white); border-radius: 0 0 var(--r-sm) var(--r-sm); text-decoration: none; transition: transform .2s var(--ease); } .skip-link:focus { transform: translate(-50%, 0); } /* Nadpis rozsekaný na řádky v masce (dělá site.js). Bez JS zůstane v HTML obyčejný nadpis, takže se přečte i vytiskne. */ .ln { display: block; overflow: hidden; } .ln__i { display: block; will-change: transform; }