/* assets/css/winroids.css * * Scoped under .winroids-hero and .winroids-page, apart from the lightbox rules * at the end: the theme appends its lightbox to , outside both. This file * is only loaded on the Winroids pages, so those rules cannot reach the rest of * the site either. */ /* Escapes the 1em padding-inline the theme puts on #main, which is what makes the * band reach the window edges at every width up to the theme's own 1280px cap. * Beyond that the band stops with #main, as the rest of the site does. */ .winroids-hero { margin-inline: -1em; margin-bottom: 2.5rem; overflow-x: hidden; } .winroids-hero__band { /* A scatter of faint stars over deep blue that darkens towards the edges: space, * but softer than flat black against a white page. */ background: radial-gradient(1px 1px at 12% 28%, rgba(255, 255, 255, 0.55), transparent), radial-gradient(1px 1px at 27% 72%, rgba(255, 255, 255, 0.35), transparent), radial-gradient(1.5px 1.5px at 41% 18%, rgba(255, 255, 255, 0.45), transparent), radial-gradient(1px 1px at 58% 84%, rgba(255, 255, 255, 0.4), transparent), radial-gradient(1px 1px at 73% 34%, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1.5px 1.5px at 86% 66%, rgba(255, 255, 255, 0.35), transparent), radial-gradient(1px 1px at 93% 14%, rgba(255, 255, 255, 0.45), transparent), radial-gradient(ellipse at 50% 40%, #243049 0%, #131a2a 55%, #0b0f18 100%); color: #fff; padding: 2.5rem 0 2rem; text-align: center; } .winroids-hero__text { max-width: 40rem; margin: 0 auto; padding: 0 1rem; } .winroids-hero__wordmark { margin: 0; font-size: 2.5rem; letter-spacing: 0.02em; color: #fff; } .winroids-hero__line { margin: 0.5rem 0 1.5rem; font-size: 1.1rem; color: #d8d8d8; } /* The theme's .btn sets its own colours; only the size is ours. */ .winroids-hero__cta { font-size: 1.1rem; } .winroids-page .winroids-shots { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; } .winroids-page .winroids-shots li { margin: 0; } .winroids-page figure { display: block; margin: 1.5rem 0; } /* The theme sets figures as flex rows and gives their images a 1em bottom margin. Here a * caption sits directly under its picture. */ .winroids-page figure img { display: block; max-width: 100%; height: auto; margin: 0; } .winroids-page figure > a { display: block; } .winroids-page figcaption { margin: 0.4rem 0 0; font-size: 0.85rem; line-height: 1.4; color: #6f777d; } /* Two frames of the same moment, one per sprite set. auto-fit rather than a fixed pair: * side by side is how a comparison reads, but two 800px shots squeezed into a phone's * width are too small to compare, and stacked they are still adjacent. */ .winroids-page .winroids-compare__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.75rem; } /* The inner figures are the two halves of one picture, so they carry no margin of their * own; the spacing belongs to the comparison around them. */ .winroids-page .winroids-compare__pair figure { margin: 0; } .winroids-page .winroids-compare__note { margin-top: 0.75rem; } /* The theme's lightbox (Magnific Popup) shows each picture on a near-black overlay, * where a black playfield has no visible edge. The panel it draws behind the image * is exactly the image's size, so a ring on it frames the picture. */ .mfp-figure::after { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 0 8px rgba(0, 0, 0, 0.6); } @media (max-width: 767px) { .winroids-hero__wordmark { font-size: 1.9rem; } .winroids-hero__line { font-size: 1rem; } }