/* remotefilename=/web/css/QSLplacard.css
 *
 *	Copyright © 2026 by FKE Internet.  All rights reserved.
 *
 *	$Id: /web/css/QSLplacard.css,v $
 */
/**
*	CSS rulesets for adding a "QSL" banner to a page
*
*	Author:			Fred Koschara
*	Creation Date:	March twenty-third, 2026
*	Last Modified:	April 6, 2026 @ 4:49 pm
*
*	Revision History:
*	   Date		  by		Description
*	2026/04/06	wfredk	original development
*		|		  |				|
*	2026/03/23	wfredk	original development
*/

/***** QSL banner on underlying page ******************************************/

.qslAckStringPostHr
{	margin:30px 0 50px;
}
.qslAckStringPreHr
{	margin:50px 0 30px;
}

.qslLogo
{	align-items:center;
	display:flex;
	flex:1 1 0;
	flex-direction:column;
	justify-content:justify;
	margin-left:auto;
	margin-right:auto;
	max-width:642px;			/* image width + padding + borders */
	min-width:0;
	padding:20px;
	text-align:center;
}
.qslLogoBlk
{	color:black;
}
.qslLogoHr
{	margin-top:30px;
	width:100%;
}
.qslLogoWht
{	color:white;
}

.qslLogoImage
{	cursor:pointer;
	margin:0 auto;
	transition:border-color .18s ease,
			   box-shadow .18s ease,
			   opacity .18s ease,
			   transform .18s ease;
}
.qslLogoImage:hover
{	opacity:.97;
	transform:scale(1.01);
}
.qslLogoImage img
{	display:block;
	height:auto;
	max-width:540px;
	width:100%;
}

.qslLogoHint					/* only shown when there's no hover (phones) */
{	display:none;
	font-size:0.5em;
	margin-top:0.35em;
	text-align:center;
}
@media (hover:none), (pointer:coarse)
{	.qslLogoHint
	{	display:block;
	}
}

/* light page */
.dvQslBrdBlk
{	border:1px solid black;
	padding:30px;
}
.dvQslBrdBlk.qslLogoImage:hover
{	box-shadow:0 0 8px rgba(0,0,0,.20);
	opacity:.97;
	transform:scale(1.01);
}
/* dark page */
.dvQslBrdWht
{	border:1px solid white;
	padding:30px;
}
.dvQslBrdWht.qslLogoImage:hover
{	box-shadow:0 0 8px rgba(255,255,255,.35);
	opacity:.97;
	transform:scale(1.01);
}

.dvQslNoBrdBlk,
.dvQslNoBrdWht
{	border:1px solid transparent;	/* reserve border space */
	padding:5px;
}
.dvQslNoBrdBlk.qslLogoImage:hover	/* light page */
{	border:1px solid black;
	box-shadow:0 0 8px rgba(0,0,0,.20);
}
.dvQslNoBrdWht.qslLogoImage:hover	/* dark page */
{	border:1px solid white;
	box-shadow:0 0 8px rgba(255,255,255,.35);
}

/* responsive behavior for small screens */
@media (max-width:600px)
{	.qslLogo
	{	order:2;
		text-align:center;
	}
}

/***** QSL dialog / lightbox **************************************************/

body.qslLbxOpen,
html.qslLbxOpen
{	height:100%;
	overflow:hidden;
}

.qslSpinnerOverlay
{	background:black url(/graphics/spinner.gif) no-repeat scroll center center;
	display:none;
	height:100dvh;
	left:0;
	position:fixed;
	top:0;
	width:100vw;
	z-index:100;
}

.qslLbxBackgnd
{	align-items:flex-start;
	background:rgba(0,0,0,.55);
	display:none;
	height:100dvh;
	justify-content:center;
	left:0;
	overflow:hidden;
	position:fixed;
	top:0;
	width:100vw;
	z-index:200;
}

.qslLightbox
{	background:#333;
	border:1px solid white;
	box-sizing:border-box;
	display:none;
	flex-direction:column;
	margin:40px auto;
	max-height:calc(100vh - 80px);	/* <- fallback, last valid line wins */
	max-height:calc(100dvh - 80px);	/* valid in newer browsers */
	max-width:90vw;
	overflow:hidden;
	padding:30px 25px 10px;
	position:relative;
	width:min(1100px,90vw);
	z-index:250;
}

.qslDialogContent
{	flex:1 1 auto;
	min-height:0;
	overflow:auto;
	overscroll-behavior:contain;
	padding-right:6px;
	-webkit-overflow-scrolling:touch;
}

.qslLbxClose
{	align-items:center;
	appearance:none;
	background:rgba(0,0,0,.4);
	border:1px solid rgba(255,255,255,.25);
	border-radius:8px;
	cursor:pointer;
	display:flex;
	font-size:28px;
	font-weight:bold;
	height:40px;
	justify-content:center;
	padding:0;
	position:absolute;
	right:8px;
	top:8px;
	transition:background .15s ease,
			   border-radius .15s ease,
			   transform .1s ease;
	width:40px;
	z-index:500;
}
.qslLbxClose:hover
{	background:rgba(255,255,255,.15);
	border-color:rgba(255,255,255,.6);
	border-radius:12px;
}
.qslLbxClose:focus
{	outline:2px solid yellow;
	outline-offset:2px;
}
.qslLbxClose:active
{	transform:scale(.95);
}

.pageBgLight .qslLbxClose
{	color:#333;
}
.pageBgLight .qslLbxClose:hover
{	color:black;
	background:rgba(0,0,0,.18);
}
.pageBgDark .qslLbxClose
{	color:#ccc;
}
.pageBgDark .qslLbxClose:hover
{	color:white;
	background:rgba(255,255,255,.15);
}

a.qslLink:link,
a.qslLink:visited
{	color:#99f;
	cursor:pointer;
	text-decoration:underline;
}
a.qslLink:hover
{	text-decoration:none;
}
a.qslLink:focus
{	outline:1px dotted white;
	outline-offset:2px;
}

/***** More Q-code Info expansion *********************************************/

.qslMoreInfoLeadHr
{	margin-bottom:0;
	margin-top:4em;
}
.qslMoreInfoHdr
{	align-items:center;
	display:flex;
	gap:0.75em;
	justify-content:flex-start;
}
.qslMoreInfoToggle
{	cursor:pointer;
	margin-left:auto;
}

.moreQcodeInfo
{	margin-top:2em;
}
.moreQcodeInfo.isHidden
{	display:none;
}

/***** generic styles included to ensure they exist ***************************/
.glueDown
{	margin-bottom:0;
}
.glueUp
{	margin-top:0;
}
.seeThru
{	background:none;
}
/* EOF: QSLplacard.css */