/* */ .aero-grid { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 100%; } .aero-grid > div.text { margin: 0px 0px 0px 0px; padding: 8px 16% 8px 16%; } /* */ div.aero-grid-asset { margin: 0px 0px 0px 0px; padding: 8px 12% 8px 12%; background-size: contain; background-repeat: no-repeat; background-position: center; height: 600px; z-index: 2; /*overflow: auto;*/ } @media (orientation : landscape) { div.aero-grid-asset { height: 600px; padding: 8px 12% 8px 12%; } } @media (orientation : portrait) { div.aero-grid-asset { height: 320px; padding: 4px 0px 4px 0px; } } /* */ /* */ div.aero-grid[type = "metrics"] { margin: 0px 0px 0px 0px; padding: 8px 12% 8px 12%; display: inline-flex; background-color: black; z-index: 2; /*overflow: auto;*/ } div.aero-grid-metrics-item { flex: auto; padding: 20px; } div.aero-grid-metrics-item * { padding: 0px; margin: 0px; } div.aero-grid-metrics-item-value>span { vertical-align: baseline; color: #9fffa5; } div.aero-grid-metrics-item-value>span.modifier { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 64px; font-weight: normal; } div.aero-grid-metrics-item-value>span.number { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 64px; font-weight: bold; padding: 0px 4px 0px 4px; } div.aero-grid-metrics-item-value>span.unit { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 32px; font-weight: bold; } div.aero-grid-metrics-item-parameter { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 16px; font-weight: normal; padding: 8px; color: #6be8ea; } @media (orientation : landscape) { /* default */ div.aero-grid-metrics-item { border-left: 1px solid rgba(64, 64, 64, 0.92); } div.aero-grid[type = "metrics"]>div.aero-grid-metrics-item:first-child { border-left: none; } } @media (orientation : portrait) { div.aero-grid[type="metrics"] { display: flex; flex-wrap: wrap; } div.aero-grid-metrics-item { border-top: 1px solid rgba(64, 64, 64, 0.92); } div.aero-grid[type = "metrics"] > div.aero-grid-metrics-item:first-child { border-top: none; } } /* */ /*

*/ .aero-grid h1 { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: lighter; max-width: 92%; padding: 8px; border-radius: 4px; margin: 0px; z-index: 8; text-align: center; } @media (orientation : landscape) { .aero-grid h1{ font-size: 64px; line-height: 64px; } } @media (orientation : portrait) { aero-grid h1{ font-size: 48px; line-height: 48px; } } .aero-grid h1 > span.emphasis { font-weight: bold; } /*

*/ /*

*/ .aero-grid h2 { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 24px; line-height: 24px; font-weight: bold; max-width: 92%; padding: 8px; border-radius: 4px; /*white-space: nowrap;*/ margin: 0px; z-index: 6; text-align: center; } @media (orientation : landscape) { .aero-grid h2 { font-size: 24px; line-height: 24px; } } @media (orientation : portrait) { .aero-grid h2 { font-size: 20px; line-height: 20px; } } /*

*/ .aero-grid p { font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 20px; font-weight: normal; text-align: justify; z-index: 4; padding: 0px 0px 0px 0px; padding: 6px 6px 6px 8px; border-radius: 4px; margin: 0px; } .aero-grid > a { position: absolute; z-index: 10; overflow: hidden; padding: 12px 24px; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 20px; font-weight: normal; line-height: 16px; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; background-repeat: repeat-x; background-position: -1px -1px; background-size: 110% 110%; border: 1px solid rgba(240, 240, 255, 1.0); border-radius: 8px; appearance: none; /* appearance */ color: #ffffff; background-color: rgba(28, 77, 45, 0.16); background-image: linear-gradient(-180deg, rgb(46 46 46/ 52%) 0%, rgb(16 16 16/ 67%) 90%); backdrop-filter: blur(2px); text-decoration: none; } .aero-grid > a:hover { background-color: #269f42; background-image: linear-gradient(-180deg, #2fcb53 0%, #269f42 90%); background-position: -.5em; border-color: rgba(27, 31, 35, 0.5); text-decoration: none; } .aero-grid > a:focus { box-shadow: 0 0 0 0.2em rgba(52, 208, 88, 0.4); text-decoration: none; } .aero-grid > a:active { background-color: #279f43; background-image: none; border-color: rgba(27, 31, 35, 0.5); box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15); text-decoration: none; } @media (orientation : landscape) {} @media (orientation : portrait) { .aero-grid h1 { font-size: 32px; line-height: 32px; } .aero-grid h2 { font-size: 18px; line-height: 18px; } .aero-grid p { font-size: 16px; } } .aero-grid-paragraph { font-size: 16px; padding: 32px 0px 32px 0px; } /* */ /* */ /* */ /* */ .aero-grid[theme = "light"] { color: black; /*background-color: rgba(255, 255, 255, 0.24);*/ /*backdrop-filter: blur(12px);*/ /*text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.75);*/ /*text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75);*/ } .aero-grid[theme = "dark"] { color: white; /*background-color: rgba(0, 0, 0, 0.16);*/ /*backdrop-filter: blur(12px);*/ /*text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.75);*/ } /* */ /* */ .background-color { background-repeat: no-repeat; } .background-pic { background-repeat: no-repeat; background-size: cover; background-position: center; } /* */ .aero-grid-deck { left: 50%; position: relative; transform: translateX(-50vw); margin: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, auto)); /* flex-wrap: wrap; */ gap: 32px; align-items: center; } /* */ .aero-grid-card { width: 240px; aspect-ratio: 2.5 / 3.5; border: none; border-radius: 16px; box-shadow: 0px 0px 8px rgba(75, 75, 75, 0.532); } /* */