/* Shared colour theme and accessible theme switcher. Dark is the default. */ /* ===== liquid glass material — reserved for floating chrome only (the topbar and the floating theme toggle). Content cards, photos and badges are intentionally left solid, matching Apple's own Liquid Glass guidance: glass belongs on navigation/controls, not smeared across content. ===== */ :root{ --glass-fill: rgba(255,255,255,.06); --glass-fill-strong: rgba(255,255,255,.10); --glass-border: rgba(255,255,255,.14); --glass-edge: rgba(255,255,255,.28); --glass-rim-dark: rgba(0,0,0,.22); --glass-blur: 26px; --topbar-fill: rgba(20,20,20,.46); --topbar-ink: var(--ink); /* Text set directly in banana/pink (tags, badges, nav highlights) needs its own "ink" tone: the raw accent is tuned to glow on near-black and is too light-valued to read as text once it sits on a light/glassy background. */ --banana-ink: var(--banana); --pink-ink: var(--pink); } html[data-theme="light"]{ --bg:#f8f5ee; --panel:#fff; --panel2:#f1ece0; --banana:#FFCB2B; --banana-deep:#D9A600; --pink:#FF2E9A; --pink-deep:#C0106D; --ink:#1b1812; --muted:#726f65; --line:#e7e1d2; /* Much more opaque than the dark-mode glass: a translucent panel over a light page needs real body behind dark text, so contrast comes from the glass itself instead of a text-shadow (a shadow the same colour as the page reads as a blur, not a fix — that was the readability bug). */ --glass-fill: rgba(255,255,255,.6); --glass-fill-strong: rgba(255,255,255,.78); --glass-border: rgba(27,24,18,.12); --glass-edge: rgba(255,255,255,.85); --glass-rim-dark: rgba(90,78,40,.08); --topbar-fill: rgba(255,255,255,.74); --topbar-ink: #1b1812; --banana-ink: var(--banana-deep); --pink-ink: var(--pink-deep); } html[data-theme="light"] body{color:var(--ink);} html[data-theme="light"] .page-head p, html[data-theme="light"] .hero p.sub, html[data-theme="light"] .course-card p, html[data-theme="light"] .cta-card p, html[data-theme="light"] .about-box p, html[data-theme="light"] .card > p.sub, html[data-theme="light"] .summary .line, html[data-theme="light"] .syria-box p, html[data-theme="light"] .benefits li, html[data-theme="light"] .preorder-box li, html[data-theme="light"] .founder-list li, html[data-theme="light"] .closing p{color:#5c594e;} html[data-theme="light"] .tags span, html[data-theme="light"] .soon-card b{color:var(--ink);} html[data-theme="light"] .btn, html[data-theme="light"] .btn-primary{color:#fff;} html[data-theme="light"] .course-card .cover{background:linear-gradient(135deg,#f4efe5,#fff);} /* Alpha-blending a translucent glow onto a light page just pales it toward white (the "rose gold" wash) — multiply keeps yellow and pink reading as themselves against the cream background instead of merging into one pastel tint, matching how distinctly they glow against near-black in dark mode. */ html[data-theme="light"] .glow-yellow{opacity:.28; mix-blend-mode:multiply;} html[data-theme="light"] .glow-pink{opacity:.22; mix-blend-mode:multiply;} html[data-theme="light"] .compare-col li, html[data-theme="light"] .result-card .l, html[data-theme="light"] .bonus-item p, html[data-theme="light"] .offer-box .line, html[data-theme="light"] .faq-item p{color:#4d4942;} html[data-theme="light"] .results .subline, html[data-theme="light"] .bonus .subline, html[data-theme="light"] .bonus-total, html[data-theme="light"] .cbox .l, html[data-theme="light"] .stat-strip .lbl{color:#625d55;} html[data-theme="light"] .old-price{color:#625d55;} /* Keep text selection consistent and highly readable in both themes. */ ::selection{background:#ffcb2b; color:#111; text-shadow:none;} ::-moz-selection{background:#ffcb2b; color:#111; text-shadow:none;} /* Removes the ~300ms tap delay some mobile browsers add while they wait to see if a tap is the start of a double-tap-to-zoom gesture. */ a,button{touch-action:manipulation;} /* Decorative glows and fixed bars must never create a horizontal mobile canvas. */ html,body{width:100%; max-width:100%; overflow-x:hidden; overflow-x:clip;} body{position:relative;} main,footer{max-width:100%;} img,video,iframe,svg,canvas{max-width:100%;} @media (max-width:480px){ .wrap{padding-inline:18px;} } /* ===== STICKY GLASS TOPBAR — shared by every page that has one, so the material (and the light-mode contrast fix above) lives in one place instead of being copy-pasted into each page and drifting out of sync. ===== */ .topbar-shell{ position:fixed; top:0; right:0; left:0; z-index:100; display:flex; justify-content:center; padding:14px 18px 0; pointer-events:none; max-width:100%; } .topbar-shell .topbar{max-width:1080px;} .topbar{ pointer-events:auto; width:100%; display:flex; align-items:center; justify-content:space-between; padding:11px 22px; gap:16px; border-radius:20px; background:var(--topbar-fill); -webkit-backdrop-filter: blur(30px) saturate(200%); backdrop-filter: blur(30px) saturate(200%); border:1px solid var(--glass-border); box-shadow: 0 1px 0 0 var(--glass-edge) inset, 0 -1px 0 0 var(--glass-rim-dark) inset, 0 18px 36px -22px rgba(0,0,0,.5); transition:background .3s, border-color .3s, box-shadow .3s; } .topbar-logo{font-family:'Tajawal',sans-serif; font-weight:900; font-size:24px; color:var(--topbar-ink); white-space:nowrap; text-decoration:none;} .topbar-logo span{color:var(--banana-ink);} .topbar-right{display:flex; align-items:center; gap:16px; min-width:0;} .topbar-nav{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;} .topbar-nav::-webkit-scrollbar{display:none;} .topbar-nav a{ color:var(--topbar-ink); text-decoration:none; font-size:15px; font-weight:600; white-space:nowrap; padding:8px 14px; border-radius:999px; transition:color .2s, background .2s; } .topbar-nav a:hover{color:var(--banana-ink); background:rgba(255,255,255,.1);} .topbar-nav a.active{color:var(--banana-ink); background:color-mix(in srgb, var(--banana) 16%, transparent);} @media(max-width:820px){ .topbar-nav{display:none;} /* Fixed position + heavy backdrop-filter forces the browser to re-render the blur every scroll frame — on mid/low-end phones this shows up as blank content that "catches up" a second or two after you stop scrolling. A lighter blur keeps the glass look but is far cheaper to recompute continuously. */ .topbar{-webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);} } @media(max-width:480px){ .topbar{padding-inline:16px;} .topbar .btn{padding:8px 14px; font-size:12px;} } .topbar-actions{display:flex; align-items:center; gap:18px; min-width:0;} .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:38px; height:38px; padding:0; border-radius:50%; color:var(--topbar-ink); background:var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(200%); backdrop-filter: blur(var(--glass-blur)) saturate(200%); border:1px solid var(--glass-border); cursor:pointer; font-size:17px; line-height:1; transition:border-color .2s,transform .2s,background .2s; } .theme-toggle:hover{border-color:var(--banana); transform:rotate(15deg); background:var(--glass-fill-strong);} .theme-toggle:focus-visible,.course-card-link:focus-visible{outline:3px solid var(--pink); outline-offset:3px;} .theme-toggle--floating{position:fixed; z-index:200; top:18px; left:20px;} @media (max-width:820px){.topbar-actions{gap:10px;}} @media (max-width:480px){.theme-toggle{width:36px;height:36px;}.theme-toggle--floating{top:14px;left:14px;}} /* ===== Shared scroll-reveal: fade+rise elements in as they enter the viewport. External file per AGENTS.md (no inline