:root {
  --background: 219 58% 7%; --foreground: 214 35% 96%; --primary: 207 85% 39%; --secondary: 207 85% 39%; --muted: 215 32% 18%; --destructive: 12 100% 60%; --border: 207 85% 39%; --card: 218 46% 10%; --success: 152 100% 42%; --warning: 43 96% 54%; --orange: 27 92% 54%; --shadow-sm: 0 0 18px hsl(var(--primary) / .16); --shadow-md: 0 12px 40px hsl(var(--primary) / .18); --shadow-lg: 0 20px 80px hsl(var(--primary) / .26); --transition-fast: 180ms ease; --transition-smooth: 420ms cubic-bezier(.2,.8,.2,1); --radius-sm: 10px; --radius-md: 18px; --radius-lg: 30px;
}
.dark { --background: 219 58% 7%; --foreground: 214 35% 96%; --primary: 207 85% 39%; --secondary: 207 85% 39%; --muted: 215 32% 18%; --destructive: 12 100% 60%; --border: 207 85% 39%; --card: 218 46% 10%; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Inter, sans-serif; background: #071426; color: hsl(var(--foreground)); overflow-x: hidden; transition: background var(--transition-smooth), color var(--transition-smooth); } body::before { content: ''; position: fixed; inset: 0; z-index: -5; background: radial-gradient(circle at 18% 14%, hsl(var(--primary) / .28), transparent 30%), radial-gradient(circle at 82% 28%, hsl(var(--secondary) / .18), transparent 26%), linear-gradient(135deg, #071426 0%, #0b2340 52%, #03101f 100%); } body.light-theme { --background: 207 60% 97%; --foreground: 215 36% 14%; --muted: 209 45% 91%; --card: 0 0% 100%; background: #eef7ff; } body.light-theme::before { background: radial-gradient(circle at 18% 14%, hsl(var(--primary) / .20), transparent 30%), radial-gradient(circle at 82% 28%, hsl(var(--secondary) / .12), transparent 26%), linear-gradient(135deg, #f7fbff 0%, #e4f2ff 52%, #d8ebfb 100%); } main { position: relative; }
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; z-index: 80; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--secondary))); box-shadow: 0 0 14px hsl(var(--primary)); transition: width 120ms linear; }
.nav-shell { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); width: min(1180px, calc(100% - 24px)); z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border: 1px solid hsl(var(--border) / .24); border-radius: 999px; background: hsl(var(--card) / .72); backdrop-filter: blur(18px); box-shadow: var(--shadow-sm); }
.brand { font-family: Orbitron, sans-serif; font-weight: 900; cursor: pointer; letter-spacing: .06em; color: hsl(var(--secondary)); text-shadow: 0 0 18px hsl(var(--secondary) / .55); } .brand span { color: hsl(var(--foreground)); margin-left: 4px; }
.nav-links { display: none; gap: 4px; align-items: center; } .nav-links.show { display: grid; position: absolute; top: 62px; left: 0; right: 0; padding: 16px; border-radius: var(--radius-md); background: hsl(var(--card) / .96); border: 1px solid hsl(var(--border) / .25); }
.nav-links button, .menu-btn, .present-toggle, .theme-toggle { color: hsl(var(--foreground)); background: transparent; border: 0; cursor: pointer; padding: 9px 10px; border-radius: 999px; font-size: 13px; transition: var(--transition-fast); } .nav-links button:hover, .nav-links button.active, .menu-btn:hover, .present-toggle:hover, .present-toggle.on, .theme-toggle:hover { background: hsl(var(--secondary) / .14); color: hsl(var(--secondary)); box-shadow: inset 0 0 0 1px hsl(var(--secondary) / .28); }
.section { min-height: 100vh; padding: 110px 18px 70px; width: min(1180px, 100%); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; scroll-margin-top: 0; } .hero { text-align: center; width: 100%; max-width: none; } .hero-content { max-width: 1180px; margin: auto; }
.presentation-mode { scroll-snap-type: y mandatory; } .presentation-mode .section { scroll-snap-align: start; min-height: 100vh; padding-top: 135px; padding-bottom: 105px; } .presentation-mode .section > .reveal { animation: slideFade .55s ease both; } .slide-no { display: none; font-family: Orbitron, sans-serif; color: hsl(var(--secondary) / .55); font-size: 28px; margin-bottom: 8px; } .presentation-mode .slide-no { display: block; }
.slide-controls { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid hsl(var(--border) / .35); background: hsl(var(--card) / .78); backdrop-filter: blur(16px); border-radius: 999px; box-shadow: var(--shadow-md); } .slide-controls button, .cta { cursor: pointer; border: 1px solid hsl(var(--secondary) / .5); color: white; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))); border-radius: 999px; padding: 11px 18px; font-weight: 900; box-shadow: 0 0 20px hsl(var(--secondary) / .25); } .slide-controls span { font-family: Orbitron, sans-serif; color: hsl(var(--secondary)); }
.presentation-status { position: fixed; right: 22px; top: 86px; z-index: 55; padding: 10px 14px; border-radius: 999px; border: 1px solid hsl(var(--border) / .32); background: hsl(var(--card) / .76); backdrop-filter: blur(14px); color: hsl(var(--foreground)); box-shadow: var(--shadow-sm); } .presentation-status b { color: hsl(var(--secondary)); margin-right: 10px; } .presentation-status span, .keyboard-hint { font-family: Orbitron, sans-serif; font-size: 12px; } .keyboard-hint { position: fixed; left: 22px; bottom: 34px; z-index: 55; color: hsl(var(--foreground) / .62); background: hsl(var(--card) / .62); border: 1px solid hsl(var(--border) / .18); border-radius: 999px; padding: 8px 12px; }
h1, h2, h3 { font-family: Orbitron, sans-serif; margin: 0; } h1 { font-size: clamp(44px, 10vw, 118px); line-height: .95; color: hsl(var(--foreground)); text-shadow: 0 0 18px hsl(var(--primary) / .75), 0 0 54px hsl(var(--secondary) / .38); animation: titleGlow 2.8s ease-in-out infinite alternate; } .hero-sub { font-size: clamp(18px, 3vw, 30px); max-width: 900px; margin: 28px auto; color: hsl(var(--foreground) / .88); } .arabic { color: hsl(var(--secondary)); margin-bottom: 16px; font-size: 20px; } .hero-cta { margin-bottom: 10px; }
.hero-cards, .stats-grid, .two-grid, .card-grid { display: grid; gap: 18px; } .hero-cards { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin: 34px auto 0; }
.glass-card { position: relative; overflow: hidden; border: 1px solid hsl(var(--border) / .22); background: linear-gradient(145deg, hsl(var(--card) / .78), hsl(var(--muted) / .34)); border-radius: var(--radius-md); padding: 24px; backdrop-filter: blur(14px); box-shadow: var(--shadow-sm); transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth); } .glass-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, hsl(var(--secondary) / .10), transparent); transform: translateX(-120%); transition: 700ms ease; } .glass-card:hover { transform: translateY(-8px) scale(1.015); border-color: hsl(var(--secondary) / .65); box-shadow: var(--shadow-lg); } .glass-card:hover::before { transform: translateX(120%); }
.mini strong, .stat strong { display: block; font-family: Orbitron, sans-serif; font-size: 34px; color: hsl(var(--secondary)); } .mini span, .stat span { color: hsl(var(--foreground) / .72); } .section-title { text-align: center; margin-bottom: 36px; } .section-title p { color: hsl(var(--secondary)); text-transform: uppercase; letter-spacing: .28em; font-size: 12px; font-weight: 800; } .section-title h2 { font-size: clamp(30px, 5vw, 58px); text-shadow: 0 0 24px hsl(var(--primary) / .28); } .section-title span { display: block; max-width: 760px; margin: 14px auto 0; color: hsl(var(--foreground) / .7); }
.stats-grid { grid-template-columns: repeat(2, 1fr); } .two-grid { grid-template-columns: 1fr; } .feature h3, .service h3, .engagement h3, .partner h3, .why h3, .value h3, .partner-category h3 { color: hsl(var(--secondary)); margin-bottom: 12px; } .feature p, .service p, .engagement p, .partner p, .why p { color: hsl(var(--foreground) / .72); line-height: 1.65; } .card-grid.three, .card-grid.four, .card-grid.five, .card-grid.six { grid-template-columns: 1fr; } .value b, .icon { color: hsl(var(--primary)); font-family: Orbitron, sans-serif; opacity: .9; }
.service-button { text-align: left; color: inherit; cursor: pointer; } .service-button span { color: hsl(var(--secondary)); font-weight: 800; font-size: 13px; }
.particles { position: fixed; inset: 0; pointer-events: none; z-index: -2; } .particles span { position: absolute; border-radius: 999px; background: hsl(var(--secondary)); box-shadow: 0 0 15px hsl(var(--secondary)); opacity: .62; animation: floatParticle linear infinite; } .grid-overlay { position: fixed; inset: -50% -20% auto; height: 120vh; pointer-events: none; z-index: -3; background-image: linear-gradient(hsl(var(--primary) / .10) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--primary) / .10) 1px, transparent 1px); background-size: 54px 54px; transform: perspective(600px) rotateX(62deg); transform-origin: top; animation: gridMove 12s linear infinite; opacity: .35; } .reveal { opacity: 0; transform: translateY(34px); transition: 850ms ease; } .reveal.visible { opacity: 1; transform: translateY(0); }
.performance-mode .grid-overlay { animation: none; opacity: .16; } .performance-mode .ring, .performance-mode .hub, .performance-mode h1 { animation: none; } .performance-mode .particles span:nth-child(n+17) { display: none; }
.orbit-map { position: relative; width: min(94vw, 860px); height: min(94vw, 860px); max-height: 860px; margin: 0 auto; } .ring { position: absolute; inset: 50%; border: 1.5px dashed hsl(var(--primary) / .48); border-radius: 50%; transform: translate(-50%, -50%); } .r1 { width: 30%; height: 30%; animation: rotate 16s linear infinite; } .r2 { width: 58%; height: 58%; animation: rotate 24s linear infinite reverse; } .r3 { width: 86%; height: 86%; border-color: hsl(var(--secondary) / .6); animation: rotate 34s linear infinite; } .hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; text-align: center; font-family: Orbitron, sans-serif; font-size: 14px; font-weight: 900; color: white; background: radial-gradient(circle, hsl(var(--primary)), hsl(var(--secondary))); box-shadow: 0 0 40px hsl(var(--primary)); animation: pulse 2s ease-in-out infinite; z-index: 3; }
.node { --radius: 210px; position: absolute; left: 50%; top: 50%; transform: rotate(var(--angle)) translateX(var(--radius)) rotate(calc(-1 * var(--angle))); z-index: 4; background: none; border: 0; padding: 0; cursor: pointer; } .node.inner { --radius: min(29vw, 255px); } .node.outer { --radius: min(43vw, 380px); } .node span { display: grid; place-items: center; width: 118px; min-height: 54px; padding: 8px; text-align: center; font-size: 12px; font-weight: 800; border-radius: 999px; color: hsl(var(--foreground)); background: hsl(var(--card) / .92); border: 1px solid hsl(var(--primary) / .55); box-shadow: 0 0 20px hsl(var(--primary) / .18); transition: var(--transition-smooth); } .node.outer span { border-color: hsl(var(--secondary) / .75); } .node:hover span, .node:focus-visible span, .node.selected span { transform: scale(1.12); color: hsl(var(--secondary)); box-shadow: 0 0 35px hsl(var(--secondary) / .58); }
.radial { --len: min(29vw, 255px); position: absolute; left: 50%; top: 50%; height: 1px; width: var(--len); background: linear-gradient(90deg, hsl(var(--primary) / .35), transparent); transform-origin: left center; transform: rotate(var(--angle)); } .radial.outer { --len: min(43vw, 380px); background: linear-gradient(90deg, hsl(var(--secondary) / .35), transparent); }
.node-info { position: absolute; right: 0; bottom: 2%; width: min(320px, 90vw); padding: 18px; border: 1px solid hsl(var(--border) / .3); border-radius: var(--radius-md); background: hsl(var(--card) / .78); backdrop-filter: blur(16px); box-shadow: var(--shadow-md); z-index: 8; } .node-info b { color: hsl(var(--secondary)); font-size: 12px; text-transform: uppercase; } .node-info h3 { margin: 8px 0; color: hsl(var(--foreground)); } .node-info h4 { margin: 12px 0 0; color: hsl(var(--foreground)); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; } .node-info p { color: hsl(var(--foreground) / .75); line-height: 1.5; } .node-info em { color: hsl(var(--secondary)); font-style: normal; }
.legend { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; color: hsl(var(--foreground) / .75); } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; } .cyan-dot { background: hsl(var(--primary)); box-shadow: 0 0 14px hsl(var(--primary)); } .blue-dot { background: hsl(var(--secondary)); box-shadow: 0 0 14px hsl(var(--secondary)); }
.operating-model { width: min(1040px, 100%); margin: 30px auto 0; text-align: center; }
.operating-model > p { margin: 0 0 16px; color: hsl(var(--secondary)); font-family: Orbitron, sans-serif; font-size: 13px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; }
.operating-model-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.operating-card { padding: 18px; text-align: left; }
.operating-card b { color: hsl(var(--primary)); font-family: Orbitron, sans-serif; font-size: 13px; }
.operating-card h3 { margin: 8px 0 10px; color: hsl(var(--secondary)); font-size: 18px; }
.operating-card span { color: hsl(var(--foreground) / .74); line-height: 1.55; }
.badge { display: inline-block; padding: 7px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; margin-bottom: 14px; } .poc-in-progress { color: hsl(var(--orange)); background: hsl(var(--orange) / .12); } .tender-stage { color: hsl(var(--primary)); background: hsl(var(--primary) / .12); } .active-service, .health-check { color: hsl(var(--success)); background: hsl(var(--success) / .12); } .renewal { color: hsl(var(--warning)); background: hsl(var(--warning) / .12); } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .tags em { font-style: normal; font-size: 12px; padding: 6px 9px; color: hsl(var(--secondary)); background: hsl(var(--secondary) / .10); border-radius: 999px; } .partner div { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: hsl(var(--primary) / .16); color: hsl(var(--secondary)); font-family: Orbitron, sans-serif; font-weight: 900; margin-bottom: 15px; }
.partners-marquee { display: none; }
.partner-categories { display: grid; grid-template-columns: 1fr; gap: 18px; }
.partner-category { padding: 22px; }
.partner-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.partner-pill { border: 1px solid hsl(var(--border) / .18); border-radius: 14px; padding: 12px; background: hsl(var(--muted) / .20); }
.partner-pill b { display: block; color: hsl(var(--foreground)); font-family: Orbitron, sans-serif; font-size: 13px; margin-bottom: 5px; }
.partner-pill span { color: hsl(var(--foreground) / .72); font-size: 13px; line-height: 1.35; }
.footer { text-align: center; min-height: 100vh; width: 100%; max-width: none; padding-left: 18px; padding-right: 18px; } .footer h2 { font-size: clamp(48px, 12vw, 128px); color: hsl(var(--foreground)); text-shadow: 0 0 48px hsl(var(--primary) / .58); } .footer p { font-size: 20px; color: hsl(var(--foreground) / .78); } .contact { margin: 24px auto; padding: 16px; border: 1px solid hsl(var(--border) / .25); border-radius: 999px; display: inline-block; color: hsl(var(--secondary)); }
.closing-panel { position: relative; overflow: hidden; width: min(1120px, 100%); margin: 0 auto; padding: clamp(28px, 6vw, 64px); border: 1px solid hsl(var(--border) / .28); border-radius: var(--radius-lg); background: linear-gradient(145deg, hsl(var(--card) / .78), hsl(var(--muted) / .28)); box-shadow: var(--shadow-lg); backdrop-filter: blur(16px); }
.closing-panel::before { content: ''; position: absolute; inset: -40% 18% auto; height: 260px; background: radial-gradient(circle, hsl(var(--primary) / .34), transparent 62%); filter: blur(10px); pointer-events: none; }
.closing-kicker { position: relative; margin: 0 0 10px; color: hsl(var(--secondary)) !important; font-family: Orbitron, sans-serif; font-size: 13px !important; font-weight: 900; letter-spacing: .24em; text-transform: uppercase; }
.closing-lead { position: relative; max-width: 820px; margin: 18px auto 0; line-height: 1.7; }
.closing-actions { position: relative; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 28px 0; }
.secondary-cta { text-decoration: none; color: hsl(var(--secondary)); background: hsl(var(--card) / .52); }
.contact-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 26px; text-align: left; }
.contact-card { display: block; min-height: 104px; padding: 18px; border: 1px solid hsl(var(--border) / .24); border-radius: var(--radius-md); background: hsl(var(--card) / .56); color: hsl(var(--foreground)); text-decoration: none; transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth); }
.contact-card:hover, .contact-card:focus-visible { transform: translateY(-5px); border-color: hsl(var(--secondary) / .7); box-shadow: var(--shadow-md); outline: none; }
.contact-card span { display: block; margin-bottom: 9px; color: hsl(var(--secondary)); font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.contact-card b { display: block; overflow-wrap: anywhere; font-size: clamp(16px, 2vw, 22px); line-height: 1.35; }
.contact-card.address { grid-column: 1 / -1; }
.closing-bottom { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; padding-top: 22px; border-top: 1px solid hsl(var(--border) / .18); text-align: left; }
.closing-bottom strong { display: block; color: hsl(var(--secondary)); font-family: Orbitron, sans-serif; letter-spacing: .08em; }
.closing-bottom span { display: block; margin-top: 5px; color: hsl(var(--foreground) / .7); }
.closing-bottom .arabic { margin: 0; text-align: right; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.68); backdrop-filter: blur(8px); } .profile-modal { width: min(900px, 100%); max-height: 88vh; overflow: auto; border: 1px solid hsl(var(--border) / .35); border-radius: var(--radius-lg); background: linear-gradient(145deg, hsl(var(--card) / .96), #0b2340); padding: 28px; box-shadow: var(--shadow-lg); position: relative; } body.light-theme .profile-modal { background: linear-gradient(145deg, hsl(var(--card) / .98), #dbeeff); } .close { position: absolute; right: 18px; top: 14px; border: 0; background: hsl(var(--secondary) / .12); color: hsl(var(--secondary)); width: 34px; height: 34px; border-radius: 50%; font-size: 24px; cursor: pointer; } .print-profile h2, .service-modal h2 { color: hsl(var(--secondary)); } .print-tag, .service-overview { color: hsl(var(--foreground) / .75); } .print-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0; } .print-grid div { padding: 14px; border: 1px solid hsl(var(--border) / .22); border-radius: 14px; } .print-grid strong { display: block; color: hsl(var(--primary)); font-family: Orbitron, sans-serif; font-size: 26px; } .modal-actions { margin-top: 20px; }
.modal-kicker { color: hsl(var(--secondary)); text-transform: uppercase; letter-spacing: .22em; font-size: 12px; font-weight: 900; } .detail-grid { display: grid; gap: 18px; margin: 22px 0; } .detail-grid section, .next-step { border: 1px solid hsl(var(--border) / .22); border-radius: var(--radius-md); padding: 18px; background: hsl(var(--muted) / .22); } .detail-grid h3, .service-modal h3 { color: hsl(var(--secondary)); margin-bottom: 10px; } .detail-grid ul { margin: 0; padding-left: 20px; color: hsl(var(--foreground) / .78); line-height: 1.7; } .detail-tags { margin-bottom: 20px; } .next-step b { color: hsl(var(--secondary)); } .next-step p { margin-bottom: 0; color: hsl(var(--foreground) / .78); }
@keyframes titleGlow { from { filter: brightness(1); } to { filter: brightness(1.25); } } @keyframes floatParticle { 0% { transform: translate3d(0,0,0); opacity: .2; } 50% { opacity: .9; } 100% { transform: translate3d(50px,-90px,0); opacity: .15; } } @keyframes gridMove { from { background-position: 0 0; } to { background-position: 0 108px; } } @keyframes rotate { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes pulse { 0%,100% { box-shadow: 0 0 28px hsl(var(--primary)); } 50% { box-shadow: 0 0 70px hsl(var(--secondary)); transform: translate(-50%, -50%) scale(1.04); } } @keyframes successPop { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes slideFade { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (min-width: 720px) { .menu-btn { display: none; } .nav-links { display: flex; } .hero-cards { grid-template-columns: repeat(4, 1fr); } .stats-grid { grid-template-columns: repeat(4, 1fr); } .two-grid { grid-template-columns: repeat(2, 1fr); } .card-grid.three { grid-template-columns: repeat(3, 1fr); } .card-grid.four { grid-template-columns: repeat(4, 1fr); } .card-grid.five { grid-template-columns: repeat(5, 1fr); } .card-grid.six { grid-template-columns: repeat(3, 1fr); } .print-grid { grid-template-columns: repeat(4, 1fr); } .detail-grid { grid-template-columns: repeat(2, 1fr); } .partner-categories { grid-template-columns: repeat(2, 1fr); } .contact-grid { grid-template-columns: repeat(3, 1fr); } .operating-model-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1020px) { .partner-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) { .nav-shell { border-radius: var(--radius-md); } .nav-links button { font-size: 12px; padding: 8px 7px; } .present-toggle { order: 3; } .theme-toggle { order: 2; } }
@media (max-width: 620px) { .section { padding-left: 14px; padding-right: 14px; } .brand { font-size: 13px; } .orbit-map { height: 720px; margin-top: 20px; } .hub { width: 112px; height: 112px; font-size: 11px; } .node span { width: 86px; min-height: 44px; font-size: 9px; } .node.inner { --radius: 148px; } .node.outer { --radius: 240px; } .radial { --len: 148px; } .radial.outer { --len: 240px; } .node-info { left: 50%; right: auto; bottom: -8px; transform: translateX(-50%); width: calc(100vw - 34px); } .contact { border-radius: var(--radius-md); line-height: 1.8; } .slide-controls { width: calc(100% - 24px); justify-content: space-between; gap: 6px; } .slide-controls button { padding: 9px 10px; font-size: 12px; } .slide-controls span { display: none; } .present-toggle, .theme-toggle { font-size: 11px; padding: 8px; } .keyboard-hint { display: none; } .presentation-status { left: 14px; right: 14px; top: 76px; text-align: center; } .closing-panel { padding: 28px 16px; } .closing-actions { flex-direction: column; } .closing-actions .cta { width: 100%; } .closing-bottom { display: block; text-align: center; } .closing-bottom .arabic { margin-top: 16px; text-align: center; font-size: 16px; } }
@media print { body { background: white !important; color: #172033 !important; } body::before, .particles, .grid-overlay, .nav-shell, .scroll-progress, .slide-controls, .presentation-status, .keyboard-hint, main > .section, .modal-actions, .close { display: none !important; } .modal-backdrop { position: static; display: block; background: white; padding: 0; } .profile-modal { display: block !important; width: 100%; max-height: none; overflow: visible; border: 0; box-shadow: none; background: white; color: #172033; } .print-profile h2, .print-profile h3, .print-grid strong { color: #0f6cb6 !important; } .print-tag { color: #334155; } .print-grid div { border: 1px solid #d6dee8; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }