General UI Polish – Artifact Carousel tweaks

-Adjust curved clipper for taller spade/pyramid masks.
-Wonder graphics adjustments for moons petra/pyramids

Carousel items
- inset non-focused items with padding to shrink
- adjust vOffsets to match larger curve

Carousel
– Include 800 in shortmode limit (<=)
– Try dynamic bottom height, remove shortmode sizing.
– increase background radius, and remove curve flattening.

Tested on macOS, ipad pro (port/land), iphone 14 Pro, samsung active tab pro.

lib/styles/styles.dart

@@ -21,7 +21,7 @@ class AppStyle {
     } else if (screenSize > 1400) {
       scale = 1.15;
     } else if (screenSize > 1000) {
-      scale = 1.1;
+      scale = 1.25;
     } else if (screenSize > 800) {
       scale = 1;
     } else {

lib/ui/common/curved_clippers.dart

@@ -39,7 +39,7 @@ class ArchPoint {
 }
 
 List<ArchPoint> _getArchPts(Size size, ArchType type) {
-  double distanceFromTop = size.width / 3;
+  double distanceFromTop = size.width / 2.5;
   switch (type) {
     case ArchType.pyramid:
       return [

lib/ui/screens/artifact/artifact_carousel/artifact_carousel_screen.dart

@@ -51,8 +51,8 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
 
   @override
   Widget build(BuildContext context) {
-    bool shortMode = context.heightPx < 800;
-    final double bottomHeight = shortMode ? 240 : 340;
+    bool shortMode = context.heightPx <= 800;
+    final double bottomHeight = context.heightPx / 2.75; // Prev 340, dynamic seems to work better
     // Allow objects to become wider as the screen becomes tall, this allows
     // them to grow taller as well, filling the available space better.
     double itemHeight = (context.heightPx - 200 - bottomHeight).clamp(250, 400);
@@ -137,7 +137,7 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
   }
 
   OverflowBox _buildBgCircle(double height) {
-    const double size = 1500;
+    final double size = 2000;
     return OverflowBox(
       maxWidth: size,
       maxHeight: size,
@@ -146,7 +146,7 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
         child: Container(
           decoration: BoxDecoration(
             color: $styles.colors.offWhite.withOpacity(0.8),
-            borderRadius: BorderRadius.vertical(top: Radius.circular(size * .45)),
+            borderRadius: BorderRadius.vertical(top: Radius.circular(size)),
           ),
         ),
       ),

lib/ui/screens/artifact/artifact_carousel/widgets/_collapsing_carousel_item.dart

@@ -23,8 +23,8 @@ class _CollapsingCarouselItem extends StatelessWidget {
     // Calculate offset, this will be subtracted from the bottom padding moving the element downwards
     double vtOffset = 0;
     final tallHeight = width * 1.5;
-    if (indexOffset == 1) vtOffset = width * .4;
-    if (indexOffset == 2) vtOffset = width * .8;
+    if (indexOffset == 1) vtOffset = width * .5;
+    if (indexOffset == 2) vtOffset = width * .825;
     if (indexOffset > 2) vtOffset = width;
 
     final content = AnimatedOpacity(
@@ -32,13 +32,14 @@ class _CollapsingCarouselItem extends StatelessWidget {
       opacity: indexOffset.abs() <= 2 ? 1 : 0,
       child: _AnimatedTranslate(
         duration: $styles.times.fast,
-        offset: Offset(0, -tallHeight * .2 + vtOffset),
+        offset: Offset(0, -tallHeight * .25 + vtOffset),
         child: Center(
           child: AnimatedContainer(
             duration: $styles.times.fast,
             // Center item is portrait, the others are square
             height: indexOffset == 0 ? tallHeight : width,
             width: width,
+            padding: indexOffset == 0 ? EdgeInsets.all(0) : EdgeInsets.all(30),
             child: child,
           ),
         ),

lib/ui/wonder_illustrations/petra_illustration.dart

@@ -37,7 +37,7 @@ class PetraIllustration extends StatelessWidget {
       ),
       IllustrationPiece(
         fileName: 'moon.png',
-        initialOffset: Offset(0, -150),
+        initialOffset: Offset(0, 50),
         heightFactor: .15,
         minHeight: 50,
         alignment: Alignment.topCenter,

lib/ui/wonder_illustrations/pyramids_giza_illustration.dart

@@ -41,7 +41,7 @@ class PyramidsGizaIllustration extends StatelessWidget {
         enableHero: true,
         heightFactor: .15,
         minHeight: 100,
-        offset: config.shortMode ? Offset(120, context.heightPx * -.05) : Offset(120, context.heightPx * -.35),
+        offset: config.shortMode ? Offset(180, context.heightPx * -.09) : Offset(250, context.heightPx * -.3),
         zoomAmt: .05,
       ),
     ];