body {
min-height: 100vh;
font-family: "Roboto", Arial, sans-serif;
background: #f4f6f8;
color: #212529;
}
:root {
--bs-body-font-family: "Roboto", Arial, sans-serif;
--bs-border-radius: 0;
--bs-border-radius-sm: 0;
--bs-border-radius-lg: 0;
--bs-border-radius-xl: 0;
--bs-border-radius-xxl: 0;
--bs-border-radius-pill: 0;
}
*, *::before, *::after {
border-radius: 0 !important;
}
.site-header {
width: 100%;
background: linear-gradient(135deg, #181a1f, #22252c);
color: #fff;
}
.site-title {
font-size: 1.35rem;
font-weight: 700;
letter-spacing: .2px;
margin: 0;
line-height: 1.2;
color: #ffffffc7;
}
.brand-block {
color: inherit;
}
.brand-icon {
width: 48px;
height: 48px;
object-fit: contain;
flex: 0 0 auto;
margin-right: .75rem;
}
.navbar-toggler {
border-color: #ffffff40;
box-shadow: none !important;
}
.navbar-toggler:focus {
box-shadow: none;
}
.header-menu {
gap: .5rem;
}
.header-menu .nav-link {
color: #ffffffc7;
font-weight: 500;
padding-left: .85rem;
padding-right: .85rem;
}
.header-menu .nav-link:hover,
.header-menu .nav-link:focus {
color: #fff;
background: #ffffff14;
}
.hero-card,
.about-card,
.content-card {
border: 1px solid #e6e8ec;
overflow: hidden;
}
.qr-hero-card {
background: linear-gradient(180deg, #ffffff, #fbfcfd);
}
.hero-intro {
max-width: 780px;
}
.eyebrow {
color: #181a1f;
font-size: .82rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.qr-input-panel,
.qr-action-panel,
.qr-preview-panel,
.mini-info-card {
background: #f9fafb;
border: 1px solid #e6e8ec;
}
.qr-input-panel,
.qr-action-panel {
padding: 1.25rem;
}
.qr-left-stack {
display: grid;
gap: 1.25rem;
}
.qr-action-panel {
min-height: auto;
}
.form-label {
color: #181a1f;
font-weight: 800;
}
.form-control,
.form-select {
border-color: #d8dde5;
background-color: #fff;
color: #212529;
box-shadow: none !important;
}
.form-control:focus,
.form-select:focus {
border-color: #181a1f;
box-shadow: 0 0 0 .18rem rgba(24, 26, 31, .12) !important;
}
.qr-textarea {
min-height: 230px;
resize: vertical;
line-height: 1.6;
}
.input-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
margin-top: .75rem;
color: #6c757d;
font-size: .9rem;
}
.qr-actions {
display: grid;
gap: .75rem;
margin-top: 1.25rem;
}
.qr-actions-inline {
grid-template-columns: 1.25fr 1fr auto;
align-items: stretch;
}
.qr-actions-inline .btn {
width: 100%;
white-space: nowrap;
}
.btn {
font-weight: 800;
box-shadow: none !important;
}
.btn:disabled {
cursor: not-allowed;
opacity: .55;
}
.qr-status {
min-height: 3.25rem;
margin-top: 1rem;
padding: .85rem;
border: 1px solid #e6e8ec;
background: #fff;
color: #4b5563;
font-size: .94rem;
line-height: 1.45;
}
.qr-status.success {
color: #155724;
border-color: #badbcc;
background: #f0fff4;
}
.qr-status.error {
color: #842029;
border-color: #f5c2c7;
background: #fff5f5;
}
.qr-status.muted {
color: #6c757d;
}
.qr-preview-panel {
padding: 1.25rem;
}
.qr-preview-panel-side {
min-height: 100%;
position: sticky;
top: 1.25rem;
}
.qr-preview-header {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 1rem;
text-align: center;
}
.qr-preview-box {
min-height: 520px;
background: #fff;
border: 2px dashed #d1d5db;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
overflow: auto;
}
#qrCanvas {
display: none;
max-width: 100%;
height: auto;
background: #fff;
image-rendering: pixelated;
}
.qr-placeholder {
color: #6c757d;
font-size: .95rem;
text-align: center;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.mini-info-card {
padding: 1rem;
}
.mini-info-card h3 {
color: #181a1f;
font-weight: 800;
}
.step-list {
padding-left: 1.15rem;
}
.step-list li {
margin-bottom: .45rem;
}
.accordion-item {
border-color: #e6e8ec;
}
.accordion-button {
font-weight: 700;
}
.accordion-button:focus {
box-shadow: none;
}
.site-footer {
width: 100%;
background: #181a1f;
color: #ffffffb8;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: .5rem 1rem;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
}
.footer-links a {
color: #ffffffc7;
text-decoration: none;
font-size: .925rem;
}
.footer-links a:hover,
.footer-links a:focus {
color: #fff;
text-decoration: underline;
}
.back-to-top {
position: fixed;
right: 1rem;
bottom: 1rem;
width: 44px;
height: 44px;
border: 1px solid #ffffff33;
background: #181a1f;
color: #fff;
font-size: 1.35rem;
font-weight: 800;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 .75rem 1.5rem #11182730;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .18s ease, visibility .18s ease, transform .18s ease, background .18s ease;
z-index: 1030;
}
.back-to-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover,
.back-to-top:focus {
background: #2c3038;
}
@media (max-width: 991.98px) {
.header-navbar-row {
flex-wrap: wrap;
}
.site-title {
flex: 1 1 auto;
min-width: 0;
}
.navbar-toggler {
flex: 0 0 auto;
}
.navbar-collapse {
flex: 0 0 100%;
width: 100%;
margin-top: 1rem;
padding: .75rem;
background: #ffffff0f;
border: 1px solid #ffffff1a;
}
.header-menu {
width: 100%;
}
.header-menu .nav-link {
padding: .75rem .85rem;
}
.feature-grid {
grid-template-columns: 1fr;
}
.qr-actions-inline {
grid-template-columns: 1fr;
}
.qr-preview-panel-side {
position: static;
}
.qr-preview-header {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 575.98px) {
main.py-5 {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.site-title {
font-size: 1.12rem;
}
.qr-input-panel,
.qr-action-panel,
.qr-preview-panel {
padding: 1rem;
}
.qr-textarea {
min-height: 180px;
}
.input-meta {
align-items: flex-start;
flex-direction: column;
gap: .25rem;
}
.qr-preview-box {
min-height: 320px;
padding: .75rem;
}
.back-to-top {
right: .75rem;
bottom: .75rem;
width: 42px;
height: 42px;
}
}
.about-card p {
line-height: 1.8;
}
.step-list strong {
color: #181a1f;
}
.legal-page .content-card {
background: #fff;
}
.legal-content {
line-height: 1.8;
}
.legal-content .lead {
line-height: 1.75;
}
.policy-section {
margin-top: 2rem;
}
.policy-section h3 {
color: #181a1f;
font-size: 1.25rem;
font-weight: 800;
margin-bottom: .85rem;
}
.policy-section p:last-child {
margin-bottom: 0;
}
.legal-content a {
color: #181a1f;
font-weight: 700;
text-decoration: underline;
text-underline-offset: .16em;
}
.contact-panel {
border: 1px solid #e6e8ec;
background: #f9fafb;
padding: 1.25rem;
}
.contact-panel h3 {
color: #181a1f;
font-weight: 800;
}
.site-footer .small {
color: #ffffff91;
}
.flag-icon {
font-size: .95rem;
}
.language-name{display:none}
@media (max-width: 575.98px) {
.language-name{display:none}
}
.flag-icon{font-size:20px;line-height:1}
.language-name{display:none}
.flag-icon{font-size:20px;line-height:1}
.language-name{display:none}
.language-switcher{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:8px;overflow-x:auto;white-space:nowrap;padding:4px 0 8px;max-width:100%;scrollbar-width:thin}
.language-switcher a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;flex:0 0 auto;width:30px;height:30px;border-radius:999px}
.flag-icon{display:inline-block;font-size:18px;line-height:1}

.feature-list{padding-left:1.25rem}
.feature-list li{margin-bottom:.55rem}
.language-switcher .flag-icon{width:22px;height:16px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.28);background-size:cover}
.language-switcher a{overflow:hidden}