/* * Mobile-first: base rules target small screens; @media widens up. * * This file only holds styling Ionic has no utility class or component * for (https://ionicframework.com/docs/layout/css-utilities) - layout * spacing, alignment, and responsive columns use Ionic's own classes/ * components directly in the templates instead (ion-padding, * ion-text-center, ion-grid/ion-row/ion-col, ion-button, etc.), and * colors use Ionic's theming CSS variables * (https://ionicframework.com/docs/theming) rather than hardcoded * values, so everything follows the light/dark palette * vendor/ionic/dark.class.css defines for .ion-palette-dark (toggled by * js/theme.js). Page-wide background/text color needs no rule here at * all: ionic.bundle.css already sets those on from the same * variables. */ .visually-hidden { /* No Ionic utility for this - it's a screen-reader-only visually hidden pattern, not a layout/spacing concern. */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { /* Off-screen until focused (Tab from page load lands here first), then pinned to the top so keyboard/screen-reader users can see where they are before jumping to #main-content. No Ionic utility/component covers this WCAG 2.4.1 "bypass blocks" pattern. */ position: absolute; top: -3rem; left: 0; z-index: 1000; padding: 0.6rem 1rem; background: var(--ion-color-primary, #3880ff); color: var(--ion-color-primary-contrast, #fff); transition: top 0.15s ease-in-out; } .skip-link:focus { top: 0; } .landing__hero { /* text-align:center is ion-text-center in the template; this vertical rhythm is deliberately larger than Ionic's fixed --ion-padding, so there's no exact utility for it. */ padding: 1.5rem 1rem; } .landing__hero h1 { font-size: 1.75rem; line-height: 1.2; margin-bottom: 0.5rem; } .landing__hero p { margin-bottom: 1.25rem; } .landing__features h2 { font-size: 1.1rem; margin-bottom: 0.4rem; } .landing__features article { /* ion-row's default align-items:stretch already makes every ion-col in a row match the tallest one's height - height:100% carries that down from the ion-col onto the visible bordered box, and the flex/justify-content centers title+body inside it, so cards with less text don't look short/empty next to a longer one. */ height: 100%; display: flex; flex-direction: column; justify-content: center; border-radius: 0.5rem; border: 1px solid var(--ion-color-light-shade, #d7d8da); } .landing__footer { /* padding/text-align are ion-padding/ion-text-center in the template. A muted tone comes from Ionic's own step color scale rather than opacity, so it stays a real, themed color in both palettes instead of a translucency hack. */ font-size: 0.85rem; color: var(--ion-color-medium, #92949c); } @media (min-width: 48rem) { .landing__hero h1 { font-size: 2.5rem; } } .options-demo__select { /* Plain /