/* ===== Components =====
Note: Archivo font (used for the GRAND wordmark) is loaded via in
each page's , NOT via @import here. @import in a stylesheet blocks
parsing of the rest of the file until the font CSS arrives. Moving it
to parallelizes the request. */
/* --- Buttons --- */
.btn {
--bg: var(--brand-600);
--fg: #fff;
--bd: var(--brand-600);
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 22px;
font-weight: 600;
font-size: var(--fs-base);
line-height: 1;
border: 1.5px solid var(--bd);
background: var(--bg);
color: var(--fg);
border-radius: var(--r-pill);
transition: transform var(--dur-fast) var(--ease),
background var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-lg { padding: 18px 28px; font-size: var(--fs-md); }
.btn-sm { padding: 10px 16px; font-size: var(--fs-sm); }
.btn-secondary {
--bg: transparent;
--fg: var(--ink-900);
--bd: var(--ink-300);
}
.btn-secondary:hover { --bd: var(--ink-900); }
.btn-gold {
--bg: var(--gold-400);
--fg: #1a1200;
--bd: var(--gold-400);
}
.btn-gold:hover { --bg: var(--gold-500); --bd: var(--gold-500); --fg: #fff; }
.btn-ghost {
--bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.5);
}
.btn-ghost:hover { --bg: rgba(255,255,255,.12); --bd: #fff; }
/* --- Nav --- */
.nav {
position: sticky; top: 0; z-index: 50;
background: rgba(250,250,247,.88);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid rgba(0,0,0,.05);
}
.nav-inner {
height: var(--nav-h);
display: flex; align-items: center; gap: var(--s-5);
}
/* --- Brand logo lockup (8-spoke mark + GRAND wordmark + TA'LIM MASKANI) --- */
.nav-logo {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--ink-900);
text-decoration: none;
line-height: 1;
}
.nav-logo .logo-mark {
width: 40px; height: 40px;
flex-shrink: 0;
color: var(--brand-600);
/* Raise the mark so its horizontal ray lines up with G's crossbar */
transform: translateY(-0.14em);
transition: transform .35s cubic-bezier(.2,.7,.2,1), color .2s;
}
.nav-logo:hover .logo-mark { transform: translateY(-0.14em) rotate(22deg); color: var(--gold-600, var(--brand-700)); }
.nav-logo .logo-word {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 3px;
}
.nav-logo .logo-grand {
font-family: "Archivo", "Inter", system-ui, sans-serif;
font-size: 1.48rem; /* 20% smaller than 1.85rem */
font-weight: 700; /* was 800 — ~15% thinner strokes */
letter-spacing: -0.005em; /* slightly relaxed to complement the lighter weight */
color: var(--brand-600); /* matches logo-mark — unified green lockup */
line-height: 0.92;
}
.nav-logo .logo-sub {
font-family: "Inter", system-ui, sans-serif;
font-size: 0.46rem;
font-weight: 600;
letter-spacing: 0.22em;
color: var(--ink-600);
line-height: 1;
text-transform: uppercase;
/* Visually align subtext to match GRAND's optical width */
padding-left: 1px;
}
.nav-links {
display: none; gap: var(--s-5);
margin-left: var(--s-5);
list-style: none; padding: 0;
}
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-links a {
font-size: var(--fs-sm); font-weight: 500; color: var(--ink-700);
padding: 8px 0;
position: relative;
}
.nav-links a:hover { color: var(--ink-900); }
.nav-links a.active::after {
content: ""; position: absolute; inset: auto 0 -2px 0;
height: 2px; background: var(--brand-600); border-radius: 2px;
}
.nav-cta { margin-left: auto; display: flex; gap: 8px; }
.nav-burger {
display: inline-grid; place-items: center;
width: 40px; height: 40px; border-radius: var(--r-md);
border: 1px solid var(--ink-200); background: #fff;
}
@media (min-width: 900px) { .nav-burger { display: none; } }
.nav-drawer {
display: none;
padding: var(--s-5);
border-top: 1px solid var(--ink-200);
background: #fff;
}
.nav-drawer.open { display: block; }
.nav-drawer a { display: block; padding: 12px 0; border-bottom: 1px solid var(--ink-100); }
/* --- Hero --- */
.hero {
position: relative;
padding-block: clamp(48px, 8vw, 120px);
overflow: hidden;
background:
radial-gradient(1200px 600px at 80% -20%, rgba(200,159,92,.18), transparent 60%),
radial-gradient(900px 500px at -10% 20%, rgba(31,110,61,.12), transparent 60%),
linear-gradient(180deg, #fdfcf8 0%, var(--ink-50) 100%);
}
.hero h1 {
font-size: var(--fs-5xl);
line-height: 1.02;
max-width: 18ch;
}
.hero h1 em {
color: var(--brand-700);
font-style: italic;
font-weight: 600;
}
.hero-sub {
margin-top: var(--s-5);
font-size: var(--fs-md);
color: var(--ink-600);
max-width: 58ch;
}
.hero-cta { margin-top: var(--s-6); display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hero-stats {
margin-top: var(--s-8);
display: grid; gap: var(--s-5);
grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
max-width: 720px;
}
.hero-stats .stat {
padding: var(--s-4) var(--s-5);
background: rgba(255,255,255,.7);
border: 1px solid rgba(0,0,0,.06);
border-radius: var(--r-lg);
backdrop-filter: blur(8px);
}
.hero-stats .num {
font-family: var(--font-display);
font-size: var(--fs-3xl); font-weight: 700; color: var(--brand-700);
line-height: 1;
}
.hero-stats .label {
margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-500);
}
/* --- Card (generic) --- */
.card {
background: #fff;
border: 1px solid var(--ink-100);
border-radius: var(--r-lg);
padding: var(--s-5);
transition: transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--ink-200);
}
.course-card {
display: flex; flex-direction: column; min-height: 240px;
position: relative; overflow: hidden;
background: linear-gradient(180deg, #fff 0%, var(--ink-50) 100%);
}
.course-card .cc-top {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--s-3);
}
.course-card .cc-icon {
width: 56px; height: 56px; border-radius: var(--r-md);
background: var(--brand-50);
display: grid; place-items: center;
font-size: 28px;
}
.course-card .cc-from {
font-size: var(--fs-xs); color: var(--ink-500);
text-transform: uppercase; letter-spacing: .1em;
}
.course-card h3 { font-size: var(--fs-xl); margin-bottom: var(--s-2); }
.course-card p { font-size: var(--fs-sm); color: var(--ink-600); }
.course-card .cc-price {
margin-top: auto;
padding-top: var(--s-4);
display: flex; align-items: baseline; gap: 8px;
}
.course-card .cc-price .v {
font-family: var(--font-display);
font-size: var(--fs-2xl); font-weight: 700; color: var(--brand-700);
}
.course-card .cc-price .u { font-size: var(--fs-sm); color: var(--ink-500); }
.course-card .cc-cta {
margin-top: var(--s-3);
font-size: var(--fs-sm); font-weight: 600; color: var(--brand-600);
display: inline-flex; align-items: center; gap: 6px;
}
.course-card:hover .cc-cta { color: var(--brand-800); }
.course-card .cc-cta::after { content: "→"; transition: transform var(--dur) var(--ease); }
.course-card:hover .cc-cta::after { transform: translateX(3px); }
/* Badges */
.badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
font-size: var(--fs-xs); font-weight: 600;
background: var(--gold-50); color: var(--gold-600);
border: 1px solid var(--gold-200);
border-radius: var(--r-pill);
}
.badge-green { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.badge-red { background: #fde8ea; color: var(--danger-500); border-color: #f5c2c7; }
/* Chip (filter) */
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
font-size: var(--fs-sm); font-weight: 500;
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--r-pill);
cursor: pointer;
transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--ink-400); }
.chip.active { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
/* Feature band */
.features {
display: grid; gap: var(--s-5);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.feature { padding: var(--s-5); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--ink-100); }
.feature .icon {
width: 44px; height: 44px; border-radius: var(--r-md);
background: var(--brand-50); display: grid; place-items: center;
font-size: 22px; margin-bottom: var(--s-3);
}
.feature h4 { font-size: var(--fs-lg); margin-bottom: 6px; }
.feature p { font-size: var(--fs-sm); color: var(--ink-600); }
/* Testimonial */
.quote {
position: relative;
padding: var(--s-6) var(--s-5) var(--s-5);
background: #fff; border: 1px solid var(--ink-100); border-radius: var(--r-lg);
}
.quote::before {
content: "❝"; position: absolute; top: 4px; left: 18px;
font-family: var(--font-display); font-size: 72px; color: var(--gold-300); line-height: 1;
}
.quote blockquote { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink-800); line-height: 1.45; }
.quote .who { margin-top: var(--s-4); display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); color: var(--ink-600); }
.quote .who .avatar {
width: 40px; height: 40px; border-radius: 50%;
background: var(--brand-100); display: grid; place-items: center;
font-weight: 700; color: var(--brand-700);
}
/* Branch card */
.branch-card {
display: flex; flex-direction: column; gap: var(--s-3);
padding: var(--s-5);
border-radius: var(--r-lg);
background: linear-gradient(180deg, #fff 0%, var(--ink-50) 100%);
border: 1px solid var(--ink-100);
transition: all var(--dur) var(--ease);
}
.branch-card:hover { border-color: var(--brand-300); transform: translateY(-2px); }
.branch-card .head { display: flex; align-items: center; justify-content: space-between; }
.branch-card .city { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-500); }
.branch-card h4 { font-size: var(--fs-xl); }
.branch-card .subjects { font-size: var(--fs-sm); color: var(--ink-600); }
/* CTA band */
.cta-band {
background:
radial-gradient(500px 300px at 80% 0%, rgba(200,159,92,.25), transparent 60%),
linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 100%);
color: #fff;
border-radius: var(--r-xl);
padding: var(--s-8) var(--s-7);
display: grid; gap: var(--s-5);
grid-template-columns: 1fr;
}
@media (min-width: 780px) { .cta-band { grid-template-columns: 1.3fr 1fr; align-items: center; } }
.cta-band h2 { color: #fff; font-size: var(--fs-3xl); max-width: 18ch; }
.cta-band p { color: rgba(255,255,255,.85); }
/* Inline lead form */
.lead-form {
background: #fff; color: var(--ink-900);
border-radius: var(--r-lg);
padding: var(--s-5);
display: grid; gap: var(--s-3);
box-shadow: var(--shadow-lg);
}
.lead-form label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 4px; }
.lead-form input, .lead-form select {
width: 100%; padding: 12px 14px;
border: 1px solid var(--ink-200); border-radius: var(--r-md);
background: #fff; transition: border var(--dur-fast) var(--ease);
}
.lead-form input:focus, .lead-form select:focus { border-color: var(--brand-500); outline: none; }
.lead-form .hint { font-size: var(--fs-xs); color: var(--ink-500); }
/* Price line */
.price-line { display: flex; align-items: baseline; gap: 8px; }
.price-line .from { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-500); }
.price-line .val { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--brand-700); }
.price-line .cur { font-size: var(--fs-sm); color: var(--ink-500); }
.price-line.large .val { font-size: var(--fs-3xl); }
/* ===================== Footer (premium) ===================== */
.footer {
position: relative;
background: radial-gradient(1200px 500px at 20% 0%, rgba(202, 163, 98, .08), transparent 60%),
linear-gradient(180deg, #13130f 0%, #0a0a08 100%);
color: var(--ink-200);
padding: 72px 0 32px;
margin-top: var(--s-10);
overflow: hidden;
isolation: isolate;
}
.footer::before {
content: "";
position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(202, 163, 98, .5), transparent);
z-index: 1;
}
.footer-glow {
position: absolute; pointer-events: none; z-index: 0;
top: -120px; right: -120px;
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(202,163,98,.18), transparent 60%);
filter: blur(40px);
}
.footer > .container { position: relative; z-index: 2; }
/* Top CTA band */
.footer-cta {
display: grid; grid-template-columns: 1fr auto; gap: 32px;
align-items: center;
padding: 28px 32px;
border-radius: 24px;
background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(6px);
margin-bottom: 48px;
}
.footer-cta .fc-eyebrow {
display: inline-block;
font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .18em;
color: var(--gold-400); margin-bottom: 10px; font-weight: 600;
}
.footer-cta .fc-title {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.2vw, 1.9rem);
font-weight: 600; line-height: 1.2; color: #fff;
margin: 0;
}
.footer-cta .fc-title em {
font-style: italic; color: var(--gold-400); font-weight: 500;
}
.footer-cta .fc-sub {
margin: 10px 0 0; color: var(--ink-300);
font-size: var(--fs-sm); max-width: 60ch;
}
.footer-cta .fc-actions {
display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.footer-cta .fc-actions .btn {
border-radius: 999px; padding: 14px 24px; font-size: .95rem;
background: var(--gold-400); color: #1a1a13; border-color: var(--gold-400);
}
.footer-cta .fc-actions .btn:hover {
background: #dcb877; transform: translateY(-1px);
box-shadow: 0 10px 30px -10px rgba(202,163,98,.5);
}
.footer-cta .fc-ghost {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 18px; border-radius: 999px;
color: var(--ink-100); font-weight: 500; font-size: .9rem;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.02);
transition: background .2s, border-color .2s;
}
.footer-cta .fc-ghost:hover {
background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); color:#fff;
}
/* Decorative rule */
.footer-rule {
height: 1px; margin: 0 0 48px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 30%, rgba(255,255,255,.12) 70%, transparent);
}
/* Main grid */
.footer-grid {
display: grid;
gap: 48px;
grid-template-columns: 1.5fr repeat(3, 1fr);
}
.footer h5 {
font-size: .72rem; text-transform: uppercase; letter-spacing: .16em;
color: var(--gold-400); margin: 0 0 18px;
font-weight: 600;
}
.footer a {
color: var(--ink-300); font-size: .92rem;
display: block; padding: 6px 0;
transition: color .2s, transform .2s;
}
.footer a:hover { color: #fff; }
.footer-col a:hover { transform: translateX(3px); }
.footer-more {
margin-top: 10px !important;
color: var(--gold-400) !important;
font-weight: 500 !important;
}
.footer-more:hover { color: #e9cf9a !important; }
/* Brand column */
.footer-brand { max-width: 380px; }
.footer-logo {
display: inline-flex;
align-items: center;
gap: 12px;
color: #fff;
line-height: 1;
}
.footer-logo .logo-mark {
width: 48px; height: 48px;
flex-shrink: 0;
color: var(--brand-400);
/* Match nav logo — raise mark so horizontal ray aligns with G's crossbar */
transform: translateY(-0.14em);
}
.footer-logo .logo-word {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 3px;
}
.footer-logo .logo-grand {
font-family: "Archivo", "Inter", system-ui, sans-serif;
font-size: 1.76rem; /* 20% smaller than 2.2rem */
font-weight: 700; /* was 800 — ~15% thinner strokes */
letter-spacing: -0.005em;
color: var(--brand-400); /* matches footer logo-mark — unified green lockup */
line-height: 0.92;
}
.footer-logo .logo-sub {
font-family: "Inter", system-ui, sans-serif;
font-size: 0.52rem;
font-weight: 600;
letter-spacing: 0.22em;
color: var(--ink-300);
line-height: 1;
text-transform: uppercase;
padding-left: 1px;
}
.footer-tag {
color: var(--ink-300); font-size: .9rem;
line-height: 1.65; margin: 16px 0 24px;
}
.footer-contact { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.footer-contact .fcon {
display: flex; align-items: center; gap: 14px;
padding: 10px 14px; border-radius: 14px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
transition: background .2s, border-color .2s, transform .2s;
}
.footer-contact .fcon:hover {
background: rgba(202,163,98,.08);
border-color: rgba(202,163,98,.25);
transform: translateY(-1px);
}
.footer-contact .fcon-ico {
width: 36px; height: 36px; flex-shrink: 0;
display: grid; place-items: center;
border-radius: 10px;
background: rgba(202,163,98,.12);
color: var(--gold-400);
font-size: 1rem;
}
.footer-contact .fcon span:last-child {
display: flex; flex-direction: column; line-height: 1.25;
}
.footer-contact .fcon strong { color: #fff; font-size: .92rem; font-weight: 600; }
.footer-contact .fcon em {
color: var(--ink-400); font-size: .72rem;
font-style: normal; text-transform: uppercase; letter-spacing: .08em;
margin-top: 2px;
}
/* Social icons */
.footer-social { display: flex; gap: 10px; }
.footer-social a {
width: 40px; height: 40px; padding: 0;
display: grid; place-items: center;
border-radius: 50%;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
color: var(--ink-200);
transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.footer-social a:hover {
background: var(--gold-400); border-color: var(--gold-400);
color: #1a1a13; transform: translateY(-2px);
}
/* Badges row */
.footer-badges {
display: flex; gap: 20px; flex-wrap: wrap;
margin-top: 48px; padding-top: 32px;
border-top: 1px solid rgba(255,255,255,.08);
}
.footer-badges .fbadge {
font-size: .82rem; color: var(--ink-400);
display: inline-flex; align-items: baseline; gap: 6px;
}
.footer-badges .fbadge strong {
font-family: var(--font-display);
color: var(--gold-400); font-weight: 600; font-size: 1.05rem;
}
/* Bottom line */
.footer-bottom {
margin-top: 24px; padding-top: 20px;
border-top: 1px solid rgba(255,255,255,.06);
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: .78rem; color: var(--ink-400);
}
.footer-bottom a { display: inline; padding: 0; color: var(--ink-400); font-size: .78rem; }
.footer-bottom a:hover { color: #fff; }
.footer-legal { display: inline-flex; align-items: center; gap: 10px; }
.footer-legal span { color: rgba(255,255,255,.2); }
/* Responsive */
@media (max-width: 900px) {
.footer { padding: 56px 0 28px; }
.footer-cta {
grid-template-columns: 1fr; padding: 24px;
text-align: left; margin-bottom: 40px;
}
.footer-cta .fc-actions { justify-content: flex-start; }
.footer-rule { margin-bottom: 36px; }
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 32px 28px;
}
.footer-brand { grid-column: 1 / -1; max-width: none; }
.footer-badges { gap: 14px; margin-top: 36px; padding-top: 24px; }
}
@media (max-width: 560px) {
.footer-cta .fc-title { font-size: 1.25rem; }
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* Marquee strip — visual chrome only; animation lives in motion.css */
.marquee {
background: var(--ink-900);
color: var(--ink-100);
padding: 14px 0;
font-size: var(--fs-sm);
}
.marquee span {
white-space: nowrap;
opacity: .9;
font-weight: 500;
}
.marquee span::before {
content: "✦"; color: var(--gold-400); margin-right: 10px;
}
/* .reveal is owned by motion.css now (uses .is-in class) */
/* ========== Sticky mobile CTA (landing pages only) ==========
Appears after first scroll on narrow viewports. Keeps the primary
lead action in reach while the user is deep in content. Hidden by
default; body[data-sticky-cta] + media query opts the element in. */
.sticky-cta-m {
position: fixed;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 95;
display: none;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity .25s ease, transform .25s ease, visibility .25s;
pointer-events: none;
padding-bottom: env(safe-area-inset-bottom);
}
.sticky-cta-m.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.sticky-cta-m .cta-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 10px 10px 14px;
background: rgba(15, 30, 51, .96);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 16px;
box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .55);
color: #fff;
}
.sticky-cta-m .cta-text {
flex: 1;
min-width: 0;
line-height: 1.25;
}
.sticky-cta-m .cta-text strong {
display: block;
font-weight: 700;
font-size: 14px;
color: #fff;
}
.sticky-cta-m .cta-text .sub {
display: block;
margin-top: 2px;
font-size: 12px;
color: rgba(255, 255, 255, .72);
}
.sticky-cta-m .btn {
padding: 10px 14px;
font-size: 13px;
white-space: nowrap;
flex-shrink: 0;
min-height: 44px;
}
/* ----- Telegram-first 3-button sticky CTA bar (v2) -----
Used on landing pages. Telegram leads (UZ market), then phone,
then the primary Ariza CTA. All buttons meet 44×44 tap target. */
.sticky-cta-m--bar .cta-bar {
display: flex;
align-items: stretch;
gap: 6px;
padding: 8px;
background: rgba(15, 30, 51, .96);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 16px;
box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .55);
}
.sticky-cta-m--bar .cta-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 14px;
min-height: 44px;
min-width: 44px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .08);
transition: background .18s, transform .18s;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.sticky-cta-m--bar .cta-icon-btn svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.sticky-cta-m--bar .cta-icon-btn span {
font-variant-numeric: tabular-nums;
}
.sticky-cta-m--bar .cta-tg { color: #6BB6E8; }
.sticky-cta-m--bar .cta-tg:active { background: rgba(107, 182, 232, .22); }
.sticky-cta-m--bar .cta-tel { color: #FFD66B; }
.sticky-cta-m--bar .cta-tel:active { background: rgba(255, 214, 107, .22); }
.sticky-cta-m--bar .cta-primary {
flex: 1;
min-height: 44px;
padding: 0 14px;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
border-radius: 10px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Very narrow phones — hide the "1321" label, keep the icon */
@media (max-width: 360px) {
.sticky-cta-m--bar .cta-icon-btn span { display: none; }
.sticky-cta-m--bar .cta-icon-btn { padding: 0 10px; }
}
/* Show only on narrow screens when opted in */
@media (max-width: 768px) {
body[data-sticky-cta] .sticky-cta-m { display: block; }
/* Nudge back-to-top button up when sticky CTA is present,
so the two floating elements don't collide on mobile. */
body[data-sticky-cta] .back-to-top { bottom: 92px; }
/* When the mobile nav drawer is open, hide the sticky CTA so it
doesn't visually compete with the menu. */
body:has(.nav-drawer.open) .sticky-cta-m {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
}
/* ========== Back-to-top floating button ========== */
.back-to-top {
position: fixed;
right: 20px;
bottom: 24px;
width: 52px;
height: 52px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .2);
background: linear-gradient(135deg, var(--ink-900, #0F1E33) 0%, var(--ink-800, #1B2E4C) 100%);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
z-index: 90;
box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .35);
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity .3s ease, transform .3s ease, visibility .3s, background .25s, box-shadow .25s;
-webkit-tap-highlight-color: transparent;
}
.back-to-top:hover,
.back-to-top:focus-visible {
background: linear-gradient(135deg, var(--gold-500, #B68A4E) 0%, var(--gold-400, #D4AB6A) 100%);
box-shadow: 0 14px 34px -8px rgba(182, 138, 78, .55);
transform: translateY(-2px);
outline: none;
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top svg {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 2.4;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Mobile: slightly smaller and nudged to stay clear of thumb zone */
@media (max-width: 560px) {
.back-to-top {
right: 14px;
bottom: 18px;
width: 46px;
height: 46px;
}
.back-to-top svg { width: 18px; height: 18px; }
}
/* Reduced motion — no transform, just opacity */
@media (prefers-reduced-motion: reduce) {
.back-to-top { transition: opacity .2s, visibility .2s; transform: none !important; }
}
/* ============================================================
Location-aware pricing — shared across ALL landing pages
(branch picker + dynamic format cards). Uses theme tokens
(--t-accent etc.) so it adapts to each page's colour theme.
============================================================ */
/* ---- Branch picker (location-aware pricing) ---- */
.branch-picker {
display: flex; align-items: flex-start; gap: 16px;
background: linear-gradient(135deg,
color-mix(in oklab, var(--t-accent) 6%, #fff),
color-mix(in oklab, var(--t-accent) 2%, #fff));
border: 1px solid color-mix(in oklab, var(--t-accent) 20%, transparent);
border-radius: var(--r-lg);
padding: var(--s-5);
margin-bottom: var(--s-6);
}
.branch-picker .bp-icon {
flex-shrink: 0;
width: 44px; height: 44px;
border-radius: 12px;
display: grid; place-items: center;
background: color-mix(in oklab, var(--t-accent) 14%, transparent);
color: var(--t-accent);
}
.branch-picker .bp-icon svg { width: 22px; height: 22px; }
.branch-picker .bp-body { flex: 1; min-width: 0; }
.branch-picker .bp-label {
display: block;
font-weight: 600; font-size: var(--fs-md);
color: var(--ink-900); margin-bottom: 8px;
}
.branch-picker .bp-row { display: flex; gap: 8px; align-items: center; }
.branch-picker select {
flex: 1; min-width: 0;
padding: 12px 36px 12px 14px;
border-radius: 12px;
border: 1px solid color-mix(in oklab, var(--t-accent) 22%, var(--ink-100));
background: #fff;
font-size: 16px; /* prevent iOS zoom */
font-family: inherit;
color: var(--ink-900);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
cursor: pointer;
transition: border-color .2s, box-shadow .2s;
}
.branch-picker select:focus {
outline: none;
border-color: var(--t-accent);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--t-accent) 22%, transparent);
}
.branch-picker .bp-clear {
padding: 12px 14px;
border-radius: 12px;
border: 1px solid var(--ink-100);
background: #fff;
color: var(--ink-600);
font-size: var(--fs-sm); font-weight: 600;
cursor: pointer;
transition: background .2s, color .2s, border-color .2s;
}
.branch-picker .bp-clear:hover {
background: var(--ink-50);
color: var(--ink-900);
border-color: var(--ink-200);
}
.branch-picker .bp-hint {
margin-top: 8px;
font-size: var(--fs-xs);
color: var(--ink-600);
line-height: 1.5;
}
.branch-picker .bp-hint-selected strong { color: var(--t-accent); font-weight: 700; }
@media (max-width: 540px) {
.branch-picker {
flex-direction: column; gap: 12px;
padding: var(--s-4);
}
.branch-picker .bp-icon { width: 36px; height: 36px; border-radius: 10px; }
.branch-picker .bp-icon svg { width: 18px; height: 18px; }
}
/* ---- Price block (location-aware) ---- */
.format-card .price-block {
margin-top: var(--s-4);
display: flex; flex-direction: column; gap: 4px;
transition: opacity .3s ease;
}
.format-card .price-block .price-label {
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-500);
font-weight: 600;
}
.format-card .price-block .price-line {
margin-top: 0;
display: flex; align-items: baseline; gap: 6px;
}
.format-card .price-block .price-line .val {
color: var(--t-accent);
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.4vw, 2.2rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
}
.format-card .price-block .price-line .cur {
color: var(--ink-600);
font-size: var(--fs-sm);
}
.format-card .price-block .price-range {
font-size: 12px;
color: var(--ink-500);
margin-top: 2px;
}
.format-card .price-block .price-range a {
color: var(--t-accent);
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 3px;
cursor: pointer;
}
/* Pulse when prices refresh after branch change */
.format-card .price-block.price-pulse,
.fp-card.price-pulse {
animation: price-pulse .55s cubic-bezier(.2,.7,.2,1);
}
@keyframes price-pulse {
0% { transform: scale(1); opacity: 1; }
35% { transform: scale(.985); opacity: .55; }
100% { transform: scale(1); opacity: 1; }
}
/* Graceful unavailable state */
.format-card .price-block.price-unavailable .val { color: var(--ink-400); }
.format-card .price-block.price-unavailable .price-label { color: var(--ink-500); }
.format-card:has(.price-unavailable) {
opacity: .85;
border-style: dashed;
}
.format-card .price-block.price-unknown .val { color: var(--ink-500); }
.formats-disclaimer {
margin-top: var(--s-6);
padding: var(--s-4) var(--s-5);
background: color-mix(in oklab, var(--t-accent) 4%, #fff);
border-left: 3px solid color-mix(in oklab, var(--t-accent) 45%, transparent);
border-radius: 0 var(--r-md) var(--r-md) 0;
color: var(--ink-700);
font-size: var(--fs-sm);
line-height: 1.6;
}
.formats-disclaimer strong { color: var(--t-accent); }
/* ---- Data-driven format cards (real popularity + real prices) ---- */
/* Portable grid: the [data-format-grid] container lays out its own cards so
it works on every landing page regardless of that page's bespoke classes. */
[data-format-grid] {
display: grid; gap: var(--s-5);
grid-template-columns: 1fr;
}
@media (min-width: 680px) { [data-format-grid] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { [data-format-grid] { grid-template-columns: repeat(3, 1fr); } }
[data-format-grid] .fp-more .format-grid {
display: grid; gap: var(--s-5); grid-template-columns: 1fr;
}
@media (min-width: 680px) { [data-format-grid] .fp-more .format-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { [data-format-grid] .fp-more .format-grid { grid-template-columns: repeat(3, 1fr); } }
/* Self-contained card chrome (does NOT depend on a page's .format-card). */
.fp-card {
display: flex; flex-direction: column;
background: #fff;
border: 1px solid color-mix(in oklab, var(--t-accent, #1f6e3d) 16%, var(--ink-100, #e7e3d8));
border-radius: var(--r-lg, 18px);
padding: var(--s-5, 22px);
position: relative; overflow: hidden;
transition: transform .4s, border-color .4s, box-shadow .4s;
}
.fp-card:hover {
transform: translateY(-3px);
border-color: var(--t-accent);
box-shadow: 0 18px 38px -18px color-mix(in oklab, var(--t-accent) 30%, transparent);
}
.fp-card .f-ar {
position: absolute; top: 10px; right: 14px;
font-family: "Amiri", serif; font-size: 1.4rem;
color: color-mix(in oklab, var(--t-accent) 38%, transparent);
}
.fp-card--top {
border-color: var(--t-accent);
box-shadow: 0 16px 40px -22px color-mix(in oklab, var(--t-accent) 45%, transparent);
}
.fp-card .fp-badge {
align-self: flex-start;
font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: #fff; background: var(--t-accent);
padding: 4px 10px; border-radius: 999px;
margin-bottom: 8px;
}
.fp-card--online {
background: linear-gradient(135deg, color-mix(in oklab, var(--t-accent) 5%, #fff), #fff);
border-style: dashed;
}
.fp-card h4 { font-size: var(--fs-lg); font-weight: 700; }
.fp-card .f-desc { color: var(--ink-600); font-size: var(--fs-sm); margin-top: 6px; line-height: 1.5; min-height: 2.6em; }
.fp-card .fp-price { margin-top: auto; padding-top: var(--s-4); }
.fp-card .fp-label {
display: block;
font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-500); font-weight: 600;
}
.fp-card .fp-line { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.fp-card .fp-val {
color: var(--t-accent);
font-family: var(--font-display);
font-size: clamp(1.9rem, 3.6vw, 2.35rem);
font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
}
.fp-card .fp-cur { color: var(--ink-600); font-size: var(--fs-sm); }
.fp-card .fp-anchor {
display: block; margin-top: 6px;
font-size: 12px; color: var(--ink-500); line-height: 1.45;
}
.fp-card .fp-anchor s { color: var(--ink-400); }
.fp-card .fp-anchor strong { color: var(--t-accent); font-weight: 700; }
.fp-more {
grid-column: 1 / -1;
margin-top: var(--s-2);
}
.fp-more > summary {
cursor: pointer; list-style: none;
display: inline-flex; align-items: center; gap: 6px;
font-weight: 600; font-size: var(--fs-sm);
color: var(--t-accent);
padding: 10px 16px; border-radius: 999px;
background: color-mix(in oklab, var(--t-accent) 8%, transparent);
transition: background .2s;
}
.fp-more > summary::-webkit-details-marker { display: none; }
.fp-more > summary::after { content: "▾"; transition: transform .2s; }
.fp-more[open] > summary::after { transform: rotate(180deg); }
.fp-more > summary:hover { background: color-mix(in oklab, var(--t-accent) 14%, transparent); }