:root {
--ink: #0d1324;
--muted: #687187;
--blue: #2d63df;
--blue-dark: #184ebd;
--paper: #eef4ff;
--card: #ffffff;
--line: #e7ecf6;
--soft: #f7f9fe;
--radius: 28px;
--shadow: 0 18px 46px rgba(38, 69, 126, 0.14);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
color: var(--ink);
background:
linear-gradient(rgba(45, 99, 223, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(45, 99, 223, 0.055) 1px, transparent 1px),
var(--paper);
background-size: 38px 38px;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.has-page-video {
background: #050b16;
isolation: isolate;
}
.page-video-bg {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
background: #050b16;
}
.page-video-bg video {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.54;
filter: saturate(1.08) contrast(1.05);
}
.page-video-bg::after {
position: absolute;
inset: 0;
content: "";
background:
radial-gradient(circle at 16% 10%, rgba(45, 99, 223, 0.26), transparent 30%),
linear-gradient(180deg, rgba(5, 10, 20, 0.54), rgba(5, 10, 20, 0.72)),
linear-gradient(90deg, rgba(5, 10, 20, 0.72), rgba(5, 10, 20, 0.3) 50%, rgba(5, 10, 20, 0.78));
}
body.has-page-video .app-shell {
position: relative;
z-index: 1;
isolation: isolate;
}
body.has-page-video .site-header {
background: rgba(246, 249, 255, 0.78);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
button,
input,
textarea {
font: inherit;
}
a {
color: inherit;
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
.app-shell {
position: relative;
width: min(100%, 430px);
min-height: 100svh;
margin: 0 auto;
overflow: clip;
}
.site-header {
position: sticky;
top: 0;
z-index: 20;
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
padding: 14px 10px 13px;
background: rgba(246, 249, 255, 0.86);
border-bottom: 1px solid rgba(218, 226, 241, 0.72);
backdrop-filter: blur(20px);
}
.home-page .site-header {
background: linear-gradient(180deg, rgba(7, 14, 29, 0.28), rgba(7, 14, 29, 0.08));
border-bottom-color: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.brand-lockup {
display: flex;
align-items: center;
min-width: 0;
gap: 11px;
}
.brand-mark {
display: grid;
place-items: center;
width: 54px;
height: 54px;
overflow: hidden;
background: var(--card);
border-radius: 18px;
box-shadow: 0 12px 25px rgba(45, 99, 223, 0.12);
}
.brand-mark img {
width: 43px;
height: 43px;
object-fit: contain;
}
.brand-copy {
min-width: 0;
}
.brand-copy strong,
.brand-copy small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.brand-copy strong {
font-size: 15px;
line-height: 1.1;
}
.brand-copy small {
max-width: 150px;
margin-top: 4px;
color: var(--muted);
font-size: 10px;
}
.header-actions {
display: flex;
gap: 8px;
align-items: center;
}
.cart-pill,
.button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
cursor: pointer;
font-weight: 850;
}
.cart-pill {
gap: 9px;
min-height: 50px;
padding: 0 16px;
color: #fff;
background: linear-gradient(135deg, #3677ff, #164fbf);
border-radius: 24px;
box-shadow: 0 12px 28px rgba(45, 99, 223, 0.28);
}
.travel-pill {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 50px;
padding: 0 14px;
color: #071629;
overflow: hidden;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(226, 246, 255, 0.9)),
linear-gradient(135deg, #6ee7ff, #3b82f6 52%, #8b5cf6);
border: 1px solid rgba(88, 166, 255, 0.36);
border-radius: 24px;
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.18);
font-size: 12px;
font-weight: 900;
letter-spacing: -0.01em;
white-space: nowrap;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.travel-pill::before {
content: "";
position: absolute;
inset: -70% auto auto -40%;
width: 80%;
height: 220%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
transform: rotate(22deg) translateX(-120%);
animation: travel-pill-shine 4.2s ease-in-out infinite;
}
.travel-pill:hover,
.travel-pill:focus-visible {
border-color: rgba(59, 130, 246, 0.68);
box-shadow: 0 16px 34px rgba(37, 99, 235, 0.28);
transform: translateY(-1px);
}
.travel-pill:active {
transform: scale(0.95);
}
.travel-pill-icon,
.travel-pill-text {
position: relative;
z-index: 1;
}
.travel-pill-icon {
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.74);
border-radius: 999px;
filter: drop-shadow(0 5px 10px rgba(37, 99, 235, 0.18));
}
@keyframes travel-pill-shine {
0%, 58% { transform: rotate(22deg) translateX(-130%); }
76%, 100% { transform: rotate(22deg) translateX(260%); }
}
.cart-pill strong {
display: grid;
place-items: center;
min-width: 28px;
height: 28px;
color: #dce8ff;
background: rgba(255, 255, 255, 0.15);
border-radius: 99px;
}
.menu-toggle {
position: relative;
display: grid;
place-items: center;
width: 50px;
height: 50px;
padding: 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 17px;
box-shadow: 0 10px 23px rgba(16, 42, 91, 0.1);
transition: background 180ms ease, border-color 180ms ease,
box-shadow 180ms ease, transform 180ms ease;
}
.menu-toggle:active {
transform: scale(0.94);
}
.menu-toggle:hover {
border-color: rgba(45, 99, 223, 0.35);
}
.menu-toggle.is-open {
background: linear-gradient(135deg, #3677ff, #164fbf);
border-color: transparent;
box-shadow: 0 12px 24px rgba(45, 99, 223, 0.28);
}
/* The three bars morph into an X when the menu is open. */
.menu-toggle span {
position: absolute;
left: 50%;
width: 22px;
height: 2px;
background: var(--ink);
border-radius: 99px;
transform-origin: center;
transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1),
opacity 220ms ease, top 320ms cubic-bezier(0.65, 0, 0.35, 1),
background 180ms ease;
}
.menu-toggle span:nth-child(1) { top: 16px; transform: translateX(-50%); }
.menu-toggle span:nth-child(2) { top: 24px; transform: translateX(-50%); }
.menu-toggle span:nth-child(3) { top: 32px; transform: translateX(-50%); }
.menu-toggle.is-open span {
background: #fff;
}
.menu-toggle.is-open span:nth-child(1) {
top: 24px;
transform: translateX(-50%) rotate(45deg);
}
.menu-toggle.is-open span:nth-child(2) {
opacity: 0;
transform: translateX(-50%) scaleX(0);
}
.menu-toggle.is-open span:nth-child(3) {
top: 24px;
transform: translateX(-50%) rotate(-45deg);
}
/* Mobile nav: animated in/out using transform + opacity, so we can
stagger the link entrance and play a smooth exit on close. */
.mobile-nav {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
padding-top: 10px;
/* Closed state */
opacity: 0;
transform: translateY(-8px) scaleY(0.92);
transform-origin: top center;
pointer-events: none;
max-height: 0;
overflow: hidden;
filter: blur(4px);
transition:
opacity 260ms ease,
transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
filter 260ms ease,
max-height 360ms cubic-bezier(0.22, 1, 0.36, 1),
padding-top 260ms ease;
}
.mobile-nav.is-open {
opacity: 1;
transform: translateY(0) scaleY(1);
pointer-events: auto;
max-height: 600px;
filter: blur(0);
padding-top: 10px;
}
.mobile-nav a {
padding: 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
color: #25314e;
font-size: 13px;
font-weight: 800;
text-align: center;
opacity: 0;
transform: translateY(8px);
transition:
transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 320ms ease,
background 180ms ease,
border-color 180ms ease,
color 180ms ease;
}
/* Stagger each link in based on its position in the grid. */
.mobile-nav.is-open a {
opacity: 1;
transform: translateY(0);
transition-delay: calc(var(--i, 0) * 55ms + 120ms);
}
.mobile-nav a:hover,
.mobile-nav a:focus-visible {
background: linear-gradient(135deg, #3677ff, #164fbf);
border-color: transparent;
color: #fff;
}
.mobile-nav a:active {
transform: scale(0.97);
}
main {
padding-bottom: 42px;
}
.hero-section {
padding: 32px 8px 34px;
}
.poster-card {
padding: 23px 21px 19px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(245, 249, 255, 0.95));
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.poster-card h1 {
display: grid;
margin: 0;
font-family: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: clamp(31px, 10vw, 42px);
font-weight: 800;
line-height: 0.92;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.poster-card h1 span {
display: block;
}
.poster-card h1 em {
color: #e2573d;
font-style: normal;
}
.poster-card .script {
margin-bottom: 3px;
font-family: "Caveat", "Comic Sans MS", "Trebuchet MS", cursive;
font-size: clamp(34px, 11vw, 48px);
font-weight: 700;
line-height: 0.95;
letter-spacing: 0;
text-transform: none;
}
.poster-card .accent {
color: #e2573d;
}
.hero-actions {
display: grid;
gap: 14px;
margin-top: 25px;
}
/* ---------- Scrollytelling home page ---------- */
.story-home {
position: relative;
padding-bottom: 24px;
background: #08111f;
isolation: isolate;
}
.story-background {
position: sticky;
top: 0;
z-index: 0;
height: 100svh;
min-height: 680px;
margin-bottom: -100svh;
overflow: hidden;
pointer-events: none;
background: #08111f;
}
.story-background-slide,
.story-background-scrim {
position: absolute;
inset: 0;
}
.story-background-slide {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.05);
transition: opacity 850ms ease, transform 1800ms ease;
will-change: opacity, transform;
}
.story-background-slide.is-active {
opacity: 1;
transform: scale(1);
}
.story-background-scrim {
z-index: 1;
background:
linear-gradient(180deg, rgba(5, 10, 20, 0.52), rgba(5, 10, 20, 0.12) 34%, rgba(5, 10, 20, 0.72)),
linear-gradient(90deg, rgba(5, 10, 20, 0.74), rgba(5, 10, 20, 0.18) 48%, rgba(5, 10, 20, 0.78)),
radial-gradient(circle at 24% 18%, rgba(45, 99, 223, 0.2), transparent 34%);
}
.story-panel {
position: relative;
z-index: 1;
display: grid;
min-height: 92svh;
padding: 28px 12px;
}
.story-panel--hero {
min-height: calc(100svh - 82px);
padding-top: 44px;
}
.home-page .story-panel--hero {
min-height: 100svh;
padding-top: 20px;
}
.story-panel--left {
justify-items: start;
align-items: center;
}
.story-panel--right {
justify-items: end;
align-items: center;
}
.story-panel--center,
.story-panel--hero {
justify-items: center;
align-items: end;
}
.story-panel-card {
position: relative;
width: min(100%, 358px);
padding: 23px 20px 21px;
overflow: hidden;
color: #fff;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07)),
rgba(8, 17, 31, 0.48);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 34px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.36);
backdrop-filter: blur(20px) saturate(1.15);
}
.story-panel-card::before {
position: absolute;
inset: 1px;
pointer-events: none;
content: "";
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: inherit;
}
.story-panel-card--hero,
.story-panel-card--dark {
background:
radial-gradient(circle at 88% 12%, rgba(226, 87, 61, 0.28), transparent 30%),
linear-gradient(145deg, rgba(10, 19, 36, 0.78), rgba(10, 19, 36, 0.48));
}
.story-kicker {
display: inline-flex;
align-items: center;
min-height: 27px;
padding: 0 11px;
color: #e8f0ff;
background: rgba(255, 255, 255, 0.13);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
font-size: 10px;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.story-panel-card h1 {
display: grid;
margin: 17px 0 0;
font-family: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, sans-serif;
font-size: clamp(39px, 12.5vw, 58px);
font-weight: 800;
line-height: 0.88;
letter-spacing: -0.055em;
text-transform: uppercase;
}
.story-panel-card h1 span {
display: block;
}
.story-panel-card h1 em,
.story-panel-card .accent {
color: #ff826d;
font-style: normal;
}
.story-panel-card .script {
font-family: "Caveat", "Comic Sans MS", "Trebuchet MS", cursive;
font-size: clamp(43px, 14vw, 66px);
font-weight: 700;
line-height: 0.84;
letter-spacing: 0;
text-transform: none;
}
.story-panel-card h2 {
margin: 12px 0 0;
font-size: clamp(30px, 9vw, 43px);
line-height: 0.96;
letter-spacing: -0.052em;
}
.story-panel-card p {
color: rgba(255, 255, 255, 0.76);
font-size: 14px;
line-height: 1.58;
}
.story-panel-card p {
position: relative;
z-index: 1;
margin: 15px 0 0;
}
.story-actions {
position: relative;
z-index: 1;
display: grid;
gap: 11px;
margin-top: 22px;
}
.story-actions--single {
max-width: 220px;
}
.story-actions .button-secondary,
.story-panel-card--dark .button-secondary {
color: #fff;
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.18);
box-shadow: none;
}
[data-story-reveal] {
opacity: 0;
transform: translateY(42px) scale(0.985);
transition: opacity 760ms ease, transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-story-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
@media (min-width: 390px) {
.story-actions {
grid-template-columns: 1fr 1fr;
}
.story-actions--single {
grid-template-columns: 1fr;
}
.story-actions .button {
min-height: 50px;
padding-inline: 12px;
font-size: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.story-background-slide {
transition: none;
transform: none;
}
[data-story-reveal] {
transition: none;
}
}
.button {
min-height: 52px;
padding: 0 17px;
border-radius: 999px;
transition: transform 160ms ease, box-shadow 160ms ease;
}
.button:active {
transform: scale(0.985);
}
.button-primary {
color: #fff;
background: linear-gradient(135deg, #397cff, #1650bf);
box-shadow: 0 12px 24px rgba(45, 99, 223, 0.23);
}
.button-secondary {
color: #142345;
background: #fff;
border: 1px solid var(--line);
box-shadow: 0 10px 22px rgba(24, 55, 112, 0.08);
}
.product-section {
padding: 0 8px 20px;
}
.catalog-grid {
display: grid;
gap: 34px;
}
.product-card {
position: relative;
overflow: hidden;
background: var(--card);
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
animation: cardIn 420ms ease both;
}
.product-card::before {
position: absolute;
top: 72px;
right: 22px;
width: 150px;
height: 150px;
content: "";
background: var(--glow);
border-radius: 999px;
filter: blur(20px);
}
.product-top {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 27px 26px 0;
color: #44506a;
font-size: 13px;
font-weight: 850;
}
.product-top strong {
padding: 9px 12px;
color: #546aa0;
background: rgba(243, 247, 255, 0.9);
border-radius: 999px;
font-size: 12px;
font-weight: 850;
}
.product-visual {
position: relative;
display: grid;
place-items: center;
min-height: 330px;
margin: 12px 20px 0;
overflow: hidden;
background: linear-gradient(145deg, var(--surface), #fff);
border-radius: 23px;
}
.product-visual img {
position: relative;
z-index: 1;
width: min(92%, 335px);
max-height: 318px;
object-fit: contain;
filter: drop-shadow(0 22px 28px rgba(24, 36, 65, 0.18));
animation: floatPhone 4s ease-in-out infinite;
}
.product-copy {
position: relative;
z-index: 1;
padding: 20px;
}
.product-title-row,
.price-row,
.product-actions,
.split-options {
display: flex;
gap: 12px;
}
.product-title-row,
.price-row {
align-items: flex-start;
justify-content: space-between;
}
.product-title-row h2 {
margin: 0;
font-size: 24px;
line-height: 1.05;
}
.rating {
flex: 0 0 auto;
padding: 8px 10px;
color: #244c96;
background: #f2f6ff;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
}
.price-row {
margin-top: 14px;
}
.price-row strong,
.price-row small {
display: block;
}
.price-row strong {
font-size: 24px;
}
.price-row small {
margin-top: 2px;
color: #9aa3b5;
font-weight: 800;
text-decoration: line-through;
}
.price-row > span {
max-width: 130px;
color: #315fcb;
font-size: 13px;
font-weight: 900;
line-height: 1.25;
text-align: right;
}
.option-block {
display: grid;
gap: 8px;
margin-top: 16px;
}
.label,
form label span {
color: #6a7285;
font-size: 11px;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
}
.segments,
.color-pills {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.segment,
.color-pill {
min-height: 34px;
padding: 0 11px;
color: #33405b;
background: #f5f7fb;
border: 1px solid #e5ebf4;
border-radius: 999px;
cursor: pointer;
font-size: 12px;
font-weight: 850;
}
.segment.active,
.color-pill.active {
color: #fff;
background: var(--accent);
border-color: var(--accent);
}
.split-options {
align-items: start;
justify-content: space-between;
}
.split-options > * {
flex: 1;
min-width: 0;
}
.color-pill {
display: inline-flex;
gap: 6px;
align-items: center;
}
.color-pill i {
width: 12px;
height: 12px;
border: 1px solid rgba(15, 20, 31, 0.14);
border-radius: 999px;
}
.plan-card {
margin-top: 17px;
padding: 15px;
background: linear-gradient(145deg, #f8fbff, #fff);
border: 1px solid var(--line);
border-radius: 20px;
}
.plan-card span,
.eyebrow {
display: block;
color: #2f66d7;
font-size: 11px;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
}
.plan-card strong {
display: block;
margin-top: 5px;
font-size: 19px;
}
.plan-card p {
margin: 5px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}
.product-actions {
margin-top: 15px;
}
.product-actions .button {
flex: 1;
min-height: 48px;
padding-inline: 12px;
font-size: 13px;
}
.full {
width: 100%;
}
.business-media,
.business-gallery {
padding: 0 8px 20px;
}
.section-intro {
margin: 0 0 14px;
padding: 0 8px;
}
.section-intro h2 {
margin: 8px 0 0;
font-size: 25px;
line-height: 1.04;
}
.video-grid {
display: grid;
gap: 14px;
}
.video-card,
.gallery-card {
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.video-card {
display: grid;
gap: 14px;
padding: 14px;
animation: cardIn 420ms ease both;
}
.video-card.feature-video .video-placeholder {
aspect-ratio: 16 / 10;
}
.video-placeholder {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 16 / 11;
overflow: hidden;
background:
radial-gradient(circle at 25% 18%, rgba(255, 255, 255, 0.78), transparent 28%),
linear-gradient(135deg, rgba(45, 99, 223, 0.92), rgba(14, 25, 51, 0.94));
border-radius: 23px;
}
.video-placeholder::before {
position: absolute;
inset: 14px;
content: "";
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 18px;
}
.video-placeholder::after {
position: absolute;
right: 18px;
bottom: 18px;
left: 18px;
height: 22%;
content: "";
background: linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18));
border-radius: 999px;
opacity: 0.18;
}
/* When a real thumbnail background is applied (via JS from the
extracted JPEG), soften the gradient overlay so the photo is more
visible. The play-icon stays on top because of z-index. */
.video-placeholder.has-thumbnail {
background-color: #0f172a;
}
.video-placeholder.has-thumbnail::before {
/* Hide the inner border when a thumbnail is present — it crowds
the photo and looks busy. */
border-color: rgba(255, 255, 255, 0.12);
}
.video-placeholder.has-thumbnail::after {
opacity: 0;
}
.play-icon {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 66px;
height: 66px;
background: rgba(255, 255, 255, 0.94);
border-radius: 999px;
box-shadow: 0 16px 34px rgba(10, 20, 44, 0.26);
}
.play-icon::before {
width: 0;
height: 0;
margin-left: 5px;
content: "";
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 18px solid var(--blue);
}
.media-copy {
padding: 0 5px 4px;
}
.media-copy span,
.gallery-card span {
display: block;
color: #2f66d7;
font-size: 11px;
font-weight: 950;
letter-spacing: 0;
text-transform: uppercase;
}
.media-copy h3,
.gallery-card h3 {
margin: 5px 0 0;
font-size: 20px;
line-height: 1.1;
}
.business-gallery {
display: grid;
gap: 14px;
}
/* ---------- Media rotators (home page) ---------- */
/* Used by both the .rotator--video and .rotator--photo sections on
index.html. The rotator renders N slides absolutely positioned
inside a fixed-aspect stage, with `.is-active` toggling opacity for
a 600ms crossfade. Dots underneath let the user jump to a slide and
reset the rotation timer. */
.rotator {
display: grid;
gap: 12px;
}
.rotator-stage {
position: relative;
width: 100%;
overflow: hidden;
border-radius: var(--radius);
background: rgba(15, 23, 42, 0.04);
}
.rotator--video .rotator-stage {
aspect-ratio: 16 / 10;
}
.rotator--photo .rotator-stage {
aspect-ratio: 16 / 9;
}
.rotator-slide {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
pointer-events: none;
transition: opacity 600ms ease;
}
.rotator-slide.is-active {
opacity: 1;
pointer-events: auto;
z-index: 1;
}
.rotator-slide.gallery-card,
.rotator-slide.gallery-card.large {
display: block;
width: 100%;
height: 100%;
min-height: 0;
border-radius: var(--radius);
border: 1px solid rgba(231, 236, 246, 0.9);
box-shadow: var(--shadow);
}
.rotator-slide.gallery-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rotator-slide.gallery-card > div,
.rotator-slide.gallery-card > figcaption {
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
z-index: 1;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.rotator-slide.gallery-card > div span,
.rotator-slide.gallery-card > figcaption span {
display: inline-block;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.92);
color: var(--blue);
font-size: 10px;
font-weight: 850;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 8px;
text-shadow: none;
}
.rotator-slide.gallery-card > div h3,
.rotator-slide.gallery-card > figcaption h3 {
margin: 0;
font-size: 18px;
line-height: 1.2;
}
/* Video slide reuses the existing .video-card / .video-placeholder
styles, but we lay it out to fill the stage. */
.rotator--video .rotator-slide.video-card {
display: grid;
grid-template-rows: 1fr auto;
gap: 12px;
padding: 14px;
width: 100%;
height: 100%;
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(231, 236, 246, 0.9);
box-shadow: var(--shadow);
}
.rotator--video .rotator-slide .video-placeholder {
width: 100%;
height: 100%;
min-height: 0;
aspect-ratio: auto;
}
.rotator--video .rotator-slide .video-player {
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
border-radius: 18px;
display: block;
}
.rotator--video .rotator-slide .media-copy {
padding: 0 4px;
}
/* Dot indicators. */
.rotator-dots {
display: flex;
justify-content: center;
gap: 8px;
padding: 4px 0 0;
}
.rotator-dot {
width: 9px;
height: 9px;
border-radius: 999px;
border: 1px solid rgba(45, 99, 223, 0.35);
background: rgba(255, 255, 255, 0.7);
cursor: pointer;
padding: 0;
transition: background-color 200ms ease, transform 200ms ease, width 200ms ease;
}
.rotator-dot:hover {
background: rgba(45, 99, 223, 0.4);
}
.rotator-dot.is-active {
background: var(--blue);
border-color: var(--blue);
width: 22px;
}
/* When reduced motion is preferred, kill the crossfade transition. */
@media (prefers-reduced-motion: reduce) {
.rotator-slide { transition: none; }
}
.gallery-card {
min-height: 230px;
}
.gallery-card.large {
min-height: 300px;
}
.gallery-card img {
width: 100%;
height: 100%;
min-height: inherit;
object-fit: cover;
}
.gallery-card::after {
position: absolute;
inset: 0;
content: "";
background: linear-gradient(180deg, rgba(9, 16, 34, 0), rgba(9, 16, 34, 0.72));
}
.gallery-card > div {
position: absolute;
right: 18px;
bottom: 18px;
left: 18px;
z-index: 1;
color: #fff;
}
.gallery-card span {
color: rgba(255, 255, 255, 0.76);
}
.proof-strip {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.proof-strip article {
padding: 16px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: 22px;
box-shadow: 0 14px 34px rgba(38, 69, 126, 0.1);
}
.proof-strip strong,
.proof-strip span {
display: block;
}
.proof-strip strong {
font-size: 18px;
}
.proof-strip span {
margin-top: 5px;
color: var(--muted);
font-size: 12px;
font-weight: 800;
line-height: 1.35;
}
.surface-card,
.reviews-section {
margin: 20px 8px;
padding: 22px;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.request-page-hero {
margin: 28px 8px 0;
padding: 26px 22px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 255, 0.96));
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.request-page-hero h1 {
margin: 8px 0 10px;
font-size: 34px;
line-height: 0.98;
letter-spacing: 0;
}
.request-page-hero p {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.5;
}
.contact-socials {
display: grid;
gap: 12px;
margin: 24px 8px;
padding: 0;
}
.social-card {
padding: 20px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.98));
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
text-align: center;
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
color: inherit;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.social-card:hover {
transform: translateY(-2px);
border-color: rgba(45, 99, 223, 0.35);
box-shadow: 0 22px 50px rgba(38, 69, 126, 0.18);
}
.social-card-logo {
display: block;
width: 64px;
height: 64px;
border-radius: 999px;
background: #fff;
padding: 6px;
border: 1px solid var(--line);
object-fit: contain;
}
.social-card .platform-label {
display: inline-block;
padding: 6px 12px;
background: var(--paper);
color: var(--blue);
font-size: 11px;
font-weight: 850;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.social-card h3 {
margin: 8px 0;
font-size: 20px;
font-weight: 850;
color: var(--ink);
}
.social-card .button {
margin-top: 4px;
width: 100%;
}
.steps-grid {
display: grid;
gap: 10px;
margin-top: 14px;
}
.steps-grid article {
padding: 15px;
background: #f6f8fd;
border: 1px solid #e8eef8;
border-radius: 20px;
}
.steps-grid article span {
color: #2f66d7;
font-weight: 950;
}
.steps-grid h3 {
margin: 7px 0 5px;
font-size: 17px;
}
.steps-grid p,
.request-card p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}
.request-card h2,
.reviews-section h2 {
margin: 8px 0 16px;
font-size: 24px;
line-height: 1.04;
}
form {
display: grid;
gap: 12px;
}
form label {
display: grid;
gap: 7px;
}
input,
textarea {
width: 100%;
padding: 14px;
color: var(--ink);
background: #f7f9fd;
border: 1px solid var(--line);
border-radius: 17px;
outline: none;
}
textarea {
resize: vertical;
}
.review-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.review-stats article,
blockquote {
margin: 0;
padding: 15px;
background: #f7f9fe;
border: 1px solid var(--line);
border-radius: 20px;
}
.review-stats strong,
.review-stats span {
display: block;
}
.review-stats strong {
font-size: 24px;
}
.review-stats span {
color: var(--muted);
font-size: 12px;
font-weight: 800;
}
blockquote {
margin-top: 12px;
color: #39445e;
line-height: 1.55;
}
blockquote cite {
display: block;
margin-top: 12px;
color: #2f66d7;
font-style: normal;
font-weight: 900;
}
.floating-socials {
position: fixed;
right: max(8px, calc((100vw - 430px) / 2 + 8px));
top: 66%;
z-index: 15;
display: grid;
gap: 10px;
transform: translateY(-50%);
}
.floating-socials a {
display: grid;
place-items: center;
width: 40px;
height: 40px;
background: transparent;
border: 0;
border-radius: 999px;
box-shadow: 0 10px 22px rgba(19, 37, 78, 0.18);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.floating-socials a:hover {
transform: scale(1.1);
box-shadow: 0 14px 28px rgba(19, 37, 78, 0.22);
}
.floating-socials a img.social-logo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 999px;
}
.whatsapp {
background: #24d366;
}
.instagram {
background: linear-gradient(135deg, #ffb13b, #e73373, #7438d6);
}
.snapchat {
color: #111 !important;
background: #ffef38;
}
.tiktok {
background: #08101b;
}
.telegram {
background: #34a9e8;
}
.cart-toast {
position: fixed;
right: max(12px, calc((100vw - 430px) / 2 + 12px));
bottom: 16px;
z-index: 30;
padding: 13px 17px;
color: #fff;
background: #24a766;
border-radius: 999px;
box-shadow: 0 15px 30px rgba(16, 81, 50, 0.22);
opacity: 0;
transform: translateY(14px);
pointer-events: none;
transition: opacity 180ms ease, transform 180ms ease;
}
.cart-toast.show {
opacity: 1;
transform: translateY(0);
}
.installment-section {
display: grid;
gap: 16px;
margin: 24px 8px;
padding: 0;
}
.installment-card {
padding: 20px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.98));
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.installment-card .phone-name {
display: block;
color: var(--muted);
font-size: 12px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.installment-card h3 {
margin: 8px 0 12px;
font-size: 24px;
font-weight: 850;
color: var(--ink);
}
.installment-specs {
display: grid;
gap: 10px;
margin: 16px 0;
padding: 12px;
background: var(--paper);
border-radius: 16px;
}
.spec-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
}
.spec-item strong {
color: var(--ink);
font-weight: 850;
}
.spec-item span {
color: var(--muted);
}
.cart-modal {
position: fixed;
inset: 0;
z-index: 40;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
}
.cart-modal.open {
display: flex;
}
.cart-modal-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
animation: fadeIn 200ms ease;
}
.cart-modal-content {
position: relative;
z-index: 1;
width: min(100%, 430px);
max-height: 80vh;
background: white;
border-radius: 28px;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
animation: scaleIn 300ms ease both;
}
.cart-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid var(--line);
}
.cart-modal-header h2 {
margin: 0;
font-size: 22px;
font-weight: 850;
}
.cart-modal-close {
display: grid;
place-items: center;
width: 36px;
height: 36px;
padding: 0;
background: transparent;
border: none;
font-size: 28px;
cursor: pointer;
color: var(--ink);
transition: transform 160ms ease;
}
.cart-modal-close:hover {
transform: scale(1.1);
}
.cart-modal-items {
flex: 1;
overflow-y: auto;
padding: 16px;
display: grid;
gap: 12px;
}
.cart-item {
padding: 16px;
background: var(--paper);
border-radius: 16px;
border: 1px solid var(--line);
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
}
.cart-item-model {
font-weight: 850;
font-size: 15px;
color: var(--ink);
}
.cart-item-specs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.cart-item-spec {
display: inline-block;
padding: 3px 8px;
background: white;
border: 1px solid var(--line);
border-radius: 999px;
font-size: 10px;
color: var(--muted);
}
.cart-item-price {
text-align: right;
font-weight: 850;
font-size: 16px;
color: var(--blue);
}
.cart-item-remove {
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
background: #ffebee;
border: none;
border-radius: 999px;
cursor: pointer;
color: #d32f2f;
font-size: 18px;
transition: background 160ms ease;
}
.cart-item-remove:hover {
background: #ffcdd2;
}
.cart-modal-footer {
padding: 16px;
border-top: 1px solid var(--line);
background: var(--paper);
}
.cart-empty {
padding: 40px 20px;
text-align: center;
color: var(--muted);
font-size: 15px;
}
@keyframes dropIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes cardIn {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes floatPhone {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
/* Shop Page Styles */
.shop-hero {
padding: 34px 8px 24px;
}
.shop-hero h1 {
margin: 0;
max-width: 760px;
color: #fff;
font-family: "Caveat", "Bricolage Grotesque", "Comic Sans MS", cursive;
font-size: clamp(44px, 14vw, 72px);
font-weight: 700;
line-height: 0.95;
letter-spacing: 0.01em;
text-shadow:
0 4px 14px rgba(0, 0, 0, 0.55),
0 14px 38px rgba(0, 0, 0, 0.42),
0 0 28px rgba(45, 99, 223, 0.34);
}
.product-section {
padding: 0 8px 20px;
}
.shop-controls {
display: grid;
gap: 12px;
margin-bottom: 20px;
padding: 0 8px;
}
.search-bar {
position: relative;
display: flex;
align-items: center;
}
.search-bar input {
width: 100%;
padding: 12px 14px 12px 38px;
background: #f7f9fd;
border: 1px solid #dce8f5;
border-radius: 999px;
color: var(--ink);
font-size: 13px;
outline: none;
transition: border-color 200ms ease;
}
.search-bar input::placeholder {
color: var(--muted);
}
.search-bar input:focus {
border-color: var(--blue);
}
.search-icon {
position: absolute;
left: 14px;
font-size: 14px;
color: var(--muted);
pointer-events: none;
}
.filter-sort {
display: flex;
gap: 10px;
}
.filter-sort {
display: flex;
gap: 10px;
}
.dropdown-wrapper {
position: relative;
flex: 1;
}
.filter-btn,
.sort-btn {
width: 100%;
padding: 12px;
background: #f7f9fd;
border: 1px solid #dce8f5;
border-radius: 17px;
color: #33405b;
font-size: 12px;
font-weight: 850;
cursor: pointer;
transition: all 120ms ease;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.filter-btn:active,
.sort-btn:active {
transform: scale(0.97);
background: #f0f5ff;
}
.filter-btn.open,
.sort-btn.open {
background: #eef4ff;
border-color: var(--blue);
}
.dropdown-icon {
font-size: 10px;
transition: transform 180ms ease;
}
.dropdown-wrapper.open .dropdown-icon {
transform: rotate(180deg);
}
.dropdown-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: #fff;
border: 1px solid #dce8f5;
border-radius: 17px;
box-shadow: 0 10px 28px rgba(29, 58, 111, 0.12);
display: none;
flex-direction: column;
z-index: 10;
overflow: hidden;
}
.dropdown-wrapper.open .dropdown-menu {
display: flex;
animation: dropdownOpen 160ms ease both;
}
.dropdown-item {
padding: 12px 14px;
background: none;
border: none;
color: #33405b;
font-size: 12px;
font-weight: 800;
text-align: left;
cursor: pointer;
transition: background-color 100ms ease;
white-space: nowrap;
}
.dropdown-item:hover {
background: #f7f9fd;
}
.dropdown-item:active {
background: #eef4ff;
}
.dropdown-item.active {
background: #eef4ff;
color: var(--blue);
font-weight: 850;
}
.dropdown-item:not(:last-child) {
border-bottom: 1px solid #eef4ff;
}
@keyframes dropdownOpen {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.catalog-grid {
display: grid;
gap: 20px;
}
.product-card {
display: grid;
grid-template-rows: auto 1fr;
overflow: hidden;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
animation: cardIn 420ms ease both;
}
.product-image {
position: relative;
display: grid;
place-items: center;
min-height: 280px;
background: linear-gradient(145deg, rgba(245, 249, 255, 0.9), rgba(255, 255, 255, 0.95));
border-bottom: 1px solid rgba(231, 236, 246, 0.6);
overflow: hidden;
}
.product-image img {
width: 85%;
max-height: 260px;
object-fit: contain;
filter: drop-shadow(0 12px 18px rgba(24, 36, 65, 0.12));
}
.product-badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
padding: 8px 14px;
background: linear-gradient(135deg, #3677ff, #164fbf);
color: #fff;
border-radius: 999px;
font-size: 11px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.product-content {
display: flex;
flex-direction: column;
padding: 18px 16px;
}
.product-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.product-header h3 {
margin: 0;
font-size: 20px;
line-height: 1.2;
flex: 1;
}
.rating {
flex: 0 0 auto;
padding: 6px 10px;
background: #f0f5ff;
color: #2d63df;
border-radius: 999px;
font-size: 11px;
font-weight: 850;
white-space: nowrap;
}
.product-pricing {
margin-top: 12px;
display: flex;
align-items: baseline;
gap: 8px;
}
.price-current {
font-size: 22px;
font-weight: 900;
color: var(--ink);
}
.price-original {
font-size: 13px;
color: var(--muted);
text-decoration: line-through;
opacity: 0.7;
}
.price-installment {
margin-left: auto;
font-size: 11px;
color: #2d63df;
font-weight: 850;
text-align: right;
white-space: nowrap;
}
.product-specs {
margin-top: 14px;
display: grid;
gap: 12px;
}
.spec-group {
display: grid;
gap: 8px;
}
.spec-group > label {
color: #5a6b7f;
font-size: 11px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.spec-options {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.spec-option {
padding: 8px 12px;
background: #f5f7fb;
border: 1px solid #dce8f5;
border-radius: 999px;
color: #33405b;
font-size: 12px;
font-weight: 800;
cursor: pointer;
transition: all 120ms ease;
}
.spec-option:active {
transform: scale(0.95);
}
.spec-option.active {
background: linear-gradient(135deg, #3677ff, #164fbf);
border-color: transparent;
color: #fff;
}
.finish-swatch {
width: 24px;
height: 24px;
min-width: 24px;
padding: 0;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.5);
background: var(--swatch, #d7dde8);
color: transparent;
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.88), 0 2px 8px rgba(15,23,42,0.08);
position: relative;
}
.finish-swatch::after {
content: "";
position: absolute;
inset: -5px;
border-radius: inherit;
border: 2px solid transparent;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.finish-swatch:hover::after,
.finish-swatch:focus-visible::after {
border-color: rgba(45, 99, 223, 0.35);
}
.finish-swatch.active {
background: var(--swatch, #d7dde8);
border-color: #fff;
color: transparent;
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.92), 0 0 0 2px #2d63df, 0 4px 12px rgba(45,99,223,0.22);
}
.finish-swatch.active::after {
border-color: #2d63df;
}
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.product-actions {
margin-top: auto;
padding-top: 14px;
display: grid;
gap: 10px;
}
.product-actions .button {
min-height: 46px;
font-size: 13px;
font-weight: 850;
}
@media (max-width: 365px) {
.product-card {
border-radius: 20px;
}
.product-image {
min-height: 240px;
}
.product-content {
padding: 14px 12px;
}
.product-header h3 {
font-size: 18px;
}
.price-current {
font-size: 18px;
}
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 1ms !important;
transition-duration: 1ms !important;
}
}
@media (min-width: 431px) {
body {
background-color: #e7eefb;
}
.app-shell {
border-right: 1px solid rgba(24, 55, 112, 0.08);
border-left: 1px solid rgba(24, 55, 112, 0.08);
box-shadow: 0 0 70px rgba(29, 58, 111, 0.1);
}
}
@media (max-width: 365px) {
.brand-copy small {
display: none;
}
.cart-pill {
min-height: 46px;
padding-inline: 13px;
}
.menu-toggle {
width: 46px;
height: 46px;
}
.travel-pill {
min-height: 46px;
padding: 0 11px;
}
.travel-pill-text {
display: none;
}
.poster-card h1 {
font-size: 29px;
}
.product-visual {
min-height: 300px;
}
.split-options,
.product-actions {
display: grid;
}
}
/* ---------- Installment planner ---------- */
.planner-stack {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin: 0 8px 24px;
}
/* Sticky summary bar — always visible at the top of the page
while the user is scrolling through the selectors. Sits just
under the site header on phone. */
.planner-summary-bar {
position: sticky;
top: 78px;
z-index: 9;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
margin: 0 8px 12px;
padding: 12px 16px;
background: linear-gradient(135deg, #3677ff, #164fbf);
color: #fff;
border-radius: 18px;
box-shadow: 0 14px 30px rgba(45, 99, 223, 0.28);
animation: dropIn 200ms ease both;
}
.planner-summary-text {
display: grid;
gap: 2px;
min-width: 0;
}
.planner-summary-text strong {
font-size: 15px;
font-weight: 900;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.planner-summary-text span {
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.78);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.planner-summary-price {
display: grid;
justify-items: end;
gap: 2px;
text-align: right;
}
.planner-summary-price span {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.4px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
.planner-summary-price strong {
font-size: 18px;
font-weight: 900;
line-height: 1;
}
.planner-controls,
.planner-breakdown {
display: grid;
gap: 16px;
padding: 22px 20px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.98));
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.field-block {
display: grid;
gap: 8px;
}
.field-control {
width: 100%;
padding: 14px;
color: var(--ink);
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
outline: none;
font-size: 14px;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 12px 8px;
padding-right: 38px;
}
.field-control:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(45, 99, 223, 0.12);
}
.planner-segments {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.planner-segment {
min-height: 38px;
padding: 0 14px;
color: #33405b;
background: #f5f7fb;
border: 1px solid #dce8f5;
border-radius: 999px;
cursor: pointer;
font-size: 13px;
font-weight: 800;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.planner-segment:active {
transform: scale(0.97);
}
.planner-segment.is-active {
background: linear-gradient(135deg, #3677ff, #164fbf);
border-color: transparent;
color: #fff;
}
.planner-segments-2 .planner-segment,
.planner-segments-3 .planner-segment {
flex: 1 1 0;
text-align: center;
}
.planner-finish-grid {
display: flex;
flex-wrap: wrap;
gap: 13px;
align-items: center;
padding-top: 2px;
}
.planner-finish-pill.finish-swatch {
width: 30px;
height: 30px;
min-width: 30px;
flex: 0 0 auto;
}
.planner-finish-pill.finish-swatch:active {
transform: scale(0.94);
}
.planner-finish-pill.finish-swatch.is-active {
background: var(--swatch, #d7dde8);
}
.breakdown-image-wrap {
display: grid;
place-items: center;
width: 100%;
aspect-ratio: 1 / 1;
max-height: 260px;
margin: 0 auto 14px;
background: linear-gradient(145deg, var(--paper), #fff);
border: 1px solid var(--line);
border-radius: 22px;
padding: 14px;
overflow: hidden;
}
.breakdown-image-wrap img {
width: 100%;
height: 100%;
max-height: 230px;
object-fit: contain;
filter: drop-shadow(0 14px 24px rgba(24, 36, 65, 0.18));
animation: dropIn 220ms ease both;
}
.planner-breakdown h2 {
margin: 6px 0 0;
font-size: 28px;
line-height: 1.05;
color: var(--ink);
}
.breakdown-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
font-size: 13px;
color: var(--muted);
font-weight: 800;
}
.breakdown-row strong {
color: var(--ink);
font-size: 15px;
font-weight: 900;
}
.breakdown-chosen {
margin-top: 4px;
padding: 16px 18px;
background: linear-gradient(145deg, #eef4ff, #fff);
border: 1px solid rgba(45, 99, 223, 0.25);
border-radius: 16px;
display: grid;
gap: 4px;
}
.breakdown-chosen span {
color: var(--muted);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.breakdown-chosen strong {
color: var(--blue);
font-size: 17px;
font-weight: 900;
}
.breakdown-continue {
margin-top: 4px;
}
/* ---------- Cart page ---------- */
/* `display: grid` on .cart-layout would otherwise beat the HTML `hidden`
attribute, leaving the populated summary visible at the same time as
the empty state. Make `hidden` always win. */
[hidden] { display: none !important; }
.cart-empty-state,
.cart-layout {
margin: 0 8px 24px;
}
.cart-empty-actions {
display: grid;
gap: 10px;
margin-top: 16px;
}
.cart-layout {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* On very wide viewports the .app-shell is still only 430px wide, so the
2-column layout would squish the summary panel. Keep stacking on every
screen size — the cart page is a linear review + continue flow. */
.cart-lines {
display: grid;
gap: 12px;
}
.cart-line {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
padding: 18px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.98));
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.cart-line-head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.cart-line-head h3 {
margin: 0;
font-size: 18px;
}
.cart-line-badge {
display: inline-block;
padding: 4px 10px;
background: var(--paper);
color: var(--blue);
border-radius: 999px;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.cart-line-badge-installment {
background: linear-gradient(135deg, #3677ff, #164fbf);
color: #fff;
}
.cart-line-specs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.cart-line-spec {
padding: 3px 9px;
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11px;
color: var(--muted);
font-weight: 800;
}
.cart-line-deposit {
margin: 10px 0 0;
color: var(--muted);
font-size: 12px;
}
.cart-line-deposit strong {
color: var(--ink);
font-weight: 900;
}
.cart-line-aside {
display: grid;
gap: 6px;
justify-items: end;
align-content: center;
}
.cart-line-price {
font-size: 18px;
color: var(--ink);
font-weight: 900;
}
.cart-line-remove {
display: grid;
place-items: center;
width: 32px;
height: 32px;
background: #ffebee;
border: 0;
border-radius: 999px;
cursor: pointer;
color: #d32f2f;
font-size: 18px;
}
.cart-line-remove:hover { background: #ffcdd2; }
.cart-summary {
display: grid;
gap: 14px;
padding: 22px 20px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.98));
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
position: sticky;
top: 84px;
}
.cart-summary h3 { margin: 0; font-size: 20px; }
/* Leaner variant used on the cart page (subtotal + Continue button only) */
.cart-summary-simple {
display: grid;
gap: 10px;
align-content: start;
}
.cart-summary-total {
display: block;
font-size: 28px;
font-weight: 900;
color: var(--ink);
letter-spacing: -0.01em;
margin: 4px 0 8px;
}
.cart-summary-blurb {
margin: -4px 0 4px;
padding: 12px 14px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
color: var(--muted);
font-size: 12px;
line-height: 1.5;
}
.cart-summary-blurb a {
color: var(--blue);
font-weight: 900;
text-decoration: underline;
text-underline-offset: 2px;
}
.payment-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 4px;
background: var(--paper);
border-radius: 14px;
}
.payment-tab {
min-height: 38px;
padding: 0 12px;
background: transparent;
border: 0;
border-radius: 10px;
cursor: pointer;
font-size: 13px;
font-weight: 800;
color: var(--muted);
transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.payment-tab.is-active {
background: linear-gradient(135deg, #3677ff, #164fbf);
color: #fff;
box-shadow: 0 8px 20px rgba(45, 99, 223, 0.22);
}
.payment-mode-info p {
margin: 0;
font-size: 12px;
color: var(--muted);
line-height: 1.5;
}
.cart-totals {
display: grid;
gap: 6px;
margin: 0;
}
.cart-totals > div {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 10px 12px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
font-size: 13px;
color: var(--muted);
font-weight: 800;
}
.cart-totals dt { margin: 0; }
.cart-totals dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 900; }
.checkout-form {
display: grid;
gap: 12px;
margin-top: 4px;
}
.cart-trust {
margin: 4px 0 0;
font-size: 11px;
color: var(--muted);
text-align: center;
line-height: 1.4;
}
@media (max-width: 365px) {
.cart-summary { position: static; }
}
/* ---------- Order success ---------- */
.confirmation-page {
padding: 18px 8px 28px;
}
.order-success {
position: relative;
isolation: isolate;
margin: 0;
padding: 18px;
overflow: hidden;
text-align: center;
background:
radial-gradient(circle at 15% 8%, rgba(36, 211, 102, 0.18), transparent 26%),
radial-gradient(circle at 88% 2%, rgba(45, 99, 223, 0.2), transparent 30%),
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.96));
border: 1px solid rgba(231, 236, 246, 0.94);
border-radius: 32px;
box-shadow: 0 24px 60px rgba(38, 69, 126, 0.16);
display: grid;
gap: 14px;
}
.success-glow {
position: absolute;
z-index: -1;
width: 150px;
height: 150px;
border-radius: 999px;
filter: blur(16px);
opacity: 0.58;
pointer-events: none;
}
.success-glow-blue {
top: -54px;
right: -46px;
background: rgba(45, 99, 223, 0.22);
}
.success-glow-green {
bottom: 118px;
left: -70px;
background: rgba(36, 211, 102, 0.2);
}
.success-hero-card {
position: relative;
display: grid;
justify-items: center;
gap: 10px;
padding: 24px 16px 22px;
overflow: hidden;
background:
linear-gradient(160deg, rgba(13, 19, 36, 0.88), rgba(18, 47, 105, 0.9)),
radial-gradient(circle at top, rgba(255, 255, 255, 0.16), transparent 46%);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 26px;
box-shadow: 0 18px 44px rgba(13, 28, 64, 0.22);
}
.success-hero-card::after {
content: "";
position: absolute;
inset: auto -20% -44px;
height: 110px;
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.16), transparent 70%);
pointer-events: none;
}
.success-orbit {
position: relative;
display: grid;
place-items: center;
width: 104px;
height: 104px;
}
.success-orbit > span {
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
}
.success-orbit > span:nth-child(2) {
inset: 13px;
border-color: rgba(36, 211, 102, 0.28);
}
.order-success-icon {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 72px;
height: 72px;
margin: 0 auto;
background: linear-gradient(135deg, #24d366, #128c4a);
color: #fff;
border: 5px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
font-size: 32px;
font-weight: 950;
box-shadow: 0 18px 36px rgba(36, 211, 102, 0.32);
animation: pop 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes pop {
from { transform: scale(0.6); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.success-eyebrow {
color: #8fe8b3;
letter-spacing: 0.08em;
}
.order-success h1 {
position: relative;
z-index: 1;
margin: 0;
font-size: clamp(32px, 9vw, 42px);
line-height: 0.98;
letter-spacing: -1.4px;
}
.order-success > p,
.success-hero-card p {
position: relative;
z-index: 1;
max-width: 320px;
margin: 0;
color: rgba(255, 255, 255, 0.78);
font-size: 14px;
line-height: 1.6;
}
.success-panels {
display: grid;
gap: 12px;
}
.order-success-card {
display: grid;
gap: 10px;
margin-top: 0;
padding: 16px;
background: rgba(255, 255, 255, 0.86);
border: 1px solid rgba(222, 230, 244, 0.9);
border-radius: 22px;
box-shadow: 0 14px 30px rgba(24, 55, 112, 0.08);
text-align: left;
backdrop-filter: blur(14px);
}
.confirmation-card-head {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
align-items: center;
padding-bottom: 10px;
border-bottom: 1px solid rgba(226, 233, 246, 0.95);
}
.summary-icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
color: #245ed1;
background: rgba(45, 99, 223, 0.1);
border-radius: 14px;
font-weight: 950;
}
.confirmation-card-head span:not(.summary-icon) {
display: block;
color: var(--muted);
font-size: 11px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.confirmation-card-head strong {
display: block;
margin-top: 2px;
color: var(--ink);
font-size: 15px;
line-height: 1.25;
}
.order-success-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 3px 0;
font-size: 13px;
color: var(--muted);
}
.order-success-row strong {
color: var(--ink);
font-size: 14px;
font-weight: 900;
text-align: right;
word-break: break-word;
}
.order-ref-row strong,
.amount-row strong {
color: #164fbf;
font-size: 16px;
}
.confirmation-next-card {
padding: 17px;
text-align: left;
background: linear-gradient(145deg, rgba(255, 248, 230, 0.96), rgba(255, 255, 255, 0.92));
border: 1px solid rgba(243, 214, 139, 0.78);
border-radius: 24px;
box-shadow: 0 14px 30px rgba(159, 112, 12, 0.08);
}
.confirmation-steps {
display: grid;
gap: 12px;
margin: 13px 0 0;
padding: 0;
list-style: none;
}
.confirmation-steps li {
display: grid;
grid-template-columns: auto 1fr;
gap: 11px;
align-items: start;
}
.confirmation-step-dot {
display: grid;
place-items: center;
width: 28px;
height: 28px;
color: #fff;
background: linear-gradient(135deg, #397cff, #1650bf);
border-radius: 999px;
box-shadow: 0 8px 18px rgba(45, 99, 223, 0.2);
font-size: 12px;
font-weight: 950;
}
.confirmation-steps strong {
display: block;
color: var(--ink);
font-size: 14px;
line-height: 1.25;
}
.confirmation-steps p {
margin: 3px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.installment-next {
margin-top: 6px;
padding: 16px;
background: linear-gradient(145deg, #fff8e6, #fffaf0);
border: 1px solid #f3d68b;
border-radius: 16px;
text-align: left;
}
.installment-next h3 { margin: 0 0 4px; font-size: 16px; }
.installment-next p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.order-success-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 2px;
}
.order-success-actions .button {
min-height: 54px;
padding-inline: 14px;
font-size: 13px;
text-align: center;
}
@media (max-width: 365px) {
.order-success-actions { grid-template-columns: 1fr; }
}
/* ---------- Track order ---------- */
.track-hero {
margin: 26px 8px 18px;
padding: clamp(24px, 7vw, 46px);
display: grid;
gap: 18px;
overflow: hidden;
position: relative;
color: #fff;
background:
radial-gradient(circle at 88% 16%, rgba(113, 161, 255, 0.46), transparent 28%),
linear-gradient(145deg, rgba(9, 18, 38, 0.84), rgba(12, 35, 82, 0.68));
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 34px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.track-hero::before {
content: "";
position: absolute;
inset: auto -18% -42% 18%;
height: 180px;
background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 68%);
pointer-events: none;
}
.track-hero-copy,
.track-hero-card {
position: relative;
z-index: 1;
}
.track-hero .eyebrow {
color: rgba(255, 255, 255, 0.78);
}
.track-hero h1 {
margin: 8px 0 10px;
max-width: 720px;
font-size: clamp(38px, 12vw, 78px);
line-height: 0.92;
letter-spacing: -0.06em;
text-wrap: balance;
}
.track-hero p {
margin: 0;
max-width: 560px;
color: rgba(255, 255, 255, 0.78);
font-size: clamp(15px, 2vw, 18px);
line-height: 1.65;
}
.track-hero-card {
justify-self: start;
display: grid;
gap: 5px;
min-width: min(100%, 280px);
padding: 16px 18px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 22px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}
.track-hero-icon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
margin-bottom: 4px;
background: rgba(255, 255, 255, 0.16);
border-radius: 16px;
font-size: 24px;
}
.track-hero-card strong { font-size: 18px; }
.track-hero-card small { color: rgba(255, 255, 255, 0.72); }
.tracker-form-wrap {
margin: 0 8px 16px;
padding: clamp(16px, 3vw, 24px);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(245, 249, 255, 0.86));
border: 1px solid rgba(255, 255, 255, 0.56);
border-radius: var(--radius);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.tracker-form {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: end;
}
.tracker-result {
margin: 0 8px 24px;
display: grid;
gap: 16px;
}
.tracker-current-card {
padding: clamp(20px, 4vw, 30px);
overflow: hidden;
position: relative;
color: #fff;
background: linear-gradient(145deg, #123f94, #2d63df 58%, #5c8cff);
border: 0;
box-shadow: 0 22px 60px rgba(45, 99, 223, 0.32);
}
.tracker-current-card::after {
content: "";
position: absolute;
right: -54px;
top: -54px;
width: 150px;
height: 150px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
}
.tracker-current-kicker {
display: inline-flex;
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.72);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.tracker-current-card strong {
display: block;
font-size: clamp(30px, 7vw, 54px);
line-height: 0.96;
letter-spacing: -0.05em;
}
.tracker-current-card p {
max-width: 560px;
margin: 12px 0 0;
color: rgba(255, 255, 255, 0.82);
line-height: 1.55;
}
.tracker-panel {
padding: clamp(16px, 3vw, 22px);
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(231, 236, 246, 0.92);
}
.tracker-summary {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 18px;
}
@media (min-width: 720px) {
.tracker-summary { grid-template-columns: repeat(4, 1fr); }
}
.tracker-summary > div { display: grid; gap: 4px; }
.tracker-summary .picker-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--muted);
font-weight: 900;
}
.tracker-summary strong {
font-size: 14px;
color: var(--ink);
font-weight: 900;
}
.tracker-section-title {
margin: 0 0 10px;
font-size: 16px;
}
.tracker-items {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.tracker-items li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
font-size: 13px;
}
.tracker-items li strong { display: block; color: var(--ink); font-weight: 900; }
.tracker-items li span { color: var(--muted); font-size: 12px; }
.tracker-timeline {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.tracker-timeline li {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
font-size: 14px;
color: var(--muted);
font-weight: 800;
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.tracker-timeline .dot {
width: 12px;
height: 12px;
border-radius: 999px;
background: #d6dde9;
flex: 0 0 auto;
}
.tracker-timeline li.is-done {
color: var(--ink);
background: #eaf6ee;
border-color: #b6e0c1;
}
.tracker-timeline li.is-done .dot { background: #1aa05a; }
.tracker-timeline li.is-current {
color: var(--ink);
background: linear-gradient(145deg, #eef4ff, #fff);
border-color: rgba(45, 99, 223, 0.4);
box-shadow: 0 0 0 3px rgba(45, 99, 223, 0.08);
}
.tracker-timeline li.is-current .dot {
background: var(--blue);
box-shadow: 0 0 0 4px rgba(45, 99, 223, 0.18);
}
.tracker-timeline li.is-muted {
opacity: 0.52;
background: rgba(238, 244, 255, 0.62);
}
.tracker-timeline li.is-current:last-child {
background: linear-gradient(145deg, #fff0f0, #fff);
border-color: rgba(211, 47, 47, 0.28);
}
.tracker-timeline li.is-current:last-child .dot {
background: #d32f2f;
box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.12);
}
.tracker-empty {
margin: 0 8px 24px;
}
.tracker-actions { display: flex; }
.tracker-actions .button {
width: 100%;
min-height: 54px;
}
/* ---------- Admin ---------- */
.admin-body { background: #f4f6fb; }
.admin-shell {
background: #f4f6fb;
}
.admin-login {
margin: 24px 8px;
display: grid;
place-items: center;
}
.admin-login .installment-card {
max-width: 460px;
width: 100%;
text-align: center;
}
.admin-login p {
color: var(--muted);
font-size: 13px;
line-height: 1.5;
margin: 0 0 14px;
}
.admin-header {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin: 24px 8px 14px;
padding: 20px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.98));
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
@media (min-width: 720px) {
.admin-header { grid-template-columns: 1fr auto; align-items: end; }
}
.admin-header h1 { margin: 4px 0; font-size: 28px; }
.admin-header p { margin: 0; color: var(--muted); font-size: 13px; }
.admin-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-header-actions .button { min-height: 42px; padding: 0 14px; font-size: 12px; }
.admin-filters {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin: 0 8px 14px;
padding: 16px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.98));
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
@media (min-width: 720px) {
.admin-filters { grid-template-columns: 200px 200px 1fr; align-items: end; }
}
.admin-search input { width: 100%; }
.admin-table-wrap {
margin: 0 8px 32px;
background: #fff;
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow-x: auto;
}
.admin-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
min-width: 720px;
}
.admin-table th,
.admin-table td {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.admin-table th {
background: var(--paper);
color: var(--muted);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.admin-table tbody tr:hover { background: #fafbff; }
.admin-table code {
font-size: 12px;
color: var(--ink);
background: var(--paper);
padding: 2px 6px;
border-radius: 6px;
}
.admin-status-select {
padding: 8px 10px;
background: #f5f7fb;
border: 1px solid #dce8f5;
border-radius: 10px;
font-size: 12px;
font-weight: 800;
color: var(--ink);
}
.admin-row-delete {
width: 28px;
height: 28px;
display: grid;
place-items: center;
background: #ffebee;
border: 0;
border-radius: 999px;
color: #d32f2f;
font-size: 16px;
cursor: pointer;
}
.admin-row-delete:hover { background: #ffcdd2; }
.admin-empty {
padding: 32px;
text-align: center;
color: var(--muted);
}
/* ---------- Reviews (with badges) ---------- */
.reviews-stats {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin: 0 8px 14px;
}
@media (min-width: 720px) {
.reviews-stats { grid-template-columns: repeat(3, 1fr); }
}
.proof-strip-cell {
padding: 16px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.98));
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: 22px;
box-shadow: 0 14px 34px rgba(38, 69, 126, 0.1);
}
.proof-strip-cell strong { display: block; font-size: 18px; }
.proof-strip-cell span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.35; }
.reviews-list {
display: grid;
gap: 12px;
margin: 0 8px 24px;
}
.review-card {
padding: 18px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.98));
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.review-card-head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
}
.review-avatar {
display: grid;
place-items: center;
width: 40px;
height: 40px;
background: linear-gradient(135deg, #eef4ff, #fff);
color: var(--blue);
border-radius: 999px;
font-size: 13px;
font-weight: 900;
}
.review-card-head strong { display: block; color: var(--ink); }
.review-card-head small { color: var(--muted); font-size: 11px; }
.review-stars {
display: flex;
gap: 2px;
color: #f5b400;
font-size: 14px;
}
.review-star { color: #d6dde9; }
.review-star.is-filled { color: #f5b400; }
.review-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 10px 0;
}
.review-badge {
display: inline-block;
padding: 4px 10px;
background: var(--paper);
color: var(--blue);
border-radius: 999px;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.review-badge-verified { background: #eaf6ee; color: #128c4a; }
.review-badge-installment { background: linear-gradient(135deg, #3677ff, #164fbf); color: #fff; }
.review-badge-full { background: #fff1e6; color: #c8531b; }
.review-badge-featured { background: #fff5d6; color: #b07c00; }
.review-card blockquote {
margin: 0;
color: #39445e;
line-height: 1.55;
font-size: 14px;
}
/* ---------- Installment step indicator ---------- */
.step-indicator {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin: 0 8px 18px;
padding: 14px 18px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.98));
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: 22px;
box-shadow: var(--shadow);
position: relative;
counter-reset: step;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
position: relative;
font-size: 12px;
color: var(--muted);
font-weight: 800;
}
.step + .step::before {
content: "";
position: absolute;
top: 14px;
right: 50%;
left: -50%;
height: 2px;
background: var(--line);
z-index: 0;
}
.step + .step.is-done::before,
.step + .step.is-current::before {
background: linear-gradient(135deg, #3677ff, #164fbf);
}
.step-dot {
width: 28px;
height: 28px;
border-radius: 999px;
background: #fff;
border: 2px solid var(--line);
display: grid;
place-items: center;
font-size: 12px;
font-weight: 900;
color: var(--muted);
z-index: 1;
transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.step.is-done .step-dot {
background: linear-gradient(135deg, #24d366, #128c4a);
border-color: transparent;
color: #fff;
}
.step.is-done .step-dot::after {
content: "✓";
font-size: 14px;
}
.step.is-done .step-label {
color: #128c4a;
}
.step.is-current .step-dot {
background: linear-gradient(135deg, #3677ff, #164fbf);
border-color: transparent;
color: #fff;
transform: scale(1.05);
box-shadow: 0 0 0 4px rgba(45, 99, 223, 0.15);
}
.step.is-current .step-label {
color: var(--ink);
}
/* ---------- Plan recap (used on customer + verification pages) ---------- */
.installment-plan-recap {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin: 0 8px 16px;
padding: 18px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.98));
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
align-items: center;
}
@media (min-width: 720px) {
.installment-plan-recap {
grid-template-columns: 120px 1fr;
}
}
.recap-image-wrap {
display: grid;
place-items: center;
width: 100%;
max-width: 120px;
aspect-ratio: 1 / 1;
background: linear-gradient(145deg, var(--paper), #fff);
border: 1px solid var(--line);
border-radius: 18px;
padding: 8px;
margin: 0 auto;
overflow: hidden;
}
.recap-image-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
}
.recap-copy {
display: grid;
gap: 6px;
}
.recap-copy h3 {
margin: 0;
font-size: 18px;
font-weight: 850;
}
.recap-copy p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.4;
}
.recap-customer {
font-size: 12px !important;
color: var(--blue) !important;
font-weight: 800;
}
.recap-totals {
list-style: none;
margin: 6px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.recap-totals li {
display: grid;
gap: 2px;
padding: 8px 10px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
}
.recap-totals span {
font-size: 10px;
color: var(--muted);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.recap-totals strong {
font-size: 14px;
font-weight: 900;
color: var(--ink);
}
.review-selected-totals {
grid-template-columns: repeat(2, 1fr);
}
/* ---------- Customer form ---------- */
.installment-customer-form {
margin: 0 8px 24px;
padding: 22px 20px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.98));
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
display: grid;
gap: 14px;
}
.field-control-textarea {
width: 100%;
padding: 14px;
color: var(--ink);
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
outline: none;
font-size: 14px;
font-family: inherit;
resize: vertical;
min-height: 80px;
}
.field-control-textarea:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(45, 99, 223, 0.12);
}
.req {
color: #e2573d;
font-style: normal;
margin-left: 2px;
}
.form-actions {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-top: 4px;
}
@media (min-width: 480px) {
.form-actions {
grid-template-columns: auto 1fr;
}
}
.form-actions .button-secondary {
text-align: center;
}
/* ---------- Verification uploads ---------- */
.installment-uploads {
margin: 0 8px 24px;
display: grid;
gap: 12px;
}
.upload-slot {
display: grid;
gap: 8px;
padding: 16px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.98));
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: border-color 200ms ease, background 200ms ease;
}
.upload-slot.is-uploaded {
border-color: rgba(36, 211, 102, 0.4);
background: linear-gradient(145deg, #f0fbf4, #fff);
}
.upload-slot-head {
display: flex;
align-items: center;
gap: 12px;
}
.upload-num {
display: grid;
place-items: center;
width: 30px;
height: 30px;
background: linear-gradient(135deg, #3677ff, #164fbf);
color: #fff;
border-radius: 999px;
font-size: 13px;
font-weight: 900;
flex: 0 0 auto;
}
.upload-slot.is-uploaded .upload-num {
background: linear-gradient(135deg, #24d366, #128c4a);
}
.upload-slot-head h3 {
margin: 0;
font-size: 15px;
font-weight: 850;
}
.upload-slot-head p {
margin: 2px 0 0;
font-size: 12px;
color: var(--muted);
line-height: 1.4;
}
.upload-slot-body {
display: block;
}
.upload-dropzone {
display: grid;
position: relative;
width: 100%;
min-height: 140px;
background: var(--paper);
border: 2px dashed rgba(45, 99, 223, 0.25);
border-radius: 16px;
cursor: pointer;
overflow: hidden;
transition: border-color 200ms ease, background 200ms ease;
}
.upload-dropzone:hover,
.upload-dropzone:focus-within {
border-color: var(--blue);
background: #f3f7ff;
}
.upload-slot.is-uploaded .upload-dropzone {
border-style: solid;
border-color: rgba(36, 211, 102, 0.4);
background: #fff;
}
.upload-placeholder {
display: grid;
place-items: center;
gap: 4px;
padding: 16px;
text-align: center;
}
.upload-icon {
font-size: 28px;
}
.upload-placeholder strong {
display: block;
font-size: 14px;
font-weight: 850;
color: var(--ink);
}
.upload-placeholder small {
display: block;
font-size: 11px;
color: var(--muted);
font-weight: 700;
}
.upload-preview {
display: block;
width: 100%;
max-height: 240px;
object-fit: contain;
padding: 8px;
}
.upload-replace {
position: absolute;
top: 8px;
right: 8px;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11px;
font-weight: 800;
color: var(--ink);
cursor: pointer;
box-shadow: 0 4px 12px rgba(15, 20, 31, 0.08);
}
.upload-replace:hover {
background: var(--blue);
color: #fff;
border-color: transparent;
}
.upload-disclaimer {
margin: 6px 4px 0;
font-size: 11px;
color: var(--muted);
line-height: 1.5;
}
/* ---------- Ghana Card verification on file ---------- */
.verification-on-file {
margin: 0 8px 18px;
padding: 18px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.98));
border: 1px solid rgba(231, 236, 246, 0.9);
border-radius: var(--radius);
box-shadow: var(--shadow);
display: grid;
gap: 12px;
text-align: left;
}
.verification-on-file-head h3 {
margin: 4px 0 6px;
font-size: 18px;
font-weight: 850;
}
.verification-on-file-head p {
margin: 0;
color: var(--muted);
font-size: 12px;
line-height: 1.5;
}
.verification-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
@media (min-width: 720px) {
.verification-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.verification-slot {
display: grid;
gap: 6px;
padding: 8px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
list-style: none;
}
.verification-photo {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 10px;
background: var(--paper);
}
.verification-slot-label {
display: block;
font-size: 11px;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.3px;
text-align: center;
}
.tracker-section-blurb {
margin: -4px 4px 12px;
color: var(--muted);
font-size: 13px;
}
/* ---------- Admin ID viewer (Ghana Card lightbox) ---------- */
.admin-row-actions {
display: flex;
gap: 6px;
align-items: center;
justify-content: flex-end;
}
.admin-row-view-id {
display: grid;
place-items: center;
min-width: 28px;
height: 28px;
padding: 0 10px;
background: linear-gradient(135deg, #3677ff, #164fbf);
color: #fff;
border: 0;
border-radius: 999px;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.4px;
cursor: pointer;
}
.admin-row-view-id:hover {
filter: brightness(1.05);
}
.admin-id-modal[hidden] { display: none; }
.admin-id-modal {
position: fixed;
inset: 0;
z-index: 60;
display: grid;
place-items: center;
padding: 16px;
}
.admin-id-modal-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 0;
}
.admin-id-modal-content {
position: relative;
z-index: 1;
width: min(100%, 520px);
max-height: 90vh;
overflow-y: auto;
background: #fff;
border-radius: 28px;
padding: 20px;
display: grid;
gap: 14px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
animation: pop 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.admin-id-modal-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.admin-id-modal-head h2 {
margin: 4px 0 0;
font-size: 18px;
font-weight: 850;
}
.admin-id-modal-head p {
margin: 4px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.4;
}
.admin-id-modal-close {
background: transparent;
border: 0;
font-size: 24px;
cursor: pointer;
color: var(--ink);
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 999px;
flex: 0 0 auto;
}
.admin-id-modal-close:hover { background: var(--paper); }
/* ---------- Paystack fallback link ---------- */
.paystack-fallback {
margin: 8px 0 0;
font-size: 11px;
color: var(--muted);
text-align: center;
}
.paystack-fallback a {
color: var(--blue);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ---------- Address autocomplete dropdown ---------- */
/* Renders as a floating anchored below the input. Shared between
the cart checkout and the installment customer form. */
.iqlub-address-suggestions {
position: absolute;
z-index: 1000;
margin: 0;
padding: 6px 0;
list-style: none;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 4px rgba(15, 23, 42, 0.04);
max-height: 280px;
overflow-y: auto;
font-size: 14px;
color: #0f172a;
}
.iqlub-address-suggestions[hidden] {
display: none;
}
.iqlub-address-suggestion {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 12px;
cursor: pointer;
border-radius: 8px;
margin: 0 4px;
transition: background-color 0.08s ease;
}
.iqlub-address-suggestion.is-active,
.iqlub-address-suggestion:hover {
background: rgba(37, 99, 235, 0.08);
}
.iqlub-address-primary {
font-weight: 600;
color: #0f172a;
line-height: 1.3;
}
.iqlub-address-secondary {
font-size: 12px;
color: #475569;
line-height: 1.3;
/* Clamp long admin-area names to a single line in the dropdown. */
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.iqlub-address-empty {
padding: 8px 12px;
color: #94a3b8;
font-style: italic;
cursor: default;
}
@media (prefers-color-scheme: dark) {
.iqlub-address-suggestions {
background: #0f172a;
border-color: rgba(148, 163, 184, 0.2);
color: #e2e8f0;
}
.iqlub-address-suggestion.is-active,
.iqlub-address-suggestion:hover {
background: rgba(96, 165, 250, 0.16);
}
.iqlub-address-primary { color: #f1f5f9; }
.iqlub-address-secondary { color: #94a3b8; }
}
/* ---------- Installment review page ---------- */
.review-layout {
display: grid;
gap: 14px;
margin: 0 8px 24px;
}
.review-block {
display: grid;
gap: 10px;
}
.review-block h3 {
margin: 0;
font-size: 16px;
font-weight: 850;
}
.review-block-blurb {
margin: 0;
font-size: 12px;
color: var(--muted);
line-height: 1.4;
}
.review-fields {
display: grid;
gap: 6px;
margin: 0;
}
.review-fields > div {
display: grid;
grid-template-columns: 110px 1fr;
gap: 10px;
align-items: baseline;
padding: 8px 12px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
font-size: 13px;
}
.review-fields dt {
color: var(--muted);
font-weight: 800;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.3px;
margin: 0;
}
.review-fields dd {
color: var(--ink);
font-weight: 700;
margin: 0;
word-break: break-word;
}
.review-edit-link {
display: inline-block;
font-size: 12px;
font-weight: 800;
color: var(--blue);
text-decoration: underline;
text-underline-offset: 2px;
}
.review-charge-note {
margin: 8px 0 0;
padding: 12px 14px;
background: linear-gradient(145deg, #fff8e6, #fffaf0);
border: 1px solid #f3d68b;
border-radius: 12px;
font-size: 12px;
line-height: 1.5;
color: var(--ink);
}
.review-charge-note strong {
color: var(--blue);
font-weight: 900;
}
.recap-totals-large li strong {
font-size: 16px;
}
/* ---------- Verification image grid (review + payment-complete) ---------- */
.verification-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.verification-grid-item {
display: grid;
gap: 6px;
padding: 10px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
text-align: center;
font-size: 12px;
}
.verification-grid-item.is-uploaded {
background: linear-gradient(145deg, #f0fbf4, #fff);
border-color: rgba(36, 211, 102, 0.35);
}
.verification-grid-item .verification-label {
display: block;
font-weight: 800;
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.verification-grid-item .verification-image {
display: block;
width: 100%;
max-height: 180px;
object-fit: contain;
border-radius: 10px;
}
.verification-grid-item .verification-empty {
display: block;
color: #b1b7c5;
font-style: italic;
padding: 8px 0;
}
/* =========================================================
ADMIN DASHBOARD — Premium UI
========================================================= */
/* ── Login ── */
.login-wrap {
min-height: 100vh;
display: grid;
place-items: center;
background: linear-gradient(135deg, #0d1324 0%, #1a2a5e 100%);
padding: 20px;
}
.login-card {
background: #fff;
border-radius: 20px;
padding: 40px 36px;
width: 100%;
max-width: 420px;
box-shadow: 0 32px 80px rgba(0,0,0,0.35);
text-align: center;
}
.login-brand img {
height: 56px;
border-radius: 8px;
margin-bottom: 12px;
}
.login-brand h1 {
font-size: 22px;
font-weight: 900;
color: var(--ink);
margin: 0 0 24px;
}
.login-error {
color: #d32f2f;
font-size: 13px;
padding: 10px;
background: #ffebee;
border-radius: 8px;
margin-bottom: 12px;
text-align: left;
}
/* ── App shell with sidebar ── */
#admin-app {
display: flex;
min-height: 100vh;
}
/* ── Sidebar ── */
.admin-sidebar {
width: 220px;
min-height: 100vh;
background: #0d1324;
display: flex;
flex-direction: column;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 100;
transition: transform 0.25s ease;
}
.sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
padding: 20px 16px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-logo {
width: 36px;
height: 36px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
}
.sidebar-brand-name {
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
}
.sidebar-brand-sub {
color: rgba(255,255,255,0.4);
font-size: 10px;
}
.sidebar-nav {
flex: 1;
padding: 12px 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar-nav-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: 8px;
color: rgba(255,255,255,0.6);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.sidebar-nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sidebar-nav-item.active { background: rgba(45,99,223,0.3); color: #fff; }
.sidebar-icon { font-size: 10px; }
.sidebar-footer { padding: 12px 8px; border-top: 1px solid rgba(255,255,255,0.08); }
.sidebar-logout {
width: 100%;
padding: 9px;
background: transparent;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 8px;
color: rgba(255,255,255,0.5);
font-size: 12px;
cursor: pointer;
transition: all 0.15s;
}
.sidebar-logout:hover { background: rgba(255,255,255,0.06); color: #fff; }
/* ── Main content ── */
.admin-main {
flex: 1;
margin-left: 220px;
min-height: 100vh;
padding: 0 0 60px;
}
/* ── Topbar ── */
.admin-topbar {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 24px;
background: #fff;
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 50;
}
.topbar-menu-btn {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.topbar-menu-btn span {
display: block;
width: 22px;
height: 2px;
background: var(--ink);
border-radius: 2px;
}
.topbar-title { flex: 1; }
.topbar-title h1 { margin: 0; font-size: 20px; }
.topbar-meta { font-size: 12px; color: var(--muted); }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.15s;
text-decoration: none;
white-space: nowrap;
}
.btn-sm { padding: 7px 12px; font-size: 12px; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--paper); }
.btn-danger-ghost { background: transparent; color: #d32f2f; border: 1px solid #f5c6c6; }
.btn-danger-ghost:hover { background: #fff5f5; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-icon {
background: none;
border: 1px solid var(--line);
border-radius: 8px;
padding: 5px 8px;
font-size: 12px;
cursor: pointer;
color: var(--muted);
transition: all 0.15s;
}
.btn-icon:hover { background: var(--paper); color: var(--ink); }
/* ── Analytics strip ── */
.analytics-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding: 20px 24px 0;
}
@media (max-width: 900px) { .analytics-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .analytics-strip { grid-template-columns: 1fr; } }
.stat-card {
background: #fff;
border-radius: 14px;
padding: 18px 20px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 2px 12px rgba(38,69,126,0.09);
border: 1px solid rgba(231,236,246,0.8);
transition: transform 0.15s, box-shadow 0.15s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(38,69,126,0.14); }
.stat-icon { font-size: 28px; flex-shrink: 0; }
.stat-value { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; }
.stat-label { font-size: 11px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-card-total { border-left: 4px solid #4f8ef7; }
.stat-card-revenue { border-left: 4px solid #27ae60; }
.stat-card-today { border-left: 4px solid #e67e22; }
.stat-card-installment { border-left: 4px solid #9b59b6; }
/* ── Badges ── */
.badge {
display: inline-block;
padding: 3px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2px;
}
.badge-success { background: #e8f5e9; color: #2e7d32; }
.badge-warning { background: #fff8e1; color: #f57f17; }
.badge-danger { background: #ffebee; color: #c62828; }
.badge-info { background: #e3f0ff; color: #1565c0; }
.badge-default { background: #f5f5f5; color: #666; }
.badge-installment { background: #f3e5f5; color: #7b1fa2; }
.badge-full { background: #e8f4f0; color: #1b5e20; }
/* ── Detail panel ── */
.detail-panel {
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: 420px;
max-width: 100vw;
background: #fff;
box-shadow: -4px 0 32px rgba(0,0,0,0.15);
z-index: 200;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.detail-panel:not([hidden]) {
transform: translateX(0);
}
.detail-panel-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 20px 20px 16px;
border-bottom: 1px solid var(--line);
background: var(--paper);
flex-shrink: 0;
}
.detail-panel-header h2 { margin: 4px 0 0; font-size: 18px; }
.detail-close {
background: none;
border: none;
font-size: 26px;
color: var(--muted);
cursor: pointer;
padding: 0 4px;
line-height: 1;
}
.detail-close:hover { color: var(--ink); }
.detail-panel-body {
flex: 1;
overflow-y: auto;
padding: 0;
}
.detail-section {
padding: 16px 20px;
border-bottom: 1px solid var(--line);
}
.detail-section-title {
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--muted);
margin: 0 0 12px;
}
.detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.detail-field { display: flex; flex-direction: column; gap: 3px; }
.detail-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }
.detail-value { font-size: 13px; font-weight: 600; color: var(--ink); }
.detail-select {
padding: 7px 10px;
border: 1px solid var(--line);
border-radius: 8px;
font-size: 12px;
font-family: inherit;
color: var(--ink);
background: #fff;
width: 100%;
}
.detail-textarea {
width: 100%;
min-height: 80px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 8px;
font-size: 13px;
font-family: inherit;
color: var(--ink);
resize: vertical;
background: #fafafa;
}
.detail-actions {
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 10px;
border-top: 1px solid var(--line);
flex-shrink: 0;
}
.detail-actions .btn { justify-content: center; }
.detail-actions-status { font-size: 12px; text-align: center; }
/* Device cards inside detail */
.device-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 8px;
}
.device-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.device-specs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.spec-chip {
background: #e8edf8;
color: var(--ink);
font-size: 10px;
padding: 2px 7px;
border-radius: 999px;
font-weight: 600;
}
.device-price { font-size: 14px; font-weight: 800; color: var(--blue); }
/* Ghana card grid */
.ghana-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.ghana-card-slot {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}
.gc-label { font-size: 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.gc-img-wrap {
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--line);
cursor: zoom-in;
aspect-ratio: 1.6/1;
width: 100%;
}
.gc-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Lightbox */
.lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.lightbox img {
max-width: 100%;
max-height: 90vh;
border-radius: 8px;
box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.lightbox-close {
position: absolute;
top: 16px;
right: 20px;
background: none;
border: none;
color: #fff;
font-size: 32px;
cursor: pointer;
opacity: 0.8;
line-height: 1;
}
.lightbox-close:hover { opacity: 1; }
/* Toast */
.toast {
position: fixed;
bottom: 24px;
right: 24px;
padding: 12px 20px;
background: #1a1a2e;
color: #fff;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
z-index: 1000;
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
transition: opacity 0.2s;
}
.toast-success { background: #15803d; }
.toast-error { background: #c62828; }
/* ---------- New-order notification bar (admin / sales / logged-in home) ---------- */
/* The existing `.toast` above is for save/error feedback and is owned
by each page. The new-order notifier appends its own container
(`.iqlub-neworder-stack`) to and renders notification bars inside it.
We use a separate class so the two systems don't fight over
positioning or visibility. */
.iqlub-neworder-stack {
position: fixed;
right: clamp(14px, 2.4vw, 28px);
bottom: clamp(14px, 2.4vw, 28px);
display: flex;
flex-direction: column;
gap: 12px;
z-index: 2500;
pointer-events: none; /* let clicks pass through the empty area */
max-width: calc(100vw - 32px);
}
.iqlub-neworder-bar {
pointer-events: auto;
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 48px minmax(0, 1fr) 32px;
align-items: center;
gap: 14px;
width: min(420px, calc(100vw - 28px));
padding: 16px;
background:
radial-gradient(circle at 94% 8%, rgba(96, 165, 250, 0.34), transparent 28%),
linear-gradient(145deg, rgba(7, 16, 36, 0.98), rgba(15, 32, 65, 0.96));
color: #f8fafc;
border: 1px solid rgba(147, 197, 253, 0.35);
border-left: 5px solid var(--blue, #2d63df);
border-radius: 20px;
box-shadow: 0 22px 60px rgba(2, 8, 23, 0.42), inset 0 1px 0 rgba(255,255,255,0.08);
font: inherit;
cursor: pointer;
text-align: left;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
transition: transform 0.2s ease, opacity 0.25s ease, box-shadow 0.2s ease;
animation: iqlub-neworder-slidein 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.iqlub-neworder-bar::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: linear-gradient(90deg, var(--blue, #2d63df), #8bb4ff, transparent);
opacity: 0.9;
}
.iqlub-neworder-bar:hover,
.iqlub-neworder-bar:focus-visible {
transform: translateY(-3px);
box-shadow: 0 28px 70px rgba(2, 8, 23, 0.52), inset 0 1px 0 rgba(255,255,255,0.1);
outline: none;
}
.iqlub-neworder-bar--leaving {
opacity: 0;
transform: translateX(28px) scale(0.98);
}
.iqlub-neworder-bar-glow {
position: absolute;
width: 160px;
height: 160px;
right: -82px;
top: -82px;
border-radius: 999px;
background: rgba(45, 99, 223, 0.28);
pointer-events: none;
}
.iqlub-neworder-bar-icon {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 16px;
background: linear-gradient(145deg, rgba(59, 130, 246, 0.34), rgba(255, 255, 255, 0.08));
border: 1px solid rgba(147, 197, 253, 0.24);
font-size: 23px;
line-height: 1;
animation: iqlub-neworder-bell 1.6s ease-in-out 0.3s 2;
}
.iqlub-neworder-bar-body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.iqlub-neworder-bar-kicker {
color: #93c5fd;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.iqlub-neworder-bar-body strong {
font-size: 17px;
font-weight: 900;
letter-spacing: -0.02em;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.iqlub-neworder-bar-text {
font-size: 13px;
font-weight: 700;
color: #cbd5e1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.iqlub-neworder-bar-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 3px;
}
.iqlub-neworder-bar-meta span {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: #dbeafe;
font-size: 11px;
font-weight: 800;
}
.iqlub-neworder-bar-meta .iqlub-neworder-bar-amount {
background: rgba(147, 197, 253, 0.16);
color: #bfdbfe;
}
.iqlub-neworder-bar-dismiss {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.08);
border: 0;
border-radius: 999px;
color: #cbd5e1;
font-size: 22px;
line-height: 1;
padding: 0;
cursor: pointer;
align-self: start;
transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.iqlub-neworder-bar-dismiss:hover,
.iqlub-neworder-bar-dismiss:focus-visible {
background: rgba(255, 255, 255, 0.16);
color: #f8fafc;
outline: none;
transform: scale(1.06);
}
@keyframes iqlub-neworder-slidein {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes iqlub-neworder-bell {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(-12deg); }
40% { transform: rotate(8deg); }
60% { transform: rotate(-4deg); }
80% { transform: rotate(2deg); }
}
/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
.iqlub-neworder-bar,
.iqlub-neworder-bar-icon {
animation: none;
}
}
@media (max-width: 560px) {
.iqlub-neworder-stack {
right: 10px;
left: 10px;
bottom: 12px;
max-width: none;
}
.iqlub-neworder-bar {
width: 100%;
grid-template-columns: 42px minmax(0, 1fr) 30px;
gap: 10px;
padding: 13px;
border-radius: 18px;
}
.iqlub-neworder-bar-icon {
width: 42px;
height: 42px;
border-radius: 14px;
font-size: 20px;
}
.iqlub-neworder-bar-body strong {
font-size: 15px;
}
.iqlub-neworder-bar-text {
font-size: 12px;
}
}
/* Table row hover */
.admin-row-clickable { cursor: pointer; }
.admin-row-clickable:hover { background: #fafbff !important; }
/* Responsive */
@media (max-width: 768px) {
.admin-sidebar { transform: translateX(-100%); }
.admin-sidebar.open { transform: translateX(0); }
.admin-main { margin-left: 0; }
.topbar-menu-btn { display: flex; }
.detail-panel { width: 100vw; }
.analytics-strip { padding: 12px 12px 0; }
.topbar-actions .btn span { display: none; } /* hide text on mobile */
.admin-filters { grid-template-columns: 1fr 1fr !important; }
}
/* =========================================================
SALES PAGE
========================================================= */
.sales-layout {
display: grid;
grid-template-columns: 480px 1fr;
gap: 24px;
padding: 20px 24px;
align-items: start;
}
@media (max-width: 1024px) { .sales-layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .sales-layout { padding: 12px; gap: 16px; } }
.sales-form-col {}
.sales-list-col {}
.sales-form-card {
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid rgba(231,236,246,0.9);
overflow: hidden;
}
.sales-form-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 20px 14px;
border-bottom: 1px solid var(--line);
background: var(--paper);
}
.sales-form-header h2 { margin: 0; font-size: 18px; }
.sales-date-chip {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 999px;
padding: 3px 10px;
font-size: 11px;
color: var(--muted);
font-weight: 600;
}
.sales-form-card form {
padding: 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.sales-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.sales-row-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.sales-form-actions {
display: flex;
gap: 10px;
margin-top: 4px;
}
.sales-form-actions .btn { flex: 1; justify-content: center; }
.sale-error {
padding: 10px 14px;
background: #ffebee;
border: 1px solid #ffcdd2;
border-radius: 8px;
color: #c62828;
font-size: 13px;
}
.req { color: #e53935; }
.field-hint { font-size: 11px; color: var(--muted); margin-top: 3px; }
/* Installment extras */
.installment-extras {
background: #f3e5f5;
border: 1px solid #e1bee7;
border-radius: 10px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Recent sales list */
.sales-list-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.sales-list-header h2 { margin: 0; font-size: 18px; }
.sales-count-chip {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 999px;
padding: 3px 10px;
font-size: 11px;
color: var(--muted);
font-weight: 600;
}
.sales-list-table-wrap {
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid rgba(231,236,246,0.9);
overflow-x: auto;
}
.sales-list-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
min-width: 560px;
}
.sales-list-table th,
.sales-list-table td {
padding: 11px 14px;
text-align: left;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.sales-list-table th {
background: var(--paper);
color: var(--muted);
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.sales-list-table tbody tr:hover { background: #fafbff; }
/* ── Review form ─────────────────────────────────────────────── */
.review-form-section {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
padding: 36px 28px;
margin: 0 auto 40px;
max-width: 640px;
}
.review-form-inner h2 {
margin: 0 0 8px;
font-size: 22px;
color: var(--ink);
}
#review-form-intro {
margin: 0 0 24px;
color: var(--muted);
font-size: 14px;
}
.rf-row {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 20px;
}
.rf-row label {
font-size: 13px;
font-weight: 600;
color: var(--ink);
}
.rf-row input[type="text"],
.rf-row textarea {
width: 100%;
padding: 10px 12px;
border: 1.5px solid var(--line);
border-radius: 7px;
font-size: 14px;
font-family: inherit;
color: var(--ink);
background: #fff;
resize: vertical;
transition: border-color 0.15s;
box-sizing: border-box;
}
.rf-row input[type="text"]:focus,
.rf-row textarea:focus {
outline: none;
border-color: var(--accent);
}
.star-picker {
display: flex;
gap: 6px;
}
.star-btn {
font-size: 28px;
color: #d0d7e4;
background: none;
border: none;
cursor: pointer;
padding: 0;
line-height: 1;
transition: color 0.1s;
}
.star-btn.lit { color: #f5a623; }
.star-btn:hover { color: #f5a623; }
.rf-rating-label {
font-size: 12px;
color: var(--muted);
min-height: 16px;
}
.rf-actions { margin-top: 4px; }
.rf-msg {
margin-top: 12px;
padding: 10px 14px;
border-radius: 6px;
font-size: 14px;
}
.rf-msg.success {
background: #ecfdf5;
color: #166534;
border: 1px solid #bbf7d0;
}
.rf-msg.error {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}
/* ── Accessories page ─────────────────────────────────────────── */
.accessories-hero {
position: relative;
display: grid;
gap: 18px;
margin: 18px 8px 12px;
padding: 24px 20px;
min-height: 360px;
overflow: hidden;
color: #fff;
background:
radial-gradient(circle at 18% 18%, rgba(255,255,255,0.32), transparent 28%),
linear-gradient(145deg, #0b1733 0%, #174fc0 54%, #4e8cff 100%);
border-radius: 34px;
box-shadow: 0 24px 58px rgba(15, 48, 116, 0.28);
}
.accessories-hero::after {
content: "";
position: absolute;
inset: auto -44px -88px 42%;
height: 190px;
background: rgba(255, 255, 255, 0.12);
filter: blur(4px);
border-radius: 999px;
transform: rotate(-12deg);
}
.accessories-hero-copy {
position: relative;
z-index: 2;
display: grid;
gap: 12px;
align-content: start;
}
.accessories-hero .eyebrow {
color: rgba(255,255,255,0.76);
}
.accessories-hero h1 {
max-width: 11ch;
margin: 0;
font-size: clamp(38px, 12vw, 56px);
line-height: 0.9;
letter-spacing: -2.6px;
}
.accessories-hero p {
max-width: 28rem;
margin: 0;
color: rgba(255,255,255,0.82);
font-size: 14px;
line-height: 1.55;
}
.accessories-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 6px;
}
.accessories-hero-actions .button {
min-height: 44px;
padding: 0 16px;
border-radius: 999px;
}
.accessories-hero-actions .button-secondary {
background: rgba(255,255,255,0.14);
color: #fff;
border: 1px solid rgba(255,255,255,0.26);
box-shadow: none;
}
.accessories-hero-card {
position: relative;
z-index: 1;
min-height: 142px;
}
.hero-orb {
position: absolute;
display: block;
border-radius: 999px;
background: rgba(255,255,255,0.22);
border: 1px solid rgba(255,255,255,0.28);
}
.hero-orb-one { width: 92px; height: 92px; right: 12px; top: -8px; }
.hero-orb-two { width: 46px; height: 46px; left: 14px; bottom: 6px; }
.hero-device-stack {
position: absolute;
inset: 0;
}
.hero-accessory-tile {
position: absolute;
display: grid;
place-items: center;
width: 112px;
height: 92px;
color: #12306a;
background: rgba(255,255,255,0.92);
border: 1px solid rgba(255,255,255,0.72);
border-radius: 26px;
box-shadow: 0 18px 34px rgba(4, 14, 38, 0.2);
font-weight: 900;
letter-spacing: -0.4px;
}
.tile-case { right: 72px; top: 4px; transform: rotate(-8deg); }
.tile-power { right: 4px; top: 48px; background: #eaf2ff; transform: rotate(9deg); }
.tile-audio { left: 40px; bottom: 4px; background: #fff7df; transform: rotate(-3deg); }
.acc-category-strip {
display: flex;
gap: 8px;
margin: 0 8px 10px;
padding: 2px 0 8px;
overflow-x: auto;
scrollbar-width: none;
}
.acc-category-strip::-webkit-scrollbar { display: none; }
.acc-chip {
flex: 0 0 auto;
min-height: 40px;
padding: 0 14px;
color: var(--muted);
background: rgba(255,255,255,0.82);
border: 1px solid rgba(218,226,241,0.9);
border-radius: 999px;
box-shadow: 0 10px 22px rgba(16, 42, 91, 0.08);
font-size: 12px;
font-weight: 900;
cursor: pointer;
}
.acc-chip.is-active {
color: #fff;
background: linear-gradient(135deg, #3677ff, #164fbf);
border-color: transparent;
box-shadow: 0 13px 24px rgba(45, 99, 223, 0.24);
}
.acc-controls {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin: 0 8px 12px;
padding: 12px;
background: rgba(255,255,255,0.86);
border: 1px solid rgba(231, 236, 246, 0.92);
border-radius: 24px;
box-shadow: 0 14px 36px rgba(38, 69, 126, 0.1);
backdrop-filter: blur(16px);
}
.acc-search-wrap {
position: relative;
min-width: 0;
}
.acc-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #7d8aa5;
pointer-events: none;
}
.acc-search-input {
width: 100%;
min-height: 50px;
padding: 0 14px 0 42px;
border: 1px solid rgba(209, 219, 236, 0.95);
border-radius: 18px;
font-size: 14px;
font-family: inherit;
color: var(--ink);
background: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
transition: border-color 0.15s, box-shadow 0.15s;
}
.acc-search-input:focus {
outline: none;
border-color: rgba(45, 99, 223, 0.65);
box-shadow: 0 0 0 4px rgba(45, 99, 223, 0.1);
}
.acc-filter-wrap {
display: grid;
gap: 6px;
}
.acc-filter-label {
font-size: 11px;
font-weight: 900;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.45px;
}
.acc-category-select {
width: 100%;
min-height: 48px;
padding: 0 42px 0 14px;
border: 1px solid rgba(209, 219, 236, 0.95);
border-radius: 18px;
font-size: 14px;
font-family: inherit;
font-weight: 800;
color: var(--ink);
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23687187' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
appearance: none;
cursor: pointer;
}
.acc-category-select:focus {
outline: none;
border-color: rgba(45, 99, 223, 0.65);
box-shadow: 0 0 0 4px rgba(45, 99, 223, 0.1);
}
.acc-results-bar {
display: flex;
align-items: end;
justify-content: space-between;
gap: 12px;
margin: 0 8px 12px;
padding: 0 4px;
}
.acc-results-bar .eyebrow {
display: block;
margin-bottom: 3px;
}
.acc-results-bar strong {
display: block;
font-size: 18px;
letter-spacing: -0.4px;
}
.acc-results-note {
max-width: 150px;
color: var(--muted);
font-size: 11px;
line-height: 1.35;
text-align: right;
}
.acc-grid-section {
padding: 0 8px 64px;
}
.acc-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.acc-loading,
.acc-empty {
grid-column: 1 / -1;
text-align: center;
padding: 34px 20px;
color: var(--muted);
font-size: 14px;
background: rgba(255,255,255,0.84);
border: 1px solid rgba(231,236,246,0.9);
border-radius: 24px;
}
.acc-loading-dot {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 8px;
background: var(--blue);
border-radius: 99px;
box-shadow: 0 0 0 0 rgba(45,99,223,0.4);
animation: accPulse 1.2s infinite;
}
@keyframes accPulse {
70% { box-shadow: 0 0 0 10px rgba(45,99,223,0); }
100% { box-shadow: 0 0 0 0 rgba(45,99,223,0); }
}
.acc-empty {
display: grid;
justify-items: center;
gap: 10px;
}
.acc-empty[hidden] { display: none; }
.acc-empty strong {
color: var(--ink);
font-size: 17px;
}
.acc-empty p {
max-width: 280px;
margin: 0;
line-height: 1.45;
}
.acc-card {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 100%;
overflow: hidden;
background: rgba(255,255,255,0.96);
border: 1px solid rgba(231, 236, 246, 0.95);
border-radius: 26px;
box-shadow: 0 16px 34px rgba(38, 69, 126, 0.12);
transition: transform 0.2s, box-shadow 0.2s;
}
.acc-card:hover {
transform: translateY(-3px);
box-shadow: 0 22px 44px rgba(38, 69, 126, 0.16);
}
.acc-card-media {
position: relative;
display: grid;
place-items: center;
margin: 8px 8px 0;
height: 138px;
overflow: hidden;
background:
radial-gradient(circle at 30% 18%, rgba(255,255,255,0.92), transparent 34%),
linear-gradient(145deg, #edf4ff, #f9fbff);
border-radius: 21px;
}
.acc-card-media::after {
content: "";
position: absolute;
inset: auto 18px 12px;
height: 16px;
background: rgba(17, 38, 78, 0.08);
filter: blur(10px);
border-radius: 50%;
}
.acc-card-img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.22s ease;
}
.acc-card:hover .acc-card-img {
transform: scale(1.04);
}
.acc-card-img-placeholder {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #94a3b8;
}
.acc-card-body {
display: flex;
flex: 1;
flex-direction: column;
gap: 7px;
padding: 12px;
}
.acc-card-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.acc-card-category,
.acc-card-badge {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 0 8px;
border-radius: 999px;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.45px;
font-weight: 900;
}
.acc-card-category {
color: #2158c9;
background: rgba(45, 99, 223, 0.1);
}
.acc-card-badge {
color: #9b5d00;
background: #fff2cf;
}
.acc-card-name {
min-height: 36px;
color: var(--ink);
font-size: 14px;
font-weight: 900;
line-height: 1.25;
letter-spacing: -0.2px;
}
.acc-card-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 31px;
overflow: hidden;
color: var(--muted);
font-size: 11px;
line-height: 1.4;
}
.acc-card-footer {
display: grid;
gap: 9px;
margin-top: auto;
}
.acc-card-price {
color: var(--ink);
font-size: 16px;
font-weight: 950;
letter-spacing: -0.35px;
}
.acc-add-to-cart-btn {
min-height: 42px;
width: 100%;
color: #fff;
background: linear-gradient(135deg, #3677ff, #164fbf);
border: 0;
border-radius: 16px;
box-shadow: 0 13px 24px rgba(45, 99, 223, 0.22);
font-size: 13px;
font-weight: 900;
cursor: pointer;
transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.acc-add-to-cart-btn:active {
transform: scale(0.97);
box-shadow: 0 8px 16px rgba(45, 99, 223, 0.2);
}
@media (min-width: 390px) {
.acc-controls { grid-template-columns: 1fr 142px; align-items: end; }
}
/* =========================================================
RESPONSIVE DESKTOP LAYOUT OVERRIDES
---------------------------------------------------------
The original redesign intentionally framed the main site in a
430px mobile demo shell. Keep that mobile experience on phones,
but allow the storefront pages to use the available screen width
on tablets, laptops, and desktop monitors.
========================================================= */
@media (min-width: 768px) {
body:not(.admin-body) {
background:
radial-gradient(circle at 12% 10%, rgba(45, 99, 223, 0.12), transparent 30%),
radial-gradient(circle at 88% 8%, rgba(226, 87, 61, 0.08), transparent 28%),
linear-gradient(rgba(45, 99, 223, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(45, 99, 223, 0.045) 1px, transparent 1px),
var(--paper);
background-size: auto, auto, 44px 44px, 44px 44px, auto;
}
.app-shell {
width: 100%;
max-width: none;
margin: 0;
overflow: visible;
border: 0;
box-shadow: none;
}
.app-shell > main:not(.story-home) {
width: min(100%, 1440px);
margin: 0 auto;
padding-right: clamp(18px, 3vw, 42px);
padding-left: clamp(18px, 3vw, 42px);
}
.site-header {
grid-template-columns: minmax(250px, auto) 1fr auto;
gap: clamp(18px, 2.4vw, 34px);
align-items: center;
padding: 14px clamp(22px, 4vw, 56px);
}
.brand-mark {
width: 58px;
height: 58px;
}
.brand-mark img {
width: 46px;
height: 46px;
}
.brand-copy strong {
font-size: 17px;
}
.brand-copy small {
max-width: none;
font-size: 11px;
}
.mobile-nav {
grid-column: auto;
grid-row: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
max-height: none;
padding-top: 0;
overflow: visible;
opacity: 1;
filter: none;
pointer-events: auto;
transform: none;
}
.mobile-nav a,
.mobile-nav.is-open a {
min-height: 42px;
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
opacity: 1;
transform: none;
transition-delay: 0ms;
white-space: nowrap;
}
.home-page .mobile-nav a[href="travel.html"] {
display: none;
}
.header-actions {
grid-column: 3;
grid-row: 1;
}
.menu-toggle {
display: none;
}
.travel-pill,
.cart-pill {
min-height: 46px;
}
.cart-modal-content {
width: min(92vw, 620px);
}
.cart-modal-items {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.cart-item {
grid-template-columns: 1fr;
}
.floating-socials {
right: clamp(16px, 2.2vw, 36px);
top: 50%;
z-index: 25;
}
.floating-socials a {
width: 46px;
height: 46px;
}
}
@media (min-width: 900px) {
.hero-section,
.track-hero,
.product-section,
.business-media,
.business-gallery,
.cart-empty-state,
.cart-layout,
.checkout-section,
.installment-section,
.tracker-form-wrap,
.tracker-result,
.tracker-empty,
.accessories-hero,
.acc-category-strip,
.acc-controls,
.acc-results-bar,
.acc-grid-section {
margin-right: 0;
margin-left: 0;
}
.hero-section {
padding: clamp(46px, 7vw, 92px) 0 clamp(36px, 5vw, 70px);
}
.shop-hero {
min-height: 220px;
padding: clamp(54px, 7vw, 96px) 0 clamp(28px, 4vw, 54px);
display: flex;
align-items: flex-end;
}
.shop-hero h1 {
font-size: clamp(72px, 8vw, 124px);
max-width: 920px;
}
.poster-card {
display: grid;
grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
gap: clamp(24px, 4vw, 58px);
align-items: center;
padding: clamp(32px, 5vw, 64px);
}
.poster-card h1 {
font-size: clamp(48px, 6.4vw, 92px);
}
.poster-card .script {
font-size: clamp(52px, 7vw, 104px);
}
.catalog-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: clamp(22px, 2.4vw, 34px);
}
.product-card {
min-width: 0;
}
.product-visual,
.product-image {
min-height: clamp(260px, 28vw, 360px);
}
.product-visual img {
max-height: 330px;
}
.shop-controls,
.acc-controls {
display: grid;
grid-template-columns: minmax(280px, 1fr) auto;
gap: 14px;
align-items: end;
}
.filter-sort {
justify-content: flex-end;
}
.video-grid,
.gallery-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.video-card.feature-video {
grid-column: span 2;
}
.cart-layout {
grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
gap: clamp(18px, 2.4vw, 32px);
align-items: start;
}
.cart-summary {
position: sticky;
top: 100px;
}
.tracker-form {
grid-template-columns: minmax(320px, 1fr) auto;
}
.tracker-result {
grid-template-columns: minmax(0, 1fr) minmax(340px, 0.75fr);
align-items: start;
}
.track-hero {
grid-template-columns: minmax(420px, 1fr) minmax(260px, 0.42fr);
align-items: end;
min-height: 360px;
}
.tracker-summary,
.tracker-current-card,
.tracker-actions {
grid-column: 1 / -1;
}
.tracker-items-panel { grid-column: 1; }
.tracker-status-panel { grid-column: 2; }
.accessories-hero {
grid-template-columns: minmax(360px, 0.95fr) minmax(320px, 1.05fr);
align-items: center;
min-height: 430px;
padding: clamp(34px, 5vw, 68px);
}
.accessories-hero h1 {
font-size: clamp(42px, 5vw, 72px);
}
.accessories-hero-actions {
grid-template-columns: repeat(2, minmax(0, max-content));
}
.acc-category-strip {
justify-content: center;
}
.acc-grid {
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: clamp(16px, 2vw, 24px);
}
}
@media (min-width: 1100px) {
.home-page {
--home-header-height: 87px;
}
.home-page .site-header {
background: rgba(246, 249, 255, 0.86);
border-bottom-color: rgba(218, 226, 241, 0.72);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.home-page .story-background {
top: var(--home-header-height);
height: calc(100svh - var(--home-header-height));
min-height: calc(680px - var(--home-header-height));
margin-bottom: calc(-100svh + var(--home-header-height));
}
.story-home {
width: 100%;
}
.story-panel {
min-height: 100svh;
padding: clamp(42px, 7vw, 110px) clamp(64px, 10vw, 170px);
}
.story-panel--hero,
.home-page .story-panel--hero {
min-height: calc(100svh - 87px);
align-items: center;
justify-items: start;
padding-top: clamp(42px, 7vw, 110px);
}
.story-panel--center {
align-items: center;
}
.story-panel-card {
width: min(48vw, 560px);
padding: clamp(28px, 3.2vw, 48px);
}
.story-panel-card--hero {
width: min(52vw, 660px);
}
.story-panel-card h1 {
font-size: clamp(58px, 6vw, 96px);
}
.story-panel-card .script {
font-size: clamp(66px, 7vw, 116px);
}
.story-panel-card h2 {
font-size: clamp(42px, 4.5vw, 76px);
}
.story-panel-card p {
max-width: 46rem;
font-size: 16px;
}
.story-actions {
grid-template-columns: repeat(2, minmax(190px, max-content));
}
.story-actions--single {
grid-template-columns: minmax(220px, max-content);
max-width: none;
}
}
@media (min-width: 1200px) {
.catalog-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.acc-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1440px) {
.catalog-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.acc-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.app-shell {
width: min(100%, 430px);
margin: 0 auto;
overflow: clip;
}
}