/* ============================================================================ Medaylo: vrstva úprav nad šablonou Around (Createx Studio, licencováno). Záměrně malé. Veškerá kompozice, mřížka, typografie, tlačítka, karty a animace jsou šablony. Tady je jen značka (barvy, písmo), přepínač jazyka a pár vlastních bloků, které šablona nemá: rámeček telefonu, seznam léků, ukázka zprávy lékaři, výpočet na cestu. Pravidlo pro budoucí úpravy: když něco jde vyjádřit třídami šablony, patří to do HTML, ne sem. Tenhle soubor nemá růst. ========================================================================= */ /* ---------- Inter, self-hosted (bez requestu na Google Fonts) ------------- Šablona si Inter tahá z fonts.googleapis.com. U appky, jejíž hlavní slib je "data nikam neodcházejí", by bylo divné posílat návštěvníka webu na cizí server. Dva soubory, oba nesou celou váhovou osu 100-900, latin-ext má českou diakritiku (č ř š ž ě ď ť ň ů). */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Značka ------------------------------------------------------- Šablona má primární zelenou #448c74. Medaylo má modrou z ikonky appky, zelenou jako doplněk (stav "v pořádku") a tmavou inkoustovou pro plné bloky. Proměnné --ar-primary-rgb stačí přebít tady, protože z nich šablona počítá .text-primary i .bg-faded-primary. Tlačítka si ale barvu drží v hodnotách napevno, ta se proto přepisuje níž zvlášť. */ :root { --ar-primary: #0d83f8; --ar-primary-rgb: 13, 131, 248; --medaylo-ink: #03132b; --medaylo-accent: #24c291; --medaylo-danger: #d92d20; --medaylo-warning: #b45309; } .bg-ink { background-color: var(--medaylo-ink) !important; } .text-ink { color: var(--medaylo-ink) !important; } .bg-accent { background-color: var(--medaylo-accent) !important; } .text-accent { color: var(--medaylo-accent) !important; } /* Světlý závoj pro dlaždice ikon na inkoustovém bloku. Šablona nabízí jen bg-faded-dark, ta by na tmavém podkladu zmizela. */ .bg-faded-light { background-color: rgba(255, 255, 255, .1) !important; } .btn-primary { --ar-btn-color: #fff; --ar-btn-bg: #0d83f8; --ar-btn-border-color: #0d83f8; --ar-btn-hover-color: #fff; --ar-btn-hover-bg: #0b6fd2; --ar-btn-hover-border-color: #0b6fd2; --ar-btn-focus-shadow-rgb: 13, 131, 248; --ar-btn-active-color: #fff; --ar-btn-active-bg: #0a63bb; --ar-btn-active-border-color: #0a63bb; --ar-btn-disabled-color: #fff; --ar-btn-disabled-bg: #0d83f8; --ar-btn-disabled-border-color: #0d83f8; } .btn-outline-primary { --ar-btn-color: #0d83f8; --ar-btn-border-color: #0d83f8; --ar-btn-hover-color: #fff; --ar-btn-hover-bg: #0d83f8; --ar-btn-hover-border-color: #0d83f8; --ar-btn-focus-shadow-rgb: 13, 131, 248; --ar-btn-active-color: #fff; --ar-btn-active-bg: #0d83f8; --ar-btn-active-border-color: #0d83f8; } /* ---------- Přepínání jazyka --------------------------------------------- Obě jazykové verze jsou v HTML naráz, skrývá se ta, která neodpovídá atributu . Jazykové spany vždycky vnořovat do skutečného prvku, ne je nechat volně v odstavci, jinak se skrývání projeví i na okolním textu. */ html[data-lang="cs"] [lang="en"] { display: none !important; } html[data-lang="en"] [lang="cs"] { display: none !important; } .lang-switch { display: inline-flex; padding: .2rem; border: 1px solid var(--ar-border-color); border-radius: 2rem; background: #fff; } .lang-switch button { appearance: none; border: 0; background: none; color: var(--ar-gray-700); font-size: .8125rem; font-weight: 600; line-height: 1; padding: .4rem .7rem; border-radius: 2rem; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .lang-switch button[aria-pressed="true"] { background: var(--medaylo-ink); color: #fff; } .lang-switch button:focus-visible { outline: 2px solid var(--ar-primary); outline-offset: 2px; } /* ---------- Střídané slovo v titulku ------------------------------------- Jen prolnutí, žádný posun ani přeskakování řádku. Délky variant se liší, takže se titulek přeskládá, prolnutí to ale drží v klidu. Obsluhu má site.js, ten při vypnutých animacích v systému střídání vůbec nespustí. */ .rotator { transition: opacity .3s ease; } .rotator.is-swapping { opacity: 0; } /* ---------- Skok na obsah ------------------------------------------------ */ .skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 2000; transform: translateY(-160%); transition: transform .15s ease; } .skip-link:focus { transform: translateY(0); } /* ---------- Inkoustový pruh v hlavičce na úzkém plátně ------------------- Sloupce s vlastnostmi jsou v mřížce Bootstrapu už roztažené od kraje ke kraji (záporné okraje řádku ruší odsazení kontejneru), takže stačí dát pozadí přímo jim. Hrana pak leží vždycky přesně tam, kde končí telefon, nezávisle na tom, jak dlouhé jsou texty nebo který jazyk je zapnutý. Nad lg si pruh bere šablona svým absolutně umístěným blokem. */ @media (max-width: 991.98px) { /* Od 576 px má kontejner pevnou šířku a sloupec už nesahá ke kraji okna. Pozadí proto kreslí pseudoprvek přetažený na obě strany. Sloupec má od šablony overflow: hidden (kvůli obrázkům telefonů, které jsou tady stejně skryté), ten by pseudoprvek ořízl, proto se pod lg vypíná. Přetažení na stranu by přidalo vodorovné rolování, to hlídá overflow-x na body. */ body { overflow-x: hidden; } .hero-features { position: relative; overflow: visible !important; padding-top: 3rem; } .hero-features::before { content: ""; position: absolute; top: 0; bottom: 0; background-color: var(--medaylo-ink); } /* Každý sloupec se přetahuje jen na svou stranu. Kdyby se oba táhly na obě, ten pozdější v pořadí by překreslil texty toho dřívějšího, protože jsou to obojí umístěné prvky a rozhoduje pořadí v dokumentu. Mezi 576 a 992 px stojí sloupce vedle sebe, každý si tak drží svou polovinu. Pod 576 px jsou pod sebou přes celou šířku, takže si nepřekáží. */ .hero-features-start::before { left: -100vw; right: 0; } .hero-features-end::before { left: 0; right: -100vw; } .hero-features > * { position: relative; } } /* Pod 576 px jsou sloupce pod sebou, druhý už odsazení shora nepotřebuje, jinak mezi druhou a třetí vlastností vznikne větší mezera než mezi ostatními. */ @media (max-width: 575.98px) { .hero-features-end { padding-top: 0; } } /* ---------- Rámeček telefonu --------------------------------------------- Šablona má rámeček zapečený v PNG. My máme skutečné snímky ze simulátoru bez rámečku, takže ho kreslíme kolem nich. Prostřední telefon dostane plný rámeček jako v šabloně, boční jen zaoblení a stín. Poměr stran snímků (1206x2622) odpovídá iPhonu, výška se dopočítá sama. */ .device-frame img { display: block; width: 100%; height: auto; border-radius: 1.75rem; } .device-frame:not(.device-frame-lead) img { box-shadow: 0 .9375rem 3rem -.5rem rgba(3, 19, 43, .18); } .device-frame-lead { max-width: 322px; padding: .5rem; background: linear-gradient(160deg, #2a3444, #0b1220 55%); border-radius: 2.5rem; box-shadow: 0 2rem 4rem -1rem rgba(3, 19, 43, .45); } .device-frame-lead img { border-radius: 2rem; } .device-frame-cta { max-width: 280px; } /* ---------- Seznam léků -------------------------------------------------- Vlastní blok: řádek nese název, rozvrh, zbývající dny, proužek zásoby a stavovou větu. Na širokém plátně dvousloupcová mřížka, na mobilu pod sebou. Barva proužku a čísla nese stav (dochází / málo / v pořádku). */ .avatar-dot { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--ar-primary); color: #fff; font-size: .8125rem; font-weight: 600; } .med-list .med-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name value" "schedule value" "bar bar" "status status"; gap: .15rem 1rem; padding: 1.15rem 1.5rem; border-top: 1px solid var(--ar-border-color); } .med-list .med-row:first-child { border-top: 0; } .med-name { grid-area: name; font-weight: 600; color: var(--medaylo-ink); } .med-schedule { grid-area: schedule; font-size: .875rem; color: var(--ar-gray-700); } .med-value { grid-area: value; align-self: center; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .med-value small { font-size: .8125rem; font-weight: 600; } .med-bar { grid-area: bar; display: block; height: 4px; margin-top: .7rem; border-radius: 2px; background: var(--ar-gray-200); overflow: hidden; } .med-bar > span { display: block; height: 100%; border-radius: 2px; background: currentColor; } .med-status { grid-area: status; margin-top: .55rem; font-size: .8125rem; } .med-row.is-out { color: var(--medaylo-danger); } .med-row.is-low { color: var(--medaylo-warning); } .med-row.is-ok { color: var(--medaylo-accent); } .med-row .med-status { color: inherit; } /* Stavová věta zůstává pod proužkem i na širokém plátně. Zkoušel jsem ji dát do sloupce vedle čísla dnů, jenže "Dochází, zpráva lékaři je připravená" se tam zalomí a mačká se o číslo. Pod proužkem má místo a čte se ve stejném pořadí jako v appce. */ @media (min-width: 576px) { .med-list .med-row { padding: 1.25rem 2rem; } } /* ---------- Ukázka zprávy lékaři ----------------------------------------- */ .message-mock { border: 1px solid var(--ar-border-color); background: var(--ar-gray-100); overflow: hidden; } .message-mock-head { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--ar-border-color); font-size: .8125rem; color: var(--ar-gray-700); } .message-mock-body { padding: 1.25rem; background: #fff; } .message-mock-subject { margin-bottom: .75rem; color: var(--medaylo-ink); } /* ---------- Vystačí mi léky do… ------------------------------------------ */ .travel-dates { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--medaylo-ink); } .travel-arrow { color: var(--ar-primary); margin: 0 .35rem; } .travel-list li { padding: .65rem 0; border-top: 1px solid var(--ar-border-color); color: var(--medaylo-warning); } .travel-list li strong { color: var(--medaylo-ink); margin-right: .4rem; } /* ---------- Soukromí a cena ---------------------------------------------- */ .privacy-list li, .price-notes li { display: flex; align-items: flex-start; gap: .65rem; padding: .5rem 0; } .privacy-list li i, .price-notes li i { margin-top: .15rem; flex-shrink: 0; } .price-figure { font-size: 3rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--medaylo-ink); font-variant-numeric: tabular-nums; } /* ---------- Upozornění, že to není zdravotnický prostředek --------------- */ .disclaimer { gap: .85rem; padding: 1.15rem 1.35rem; border-radius: .75rem; border-left: 3px solid var(--medaylo-warning); background: #fff7ed; color: #7c4a13; } .disclaimer i { font-size: 1.25rem; color: var(--medaylo-warning); } /* ---------- Odkazy do obchodů, dokud appka nevyšla ----------------------- Odznaky zůstávají vidět (jsou to jediné rozpoznatelné vodítko, kde appka bude), ale nedají se kliknout a nepředstírají funkční odkaz. */ .is-soon { position: relative; opacity: .75; cursor: default; pointer-events: none; }