/* Salterforth Nurseries stylesheet */
/* Created by Joe Haythornthwaite */
/* joe.haythornthwaite@gmail.com */
/* ©2026 All rights reserved */


/* Default styles */
:root {
	--scroll-offset:0px;
	--header-font:"Nunito Sans", sans-serif;
	--header-weight:700;
	--offset:0;
	font-family:Roboto, sans-serif;
	font-size:min(4.5454vmin, max(18px, 1.125vmax)); /* Mobile (1/22), Desktop, 4K (1/88.888) */
	font-weight:400;
	line-height:1.5;
	background-color:#000; }
@viewport {
	width:device-width; }
@-o-viewport {
	width:device-width; }
@-ms-viewport {
	width:device-width; }
* {
	border:0;
	margin:0;
	padding:0;
	text-decoration:none;
	vertical-align:baseline;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-tap-highlight-color:transparent;
	touch-action:manipulation; }
*:focus {
	outline:none; }
html, body {
	width:100vw;
	height:100dvh;
	margin:0;
	padding:0;
	background-color:#FFF;
	overflow:hidden;
	overscroll-behavior:none; }


/* Scrollable area */
#scrollWrapper {
	width:100vw;
	height:100dvh;
	display:flex;
	flex-direction:column;
	overflow-y:auto; }


/* Top buttons */
#top {
	top:0;
	left:0;
	width:100%;
	height:3.6rem;
	padding:0.1rem max(4%, 50% - 16.5rem);
	background:url(images/flowers.png)no-repeat top center/88.88rem auto,
		radial-gradient(circle at calc(50vw - 60vmax) -3rem, #EC08 0%, #EC00 40vmax),
		radial-gradient(circle at calc(50vw - 60vmax) -3rem, #EC04 0%, #EC00 60vmax),
		radial-gradient(circle at calc(50vw + 60vmax) -3rem, #F005 0%, #F000 35vmax),
		radial-gradient(circle at calc(50vw + 60vmax) -3rem, #F628 0%, #F620 60vmax),
		#282;
	position:sticky;
	justify-content:center;
	align-items:center;
	display:flex;
	z-index:2;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none; }
.button {
	height:3.6rem;
	margin:0 auto;
	color:#FFF;
	font-family:var(--header-font);
	font-weight:600;
	font-size:0.75rem;
	font-size:clamp(0.75rem, 3.4091vw, 1rem);
	text-align:center;
	line-height:1;
	opacity:0.5;
	display:inline-flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	white-space:nowrap;
	cursor:pointer; }
.active {
	opacity:1; }
.button img {
	width:calc(2.75rem - clamp(0.75rem, 3.4091vw, 1rem));
	height:calc(2.75rem - clamp(0.75rem, 3.4091vw, 1rem));
	margin-bottom:0.18rem;
	display:block; }


/* Viewer */
#view {
	height:min(75vw, 75vh, (100vh - 7.2rem));
	background-color:#8BBCF7;
	flex-shrink:0;
	position:relative;
	overflow:hidden;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
	touch-action:pan-y pinch-zoom; }
#banner {
	top:calc(2.2727vmin - 0.25rem + var(--scroll-offset));
	left:50%;
	transform:translateX(-50%);
	margin-top:min(3vh - 1rem, 0.25rem);
	padding:0.75rem 1rem 0.5rem;
	opacity:1;
	position:absolute;
	cursor:pointer; }
h3 {
	font-family:var(--header-font);
	font-weight:var(--header-weight);
	color:#FFF;
	font-size:max(1.75rem, 1.75rem + (100vmin - 22rem) / 20);
	text-align:center;
	line-height:1;
	text-shadow:0 0.05rem 0.125rem #BBC, 0 0.05rem 0.5rem #BBC;
	white-space:nowrap; }
#banner p {
	margin:0;
	color:#FFF;
	font-family:var(--header-font);
	font-weight:650;
	font-size:clamp(0.75rem, 3.0vmin, 1rem);
	text-align:center;
	text-shadow:0 0.05rem 0.125rem #AAB, 0 0.05rem 0.5rem #AAB; }
#mainImage {
	top:calc(50% + var(--scroll-offset));
	left:50%;
	transform:translate(-50%,-50%);
	position:absolute; }
#nextImage {
	top:calc(50% + var(--scroll-offset));
	left:50%;
	transform:translate(50%, -50%);
	position:absolute; }
@keyframes slideOutLeft {
	99.999% { transform:translate(calc(var(--offset) * -1px - 50%), -50%); }
	100% { transform:translate(50%, -50%); }}
@keyframes slideInRight {
	0% { transform:translate(calc(var(--offset) * 1px - 50%), -50%); }
	100% { transform:translate(-50%, -50%); }}
@keyframes slideOutRight {
	99.999% { transform:translate(calc(var(--offset) * 1px - 50%), -50%); }
	100% { transform:translate(50%, -50%); }}
@keyframes slideInLeft {
	0% { transform:translate(calc(var(--offset) * -1px - 50%), -50%); }
	100% { transform:translate(-50%, -50%); }}
#up {
	bottom:calc(0px - var(--scroll-offset));
	left:50%;
	width:clamp(100vw,225vh,225vw);
	transform:translateX(-50%);
	position:absolute;
	cursor:pointer; }
.arrow {
	top:var(--scroll-offset);
	height:100%;
	margin:0 calc(-10vw + 2.2rem);
	padding:0 calc(10vw - 2.2rem);
	position:absolute;
	cursor:pointer;
	display:none; }
.arrow + .arrow {
    right:0; }
#warning {
	top:var(--scroll-offset);
	width:100%;
	margin:0;
	padding:0.5em 0 1.5em;
	color:#FFF;
	font-size:clamp(0.75rem, 3.4091vw, 1rem);
	text-align:center;
	background-image:linear-gradient(to top, transparent, rgba(0,0,0,0.6));
	position:absolute;
	display:none; }
#line {
	bottom:0;
	width:100%;
	height:0.1rem;
	position:absolute; }


/* Page information */
.info {
	padding:0.69rem max(5%, 50% - 18rem) 2.5rem;
	background:#FFF;
	background-position:bottom;
	background-size:88.888rem;
	background-repeat:repeat;
	background-repeat:no-repeat;
	flex-grow:1;
	position:relative;
	display:none; }
.info > * {
	transition:opacity 0.15s linear; }
.hidden > * {
	opacity:0; }
.visible {
	display:block; }
h1 {
	font-family:var(--header-font);
	font-weight:var(--header-weight);
	color:#080;
	font-size:1.75rem;
	text-align:center;
	line-height:1.333;
	margin-bottom:0.4rem; }
p {
	font-size:1rem;
	font-weight:350;
	text-align:justify;
	margin-bottom:1rem; }
b {
	color:#080;
	font-weight:450; }
i {
	font-weight:400; }
#closures {
	color:#EA4335;
	font-weight:450; }
.yellow {
	color:#f4b400; }
.link, a {
	color:#33B;
	font-weight:450;
	cursor:pointer; }
#quote {
	color:#BBB;
	font-size:0.9rem;
	font-weight:400;
	text-align:center;
	text-wrap:balance;
	margin:1.05rem 0rem -1rem; }
.center {
	font-weight:400;
	text-align:center; }
.narrow {
	padding:0 calc(14% - 2.25rem);
	display:inline-block; }
.narrow p {
	text-align:left; }
#googlemap {
	width:100%;
	height:16rem;
	border:0.1rem solid #DDD;
	border-radius:0.5rem;
	margin-top:0.5rem; }
.shareButton {
	height:2.55rem;
	margin:1.5rem auto -0.55rem;
	padding:0.625rem 0.75rem 0;
	color:#BBB;
	line-height:1;
	background:#FFF;
	border:0.1rem solid #DDD; 
	border-radius:0.5rem;
	display:table;
	cursor:pointer; }
.shareButton img {
	width:1.125rem;
	vertical-align:-0.2rem; }
#stars {
	color:#f4b400;
	font-size:1.125rem;
	letter-spacing:0.0625rem; }
.info::selection {
	background-color:#282;
	color:#FFF; }


/* Footer */
#bottom {
	bottom:0;
	margin-top:auto;
	padding:0.39rem max(5%, 50% - 18rem) 0.25rem;
	text-align:center;
	background:#282;
	background:url(images/flowers.png)no-repeat bottom center/88.88rem auto,
		radial-gradient(circle at calc(50vw - 60vmax) 10rem, #22F2 0%, #22F0 35vmax),
		radial-gradient(circle at calc(50vw - 60vmax) 10rem, #22F6 0%, #22F0 60vmax),
		radial-gradient(circle at calc(50vw + 60vmax) 10rem, #EC08 0%, #EC00 40vmax), 
		radial-gradient(circle at calc(50vw + 60vmax) 10rem, #EC08 0%, #EC00 60vmax), 
		#282;
	position:relative;
	flex-shrink:0;
	display:inline-block; }
#bottom a {
	color:#FFF;
	font-family:var(--header-font);
	font-weight:var(--header-weight);
	font-size:1.75rem;
	text-align:center;
	text-decoration:none;
	padding:0.4rem 1rem;
	display:inline-block; }
#bottom p {
	color:#91C491;
	font-size:0.9rem;
	text-align:justify;
    text-align-last:center; }
#bottom::selection {
	background-color:#FFF;
	color:#080; }



/* Only show background images on desktop */
@media screen and (max-width:80rem) { .info { background:#FFF !important; }}