/* www.infinidesk.app Style Sheet. © Ben Shirt-Ediss, 2025 */

/* --- General Styles --- */

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	background-color: white;
	color: #666;
	font-family: "Nunito", sans-serif;
	font-weight: normal;
	font-size: 1rem;	/* 1rem=16px */
}

nav, aside, main, section, address {
	margin: 0;
	padding: 0;
}

form {
	margin: 0;
	padding: 0;	
}

a, a:hover, a:visited {
	text-decoration: underline;
	color: black;
}

h1 {
	font-size: 2.5rem;
	font-weight: normal;
	margin: 0;
	padding: 0;
	color: black;
}

h2 {	/* for other sections */
	font-size: 1.5rem;
	font-weight: normal;
	margin: 0;
	padding: 20px 0 10px 0;
	color: black;
}

h3 {
	font-size: 1.2rem;
	font-weight: normal;
	padding: 10px 0 10px 0;
	color: black;
}

video {
	width: 100%;
}	

.centralise {
	width: 800px;
	margin-left: auto;
	margin-right: auto;	
}

.error {
	background-color: #FEC5C5;
	border-left: 10px solid #ED0201;
	padding: 10px;
	color: black;
}

.error h2 {
	color: #ED0201;
	font-size: 1.1rem;
	padding: 0;
	margin: 0;
}

.error p {
	padding: 5px 0 0 0;
	margin: 0;
}






















/* --- Header --- */

header {
	position: sticky;
	z-index: 1000;
	top: 0;
	padding: 10px;
	margin: 0;
	background-color: white;
	box-shadow: 0 0 10px rgba(0,0,0,0.11);
	z-index: 1000;
	color: black;
}

.flex {				/* FLEX PARENT */
	display: flex;
	justify-content: space-between; 		/* push logo left, nav right */
	align-items: center;  					/* vertically centre */
}

#logo {				/* FLEX CHILD, FLEX PARENT */
	font-family: "Bai Jamjuree", sans-serif;
	font-size: 1.5rem;
	display: flex;				/* flex parent to logo image and title text */
	align-items: center;
	justify-content: left;
	gap: 20px;
}

#logo a {
	text-decoration: none;
	margin: 0;
	padding: 0;
}

#logo img {
	height: 70px;
}

#right {			/* FLEX CHILD, FLEX PARENT */
	display: flex;
	align-items: center;
	justify-content: right;
	gap: 20px;
}

#download_button {}

#download_button a {
	text-decoration: none;
	font-size: 1rem;
	font-weight: 300;
	color: white;
}

.download-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: 12px; /* rounded corners */
	background: linear-gradient(180deg, #2ecc71, #21a65b);
	text-decoration: none;
	border: none;
}

.download-btn img {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	display: block;
}

.download-btn:focus{
	outline: 3px solid rgba(33,166,91,0.18);
	outline-offset: 4px;
}

@keyframes jiggle {
	0%   { transform: translateX(0) rotate(0deg); }
	25%  { transform: translateX(-2px) rotate(-2deg); }
	50%  { transform: translateX(2px) rotate(2deg); }
	75%  { transform: translateX(-1px) rotate(-1deg); }
	100% { transform: translateX(0) rotate(0deg); }
}

.download-btn:hover{
	animation: jiggle 420ms ease-in-out;
}

#hamburger_menu {}

#hamburger_menu img {
	width: 45px;
	padding: 5px;
	cursor: pointer;
}

#hamburger_nav {
	display: none;
	margin-top: 20px;
	font-size: 1.1rem;
}

#hamburger_nav a {
	display: block;
	margin: 5px 0 0 0;
	padding: 3px 0 3px 0;
	color: #333;
	text-decoration: none;
}

#hamburger_nav a:hover {
	font-weight: bold;
}




























/* --- Tag Line --- */

#tagline, #tagline2 {
	width: 100%;
	padding: 40px 0 40px 0;
	text-align: center;
}

#tagline h1, #tagline2 h1 {
	white-space: nowrap;	/* don't break tagline sentence internally */
}






























/* --- Interactive Demo --- */

#desktop_viewport {
	width: 800px;
	height: 588px;
	margin-left: auto;
	margin-right: auto;	
}

#desktop {
	position: relative;		/* required for absolute positioning to work inside it */
	width: 800px;
	height: 588px;
	background-repeat: repeat;
	background-size: 500px 500px;
	background: linear-gradient(
		60deg,
		#f3a6b8,
		#f5b48a,
		#fbe29c
	);
	border-radius: 12px;
	transform-origin: top left;
	transition: transform 0.1s ease;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* -- mac menubar -- */
#mac_menubar {
	text-align: right;
	padding: 8px;
	backdrop-filter: blur(10px);
	background-color: rgba(200, 0, 0, 0.2);
	color: white;
	border-radius: 12px 12px 0 0;
}

#mac_menubar img {
	margin: 0;
	padding: 0 8px 0 8px;
	height: 14px;
}

#mac_menubar a#id_menu_title  {
	text-decoration: none;
	color: white;
	padding: 0px 8px 0 8px;
	border-radius: 4px
}

#time {
	padding-right: 5px;
}

/* -- faint id logo on desktop -- */
#desktop_id_logo {
	position: absolute;
	width: 350px;
	top: 200px;
	left: 220px;
	opacity: 0.09;
}

/* -- desktop item positions -- */
.di {
	position: absolute;
	width: 120px;				
	text-align: center;
	color: white;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.di p {
	margin: 0;
	padding: 2px;
}

.folder_alias img {
	width: 82px;
}

.folder img {
	width: 80px;
}

.sfolder img {
	width: 80px;
}

.file_alias img {
	width: 70px;
}

.file img {
	width: 60px;
}

.image img {
	width: 70px;
}

/* -- desktop 1 WORK -- */
#di_1_0 {
	display: none;
	top: 80px;
	left: 20px;
}

#di_1_1 {
	display: none;
	top: 80px;
	left: 185px;
}

#di_1_2 {
	display: none;
	top: 80px;
	left: 350px;
}

#di_1_3 {
	display: none;
	top: 80px;
	left: 650px;
}

#di_1_4 {
	display: none;
	top: 270px;
	left: 20px;
}

#di_1_5 {
	display: none;
	top: 270px;
	left: 185px;
}

#di_1_6 {
	display: none;
	top: 270px;
	left: 350px;
}

/* -- desktop 2 ADMIN -- */
#di_2_0 {
	display: none;
	top: 80px;
	left: 20px;
}

#di_2_1 {
	display: none;
	top: 80px;
	left: 170px;
}

#di_2_2 {
	display: none;
	top: 80px;
	left: 330px;
}

#di_2_3 {
	display: none;
	top: 80px;
	left: 480px;
}

#di_2_4 {
	display: none;
	top: 80px;
	left: 630px;
}

#di_2_5 {
	display: none;
	top: 290px;
	left: 20px;
}

#di_2_6 {
	display: none;
	top: 290px;
	left: 140px;
}

#di_2_7 {
	display: none;
	top: 440px;
	left: 140px;
}

#di_2_8 {
	display: none;
	top: 290px;
	left: 260px;
}

#di_2_9 {
	display: none;
	top: 440px;
	left: 20px;
}

/* -- desktop 3 EXTRA STUDY -- */
#di_3_0 {
	display: none;
	top: 150px;
	left: 50px;
}

#di_3_1 {
	display: none;
	top: 150px;
	left: 170px;
}

#di_3_2 {
	display: none;
	top: 320px;
	left: 50px;
}

#di_3_3 {
	display: none;
	top: 320px;
	left: 170px;
}

#di_3_4 {
	display: none;
	top: 150px;
	left: 500px;
}

#di_3_5 {
	display: none;
	top: 150px;
	left: 630px;
}

#di_3_6 {
	display: none;
	top: 320px;
	left: 565px;
}

/* -- desktop 4 PERSONAL -- */
#di_4_0 {
	display: none;
	top: 80px;
	left: 640px;
}

#di_4_1 {
	display: none;
	top: 250px;
	left: 640px;
}

#di_4_2 {
	display: none;
	top: 410px;
	left: 640px;
}

/* -- desktop 5 CREATIVE -- */
#di_5_0 {
	display: none;
	top: 60px;
	left: 30px;
}

#di_5_1 {
	display: none;
	top: 360px;
	left: 170px;
}

#di_5_2 {
	display: none;
	top: 260px;
	left: 280px;
}

#di_5_3 {
	display: none;
	top: 260px;
	left: 400px;
}

#di_5_4 {
	display: none;
	top: 360px;
	left: 500px;
}

#di_5_5 {
	display: none;
	top: 400px;
	left: 340px;
}

#di_5_6 {
	display: none;
	top: 60px;
	left: 640px;
}

/* -- infinidesk dropdown menu (z-index on top of desktop items) -- */
#id_menu {
	position: absolute;
	display: none;		/* displayed by js */
	/* top: 0; */		/* if top is not specified, it sits flush under mac_menubar */
	left: 480px;
	width: 290px;
	border-radius: 5px;
	backdrop-filter: blur(10px);
	background-color: rgba(0, 0, 0, 0.4);
	border: 1px solid #888;
	color: #888;
	padding: 3px;
}

#id_menu p {
	margin: 0;
	padding: 4px;
	color: #bfbfbf;
}

#id_menu a {
	display: block;
	margin: 0;
	padding: 4px;
	color: white;
	text-decoration: none;
	border-radius: 4px;
	border: 1px solid transparent;
}

#id_menu a:hover {
	background-color: #1859C2;
}

#id_menu .divider {
	border-top: 1px solid #888;
	margin: 2px 0 2px 0;
}

#id_menu img {
	margin: 0;
	padding: 0 5px 0 0px;
	height: 10px;
}

img#t0 { opacity: 1; }			/* initial menu tick state */
img#t1 { opacity: 0; }
img#t2 { opacity: 0; }
img#t3 { opacity: 0; }
img#t4 { opacity: 0; }
img#t5 { opacity: 0; }
img#t6 { opacity: 0; }
img#tquit { opacity: 0; }


/* -- try demo box -- */
#try_arrow {
	display: none;
	width: 60px;
	position: absolute;
	top: 30px;
	left: 515px;
	animation: bounce 0.4s infinite alternate;
}

@keyframes bounce {
	0% {
		transform: translateY(-7px);
	}
	100% {
		transform: translateY(0);
	}
}

#try_text {
	display: none;
	width: 280px;
	position: absolute;
	top: 130px;
	left: 395px;
	color: white;
	padding: 10px;
	border-radius: 12px;
	border: 2px solid white;
	font-size: 1.5rem;
	font-weight: normal;
	text-align: center;
}

#try_anim {
	display: none;
	width: 150px;
	position: absolute;
	top: 550px;
	left: 630px;
	color: white;
	text-align: center;
}

#try_anim a, #try_anim a:visited {
	text-decoration: underline;
	color: white;
	font-weight: bold;
}

/* -- javascript off -- */
#no_javascript {
	width: 100%;
	margin-top: 250px;
	font-size: 1.5rem;
	font-style: italic;
	text-align: center;
	color: whitesmoke;
}


































/* --- Download --- */

#download {
	scroll-margin-top: 100px;
	margin-top: 25px;
	text-align: center;
}

#download_button_main a {
	text-decoration: none;
	font-size: 1.2rem;
	font-weight: 300;
	color: white;
	margin: 30px 30px 10px 30px;
}

#download p {
	font-size: 1.3rem;
	margin: 3px;
}

#download p.version_details {
	font-size: 1em;
	font-weight: 600;
	color: #2ecc71;
	margin: 3px 3px 40px 3px;
	padding: 5px;

}

span.price {
	color: black;
	font-size: 1.6rem;
	font-weight: 700;
}

span.nob {
	white-space: nowrap;
}


#black_friday {
	margin-top: 50px;
	background-color: black;
	color: white;
	padding: 10px;
}

#black_friday h2 {
	color: white;
}

#black_friday .price {
	color: white;
}





















/* --- Featured On --- */

#featured_on {
	scroll-margin-top: 100px;
	margin-top: 100px;
	padding: 10px;
	text-align: center;
	background-image: url('/static/images/landing/stars.svg');
	background-repeat: repeat;
}

#featured_on img {
	height: 60px;
	width: auto;
	margin: 20px;
}

#featured_on .small_links a {
	font-size: 1.2rem;
	margin: 5px;
	display: inline-block;
	padding: 10px;
	background-color: #bfbfbf;
	color: #ffffff;
	text-decoration: none;
	border-radius: 12px;
	transition: background-color 0.3s;
}

#featured_on .small_links a:hover {
	background-color: #f2af0d;
}
























/* --- About --- */

#about {
	scroll-margin-top: 100px;
	margin-top: 100px;
	padding: 10px;
	text-align: center;
}

#about p {
	text-align: left;
	font-size: 1.2rem;
	padding: 20px 10px 40px 10px;
	margin: 0;
}

span.em {
	color: black;
	font-weight: 600;
}

#about img {
	width: 180px;
}

.gradient-border-button {
	font-family: "Nunito", sans-serif;  /* Need to re-declare font for Firefox */
	position: relative;
	padding: 24px 60px;
	font-size: 1.5rem;
	font-weight: normal;
	color: black;
	background-color: white;
	border-radius: 30px;
	cursor: pointer;
	overflow: hidden;
	z-index: 0;
	border: none;
	transition: font-size 0.3s ease;
}

.gradient-border-button::before {
	content: '';		/* Gradient border using pseudo-element */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px;
	border-radius: 30px;
	background: linear-gradient(90deg, #D92666, #E77433, #F2AF0D);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box, 
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	z-index: -1;
	box-sizing: border-box;
}

.gradient-border-button:hover {
	font-size: 1.7rem;
	font-weight: normal;
}





























/* --- Footer --- */

footer {
	margin-top: 50px;
	text-align: center;
	font-size: 0.9rem;
	border-top: 1px solid #ddd;
	background-color: #eee;
	padding: 20px 10px 10px 10px;
	color: black;
}

#footer_links a {
	margin: 5px;
	white-space: nowrap;
}

#socials {
	margin-top: 10px;
}

#socials a {
	text-decoration: none;
}

#socials img {
	width: 30px;
	margin: 10px;
}

#copyright {
	padding: 10px;
	font-size: 0.8em;
	color: #666;
}


/* -- contact us box -- */

#contact {
	display: none;
	width: 50%;
	margin: 20px auto 20px auto;
	padding: 5px;
	border-radius: 8px;
	min-width: 280px;
	border: 1px solid black;
	background-color: white;
	/*background: linear-gradient(
		60deg,
		#f3a6b8,
		#f5b48a,
		#fbe29c
	);*/
	font-size: 1rem;
}

#contact address {
	padding: 5px;
	font-style: normal;
}

#contact p {
	margin: 0;
	padding: 5px;
}

#copy_email {
	cursor: pointer;
	background: #eee;
	border: 1px solid #ccc;
	border-radius: 4px;
}

#copy_done_email {
	display: none;
	margin-left: 10px;
	color: green;
}































/* Site size adaptation -- media queries to modify CSS properties based on screen width 

- height of demo = site width / 1.36  (round up to nearest pixel)
- scale factor of demo transform = site width / 800  (as demo is specified at 800px x 588px)

Screen widths:
Small phones				320–375px
Standard phones				375–480px
Large phones / phablets		480–600px
Tablets (portrait)			600–768px
Tablets (landscape)			768–1024px
Small laptops				1024–1280px
Desktops					1280px and up

min-width: 301px = applied for screens over 300px wide
*/

@media (min-width: 300px) {			/* for extremely narrow screens */	
	#download_button {
		display: none;
	}
	#tagline h1 {
		font-size: 1.8rem;
	}
	.tagline_break {
		display: inline;
	}	
	.tagline_break2 {
		display: inline;
	}
	.tagline_break3 {
		display: inline;
	}	
	.centralise {
		width: 100%;
		margin: 0;
	}
	#desktop_viewport {
		width: 300px;
		height: 221px;
	}
	#desktop {
		transform: scale(0.375);
	}
	#app_info_narrow {
		display: block;
	}
	#app_info_wide {
		display: none;
	}
	.centralise2 {
		width: 100%;
		margin: 0;
	}
	video {
		border-radius: 0;
		border: 0;
	}
	#black_friday {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		border-radius: 0;
	}	
}


@media (min-width: 350px) {			/* most narrow screen in modern age */	
	#download_button {
		display: none;
	}
	#tagline h1 {
		font-size: 2rem;
	}
	.tagline_break {
		display: inline;
	}	
	.tagline_break2 {
		display: inline;
	}	
	.tagline_break3 {
		display: inline;
	}	
	.centralise {
		width: 100%;
		margin: 0;
	}
	#desktop_viewport {
		width: 350px;
		height: 258px;
	}
	#desktop {
		transform: scale(0.4375);
	}
	#app_info_narrow {
		display: block;
	}
	#app_info_wide {
		display: none;
	}
	.centralise2 {
		width: 100%;
		margin: 0;
	}
	video {
		border-radius: 0;
		border: 0;
	}
	#black_friday {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		border-radius: 0;
	}	
}


@media (min-width: 400px) {	
	#download_button {
		display: none;
	}
	#tagline h1 {
		font-size: 2.2rem;
	}
	.tagline_break {
		display: inline;
	}
	.tagline_break2 {
		display: inline;
	}	
	.tagline_break3 {
		display: inline;
	}	
	.centralise {
		width: 100%;
		margin: 0;
	}
	#desktop_viewport {
		width: 400px;
		height: 295px;
	}
	#desktop {
		transform: scale(0.5);
	}
	#app_info_narrow {
		display: block;
	}
	#app_info_wide {
		display: none;
	}
	.centralise2 {
		width: 100%;
		margin: 0;
	}
	video {
		border-radius: 0;
		border: 0;
	}	
	#black_friday {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		border-radius: 0;
	}
}


@media (min-width: 500px) {
	#download_button {
		display: none;
	}
	#tagline h1 {
		font-size: 2.4rem;
	}
	.tagline_break {
		display: inline;
	}	
	.tagline_break2 {
		display: inline;
	}	
	.tagline_break3 {
		display: none;
	}	
	.centralise {
		width: 100%;
		margin: 0;
	}
	#desktop_viewport {
		width: 500px;
		height: 368px;
	}
	#desktop {
		transform: scale(0.625);
	}
	#app_info_narrow {
		display: block;
	}
	#app_info_wide {
		display: none;
	}
	.centralise2 {
		width: 100%;
		margin: 0;
	}
	video {
		border-radius: 10px;
		border: 0;
	}	
	#black_friday {
		width: 400px;
		margin-left: auto;
		margin-right: auto;
		border-radius: 10px;
	}	
}


@media (min-width: 600px) {		/* first size where mobile friendly is not used */
	#download_button {
		display: flex;
	}
	#tagline h1 {
		font-size: 2.2rem;
	}
	.tagline_break {
		display: none;
	}	
	.tagline_break2 {
		display: inline;
	}	
	.tagline_break3 {
		display: none;
	}	
	.centralise {
		width: 600px;
		margin-left: auto;
		margin-right: auto;		
	}
	#desktop_viewport {
		width: 600px;
		height: 442px;
	}
	#desktop {
		transform: scale(0.75);
	}
	#app_info_narrow {
		display: none;
	}
	#app_info_wide {
		display: block;
	}
	.centralise2 {
		width: 520px;
		margin-left: auto;
		margin-right: auto;
	}
	video {
		border-radius: 10px;
		border: 0;
	}	
	#black_friday {
		width: 400px;
		margin-left: auto;
		margin-right: auto;
		border-radius: 10px;
	}	
}


@media (min-width: 700px) {
	#download_button {
		display: flex;
	}
	#tagline h1 {
		font-size: 2.5rem;
	}
	.tagline_break {
		display: none;
	}	
	.tagline_break2 {
		display: inline;
	}	
	.tagline_break3 {
		display: none;
	}	
	.centralise {
		width: 700px;
		margin-left: auto;
		margin-right: auto;		
	}
	#desktop_viewport {
		width: 700px;
		height: 515px;
	}
	#desktop {
		transform: scale(0.875);
	}
	#app_info_narrow {
		display: none;
	}
	#app_info_wide {
		display: block;
	}
	.centralise2 {
		width: 520px;
		margin-left: auto;
		margin-right: auto;
	}
	video {
		border-radius: 10px;
		border: 0;
	}
	#black_friday {
		width: 400px;
		margin-left: auto;
		margin-right: auto;
		border-radius: 10px;
	}	
}


@media (min-width: 800px) {	
	#download_button {
		display: flex;
	}
	#tagline h1 {
		font-size: 2.5rem;
	}
	.tagline_break {
		display: none;
	}
	.tagline_break2 {
		display: inline;
	}	
	.tagline_break3 {
		display: none;
	}	
	.centralise {
		width: 800px;
		margin-left: auto;
		margin-right: auto;		
	}
	#desktop_viewport {
		width: 800px;
		height: 588px;
	}
	#desktop {
		transform: scale(1);
	}
	#app_info_narrow {
		display: none;
	}
	#app_info_wide {
		display: block;
	}
	.centralise2 {
		width: 520px;
		margin-left: auto;
		margin-right: auto;
	}
	video {
		border-radius: 10px;
		border: 0;
	}
	#black_friday {
		width: 400px;
		margin-left: auto;
		margin-right: auto;
		border-radius: 10px;
	}	
}


@media (min-width: 1000px) {
	#download_button {
		display: flex;
	}
	#tagline h1 {
		font-size: 2.5rem;
	}
	.tagline_break {
		display: none;
	}
	.tagline_break2 {
		display: none;
	}		
	.tagline_break3 {
		display: none;
	}	
	.centralise {
		width: 1000px;			/* extra width, so site spills out each side of demo on larger screens */
		margin-left: auto;
		margin-right: auto;		
	}
	#desktop_viewport {
		width: 800px;
		height: 588px;
	}
	#desktop {
		transform: scale(1);
	}
	#app_info_narrow {
		display: none;
	}
	#app_info_wide {
		display: block;
	}
	.centralise2 {
		width: 520px;
		margin-left: auto;
		margin-right: auto;
	}
	video {
		border-radius: 10px;
		border: 0;
	}
	#black_friday {
		width: 400px;
		margin-left: auto;
		margin-right: auto;
		border-radius: 10px;
	}	
}