:root{
--bg:#04060c;
--bg-2:#06091a;
--panel:rgba(12,19,32,.55);
--panel-2:rgba(15,27,47,.65);
--text:#eef6ff;
--muted:#a7b8d4;
--line:rgba(128, 174, 255, .22);
--blue:#46d8ff;
--blue-2:#2b6adf;
--blue-glow:rgba(70,216,255,.55);
--navy:#162a5c;
--navy-deep:#0a1535;
--gold:#f3c86a;
--silver:#d7e0ef;
--bronze:#d39a63;
--diamond:#b8f6ff;
--success:#2ee6a6;
--radius: 26px;
--radius-sm: 18px;
--max: 1200px;
/* Typography */
--font-head: 'Cairo', 'Tajawal', sans-serif;
--font-body: 'Tajawal', system-ui, -apple-system, sans-serif;
/* Consistent spacing scale (8px rhythm) */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
/* Standard easing for micro-interactions */
--ease: cubic-bezier(.4, 0, .2, 1);
}
*{box-sizing:border-box; margin:0; padding:0;}
a{ transition: color .2s var(--ease); }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:8px; }
::selection{ background:rgba(70,216,255,.28); color:#fff; }
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
font-family: 'Tajawal', system-ui, -apple-system, sans-serif;
background: #05070e;
color:var(--text);
line-height:1.75;
overflow-x:hidden;
min-height:100vh;
position:relative;
}
.site-greeting{text-align:center;font-size:1rem;font-weight:700;
color:#88e8ff;letter-spacing:.03em;padding:14px 0 0;
font-family:'Tajawal',sans-serif;text-shadow:0 0 16px rgba(70,216,255,.35);}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1, h2, h3, h4{font-family: var(--font-head); letter-spacing:-.01em; font-weight:800;}
/* ===== Dark-navy page background with small drifting glow circles (CSS only, no lag) ===== */
.page-bg{
position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none;
background:
radial-gradient(circle at 50% -8%, rgba(70,216,255,.10), transparent 42%),
radial-gradient(circle at 88% 14%, rgba(240,200,74,.05), transparent 38%),
radial-gradient(circle at 10% 82%, rgba(157,123,255,.05), transparent 40%),
#05070e;
}
.pg-glow{ display:none !important; }
.pg-g1{ width:220px; height:220px; left:7%; top:11%;
background:radial-gradient(circle, rgba(70,216,255,.42) 0%, transparent 68%);
animation:pgDrift1 14s ease-in-out infinite; }
.pg-g2{ width:160px; height:160px; right:9%; top:19%;
background:radial-gradient(circle, rgba(240,200,74,.36) 0%, transparent 68%);
animation:pgDrift2 17s ease-in-out infinite; }
.pg-g3{ width:190px; height:190px; left:13%; bottom:16%;
background:radial-gradient(circle, rgba(157,123,255,.38) 0%, transparent 68%);
animation:pgDrift3 15s ease-in-out infinite; }
.pg-g4{ width:150px; height:150px; right:14%; bottom:21%;
background:radial-gradient(circle, rgba(43,106,223,.42) 0%, transparent 68%);
animation:pgDrift4 19s ease-in-out infinite; }
.pg-g5{ width:140px; height:140px; left:47%; top:42%;
background:radial-gradient(circle, rgba(70,216,255,.30) 0%, transparent 68%);
animation:pgDrift1 16s ease-in-out infinite; }
@keyframes pgDrift1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(3vw,4vh) scale(1.12)} }
@keyframes pgDrift2{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-3vw,3vh) scale(1.1)} }
@keyframes pgDrift3{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4vw,-3vh) scale(1.14)} }
@keyframes pgDrift4{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-3vw,-4vh) scale(1.08)} }
@media(prefers-reduced-motion:reduce){ .pg-glow{ animation:none !important; } }
/* Atmospheric vignette above glows (subtle edges only, keeps glows bright) */
.atmosphere{
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
background:
radial-gradient(ellipse at 50% 0%, transparent 70%, rgba(4,8,20,.30) 100%),
radial-gradient(ellipse at 50% 100%, transparent 65%, rgba(4,8,20,.40) 100%);
}
/* Subtle grain noise for premium feel */
.grain{
display:none !important;
position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode:overlay;
}
/* ===== Wrap ===== */
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px; position:relative;}
/* ===== Topbar ===== */
.topbar{
position:sticky; top:0; z-index:50;
background: rgba(6,8,16,.94);
border-bottom:1px solid rgba(70,216,255,.08);
}
.topbar-inner{
display:flex; align-items:center; justify-content:space-between;
min-height:74px; gap:16px;
}
.brand{display:flex; align-items:center; gap:14px; min-width:0;}
.brand-mark{
width:48px; height:48px; border-radius:14px;
display:grid; place-items:center;
background: transparent;
overflow:hidden;
flex-shrink:0;
}
.brand-mark img{
width:100%; height:100%;
object-fit:contain;
filter:
drop-shadow(0 0 10px rgba(70,216,255,.55))
drop-shadow(0 0 18px rgba(70,216,255,.25));
}
.brand-text{display:flex; flex-direction:column; gap:0; min-width:0}
.brand-text strong{font-family:'Tajawal'; font-size:1.18rem; letter-spacing:.4px}
.brand-text span{font-size:.78rem; color:var(--muted); letter-spacing:.3px}
.nav{display:none; align-items:center; gap:24px; color:var(--muted); font-size:.95rem; font-weight:500;}
@media (min-width:920px){.nav{display:flex} .menu-toggle{display:none !important;}}
.nav a{transition: color .2s;}
.nav a:hover{color:var(--blue)}
.nav-cta{
padding:11px 18px;
border-radius:999px;
background: linear-gradient(135deg, rgba(70,216,255,.20), rgba(22,42,92,.80));
border:1px solid rgba(70,216,255,.40);
box-shadow: 0 0 18px rgba(70,216,255,.20);
color:var(--text) !important;
font-weight:700;
white-space:nowrap;
}
.nav-cta.login{
background: linear-gradient(135deg, #001430 0%, #0044aa 50%, #36b8e8 100%);
border:1px solid #50c8f0;
box-shadow: 0 0 22px rgba(55,190,230,.55);
}
/* ===== Side menu (Mobile) ===== */
/* ── The button ──────────────────────────────────────────────────
Only transform and opacity are animated. Both are handled by the
compositor, so the main thread is never asked to lay the page out again
mid-gesture, which is what makes a menu feel like it catches. */
.menu-toggle{
position:fixed; top:18px; right:18px;
width:48px; height:48px;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
cursor:pointer; padding:0;
z-index:1100;
background: rgba(6,9,18,.66);
backdrop-filter: blur(14px) saturate(1.3);
-webkit-backdrop-filter: blur(14px) saturate(1.3);
border-radius:15px;
border:1px solid rgba(70,216,255,.28);
box-shadow:
0 2px 10px rgba(0,0,0,.4),
0 0 0 0 rgba(70,216,255,0),
inset 0 1px 0 rgba(255,255,255,.06);
transition:
transform .32s cubic-bezier(.34,1.4,.5,1),
box-shadow .3s ease,
border-color .3s ease;
-webkit-tap-highlight-color: transparent;
}
.menu-toggle:hover{
border-color:rgba(70,216,255,.55);
box-shadow:
0 4px 18px rgba(0,0,0,.45),
0 0 22px rgba(70,216,255,.28),
inset 0 1px 0 rgba(255,255,255,.1);
}
/* A short, definite press. The spring on release is what makes a button
feel physical rather than merely responsive. */
.menu-toggle:active{ transform:scale(.9); }
.menu-toggle.active{
border-color:rgba(70,216,255,.6);
box-shadow:
0 4px 20px rgba(0,0,0,.5),
0 0 26px rgba(70,216,255,.3),
inset 0 1px 0 rgba(255,255,255,.1);
}
.mt-bar{
display:block; width:22px; height:2px; border-radius:2px;
background:#eef6ff;
/* The bars move on slightly different curves and a hair apart in time.
Perfectly synchronised motion reads as mechanical; a few tens of
milliseconds of offset is what makes it look like one object folding
rather than three lines being repositioned. */
transition:
transform .42s cubic-bezier(.36,1.5,.4,1),
opacity .2s ease,
width .34s cubic-bezier(.36,1.5,.4,1);
transform-origin:center;
will-change: transform;
}
/* Closed: the middle bar is shorter, which gives the icon a shape rather
than three identical lines. */
.mt-bar:nth-child(2){ width:15px; }
.menu-toggle:hover .mt-bar:nth-child(2){ width:22px; }
/* Open: the outer two fold into a cross and the middle collapses inward
and fades, so it reads as being absorbed rather than blinking out. */
.menu-toggle.active .mt-bar:nth-child(1){
transform: translateY(7px) rotate(45deg);
}
.menu-toggle.active .mt-bar:nth-child(2){
opacity:0; width:0; transform: scaleX(0);
transition-delay: 0s, 0s, 0s;
}
.menu-toggle.active .mt-bar:nth-child(3){
transform: translateY(-7px) rotate(-45deg);
}
/* Closing, the middle returns last: the cross opens, then the line comes
back. Doing it all at once looks like a glitch. */
.menu-toggle:not(.active) .mt-bar:nth-child(2){
transition-delay: .1s, .12s, .1s;
}
.side-menu{
position:fixed; top:0; right:0;
width:300px; max-width:85vw; height:100vh;
background: linear-gradient(180deg, rgba(6,9,18,.985), rgba(4,6,12,.995));
padding:80px 26px 26px;
transform: translate3d(105%,0,0);
transition: transform .46s cubic-bezier(.16,1,.3,1);
will-change: transform;
z-index:1099;
overflow-y:auto;
overscroll-behavior: contain;
border-left:1px solid rgba(70,216,255,.15);
box-shadow: -20px 0 60px rgba(0,0,0,.6);
visibility:hidden;
display:flex; flex-direction:column;
}
.side-menu.active{ transform: translate3d(0,0,0); visibility:visible; }
.side-menu a{
display:flex; align-items:center; gap:13px;
margin:4px 0;
color:var(--text); font-weight:600; font-size:1rem;
padding:13px 12px;
border-radius:12px;
border-bottom:1px solid rgba(70,216,255,.08);
transition: color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.side-menu a svg{ width:20px; height:20px; color:var(--blue); flex-shrink:0; transition:transform .2s var(--ease); }
.side-menu a:hover{color:var(--blue); background:rgba(70,216,255,.07); transform: translateX(-4px);}
.side-menu a:hover svg{ transform:scale(1.12); }
/* Login section in side menu */
.side-login-block{
margin: 0 0 22px;
padding: 18px 16px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(0,68,170,.30), rgba(54,184,232,.20));
border: 1px solid rgba(80,200,240,.50);
box-shadow: 0 0 24px rgba(55,190,230,.30);
}
.side-login-btn{
display:flex !important; align-items:center; justify-content:center;
gap:8px; margin:0 0 12px !important; padding:13px 14px;
border-radius:999px; border:1px solid #50c8f0 !important;
background: linear-gradient(135deg, #001430 0%, #0044aa 50%, #36b8e8 100%) !important;
box-shadow: 0 0 20px rgba(55,190,230,.65);
color:#fff !important; font-weight:800; text-align:center;
}
.side-login-btn svg{width:18px; height:18px;}
.no-account{
display:block; text-align:center;
font-size:.85rem; color:#cfe9ff !important;
font-weight:500 !important; line-height:1.6;
border-bottom:none !important; margin:0 !important;
}
.no-account-link{
display:inline !important; margin:0 !important;
border:none !important; padding:0 !important;
color:#7fe9ff !important; font-weight:700 !important;
text-shadow: 0 0 10px rgba(127,233,255,.7);
text-decoration: underline;
}
/* Fixed login button (desktop right corner) */
.login-fixed{
display:none;
position:fixed; top:18px; left:18px; z-index:1100;
align-items:center; gap:8px;
padding:11px 20px;
border-radius:999px;
background: linear-gradient(135deg, #001430 0%, #0044aa 50%, #36b8e8 100%);
border:1px solid #50c8f0;
box-shadow: 0 0 22px rgba(55,190,230,.70), 0 0 42px rgba(55,190,230,.25);
color:#fff; font-weight:800; font-size:.95rem;
transition: transform .25s, box-shadow .25s;
}
.login-fixed:hover{
transform: translateY(-2px);
box-shadow: 0 0 30px rgba(55,190,230,.90), 0 0 60px rgba(55,190,230,.40);
}
.login-fixed svg{width:18px; height:18px;}
/* ===== Full screen video hero =====
The clip fills the viewport and the message sits over it, matching the
treatment used across the group. Sizes follow the previous intro so the
type scale on this page does not shift. */
.video-hero{
position:relative;
min-height:100svh;
display:flex; align-items:center; justify-content:center;
overflow:hidden;
margin:0 0 -12px;
}
.vh-media{ position:absolute; inset:0; z-index:0; }
.vh-video{ width:100%; height:100%; object-fit:cover; opacity:.9; }
.vh-veil{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:
linear-gradient(180deg, rgba(8,16,38,.72) 0%, rgba(8,16,38,.3) 30%, rgba(8,16,38,.45) 62%, #0b1730 100%),
radial-gradient(95% 75% at 50% 45%, rgba(8,16,38,.45), transparent 72%);
}
.vh-inner{
position:relative; z-index:2;
width:100%; max-width:660px;
padding:110px 20px 70px;
text-align:center;
display:flex; flex-direction:column; align-items:center;
}
.vh-logo{
width:min(150px, 40%);
aspect-ratio:1/1; object-fit:contain;
filter:drop-shadow(0 0 20px rgba(70,216,255,.34));
margin-bottom:4px;
}
.vh-head{
font-size:clamp(1.5rem, 5.8vw, 2.15rem);
line-height:1.32; margin:6px 0 0;
font-weight:800; color:#eaf6ff;
text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.vh-head span{ color:#46d8ff; }
.vh-tag{
color:rgba(255,255,255,.78);
font-size:.98rem; line-height:1.8;
max-width:40ch; margin:14px auto 0;
text-shadow:0 1px 16px rgba(0,0,0,.45);
}
.vh-cta{
display:inline-block; margin-top:26px;
padding:13px 30px; border-radius:999px;
background:linear-gradient(135deg,#46d8ff,#2b9fd4);
color:#04121f; font-weight:800; font-size:.95rem;
text-decoration:none;
box-shadow:0 10px 30px rgba(70,216,255,.28);
transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);
}
.vh-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 38px rgba(70,216,255,.4); }
/* A thin rail that fills downward with a wide chevron beneath it. The rail
gives the gesture direction and patience; the chevron confirms it. */
.vh-scroll{
position:absolute; bottom:22px; left:50%;
transform:translateX(-50%);
z-index:3;
display:flex; flex-direction:column; align-items:center; gap:11px;
color:#46d8ff;
text-decoration:none;
padding:6px 18px 4px;
}
.vh-rail{
position:relative;
width:1px; height:52px;
background:linear-gradient(180deg, rgba(70,216,255,.06), rgba(70,216,255,.22));
overflow:hidden;
display:block;
}
/* the travelling light inside the rail */
.vh-rail i{
position:absolute; left:0; right:0; top:0;
height:18px;
background:linear-gradient(180deg, rgba(70,216,255,0), #7ce8ff);
animation:vhRail 2.4s cubic-bezier(.45,0,.35,1) infinite;
}
@keyframes vhRail{
0% { transform:translateY(-100%); opacity:0; }
22% { opacity:1; }
78% { opacity:1; }
100% { transform:translateY(52px); opacity:0; }
}
.vh-chev{
width:26px; height:15px;
opacity:.55;
animation:vhChev 2.4s cubic-bezier(.45,0,.35,1) infinite;
}
@keyframes vhChev{
0%,60% { opacity:.4; transform:translateY(0); }
78% { opacity:1; transform:translateY(3px); }
100% { opacity:.4; transform:translateY(0); }
}
.vh-scroll:hover .vh-chev{ opacity:1; }
.vh-scroll:hover .vh-rail{ background:linear-gradient(180deg, rgba(70,216,255,.12), rgba(70,216,255,.4)); }
@media (max-width:600px){
.vh-inner{ padding:96px 20px 76px; }
.vh-logo{ width:min(122px, 36%); }
}
@media (prefers-reduced-motion: reduce){
.vh-cta{ transition:none; }
.vh-rail i, .vh-chev{ animation:none; }
.vh-rail i{ opacity:.6; }
}
/* ===== Hero banner image (full width) ===== */
/* ===== Logo center - TRANSPARENT, NO background ===== */
/* ===== Cohesive intro hero (kills the empty void) ===== */
.intro-hero{
position:relative; z-index:2;
max-width:640px; margin:14px auto 0; padding:0 18px 30px;
display:flex; flex-direction:column; align-items:center; text-align:center;
}
/* Fancy box holding the copy + CTA */
@keyframes introGlow{ 0%,100%{opacity:.55} 50%{opacity:1} }
.intro-scroll{
margin-top:16px; font-size:.78rem; letter-spacing:.15em;
color:rgba(255,255,255,.38); animation: introBob 2.2s ease-in-out infinite;
}
@keyframes introBob{ 0%,100%{transform:translateY(0);opacity:.55} 50%{transform:translateY(4px);opacity:1} }
@keyframes logoFloat{
0%,100%{ transform: translateY(0); }
50%{ transform: translateY(-8px); }
}
/* ===== Section base ===== */
section{padding: 48px 0; position:relative;}
@media (min-width:768px){ section{padding: 70px 0;} }
.section-head{
display:flex; flex-direction:column; gap:8px;
align-items:flex-start; margin-bottom:32px;
}
.section-head .eyebrow{
font-size:.82rem; letter-spacing:.4em; color:var(--blue);
text-transform:uppercase; font-weight:600;
text-shadow: 0 0 12px rgba(70,216,255,.45);
}
.section-head h2{
font-size: clamp(1.7rem, 4vw, 2.6rem);
line-height:1.15;
background: linear-gradient(180deg, #ffffff 0%, #b8e8ff 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.section-head p{
color:var(--muted);
font-size:1rem;
max-width: 60ch;
}
/* ===== Glass card base ===== */
.glass{
background:
linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) padding-box,
linear-gradient(135deg, rgba(70,216,255,.4), rgba(255,255,255,.04) 50%, rgba(157,123,255,.28)) border-box;
backdrop-filter: blur(6px) saturate(140%);
-webkit-backdrop-filter: blur(6px) saturate(140%);
border:1px solid transparent;
border-radius: var(--radius);
box-shadow:
0 0 0 1px rgba(70,216,255,.05) inset,
0 30px 70px rgba(0,0,0,.50),
0 0 30px rgba(70,216,255,.08);
position:relative;
overflow:hidden;
}
.glass::before{
content:"";
position:absolute; inset:0;
background: radial-gradient(circle at 30% 0%, rgba(70,216,255,.10), transparent 50%);
pointer-events:none;
}
/* ===== Hero content ===== */
.hero{ padding-top:14px; }
.hero-grid{ display:grid; gap:24px; }
.hero-main{ padding:28px 24px; }
@media (min-width:768px){ .hero-main{ padding:36px 32px; } }
.badge-row{
display:flex; flex-wrap:wrap; gap:8px;
margin-bottom:20px;
}
.badge{
padding:7px 14px; border-radius:999px;
font-size:.82rem; font-weight:600;
color:var(--muted);
background: rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.10);
transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.badge:hover{ transform:translateY(-2px); background:rgba(70,216,255,.08); border-color:rgba(70,216,255,.30); color:#e9fbff; }
.badge.accent{
color:#e9fbff;
background: linear-gradient(135deg, rgba(70,216,255,.18), rgba(22,42,92,.32));
border-color: rgba(70,216,255,.40);
box-shadow: 0 0 14px rgba(70,216,255,.25);
}
.hero h1{
font-size: clamp(1.85rem, 5.5vw, 3.6rem);
line-height:1.18; letter-spacing:-.02em;
margin-bottom:14px; font-weight:700;
}
.hero h1 .accent{
background: linear-gradient(110deg, var(--blue) 0%, #ffffff 50%, var(--blue) 100%);
background-size: 200% 100%;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
animation: shimmer 6s linear infinite;
}
@keyframes shimmer{ 0%{background-position: 0% 0%;} 100%{background-position: 200% 0%;} }
.hero p.lead{
color:var(--muted);
font-size:1.04rem;
max-width: 60ch;
margin-bottom:24px;
}
.hero p.lead strong{ color:#cfe9ff; font-weight:700; }
.cta-row{
display:flex; flex-wrap:wrap; gap:12px;
margin-bottom:30px;
}
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:14px 22px;
border-radius:999px;
border:1px solid transparent;
font-weight:700; font-size:.98rem;
transition: transform .25s, box-shadow .25s, background .25s;
cursor:pointer;
font-family:'Tajawal', sans-serif;
}
.btn-primary{
background: linear-gradient(135deg, #46d8ff 0%, #2b6adf 100%);
color:#001428;
box-shadow: 0 0 26px rgba(70,216,255,.55), 0 14px 38px rgba(43,106,223,.30);
}
.btn-primary:hover{
transform: translateY(-3px);
box-shadow: 0 0 36px rgba(70,216,255,.80), 0 18px 50px rgba(43,106,223,.40);
}
.btn-ghost{
background: rgba(255,255,255,.04);
border:1px solid rgba(70,216,255,.30);
color:var(--text);
}
.btn-ghost:hover{
background: rgba(70,216,255,.10);
box-shadow: 0 0 22px rgba(70,216,255,.25);
}
.svg-icon{width:20px; height:20px;}
.hero-metrics{
display:grid; grid-template-columns: repeat(3, 1fr);
gap:14px;
padding-top:22px;
border-top:1px solid rgba(70,216,255,.10);
}
.metric{display:flex; flex-direction:column; gap:2px; transition: transform .25s var(--ease);}
.metric:hover{ transform:translateY(-3px); }
.metric strong{ transition: text-shadow .25s var(--ease), transform .25s var(--ease); }
.metric:hover strong{ text-shadow:0 0 22px rgba(70,216,255,.7); }
.metric strong{
font-family:'Tajawal';
font-size: clamp(1.3rem, 3.5vw, 1.7rem);
color:var(--blue);
white-space:nowrap;
text-shadow: 0 0 14px rgba(70,216,255,.45);
}
.metric span{font-size:.82rem; color:var(--muted); line-height:1.35;}
/* Aside cards */
.hero-aside{ display:flex; flex-direction:column; gap:16px; }
/* The aside's three short cards used to sit in their own column beside
a much taller main card, which left most of a screen height empty
below them. On desktop the hero is now one column: the main card
full width, the three cards as an even row underneath it. */
@media (min-width:980px){
.hero-grid{ grid-template-columns: 1fr; }
.hero-aside{ flex-direction:row; align-items:stretch; gap:20px; }
.hero-aside > *{ flex:1 1 0; min-width:0; }
}
.aside-card{
padding:22px 22px;
transition: transform .35s;
}
.aside-card:hover{ transform: translateY(-4px); }
.aside-card h3{
font-size:1.05rem;
margin-bottom:8px;
color:var(--blue);
text-shadow: 0 0 14px rgba(70,216,255,.35);
}
.aside-card p{ color:var(--muted); font-size:.94rem; line-height:1.75; }
.aside-note{
padding:18px 20px;
background: linear-gradient(135deg, rgba(70,216,255,.10), rgba(22,42,92,.20));
border:1px solid rgba(70,216,255,.30);
border-radius: var(--radius-sm);
box-shadow: 0 0 22px rgba(70,216,255,.15);
}
.aside-note strong{display:block; color:var(--blue); margin-bottom:4px; font-family:'Tajawal';}
.aside-note p{ color:#cfe9ff; font-size:.92rem; }
/* ===== About section ===== */
.about{ display:grid; gap:18px; }
@media (min-width:880px){ .about{ grid-template-columns: 1fr 1fr; } }
.about .card{ padding:28px 24px; transition: transform .35s, box-shadow .35s; }
.about .card:hover{ transform: translateY(-4px); box-shadow: 0 30px 70px rgba(0,0,0,.50), 0 0 30px rgba(70,216,255,.18); }
.about p{color:var(--muted); margin-bottom:18px; line-height:1.85;}
.bullets{ list-style:none; display:grid; gap:10px; }
.bullets li{ display:flex; gap:10px; align-items:flex-start; color:var(--text); }
.bullets li span:first-child{ flex-shrink:0; }
.dot{
display:inline-block; width:10px; height:10px;
border-radius:50%;
background: var(--blue);
box-shadow: 0 0 12px rgba(70,216,255,.7);
margin-top:9px;
}
/* ===== Process steps ===== */
.process{
display:grid; gap:18px;
grid-template-columns: 1fr;
}
@media (min-width:600px){ .process{ grid-template-columns: 1fr 1fr; } }
@media (min-width:1000px){ .process{ grid-template-columns: repeat(4, 1fr); } }
.step{
padding:24px 20px;
transition: transform .35s, box-shadow .35s;
position:relative;
}
.step:hover{ transform: translateY(-6px); box-shadow: 0 0 40px rgba(70,216,255,.25); }
.step .num{
display:grid; place-items:center;
width:54px; height:54px;
border-radius:50%;
background: linear-gradient(135deg, rgba(70,216,255,.25), rgba(22,42,92,.90));
border:1px solid rgba(70,216,255,.55);
box-shadow: 0 0 22px rgba(70,216,255,.45);
font-family:'Tajawal'; font-size:1.4rem; font-weight:700;
color:#fff; margin-bottom:16px;
text-shadow: 0 0 14px rgba(70,216,255,.6);
}
.step h3{ font-size:1.08rem; margin-bottom:8px; color:var(--text); }
.step p{ color:var(--muted); font-size:.92rem; line-height:1.75; }
/* ===== Features ===== */
.features{
display:grid; gap:18px;
grid-template-columns: 1fr;
}
@media (min-width:780px){ .features{ grid-template-columns: repeat(3, 1fr); } }
.feature{
padding:26px 22px;
transition: transform .35s, box-shadow .35s;
}
.feature:hover{ transform: translateY(-5px); }
.feature strong{
display:block; font-family:'Tajawal'; font-size:1.1rem; margin-bottom:10px;
color:var(--blue); text-shadow: 0 0 14px rgba(70,216,255,.40);
}
.feature p{ color:var(--muted); font-size:.94rem; line-height:1.75; }
/* ===== Packages ===== */
.limited-badge{
display:inline-block;
padding:8px 16px;
border-radius:999px;
background: linear-gradient(135deg, #ff7e30, #ffd54a);
color:#2a1100; font-weight:800; font-size:.85rem;
box-shadow: 0 0 24px rgba(255,180,80,.55);
margin-top:8px;
}
.packages{
display:grid; gap:20px;
grid-template-columns: 1fr;
}
@media (min-width:680px){ .packages{ grid-template-columns: 1fr 1fr; } }
@media (min-width:1080px){ .packages{ grid-template-columns: repeat(3, 1fr); } }
.package{
padding:26px 22px;
border-radius: var(--radius);
position:relative;
overflow:hidden;
border:1px solid rgba(70,216,255,.14);
box-shadow: 0 20px 50px rgba(0,0,0,.45);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.package:hover{
transform: translateY(-6px);
border-color: rgba(70,216,255,.42);
box-shadow: 0 28px 62px rgba(0,0,0,.5), 0 0 42px rgba(70,216,255,.12);
}
.pkg-head{
display:flex; justify-content:space-between; align-items:flex-start;
gap:14px; margin-bottom:16px;
}
.pkg-name h3{
font-size:1.4rem; margin-bottom:4px;
color:#ffffff;
text-shadow: 0 2px 14px rgba(0,0,0,.7), 0 0 18px rgba(255,255,255,.15);
}
.pkg-tag{
font-size:.85rem;
color:#ffffff;
font-weight:600;
text-shadow: 0 1px 8px rgba(0,0,0,.65);
}
.price{ text-align:left; }
.price del{
display:block;
color:rgba(255,255,255,.65);
font-size:.92rem;
text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.price strong{
display:block; font-family:'Tajawal';
font-size:1.25rem; color:#ffffff;
text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.price small{
display:inline-block; font-size:.74rem; font-weight:600;
color:#88e8ff;
background:rgba(70,216,255,.10);
border:1px solid rgba(70,216,255,.22);
padding:5px 12px; border-radius:16px;
max-width:100%; white-space:normal; line-height:1.5; text-align:center;
}
.pkg-list{ list-style:none; display:grid; gap:10px; margin-bottom:18px; }
.pkg-list li{
display:flex; gap:10px; align-items:flex-start;
color:#ffffff;
font-weight:600; font-size:.94rem;
text-shadow: 0 1px 8px rgba(0,0,0,.65);
}
.check{
flex-shrink:0;
display:grid; place-items:center;
width:22px; height:22px;
border-radius:50%;
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.35);
color:#fff; font-size:.78rem; font-weight:800;
margin-top:2px;
box-shadow: 0 0 10px rgba(255,255,255,.20);
}
.pkg-foot{
margin-top:12px;
padding:10px 14px;
border-radius:12px;
background: rgba(0,0,0,.35);
backdrop-filter: blur(4px);
color:#ffffff;
font-weight:700; font-size:.92rem;
text-shadow: 0 1px 8px rgba(0,0,0,.5);
border: 1px solid rgba(255,255,255,.10);
}
/* Package color themes */
.bronze{
background: linear-gradient(135deg, #1e0e04 0%, #5a2e0e 40%, #c47a3a 100%) !important;
border:2px solid #c8844a;
box-shadow: 0 0 40px rgba(196,122,58,.50), inset 0 0 30px rgba(200,140,80,.10);
}
.silver{
background: linear-gradient(135deg, #141820 0%, #2a3550 40%, #a8bcd8 100%) !important;
border:2px solid #c0d4ee;
box-shadow: 0 0 40px rgba(160,190,230,.50), inset 0 0 30px rgba(180,210,240,.10);
}
.gold{
background: linear-gradient(135deg, #160d00 0%, #503800 40%, #e8b83a 100%) !important;
border:2px solid #f0c84a;
box-shadow: 0 0 50px rgba(235,185,50,.70), inset 0 0 35px rgba(240,200,70,.14);
}
.diamond{
background: linear-gradient(135deg, #001018 0%, #003352 40%, #60d8f0 100%) !important;
border:2px solid #88e8ff;
box-shadow: 0 0 50px rgba(80,210,240,.65), inset 0 0 35px rgba(120,230,250,.12);
}
.group{
background: linear-gradient(135deg, #001208 0%, #084d25 40%, #22b872 100%) !important;
border:2px solid #30d88a;
box-shadow: 0 0 40px rgba(40,190,110,.55), inset 0 0 30px rgba(60,210,130,.10);
}
.group .pkg-foot{ background:rgba(0,0,0,.40); }
/* ===== Family advantage ===== */
.advantage{ display:grid; gap:18px; }
@media (min-width:900px){ .advantage{ grid-template-columns: 1.1fr .9fr; } }
.family-section{
background: linear-gradient(135deg, #001508 0%, #004d28 40%, #00aa60 100%) !important;
border:2px solid #00cc70;
box-shadow: 0 0 38px rgba(0,180,90,.55), inset 0 0 30px rgba(0,200,100,.10);
padding:28px 24px;
}
.family-section p{
color:#e8fff2; font-weight:600;
margin-bottom:18px; line-height:1.85;
}
.adv-grid{
display:grid; gap:14px;
grid-template-columns: 1fr;
}
@media (min-width:540px){ .family-section .adv-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width:540px){ .advantage > .card .adv-grid{ grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width:539px){ .advantage > .card .adv-grid{ grid-template-columns: 1fr; } }
.adv-item{
padding:14px 14px;
background: rgba(0,0,0,.22);
border-radius:16px;
color:#fff;
font-weight:600;
font-size:.92rem;
border:1px solid rgba(255,255,255,.10);
}
.adv-item strong{
display:block;
color:#9aff96;
font-family:'Tajawal';
font-size:1rem;
margin-bottom:4px;
text-shadow: 0 0 12px rgba(40,255,150,.4);
}
.advantage > .card{ padding:26px 22px; }
.advantage > .card .adv-item strong{ color:var(--blue); text-shadow: 0 0 12px rgba(70,216,255,.40); }
.advantage > .card .adv-item{ background: rgba(70,216,255,.08); border:1px solid rgba(70,216,255,.22); color:var(--text); }
/* ===== Contact ===== */
.contact{ display:grid; gap:18px; }
@media (min-width:900px){ .contact{ grid-template-columns: 1.25fr .75fr; } }
/* ===== Floating Sticky CTA - GOLD ===== */
.sticky-cta{
position:fixed;
bottom:18px;
left:50%;
transform: translateX(-50%) translateY(8px);
z-index:1050;
display:inline-flex;
align-items:center;
gap:10px;
padding:13px 22px;
border-radius: 999px;
background: linear-gradient(135deg, #b07d1c 0%, #e3b451 46%, #f6d585 100%);
border:1px solid rgba(255,226,150,.55);
box-shadow:
0 12px 30px rgba(0,0,0,.45),
inset 0 1px 0 rgba(255,255,255,.28);
color:#3a2600;
font-weight:800;
font-size:.95rem;
font-family:'Tajawal', sans-serif;
text-shadow: 0 1px 0 rgba(255,255,255,.25);
opacity:0;
pointer-events:none;
transition: opacity .4s ease, transform .4s ease, box-shadow .3s;
max-width: calc(100% - 30px);
white-space:nowrap;
}
.sticky-cta.visible{
opacity:1;
pointer-events:auto;
transform: translateX(-50%) translateY(0);
animation: goldPulse 3s ease-in-out infinite;
}
.sticky-cta:hover{
box-shadow:
0 16px 38px rgba(0,0,0,.5),
0 0 22px rgba(243,200,106,.35),
inset 0 1px 0 rgba(255,255,255,.3);
}
.sticky-cta svg{width:18px; height:18px;}
@keyframes goldPulse{
0%, 100%{ box-shadow: 0 10px 26px rgba(0,0,0,.42); }
50%{ box-shadow: 0 10px 26px rgba(0,0,0,.42), 0 0 20px rgba(243,200,106,.32); }
}
/* ===== Hero Gold CTA (under logo) ===== */
.hero-gold-cta-wrap{
display:flex;
justify-content:center;
padding: 20px 0 0;
width:100%;
position:relative;
z-index:3;
}
.hero-gold-cta{
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
padding: 16px 32px;
border-radius: 999px;
background: linear-gradient(135deg, #b07d1c 0%, #e3b451 46%, #f6d585 100%);
border:1px solid rgba(255,226,150,.55);
box-shadow:
0 12px 30px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.28);
color:#3a2600;
font-weight:800;
font-size: clamp(.95rem, 2.5vw, 1.1rem);
font-family:'Tajawal', sans-serif;
text-shadow: 0 1px 0 rgba(255,255,255,.25);
transition: transform .3s, box-shadow .3s;
text-align:center;
max-width: 100%;
}
.hero-gold-cta:hover{
transform: translateY(-3px);
box-shadow:
0 16px 38px rgba(0,0,0,.5),
0 0 24px rgba(243,200,106,.35),
inset 0 1px 0 rgba(255,255,255,.3);
}
.hero-gold-cta svg{ width:22px; height:22px; }
/* ===== Gold CTA inside side menu (first item) ===== */
.side-gold-cta{
display:flex !important;
align-items:center;
justify-content:center;
gap:10px;
margin: 0 0 14px !important;
padding: 14px 18px;
border-radius: 999px;
background: linear-gradient(135deg, #b07d1c 0%, #e3b451 46%, #f6d585 100%) !important;
border:1.5px solid #ffd97a !important;
box-shadow: 0 0 24px rgba(243,200,106,.75), 0 0 50px rgba(243,200,106,.30);
color:#1a0f00 !important;
font-weight:800 !important;
text-align:center;
text-shadow: 0 1px 0 rgba(255,255,255,.30);
}
.side-gold-cta svg{ width:18px; height:18px; }
.contact-card{ padding:28px 24px; }
.contact-card h2{
font-size: clamp(1.4rem, 3vw, 2rem);
margin-bottom:12px;
background: linear-gradient(180deg, #ffffff, #b8e8ff);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.contact-card p{ color:var(--muted); margin-bottom:22px; line-height:1.8; }
.contact-buttons{
display:flex; flex-direction:column; gap:10px;
}
@media (min-width:520px){ .contact-buttons{ flex-direction:row; flex-wrap:wrap; } }
.contact-buttons .btn{
flex:1 1 150px;
border-radius: 14px;
padding: 12px 18px;
font-size: .92rem;
}
.contact-buttons .btn .svg-icon{ width:18px; height:18px; }
.btn-whatsapp{
background: linear-gradient(135deg, #002914 0%, #00753a 60%, #1ec870 100%) !important;
border:1px solid #20d870;
box-shadow: 0 0 28px rgba(0,190,90,.65), 0 0 50px rgba(0,190,90,.25);
color:#fff !important;
}
.btn-whatsapp:hover{ box-shadow: 0 0 38px rgba(0,190,90,.85), 0 0 65px rgba(0,190,90,.35); transform: translateY(-3px); }
.btn-instagram{
background: linear-gradient(135deg, #4a0080 0%, #c0001a 50%, #e07800 100%) !important;
border:1px solid rgba(220,60,60,.75);
box-shadow: 0 0 28px rgba(210,40,40,.65), 0 0 50px rgba(220,120,30,.25);
color:#fff !important;
}
.btn-instagram:hover{ box-shadow: 0 0 38px rgba(210,40,40,.85), 0 0 65px rgba(220,120,30,.35); transform: translateY(-3px); }
.btn-call{
background: linear-gradient(135deg, #001430 0%, #0044aa 50%, #36b8e8 100%) !important;
border:1px solid #50c8f0;
box-shadow: 0 0 28px rgba(55,190,230,.70), 0 0 50px rgba(55,190,230,.25);
color:#fff !important;
}
.btn-call:hover{ box-shadow: 0 0 38px rgba(55,190,230,.90), 0 0 65px rgba(55,190,230,.35); transform: translateY(-3px); }
/* ===== Email Button ===== */
.btn-email{
background: linear-gradient(135deg, #001830 0%, #005090 50%, #46d8ff 100%) !important;
border:1px solid #46d8ff;
box-shadow: 0 0 28px rgba(70,216,255,.65), 0 0 50px rgba(70,216,255,.25);
color:#fff !important;
}
.btn-email:hover{ box-shadow: 0 0 38px rgba(70,216,255,.90), 0 0 65px rgba(70,216,255,.35); transform: translateY(-3px); }
/* ===== Contact Modal ===== */
.modal-overlay{
position:fixed; inset:0; z-index:800;
background:rgba(0,0,0,.70);
backdrop-filter: blur(8px);
display:none; place-items:center;
padding:16px;
}
.modal-overlay.open{ display:grid; }
.modal-box{
width:min(520px, 100%);
background: linear-gradient(180deg, rgba(8,18,40,.97), rgba(4,10,26,.98));
backdrop-filter: blur(12px);
border:1px solid rgba(70,216,255,.22);
border-radius:26px;
padding:32px 28px;
box-shadow:
0 0 0 1px rgba(70,216,255,.08) inset,
0 32px 80px rgba(0,0,0,.70),
0 0 60px rgba(70,216,255,.12);
position:relative;
animation: modalIn .35s cubic-bezier(.34,1.56,.64,1);
max-height:90vh;
overflow-y:auto;
}
@keyframes modalIn{
from{ transform:scale(.88) translateY(20px); opacity:0; }
to{ transform:scale(1) translateY(0); opacity:1; }
}
.modal-box::before{
content:"";
position:absolute; top:0; left:0; right:0; height:2px;
background: linear-gradient(90deg, transparent, var(--blue), rgba(43,106,223,.8), transparent);
border-radius:26px 26px 0 0;
}
.modal-head{
display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
margin-bottom:24px;
}
.modal-head-txt h3{
font-family:'Tajawal'; font-size:1.3rem; font-weight:800;
background: linear-gradient(135deg, #fff, var(--blue));
-webkit-background-clip:text; background-clip:text; color:transparent;
margin-bottom:5px;
}
.modal-head-txt p{ font-size:.85rem; color:var(--muted); }
.modal-close{
background:none; border:none; color:var(--muted); cursor:pointer;
padding:6px; border-radius:10px;
transition:color .2s, background .2s; flex-shrink:0;
}
.modal-close:hover{ color:var(--text); background:rgba(255,255,255,.08); }
.modal-close svg{ width:22px; height:22px; display:block; }
.form-fields{ display:flex; flex-direction:column; gap:16px; }
.form-field{ display:flex; flex-direction:column; gap:7px; }
.form-field label{
font-size:.82rem; font-weight:700;
color:var(--muted); letter-spacing:.04em;
display:flex; align-items:center; gap:6px;
}
.form-field label svg{ width:14px; height:14px; color:var(--blue); }
.form-field input,
.form-field textarea{
width:100%; padding:13px 16px;
border-radius:14px;
border:1px solid rgba(70,216,255,.18);
background:rgba(255,255,255,.04);
color:var(--text);
font-family:'Tajawal', sans-serif;
font-size:.96rem; font-weight:500;
outline:none;
transition:border-color .25s, background .25s, box-shadow .25s;
-webkit-appearance:none;
}
.form-field textarea{ resize:vertical; min-height:110px; line-height:1.7; }
.form-field input::placeholder,
.form-field textarea::placeholder{ color:rgba(138,160,192,.50); }
.form-field input:focus,
.form-field textarea:focus{
border-color:rgba(70,216,255,.55);
background:rgba(70,216,255,.06);
box-shadow:0 0 0 3px rgba(70,216,255,.10), 0 0 18px rgba(70,216,255,.10);
}
.btn-submit{
width:100%; padding:15px;
border:none; border-radius:14px;
background: linear-gradient(135deg, var(--blue-2) 0%, var(--blue) 100%);
color:#001428;
font-family:'Tajawal', sans-serif;
font-size:1.05rem; font-weight:800;
cursor:pointer;
box-shadow: 0 0 28px rgba(70,216,255,.50), 0 12px 32px rgba(43,106,223,.30);
transition:transform .25s, box-shadow .25s, opacity .2s;
display:flex; align-items:center; justify-content:center; gap:10px;
margin-top:4px;
}
.btn-submit:hover:not(:disabled){
transform:translateY(-2px);
box-shadow: 0 0 38px rgba(70,216,255,.75), 0 16px 42px rgba(43,106,223,.40);
}
.btn-submit:disabled{ opacity:.6; cursor:not-allowed; }
.btn-submit svg{ width:20px; height:20px; }
.form-success{
display:none; flex-direction:column; align-items:center;
gap:14px; text-align:center; padding:20px 0;
}
.form-success.show{ display:flex; }
.success-icon{
width:64px; height:64px; border-radius:50%;
background: linear-gradient(135deg, rgba(46,230,166,.20), rgba(46,230,166,.10));
border:1.5px solid rgba(46,230,166,.45);
box-shadow: 0 0 28px rgba(46,230,166,.40);
display:grid; place-items:center;
}
.success-icon svg{ width:30px; height:30px; color:#2ee6a6; }
.form-success h3{ font-size:1.15rem; font-weight:800; color:var(--text); }
.form-success p{ font-size:.9rem; color:var(--muted); line-height:1.7; }
.form-error-msg{
display:none; padding:11px 14px;
border-radius:12px;
background:rgba(255,90,114,.10);
border:1px solid rgba(255,90,114,.30);
color:#ffb0bc; font-size:.86rem; font-weight:600;
text-align:center;
}
.form-error-msg.show{ display:block; }
.contact-mini{ display:flex; flex-direction:column; gap:14px; }
.note-box{
padding:18px 20px;
background: rgba(70,216,255,.05);
border:1px solid rgba(70,216,255,.20);
border-radius:18px;
box-shadow: 0 0 18px rgba(70,216,255,.10);
}
.note-box strong{
display:block; color:var(--blue);
font-family:'Tajawal'; font-size:1rem; margin-bottom:4px;
text-shadow: 0 0 12px rgba(70,216,255,.40);
}
.note-box p{ color:var(--muted); font-size:.92rem; }
/* ═══ Booking Trigger Button ═══ */
/* Pulsing gold glow on button */
@keyframes bookBtnGlow{
0%,100%{box-shadow:0 0 38px rgba(43,106,223,.65),0 0 75px rgba(43,106,223,.30),0 0 120px rgba(240,200,74,.12),inset 0 0 28px rgba(70,216,255,.06);}
50%{box-shadow:0 0 50px rgba(240,200,74,.70),0 0 90px rgba(240,200,74,.35),0 0 130px rgba(43,106,223,.25),inset 0 0 28px rgba(240,200,74,.08);}
}
/* ═══ Booking Modal ═══ */
/* Modal animated background — fixed to overlay, won't scroll */
@keyframes bmLogoFloat{
0%,100%{transform:translate(-50%,-50%) scale(1);}
50%{transform:translate(-50%,-50%) scale(1.08);}
}
@keyframes bmPulse{
0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.85;}
50%{transform:translate(-50%,-50%) scale(1.15);opacity:1;}
}
@keyframes bmOrbit1{
0%{transform:translate(-50%,-50%) rotate(0deg) translateX(130px);}
100%{transform:translate(-50%,-50%) rotate(360deg) translateX(130px);}
}
@keyframes bmOrbit2{
0%{transform:translate(-50%,-50%) rotate(0deg) translateX(170px);}
100%{transform:translate(-50%,-50%) rotate(-360deg) translateX(170px);}
}
/* Contact modal animated background — same style as booking popup */
.cm-bg{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
display:flex;align-items:center;justify-content:center;}
.cm-bg-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:min(340px,76vw);height:min(340px,76vw);object-fit:contain;opacity:.42;
filter:drop-shadow(0 0 50px rgba(70,216,255,.90)) drop-shadow(0 0 100px rgba(70,216,255,.55));
animation:bmLogoFloat 5s ease-in-out infinite;}
.cm-glow1{position:absolute;top:50%;left:50%;width:min(480px,85vw);height:min(480px,85vw);border-radius:50%;
background:radial-gradient(circle,rgba(70,216,255,.28) 0%,rgba(70,216,255,.10) 40%,transparent 70%);
animation:bmPulse 4s ease-in-out infinite;}
.cm-glow2{position:absolute;top:50%;left:50%;width:200px;height:200px;border-radius:50%;
background:radial-gradient(circle,rgba(240,200,74,.35) 0%,rgba(240,200,74,.12) 40%,transparent 70%);
animation:bmOrbit1 6s linear infinite;}
.cm-glow3{position:absolute;top:50%;left:50%;width:150px;height:150px;border-radius:50%;
background:radial-gradient(circle,rgba(70,216,255,.28) 0%,transparent 65%);
animation:bmOrbit2 9s linear infinite;}
.modal-box{position:relative;z-index:2;}
/* Form */
@media(max-width:480px){}
.bm-input,
.bm-input:focus,
.bm-input::placeholder,
/* A select inherits .bm-input, but its dropdown list is drawn by the OS and
would default to dark-on-dark, so the options need explicit colours. */
select
select
/* Clock */
/* Submit */
/* ===== Footer ===== */
.footer{
margin-top:40px;
padding:32px 0;
border-top:1px solid rgba(70,216,255,.10);
background: linear-gradient(180deg, rgba(4,6,12,.0), rgba(4,6,12,.6));
}
.footer-inner{
display:flex; flex-direction:column; gap:8px;
align-items:center; text-align:center;
color:var(--muted); font-size:.88rem;
}
@media (min-width:680px){ .footer-inner{ flex-direction:row; justify-content:space-between; text-align:initial; } }
.footer-links a{
color:var(--muted); text-decoration:none; font-size:.86rem;
letter-spacing:.02em; border-bottom:1px solid transparent;
transition: color .2s ease, border-color .2s ease;
}
.footer-links a:hover{ color:var(--blue); border-color:rgba(70,216,255,.4); }
/* ===== Trust strip ===== */
.trust-strip{ display:flex; flex-wrap:wrap; gap:12px; margin:20px 0 6px; }
.trust-item{ flex:1; min-width:210px; border-radius:14px; padding:14px 16px; border:1px solid rgba(70,216,255,.16); background:rgba(70,216,255,.05); }
.trust-item.t-gold{ border-color:rgba(240,200,74,.18); background:rgba(240,200,74,.05); }
.trust-item.t-purple{ border-color:rgba(157,123,255,.18); background:rgba(157,123,255,.05); }
.trust-t{ font-weight:800; color:#88e8ff; margin-bottom:5px; font-size:.98rem; }
.trust-item.t-gold .trust-t{ color:#f0c84a; }
.trust-item.t-purple .trust-t{ color:#c3b0ff; }
.trust-d{ font-size:.9rem; color:rgba(255,255,255,.74); line-height:1.7; }
/* ===== Reveal animation ===== */
.reveal{
opacity:0;
transform: translateY(14px);
transition: opacity .4s ease, transform .4s ease;
}
.reveal.visible{ opacity:1; transform: translateY(0); }
/* Stagger children */
.stagger > *{ animation-fill-mode: both; }
/* ===== Mobile adjustments ===== */
@media (max-width:600px){
.hero-metrics{ grid-template-columns:1fr; gap:11px; }
.metric{ flex-direction:row; align-items:center; gap:12px; }
.metric strong{ font-size:1.15rem; min-width:92px; white-space:nowrap; }
.metric span{ font-size:.82rem; line-height:1.4; }
}
/* ===== Everyday phrases strip (signature element) ===== */
.phrase-strip{
position:relative; overflow:hidden; max-width:100vw; contain:paint;
padding: var(--sp-6) 0;
background:
radial-gradient(120% 100% at 50% 0%, rgba(70,216,255,.06), transparent 70%),
var(--navy-deep);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
direction:ltr;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.phrase-track{
display:flex; align-items:stretch; gap:var(--sp-4); width:max-content;
animation: phraseScroll 60s linear infinite;
will-change: transform;
}
.phrase-item{
display:inline-flex; align-items:center; gap:10px;
padding:11px 20px;
font-size:1rem; font-weight:600; letter-spacing:.1px;
color:#F6E4B8; white-space:nowrap;
background: linear-gradient(180deg, rgba(212,169,69,.10), rgba(212,169,69,.03));
border:1px solid rgba(212,169,69,.30);
border-radius:999px;
box-shadow: 0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.phrase-item::before{
content:''; flex:none; width:7px; height:7px; border-radius:50%;
background:var(--gold); box-shadow:0 0 10px rgba(243,200,106,.75);
}
@keyframes phraseScroll{
from{ transform:translate3d(0,0,0); }
to{ transform:translate3d(-50%,0,0); }
}
/* ===== Approach band (compact philosophy, complementary to About) ===== */
.approach-band{ padding: var(--sp-8) 0; }
.approach-grid{
display:grid; gap:var(--sp-6);
grid-template-columns:repeat(3,1fr);
}
.approach-item{ text-align:center; padding:0 var(--sp-4); }
.approach-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-bottom:var(--sp-3); }
.approach-dot.dot-sky{ background:var(--blue); box-shadow:0 0 14px var(--blue-glow); }
.approach-dot.dot-gold{ background:var(--gold); box-shadow:0 0 14px rgba(243,200,106,.55); }
.approach-dot.dot-purple{ background:#9d7bff; box-shadow:0 0 14px rgba(157,123,255,.5); }
.approach-item p{ font-size:1.05rem; font-weight:700; color:var(--text); line-height:1.6; margin:0; }
.approach-item p.ap-long{ font-size:.98rem; line-height:1.7; }
.ap-sub{ display:block; font-weight:600; font-size:.92rem; color:var(--muted); margin-top:6px; padding-inline-start:14px; position:relative; }
.ap-sub::before{ content:''; position:absolute; inline-size:6px; block-size:6px; border-radius:50%; background:var(--gold); inset-inline-start:0; inset-block-start:.55em; }
@media (max-width:760px){ .approach-grid{ grid-template-columns:1fr; gap:var(--sp-5); } }
/* Performance: reduce motion */
@media (prefers-reduced-motion: reduce){
*{ animation: none !important; transition: none !important; }
}
/* ===== Site footer: index (full) ===== */
.site-foot{
padding: var(--sp-8) 0 var(--sp-6);
border-top:1px solid var(--line);
background:linear-gradient(180deg, transparent, rgba(10,21,53,.55));
direction:ltr;
text-align:left;
}
.sf-index{
display:grid;
grid-template-columns:1fr 1.3fr 1fr;
gap:var(--sp-7);
padding-bottom:var(--sp-7);
margin-bottom:var(--sp-7);
border-bottom:1px solid rgba(128,174,255,.12);
}
.sf-col{ display:flex; flex-direction:column; }
.sf-label{
font-family:var(--font-body);
font-size:.68rem;
font-weight:700;
letter-spacing:.3em;
text-transform:uppercase;
color:var(--gold);
}
.sf-rule{
display:block;
height:1px;
margin:12px 0 18px;
background:linear-gradient(90deg, transparent, rgba(243,200,106,.75), transparent);
}
.sf-item{
padding:7px 0;
font-size:.92rem;
color:var(--text);
opacity:.85;
}
.sf-more{
color:var(--gold);
font-style:italic;
opacity:.9;
margin-top:2px;
}
a.sf-linked{ transition:color .3s ease, opacity .3s ease; }
a.sf-linked:hover{ color:var(--gold); opacity:1; }
.sf-note{
margin-top:12px;
font-size:.66rem;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--muted);
}
.sf-note:first-of-type{ margin-top:0; }
.sf-mail{
display:inline-block;
margin-top:4px;
font-size:.92rem;
color:var(--gold);
border-bottom:1px solid rgba(243,200,106,.28);
padding-bottom:3px;
transition:border-color .3s ease;
}
.sf-mail:hover{ border-bottom-color:var(--gold); }
/* Seal block: academy mark, rights, then the parent endorsement */
/* ── The closing line ─────────────────────────────────────────
One size, one weight, one tone.
The name used to be gold while the year and the rights text were grey,
at three sizes, stacked over four rows with a logo above them. That
reads as a heading with footnotes attached. A copyright notice is not
that: it is one quiet sentence, and the convention among companies
that do this well is to make it the most restrained text on the page.
White at 60% clears the 4.5:1 contrast minimum against this background
while staying firmly in the background, which is where it belongs. */
.sf-seal{ text-align:center; }
.sf-legal{
margin:0;
font-size:.8125rem; /* and nothing inside it differs */
font-weight:400;
line-height:1.7;
letter-spacing:0;
color:rgba(255,255,255,.6);
}
.sf-legal a{
color:inherit; /* the link shares the tone */
text-decoration:none;
white-space:nowrap; /* a two-word phrase stays whole */
border-bottom:1px solid rgba(255,255,255,.18);
padding-bottom:1px;
transition:color .28s ease, border-color .28s ease;
}
.sf-legal a:hover{
color:rgba(255,255,255,.9);
border-bottom-color:rgba(255,255,255,.45);
}
/* The separator is quieter than the words it separates. */
.sf-dot{ color:rgba(255,255,255,.3); margin:0 .35em; }
/* A year reads the same way in either direction; the surrounding Arabic
must not reorder it. */
.sf-yr{ direction:ltr; unicode-bidi:embed; white-space:nowrap; }
@media (max-width:520px){
.sf-legal{ font-size:.75rem; line-height:1.8; }
}
@media (max-width:820px){
.sf-index{ grid-template-columns:1fr; gap:var(--sp-6); }
}
/* Scroll-progress hairline */
.scroll-progress{
position:fixed; top:0; left:0;
height:2px; width:100%;
margin:0;
transform:scaleX(0);
transform-origin:right;
background:linear-gradient(270deg, var(--gold), #ffe6a8);
box-shadow:0 0 12px rgba(243,200,106,.5);
z-index:1200;
pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
.scroll-progress{ transition:none; }
}
/* ===== Proof band ===== */
.proof-band{
padding: var(--sp-6) 0 var(--sp-5);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
background:linear-gradient(180deg, rgba(10,21,53,.35), transparent);
}
.proof-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:var(--sp-5);
text-align:center;
}
.proof-item{ padding:0 var(--sp-3); }
.proof-num{
font-family:var(--font-head);
font-size:clamp(1.9rem, 5.5vw, 2.9rem);
font-weight:800;
line-height:1.2;
color:var(--gold);
letter-spacing:-.5px;
display:flex; align-items:baseline; justify-content:center; gap:8px;
font-variant-numeric:tabular-nums; /* digits keep a fixed width while counting */
}
.proof-dash{
font-size:.5em;
font-weight:600;
color:var(--muted);
}
/* Country reels: each cycles through many names, then settles on its own */
.proof-reels{
display:flex; flex-wrap:wrap; justify-content:center; gap:7px;
min-height:clamp(1.9rem, 5.5vw, 2.9rem);
align-items:center;
}
.reel{
font-size:.84rem; font-weight:700;
padding:5px 13px; border-radius:999px;
color:var(--text);
background:rgba(70,216,255,.08);
border:1px solid rgba(70,216,255,.18);
min-width:74px; text-align:center;
transition:color .25s ease, border-color .25s ease, background .25s ease;
font-variant-numeric:tabular-nums;
}
.reel.spinning{
color:var(--muted);
border-color:rgba(70,216,255,.10);
}
.reel.landed{
color:var(--gold);
background:rgba(243,200,106,.10);
border-color:rgba(243,200,106,.32);
}
.proof-lbl-top{
margin:0 0 12px;
font-size:.92rem;
font-weight:600;
color:var(--text);
opacity:.92;
}
.proof-lbl{
margin-top:10px;
font-size:.88rem;
line-height:1.6;
color:var(--muted);
}
@media (max-width:760px){
.proof-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
.proof-band{ padding: var(--sp-5) 0; }
}
/* Dropdown list items are drawn by the operating system, not the page, so they
do not inherit the dark theme. Without an explicit pair they render dark text
on a dark list and only become readable once highlighted. */
select option{
background-color:#0d1e3d;
color:#e9eef7;
}
select option:checked{
background-color:#12294f;
color:#ffffff;
}
/* Time and date fields are drawn by the browser, not the page. Declaring the
colour scheme makes it render the picker icon and the popup panel in dark
tones, instead of a dark icon on a dark field and a white panel. */
input[type="time"],
input[type="date"],
input[type="datetime-local"]{
color-scheme: dark;
cursor: pointer;
}
/* Make the small clock/calendar button clearly visible and clickable */
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
filter: invert(1) brightness(1.6);
opacity: .75;
cursor: pointer;
padding: 2px;
}
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover{
opacity: 1;
}
/* Anchors land clear of the fixed header rather than under it. */
section[id]{ scroll-margin-top: 84px; }
/* The booking section is a single button, so it is centred in the viewport
instead: pinned to the top it would occupy a fifth of the screen and the
contact form below would take the reader's attention. */
/* ── The backdrop ────────────────────────────────────────────────
Without one the drawer looks pasted onto the page rather than sitting
above it. Dimming and a slight blur put the page behind glass, which is
what tells the eye which layer is in front. */
.menu-scrim{
/* The button sits above this, so a tap on it never lands here directly.
But the same tap keeps travelling, and a scrim that becomes clickable
mid-journey catches it and closes the menu again: you press once and
nothing appears to happen.
Pointer events are refused until the panel is actually open, which
takes the scrim out of the path of the tap that opened it. */
position:fixed; inset:0; z-index:1098;
pointer-events:none;
background: rgba(2,4,10,.55);
backdrop-filter: blur(3px) saturate(.9);
-webkit-backdrop-filter: blur(3px) saturate(.9);
opacity:0; visibility:hidden;
transition: opacity .4s ease, visibility 0s linear .4s;
}
.menu-scrim.on{
opacity:1; visibility:visible;
pointer-events:auto;
transition: opacity .4s ease, visibility 0s;
}
/* ── The items ───────────────────────────────────────────────────
They arrive one after another rather than together. The gap is small,
35ms, which is below conscious notice but is the difference between a
panel appearing and a list being dealt out. */
.side-menu > a,
.side-menu .sm-foot,
.side-menu .side-login-block,
.side-menu .side-gold-cta{
opacity:0;
transform: translate3d(16px,0,0);
transition:
opacity .34s ease,
transform .44s cubic-bezier(.16,1,.3,1);
}
.side-menu.active > a,
.side-menu.active .sm-foot,
.side-menu.active .side-login-block,
.side-menu.active .side-gold-cta{
opacity:1;
transform: translate3d(0,0,0);
}
/* The items arrive one after another rather than together. The gap is
35ms, below conscious notice, but it is the difference between a panel
appearing and a list being dealt out. */
.side-menu.active .side-gold-cta { transition-delay:.08s; }
.side-menu.active .side-login-block{ transition-delay:.12s; }
.side-menu.active > a:nth-of-type(2){ transition-delay:.16s; }
.side-menu.active > a:nth-of-type(3){ transition-delay:.195s; }
.side-menu.active > a:nth-of-type(4){ transition-delay:.23s; }
.side-menu.active > a:nth-of-type(5){ transition-delay:.265s; }
.side-menu.active > a:nth-of-type(6){ transition-delay:.30s; }
.side-menu.active > a:nth-of-type(7){ transition-delay:.335s; }
.side-menu.active .sm-foot { transition-delay:.38s; }
/* Closing, everything leaves at once. Staggering the exit makes a person
wait to dismiss something they have already decided about. */
.side-menu:not(.active) > a,
.side-menu:not(.active) .sm-foot,
.side-menu:not(.active) .side-login-block,
.side-menu:not(.active) .side-gold-cta{
transition-delay: 0s !important;
transition-duration: .16s, .16s;
}
/* A press on a menu item should acknowledge itself before the panel
closes, or the tap feels like it went nowhere. */
.side-menu a:active{ transform: translate3d(0,0,0) scale(.97); }
@media (prefers-reduced-motion: reduce){
/* Someone who has asked for less motion gets the panel, not the
performance. */
.side-menu, .menu-scrim, .mt-bar,
.side-menu > a, .side-menu .sm-foot,
.side-menu .side-login-block, .side-menu .side-gold-cta{
transition-duration: .01ms !important;
transition-delay: 0s !important;
}
}
/* ── A header inside the drawer ──────────────────────────────────
Opening a panel with a link at the very top edge feels abrupt. A small
masthead gives the eye somewhere to land first, and the space beneath it
is what makes the list below read as deliberate rather than crammed. */
/* A quiet label above the navigation. One word, small, wide-tracked: the
convention editorial layouts use to separate a group without a heavy
rule or a coloured band. */
/* ── The menu footer ─────────────────────────────────────────────
Small, quiet, and pushed to the bottom. Its job is to close the panel
off so the last link is not sitting against the edge; anything louder
would compete with the navigation above it. */
.sm-foot{
margin-top:auto;
padding: 22px 12px 6px;
border-top:1px solid rgba(70,216,255,.1);
display:flex; flex-direction:column; gap:5px;
font-size:.72rem;
color: rgba(207,233,255,.34);
line-height:1.6;
text-align:center;
/* The parent link shrinks to its own width instead of filling the
row, so text-align alone left it sitting off to one side. */
align-items:center;
}
/* Overrides needed because .side-menu a styles every anchor in the panel
as a navigation row. */
.sm-foot a{
display:inline !important;
padding:0 !important;
margin:0 !important;
border:none !important;
border-radius:0 !important;
font-size:.72rem !important;
font-weight:500 !important;
color: rgba(70,216,255,.62) !important;
transition: color .2s ease;
}
.sm-foot a:hover{ color: rgba(70,216,255,.95) !important; background:none !important; }
.sm-from{
font-size:.64rem;
letter-spacing:.16em;
text-transform:uppercase;
color: rgba(207,233,255,.22);
margin-top:2px;
}
/* The navy credit band that used to live here has been removed. The page
had grown two credits: a solid band across the foot, and a second line
inside the footer seal. Two signatures on one letter is one too many. The
one that survives is below, and it is set as a signature rather than as a
band, because a credit is the quietest thing on a page and a solid strip
of navy is not a quiet thing. */
@media (max-width:380px){
/* Narrow enough that the line would wrap, so the tracking comes down
rather than letting the credit become two lines tall. */
.sf-credit{ font-size:.58rem; letter-spacing:.09em; padding-inline:12px; }
}
/* ── The three principles ─────────────────────────────────────────
Was three coloured dots with a line of text beside each. The dots
carried no meaning, the colours were arbitrary, and one item ran four
times longer than the others, which made the row look broken rather
than deliberate.
Numbered cards instead: the number says there are three and this is the
first, and equal cards force the copy to be roughly equal in length. */
.ap-lead{ text-align:center; margin-bottom:clamp(30px,5vw,52px); }
.ap-eyebrow{
display:block; font-size:.72rem; letter-spacing:.24em;
color:var(--gold); margin-bottom:12px; font-weight:600;
}
.ap-lead h2{
margin:0; font-size:clamp(1.3rem,3.4vw,1.9rem);
font-weight:700; line-height:1.5; color:#fff;
}
.ap-grid{
display:grid; gap:clamp(14px,2.2vw,22px);
grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.ap-card{
position:relative;
padding:clamp(26px,3.2vw,34px) clamp(20px,2.6vw,28px) clamp(24px,3vw,30px);
border-radius:18px;
background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
border:1px solid rgba(255,255,255,.08);
overflow:hidden;
transition:border-color .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
/* One accent, drawn at the top edge rather than as a coloured blob. Three
different colours made the row look like a legend for something. */
.ap-card::before{
content:''; position:absolute; inset:0 auto auto 0;
width:100%; height:2px;
background:linear-gradient(90deg, var(--gold), transparent 70%);
opacity:.5; transition:opacity .4s ease;
}
.ap-card:hover{ border-color:rgba(212,169,69,.28); transform:translateY(-3px); }
.ap-card:hover::before{ opacity:1; }
.ap-num{
display:block;
font-family:'IBM Plex Mono', ui-monospace, monospace;
font-size:.78rem; letter-spacing:.18em;
color:var(--gold); opacity:.75;
margin-bottom:16px;
}
.ap-card h3{
margin:0 0 12px; font-size:1.06rem; font-weight:700;
line-height:1.6; color:#fff;
}
.ap-card p{
margin:0; font-size:.92rem; line-height:2;
color:rgba(255,255,255,.62);
}
/* ── The steps, restyled ──────────────────────────────────────────
Every card carried the same cyan-into-violet gradient, so four numbered
boxes read as one repeated decoration rather than a sequence. The order
is the only thing that matters here, and nothing on the card said it.
So: the gradient goes, the number becomes the accent, and the cards are
joined by a line that makes the sequence visible. */
.process{ position:relative; }
@media (min-width:760px){
.process{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(14px,2vw,20px); }
/* The thread the steps sit on. Behind the cards, so it reads as one
journey rather than four separate boxes. */
.process::before{
content:''; position:absolute; top:46px; left:6%; right:6%;
height:1px; z-index:0;
background:linear-gradient(90deg, transparent, rgba(212,169,69,.30) 12%, rgba(212,169,69,.30) 88%, transparent);
}
}
.step.glass{
position:relative; z-index:1;
background:linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.014)) !important;
border:1px solid rgba(255,255,255,.075) !important;
border-radius:18px;
padding:clamp(26px,3vw,32px) clamp(20px,2.4vw,26px);
transition:border-color .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.step.glass:hover{ border-color:rgba(212,169,69,.3) !important; transform:translateY(-4px); }
/* The number is the whole point of the card, so it carries the only colour.
Gold rather than the cyan-violet, which every other panel already uses. */
.step .num{
width:46px !important; height:46px !important;
background:#0D1B3E !important;
border:1px solid rgba(212,169,69,.45) !important;
color:var(--gold) !important;
font-family:'IBM Plex Mono', ui-monospace, monospace;
font-size:1rem; font-weight:600;
box-shadow:0 0 0 5px rgba(13,27,62,.9);
margin-bottom:18px;
}
.step h3{ font-size:1.02rem; line-height:1.6; margin-bottom:10px; }
.step p{ font-size:.9rem; line-height:2; color:rgba(255,255,255,.6); }
/* ── The map ──────────────────────────────────────────────────────
Dots rather than filled continents: an outline invites the eye to read
borders, and the point here is reach, not geography. The dots recede and
the pins are the only thing with colour. */
/* ── The map ──────────────────────────────────────────────────────
Edge to edge and tall, so it fills a phone screen from top to bottom and
is caught at a glance rather than passed over. Dots rather than filled
continents: an outline invites the eye to read borders, and the point is
reach, not geography. */
.map-band{
padding:clamp(34px,5vw,60px) 0 clamp(30px,4.5vw,54px);
position:relative;
background:
radial-gradient(ellipse 70% 60% at 50% 45%, rgba(70,216,255,.05), transparent 70%),
linear-gradient(180deg, transparent, rgba(212,169,69,.02) 45%, transparent);
overflow:hidden;
}
.mp-head{ text-align:center; margin-bottom:clamp(20px,3vw,32px); padding:0 20px; }
.mp-eyebrow{
display:block; font-size:.72rem; letter-spacing:.24em;
color:var(--gold,#D4A945); font-weight:600; margin-bottom:12px;
}
.mp-head h2{
margin:0 0 10px; font-size:clamp(1.3rem,3.6vw,2rem);
font-weight:700; line-height:1.5; color:#fff;
}
.mp-head p{ margin:0; color:rgba(255,255,255,.55); font-size:.95rem; }
/* No card, no border, no padding: the map is the section rather than
something sitting inside it. */
.mp-frame{
/* Breaks out of whatever horizontal padding the section inherits, so the
map reaches both screen edges rather than sitting in a column. */
width:100vw;
margin-inline:calc(50% - 50vw);
max-width:none;
overflow:hidden;
}
.mp-svg{
display:block; width:100%;
/* A band with a height of its own rather than height:auto, because the
viewBox is now fitted to this box and a box with no height of its own
has no shape to fit to. No horizontal fade: any fade leaves the map
stopping short of the screen and reads as a margin nobody asked for. */
height:clamp(420px, 40vw, 700px);
}
@media (max-width:860px){
/* Shorter on a phone, and deliberately so. The window has to be wide
enough to hold every pin; inside a portrait box that width would force
a viewBox taller than the world itself and leave empty space under the
southern tip of South America. */
.mp-svg{ height:clamp(250px, 60vw, 400px); }
}
/* Parallels and meridians at the thirty degree spacing a chart uses, drawn
from the same projection as the coastline so they cannot drift out of
register with it. Barely visible on purpose: enough to say the shapes are
projected onto something, not enough to be looked at. */
.mp-grid line{ stroke:rgba(255,255,255,.05); stroke-width:.3; }
.mp-grid line.major{ stroke:rgba(70,216,255,.10); }
/* The viewBox is cropped to the corridor the pinned countries sit in, so the
frame stands tall on a phone with every pin inside it. On wider screens the
same portrait crop stays, capped and centred, rather than stretching to the
full width where it would either tower over the page or crop the pins out. */
/* The 560px cap that used to sit here was the reason this looked wrong on a
laptop: a portrait crop of the world, parked in the middle of a wide
screen with background either side of it. The crop is no longer fixed, so
there is nothing left to cap. The window onto the world is computed from
the shape of the box it is drawn into, which means a phone gets a tall
window, a laptop gets a wide one, and neither gets bars. */
/* Filled continents rather than a dot grid: real Natural Earth coastlines,
so the shape reads as a map instead of a pattern. The fill is a wash
rather than a colour, and the thin coastline keeps the edges crisp. */
.mp-land{
fill:url(#mpLandFill);
stroke:rgba(255,255,255,.26);
stroke-width:.4;
stroke-linejoin:round;
}
/* Each pin breathes on its own delay, so the group reads as separate
places rather than one blinking light repeated. */
.mp-core{ fill:var(--gold,#D4A945); filter:drop-shadow(0 0 4px rgba(212,169,69,.9)); }
/* Every marker used to throw two rings out to several times its size every
three and a half seconds. Four of the eight sit inside the same corner of
the region, so those rings crossed each other constantly and the part of
the map that matters most read as congestion rather than as places.
The resting state is now only a slow change in brightness: present,
never expanding, nothing to collide with. The rings are still here and
they have one job, which they do once each time a run arrives. */
.mp-core{
fill:var(--gold,#D4A945);
filter:drop-shadow(0 0 4px rgba(212,169,69,.9));
animation:mpBreath 5.4s ease-in-out infinite;
animation-delay:var(--d,0s);
}
@keyframes mpBreath{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
/* Nothing arrives at these markers any more, so each one keeps its own
ring on its own delay. The stagger is what stops eight markers reading as
one light blinking in eight places at once. */
.mp-wave{
fill:none; stroke:var(--gold,#D4A945); stroke-width:1.4;
transform-origin:center; transform-box:fill-box;
animation:mpPulse 4.2s cubic-bezier(.16,1,.3,1) infinite;
animation-delay:var(--d,0s);
opacity:0;
}
.mp-wave-2{ animation-delay:calc(var(--d,0s) + 1.7s); }
/* Jordan is the one place nothing arrives at, so it keeps a pulse of its
own; without it the origin would be the only still point on the map. */
.mp-hub .mp-core{ fill:#CFF4FF; filter:drop-shadow(0 0 8px rgba(70,216,255,1)); }
/* Only the colour changes on Jordan. The timing is the same as everywhere
else, so it is the one blue marker on the map rather than the one marker
behaving differently from the rest. */
.mp-hub .mp-wave{ stroke:#46D8FF; }
.mp-hub-glow{
fill:#46D8FF; opacity:.10;
animation:mpHub 4s ease-in-out infinite;
}
@keyframes mpHub{
0%,100%{ opacity:.07; transform:scale(1); }
50% { opacity:.16; transform:scale(1.18); }
}
.mp-wave-2{ animation-delay:calc(var(--d,0s) + 1.1s); }
@keyframes mpPulse{
0% { transform:scale(.6); opacity:.85; }
70% { transform:scale(4.2); opacity:0; }
100% { transform:scale(4.2); opacity:0; }
}
/* The core used to glow in time with the expanding wave. The wave no longer
expands on its own, so this rule is gone: the slow breath on .mp-core is
what the marker does at rest now, and it was being overridden here by a
more specific selector saying the same thing louder. */
.mp-legend{
display:flex; align-items:center; justify-content:center;
flex-wrap:wrap; gap:9px 13px;
margin-top:clamp(16px,2.4vw,24px);
font-size:.84rem; font-weight:600;
color:rgba(255,255,255,.6);
}
.mp-legend i{
width:3px; height:3px; border-radius:50%;
background:var(--gold,#D4A945); opacity:.55; flex:0 0 auto;
}
/* Eight names read as the complete list, and a complete list of eight is a
smaller academy than one naming the eight it can point at. */
.mp-more{ color:var(--gold,#D4A945); opacity:.9; }
@media (prefers-reduced-motion: reduce){
.mp-wave{ animation:none; opacity:.28; }
.mp-core, .mp-hub-glow{ animation:none; opacity:1; }
/* The routes are not built at all under reduced motion, so there is
nothing here to switch off. */
}
/* ── Contact rows ─────────────────────────────────────────────────
One tall card with a paragraph and three buttons inside became three
rows. Each is a single way to reach us, at a size that matches what it
is: a phone number does not need a card the height of a screen. */
.contact{ display:grid; gap:10px; max-width:520px; margin-inline:auto; }
.ct-row{
display:flex; align-items:center; gap:14px;
padding:14px 16px;
border-radius:14px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.075);
text-decoration:none; color:inherit;
transition:border-color .3s ease, background .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.ct-row:hover{
border-color:rgba(212,169,69,.32);
background:rgba(255,255,255,.055);
transform:translateY(-2px);
}
.ct-ico{
flex:0 0 auto; width:40px; height:40px;
display:grid; place-items:center; border-radius:11px;
background:rgba(255,255,255,.05);
}
.ct-ico svg{ width:19px; height:19px; }
.ct-wa{ color:#3ecf74; }
.ct-call{ color:var(--gold,#D4A945); }
.ct-ig{ color:#d96eb0; }
.ct-fb{ color:#4f8dff; }
.ct-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ct-txt b{ font-size:.92rem; font-weight:600; color:#fff; }
.ct-txt span{
font-size:.82rem; color:rgba(255,255,255,.5);
direction:ltr; text-align:start;
}
.ct-go{
flex:0 0 auto; width:15px; height:15px;
color:rgba(255,255,255,.28);
transition:color .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
html[dir="rtl"] .ct-go{ transform:scaleX(1); }
.ct-row:hover .ct-go{ color:var(--gold,#D4A945); transform:translateX(3px); }
html[dir="rtl"] .ct-row:hover .ct-go{ transform:translateX(-3px); }
/* ── Message form ─────────────────────────────────────────────────
Closed by default. Open, it would be the tallest thing in the section and
would bury the three direct routes, which are what most people want. */
.ct-msg{
border-radius:14px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.075);
overflow:hidden;
transition:border-color .3s ease;
}
.ct-msg[open]{ border-color:rgba(212,169,69,.28); }
/* The same lift the three rows above it have, so the four read as one set
of options rather than three of one kind and a fourth of another. */
.ct-msg{ transform:translateY(0); transition:border-color .3s ease, background .3s ease, transform .4s cubic-bezier(.16,1,.3,1); }
.ct-msg:hover{
border-color:rgba(212,169,69,.32);
background:rgba(255,255,255,.055);
transform:translateY(-2px);
}
.ct-msg[open]:hover{ transform:none; } /* nothing should move while it is being read */
/* The subtitles on the other three are a number and a handle, so the rule
that sets them left to right is right for them. This one is a sentence in
Arabic, and left to right puts its comma and full stop on the wrong end. */
.ct-txt .ct-ar{ direction:rtl; text-align:start; }
.ct-msg summary{
display:flex; align-items:center; gap:14px;
padding:14px 16px; cursor:pointer; list-style:none;
-webkit-tap-highlight-color:transparent;
}
.ct-msg summary::-webkit-details-marker{ display:none; }
.ct-mail{ color:#6fa8ff; }
.ct-chev{
width:16px; height:16px; flex:0 0 auto; color:rgba(255,255,255,.3);
transition:transform .34s cubic-bezier(.16,1,.3,1), color .3s ease;
}
.ct-msg[open] .ct-chev{ transform:rotate(180deg); color:var(--gold,#D4A945); }
.ct-form{ padding:4px 16px 18px; }
.ct-f{ display:block; margin-bottom:16px; }
.ct-f > span{
display:block; margin-bottom:4px;
font-size:.74rem; font-weight:600; color:rgba(255,255,255,.5);
}
.ct-f input, .ct-f textarea{
width:100%; box-sizing:border-box;
background:transparent; border:0;
border-bottom:1px solid rgba(255,255,255,.14);
padding:10px 2px; color:#EAF0F8;
font-family:inherit; font-size:.95rem; outline:none;
transition:border-color .3s ease;
}
.ct-f input:focus, .ct-f textarea:focus{ border-bottom-color:var(--gold,#D4A945); }
.ct-f input::placeholder, .ct-f textarea::placeholder{ color:rgba(255,255,255,.22); }
.ct-f textarea{ resize:vertical; min-height:88px; line-height:1.8; }
.ct-f.bad input, .ct-f.bad textarea{ border-bottom-color:#ff8a8a; }
/* The spam honeypot. It has to be invisible to a person and present for a
script - and, the part that was wrong, it must not change the size of
the page.
left:-9999px changes it. The trap is position:absolute, so its
containing block is .wrap, the nearest positioned ancestor - not the
details element - which is why the overflow:hidden on .ct-msg never
clipped it. On an LTR page that offset lands off the start edge, which
a browser does not make scrollable, so nothing shows. This site is RTL:
the start edge is the right, so -9999px is overflow off the END edge,
and that is real, scrollable width. Opening the email section made the
document 10389px wide on a 390px screen, so the phone zoomed out to fit
and the whole page appeared to shrink and break.
The standard visually-hidden clip does the same job with no offset at
all. The field stays rendered and reachable by a script, and takes one
clipped pixel exactly where it already stood. */
.ct-trap{
position:absolute !important;
width:1px !important; height:1px !important;
margin:-1px !important; padding:0 !important; border:0 !important;
clip-path:inset(50%);
overflow:hidden; white-space:nowrap;
opacity:0;
}
.ct-send{
width:100%; padding:13px 24px; margin-top:4px;
border:0; border-radius:99px;
background:linear-gradient(135deg,#E3BC5E,#D4A945);
color:#0B1020; font-size:.94rem; font-weight:700;
font-family:inherit; cursor:pointer;
transition:transform .26s cubic-bezier(.16,1,.3,1);
}
.ct-send:hover{ transform:translateY(-2px); }
.ct-send:disabled{ opacity:.6; transform:none; cursor:default; }
.ct-note{
margin:10px 0 0; text-align:center;
font-size:.8rem; color:rgba(255,255,255,.45);
transition:color .3s ease;
}
.ct-note.ok{ color:#6ddc9a; }
.ct-note.err{ color:#ff8a8a; }
/* ══════════════════════════════════════════════════════════════════
THE SURFACES
══════════════════════════════════════════════════════════════════
Every box on this page was a pane of glass with a cyan to violet
gradient running round its edge, a cyan blob in one corner, a 26px
radius whatever its size, and a coloured halo bleeding out of it. Four
habits, and each of them is doing the same thing: announcing that the
box is a box.
What follows replaces all four with one idea. There is a light above
the page. A surface catches it along its top edge and loses it toward
the bottom, and it casts a shadow underneath in the colour shadows
actually are, which is not cyan. Nothing here is a decoration on the
card; everything is a consequence of where the light is. That is the
whole difference between a box that looks made and a box that looks
styled.
Written as a layer over what came before rather than as edits through
it, so every existing rule still stands and the change can be read,
judged, and pulled back out in one piece. */
:root{
/* Radius scaled to the size of the thing. One value for a wide panel and
a small chip made the panel soft and the chip a pill. */
--r-panel: 20px;
--r-card: 16px;
--r-chip: 12px;
/* The hairline. Brightest along the top edge, gone by the bottom: the
light is above the page, and an edge that catches it evenly all the
way round is an edge no light ever touched. */
--edge: linear-gradient(180deg,
rgba(255,255,255,.14) 0%,
rgba(255,255,255,.055) 38%,
rgba(255,255,255,.02) 100%);
/* Two shadows, not one. The tight one puts the card in contact with the
page; the wide one gives it the room it sits in. Both neutral, because
a coloured halo reads as a lamp behind the card rather than as depth. */
--lift-1: 0 1px 2px rgba(0,0,0,.34), 0 8px 24px -8px rgba(0,0,0,.5);
--lift-2: 0 1px 2px rgba(0,0,0,.4), 0 18px 44px -14px rgba(0,0,0,.62);
--lift-3: 0 2px 4px rgba(0,0,0,.45), 0 34px 70px -20px rgba(0,0,0,.7);
--ease-out: cubic-bezier(.16,1,.3,1);
}
/* ── the pane ──────────────────────────────────────────────────── */
.glass{
background:
linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.008)) padding-box,
var(--edge) border-box;
border:1px solid transparent;
border-radius:var(--r-panel);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.07), /* the bevel that catches the light */
var(--lift-2);
backdrop-filter:blur(10px) saturate(115%);
-webkit-backdrop-filter:blur(10px) saturate(115%);
transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
/* A wash falling from the top edge, not a coloured blob in a corner. The
corner blob had to be placed; this only has to fall. */
.glass::before{
background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 42%);
}
/* The sheen follows the pointer. It is very faint on purpose: the effect
is meant to be felt as the surface having a finish, not seen as a light
being dragged across it. Only where there is a real pointer to follow,
and only where the machine has the headroom. */
@media (hover:hover) and (pointer:fine) and (min-width:861px){
.glass::after{
content:"";
position:absolute; inset:0;
border-radius:inherit;
pointer-events:none;
opacity:0;
transition:opacity .45s ease;
background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
rgba(255,255,255,.055), transparent 62%);
}
.glass:hover::after{ opacity:1; }
}
.glass:hover{
transform:translateY(-3px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.11),
var(--lift-3);
}
/* Blur is the single most expensive thing on this page and a phone renders
it on every scrolled frame. Below the breakpoint the panes are solid. */
@media (max-width:860px){
.glass{
backdrop-filter:none; -webkit-backdrop-filter:none;
background:
linear-gradient(180deg, rgba(18,28,48,.72), rgba(10,16,30,.72)) padding-box,
var(--edge) border-box;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--lift-1);
}
.glass:hover{ transform:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--lift-1); }
}
/* ── radius by size, and breathing room ───────────────────────────── */
.about .card,
.contact-card,
.advantage > .card,
.modal-box { border-radius:var(--r-panel); }
.aside-card,
.step,
.feature,
.package,
.ap-card { border-radius:var(--r-card); }
.adv-item,
.note-box,
.ct-row,
.trust-item,
.metric { border-radius:var(--r-chip); }
.about .card { padding:clamp(26px,3vw,34px) clamp(22px,2.6vw,30px); }
.aside-card,
.feature { padding:clamp(22px,2.4vw,26px); }
.step { padding:clamp(24px,2.6vw,28px) clamp(20px,2.2vw,24px); }
/* ── the small surfaces ───────────────────────────────────────────── */
/* Same rule as the panes: lit along the top, shadowed underneath. Stated
three times rather than once because these three do not share a class. */
.adv-item, .note-box, .ct-row, .trust-item{
background:
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)) padding-box,
var(--edge) border-box;
border:1px solid transparent;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--lift-1);
}
.note-box{
/* This one keeps its blue, because it is an aside and is meant to be
found. It is a tint on the surface now rather than a border around it. */
background:
linear-gradient(180deg, rgba(70,216,255,.09), rgba(70,216,255,.02)) padding-box,
linear-gradient(180deg, rgba(70,216,255,.34), rgba(70,216,255,.06)) border-box;
}
.ct-row{
transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out),
background .4s ease;
}
.ct-row:hover{
transform:translateY(-2px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.09), var(--lift-2);
}
/* ── the accent rule on the approach cards ────────────────────────── */
.ap-card{
background:
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)) padding-box,
var(--edge) border-box;
border:1px solid transparent;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--lift-1);
transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.ap-card::before{
/* Was a full width bar across the top. A short rule set in from the edge
reads as a mark on the card; a full width one reads as the card having
been underlined by mistake. */
inset:0 auto auto 0;
width:clamp(38px,14%,72px); height:2px;
margin:0 clamp(20px,2.6vw,28px);
border-radius:2px;
background:linear-gradient(90deg, var(--gold), rgba(243,200,106,0));
opacity:.85;
}
.ap-card:hover{
transform:translateY(-3px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.1), var(--lift-2);
}
/* ── the numeral on a process step ────────────────────────────────── */
/* It was a glowing disc: 22px of cyan bloom and a text shadow on top of it.
A numeral does not need to glow to be read as a numeral. Sized down,
squared off, and left as a quiet plate. */
.step .num{
width:44px; height:44px;
border-radius:13px;
background:linear-gradient(180deg, rgba(70,216,255,.16), rgba(22,42,92,.55));
border:1px solid rgba(70,216,255,.28);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
font-size:1.12rem;
text-shadow:none;
margin-bottom:18px;
}
/* ── the tier cards ───────────────────────────────────────────────── */
/* The gradients stay: they are how the four tiers tell themselves apart,
and that is information, not ornament. What goes is the flat ring of
coloured light around each one. The tint is kept but pushed underneath
and outward, where a reflection off a coloured surface would actually
fall, and a real shadow is put back under the card. */
.package{ border-width:1px; }
.bronze { box-shadow:inset 0 1px 0 rgba(255,255,255,.16), var(--lift-2), 0 22px 48px -26px rgba(196,122,58,.85); }
.silver { box-shadow:inset 0 1px 0 rgba(255,255,255,.2), var(--lift-2), 0 22px 48px -26px rgba(160,190,230,.8); }
.gold { box-shadow:inset 0 1px 0 rgba(255,255,255,.22), var(--lift-2), 0 22px 52px -26px rgba(235,185,50,.9); }
.diamond{ box-shadow:inset 0 1px 0 rgba(255,255,255,.22), var(--lift-2), 0 22px 52px -26px rgba(80,210,240,.85); }
.group { box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--lift-2), 0 22px 48px -26px rgba(40,190,110,.8); }
.package:hover{ transform:translateY(-4px); }
/* ── chips ────────────────────────────────────────────────────────── */
.badge{
background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.09);
box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.metric{ padding:14px 16px; }
/* ── type inside the boxes ────────────────────────────────────────── */
/* The boxes were not the only problem. Body copy at .55 white on a dark
panel is under the contrast a paragraph needs to be comfortable, and
headings sat too close to the text under them to read as headings. */
.about .card p,
.aside-card p,
.step p,
.feature p,
.ap-card p{
color:rgba(226,238,255,.72);
line-height:1.95;
}
.about .card h3,
.aside-card h3,
.step h3,
.ap-card h3{
letter-spacing:-.01em;
margin-bottom:.55em;
}
/* The section heading was clipped from a white to blue gradient, which on a
dark page fades the bottom of every letter toward the background and
costs the type its weight. The gradient stays, over a much shorter fall,
so the shape reads as one colour and the shift is only felt. */
.section-head h2{
background:linear-gradient(180deg, #ffffff 0%, #dcefff 100%);
-webkit-background-clip:text; background-clip:text;
letter-spacing:-.015em;
}
.section-head .eyebrow{
letter-spacing:.28em;
text-shadow:none; /* the glow was doing the work the letterspacing does */
opacity:.9;
}
@media (prefers-reduced-motion: reduce){
.glass, .ap-card, .ct-row, .package{ transition:none; }
.glass:hover, .ap-card:hover, .ct-row:hover, .package:hover{ transform:none; }
}
/* ── The panel's entrance, reconnected ────────────────────────────
The stagger above is written against `.side-menu > a`: links sitting as
direct children of the panel. That was true of the older duplicate copy
of this menu, which is the one that has just been removed. In the panel
that survived, the links live inside `.sm-nav`, and a masthead and a
section label sit above them. None of those are direct children, so none
of them were being reached: the panel slid in and its contents were
simply already there.
Same idea, same timings, aimed at the structure that is actually in the
document. The order runs top to bottom, the way a reader's eye does. */
.side-menu .sm-head,
.side-menu .sm-label,
.side-menu .sm-nav a{
opacity:0;
transform:translate3d(16px,0,0);
transition:
opacity .34s ease,
transform .44s cubic-bezier(.16,1,.3,1);
}
.side-menu.active .sm-head,
.side-menu.active .sm-label,
.side-menu.active .sm-nav a{
opacity:1;
transform:translate3d(0,0,0);
}
.side-menu.active .sm-head { transition-delay:.04s; }
.side-menu.active .sm-label{ transition-delay:.16s; }
.side-menu.active .sm-nav a:nth-child(1){ transition-delay:.195s; }
.side-menu.active .sm-nav a:nth-child(2){ transition-delay:.23s; }
.side-menu.active .sm-nav a:nth-child(3){ transition-delay:.265s; }
.side-menu.active .sm-nav a:nth-child(4){ transition-delay:.30s; }
.side-menu.active .sm-nav a:nth-child(5){ transition-delay:.335s; }
.side-menu.active .sm-nav a:nth-child(6){ transition-delay:.37s; }
/* Closing, everything leaves together. Staggering the exit makes a person
wait to dismiss something they have already decided about. */
.side-menu:not(.active) .sm-head,
.side-menu:not(.active) .sm-label,
.side-menu:not(.active) .sm-nav a{ transition-delay:0s; }
@media (prefers-reduced-motion: reduce){
.side-menu .sm-head,
.side-menu .sm-label,
.side-menu .sm-nav a{ opacity:1; transform:none; transition:none; }
}
/* ── The panel's masthead ─────────────────────────────────────────
This markup was in the document with no rules written for it at all.
Three unstyled divs in a right to left panel do what unstyled divs do:
they sit flush against the trailing edge, at body size, with nothing
between them and whatever comes next. That is why the two lines were
pinned to the far side and touching the booking button.
Centred here on purpose. The rest of the panel is a list, and a list is
read from the edge; this is not a list, it is the one place in the panel
that says who is speaking, so it is set apart by being the only thing
that is not aligned with everything else. */
.sm-head{
text-align:center;
padding:2px 6px 0;
/* The space the request was really about. Room under the words, and a
rule under the room, so the button below reads as a separate offer
rather than as the third line of the greeting. */
margin:0 0 clamp(24px, 4.4vh, 34px);
position:relative;
}
/* The wordmark: small, wide, and quiet. Letterspacing is doing the work
that size would otherwise have to do, which is what keeps it from
competing with the line underneath it. */
.sm-mark{
font-family:'IBM Plex Mono', ui-monospace, monospace;
font-size:.58rem;
letter-spacing:.34em;
/* A Latin wordmark, so it is set left to right inside a right to left
panel. That is not only correct for what it says, it is also what makes
the next line work: tracking adds its space after every letter
including the last, which pushes a centred line off centre by one
space, and the indent that cancels it has to be applied in the same
direction the text runs. */
direction:ltr;
text-indent:.34em;
text-transform:uppercase;
color:var(--gold);
opacity:.85;
margin-bottom:14px;
}
.sm-name{
font-family:var(--font-head);
font-size:clamp(1.16rem, 4.6vw, 1.34rem);
font-weight:700;
line-height:1.5;
letter-spacing:-.01em;
/* Light from above, the way every other surface on this page is lit. */
background:linear-gradient(180deg, #ffffff 0%, #cfe4ff 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
margin-bottom:7px;
}
.sm-sub{
font-family:'Tajawal', sans-serif;
font-size:.82rem;
line-height:1.75;
color:var(--muted);
opacity:.8;
}
/* A hairline that fades out at both ends rather than stopping at them, with
a single gold point set into the middle of it. A rule drawn edge to edge
divides a panel in two; one that arrives and leaves separates two things
inside the same panel, which is what is wanted. */
.sm-head::after{
content:'';
position:absolute;
left:14%; right:14%;
bottom:calc(clamp(24px, 4.4vh, 34px) * -.5);
height:1px;
background:linear-gradient(90deg,
transparent,
rgba(243,200,106,.34) 34%,
rgba(243,200,106,.34) 66%,
transparent);
}
.sm-head::before{
content:'';
position:absolute;
left:50%;
bottom:calc(clamp(24px, 4.4vh, 34px) * -.5 - 2px);
width:5px; height:5px;
margin-left:-2.5px;
transform:rotate(45deg);
background:var(--gold);
opacity:.7;
box-shadow:0 0 8px rgba(243,200,106,.55);
z-index:1;
}
/* And the gap the button needed on its own side of that rule. */
.sm-actions{ margin-top:0; }
/* The browse label was unstyled too, so it was sitting at body size against
the trailing edge with the links directly under it. */
/* ── The panel's foot ─────────────────────────────────────────────
Three things, stacked, each quieter than the one above it: whose panel
this is, then the word that joins it to its parent, then the parent's
mark. Nothing else. A place name told the reader something they had not
asked for at the moment they were leaving. */
/* Sized against the seal at the foot of the page rather than picked fresh:
there it is 70px and 88px, and the parent reading slightly larger than
the academy is the relationship between them. The panel is 300px wide, so
both are scaled by the same factor and the pairing survives. */
.sm-mine, .sm-parent{
display:block;
margin-inline:auto;
transition:opacity .3s ease;
}
.sm-mine img{ width:58px; height:auto; display:block; margin-inline:auto; opacity:.95; }
.sm-parent{ margin-top:6px; opacity:.85; }
.sm-parent:hover{ opacity:1; }
.sm-parent img{ width:72px; height:auto; display:block; margin-inline:auto; }
.sm-mine-txt, .sm-parent-txt{
display:none;
font-family:var(--font-head);
font-weight:700;
color:rgba(238,246,255,.78);
}
.sm-mine-txt{ font-size:.86rem; }
.sm-parent-txt{ font-size:1rem; letter-spacing:.04em; }
/* The same word, spaced the same way it is spaced downstairs. */
.sm-from{
font-family:var(--font-head);
font-size:.6rem; font-weight:600;
letter-spacing:.42em;
direction:ltr;
text-indent:.42em; /* the tracking after the last letter, cancelled */
text-transform:uppercase;
color:var(--muted);
opacity:.7;
margin-top:14px;
}
.sm-label{
font-family:'IBM Plex Mono', ui-monospace, monospace;
font-size:.58rem;
letter-spacing:.24em;
text-transform:uppercase;
color:var(--muted);
opacity:.55;
margin:clamp(18px, 3vh, 26px) 0 12px;
}
/* Short panels on small screens should not spend their height on air. */
@media (max-height:700px){
.sm-head{ margin-bottom:20px; }
.sm-name{ font-size:1.08rem; }
.sm-sub{ font-size:.78rem; }
}
/* ── The legal line ───────────────────────────────────────────────
One size, one weight, one tone. No accent colour on the company name.
A copyright notice is the quietest text on a page, and the way to make
it read as professional is to stop asking it to be interesting: no gold,
no bold, no second size for the year. White at 60% clears the 4.5:1
contrast minimum against this background while staying firmly in the
background, which is where it belongs. */
.sf-seal{ text-align:center; }
.sf-legal{
margin:0;
font-size:.8125rem; /* 13px, and nothing inside it differs */
font-weight:400;
line-height:1.7;
letter-spacing:0;
color:rgba(255,255,255,.6);
}
.sf-legal a{
color:inherit; /* the link shares the tone */
text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.18);
padding-bottom:1px;
transition:color .28s ease, border-color .28s ease;
}
.sf-legal a:hover{
color:rgba(255,255,255,.9);
border-bottom-color:rgba(255,255,255,.45);
}
/* The separator is quieter than the words it separates. */
.sf-dot{ color:rgba(255,255,255,.3); margin:0 .35em; }
/* A two-word phrase that breaks across a line reads as two fragments, so
it is kept whole and allowed to wrap as a unit instead. */
.sf-legal a{ white-space:nowrap; }
/* A year and a company name read the same way in either direction; the
surrounding Arabic must not reorder them. */
.sf-yr{ direction:ltr; unicode-bidi:embed; white-space:nowrap; }
@media (max-width:520px){
.sf-legal{ font-size:.75rem; line-height:1.8; }
}
/* Edge to edge. This is the page's last horizontal line, so it runs the
whole width of the window: a rule set in from the sides divides a block,
a rule reaching both edges ends a document. */
.sf-credit{
margin:clamp(30px,5vw,46px) 0 0;
padding:16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
border-top:1px solid rgba(255,255,255,.07);
text-align:center;
font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size:.62rem;
letter-spacing:.15em;
text-transform:uppercase;
direction:ltr; /* a Latin phrase inside a right to left page */
color:rgba(255,255,255,.3);
}
.sf-credit a{
color:rgba(255,255,255,.55);
text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.16);
padding-bottom:1px;
transition:color .28s ease, border-color .28s ease;
}
.sf-credit a:hover{
color:rgba(255,255,255,.9);
border-bottom-color:rgba(255,255,255,.45);
}
.sf-credit a{
color:rgba(255,255,255,.55);
text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.14);
padding-bottom:1px;
transition:color .28s ease, border-color .28s ease;
}
.sf-credit a:hover{
color:rgba(255,255,255,.85);
border-bottom-color:rgba(255,255,255,.4);
}
/* ── Question and answer lists ─────────────────────────────────────
Folded shut, because a page of forty open paragraphs is a page nobody
scans: the questions are the index, and the answer is what you get for
asking. Built on the same pane as every other surface here, so a new
page does not announce itself as a new design. */
.faq-list{
display:grid; gap:12px;
max-width:760px; margin-inline:auto;
}
.faq-item{
border-radius:var(--r-card, 16px);
overflow:hidden;
}
.faq-item summary{
display:flex; align-items:center; gap:14px;
padding:18px 22px;
cursor:pointer; list-style:none;
-webkit-tap-highlight-color:transparent;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary b{
font-size:1rem; font-weight:600; color:#fff; line-height:1.6;
}
/* The marker is drawn rather than typed, so it can rotate. */
.faq-item summary::after{
content:''; margin-inline-start:auto; flex:0 0 auto;
width:9px; height:9px;
border-right:2px solid rgba(255,255,255,.4);
border-bottom:2px solid rgba(255,255,255,.4);
transform:rotate(45deg) translateY(-2px);
transition:transform .34s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.faq-item[open] summary::after{
transform:rotate(-135deg) translateY(-2px);
border-color:var(--gold, #D4A945);
}
.faq-item[open]{ border-color:rgba(212,169,69,.28); }
.faq-item p{
padding:0 22px 20px;
margin:0;
color:rgba(226,238,255,.72);
line-height:1.95;
font-size:.95rem;
}
.faq-section{ padding-block:clamp(60px,9vw,110px); }
/* ── Form fields must not be under 16px ──────────────────────────
A mobile browser zooms the whole page in when a field smaller than 16px
takes focus. It is not a bug in the browser, it is the browser deciding
the text is too small to type into and fixing it for the reader. From
the reader's side it looks like the page suddenly grew and went strange,
and it does not zoom back out afterwards.
.95rem is 15.2px, which is under the line by less than a pixel, and that
is all it takes. Everything typed into is set to exactly 16px: large
enough that no browser intervenes, and close enough to the old size that
nothing else in the layout moves. */
.ct-f input,
.ct-f textarea,
.form-field input,
.form-field textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea{
font-size:16px;
}
/* ── The footer ────────────────────────────────────────────────── */
.sf-nav{
display:flex; flex-wrap:wrap; justify-content:center;
gap:6px clamp(14px,3vw,30px);
padding-bottom:clamp(22px,3vw,30px);
border-bottom:1px solid rgba(255,255,255,.07);
}
.sf-nav a{
color:rgba(226,238,255,.62);
text-decoration:none;
font-size:.9rem;
padding:6px 2px;
transition:color .28s ease;
}
.sf-nav a:hover{ color:#fff; }
.sf-reach{
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:6px 12px;
margin-top:clamp(20px,3vw,28px);
font-family:'IBM Plex Mono', ui-monospace, monospace;
font-size:.82rem;
}
.sf-reach a{ color:rgba(226,238,255,.75); text-decoration:none; transition:color .28s ease; }
.sf-reach a:hover{ color:#fff; }
/* The number is the one thing in this row worth finding at a glance. */
.sf-phone{
color:var(--gold,#D4A945) !important;
letter-spacing:.05em;
font-size:.95rem;
}
.sf-sep{ color:rgba(255,255,255,.2); }
@media (max-width:520px){
/* Stacked, because a wrapped row of separators reads as a broken line. */
.sf-reach{ flex-direction:column; gap:9px; }
.sf-sep{ display:none; }
}
/* ── Legal pages ───────────────────────────────────────────────────
Set as a document, not as a marketing page. Nobody reads a privacy
policy from the top: they arrive looking for one clause. So the measure
is narrow enough to read, the sections are numbered so they can be
cited, and the contents list jumps rather than scrolls. */
.legal-section{ padding-block:clamp(70px,10vw,120px); }
.legal-section .wrap{ max-width:820px; }
.legal-head{ margin-bottom:clamp(34px,5vw,52px); }
.legal-head h1{
font-size:clamp(2rem,5.5vw,3rem);
line-height:1.15; letter-spacing:-.02em;
margin:.35em 0 .5em;
background:linear-gradient(180deg,#fff 0%,#dcefff 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
}
.legal-updated{
font-family:'IBM Plex Mono', ui-monospace, monospace;
font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
color:rgba(226,238,255,.42);
}
/* The note that used to sit here, telling an Arabic reader to run the page
through a translator, has been removed. A company does not tell its
reader to go and translate its own legal document. */
.legal-toc{
margin-bottom:clamp(38px,5vw,58px);
padding:22px 26px;
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
}
.legal-toc-t{
display:block;
font-family:'IBM Plex Mono', ui-monospace, monospace;
font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
color:rgba(226,238,255,.4);
margin-bottom:14px;
}
.legal-toc ol{
margin:0; padding:0; list-style:none;
columns:2; column-gap:34px;
}
@media (max-width:600px){ .legal-toc ol{ columns:1; } }
.legal-toc li{ counter-increment:toc; margin-bottom:9px; break-inside:avoid; }
.legal-toc a{
color:rgba(226,238,255,.68); text-decoration:none;
font-size:.9rem; transition:color .26s ease;
}
.legal-toc li::before{
content:counter(toc) '.';
color:rgba(226,238,255,.3);
font-family:'IBM Plex Mono', ui-monospace, monospace;
font-size:.76rem; margin-inline-end:8px;
}
.legal-toc a:hover{ color:#fff; }
.legal-art{
padding-block:clamp(24px,3.4vw,34px);
border-top:1px solid rgba(255,255,255,.06);
/* So a jump from the contents list does not land under a sticky header. */
scroll-margin-top:96px;
}
.legal-art:first-child{ border-top:0; }
.legal-art h3{
display:flex; align-items:baseline; gap:12px;
font-size:clamp(1.06rem,2.6vw,1.24rem);
font-weight:700; color:#fff;
margin-bottom:.7em; letter-spacing:-.01em;
}
.legal-n{
flex:0 0 auto;
font-family:'IBM Plex Mono', ui-monospace, monospace;
font-size:.8rem; font-weight:500;
color:var(--gold,#D4A945);
}
.legal-art p{
color:rgba(226,238,255,.74);
line-height:2.05; font-size:.95rem;
margin-bottom:1.05em;
}
.legal-art p:last-child{ margin-bottom:0; }
.legal-art strong{ color:#fff; font-weight:600; }
.legal-art ul{ margin:0 0 1.05em; padding-inline-start:1.15em; }
.legal-art li{
color:rgba(226,238,255,.74);
line-height:2.05; font-size:.95rem; margin-bottom:.5em;
}
.legal-art li::marker{ color:rgba(212,169,69,.55); }
.legal-art a{
color:var(--gold,#D4A945);
text-decoration:none;
border-bottom:1px solid rgba(212,169,69,.3);
transition:border-color .26s ease;
}
.legal-art a:hover{ border-bottom-color:var(--gold,#D4A945); }
/* ── The top bar on a phone ────────────────────────────────────────
Below 920px the navigation inside this bar is already hidden and the
hamburger takes over. What is left is a strip carrying a logo — and the
hamburger is fixed at the top corner, in the same place, so the two sat
on top of each other. That is the overlap in the screenshot.
The strip is removed at that width rather than nudged out of the way.
The brand is already at the head of the side menu, the links are already
in the hamburger and in the footer, and a bar whose only remaining job
is to hold a logo behind a button is not worth the sixty pixels it costs
at the top of every page.
Above 920px it stays exactly as it was: there the bar holds the real
navigation and the hamburger is the thing that is hidden. */
@media (max-width:919px){
.topbar{ display:none; }
}
/* ── Room for the floating button ──────────────────────────────────
The booking button is fixed to the bottom of the window, so on a short
page it lands on top of the last thing in the footer. Short pages are
exactly where this happens: the error page, and the contact page on a
wide screen. The footer reserves the button's height plus the safe area
under it, so nothing is ever covered. */
.site-foot{
padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px));
}
@media (min-width:920px){
.site-foot{ padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px)); }
}
/* The credit is the last row and sits inside that reserved space, so it
carries the offset instead of the footer's own padding doubling it. */
.sf-credit{ margin-bottom:0; }
/* ── Form fields, made proof against the zoom ──────────────────────
Marked important on purpose. Any rule anywhere that sets a field below
16px causes a mobile browser to zoom the whole page in on focus and never
zoom back out, and the size a field is drawn at is not worth losing that
argument over. This is the one place in the stylesheet where !important
is the correct tool: it is not a specificity fight, it is a floor.
resize:vertical matters too. A textarea defaults to resize:both, so a
drag on its corner can pull it wider than the page, and a page wider than
the screen is a page the browser scales down to fit. Height is the only
axis anyone actually wants to resize. */
input, select, textarea,
.ct-f input, .ct-f textarea,
.form-field input, .form-field textarea,
.bm-input{
font-size:16px !important;
max-width:100%;
box-sizing:border-box;
}
textarea{ resize:vertical; }
/* Nothing inside a card may push the page wider than the screen. */
.ct-msg, .ct-form, .contact{ max-width:100%; overflow-wrap:anywhere; }
/* ── The home page's index ─────────────────────────────────────────
Three columns, and the rule under each label fades out rather than
stopping at a hard edge — the same treatment used everywhere else on
this site, so the block reads as part of it rather than as a table that
wandered in. */
.sf-index{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:clamp(26px,4vw,54px);
padding-bottom:clamp(30px,4vw,42px);
border-bottom:1px solid rgba(255,255,255,.07);
text-align:start;
}
@media (max-width:760px){
/* Two columns on a phone, not three: three makes each one narrow enough
that "info@targoacademy.com" has to break across two lines. */
.sf-index{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px 20px; }
.sf-index .sf-col:last-child{ grid-column:1 / -1; }
}
.sf-col{ display:flex; flex-direction:column; min-width:0; }
.sf-label{
font-family:'IBM Plex Mono', ui-monospace, monospace;
font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
color:var(--gold,#D4A945);
opacity:.9;
}
.sf-rule{
display:block; height:1px; margin:12px 0 16px;
background:linear-gradient(to left, rgba(212,169,69,.42), rgba(212,169,69,0));
}
.sf-item{
font-size:.88rem; line-height:2.05;
color:rgba(226,238,255,.62);
}
.sf-more{ color:var(--gold,#D4A945); opacity:.8; }
a.sf-linked{
text-decoration:none;
width:fit-content;
transition:color .28s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
a.sf-linked:hover{ color:#fff; transform:translateX(-3px); }
html[dir="ltr"] a.sf-linked:hover{ transform:translateX(3px); }
.sf-note{
font-family:'IBM Plex Mono', ui-monospace, monospace;
font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
color:rgba(226,238,255,.34);
margin-top:12px;
}
.sf-col .sf-note:first-of-type{ margin-top:0; }
.sf-mail{
font-size:.84rem; color:rgba(226,238,255,.72);
text-decoration:none; word-break:break-all;
border-bottom:1px solid transparent;
width:fit-content;
transition:color .28s ease, border-color .28s ease;
}
.sf-mail:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.3); }
.sf-reach-index{ padding-bottom:clamp(20px,3vw,26px); }
/* ── The legal lines ───────────────────────────────────────────────
Stacked and centred. They were sitting side by side with a dot between,
which on a narrow column wrapped into a ragged run of text. Two
statements, two lines, the second quieter than the first. */
.sf-seal{ text-align:center; margin-top:clamp(22px,3vw,30px); }
.sf-legal{
margin:0;
font-size:.78rem; line-height:1.9;
color:rgba(255,255,255,.4);
}
.sf-legal-2{
margin-top:4px;
font-size:.74rem;
color:rgba(255,255,255,.3);
}
.sf-legal a{
color:rgba(255,255,255,.55);
text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.16);
padding-bottom:1px;
transition:color .28s ease, border-color .28s ease;
}
.sf-legal a:hover{ color:rgba(255,255,255,.9); border-bottom-color:rgba(255,255,255,.45); }
/* ── The side menu's foot, as names ────────────────────────────────
Two logo images and the word between them have been replaced by three
lines of text. A drawer three hundred pixels wide is somewhere a reader
passes through, and a picture there is a picture nobody stops to look
at. Set as a signature: the academy, the word, the group. */
.sm-brand{
display:block;
font-family:var(--font-head);
font-size:.86rem; font-weight:600;
color:rgba(238,246,255,.78);
}
.sm-parent-name{
display:block;
margin-top:4px;
font-family:var(--font-head);
font-size:1.02rem; font-weight:700; letter-spacing:.04em;
color:rgba(238,246,255,.9);
text-decoration:none;
border-bottom:1px solid transparent;
width:fit-content; margin-inline:auto;
transition:color .28s ease, border-color .28s ease;
}
.sm-parent-name:hover{
color:#fff; border-bottom-color:rgba(255,255,255,.35);
}
/* ── The credit sits on the floor ──────────────────────────────────
The first attempt at this made the body a flex column so the footer
would be pushed down. That broke the desktop badly, and the reason is
worth writing down: is a direct child of body
and is position:sticky, not fixed. Turning body into a flex container
turned the header into a flex item, so it took a place in the row
beside main and the footer — which is why the sections appeared side
by side. Anything that restructures body has to account for every
child of body, and this page has ten of them.
So body is left exactly as it was. The gap under the credit only ever
appears when a page is shorter than the window, and giving the content
a minimum height solves that without touching the layout of anything.
Short pages fill the screen; long pages are unaffected because they are
already taller than this. */
main{ min-height:72vh; }
@media (max-width:919px){ main{ min-height:64vh; } }
/* ── Clear of the hamburger on a phone ─────────────────────────────
The top bar was removed below 920px, so a page now begins at the very
top of the window — and the hamburger is fixed in that exact corner. The
first heading of a page was landing underneath it. Room is made at the
head of the page rather than on each heading, so it applies to every
page including any added later. */
/* Except where the first thing is a full-screen hero, which is meant to
start at the top edge and carries its own space inside it. */
@media (max-width:1024px){
body > main:has(> .video-hero:first-child),
body > main:has(> .intro-hero:first-child){ padding-top:0 !important; }
}
/* ── The side menu's real height ───────────────────────────────────
The panel is set to height:100vh. On a phone 100vh is the height of the
screen with the browser's own bars counted as if they were not there, so
the panel is taller than what you can actually see and its last inches
sit below the bottom edge. The foot is the last thing in it, which is
why the end of the foot could not be reached: not a colour, not a
missing rule — the panel simply extended past the screen.
100dvh is the same measurement taken against what is visible right now,
and it changes as the browser's bars slide away. The fallback line is
kept first for anything that does not know the unit. */
.side-menu{
height:100vh;
height:100dvh;
/* And room under the last line for the home indicator on a phone with no
physical button, which otherwise sits on top of it. */
padding-bottom:calc(26px + env(safe-area-inset-bottom, 0px));
}
/* The foot is pushed to the bottom by margin-top:auto, which is right when
the content is short. When the content is taller than the panel that
same rule leaves it hard against the very last pixel, with the scroll
ending exactly on it. A little space above it makes the end of the list
read as an end rather than as something cut off. */
.sm-foot{ padding-bottom:14px; }
/* ── The top bar stays gone on a phone ─────────────────────────────
Repeated with the id in the selector so nothing that comes later in an
older cached copy of this file can bring it back and put it under the
hamburger again. */
/* ── The top bar is for desktops only ──────────────────────────────
Hidden below 1025px, not 920px. An iPad in landscape reports 1024, and
a 920px cut-off left the bar showing on exactly the devices where it
causes the problem: the navigation inside it is already hidden at that
width, so all that remains is a strip holding a logo directly underneath
the hamburger, which is fixed to the same corner.
Stated three ways — the element, the class, and both together — because
this rule has to beat anything in an older cached copy of this file. */
@media (max-width:1024px){
.topbar,
header.topbar,
body > header.topbar{ display:none !important; }
}
/* And the space that was reserved for it is only needed where it is gone. */
@media (max-width:1024px){
body > main{ padding-top:78px; }
}
@media (min-width:1025px){
body > main{ padding-top:0; }
}
/* ══════════════════════════════════════════════════════════════════
THE FOOTER — one authoritative block
══════════════════════════════════════════════════════════════════
This stylesheet had accumulated three definitions of .sf-legal, four of
.sf-credit and three of .site-foot, written at different times against
three different footer markups. Each new one only partly overrode the
last, so what a page actually rendered depended on which properties
happened to survive — which is why the footer looked different, and
wrong, from one page to the next.
Everything below restates the footer completely rather than patching it.
It is last in the file, so it wins, and every property the footer needs
is set here explicitly instead of being inherited from a rule written
for markup that no longer exists.
══════════════════════════════════════════════════════════════════ */
.site-foot{
margin-top:clamp(60px,9vw,120px);
padding:clamp(44px,6vw,72px) 0 0;
border-top:1px solid rgba(255,255,255,.07);
/* A single soft light along the top edge, the way every surface on this
site is lit. It replaces the flat panel the footer used to sit on. */
background:
radial-gradient(120% 100% at 50% 0%, rgba(70,216,255,.05), transparent 62%),
linear-gradient(180deg, rgba(255,255,255,.014), transparent 40%);
}
.site-foot .wrap{ padding-inline:clamp(22px,5vw,56px); }
/* ── The index, home page only ─────────────────────────────────── */
.sf-index{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:clamp(30px,4vw,60px);
padding-bottom:clamp(34px,4.5vw,50px);
border-bottom:1px solid rgba(255,255,255,.06);
text-align:start;
}
.sf-col{ display:flex; flex-direction:column; min-width:0; align-items:flex-start; }
.sf-label{
font-family:'IBM Plex Mono', ui-monospace, monospace;
font-size:.6rem; font-weight:500;
letter-spacing:.26em; text-transform:uppercase;
color:var(--gold,#D4A945); opacity:.92;
margin:0;
}
.sf-rule{
display:block; width:100%; height:1px;
margin:13px 0 18px;
background:linear-gradient(to left, rgba(212,169,69,.4), rgba(212,169,69,0) 78%);
}
html[dir="ltr"] .sf-rule{
background:linear-gradient(to right, rgba(212,169,69,.4), rgba(212,169,69,0) 78%);
}
.sf-item{
padding:0; margin:0 0 9px;
font-size:.88rem; line-height:1.65; font-style:normal;
color:rgba(226,238,255,.6);
}
.sf-more{ color:var(--gold,#D4A945); opacity:.85; font-style:normal; }
a.sf-linked{
text-decoration:none; width:fit-content;
transition:color .28s ease, transform .32s cubic-bezier(.16,1,.3,1);
}
a.sf-linked:hover{ color:#fff; opacity:1; transform:translateX(-3px); }
html[dir="ltr"] a.sf-linked:hover{ transform:translateX(3px); }
.sf-note{
margin:16px 0 5px;
font-family:'IBM Plex Mono', ui-monospace, monospace;
font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
color:rgba(226,238,255,.32);
}
.sf-col .sf-note:first-of-type{ margin-top:0; }
.sf-mail{
display:block; margin:0 0 4px;
font-size:.84rem; color:rgba(226,238,255,.72);
text-decoration:none; word-break:break-word;
border-bottom:1px solid transparent; width:fit-content;
transition:color .26s ease, border-color .26s ease;
}
.sf-mail:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.28); }
/* ── The link row, inner pages ─────────────────────────────────── */
.sf-nav{
display:flex; flex-wrap:wrap; justify-content:center;
gap:4px clamp(16px,3.2vw,34px);
padding:0 0 clamp(26px,3.6vw,34px);
border:0;
border-bottom:1px solid rgba(255,255,255,.06);
}
.sf-nav a{
color:rgba(226,238,255,.6);
text-decoration:none;
font-size:.9rem; line-height:1.9;
padding:4px 0;
border-bottom:1px solid transparent;
transition:color .26s ease, border-color .26s ease;
}
.sf-nav a:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.3); }
/* ── The number ────────────────────────────────────────────────── */
.sf-reach{
display:flex; flex-wrap:wrap;
align-items:center; justify-content:center;
gap:4px 14px;
margin:clamp(24px,3.4vw,32px) 0 0;
padding:0;
font-family:'IBM Plex Mono', ui-monospace, monospace;
font-size:.8rem;
}
.sf-reach a{
color:rgba(226,238,255,.68); text-decoration:none;
border-bottom:1px solid transparent;
transition:color .26s ease, border-color .26s ease;
}
.sf-reach a:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.28); }
.sf-phone{
color:var(--gold,#D4A945) !important;
font-size:.98rem; letter-spacing:.06em;
}
.sf-phone:hover{ border-bottom-color:rgba(212,169,69,.55) !important; }
.sf-sep{ color:rgba(255,255,255,.18); }
.sf-reach-index{ margin-top:clamp(26px,3.6vw,34px); }
/* ── The notice ────────────────────────────────────────────────── */
.sf-seal{
text-align:center;
margin:clamp(26px,3.6vw,36px) 0 0;
padding:clamp(22px,3vw,28px) 0 clamp(26px,3.4vw,34px);
border-top:1px solid rgba(255,255,255,.06);
}
.sf-legal{
margin:0; padding:0;
font-size:.78rem; line-height:1.85; font-weight:400;
letter-spacing:.01em;
color:rgba(255,255,255,.4);
}
.sf-legal-2{ margin-top:5px; font-size:.74rem; color:rgba(255,255,255,.3); }
.sf-yr{ direction:ltr; unicode-bidi:embed; white-space:nowrap; }
.sf-legal a{
color:rgba(255,255,255,.55); text-decoration:none; white-space:nowrap;
border-bottom:1px solid rgba(255,255,255,.16); padding-bottom:1px;
transition:color .26s ease, border-color .26s ease;
}
.sf-legal a:hover{ color:rgba(255,255,255,.9); border-bottom-color:rgba(255,255,255,.45); }
/* ── The signature ─────────────────────────────────────────────── */
.sf-credit{
margin:0 calc(50% - 50vw);
padding:15px 18px calc(15px + env(safe-area-inset-bottom, 0px));
border-top:1px solid rgba(255,255,255,.07);
background:rgba(0,0,0,.22);
text-align:center;
font-family:'IBM Plex Mono', ui-monospace, monospace;
font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
direction:ltr; color:rgba(255,255,255,.3);
}
.sf-credit a{
color:rgba(255,255,255,.52); text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.14); padding-bottom:1px;
transition:color .26s ease, border-color .26s ease;
}
.sf-credit a:hover{ color:rgba(255,255,255,.88); border-bottom-color:rgba(255,255,255,.4); }
/* ── Tablet ────────────────────────────────────────────────────── */
@media (max-width:900px){
.sf-index{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:30px 24px; }
/* The addresses are the longest column, so it gets the full width rather
than being squeezed to half and breaking every line in two. */
.sf-index .sf-col:last-child{ grid-column:1 / -1; }
}
/* ── Phone ─────────────────────────────────────────────────────── */
@media (max-width:560px){
.sf-index{ grid-template-columns:1fr; gap:28px; }
.sf-index .sf-col:last-child{ grid-column:auto; }
/* Stacked. A wrapped row of links separated by nothing but space reads
as a paragraph of text; one per line reads as a list of places to go. */
.sf-nav{ flex-direction:column; align-items:center; gap:2px; }
.sf-nav a{ padding:7px 0; }
.sf-reach{ flex-direction:column; gap:10px; }
.sf-reach .sf-sep{ display:none; }
}
/* The floating booking button must not land on the signature.
The desktop rule used to shrink this reservation back down to 15px, on
the assumption the button only shows on a phone. It does not — .sticky-cta
has no width query hiding it, so at 920px and above it was left fixed
directly on top of the credit line, covering "Designed & developed by
Targo IT" instead of sitting below it. */
.site-foot{ padding-bottom:0; }
body:has(.sticky-cta) .sf-credit{
padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px));
}
/* ══════════════════════════════════════════════════════════════════
SECTION RHYTHM — the home page reads as one document
══════════════════════════════════════════════════════════════════
The sections were built at different times and each carries its own
vertical padding, so the page moved in uneven steps: a tight block, then
a loose one, then a tight one again. Nothing was wrong with any single
section; what was missing was a rhythm between them.
One measure is set here and every section takes it. The eye reads even
spacing as intention and uneven spacing as accident, and that is most of
the difference between a page that looks composed and one that looks
assembled.
══════════════════════════════════════════════════════════════════ */
main > section{
padding-block:clamp(72px, 10vw, 132px);
position:relative;
}
/* A hairline between sections that arrives and leaves rather than cutting
the page across. Not on the first, which follows the hero, and not
before the footer, which draws its own. */
main > section + section::before{
content:'';
position:absolute; inset-inline:0; top:0;
height:1px;
background:linear-gradient(90deg,
transparent, rgba(255,255,255,.07) 22%, rgba(255,255,255,.07) 78%, transparent);
}
main > section:first-child{ padding-top:clamp(48px,7vw,84px); }
/* ── Section headings ──────────────────────────────────────────────
The eyebrow, the heading and the standfirst are one unit and were
spaced as three. Tightening the gaps inside and widening the gap after
is what makes them read as an opening rather than as three stacked
lines. */
.section-head{
max-width:62ch;
margin-inline:auto;
margin-bottom:clamp(38px, 5vw, 62px);
text-align:center;
/* The base rule sets align-items:flex-start on this flex column, which
pins every child to the start edge — the right, in RTL — no matter
what text-align says. That is why the kicker sat off to one side
instead of over the title. */
align-items:center;
}
/* The page kicker: gold, centred, and flanked by two hairlines that fade
out, so it reads as a deliberate label above the title rather than a
stray line of small text. */
.section-head .eyebrow{
display:inline-flex;
align-items:center;
gap:clamp(10px, 2vw, 16px);
font-family:'IBM Plex Mono', ui-monospace, monospace;
font-size:clamp(.88rem, 2.3vw, 1.08rem);
font-weight:600;
letter-spacing:.26em; text-transform:uppercase;
color:var(--gold,#D4A945);
text-shadow:0 0 20px rgba(212,169,69,.35);
text-indent:.26em; /* cancel the tracking after the last letter */
margin-bottom:clamp(16px, 2.4vw, 24px);
}
/* No short gold lines either side of a section title (owner, 2 October:
they looked cheap); the title carries the section alone. */
/* Only h2 was ever given a size here, so a page title written as h1 —
which is every marketing page — fell through to the browser default
of 2em and rendered SMALLER than the section headings below it. The
title now leads the page, comfortably above any h2 under it. */
.section-head h1{
font-size:clamp(2.1rem, 5.6vw, 3.4rem);
line-height:1.18;
letter-spacing:-.024em;
margin:0 0 .4em;
background:linear-gradient(180deg,#ffffff 0%,#cfe9ff 100%);
-webkit-background-clip:text; background-clip:text;
color:transparent;
}
.section-head h2{
font-size:clamp(1.7rem, 4.6vw, 2.7rem);
line-height:1.28;
letter-spacing:-.02em;
margin:0 0 .5em;
/* A short fall rather than a long one: over a tall line a white-to-blue
gradient fades the feet of the letters into the page and costs the
type its weight. */
background:linear-gradient(180deg, #ffffff 0%, #dcecff 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
}
.section-head > p{
margin:0 auto;
max-width:56ch;
font-size:clamp(.95rem, 2.4vw, 1.04rem);
line-height:2;
color:rgba(226,238,255,.66);
}
/* ── The card grids ────────────────────────────────────────────────
Equal columns and equal heights. Cards of different heights in one row
leave a ragged bottom edge, which is the single thing that most makes a
grid look unfinished. */
.features, .ap-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:clamp(16px, 2.2vw, 26px);
align-items:stretch;
}
.features > *, .ap-grid > *{ display:flex; flex-direction:column; }
.features > * > p:last-child, .ap-grid > * > p:last-child{ margin-bottom:0; }
@media (max-width:900px){
.features, .ap-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
/* An odd card left alone on the last row is worse than a full width one. */
.features > *:last-child:nth-child(odd),
.ap-grid > *:last-child:nth-child(odd){ grid-column:1 / -1; }
}
@media (max-width:600px){
.features, .ap-grid{ grid-template-columns:1fr; }
.features > *:last-child:nth-child(odd),
.ap-grid > *:last-child:nth-child(odd){ grid-column:auto; }
}
/* The lead paragraph above the three principles is part of that block's
opening, so it takes the same measure and the same centring as any
other section heading. */
.ap-lead{ max-width:62ch; margin-inline:auto; margin-bottom:clamp(34px,4.4vw,54px); text-align:center; }
/* ── Section titles with presence (October 2026) ───────────────────
The owner's rule: a title such as «لماذا تارغو» must be large and carry
weight; small, spaced-out capitals read as timid. Two cases:
1. A label over a section's h2 (the home sections, «منهجنا», «ميزة
حصرية»): the label IS the section's title, so it is set large in the
heading face, in gold, and the h2 under it becomes its subtitle.
2. A label over a page's h1 (عن المنصة، الباقات، التواصل…): the h1 is
already the largest line on the page, so the label is a firm gold
line in the heading face above it, no longer a whisper.
The heading face (Tajawal) instead of the monospace, which has no
Arabic of its own, and no letter-spacing: spacing pulls Arabic letters
apart. */
.section-head .eyebrow, .legal-head .eyebrow,
.ap-eyebrow, .mp-eyebrow{
font-family:var(--font-head);
font-size:clamp(1.3rem, 4vw, 1.75rem);
font-weight:800;
line-height:1.4;
letter-spacing:0; text-indent:0; text-transform:none;
color:#F3C86A;
text-shadow:0 2px 22px rgba(243,200,106,.22);
opacity:1;
}
.section-head .eyebrow{ gap:clamp(12px, 2.4vw, 18px); }
.legal-head .eyebrow{ display:block; margin-bottom:8px; }
/* Case 1: the label is the title. */
.section-head .eyebrow:has(+ h2),
.ap-eyebrow, .mp-eyebrow{
font-size:clamp(2.05rem, 7.4vw, 3.3rem);
line-height:1.2;
margin-bottom:clamp(10px, 1.6vw, 16px);
}
.ap-eyebrow, .mp-eyebrow{ display:inline-flex; align-items:center; gap:clamp(12px, 2.4vw, 18px); }
.section-head .eyebrow + h2,
.ap-lead h2, .mp-head h2{
font-size:clamp(1.15rem, 3.4vw, 1.55rem);
font-weight:700;
line-height:1.55;
letter-spacing:0;
}
/* ══════════════════════════════════════════════════════════════════
THE WAY HOME — on every page but the home page (owner, 2 October)
══════════════════════════════════════════════════════════════════
The same blue button as the department page and the booking page:
a back arrow, a house, and the words. Someone who reaches a page from
a search or a shared link has never seen the home page, and on a phone
the only way there was inside the menu.
On a laptop it is the first thing in the top bar, which stays at the
top. Below 1025px the bar is hidden, so the button floats in the top
corner opposite the menu button, the same height, and stays there
however far the page is scrolled. It sits under the open menu and its
shade (1098), never over them.
A page made later gets it from site.js even if its markup forgets it. */
.home-btn{
display:inline-flex; align-items:center; gap:8px; min-height:42px;
padding:8px 16px 8px 18px; border-radius:99px;
border:2px solid #3B82F6; background:rgba(59,130,246,.16);
color:#CFE1FF !important; font-family:inherit;
font-weight:700; font-size:.92rem; line-height:1.2; text-decoration:none; white-space:nowrap;
transition:background .25s ease, color .25s ease;
-webkit-tap-highlight-color:transparent;
}
.home-btn:hover, .home-btn:focus-visible{ background:#3B82F6; color:#fff !important; }
.home-btn svg{ width:17px; height:17px; flex:0 0 auto; }
.home-btn .arr{ transform:scaleX(-1); }
.home-btn .hb-short{ display:none; }
/* The copy in the top bar (laptop). On a narrower laptop the short word,
so the bar's links keep to one line each. */
.topbar .nav .home-btn{ margin-inline-end:4px; }
.topbar .nav a{ white-space:nowrap; }
@media (max-width:1199px){
.topbar .home-btn .hb-long{ display:none; }
.topbar .home-btn .hb-short{ display:inline; }
}
/* The floating copy (phone and tablet). */
.home-btn--float{
position:fixed; top:18px; left:18px; z-index:1097;
min-height:48px; display:none;
background:rgba(13,28,60,.94);
-webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
box-shadow:0 2px 10px rgba(0,0,0,.4);
}
@media (max-width:1024px){ .home-btn--float{ display:inline-flex; } }
@media (max-width:520px){
.home-btn--float .hb-long{ display:none; }
.home-btn--float .hb-short{ display:inline; }
.home-btn--float{ font-size:.88rem; padding-inline:14px; }
}
@media print{ .home-btn{ display:none !important; } }
/* ── كيف تجري الحصص ──────────────────────────────────────────────────
The lesson facts, on the home page and on the packages page in the
same words (owner, 11 October: 45 minutes a lesson, three a week on
days the student picks, a missed lesson is made up, and payment in one
go or in instalments). In site.css rather than home.css because both
pages carry it and one copy is the point - two copies drift, and a
reader who sees two different answers believes neither.
No prices anywhere in it: the owner's decision. */
.lx-facts{
list-style:none; margin:clamp(18px,2.6vw,28px) auto 0; padding:0;
display:grid; gap:clamp(10px,1.4vw,14px);
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
max-width:var(--max,1180px);
}
.lx-fact{
display:grid; grid-template-columns:auto 1fr; grid-template-areas:"i t" ". d";
gap:4px 12px; align-items:center;
padding:clamp(13px,1.6vw,18px) clamp(14px,1.8vw,20px);
/* The packages page centres its section, and the cards were inheriting
that - a four-line card with every line centred reads as a poster,
not as a fact. `start` is the right-hand side here, which is where a
right-to-left line begins. */
text-align:start;
border:1px solid rgba(120,160,220,.18); border-radius:16px;
background:linear-gradient(160deg,rgba(14,28,60,.52),rgba(8,16,36,.38));
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.lx-ico{ grid-area:i; display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
color:#8fd7ff; background:rgba(70,216,255,.10); border:1px solid rgba(70,216,255,.22); }
.lx-ico svg{ width:19px; height:19px; }
.lx-fact b{ grid-area:t; font-size:clamp(.95rem,2.4vw,1.04rem); color:#fff; font-weight:800; }
.lx-fact span:last-child{ grid-area:d; font-size:clamp(.82rem,2.1vw,.92rem); line-height:1.6; color:#bdcbe6; }
@media (max-width:560px){
.lx-fact{ grid-template-areas:"i t" "d d"; gap:6px 10px; }
}
/* The packages page is the same dark page, but its section is narrower. */
#packages .lx-facts{ margin-bottom:clamp(20px,3vw,32px); }