/* ============================================================================= TELEHEALTH ICONS — 3D colour plates + living micro-animations ----------------------------------------------------------------------------- TWO PROBLEMS THIS FIXES 1. The colour was missing. The Command Center's primary tiles asked for classes `.cc-g1` … `.cc-g12` that were never defined anywhere on the page, so twelve carefully-chosen category colours rendered as identical flat blue squares. The care sections DID define `.g1` … `.g12`, but as bare one-line gradients — no highlight, no glow, so they read as coloured rectangles rather than the dashboard's little 3D app icons. 2. Nothing moved. The dashboard's tiles each breathe in a way that matches what they are — the flag waves, the heart beats, the compass turns. On telehealth every glyph sat perfectly still. THE PALETTE IS NOT NEW. These twelve gradients are the same twelve the patient dashboard uses (`.mc-g1` … `.mc-g12` in my_dashboard.html) and the same accent hexes the registry stores in `SECTION_ART`. Category 4 is green on the dashboard, green on the Command Center, green on its own hub, and green here. A patient learns a category by its colour once and then recognises it everywhere without reading — which is the entire point, and why the values below are duplicated deliberately rather than drifting. LOADS from base.html, so every telehealth page gets both. ========================================================================== */ /* ═══════════════════════════════════════════════════════════════════════════ 1. THE TWELVE — one variable pair per category. `-a` is the light stop, `-b` the dark stop, `-r` the raw r,g,b triplet the coloured drop-glow needs (you cannot put a hex inside rgba()). ══════════════════════════════════════════════════════════════════════════ */ :root { --g1a:#28BAED; --g1b:#2D86AD; --g1r:40,186,237; /* 01 Start Care */ --g2a:#7C5CE0; --g2b:#4E3BB8; --g2r:124,92,224; /* 02 Expert Oncology */ --g3a:#F2789F; --g3b:#C2447E; --g3r:242,120,159; /* 03 Precision & Genetics*/ --g4a:#34C77B; --g4b:#1B8F55; --g4r:52,199,123; /* 04 Navigation */ --g5a:#F5A623; --g5b:#E07B12; --g5r:245,166,35; /* 05 Remote Monitoring */ --g6a:#E85D5D; --g6b:#B83A3A; --g6r:232,93,93; /* 06 Supportive Care */ --g7a:#3AC6C0; --g7b:#1E8F8A; --g7r:58,198,192; /* 07 Rehabilitation */ --g8a:#934397; --g8b:#6B2D6E; --g8r:147,67,151; /* 08 Caregiver & Family */ --g9a:#5C8AE6; --g9b:#3557B0; --g9r:92,138,230; /* 09 Community */ --g10a:#B8B026; --g10b:#8A8410; --g10r:184,176,38; /* 10 Marketplace */ --g11a:#FF8C69; --g11b:#D95F3B; --g11r:255,140,105; /* 11 Outcomes & Trust */ --g12a:#6BC0F0; --g12b:#3D8FC4; --g12r:107,192,240; /* 12 Legal & Financial */ } /* ═══════════════════════════════════════════════════════════════════════════ 2. THE PLATE — what turns a coloured square into a little 3D app icon. Three things, all cheap: a diagonal gradient (the form), a top-edge white highlight (the light source, added as ::after so it never fights the gradient), and a drop shadow in the plate's OWN colour rather than generic grey (what actually makes it look like it is sitting above the card instead of printed on it). Applied to all three naming conventions in the codebase at once, so the Command Center, the care hubs, Start Care and the case summary all get the identical treatment without four copies of this rule. ══════════════════════════════════════════════════════════════════════════ */ .ic, .mc-ic, .cs-tile .ic, .cc-cat .ic, .cc-ptile .ic, .sc-card .ic { position: relative; isolation: isolate; } .ic::after, .mc-ic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 46%); pointer-events: none; } /* Each plate: gradient + its own coloured glow. `.g*` (care hubs), `.cc-g*` (Command Center) and `.mc-g*` (dashboard parity) all resolve here. */ .g1,.cc-g1,.mc-g1{background:linear-gradient(135deg,var(--g1a),var(--g1b));box-shadow:0 8px 18px rgba(var(--g1r),.38)} .g2,.cc-g2,.mc-g2{background:linear-gradient(135deg,var(--g2a),var(--g2b));box-shadow:0 8px 18px rgba(var(--g2r),.38)} .g3,.cc-g3,.mc-g3{background:linear-gradient(135deg,var(--g3a),var(--g3b));box-shadow:0 8px 18px rgba(var(--g3r),.38)} .g4,.cc-g4,.mc-g4{background:linear-gradient(135deg,var(--g4a),var(--g4b));box-shadow:0 8px 18px rgba(var(--g4r),.38)} .g5,.cc-g5,.mc-g5{background:linear-gradient(135deg,var(--g5a),var(--g5b));box-shadow:0 8px 18px rgba(var(--g5r),.38)} .g6,.cc-g6,.mc-g6{background:linear-gradient(135deg,var(--g6a),var(--g6b));box-shadow:0 8px 18px rgba(var(--g6r),.38)} .g7,.cc-g7,.mc-g7{background:linear-gradient(135deg,var(--g7a),var(--g7b));box-shadow:0 8px 18px rgba(var(--g7r),.38)} .g8,.cc-g8,.mc-g8{background:linear-gradient(135deg,var(--g8a),var(--g8b));box-shadow:0 8px 18px rgba(var(--g8r),.38)} .g9,.cc-g9,.mc-g9{background:linear-gradient(135deg,var(--g9a),var(--g9b));box-shadow:0 8px 18px rgba(var(--g9r),.38)} .g10,.cc-g10,.mc-g10{background:linear-gradient(135deg,var(--g10a),var(--g10b));box-shadow:0 8px 18px rgba(var(--g10r),.38)} .g11,.cc-g11,.mc-g11{background:linear-gradient(135deg,var(--g11a),var(--g11b));box-shadow:0 8px 18px rgba(var(--g11r),.38)} .g12,.cc-g12,.mc-g12{background:linear-gradient(135deg,var(--g12a),var(--g12b));box-shadow:0 8px 18px rgba(var(--g12r),.38)} /* The category cards keep using --accent for the card's border, the big faded number and the "Open" link — the plate is the only thing that graduates to a gradient (see the cc-g class added to the markup in command_center.html). */ /* ═══════════════════════════════════════════════════════════════════════════ 3. THE NAV — the four header tiles. The frosted glass squircle was already right (ported from the dashboard's header). What was missing is that its glyph was one flat teal for all four, so the bar read as a row of identical buttons. Each now carries its own gradient-filled glyph, using background-clip so the colour lives in the letterform itself rather than behind it. ══════════════════════════════════════════════════════════════════════════ */ .tele-appicon i { background-image: linear-gradient(145deg, var(--tia, #28BAED), var(--tib, #2D86AD)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; /* a whisper of the plate's colour underneath, so the glyph has depth rather than looking like a sticker */ filter: drop-shadow(0 1px 1px rgba(12,32,77,.18)); } /* Keyed to the glyph, NOT to the href. The "My Dashboard" tile resolves to a different URL for every role — patient_dashboard, moderator_dashboard, medical_professionals_dashboard, and registration_report for superusers, which does not even contain the word "dashboard". A URL-substring selector would have silently dropped the colour for exactly the people demoing it. */ .tele-appicon i.fa-gear { --tia:#8FA6C4; --tib:#4E6788; } /* quiet by design */ .tele-appicon i.fa-house-chimney-medical { --tia:#34C77B; --tib:#1B8F55; } /* telehealth green */ .tele-appicon i.fa-bell { --tia:#F5A623; --tib:#E07B12; } /* amber — a signal */ .iasa-theme-toggle i { color: #F5A623; } /* plain fill; this one is a button glyph */ /* Dark theme: the pale glass tile becomes a dark one, so the glyphs brighten to stay legible instead of sinking into it. */ html[data-theme="dark"] .tele-appicon { background: linear-gradient(145deg, rgba(40,60,96,.78), rgba(26,42,70,.52)); border-color: rgba(255,255,255,.14); box-shadow: 0 6px 16px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12); } html[data-theme="dark"] .tele-appicon i { filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)) brightness(1.15); } html[data-theme="dark"] .tele-appicon:hover { background: linear-gradient(145deg, rgba(52,78,120,.9), rgba(34,54,88,.7)); } /* ═══════════════════════════════════════════════════════════════════════════ 4. THE LIVING ICONS ----------------------------------------------------------------------------- Each animation says what the thing IS. The flag waves, the heart beats, the compass turns, the scales tip, the helix rotates. That is the whole trick — motion that means something is read as care; motion for its own sake is read as a screensaver, and on a cancer platform that difference matters. Keyed to the FontAwesome glyph class, not to a wrapper. That means an icon animates correctly everywhere it appears — Command Center, category hub, Start Care, case summary — with no template ever naming an animation, and a new tile that reuses an existing glyph inherits the right motion for free. THE RULES THIS OBEYS • Only inside an icon PLATE (.ic / .mc-ic / .tele-appicon). Icons in running text, buttons and empty states stay perfectly still. • Low amplitude, long period. Every one of these is slower than it feels like it should be, because twelve of them share a screen. • Deliberately mismatched durations (2.4s, 3.1s, 4.6s, 7s…) so they drift apart within seconds instead of pulsing in unison like a Christmas tree. • Transform and opacity only — no layout, no paint. Cheap on a laptop and on a phone battery. • A LOCKED tile never animates. Something that does not work yet must not look alive; see the guard at the end. ══════════════════════════════════════════════════════════════════════════ */ /* the plates that are allowed to animate at all */ .ic i, .mc-ic i, .tele-appicon i, .cs-tile .ic i, .cc-cat .ic i, .cc-ptile .ic i, .sc-card .ic i { display: inline-block; /* transforms need a block box */ will-change: transform; } /* 01 Start Care — the flag waves from its pole */ @keyframes tiWave { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-19deg)} 60%{transform:rotate(14deg)} } .ic i.fa-flag-checkered, .mc-ic i.fa-flag-checkered { animation: tiWave 2.4s ease-in-out infinite; transform-origin: bottom left; } /* A calm breath — for a lone clinician or camera glyph anywhere else. */ @keyframes tiBreathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.13)} } .ic i.fa-video, .ic i.fa-stethoscope, .mc-ic i.fa-stethoscope { animation: tiBreathe 3.8s ease-in-out infinite; } /* 02 Expert Oncology — the doctor and the video camera take turns. ----------------------------------------------------------------------------- The dashboard's own treatment for this category, and the only icon on the page that says two things at once — because the category IS two things: a real oncologist, reached over video. A single glyph has to pick one and loses half the meaning. Done with no template change at all. FontAwesome draws its glyph in the 's ::before, which leaves ::after free for a second glyph — the camera's own codepoint (\f03d) in the same font — stacked on top and crossfaded against it. So this works everywhere fa-user-doctor appears: the Command Center card, the category hub header, the case summary, and any tile added later that reuses the glyph. 5 seconds, with a long hold on each: it should read as "and also", not as a flicker. The two keyframe sets are exact mirrors, so one is always at full opacity and the plate never looks momentarily empty. */ @keyframes tiXfadeA { 0%,40%{opacity:1} 50%,90%{opacity:0} 100%{opacity:1} } @keyframes tiXfadeB { 0%,40%{opacity:0} 50%,90%{opacity:1} 100%{opacity:0} } .ic i.fa-user-doctor, .mc-ic i.fa-user-doctor { position: relative; } .ic i.fa-user-doctor::before, .mc-ic i.fa-user-doctor::before { animation: tiXfadeA 5s ease-in-out infinite; } .ic i.fa-user-doctor::after, .mc-ic i.fa-user-doctor::after { content: "\f03d"; /* fa-video */ font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; inset: 0; display: grid; place-items: center; animation: tiXfadeB 5s ease-in-out infinite; } /* 03 Precision & Genetics — the helix turns on its own axis */ @keyframes tiHelix { to { transform: rotateY(360deg); } } .ic i.fa-dna, .mc-ic i.fa-dna, .ic i.fa-microscope { animation: tiHelix 4.6s linear infinite; } /* 04 Navigation — the compass hunts for north, slowly and patiently */ @keyframes tiSpin { to { transform: rotate(360deg); } } .ic i.fa-route, .mc-ic i.fa-route, .ic i.fa-compass, .ic i.fa-map-location-dot { animation: tiSpin 9s linear infinite; } /* 05 Remote Monitoring — a trace crossing the screen, left to right */ @keyframes tiTrace { 0%{transform:translateX(-3.5px);opacity:.7} 50%{transform:translateX(3.5px);opacity:1} 100%{transform:translateX(-3.5px);opacity:.7} } .ic i.fa-wave-square, .mc-ic i.fa-wave-square, .ic i.fa-heart-pulse { animation: tiTrace 2.1s ease-in-out infinite; } /* 06 Supportive Care — the heartbeat. Two beats, then rest, like a real one */ @keyframes tiBeat { 0%,100%{transform:scale(1)} 14%{transform:scale(1.26)} 28%{transform:scale(1)} 42%{transform:scale(1.17)} 56%{transform:scale(1)} } .ic i.fa-hand-holding-heart, .mc-ic i.fa-hand-holding-heart, .ic i.fa-heart { animation: tiBeat 3.1s ease-in-out infinite; } /* 07 Rehabilitation — the lift, and the pause at the top */ @keyframes tiLift { 0%,100%{transform:translateY(0)} 45%{transform:translateY(-5px)} 55%{transform:translateY(-5px)} } .ic i.fa-dumbbell, .mc-ic i.fa-dumbbell, .ic i.fa-person-walking { animation: tiLift 2.8s ease-in-out infinite; } /* 08 Caregiver & Family — rocking, the way you hold someone */ @keyframes tiCradle { 0%,100%{transform:rotate(-9deg)} 50%{transform:rotate(9deg)} } .ic i.fa-hands-holding-child, .mc-ic i.fa-hands-holding-child, .ic i.fa-hands-holding { animation: tiCradle 3.6s ease-in-out infinite; transform-origin: top center; } /* 09 Community — a small gathering-in, people drawing closer */ @keyframes tiGather { 0%,100%{transform:translateY(0) rotate(0)} 25%{transform:translateY(-3.5px) rotate(-6deg)} 75%{transform:translateY(-3.5px) rotate(6deg)} } .ic i.fa-people-group, .mc-ic i.fa-people-group, .ic i.fa-users, .ic i.fa-comments { animation: tiGather 4.2s ease-in-out infinite; } /* 10 Marketplace — the shutter lifts, like a shop opening */ @keyframes tiBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} } .ic i.fa-store, .mc-ic i.fa-store, .ic i.fa-bag-shopping { animation: tiBob 3.4s ease-in-out infinite; } /* 11 Outcomes & Trust — the line climbs. It only ever goes up, on purpose */ @keyframes tiClimb { 0%{transform:translate(0,0);opacity:.75} 55%{transform:translate(3px,-3.5px);opacity:1} 100%{transform:translate(0,0);opacity:.75} } .ic i.fa-chart-line, .mc-ic i.fa-chart-line, .ic i.fa-chart-simple { animation: tiClimb 3.9s ease-in-out infinite; } /* 12 Legal & Financial — the scales settle, tip, and settle again */ @keyframes tiTip { 0%,100%{transform:rotate(0)} 40%{transform:rotate(-12deg)} 70%{transform:rotate(8deg)} } .ic i.fa-scale-balanced, .mc-ic i.fa-scale-balanced { animation: tiTip 5.2s ease-in-out infinite; transform-origin: top center; } /* 13 Innovation — the rocket lifts and hangs */ @keyframes tiThrust { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-5px) rotate(-7deg)} } .ic i.fa-rocket, .mc-ic i.fa-rocket { animation: tiThrust 4.4s ease-in-out infinite; } /* Documents and records — a page turning at the corner */ @keyframes tiPage { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-7deg)} } .ic i.fa-clipboard-list, .ic i.fa-file-lines, .ic i.fa-folder-open, .ic i.fa-notes-medical { animation: tiPage 4.8s ease-in-out infinite; transform-origin: bottom right; } /* Calendars and clocks — a quiet tick */ @keyframes tiTick { 0%,88%,100%{transform:rotate(0)} 94%{transform:rotate(10deg)} } .ic i.fa-calendar-days, .ic i.fa-calendar-check, .ic i.fa-clock { animation: tiTick 5.6s ease-in-out infinite; } /* Shields and consent — a slow protective pulse */ @keyframes tiGuard { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.11);opacity:.88} } .ic i.fa-shield-halved, .ic i.fa-lock-open, .ic i.fa-user-shield { animation: tiGuard 4.1s ease-in-out infinite; } /* ── The header tiles ────────────────────────────────────────────────────── Slower still. These are on every single page; anything lively here would become the most annoying thing in the product within a day. */ .tele-appicon i.fa-gear { animation: tiSpin 14s linear infinite; } /* The bell rings ONCE every 9 seconds and is still the rest of the time — and only when there is genuinely something unread. An always-ringing bell teaches people to ignore the bell. */ @keyframes tiRing { 0%,86%,100%{transform:rotate(0)} 89%{transform:rotate(11deg)} 92%{transform:rotate(-9deg)} 95%{transform:rotate(5deg)} } .tele-appicon:has(.tele-dot) i.fa-bell { animation: tiRing 9s ease-in-out infinite; transform-origin: top center; } .iasa-theme-toggle i.fa-sun { animation: tiSpin 26s linear infinite; } /* ── HOVER: the icon comes properly alive ──────────────────────────────────── The idle amplitudes above have to stay modest, because twelve of them share a screen and anything bigger would be a fairground. But the moment you point at ONE card, that constraint disappears — only one icon is being looked at. Halving the duration keeps the same motion and just quickens it, so the icon you are considering visibly responds to you while its eleven neighbours carry on breathing quietly. It also answers the honest complaint about subtle ambient motion: "is that even moving?" — hover, and there is no doubt. Not applied to locked cards: they must stay inert, hover or not. */ .cc-cat:not(.cc-cat--locked):hover .ic i, .cs-tile:not(.cs-locked):hover .ic i, .sc-card:hover .ic i, .mc-tile:hover .mc-ic i, .quick-tile:hover .ic i, .cc-ptile:not(.cc-locked):hover .ic i { animation-duration: .9s; } /* The two that already run a full 360° would look frantic at .9s; they get a gentler quickening instead. */ .cc-cat:not(.cc-cat--locked):hover .ic i.fa-route, .cc-cat:not(.cc-cat--locked):hover .ic i.fa-compass, .cs-tile:not(.cs-locked):hover .ic i.fa-route, .sc-card:hover .ic i.fa-route { animation-duration: 2.4s; } .cc-cat:not(.cc-cat--locked):hover .ic i.fa-dna, .cs-tile:not(.cs-locked):hover .ic i.fa-dna, .sc-card:hover .ic i.fa-dna { animation-duration: 1.6s; } /* Expert Oncology's crossfade lives on the pseudo-elements, so the boost rule above (which targets the ) never reaches it. Quickened to 1.8s here so you get one full doctor-to-camera swap while hovering — not so fast it strobes. */ .cc-cat:not(.cc-cat--locked):hover .ic i.fa-user-doctor::before, .cc-cat:not(.cc-cat--locked):hover .ic i.fa-user-doctor::after, .cs-tile:not(.cs-locked):hover .ic i.fa-user-doctor::before, .cs-tile:not(.cs-locked):hover .ic i.fa-user-doctor::after, .mc-tile:hover .mc-ic i.fa-user-doctor::before, .mc-tile:hover .mc-ic i.fa-user-doctor::after { animation-duration: 1.8s; } /* ═══════════════════════════════════════════════════════════════════════════ 5. WHERE MOTION MUST STOP ══════════════════════════════════════════════════════════════════════════ */ /* A locked tile is a promise, not a product. If its icon breathed like the live ones, the blur and the "Coming Soon" pill would be saying one thing while the motion said another — and the motion is what people believe. */ Every guard below names ::before and ::after as well as the element. The Expert Oncology crossfade runs on the pseudo-elements, so a guard that only said `i` would leave the doctor and the camera still swapping inside a locked card, on a live call, and for someone who has asked their operating system for less motion — which is the one that actually matters. */ .cc-cat--locked .ic i, .cc-cat--locked .ic i::before, .cc-cat--locked .ic i::after, .cc-ptile.cc-locked .ic i, .cc-ptile.cc-locked .ic i::before, .cc-ptile.cc-locked .ic i::after, .cs-locked .ic i, .cs-locked .ic i::before, .cs-locked .ic i::after, .ic i.fa-lock, .mc-ic i.fa-lock { animation: none !important; } /* A locked plate must show one glyph, not two ghosts fixed at half-fade. */ .cc-cat--locked .ic i::after, .cc-ptile.cc-locked .ic i::after, .cs-locked .ic i::after { display: none !important; } /* On a call, nothing decorative moves. */ body.iasa-immersive .ic i, body.iasa-immersive .ic i::before, body.iasa-immersive .ic i::after, body.iasa-immersive .tele-appicon i { animation: none !important; } @media (prefers-reduced-motion: reduce) { .ic i, .ic i::before, .ic i::after, .mc-ic i, .mc-ic i::before, .mc-ic i::after, .tele-appicon i, .iasa-theme-toggle i { animation: none !important; } /* With the crossfade stopped, both glyphs would sit on top of each other at whatever opacity they froze at. Hide the second one and let the doctor stand alone — the honest still frame. */ .ic i.fa-user-doctor::after, .mc-ic i.fa-user-doctor::after { display: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ /telehealth/me/ quick tiles — the same plates as everywhere else These nineteen tiles rendered one teal square nineteen times, on the one page a patient opens most. Colour is how somebody learns "the green one is my calendar" without reading, and it was the only surface not getting it. Sizing lives here because `.gN` supplies gradient and glow but never geometry — each host decides how big its own plate is. ══════════════════════════════════════════════════════════════════════════ */ .quick-tile .ic { width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } .quick-tile .ic i { font-size: 17px; color: #fff; line-height: 1; /* The plates elsewhere fill the glyph from a gradient; on a 17px icon inside a coloured plate, flat white simply reads better. */ background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); } /* ── The eight glyphs /telehealth/me/ introduced that nothing animated yet ── Same rule as the rest of this file: the motion has to MEAN the thing, or it is a screensaver. Durations are mutually prime-ish (3.3 / 4.1 / 5.2 / 6.7 …) so nineteen tiles never fall into step and start pulsing in unison. */ /* Care plans — the tick lands, then rests */ @keyframes tiTick { 0%,70%,100%{transform:scale(1)} 78%{transform:scale(1.16)} 86%{transform:scale(.96)} } .ic i.fa-clipboard-check { animation: tiTick 5.2s ease-in-out infinite; } /* Invoices — a bill set down on the desk */ @keyframes tiSettle { 0%,100%{transform:translateY(0) rotate(0)} 40%{transform:translateY(-2.5px) rotate(-3deg)} } .ic i.fa-file-invoice-dollar { animation: tiSettle 4.1s ease-in-out infinite; } /* Second opinion — a page turning toward you */ @keyframes tiPage { 0%,100%{transform:perspective(60px) rotateY(0)} 45%{transform:perspective(60px) rotateY(-26deg)} } .ic i.fa-file-medical { animation: tiPage 6.7s ease-in-out infinite; } /* Prescriptions — the bottle tipped and righted */ @keyframes tiTip { 0%,100%{transform:rotate(0)} 35%{transform:rotate(-13deg)} 55%{transform:rotate(6deg)} } .ic i.fa-prescription-bottle-medical { animation: tiTip 3.3s ease-in-out infinite; transform-origin: bottom center; } /* Skin check — the lens sweeps, looking for something */ @keyframes tiSearch { 0%,100%{transform:translate(0,0)} 25%{transform:translate(2px,-2px)} 50%{transform:translate(-1.5px,1.5px)} 75%{transform:translate(2px,1px)} } .ic i.fa-magnifying-glass { animation: tiSearch 4.9s ease-in-out infinite; } /* Wellness — it grows, from the soil up */ @keyframes tiGrow { 0%,100%{transform:scale(1) rotate(0)} 45%{transform:scale(1.09) rotate(4deg)} } .ic i.fa-seedling { animation: tiGrow 5.8s ease-in-out infinite; transform-origin: bottom center; } /* Ask a doctor — the tilt of someone asking */ @keyframes tiAsk { 0%,60%,100%{transform:rotate(0)} 72%{transform:rotate(11deg)} 84%{transform:rotate(-6deg)} } .ic i.fa-circle-question { animation: tiAsk 6.1s ease-in-out infinite; } /* Privacy & consents — a signature being written */ @keyframes tiSign { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-1.6px)} 60%{transform:translateX(1.6px)} } .ic i.fa-file-signature { animation: tiSign 3.7s ease-in-out infinite; } /* Prescriptions — two tablets, one settling a beat after the other */ @keyframes tiPills { 0%,100%{transform:rotate(0) translateY(0)} 40%{transform:rotate(-10deg) translateY(-1.5px)} 70%{transform:rotate(5deg)} } .ic i.fa-pills { animation: tiPills 4.4s ease-in-out infinite; }