/* Medaylo - marketing site Static CSS, no build step, no external resources, no webfonts. The page is built around one idea: a number of days. Big tabular figures carry the personality; everywhere except the hero the page stays quiet and black-on-white. The one brand-gradient moment lives on the hero numeral, on the dark opening screen, which is exempt from the "quiet, black-on-white" rule by design (see web-report-v2.md). */ :root { --green: #24C291; --teal: #16B6CA; --blue: #0D83F8; --ink: #03132B; --mist: #EFF5F8; --bg: #FFFFFF; --text: var(--ink); --text-muted: #45566B; --border: #DDE4E9; --border-strong: #C4CFD6; --status-ok: #26643D; --status-low: #935C25; --status-out: #9E2E3D; --runway-track: #E7ECEF; --hero-text: #EFF5F8; --hero-text-muted: #A9C3D6; --hero-border: rgba(239, 245, 248, 0.18); --gradient-brand: linear-gradient(90deg, var(--green) 0%, var(--teal) 50%, var(--blue) 100%); --max-width: 1160px; --measure: 38ch; --radius-sm: 8px; --radius-md: 14px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2.25rem; --space-7: 3.5rem; --space-8: 5.5rem; --space-9: 8rem; color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, p, figure, dl, dd { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; } /* Numerals: the page reads as a column of figures. Tabular width keeps every digit the same, so numbers line up wherever they appear. */ .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Bilingual toggle: every translatable span carries lang="cs"/lang="en". The language not matching is hidden; the active one keeps its element's normal default display (inline for spans), so it never disturbs surrounding flex/grid/list layout. Always nest lang spans inside a real structural element (p, li, h2 …) rather than putting lang= on that structural element itself. */ html[data-lang="cs"] [lang="en"] { display: none; } html[data-lang="en"] [lang="cs"] { display: none; } :focus { outline: none; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; } /* The header sits on a light background on every page, so it keeps the default ink ring. Only the hero itself is dark and needs the light one. */ .hero :focus-visible { outline-color: var(--mist); } .skip-link { position: absolute; left: 1rem; top: -60px; background: var(--ink); color: var(--mist); padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); z-index: 100; transition: top 0.2s ease; } .skip-link:focus-visible { top: 1rem; outline-color: var(--mist); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-5); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--border); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); padding-bottom: var(--space-3); } .brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; text-decoration: none; color: var(--text); white-space: nowrap; } .brand img { width: 28px; height: 28px; } .header-actions { display: flex; align-items: center; gap: var(--space-4); } .lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; } .lang-switch button { border: 0; background: transparent; padding: 0.32rem 0.65rem; border-radius: 999px; cursor: pointer; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text-muted); } .lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--mist); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border-radius: 999px; font-weight: 700; font-size: 0.88rem; text-decoration: none; border: 1.5px solid var(--ink); color: var(--ink); background: transparent; cursor: pointer; transition: opacity 0.15s ease; } .btn:hover { opacity: 0.7; } .btn-solid { background: var(--ink); color: var(--mist); } .header-actions .btn { display: none; } @media (min-width: 640px) { .header-actions .btn { display: inline-flex; } } /* ---------- Hero: the one dark, one-gradient moment on the page ---------- */ .hero { background: var(--ink); color: var(--hero-text); padding: var(--space-9) 0 var(--space-8); min-height: 82svh; display: flex; align-items: center; } .hero-inner { max-width: 40rem; } .hero-figure { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0 0.55rem; line-height: 0.82; } .hero-num { font-size: clamp(8rem, 26vw, 15.5rem); font-weight: 800; letter-spacing: -0.045em; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .hero-unit { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 700; color: var(--hero-text-muted); padding-bottom: 0.22em; } .hero-sentence { display: block; font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin-top: 0.35rem; } .hero-sentence strong { font-weight: 800; } .hero-support { margin-top: var(--space-5); max-width: 42ch; font-size: 1.05rem; color: var(--hero-text-muted); } /* Quiet strip right under the hero: downloads arrive here, deliberately after the number, never as a button under it. See web-report-v2.md. */ .quiet-download { border-bottom: 1px solid var(--border); padding: var(--space-5) 0; } .quiet-download .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); } .quiet-download-note { font-size: 0.88rem; color: var(--text-muted); } .store-row { display: flex; flex-wrap: wrap; gap: var(--space-3); } .store-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; font-weight: 700; text-decoration: none; color: var(--text); padding: 0.4rem 0; } .store-link svg { width: 18px; height: 18px; flex: none; } .store-link .store-soon { font-weight: 500; color: var(--text-muted); } .store-link.is-disabled { cursor: default; } /* Store buttons used in the final CTA: same monochrome ink pill everywhere, no gradient outside the hero numeral. */ .store-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); } .store-btn { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.65rem 1.1rem 0.65rem 0.9rem; border-radius: var(--radius-md); background: var(--ink); color: var(--mist); text-decoration: none; min-width: 190px; transition: opacity 0.15s ease; } .store-btn:hover { opacity: 0.85; } .store-btn svg { flex: none; width: 24px; height: 24px; } .store-btn .store-text { display: flex; flex-direction: column; line-height: 1.15; } .store-btn .store-kicker { font-size: 0.66rem; opacity: 0.75; } .store-btn .store-name { font-size: 1rem; font-weight: 700; } .store-btn.is-disabled { pointer-events: none; } /* ---------- Sections: air and type, not cards ---------- */ section { padding: var(--space-8) 0; } /* Sections that continue the previous one's train of thought sit closer to it - varies the rhythm instead of repeating the same gap everywhere. */ .section-tight { padding-top: var(--space-6); } .section-statement { font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; max-width: 26ch; margin-bottom: var(--space-6); } /* Smaller lead-in for secondary sections, to keep the page from repeating the same big-statement rhythm on every section. */ .section-lead { font-size: 1.15rem; font-weight: 700; max-width: 32ch; margin-bottom: var(--space-5); } .section-note { margin-top: var(--space-5); max-width: var(--measure); color: var(--text-muted); font-size: 0.97rem; } .section-note a { color: var(--text); text-decoration-color: var(--border-strong); } /* ---------- Medication list mockup: the app's own grouped-list language ---------- */ .med-list { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .med-list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); } .med-list-who { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 0.95rem; } .avatar-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); display: inline-flex; align-items: center; justify-content: center; color: var(--mist); font-size: 0.8rem; font-weight: 800; flex: none; } .med-list-badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); } .med-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.1rem var(--space-3); padding: var(--space-4) var(--space-5); } .med-row + .med-row { border-top: 1px solid var(--border); } .med-row .name { font-weight: 700; font-size: 1rem; } .med-row .schedule { grid-column: 1; font-size: 0.86rem; color: var(--text-muted); margin-top: 0.1rem; } .med-row .value { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: baseline; gap: 0.3rem; justify-self: end; } .med-row .value .n { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; } .med-row .value .u { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); } .med-row .chevron { grid-column: 3; grid-row: 1 / span 2; color: var(--border-strong); font-size: 1.3rem; line-height: 1; } .med-row.is-out .value .n { color: var(--status-out); } .med-row.is-low .value .n { color: var(--status-low); } .med-row.is-ok .value .n { color: var(--status-ok); } .med-row .status-caption { grid-column: 1 / -1; font-size: 0.8rem; margin-top: 0.5rem; } .med-row.is-out .status-caption { color: var(--status-out); } .med-row.is-low .status-caption { color: var(--status-low); } .med-row.is-ok .status-caption { color: var(--text-muted); } .runway { grid-column: 1 / -1; margin-top: 0.55rem; height: 4px; border-radius: 999px; background: var(--runway-track); overflow: hidden; } .runway > span { display: block; height: 100%; border-radius: 999px; } .med-row.is-out .runway > span { background: var(--status-out); } .med-row.is-low .runway > span { background: var(--status-low); } .med-row.is-ok .runway > span { background: var(--status-ok); } /* ---------- Doctor message mockup ---------- */ .message-mock { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .message-mock-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); } .message-mock-body { padding: var(--space-5); } .message-mock-row { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-3); font-size: 0.88rem; padding: 0.4rem 0; } .message-mock-row + .message-mock-row { border-top: 1px solid var(--border); } .message-mock-row dt { color: var(--text-muted); font-weight: 700; } .message-mock-row dd { margin: 0; } .message-mock-text { margin-top: var(--space-4); font-size: 0.95rem; line-height: 1.6; } /* ---------- Travel example ---------- */ .travel-block { display: grid; gap: var(--space-3); padding: var(--space-5) 0; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); max-width: 34rem; } @media (min-width: 560px) { .travel-block { grid-template-columns: auto 1fr; align-items: baseline; } } .travel-dates { font-size: 1.1rem; font-weight: 800; white-space: nowrap; } .travel-dates .arrow { color: var(--text-muted); font-weight: 400; margin: 0 0.35rem; } .travel-result { font-size: 0.97rem; color: var(--text-muted); } .travel-result strong { color: var(--text); font-weight: 700; } /* ---------- Stat rows: numbers as list, not KPI tiles ---------- */ .stat-rows { display: grid; gap: 0; max-width: 46rem; } .stat-row { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--border); align-items: baseline; } .stat-row:first-child { border-top: none; } .stat-row .n { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; } @media (max-width: 480px) { .stat-row { grid-template-columns: 1fr; gap: 0.3rem; } } .stat-row .d { font-size: 0.95rem; color: var(--text-muted); } .stat-row .d strong { color: var(--text); font-weight: 700; } /* ---------- Privacy list ---------- */ .privacy-list { display: grid; gap: 0; max-width: 46rem; } .privacy-list li { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); font-size: 0.98rem; } .privacy-list li:first-child { border-top: none; } .privacy-list .mark { flex: none; font-weight: 800; color: var(--text); } /* ---------- Pricing ---------- */ .pricing-grid { display: grid; gap: var(--space-7); } @media (min-width: 760px) { .pricing-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } } .price-block h3 { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-strong); } .price-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); } .price-line:first-of-type { border-top: none; } .price-line .amount { font-size: 1.15rem; font-weight: 800; white-space: nowrap; } .price-line .period { font-size: 0.85rem; color: var(--text-muted); } .price-line.is-best .period::after { content: " · nejvýhodnější"; } html[data-lang="en"] .price-line.is-best .period::after { content: " · best value"; } .price-notes { margin-top: var(--space-4); display: grid; gap: 0.45rem; } .price-notes li { font-size: 0.92rem; color: var(--text-muted); padding-left: 1.1rem; position: relative; } .price-notes li::before { content: "\2022"; position: absolute; left: 0; color: var(--text-muted); } /* ---------- Disclaimer ---------- */ .disclaimer { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--space-5) 0; display: flex; gap: var(--space-3); align-items: flex-start; } .disclaimer svg { flex: none; width: 20px; height: 20px; color: var(--text-muted); margin-top: 0.2rem; } .disclaimer p { font-size: 0.9rem; color: var(--text-muted); max-width: 62ch; } .disclaimer strong { color: var(--text); } /* ---------- Final CTA ---------- */ .final-cta h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 800; letter-spacing: -0.015em; margin-bottom: var(--space-4); } .final-cta p { color: var(--text-muted); max-width: 48ch; margin-bottom: var(--space-6); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); padding: var(--space-7) 0 var(--space-6); } .footer-grid { display: grid; gap: var(--space-6); } @media (min-width: 760px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } } .footer-brand .brand { margin-bottom: var(--space-3); } .footer-brand p { color: var(--text-muted); font-size: 0.9rem; max-width: 32ch; } .footer-col h4 { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: var(--space-3); } .footer-col ul { display: grid; gap: 0.55rem; } .footer-col a { text-decoration: none; font-size: 0.94rem; } .footer-col a:hover { text-decoration: underline; } .footer-disclaimer { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text-muted); } .footer-disclaimer strong { color: var(--text); } .footer-bottom { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; font-size: 0.82rem; color: var(--text-muted); } /* ---------- Simple content pages (privacy / support) ---------- */ .page-hero { padding: var(--space-7) 0 var(--space-5); border-bottom: 1px solid var(--border); } .page-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.015em; margin-bottom: var(--space-3); } .page-hero p { color: var(--text-muted); max-width: 60ch; } .content { padding: var(--space-7) 0; } .content-grid { display: grid; gap: var(--space-8); } @media (min-width: 900px) { .content-grid { grid-template-columns: 220px 1fr; } } .toc { position: sticky; top: 90px; align-self: start; display: none; } @media (min-width: 900px) { .toc { display: block; } } .toc h2 { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: var(--space-3); } .toc ul { display: grid; gap: 0.5rem; border-left: 2px solid var(--border); } .toc a { display: block; padding: 0.15rem 0 0.15rem 0.9rem; font-size: 0.88rem; text-decoration: none; color: var(--text-muted); } .toc a:hover { color: var(--text); } .legal h2 { font-size: 1.25rem; font-weight: 800; margin: var(--space-7) 0 var(--space-3); letter-spacing: -0.01em; scroll-margin-top: 90px; } .legal h2:first-child { margin-top: 0; } .legal p, .legal li { color: var(--text-muted); font-size: 0.97rem; margin-bottom: var(--space-3); } .legal ul { padding-left: 1.1rem; list-style: disc; margin-bottom: var(--space-4); } .legal strong { color: var(--text); } .legal .callout { border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); padding: var(--space-4) 0; margin: var(--space-5) 0; } .legal .callout p:last-child { margin-bottom: 0; } .updated { font-size: 0.85rem; color: var(--text-muted); } .placeholder-value { display: inline-flex; align-items: baseline; gap: 0.4rem; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 0.15rem 0.55rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; } .placeholder-note { display: block; font-size: 0.72rem; color: var(--text-muted); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin-top: 0.35rem; } .support-grid { display: grid; gap: var(--space-6); } @media (min-width: 760px) { .support-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-7); } } .support-block h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: var(--space-2); } .support-block p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: var(--space-3); } .faq-item { border-top: 1px solid var(--border); padding: var(--space-5) 0; } .faq-item:first-child { border-top: none; padding-top: 0; } .faq-item h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: var(--space-2); } .faq-item p { color: var(--text-muted); font-size: 0.95rem; } @media (max-width: 480px) { .wrap { padding: 0 var(--space-4); } section { padding: var(--space-7) 0; } .hero { padding: var(--space-8) 0 var(--space-7); } }