html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
body {
display: flex;
background-color: #4a5560;
position: relative;
}
/* Instructions styling */
.instructions {
position: fixed;
top: 0;
right: 0;
width: 20%;
height: 100%;
background-color: #2d2d2d;
color: #e0e0e0;
font-family: Arial, sans-serif;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
z-index: 10;
}
.instructions h3 {
margin-top: 0;
margin-bottom: 15px;
border-bottom: 1px solid #555;
padding-bottom: 10px;
color: #3498db;
}
.instructions h3:not(:first-child) {
margin-top: 25px;
}
.instructions ol {
padding-left: 20px;
margin-top: 0;
}
.instructions ol li {
margin-bottom: 12px;
line-height: 1.4;
}
.instructions b {
color: #ffb74d;
font-weight: bold;
}
/* Full-screen hand photo container */
.hand-photo-container {
position: absolute;
top: 0;
left: 0;
width: 80%; /* Take up 80% of the width, leaving 20% for instructions */
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.hand-photo-wrapper {
position: relative;
width: 100%;
height: 100%;
display: block;
}
#hand-image {
width: 100%;
height: 100%;
object-fit: contain; /* was: cover */
display: block;
position: relative;
z-index: 1;
}
/* Resizable credit card container — offset DOWN past the top-left
(index) corner marker so the card box cannot occlude it */
.credit-card-container {
position: absolute;
top: 88px;
left: 20px;
z-index: 1000;
}
.credit-card-wrapper {
z-index: 1000;
position: relative;
width: 85.60mm; /* Standard credit card width */
resize: horizontal; /* Only allow horizontal resizing to maintain aspect ratio */
overflow: hidden;
}
/* Maintain credit card aspect ratio */
.credit-card-wrapper::before {
content: "";
display: block;
padding-bottom: calc(53.98 / 85.60 * 100%); /* Credit card aspect ratio (height/width) */
}
/* Solid color box instead of image */
.credit-card-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #1e1e1e; /* darkened from #3a3a3a */
border: none; /* removed white border */
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
/* Centered text inside credit card box */
.credit-card-text {
font-family: Arial, sans-serif;
font-size: 14px;
color: #888888;
text-align: center;
padding: 0 10px;
}
.credit-card-wrapper::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.3) 50%);
pointer-events: none;
}
/* Button styling */
.orientation-button {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 15px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
}
/* Orientation lock overlay */
.orientation-lock-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.95);
z-index: 2000;
display: none; /* Hidden by default */
justify-content: center;
align-items: center;
flex-direction: column;
}
.orientation-lock-content {
text-align: center;
color: #e0e0e0;
padding: 20px;
}
.rotate-icon {
font-size: 50px;
margin-bottom: 20px;
animation: rotate 2s infinite linear;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Remove max-width constraints for credit card */
.credit-card-wrapper {
position: relative;
width: 85.60mm; /* Starting width */
resize: both; /* Allow both horizontal and vertical resizing */
overflow: visible; /* Changed from hidden to allow unrestricted resizing */
max-width: none !important; /* Remove any max-width limitations */
min-width: 40mm; /* Minimum reasonable size */
}
/* Resize handle - default state */
.resize-handle {
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
background: linear-gradient(135deg, transparent 50%, #444444 50%);
cursor: se-resize;
z-index: 10;
touch-action: none;
transition: background 0.2s ease;
}
/* Resize handle - active/interacted state */
.resize-handle.has-been-resized {
background: linear-gradient(135deg, transparent 50%, #3498db 50%);
}
.resize-handle.is-resizing {
background: linear-gradient(135deg, transparent 50%, #e74c3c 50%);
}
/* For tablets specifically */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
.credit-card-wrapper {
max-width: none !important; /* Ensure no max-width on tablets */
max-height: none !important; /* Ensure no max-height on tablets */
}
}
/* Phone redirect overlay */
.phone-redirect-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #1a1a1a;
color: #e0e0e0;
z-index: 3000;
display: none;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.phone-redirect-content h2 {
color: #3498db;
margin-bottom: 20px;
}
/* Show phone redirect for screens smaller than 768px */
@media screen and (max-width: 767px) {
.phone-redirect-overlay {
display: flex !important;
}
.rotate-container {
display: none !important;
}
}
.corner-marker {
position: absolute;
width: 48px;
height: 48px;
z-index: 1100; /* above the card box (1000): the index marker
must stay visible even if layouts overlap */
pointer-events: none;
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* ArUco DICT_4X4_50 markers (auto-detected by measure.py).
ID 0 = INDEX-finger corner (top-left of the template), then IDs 1-3
CLOCKWISE. Keep this mapping in sync with Measure_Script. */
.corner-tl {
top: 0;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20width%3D%278%27%20height%3D%278%27%20fill%3D%27%23ffffff%27%2F%3E%3Cg%20fill%3D%27%23000000%27%3E%3Crect%20x%3D%271%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.corner-tr {
top: 0;
right: 0;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20width%3D%278%27%20height%3D%278%27%20fill%3D%27%23ffffff%27%2F%3E%3Cg%20fill%3D%27%23000000%27%3E%3Crect%20x%3D%271%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.corner-br {
bottom: 0;
right: 0;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20width%3D%278%27%20height%3D%278%27%20fill%3D%27%23ffffff%27%2F%3E%3Cg%20fill%3D%27%23000000%27%3E%3Crect%20x%3D%271%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.corner-bl {
bottom: 0;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20shape-rendering%3D%27crispEdges%27%3E%3Crect%20width%3D%278%27%20height%3D%278%27%20fill%3D%27%23ffffff%27%2F%3E%3Cg%20fill%3D%27%23000000%27%3E%3Crect%20x%3D%271%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%271%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%272%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%273%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%274%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%275%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%271%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%276%27%20width%3D%271%27%20height%3D%271%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
/* Card-box markers (IDs 4 left, 5 right). Centers sit at 15% / 85% of
the card width, so their center-to-center distance = 70% of the
calibrated 85.6mm card width. measure.py reconstructs the ruler from
the centers, so marker SIZE may change freely but the 15%/85% anchors
must stay in sync with CARD_MARKER in Measure_Script/config.py. */
.card-marker {
position: absolute;
top: 50%;
width: 26%;
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
z-index: 5;
pointer-events: none;
/* Hidden until the customer actually resizes the box: an un-resized
box is NOT calibrated (CSS mm are logical units, not physical
screen mm), and measure.py must never auto-trust its width. The
taped-card flow therefore photographs with no card markers and
falls back to manual ruler clicks on the physical card. */
display: none;
}
.card-marker-left { left: 15%; }
.card-marker-right { left: 85%; }
.credit-card-wrapper.card-calibrated .card-marker {
display: block;
}
/* Photo check (2026-10-22): the checker lives at gripgains.ca/photo-check.
A REQUIRED step since the same day (David: "more emphasis on 'check your
photo' since this is now a mandatory step"): the box leads the panel. */
.photocheck-required {
background: #3a2a0a;
border: 2px solid #ffb74d;
border-radius: 8px;
padding: 14px 14px 10px;
margin: 0 0 24px;
font-size: 15px;
line-height: 1.45;
}
.photocheck-required h3 {
color: #ffb74d;
border-bottom: none;
margin: 0 0 8px;
padding-bottom: 0;
font-size: 18px;
}
.photocheck-required p { margin: 0 0 12px; }
.photocheck-required b { color: #ffffff; }
.photocheck-button {
display: block;
width: 100%;
padding: 14px 10px;
background-color: #ffb74d;
color: #1a1a1a;
border: none;
border-radius: 6px;
font-size: 18px;
font-weight: bold;
text-align: center;
text-decoration: none;
box-sizing: border-box;
margin-bottom: 12px;
}
.photocheck-button:hover { background-color: #ffc870; color: #000; text-decoration: none; }
.photocheck-small { font-size: 13px; color: #c8c8c8; margin-bottom: 0 !important; }
.instructions ol a { color: #7cc4ff; }