/* ============================================================ Griffy — sdílený design systém Osobitý, český, důvěryhodný. Hodně o recenzích a lidech. ============================================================ */ :root { /* Barvy — teplá, poctivá paleta. Zelená = důvěra, krémová = lidskost */ --bg: #fdfcf9; --bg-soft: #f4f1ea; --bg-card: #ffffff; --text: #1c2321; --text-soft: #5c6660; --text-faint: #8a938d; --brand: #1e7a5a; --brand-dark: #155c43; --brand-soft: #e3f1ea; --brand-softer: #f0f7f3; --accent: #e8a33d; --accent-soft: #fdf3e3; --danger: #c94f3d; --border: #e6e2d8; --border-soft: #eeebe2; --shadow-sm: 0 1px 2px rgba(28, 35, 33, .05); --shadow: 0 1px 3px rgba(28, 35, 33, .06), 0 10px 30px rgba(28, 35, 33, .07); --shadow-lg: 0 4px 12px rgba(28, 35, 33, .08), 0 20px 50px rgba(28, 35, 33, .12); /* Geometrie */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --wrap: 1120px; /* Spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; } /* Tmavý režim: pro launch vypnutý (viz README). Aktivace: . */ :root[data-theme="dark"] { --bg: #151917; --bg-soft: #1c211f; --bg-card: #1f2523; --text: #edf1ee; --text-soft: #a3ada7; --text-faint: #78827c; --brand: #3dbd8c; --brand-dark: #34a378; --brand-soft: #1a352b; --brand-softer: #182a23; --accent: #e8a33d; --accent-soft: #33291a; --border: #2c332f; --border-soft: #262d29; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 1px 3px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.35); --shadow-lg: 0 4px 12px rgba(0,0,0,.4), 0 20px 50px rgba(0,0,0,.5); } /* ---------- Reset & základ ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; font-size: 16px; } img, svg { max-width: 100%; display: block; } a { color: var(--brand); } h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.02em; margin: 0; } .wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--s-5); padding-right: var(--s-5); } section { padding: var(--s-8) 0; } @media (max-width: 640px) { section { padding: var(--s-7) 0; } } /* ---------- Hlavička ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--border-soft); } .nav { display: flex; align-items: center; gap: var(--s-6); height: 68px; } .logo { font-weight: 800; font-size: 23px; letter-spacing: -.03em; color: var(--text); text-decoration: none; flex-shrink: 0; } .logo span { color: var(--brand); } .nav-links { display: flex; gap: var(--s-5); align-items: center; margin-left: auto; } .nav-links > a:not(.btn) { color: var(--text-soft); text-decoration: none; font-size: 15px; font-weight: 500; padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .15s; } .nav-links > a:not(.btn):hover { color: var(--text); } .nav-links > a.active { color: var(--brand); border-bottom-color: var(--brand); } /* Přepínač prostředí — poptávající / opraváři */ .mode-switch { display: flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 3px; flex-shrink: 0; } .mode-switch a { text-decoration: none; font-size: 13.5px; font-weight: 600; padding: 6px 14px; border-radius: 999px; color: var(--text-soft); white-space: nowrap; transition: all .15s; } .mode-switch a.on { background: var(--bg-card); color: var(--brand-dark); box-shadow: var(--shadow-sm); } [data-theme="dark"] .mode-switch a.on { color: var(--brand); } .mode-switch a:not(.on):hover { color: var(--text); } /* Hamburger (vkládá js/nav.js) — na desktopu skrytý */ .nav-burger { display: none; margin-left: auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 42px; height: 42px; flex-shrink: 0; background: transparent; border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; padding: 0; } .nav-burger span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s, opacity .2s; } .site-header.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-header.nav-open .nav-burger span:nth-child(2) { opacity: 0; } .site-header.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 880px) { .nav { gap: var(--s-3); } .nav-burger { display: flex; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin-left: 0; background: var(--bg-card); border-bottom: 1px solid var(--border); padding: var(--s-2) var(--s-5) var(--s-5); box-shadow: var(--shadow); } .site-header.nav-open .nav-links { display: flex; } .nav-links > a:not(.btn) { padding: 13px 2px; font-size: 16px; border-bottom: 1px solid var(--border-soft); } .nav-links > a.active { border-bottom-color: var(--brand); } .nav-links .btn { margin-top: var(--s-4); } } /* Kopie přepínače rolí uvnitř panelu (vkládá js/nav.js) — jen pro úzké displeje */ .mode-switch-mobile { display: none; } @media (max-width: 560px) { .nav > .mode-switch { display: none; } .nav-links .mode-switch-mobile { display: flex; align-self: flex-start; margin: var(--s-2) 0 var(--s-3); } } /* ---------- Tlačítka ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand); color: #fff; text-decoration: none; padding: 12px 22px; border-radius: 11px; font-weight: 650; font-size: 15px; border: none; cursor: pointer; transition: background .15s, transform .1s; font-family: inherit; line-height: 1.3; } .btn:hover { background: var(--brand-dark); } .btn:active { transform: scale(.98); } .btn-lg { padding: 16px 30px; font-size: 17px; border-radius: 13px; } .btn-sm { padding: 8px 16px; font-size: 14px; border-radius: 9px; } .btn-ghost { background: transparent; color: var(--text); border: 1.5px solid var(--border); box-shadow: none; } .btn-ghost:hover { background: var(--bg-soft); border-color: var(--text-faint); } .btn-accent { background: var(--accent); color: #3a2a08; } .btn-accent:hover { background: #d99428; } .btn-block { width: 100%; } /* ---------- Odznaky, hvězdy, tagy ---------- */ .badge { display: inline-flex; align-items: center; gap: 7px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 650; font-size: 13.5px; padding: 6px 14px; border-radius: 999px; } [data-theme="dark"] .badge { color: var(--brand); } .badge-accent { background: var(--accent-soft); color: #8a5f14; } [data-theme="dark"] .badge-accent { color: var(--accent); } .stars { color: var(--accent); font-size: 15px; letter-spacing: 1px; white-space: nowrap; } .stars .num { color: var(--text); font-weight: 700; letter-spacing: 0; margin-left: 4px; } .stars .count { color: var(--text-faint); font-weight: 400; letter-spacing: 0; font-size: 13.5px; } .tag { display: inline-block; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 8px; padding: 4px 11px; font-size: 13px; color: var(--text-soft); font-weight: 500; } .tags { display: flex; flex-wrap: wrap; gap: 7px; } .verified { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 650; font-size: 13.5px; } .verified::before { content: "✓"; font-weight: 800; } /* ---------- Avatary ---------- */ .avatar { border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; user-select: none; background: linear-gradient(135deg, var(--av-a, #1e7a5a), var(--av-b, #3dbd8c)); } .avatar-sm { width: 40px; height: 40px; font-size: 16px; } .avatar-md { width: 56px; height: 56px; font-size: 22px; } .avatar-lg { width: 96px; height: 96px; font-size: 38px; } .avatar-xl { width: 140px; height: 140px; font-size: 54px; border: 4px solid var(--bg-card); box-shadow: var(--shadow); } /* barevné varianty avatarů */ .av-1 { --av-a: #1e7a5a; --av-b: #3dbd8c; } .av-2 { --av-a: #b06a2c; --av-b: #e8a33d; } .av-3 { --av-a: #4a5d9e; --av-b: #7c8fd9; } .av-4 { --av-a: #8a4a6b; --av-b: #c97ba3; } .av-5 { --av-a: #3e7c8a; --av-b: #6db3c2; } .av-6 { --av-a: #6b6b3a; --av-b: #a3a35c; } /* ---------- Karty ---------- */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-5); box-shadow: var(--shadow-sm); } .card-hover { transition: box-shadow .2s, transform .2s; } .card-hover:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .grid { display: grid; gap: var(--s-5); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .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: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ---------- Sekce nadpisy ---------- */ .section-head { text-align: center; max-width: 640px; margin: 0 auto var(--s-7); } .section-head h2 { font-size: clamp(26px, 3.6vw, 38px); margin-bottom: var(--s-3); } .section-head p { color: var(--text-soft); font-size: 17px; margin: 0; } .section-head.left { text-align: left; margin-left: 0; } .kicker { display: block; color: var(--brand); font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s-3); } /* ---------- Formuláře ---------- */ .form-row { margin-bottom: var(--s-4); } .form-row label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; } .form-row .hint { font-weight: 400; color: var(--text-faint); font-size: 13px; } .form-row input, .form-row select, .form-row textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 15px; font-family: inherit; background: var(--bg-card); color: var(--text); transition: border-color .15s; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--brand); } .form-row textarea { resize: vertical; min-height: 100px; } .form-note { text-align: center; color: var(--text-faint); font-size: 13px; margin-top: var(--s-4); } /* výběr spotřebiče — dlaždice */ .pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } @media (max-width: 560px) { .pick-grid { grid-template-columns: repeat(2, 1fr); } } .pick { border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); padding: var(--s-4) var(--s-3); text-align: center; cursor: pointer; transition: all .15s; font-family: inherit; font-size: 14px; color: var(--text); font-weight: 550; } .pick .ico { font-size: 26px; display: block; margin-bottom: 6px; } .pick:hover { border-color: var(--brand); background: var(--brand-softer); } .pick.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); } [data-theme="dark"] .pick.on { color: var(--brand); } /* ---------- Recenze ---------- */ .review { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--s-3); } .review-head { display: flex; align-items: center; gap: var(--s-3); } .review-head .who { min-width: 0; } .review-head .who strong { display: block; font-size: 15px; } .review-head .who .meta { color: var(--text-faint); font-size: 13px; } .review p.text { margin: 0; color: var(--text-soft); font-size: 15px; } .review .job { display: inline-flex; align-self: flex-start; gap: 6px; align-items: center; background: var(--bg-soft); border-radius: 7px; padding: 3px 10px; font-size: 12.5px; color: var(--text-soft); font-weight: 550; } .review .reply { border-left: 3px solid var(--brand-soft); padding: var(--s-2) var(--s-4); background: var(--brand-softer); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 14px; color: var(--text-soft); } .review .reply strong { color: var(--brand-dark); font-size: 13px; display: block; margin-bottom: 2px; } [data-theme="dark"] .review .reply strong { color: var(--brand); } /* rozpad hodnocení (5★ ████░ ) */ .rating-bars { display: flex; flex-direction: column; gap: 8px; } .rating-bar { display: grid; grid-template-columns: 34px 1fr 40px; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-soft); } .rating-bar .track { height: 8px; background: var(--bg-soft); border-radius: 99px; overflow: hidden; } .rating-bar .fill { height: 100%; background: var(--accent); border-radius: 99px; } /* ---------- Patička ---------- */ .site-footer { border-top: 1px solid var(--border); padding: var(--s-7) 0 var(--s-6); color: var(--text-soft); font-size: 14px; margin-top: var(--s-8); background: var(--bg-soft); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-6); margin-bottom: var(--s-6); } @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } .site-footer h4 { font-size: 14px; margin-bottom: var(--s-3); color: var(--text); } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: 8px; } .site-footer a { color: var(--text-soft); text-decoration: none; } .site-footer a:hover { color: var(--brand); } .footer-bottom { border-top: 1px solid var(--border); padding-top: var(--s-5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); color: var(--text-faint); font-size: 13px; } /* ---------- Koncept lišta ---------- */ .concept-flag { background: var(--accent); color: #3a2a08; text-align: center; font-size: 13px; font-weight: 650; padding: 7px 16px; } /* ---------- Drobnosti ---------- */ .muted { color: var(--text-soft); } .faint { color: var(--text-faint); } .center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .divider { border: none; border-top: 1px solid var(--border-soft); margin: var(--s-6) 0; } /* Statistiky v řádku */ .stats-row { display: flex; gap: var(--s-6); flex-wrap: wrap; } .stat .n { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--text); line-height: 1.1; } .stat .l { font-size: 13.5px; color: var(--text-faint); } /* FAQ */ details.faq { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); padding: 0; margin-bottom: var(--s-3); } details.faq summary { cursor: pointer; font-weight: 650; padding: var(--s-4) var(--s-5); list-style: none; display: flex; justify-content: space-between; align-items: center; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: "+"; font-size: 22px; color: var(--text-faint); font-weight: 400; } details.faq[open] summary::after { content: "–"; } details.faq .faq-body { padding: 0 var(--s-5) var(--s-4); color: var(--text-soft); font-size: 15px; } /* ---------- Kalendář dostupnosti ---------- */ .cal { user-select: none; } .cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-3); } .cal-head strong { font-size: 14.5px; } .cal-head button { border: 1px solid var(--border); background: var(--bg-card); border-radius: 7px; width: 28px; height: 28px; cursor: pointer; color: var(--text-soft); font-size: 14px; display: flex; align-items: center; justify-content: center; font-family: inherit; } .cal-head button:hover { background: var(--bg-soft); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-dow { text-align: center; font-size: 11px; color: var(--text-faint); font-weight: 700; padding: 4px 0; text-transform: uppercase; } .cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 13px; font-weight: 550; position: relative; border: 1.5px solid transparent; } .cal-day.free { background: var(--brand-soft); color: var(--brand-dark); cursor: pointer; } [data-theme="dark"] .cal-day.free { color: var(--brand); } .cal-day.free:hover { border-color: var(--brand); } .cal-day.part { background: var(--accent-soft); color: #8a5f14; cursor: pointer; } [data-theme="dark"] .cal-day.part { color: var(--accent); } .cal-day.part:hover { border-color: var(--accent); } .cal-day.busy { background: var(--bg-soft); color: var(--text-faint); text-decoration: line-through; } .cal-day.past { color: var(--text-faint); opacity: .45; } .cal-day.today::after { content: ""; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; } .cal-day.sel { border-color: var(--brand); background: var(--brand); color: #fff; } .cal-legend { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-3); font-size: 12px; color: var(--text-faint); } .cal-legend span { display: inline-flex; align-items: center; gap: 6px; } .cal-legend i { width: 11px; height: 11px; border-radius: 4px; display: inline-block; } .cal-legend .i-free { background: var(--brand-soft); border: 1px solid var(--brand); } .cal-legend .i-part { background: var(--accent-soft); border: 1px solid var(--accent); } .cal-legend .i-busy { background: var(--bg-soft); border: 1px solid var(--border); } /* Breadcrumb */ .crumbs { font-size: 13.5px; color: var(--text-faint); padding: var(--s-4) 0 0; } .crumbs a { color: var(--text-faint); text-decoration: none; } .crumbs a:hover { color: var(--brand); }