/* Wrapped in @layer site: unlayered rules outrank every cascade
   layer on the page, so this sheet was silently beating the
   framework and Common/style. In `site` it still wins over the
   framework, which is what it wants, without needing !important
   (the three it carried are gone with this change). */
@layer site {

/* $Id: style.css 3126 2012-10-10 22:37:34Z sdalu $ */

/*== My Face ===========================================================*/

#I {
	float:				right; 
    	max-width: 			8em;
    	max-height: 			8em;
    	margin-left: 			1em;
    	padding: 			3px;
    	border: 			1px solid silver;
	cursor:				help;
}



/*== Business Card =====================================================*/

/* Placement. This used to be jQuery UI's .position({ of: window }) and
 * a handful of inline styles set by script.js. Fixed rather than
 * absolute: the card's offset parent is #mxw-content, which is
 * position: relative, so page coordinates put the card a whole content
 * region too low.
 *
 * The card is not draggable any more, so nothing is left for JS to
 * compute — a translate centres it at every size, and the two max
 * bounds keep it inside a 320px viewport rather than hanging off an
 * edge with no way to drag it back. */
.business-card {
	position:			fixed;
	inset-block-start:		50%;
	inset-inline-start:		50%;
	translate:			-50% -50%;
	z-index:			2000;
	border:				1px solid grey;
	height:				277px;
	width:				430px;
	background-color:		black;
	color:				white;
	box-sizing:			border-box;
}

/* The card is a 430x277 graphic, not a layout: every part inside it is
 * absolutely positioned at a fixed offset, so capping its width cuts
 * the name in half and slides the photograph over the text rather than
 * reflowing anything. Below the widths where it fits it is scaled as a
 * whole, which is what you would do with a printed card. 344px at 0.8
 * clears a 390px screen; 280px at 0.65 clears a 320px one. */
@media (width < 30rem) {
	.business-card { scale: 0.8; }
}
@media (width < 22rem) {
	.business-card { scale: 0.65; }
}

.business-card .bc-mainpic {
	height:				265px;
	border:				1px solid white;
	position:			absolute;
	top:				5px;
	right:				5px;
}
.business-card .bc-strip {
        background-color:		rgb(58,58,54);
	width:				400px;
	height:				100px;
	position:			absolute;
	top:				26px;
}
.business-card .bc-contact {
        font-family: 			monospace;
	position:			absolute;
	top:				165px;
	left:				5px;
	font-size:			12px;
}
.business-card .bc-contact * {
	color:				white;
}
.business-card .bc-contact th {
        font-weight:			normal;
	-moz-user-select: 		none;
	-khtml-user-select: 		none;
}
.business-card .bc-contact a:after {
	content:			'';
}
.business-card .bc-sample {
	border-spacing:			8px;
	position:			absolute;
	top:				92px;
	left:				3px;
	-moz-user-select: 		none;
	-khtml-user-select: 		none;
}
.business-card .bc-sample img {
    	/* Sample photographs, not chrome: a 50x50 box with no
    	   object-fit STRETCHES them out of shape. contain keeps the
    	   frame and never crops or distorts the picture. */
    	height:				50px;
    	width:				50px;
    	object-fit:			contain;
}
.business-card .bc-name {
	position:			absolute;
	top:				30px;
	right:				200px;
	font-size:			30px;
	text-shadow:			2px 2px 2px #222222;
}
.business-card .bc-title {
	position:			absolute;
	top:				60px;
	right:				200px;
	font-size:			18px;
}
.business-card .bc-logo {
	padding-right:			5px;
	padding-top:			5px;
	vertical-align:			top;
}
.business-card .bc-logo a {
	text-decoration:		none;
}



/* The dimmer behind the card. Was Common/js/jquery.mask.js: a jQuery
 * plugin that appended a fixed div with an inline background of a
 * base64 dot pattern at 0.6 opacity over #666. Same look, in CSS, so
 * the script that shows it needs nothing but `hidden`. */
.bc-mask {
	position:			fixed;
	inset:				0;
	z-index:			500;
	opacity:			0.6;
	background:			#666 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAjElEQVRYw+3XOQ7AIAwFUZ/WN/D5E4UCibAElMJT/MIdoNeZsYi43uPunzO6N5s/7xkZ1wFpuAZIxFUgFVeAZNwWMBP3nDcybgkk4KZACm4IJOE6IA3XAIm4CqTiCpCMOwJmbRwj47aA2bvayLglkPLLMTWJmkRNoiZRk6hJ1CRqEjWJmkRNoiZJXIc3EUtNw8QymywAAAAASUVORK5CYII=") center center repeat;
}

/* The close badge. common.css draws .m-emblem.a-close as a 32x32 box
 * with process-stop.png as its background and the label span hidden —
 * a raster mark at one fixed size, blurry at 2x, and a request. Here it
 * is drawn instead: a disc with a ring and the multiplication sign, at
 * whatever resolution the screen has.
 *
 * The ring is what makes it readable over both the black card and the
 * page behind it, whichever the corner happens to overhang. */
.business-card .m-emblem.a-close {
	display:			grid;
	place-items:			center;
	background:			#1a1a1a;
	border:				2px solid #fff;
	border-radius:			50%;
	box-shadow:			0 1px 3px rgb(0 0 0 / 0.5);
	color:				#fff;
	font:				400 20px/1 system-ui, sans-serif;
	opacity:			1;
}

.business-card .m-emblem.a-close:hover,
.business-card .m-emblem.a-close:focus-visible {
	background:			#8c1c1c;
}

/* Selection. A business card is a picture of a card: dragging across it
 * should not paint half the layout blue. What a reader actually wants
 * off it is the four things they would copy from a real one — the name,
 * the web address, the mail address and the phone number — so those are
 * the only selectable parts.
 *
 * The labels are their own cells (<th>Web</th><th>:</th>), which is what
 * makes this a selector rather than a rewrite: taking td and leaving th
 * copies "www.alux-studio.com" and not "Web:". The logo shares the row
 * as a td, hence the :not(). */
.business-card {
	user-select:			none;
}

.business-card .bc-name,
.business-card .bc-contact td:not(.bc-logo) {
	user-select:			text;
}

}