:root {
color-scheme: light;
--page: #f5f7fa;
--surface: #fff;
--panel: #fff;
--line: #7c8796;
--soft-line: rgb(26 35 50 / 10%);
--text: #1a2332;
--muted: #3d4a5c;
--blue: #005e87;
--accent: #005e87;
--project-accent: #005e87;
--link-aaa: #004b6e;
--focus: #0073b7;
--text-secondary: #2c3a4a;
--hero-title: #1a2332;
--hero-subtitle: #005e87;
--hero-role-color: #005e87;
--hero-bio-color: #3d4a5c;
--hero-surface: #f8fafc;
--hero-border: rgb(203 213 225 / 70%);
--hero-shadow: 0 10px 30px rgb(26 35 50 / 5%);
--hero-contact-card-bg: rgb(255 255 255 / 90%);
--hero-contact-card-border: rgb(203 213 225 / 60%);
--hero-contact-card-shadow: 0 6px 20px rgb(26 35 50 / 4%);
--hero-contact-item-hover: rgb(0 94 135 / 4%);
--hero-tag-bg: #fff;
--hero-tag-border: rgb(26 35 50 / 12%);
--hero-tag-text: #1a2332;
--hero-btn-primary-bg: #005e87;
--hero-btn-primary-text: #fff;
--hero-btn-ghost-text: #005e87;
--hero-rail-bg: #fff;
--hero-rail-border: rgb(26 35 50 / 12%);
--hero-rail-color: #3d4a5c;
--hero-action-btn-bg: #f8fafc;
--hero-action-btn-border: rgb(26 35 50 / 12%);
--hero-avatar-glow: 0 0 0 3px #005e87, 0 0 24px rgb(0 94 135 / 25%);
--page-background:
radial-gradient(circle at 12% 0%, rgb(0 94 135 / 7%), transparent 34rem),
var(--page);
--hero-gradient: linear-gradient(90deg, #005f88 0%, #0076a8 50%, #005f88 100%);
--contact-bg: rgb(255 255 255 / 10%);
--tag-bg: rgb(255 255 255 / 20%);
--project-bg: #fff;
--panel-primary-bg:
linear-gradient(135deg, rgb(0 118 168 / 6%), rgb(250 249 247 / 88%) 50%, rgb(250 249 247 / 96%) 100%),
var(--panel);
--panel-secondary-bg:
linear-gradient(135deg, rgb(0 118 168 / 4%), rgb(250 249 247 / 88%) 50%, rgb(250 249 247 / 96%) 100%),
var(--panel);
--employment-card-bg: transparent;
--inner-card: rgb(255 255 255 / 55%);
--translucent-card: rgb(255 255 255 / 58%);
--cert-card: rgb(219 234 254 / 55%);
--pill-bg: #e8f0fe;
--date-bg: rgb(255 255 255 / 72%);
--date-text: #3d4a5c;
--copy-bg: rgb(255 255 255 / 24%);
--shadow: 0 25px 50px rgb(26 35 50 / 18%);
--logo-bg: #fff;
--button-bg: #005e87;
--button-text: #fff;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-section: clamp(2rem, 4vw, 4.5rem);
--content-measure: 68ch;
--layout-wide: 90rem;
--text-xs: 0.8125rem;
--text-sm: 0.875rem;
--text-body: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.5rem;
--text-display: clamp(2rem, 4vw, 3rem);
--radius-sm: 0.5rem;
--radius-md: 0.75rem;
--radius-lg: 1rem;
--radius-pill: 999px;
--shadow-1: 0 4px 8px rgb(0 0 0 / 13%);
--shadow-2: 0 16px 40px rgb(0 0 0 / 25%);
--motion-fast: 90ms;
--motion-normal: 180ms;
--motion-slow: 260ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
--z-navigation: 10;
--z-popover: 20;
--z-dialog: 1000;
--z-toast: 1100;
--color-text-primary: var(--text);
--color-text-secondary: var(--muted);
--color-surface: var(--surface);
--color-action: var(--blue);
--color-focus: var(--focus);
--color-success: #16794a;
--color-warning: #9a6700;
--color-danger: #b42318;
--tooltip-bg: #0f172a;
--tooltip-text: #f8fafc;
--tooltip-border: 1px solid rgb(15 23 42 / 10%);
--tooltip-shadow: 0 4px 14px rgb(15 23 42 / 24%), 0 1px 3px rgb(15 23 42 / 12%);
}
[data-theme="dark"]:not([data-contrast="high"]) {
color-scheme: dark;
--page: #0d1117;
--surface: #161b22;
--panel: #161b22;
--logo-bg: #fff;
--line: #6e7681;
--soft-line: #21262d;
--text: #f0f6fc;
--muted: #cbd5e1;
--blue: #79c0ff;
--accent: #79c0ff;
--project-accent: #79c0ff;
--link-aaa: #79c0ff;
--focus: #388bfd;
--text-secondary: #e2e8f0;
--hero-title: #f0f6fc;
--hero-subtitle: #79c0ff;
--hero-role-color: #79c0ff;
--hero-bio-color: #cbd5e1;
--hero-surface: #0a1120;
--hero-border: rgb(255 255 255 / 8%);
--hero-shadow: 0 15px 35px rgb(0 0 0 / 40%);
--hero-contact-card-bg: #0d172e;
--hero-contact-card-border: rgb(255 255 255 / 8%);
--hero-contact-card-shadow: 0 8px 25px rgb(0 0 0 / 35%);
--hero-contact-item-hover: rgb(255 255 255 / 4%);
--hero-tag-bg: rgb(255 255 255 / 4%);
--hero-tag-border: rgb(255 255 255 / 12%);
--hero-tag-text: #cbd5e1;
--hero-btn-primary-bg: #164fae;
--hero-btn-primary-text: #fff;
--hero-btn-ghost-text: #79c0ff;
--hero-rail-bg: rgb(255 255 255 / 4%);
--hero-rail-border: rgb(255 255 255 / 8%);
--hero-rail-color: #cbd5e1;
--hero-action-btn-bg: rgb(255 255 255 / 5%);
--hero-action-btn-border: rgb(255 255 255 / 8%);
--hero-avatar-glow: 0 0 0 3px #3b82f6, 0 0 30px rgb(59 130 246 / 50%);
--page-background:
radial-gradient(circle at 12% 0%, rgb(121 192 255 / 8%), transparent 36rem),
var(--page);
--hero-gradient: linear-gradient(90deg, #1f242c 0%, #161b22 50%, #1f242c 100%);
--contact-bg: rgb(48 54 61 / 40%);
--tag-bg: rgb(48 54 61 / 60%);
--project-bg: #161b22;
--panel-primary-bg:
linear-gradient(135deg, rgb(56 139 253 / 6%), #161b22 100%),
var(--panel);
--panel-secondary-bg:
linear-gradient(135deg, rgb(48 54 61 / 6%), #161b22 100%),
var(--panel);
--employment-card-bg: transparent;
--inner-card: #0d1117;
--translucent-card: rgb(22 27 34 / 85%);
--cert-card: rgb(56 139 253 / 5%);
--pill-bg: rgb(56 139 253 / 15%);
--date-bg: rgb(48 54 61 / 30%);
--date-text: #cbd5e1;
--copy-bg: rgb(240 246 252 / 10%);
--shadow: 0 25px 50px rgb(0 0 0 / 55%);
--button-bg: #164fae;
--button-text: #fff;
--tooltip-bg: #1e293b;
--tooltip-text: #fff;
--tooltip-border: 1px solid rgb(255 255 255 / 16%);
--tooltip-shadow: 0 6px 18px rgb(0 0 0 / 45%), 0 1px 4px rgb(0 0 0 / 25%);
}
* {
box-sizing: border-box;
}
img,
video,
svg {
max-inline-size: 100%;
block-size: auto;
}
p,
li,
dd {
overflow-wrap: anywhere;
}
html {
overflow-x: clip;
scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
body {
transition:
background-color var(--motion-fast) var(--ease-standard),
color var(--motion-fast) var(--ease-standard);
}
body {
position: relative;
margin: 0;
overflow-x: clip;
background: var(--page-background);
color: var(--text);
font-family: var(--font-ui);
line-height: 1.6;
}
.case-study-section p,
.case-study-hero p,
.panel p {
max-inline-size: 68ch;
}
:where(
.hero-cta,
.copy-button
) {
transition-property: background-color, border-color, color, opacity;
transition-duration: var(--motion-fast);
transition-timing-function: var(--ease-standard);
}
body::selection {
color: #fff;
background: var(--blue);
}
.ambient-particles {
display: none;
}
.icon-sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
a {
color: inherit;
cursor: pointer;
text-decoration: none;
transition: color 150ms ease;
}
a:hover {
text-decoration: underline;
text-underline-offset: 0.22em;
}
.external-icon {
display: inline-block;
width: 0.86em;
height: 0.86em;
margin-inline-start: 0.32em;
fill: none;
stroke: currentcolor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.3;
transform: translateY(0.08em);
opacity: 0.58;
pointer-events: none;
transition: opacity 150ms ease, transform 150ms ease;
}
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 4px;
box-shadow: 0 0 0 5px rgb(0 0 0 / 12%);
}
.resume-shell {
position: relative;
width: auto;
max-width: 1180px;
margin: 0 auto;
padding: clamp(14px, 3vw, 40px);
}
.resume-card {
position: relative;
min-height: calc(100vh - clamp(28px, 6vw, 80px));
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
transition:
background-color 420ms ease,
border-color 420ms ease,
box-shadow 420ms ease;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap !important;
border: 0;
}
:root {
--font-ui: "Inter Variable", system-ui, sans-serif;
}
html[lang="ar"] {
--font-ui: "Noto Sans Arabic Variable", system-ui, sans-serif;
}
button,
input,
select,
textarea {
font: inherit;
}
:where(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-ui);
}
html[lang="ar"] :where(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-ui);
letter-spacing: normal;
}
html[lang="ar"] body,
html[lang="ar"] body * {
font-family: var(--font-ui);
letter-spacing: normal;
}
@keyframes project-fade-in {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes targetPanel {
from {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 35%, transparent);
}
}
@keyframes audioArtworkPulse {
50% {
box-shadow: 0 8px 24px color-mix(in srgb, var(--blue) 48%, transparent);
transform: scale(1.025);
}
}
@keyframes dropdown-reveal {
from {
opacity: 0;
transform: scale(0.985);
}
to {
opacity: 1;
transform: scale(1);
}
}
.embed-help,
.image-fallback {
display: block;
margin: 0;
padding: 12px 16px;
color: var(--text);
background: var(--surface);
font-size: 0.875rem;
line-height: 1.6;
}
.image-unavailable {
display: none;
}
.enhanced-select-native {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
border: 0 !important;
white-space: nowrap !important;
}
.select-menu {
position: relative;
display: inline-block;
min-width: 0;
color: var(--text);
}
.select-menu-trigger {
display: flex;
width: 100%;
min-height: 48px;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 8px 16px;
border: 1px solid color-mix(in srgb, var(--line) 78%, var(--blue));
border-radius: 12px;
background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, var(--blue)), var(--surface));
box-shadow: 0 4px 14px rgb(0 0 0 / 8%);
color: var(--text);
font: inherit;
font-weight: 700;
line-height: 1.35;
text-align: start;
cursor: pointer;
transition: border-color var(--motion-normal) var(--ease-standard), box-shadow var(--motion-normal) var(--ease-standard);
}
.select-menu-trigger:hover,
.select-menu-trigger:focus-visible,
.select-menu.is-open .select-menu-trigger {
border-color: var(--blue);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 24%, transparent), 0 8px 22px rgb(0 0 0 / 12%);
}
.select-menu-chevron {
flex: 0 0 9px;
width: 9px;
height: 9px;
margin-inline-end: 2px;
border-inline-end: 2px solid currentcolor;
border-bottom: 2px solid currentcolor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--motion-normal) var(--ease-standard);
}
.select-menu.is-open .select-menu-chevron {
transform: translateY(2px) rotate(225deg);
}
.select-menu-list {
position: absolute;
z-index: var(--z-popover);
inset-block-start: calc(100% + 8px);
inset-inline: 0;
display: grid;
gap: 4px;
min-width: max(100%, 15rem);
max-width: min(28rem, calc(100vw - 32px));
max-height: min(22rem, 55vh);
padding: 6px;
overflow: auto;
overscroll-behavior: contain;
border: 1px solid color-mix(in srgb, var(--line) 75%, var(--blue));
border-radius: 14px;
background: color-mix(in srgb, var(--surface) 96%, var(--page));
box-shadow: var(--shadow-2);
scrollbar-width: thin;
scrollbar-color: var(--line) transparent;
transform-origin: top center;
animation: dropdown-reveal var(--motion-normal) var(--ease-emphasized);
}
.select-menu-list[hidden] { display: none; }
.select-menu-option {
position: relative;
display: flex;
width: 100%;
min-height: 44px;
align-items: center;
padding: 9px 40px 9px 12px;
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
color: var(--text);
font: inherit;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.4;
text-align: start;
cursor: pointer;
}
[dir="rtl"] .select-menu-option { padding: 9px 12px 9px 40px; }
.select-menu-option:hover,
.select-menu-option:focus-visible {
border-color: color-mix(in srgb, var(--blue) 42%, transparent);
background: var(--pill-bg);
color: var(--link-aaa);
outline: none;
}
.select-menu-option[aria-selected="true"] {
background: color-mix(in srgb, var(--blue) 15%, var(--surface));
color: var(--link-aaa);
font-weight: 750;
}
.select-menu-option[aria-selected="true"]::after {
position: absolute;
inset-inline-end: 14px;
content: "✓";
color: var(--blue);
font-weight: 800;
}
.audio-select-shell .select-menu { min-width: 76px; }
.audio-select-shell .select-menu-trigger {
min-height: 44px;
padding: 6px 10px;
border-radius: 10px;
font-size: 0.82rem;
}
.audio-select-shell .select-menu-list {
inset-block: auto calc(100% + 8px);
inset-inline: auto 0;
min-width: 8rem;
transform-origin: bottom center;
}
.theme-toggle,
.lang-toggle,
.print-button,
.contrast-toggle {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
border-radius: 50%;
background: var(--hero-rail-bg);
border: 1px solid var(--hero-rail-border);
color: var(--hero-rail-color);
box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
cursor: pointer;
transition:
background-color var(--motion-fast) var(--ease-standard),
border-color var(--motion-fast) var(--ease-standard),
color var(--motion-fast) var(--ease-standard);
}
.theme-toggle:hover,
.lang-toggle:hover,
.print-button:hover,
.contrast-toggle:hover,
.theme-toggle:focus-visible,
.lang-toggle:focus-visible,
.print-button:focus-visible,
.contrast-toggle:focus-visible {
transform: none;
background: var(--pill-bg);
border-color: var(--blue);
color: var(--blue);
box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
}
.theme-toggle svg,
.lang-toggle svg,
.print-button svg,
.contrast-toggle svg {
display: block;
flex: 0 0 auto;
width: 18px;
height: 18px;
fill: none;
stroke: currentcolor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.copy-button {
--copy-visual-size: 26px;
position: absolute !important;
inset-inline-end: 8px;
top: 50%;
transform: translateY(-50%);
display: inline-grid;
place-items: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
padding: 0;
color: var(--text);
background: transparent;
border: 0;
border-radius: 7px;
cursor: pointer;
opacity: 1;
transition:
opacity 150ms ease,
transform 150ms ease,
background-color 150ms ease,
border-color 150ms ease,
color 150ms ease;
}
.compact-list .copy-button,
.featured .copy-button {
color: var(--text);
background: transparent;
border-color: transparent;
}
.compact-list .copy-button span,
.compact-list .copy-button > span:first-child,
.featured .copy-button > span:first-child {
background: color-mix(in srgb, var(--surface) 70%, transparent);
border-color: var(--line);
}
.copy-button > span:first-child {
display: inline-grid;
place-items: center;
width: var(--copy-visual-size);
height: var(--copy-visual-size);
background: var(--copy-bg);
border: 1px solid rgb(255 255 255 / 18%);
border-radius: 7px;
transition:
background-color 150ms ease,
border-color 150ms ease;
}
.copy-button svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentcolor;
stroke-width: 2;
transition:
transform 150ms ease,
color 150ms ease;
}
.copy-button:active svg {
transform: scale(0.85);
}
.copy-button.copied {
color: var(--blue) !important;
border-color: var(--blue) !important;
}
.copy-button:hover,
.copy-button:focus-visible,
.compact-list li:hover .copy-button,
.compact-list li:focus-within .copy-button,
.featured article:hover .copy-button,
.featured article:focus-within .copy-button {
opacity: 1;
}
.copy-button:hover,
.copy-button:focus-visible {
transform: translateY(-50%) scale(1.12);
}
.copy-button:hover span,
.copy-button:focus-visible span {
background: rgb(255 255 255 / 35%);
border-color: rgb(255 255 255 / 50%);
}
.compact-list .copy-button:hover span,
.featured .copy-button:hover span,
.compact-list .copy-button:focus-visible span,
.featured .copy-button:focus-visible span {
background: color-mix(in srgb, var(--surface) 90%, transparent);
border-color: var(--blue);
}
.panel {
scroll-margin-top: 76px;
padding: clamp(20px, 3vw, 32px);
background: var(--panel);
border: 1px solid var(--soft-line);
border-radius: 20px;
box-shadow: 0 10px 32px rgb(26 35 50 / 5%);
transition:
background-color 420ms ease,
border-color 420ms ease,
box-shadow 420ms ease;
}
.panel:target {
animation: targetPanel 700ms ease-out;
}
.panel h2 {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
}
.panel h2 svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentcolor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.panel p,
.panel li {
color: var(--muted);
font-size: 1rem;
}
.panel p {
max-width: 65ch;
}
.panel p + p,
.timeline-card ul {
margin-top: 1.2em;
}
html[lang="ar"] .panel h2,
html[lang="ar"] .project-header h4,
html[lang="ar"] .credential-meta {
letter-spacing: 0;
}
.pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pills > span {
padding: 5px 10px;
background: var(--pill-bg);
border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
border-radius: 8px;
color: var(--link-aaa);
font-size: 0.9rem;
font-weight: 500;
transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.skill-item-icon {
display: block;
flex: 0 0 auto;
width: 16px;
height: 16px;
fill: none;
stroke: currentcolor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.82;
}
.contact-list li:hover .external-icon,
.contact-list li:focus-within .external-icon,
.compact-list li:hover .external-icon,
.compact-list li:focus-within .external-icon,
.li-entity-link:hover .external-icon,
.li-entity-link:focus-visible .external-icon {
opacity: 1;
transform: translate(1px, -1px);
}
.copy-toast {
max-width: calc(100vw - 40px);
overflow-wrap: anywhere;
position: fixed;
inset-inline-end: 20px;
inset-block-end: 20px;
z-index: var(--z-toast);
padding: 10px 14px;
color: var(--text);
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: var(--shadow);
opacity: 0;
transform: translateY(8px);
transition:
opacity 180ms ease,
transform 180ms ease;
}
.copy-toast.is-visible {
opacity: 1;
transform: translateY(0);
}
.app-update {
position: fixed;
z-index: var(--z-toast);
inset-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
inset-block-end: max(1rem, env(safe-area-inset-bottom));
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: min(34rem, calc(100% - 2rem));
margin-inline: auto;
padding: 0.75rem 0.8rem 0.75rem 1rem;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow-2);
}
.app-update[hidden] {
display: none;
}
.app-update button {
min-height: 44px;
padding-inline: 1rem;
border: 0;
border-radius: var(--radius-sm);
background: var(--button-bg);
color: var(--button-text);
font: inherit;
font-weight: 750;
cursor: pointer;
}
[data-tooltip] {
position: relative;
}
[data-tooltip]::before,
[data-tooltip]::after {
display: none;
}
[data-tooltip]::before {
content: attr(data-tooltip);
position: absolute;
inset: calc(100% + 8px) auto auto 50%;
transform: translateX(-50%) translateY(-4px);
padding: 6px 10px;
background: var(--tooltip-bg, #0f172a);
color: var(--tooltip-text, #f8fafc);
border: var(--tooltip-border, 1px solid rgb(15 23 42 / 10%));
box-shadow: var(--tooltip-shadow, 0 4px 14px rgb(15 23 42 / 24%), 0 1px 3px rgb(15 23 42 / 12%));
font-size: 0.75rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.01em;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 9999;
transition:
opacity 150ms cubic-bezier(0.16, 1, 0.3, 1),
transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
visibility 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-tooltip]::after {
content: "";
position: absolute;
inset: calc(100% + 2px) auto auto 50%;
transform: translateX(-50%) translateY(-4px);
border-width: 0 5px 6px;
border-style: solid;
border-color: transparent transparent var(--tooltip-bg, #0f172a) transparent;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 9999;
transition:
opacity 150ms cubic-bezier(0.16, 1, 0.3, 1),
transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
visibility 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::before,
[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::after {
display: block;
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
[data-tooltip]:hover::before,
[data-tooltip]:is(:focus, :focus-visible)::before {
pointer-events: auto;
}
.skip-link {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
background: var(--blue);
color: var(--page);
padding: 10px 20px;
border-radius: 0 0 8px 8px;
z-index: 9999;
font-weight: 600;
transition: transform 200ms ease;
}
.skip-link:focus-visible {
transform: translate(-50%, 0);
outline: none;
box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
}
[dir="rtl"] .external-icon {
transform: translateY(0.08em) scaleX(-1);
}
.case-study-controls .theme-toggle,
.case-study-controls .contrast-toggle,
.case-study-controls .lang-toggle {
width: auto;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 0 10px;
gap: 6px;
background: color-mix(in srgb, var(--panel) 80%, transparent);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-sizing: border-box;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 600;
white-space: nowrap;
transition:
background-color 180ms ease,
border-color 180ms ease,
color 180ms ease,
box-shadow 180ms ease;
}
.case-study-controls .theme-toggle:hover,
.case-study-controls .contrast-toggle:hover,
.case-study-controls .lang-toggle:hover,
.case-study-controls .theme-toggle:focus-visible,
.case-study-controls .contrast-toggle:focus-visible,
.case-study-controls .lang-toggle:focus-visible {
background: color-mix(in srgb, var(--blue) 15%, transparent);
border-color: var(--blue);
color: var(--blue);
box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
}
.case-study-controls .theme-toggle > span:first-child,
.case-study-controls .contrast-toggle > span:first-child,
.case-study-controls .lang-toggle > span:first-child {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.audio-play-btn {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 0 10px;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: var(--muted);
font-family: inherit;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
box-sizing: border-box;
transition:
background-color var(--motion-normal) var(--ease-standard),
border-color var(--motion-normal) var(--ease-standard),
color var(--motion-normal) var(--ease-standard),
transform var(--motion-normal) var(--ease-standard);
}
.audio-play-btn:hover,
.audio-play-btn:focus-visible {
background: color-mix(in srgb, var(--blue) 10%, transparent);
border-color: color-mix(in srgb, var(--blue) 30%, transparent);
color: var(--link-aaa);
}
.audio-play-btn.is-playing {
background: #047857;
color: #fff;
border-color: #047857;
}
.audio-icon {
display: block;
flex: 0 0 auto;
width: 15px;
height: 15px;
stroke: currentcolor;
stroke-width: 2;
fill: none;
}
.global-audio-player {
position: fixed;
z-index: var(--z-popover);
inset: auto auto max(16px, env(safe-area-inset-bottom)) 50%;
display: grid;
width: min(680px, calc(100% - 32px));
padding: 16px;
gap: 10px;
overflow: visible;
border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
border-radius: 20px;
background:
radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 34%),
color-mix(in srgb, var(--panel) 94%, transparent);
color: var(--text);
box-shadow: 0 24px 70px rgb(8 18 35 / 24%), 0 2px 12px rgb(8 18 35 / 10%);
backdrop-filter: blur(18px) saturate(140%);
transform: translateX(-50%);
animation: audioPlayerEnter 220ms var(--ease-standard) both;
}
@keyframes audioPlayerEnter {
from { opacity: 0; transform: translate(-50%, 12px) scale(0.985); }
to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes audioArtworkPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.04);
}
}
@keyframes waveformBounce {
0%, 100% {
transform: scaleY(0.25);
}
50% {
transform: scaleY(1);
}
}
.global-audio-player[hidden] {
display: none;
}
.audio-player-track[hidden],
.audio-player-settings[hidden],
.audio-expand-toggle[hidden],
.audio-retry[hidden] {
display: none;
}
.audio-live-status {
inset: 0 auto auto 0;
margin: 0;
}
.audio-player-controls,
.audio-player-settings,
.audio-player-speed {
display: flex;
align-items: center;
}
.audio-player-summary {
display: flex;
align-items: center;
gap: 12px;
}
.audio-player-artwork {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 15px;
color: #fff;
background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 76%, #6ca9ff), var(--blue));
box-shadow: 0 8px 20px color-mix(in srgb, var(--blue) 28%, transparent);
}
.global-audio-player[data-state="loading"] .audio-player-artwork {
opacity: 0.72;
}
@media (prefers-reduced-motion: no-preference) {
.global-audio-player[data-state="playing"] .audio-player-artwork {
animation: audioArtworkPulse 1.8s ease-in-out infinite;
}
}
.audio-waveform-bars {
display: none;
align-items: flex-end;
justify-content: space-between;
width: 18px;
height: 18px;
gap: 2px;
}
.audio-waveform-bars .bar {
display: block;
flex: 1 1 0;
width: 3px;
border-radius: 2px;
background: currentcolor;
transform-origin: bottom;
will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
.audio-waveform-bars .bar:nth-child(1) {
height: 45%;
animation: waveformBounce 0.8s ease-in-out infinite;
}
.audio-waveform-bars .bar:nth-child(2) {
height: 95%;
animation: waveformBounce 1.1s ease-in-out infinite 0.2s;
}
.audio-waveform-bars .bar:nth-child(3) {
height: 65%;
animation: waveformBounce 0.95s ease-in-out infinite 0.1s;
}
.audio-waveform-bars .bar:nth-child(4) {
height: 85%;
animation: waveformBounce 1.25s ease-in-out infinite 0.35s;
}
}
@media (prefers-reduced-motion: reduce) {
.audio-waveform-bars .bar:nth-child(1) { height: 45%; }
.audio-waveform-bars .bar:nth-child(2) { height: 95%; }
.audio-waveform-bars .bar:nth-child(3) { height: 65%; }
.audio-waveform-bars .bar:nth-child(4) { height: 85%; }
}
.global-audio-player[data-state="playing"] .audio-player-artwork svg {
display: none;
}
.global-audio-player[data-state="playing"] .audio-player-artwork .audio-waveform-bars {
display: flex;
}
.audio-player-artwork svg,
.audio-player-summary .audio-control svg,
.audio-player-controls svg {
display: block;
width: 19px;
height: 19px;
fill: none;
stroke: currentcolor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.audio-player-copy {
display: flex;
flex: 1 1 auto;
min-width: 0;
flex-direction: column;
justify-content: center;
}
.audio-player-copy strong {
overflow: hidden;
color: var(--text);
font-size: 0.95rem;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.audio-player-eyebrow {
display: flex;
flex-wrap: wrap;
gap: 0.35em;
color: var(--link-aaa);
font-size: 0.68rem;
font-weight: 750;
letter-spacing: 0.08em;
line-height: 1.4;
text-transform: uppercase;
}
[dir="rtl"] .audio-player-eyebrow {
letter-spacing: 0;
}
.audio-player-time {
flex: 0 0 auto;
color: var(--muted);
font-size: 0.76rem;
font-variant-numeric: tabular-nums;
}
.audio-player-track {
direction: ltr;
display: grid;
grid-template-columns: 3.2em minmax(0, 1fr) 3.2em;
align-items: center;
gap: 10px;
min-height: 36px;
}
.audio-player-progress,
.audio-volume-range {
--audio-progress: 0%;
appearance: none;
direction: ltr;
width: 100%;
height: 6px;
margin: 0;
border-radius: 999px;
background: linear-gradient(to right, var(--blue) var(--audio-progress), var(--line) var(--audio-progress));
cursor: pointer;
}
.audio-player-progress::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
border: 3px solid var(--panel);
border-radius: 50%;
background: var(--blue);
box-shadow: 0 1px 7px color-mix(in srgb, var(--blue) 38%, transparent);
}
.audio-player-progress::-moz-range-thumb {
width: 13px;
height: 13px;
border: 3px solid var(--panel);
border-radius: 50%;
background: var(--blue);
}
.audio-player-progress:disabled {
cursor: wait;
opacity: 0.62;
}
.audio-player-controls {
justify-content: space-between;
gap: 8px;
}
.audio-player-transport {
direction: ltr;
display: flex;
align-items: center;
gap: 6px;
}
.audio-player-settings {
flex-wrap: wrap;
gap: 12px;
margin-inline-start: auto;
}
.audio-volume-range {
--audio-volume: 100%;
direction: ltr;
width: 88px;
background: linear-gradient(to right, var(--blue) var(--audio-volume), var(--line) var(--audio-volume));
}
.audio-volume-range::-webkit-slider-thumb {
appearance: none;
width: 16px;
height: 16px;
border: 3px solid var(--panel);
border-radius: 50%;
background: var(--blue);
}
.audio-volume-range::-moz-range-thumb {
width: 11px;
height: 11px;
border: 3px solid var(--panel);
border-radius: 50%;
background: var(--blue);
}
.audio-control,
.audio-player-speed select:not(.enhanced-select-native) {
min-height: 44px;
border: 1px solid var(--line);
border-radius: 12px;
background: color-mix(in srgb, var(--surface) 88%, transparent);
color: var(--text);
font: inherit;
}
.audio-control {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-width: 44px;
padding: 0 13px;
cursor: pointer;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.audio-control-icon {
width: 44px;
padding: 0;
}
.audio-speed-badge-btn {
font-size: 0.8125rem;
font-weight: 750;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
padding: 0 4px;
}
.audio-control-primary {
min-width: 100px;
border-color: var(--blue);
background: var(--blue);
color: #fff;
font-size: 0.82rem;
font-weight: 750;
}
.audio-control:hover,
.audio-player-speed select:not(.enhanced-select-native):hover {
border-color: var(--blue);
color: var(--link-aaa);
}
.audio-control-primary:hover,
.audio-control-primary:focus-visible {
background: color-mix(in srgb, var(--blue) 86%, #000);
color: #fff;
transform: translateY(-1px);
}
.audio-control:disabled {
cursor: not-allowed;
opacity: 0.42;
}
.audio-player-speed {
gap: 6px;
color: var(--muted);
font-size: 0.8rem;
}
.audio-speed-label {
display: inline-flex;
align-items: center;
gap: 6px;
}
.audio-speed-label svg {
width: 16px;
height: 16px;
}
.audio-select-shell {
position: relative;
display: inline-grid;
align-items: center;
}
.audio-player-speed select:not(.enhanced-select-native) {
appearance: none;
min-width: 72px;
padding: 0 30px 0 10px;
color-scheme: light;
cursor: pointer;
}
[data-theme="dark"]:not([data-contrast="high"]) .audio-player-speed select:not(.enhanced-select-native) {
color-scheme: dark;
}
[dir="rtl"] .audio-player-speed select:not(.enhanced-select-native) {
padding: 0 10px 0 30px;
}
.audio-player-speed option {
background: var(--panel);
color: var(--text);
}
.audio-control-close {
align-self: start;
border-color: transparent;
background: transparent;
}
.audio-expand-toggle svg {
transition: transform var(--motion-normal) var(--ease-standard);
}
.audio-expand-toggle[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.global-audio-player[data-state="error"] .audio-player-artwork {
background: var(--danger, #b42318);
}
.global-audio-player [data-tooltip]::before,
.global-audio-player [data-tooltip]::after {
display: none;
}
.global-audio-player [data-tooltip]::before {
inset: auto auto calc(100% + 8px) 50%;
transform: translateX(-50%) translateY(4px);
}
.global-audio-player [data-tooltip]::after {
inset: auto auto calc(100% + 2px) 50%;
transform: translateX(-50%) translateY(4px);
border-width: 6px 5px 0;
border-style: solid;
border-color: var(--tooltip-bg, #0f172a) transparent transparent transparent;
}
.global-audio-player [data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::before,
.global-audio-player [data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::after {
display: block;
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.has-audio-player {
padding-bottom: 180px;
}
.back-to-top-fab {
position: fixed;
z-index: calc(var(--z-popover) - 1);
inset-inline-end: max(20px, env(safe-area-inset-right));
inset-block-end: max(20px, env(safe-area-inset-bottom));
display: grid;
place-items: center;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--blue) 36%, var(--line));
border-radius: 15px;
background: color-mix(in srgb, var(--panel) 92%, transparent);
color: var(--link-aaa);
box-shadow: 0 12px 34px rgb(8 18 35 / 18%);
backdrop-filter: blur(14px);
cursor: pointer;
transition: inset-block-end 180ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.back-to-top-fab[hidden] {
display: none;
}
.back-to-top-fab svg {
display: block;
width: 20px;
height: 20px;
fill: none;
stroke: currentcolor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.back-to-top-fab:hover,
.back-to-top-fab:focus-visible {
border-color: var(--blue);
background: var(--blue);
color: #fff;
transform: translateY(-2px);
}
.has-audio-player .back-to-top-fab {
inset-block-end: max(174px, calc(env(safe-area-inset-bottom) + 154px));
}
.panel-heading-row,
.panel > h2 {
padding-bottom: 10px;
border-bottom: 0;
}
.btn,
.back-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
min-height: 44px;
min-width: 44px;
padding: 0 18px;
border-radius: 8px;
font-family: inherit;
font-size: 0.92rem;
font-weight: 700;
line-height: 1;
text-decoration: none !important;
cursor: pointer;
box-sizing: border-box;
vertical-align: middle;
border: 2px solid transparent;
transition:
background-color 160ms ease,
border-color 160ms ease,
color 160ms ease,
transform 160ms ease,
box-shadow 160ms ease;
}
.project-live-link .external-icon {
flex: 0 0 auto;
width: 14px;
height: 14px;
}
.btn-icon:not(svg) {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 0 !important;
flex: 0 0 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-icon .external-icon {
margin: 0 !important;
transform: none !important;
width: 18px !important;
height: 18px !important;
opacity: 1 !important;
display: block;
}
.btn-icon:hover .external-icon,
.btn-icon:focus-visible .external-icon {
transform: scale(1.1) !important;
}
.btn-primary {
background: var(--button-bg);
border-color: var(--button-bg);
color: var(--button-text);
box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
}
.btn-primary:hover,
.btn-primary:focus-visible {
background: color-mix(in srgb, var(--button-bg) 85%, #000);
border-color: var(--button-bg);
color: var(--button-text);
box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.btn-primary:hover,
.btn-secondary:hover,
.back-link:hover {
transform: translateY(-1px);
}
}
.back-link {
border-color: var(--blue);
background: transparent;
color: var(--blue);
}
.btn-secondary:hover,
.btn-secondary:focus-visible,
.back-link:hover,
.back-link:focus-visible {
background: color-mix(in srgb, var(--blue) 12%, transparent);
border-color: var(--blue);
color: var(--blue);
box-shadow: 0 4px 10px rgb(0 0 0 / 8%);
}
.btn-secondary:active,
.btn-primary:active,
.back-link:active {
transform: scale(0.98);
}
.btn svg,
.back-link svg {
display: block;
flex: 0 0 auto;
width: 18px;
height: 18px;
fill: none;
stroke: currentcolor;
stroke-width: 2;
}
[dir="rtl"] .back-link svg {
transform: scaleX(-1);
}
[data-theme="dark"]:not([data-contrast="high"]) .btn-secondary,
[data-theme="dark"]:not([data-contrast="high"]) .back-link {
border-color: var(--blue);
color: var(--blue);
}
[data-theme="dark"]:not([data-contrast="high"]) .btn-secondary:hover,
[data-theme="dark"]:not([data-contrast="high"]) .btn-secondary:focus-visible,
[data-theme="dark"]:not([data-contrast="high"]) .back-link:hover,
[data-theme="dark"]:not([data-contrast="high"]) .back-link:focus-visible {
background: color-mix(in srgb, var(--blue) 20%, transparent);
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 0 18px;
border-radius: 8px;
font-family: inherit;
font-size: 0.92rem;
font-weight: 700;
color: var(--text);
background: color-mix(in srgb, var(--panel) 85%, var(--page));
border: 1.5px solid var(--line);
cursor: pointer;
text-decoration: none;
box-sizing: border-box;
transition: background-color var(--motion-normal) var(--ease-standard), border-color var(--motion-normal) var(--ease-standard), color var(--motion-normal) var(--ease-standard), transform var(--motion-normal) var(--ease-standard);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
background: var(--pill-bg);
border-color: var(--blue);
color: var(--blue);
transform: none;
}
.controls-group {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: clamp(20px, 5vw, 72px);
}
.display-mode-group {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px;
border: 1px solid rgb(203 213 225 / 60%);
border-radius: 12px;
background: #f1f5f9;
transition:
background-color var(--motion-fast) var(--ease-standard),
border-color var(--motion-fast) var(--ease-standard);
}
.display-mode-group button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: auto;
min-width: 44px;
min-height: 44px;
margin: 0;
padding: 0 10px;
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
color: #334155;
box-shadow: none;
cursor: pointer;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 600;
white-space: nowrap;
box-sizing: border-box;
transition:
background-color var(--motion-fast) var(--ease-standard),
border-color var(--motion-fast) var(--ease-standard),
color var(--motion-fast) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard);
}
.display-mode-group button .control-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
border-radius: 8px;
}
.display-mode-group button:hover {
background: #fff;
color: var(--blue);
border-color: rgb(203 213 225 / 70%);
box-shadow: 0 2px 8px rgb(15 23 42 / 8%);
}
.display-mode-group button:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
background: #fff;
color: var(--blue);
}
.display-mode-group button:active {
background: #fff;
transform: scale(0.97);
}
.display-mode-group button[aria-checked="true"] {
background: #fff;
color: var(--blue);
border-color: rgb(0 94 135 / 35%);
box-shadow: 0 2px 8px rgb(0 94 135 / 12%);
}
.display-mode-group button svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentcolor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.control-label {
display: inline-block;
font-size: 0.8125rem;
font-weight: 600;
white-space: nowrap;
color: inherit;
line-height: 1;
}
.control-state {
display: block;
font-size: 0.8125rem;
color: var(--blue);
white-space: nowrap;
}
.language-selector {
display: flex;
align-items: center;
gap: 3px;
min-width: 0;
margin: 0;
padding: 3px;
border: 1px solid rgb(203 213 225 / 60%);
border-radius: 12px;
background: #f1f5f9;
color: #334155;
transition:
background-color var(--motion-normal) var(--ease-standard),
border-color var(--motion-normal) var(--ease-standard);
}
.language-selector-icon {
display: grid;
place-items: center;
width: 30px;
height: 30px;
flex: 0 0 auto;
color: var(--blue);
}
.language-selector-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentcolor;
stroke-width: 2;
}
.language-option {
display: grid;
place-items: center;
min-width: 64px;
min-height: 44px;
padding: 0 10px;
border: 1px solid transparent;
border-radius: 9px;
color: #475569;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
box-sizing: border-box;
transition:
background-color var(--motion-fast) var(--ease-standard),
border-color var(--motion-fast) var(--ease-standard),
color var(--motion-fast) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard);
}
.language-option:has(input:checked) {
background: var(--blue);
border-color: var(--blue);
color: #fff;
box-shadow: 0 1px 4px rgb(0 94 135 / 30%);
}
.language-option:hover {
color: #0f172a;
background: rgb(0 94 135 / 8%);
}
.language-option:active {
transform: scale(0.97);
}
.language-option:has(input:focus-visible) {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.case-study-shell {
width: min(100% - 32px, 1020px);
margin-inline: auto;
padding-bottom: 64px;
}
.case-study-header-bar {
margin-bottom: 20px;
}
.case-study-nav {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 8px 0;
background: transparent;
border: 0;
border-radius: 14px;
box-shadow: none;
}
.case-nav-top-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 12px;
flex-wrap: wrap;
}
.case-nav-back-pill {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
height: 44px;
padding: 0 16px;
background: color-mix(in srgb, var(--surface) 90%, transparent);
border: 1px solid var(--line);
border-radius: 999px;
color: var(--blue);
font-family: inherit;
font-size: 0.9rem;
font-weight: 700;
text-decoration: none !important;
white-space: nowrap;
flex-shrink: 0;
box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
backdrop-filter: blur(8px);
transition:
background-color 180ms ease,
border-color 180ms ease,
color 180ms ease,
box-shadow 180ms ease,
transform 180ms ease;
}
.case-nav-back-pill svg {
width: 16px;
height: 16px;
stroke: currentcolor;
stroke-width: 2.2;
transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.case-nav-back-pill:hover,
.case-nav-back-pill:focus-visible {
background: var(--blue);
color: #fff;
border-color: var(--blue);
box-shadow: 0 4px 14px rgb(0 0 0 / 14%);
}
.case-nav-back-pill:hover svg,
.case-nav-back-pill:focus-visible svg {
transform: translateX(-3px);
}
[dir="rtl"] .case-nav-back-pill svg {
transform: scaleX(-1);
}
[dir="rtl"] .case-nav-back-pill:hover svg,
[dir="rtl"] .case-nav-back-pill:focus-visible svg {
transform: scaleX(-1) translateX(-3px);
}
.case-study-breadcrumbs {
display: flex;
align-items: center;
width: 100%;
margin: 2px 0 0;
padding: 0;
}
.breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
font-size: 0.84rem;
font-weight: 500;
color: var(--muted);
}
.breadcrumbs li {
display: inline-flex;
align-items: center;
gap: 4px;
}
.breadcrumbs li + li::before {
content: "/";
color: var(--line);
font-weight: 300;
margin-inline: 4px;
opacity: 0.8;
}
[dir="rtl"] .breadcrumbs li + li::before {
content: "/";
}
.breadcrumbs a {
min-width: 44px;
min-height: 44px;
padding: 0 4px;
color: var(--link-aaa);
display: inline-flex;
align-items: center;
border-radius: var(--radius-sm);
transition: color 160ms ease;
}
.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
color: var(--blue);
text-decoration: underline;
}
.breadcrumbs [aria-current="page"] {
color: var(--text);
font-weight: 700;
max-width: min(100%, 420px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 4px;
}
.case-study-controls {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.case-reading-action {
margin: 0 0 16px;
}
.case-reading-action .case-listen-btn {
min-height: 44px;
height: auto;
white-space: normal;
}
.case-study-controls .language-selector {
flex: 0 0 auto;
width: auto;
min-width: 88px;
background: var(--surface);
border-color: var(--line);
}
.case-study-controls .language-option {
flex: 1 1 auto;
min-width: 44px;
color: var(--text);
}
.case-study-controls .language-selector-icon {
color: var(--link-aaa);
}
.case-study-controls .language-option:has(input:checked) {
background: var(--button-bg);
color: var(--button-text);
}
.case-display-modes {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px;
background: var(--surface);
border: 1px solid var(--soft-line);
border-radius: 12px;
}
.case-display-modes :is(.theme-toggle, .contrast-toggle) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: auto;
min-width: 44px;
min-height: 44px;
margin: 0;
padding: 0 10px;
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
color: var(--text);
box-shadow: none;
cursor: pointer;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 600;
white-space: nowrap;
box-sizing: border-box;
transition:
background-color var(--motion-normal) var(--ease-standard),
border-color var(--motion-normal) var(--ease-standard),
color var(--motion-normal) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard),
box-shadow var(--motion-normal) var(--ease-standard);
}
.case-display-modes :is(.theme-toggle, .contrast-toggle):hover {
background: var(--pill-bg);
color: var(--blue);
border-color: var(--blue);
transform: translateY(-1px);
}
.case-display-modes :is(.theme-toggle, .contrast-toggle):focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.case-display-modes :is(.theme-toggle, .contrast-toggle):active {
transform: scale(0.97);
}
.case-display-modes [aria-checked="true"] {
background: var(--pill-bg);
color: var(--blue);
border-color: var(--blue);
}
.case-listen-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 14px;
background: color-mix(in srgb, var(--blue) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent);
border-radius: 999px;
color: var(--link-aaa);
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
}
.case-study-controls > button {
min-width: 44px;
min-height: 44px;
}
.case-listen-btn .audio-icon {
width: 14px;
height: 14px;
}
.reading-progress-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--blue), var(--link-aaa));
transform-origin: 0 50%;
transform: scaleX(0);
z-index: 9999;
pointer-events: none;
transition: transform 60ms linear;
}
[dir="rtl"] .reading-progress-bar {
transform-origin: 100% 50%;
}
.case-study-card {
max-width: 960px;
margin: 12px auto 48px;
padding: clamp(16px, 2.5vw, 28px);
border: 0;
border-radius: 18px;
background: transparent;
box-shadow: none;
}
.case-study-hero {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 32px;
align-items: start;
margin-bottom: 28px;
}
.case-hero-text {
display: flex;
flex-direction: column;
gap: 0;
}
.case-category-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.case-category-badge {
display: inline-flex;
align-items: center;
padding: 5px 12px;
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--link-aaa);
background: transparent;
border: 1px solid var(--soft-line);
border-radius: 999px;
}
.case-study-hero h1 {
margin: 0 0 12px;
color: var(--text);
font-size: clamp(1.75rem, 3vw, 2.75rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
}
html[lang="ar"] .case-study-hero h1 {
font-family: var(--font-ui);
line-height: 1.28;
letter-spacing: normal;
}
html[lang="ar"] .case-category-badge {
letter-spacing: normal;
}
.case-study-subtitle {
color: var(--text-secondary);
font-size: 1rem;
line-height: 1.65;
margin: 0 0 24px;
}
.case-cta-wrapper {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.case-live-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding: 0 22px;
font-size: 0.9rem;
font-weight: 700;
border-radius: 10px;
background: var(--button-bg);
color: var(--button-text);
border: none;
text-decoration: none !important;
transition:
background-color 180ms ease,
box-shadow 180ms ease,
transform 180ms ease;
}
.case-live-cta:hover,
.case-live-cta:focus-visible {
background: color-mix(in srgb, var(--blue) 85%, #000);
box-shadow: 0 4px 16px rgb(0 0 0 / 15%);
transform: translateY(-1px);
}
.case-live-cta .external-icon {
width: 14px;
height: 14px;
stroke: currentcolor;
stroke-width: 2;
}
.case-preview-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding: 0 22px;
font-size: 0.9rem;
font-weight: 700;
border-radius: 10px;
background: transparent;
color: var(--link-aaa);
border: 1px solid var(--line);
cursor: pointer;
font-family: inherit;
text-decoration: none !important;
transition:
background-color 180ms ease,
border-color 180ms ease,
color 180ms ease;
}
.case-preview-toggle:hover,
.case-preview-toggle:focus-visible {
background: var(--pill-bg);
border-color: var(--blue);
}
.btn-info-icon {
width: 16px;
height: 16px;
stroke: currentcolor;
stroke-width: 2;
fill: none;
flex-shrink: 0;
}
.case-hero-image {
position: relative;
margin: 0;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--page) 60%, var(--surface));
}
.case-image-zoom-trigger {
display: block;
width: 100%;
margin: 0;
padding: 0;
background: transparent;
border: 0;
position: relative;
text-align: start;
}
.case-study-image {
display: block;
width: 100%;
height: auto;
object-fit: cover;
object-position: top;
cursor: zoom-in;
transition: opacity 180ms ease, transform 300ms ease;
}
.case-study-image:focus-visible {
outline: 3px solid var(--focus);
outline-offset: -3px;
}
.case-hero-image:hover .case-study-image,
.case-study-image:focus-visible {
transform: scale(1.02);
}
.case-image-zoom-badge {
position: absolute;
bottom: 12px;
inset-inline-end: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: rgb(4 12 24 / 75%);
backdrop-filter: blur(8px);
border: 1px solid rgb(255 255 255 / 25%);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
opacity: 0.85;
transition:
opacity 180ms ease,
transform 180ms ease,
background-color 180ms ease;
pointer-events: none;
}
.case-image-zoom-badge svg {
width: 14px;
height: 14px;
stroke: currentcolor;
fill: none;
stroke-width: 2;
}
.case-hero-image:hover .case-image-zoom-badge,
.case-study-image:focus-visible ~ .case-image-zoom-badge {
opacity: 1;
transform: scale(1.05);
background: var(--blue);
border-color: var(--blue);
}
.case-image-hint {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 16px;
color: var(--muted);
font-size: 0.8125rem;
font-weight: 500;
text-align: center;
background: var(--surface);
border-top: 1px solid var(--line);
}
.case-meta-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1px;
margin-bottom: 28px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.case-meta-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 14px 16px;
background: var(--surface);
}
.case-meta-item:first-child {
border-radius: 12px 0 0 12px;
}
.case-meta-item:last-child {
border-radius: 0 12px 12px 0;
}
[dir="rtl"] .case-meta-item:first-child {
border-radius: 0 12px 12px 0;
}
[dir="rtl"] .case-meta-item:last-child {
border-radius: 12px 0 0 12px;
}
.case-meta-icon {
display: none;
width: 18px;
height: 18px;
color: var(--blue);
stroke: currentcolor;
stroke-width: 2;
fill: none;
margin-bottom: 2px;
}
.case-meta-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
}
.case-meta-val {
font-size: 0.88rem;
font-weight: 700;
color: var(--text);
}
.case-meta-val.status-live {
color: var(--link-aaa);
}
#case-nav-sentinel {
height: 1px;
margin-top: -1px;
pointer-events: none;
visibility: hidden;
}
.case-section-nav {
position: sticky;
top: 12px;
z-index: var(--z-navigation);
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
width: fit-content;
max-width: calc(100% - 24px);
margin: 0 auto 24px;
padding: 4px 6px;
background: color-mix(in srgb, var(--surface) 92%, transparent);
border: 1px solid color-mix(in srgb, var(--line) 70%, var(--blue) 30%);
border-radius: 999px;
backdrop-filter: blur(16px) saturate(180%);
box-shadow: 0 12px 30px rgb(0 0 0 / 16%);
scrollbar-width: none;
overflow: hidden;
transition:
box-shadow 240ms ease,
background-color 240ms ease,
border-color 240ms ease,
transform 200ms ease;
transform: translateZ(0);
}
.case-section-nav.is-stuck {
box-shadow:
0 10px 30px rgb(0 0 0 / 14%),
0 1px 3px rgb(0 0 0 / 8%);
background: color-mix(in srgb, var(--surface) 92%, transparent);
border-color: color-mix(in srgb, var(--line) 70%, var(--blue) 30%);
}
.case-section-nav::-webkit-scrollbar {
display: none;
}
.case-section-back,
.case-section-link {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 44px;
padding: 8px 14px;
border-radius: 999px;
color: var(--muted);
font-size: 0.86rem;
font-weight: 700;
text-decoration: none !important;
white-space: nowrap;
transition:
color var(--motion-fast, 120ms) ease,
background-color var(--motion-fast, 120ms) ease,
box-shadow var(--motion-fast, 120ms) ease,
transform var(--motion-fast, 120ms) ease;
}
.case-section-nav.has-indicator .case-section-back,
.case-section-nav.has-indicator .case-section-link {
background: transparent;
box-shadow: none;
}
.case-section-icon {
width: 16px;
height: 16px;
fill: none;
stroke: currentcolor;
stroke-width: 2;
flex-shrink: 0;
transition: stroke 150ms ease, transform 180ms ease;
}
.case-section-back:hover,
.case-section-link:hover {
color: var(--text);
background: var(--pill-bg);
transform: none;
}
.case-section-back:focus-visible,
.case-section-link:focus-visible {
outline: 2px solid var(--focus);
outline-offset: -3px;
border-radius: 999px;
box-shadow: none;
color: var(--text);
}
.case-section-nav.has-indicator .case-section-back:hover,
.case-section-nav.has-indicator .case-section-back:focus-visible,
.case-section-nav.has-indicator .case-section-link:hover,
.case-section-nav.has-indicator .case-section-link:focus-visible {
background: transparent;
}
.case-section-link.is-active,
.case-section-link[aria-current] {
color: var(--blue);
font-weight: 700;
}
.case-section-back:hover .case-section-back-icon,
.case-section-back:focus-visible .case-section-back-icon {
transform: translateX(-3px);
}
[dir="rtl"] .case-section-back .case-section-back-icon {
transform: scaleX(-1);
}
[dir="rtl"] .case-section-back:hover .case-section-back-icon,
[dir="rtl"] .case-section-back:focus-visible .case-section-back-icon {
transform: scaleX(-1) translateX(-3px);
}
.case-section-nav-divider {
width: 1px;
height: 20px;
background: color-mix(in srgb, var(--line) 80%, var(--blue) 20%);
margin: 0 4px;
flex-shrink: 0;
}
.case-section-indicator {
position: absolute;
top: 0;
left: 0;
z-index: 1;
border-radius: 999px;
background: var(--pill-bg);
box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
pointer-events: none;
opacity: 0;
transition:
transform var(--motion-slow, 260ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)),
width var(--motion-slow, 260ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)),
height var(--motion-slow, 260ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)),
opacity var(--motion-fast, 120ms) ease;
will-change: transform, width, height;
}
@media (prefers-reduced-motion: reduce) {
.case-section-indicator {
transition: none !important;
}
}
.case-reading-progress {
position: absolute;
bottom: 0;
inset-inline: 16px;
height: 2px;
background: color-mix(in srgb, var(--line) 40%, transparent);
border-radius: 999px;
overflow: hidden;
pointer-events: none;
}
.case-reading-progress-fill {
width: 100%;
height: 100%;
background: linear-gradient(90deg, var(--blue), var(--teal));
transform-origin: 0 50%;
transform: scaleX(0);
transition: transform 60ms linear;
}
[dir="rtl"] .case-reading-progress-fill {
transform-origin: 100% 50%;
background: linear-gradient(270deg, var(--blue), var(--teal));
}
@media (prefers-reduced-motion: reduce) {
.case-reading-progress-fill {
transition: none !important;
}
}
.case-section-jump {
display: none;
}
.case-study-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.case-accordion {
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
overflow: hidden;
transition: border-color 180ms ease;
}
.case-accordion[open] {
border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
}
.case-accordion summary {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
cursor: pointer;
list-style: none;
font-size: 1.1rem;
font-weight: 700;
color: var(--text);
transition: background-color 180ms ease;
}
.case-accordion summary::-webkit-details-marker {
display: none;
}
.case-accordion summary::marker {
display: none;
content: "";
}
.case-accordion summary:hover {
background: color-mix(in srgb, var(--blue) 3%, transparent);
}
.case-accordion summary .section-num {
font-size: 0.82rem;
font-weight: 800;
color: var(--link-aaa);
background: var(--pill-bg);
padding: 4px 10px;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent);
flex-shrink: 0;
}
.accordion-title {
flex: 1;
}
.accordion-chevron {
width: 20px;
height: 20px;
color: var(--muted);
flex-shrink: 0;
transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.case-accordion[open] .accordion-chevron {
transform: rotate(180deg);
}
.section-action-bar {
display: flex;
justify-content: flex-end;
margin-bottom: 14px;
}
.section-copy-btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 6px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--pill-bg);
color: var(--muted);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition:
background-color 150ms ease,
color 150ms ease,
border-color 150ms ease,
transform 150ms ease;
}
.section-copy-btn:hover {
background: color-mix(in srgb, var(--blue) 10%, var(--surface));
color: var(--blue);
border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
}
.section-copy-btn:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
color: var(--text);
border-color: var(--focus);
}
.section-copy-btn.copied {
background: color-mix(in srgb, var(--teal) 15%, var(--surface));
color: var(--teal);
border-color: color-mix(in srgb, var(--teal) 40%, var(--line));
}
.section-copy-icon {
width: 16px;
height: 16px;
fill: none;
stroke: currentcolor;
stroke-width: 2;
flex-shrink: 0;
}
.accordion-body {
padding: 0 20px 20px;
}
.accordion-body p {
color: var(--text-secondary);
font-size: 1rem;
line-height: 1.7;
margin: 0 0 14px;
}
.accordion-body p:last-child {
margin-bottom: 0;
}
.case-callout {
margin: 16px 0;
padding: 18px 22px;
background: var(--project-bg);
border-inline-start: 4px solid var(--blue);
border-radius: 0 10px 10px 0;
color: var(--text);
font-size: 1rem;
line-height: 1.65;
}
.case-tradeoff {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--soft-line);
color: var(--muted);
}
.case-tradeoff strong {
color: var(--text);
}
[dir="rtl"] .case-callout {
border-radius: 10px 0 0 10px;
}
.case-callout strong {
color: var(--blue);
display: block;
margin-bottom: 4px;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.provenance-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
gap: 12px;
margin-top: 14px;
}
.provenance-card {
padding: 18px 20px;
background: transparent;
border-inline-start: 2px solid var(--soft-line);
}
.provenance-icon {
width: 28px;
height: 28px;
color: var(--blue);
margin-bottom: 10px;
}
.provenance-card strong {
display: block;
font-size: 0.92rem;
font-weight: 700;
color: var(--text);
margin-bottom: 6px;
}
.provenance-card p {
font-size: 0.84rem;
line-height: 1.55;
color: var(--muted);
margin: 0;
}
.case-metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
gap: 14px;
margin: 20px 0;
}
.case-metric-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 18px;
background: var(--surface-soft, rgb(0 0 0 / 2%));
border: 1px solid var(--soft-line, rgb(0 0 0 / 8%));
border-radius: 12px;
transition:
transform 180ms ease,
border-color 180ms ease;
}
.case-metric-card:hover {
border-color: color-mix(in srgb, var(--blue) 40%, var(--soft-line));
transform: translateY(-2px);
}
.case-metric-val-row {
display: flex;
align-items: baseline;
gap: 4px;
line-height: 1;
}
.case-metric-value {
font-size: clamp(1.75rem, 3.5vw, 2.25rem);
font-weight: 800;
color: var(--blue);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.case-metric-unit {
font-size: 0.95rem;
font-weight: 700;
color: var(--muted);
}
.case-metric-label {
font-size: 0.82rem;
font-weight: 500;
color: var(--muted);
line-height: 1.4;
}
[data-theme="dark"]:not([data-contrast="high"]) .case-metric-card {
background: rgb(255 255 255 / 3%);
border-color: rgb(255 255 255 / 8%);
}
[data-theme="dark"]:not([data-contrast="high"]) .case-metric-value {
color: var(--accent, #60a5fa);
}
[data-contrast="high"] .case-metric-card {
border: 2px solid #fff;
background: #000;
}
[data-contrast="high"] .case-metric-value {
color: #0ff !important;
}
[data-contrast="high"] .case-metric-unit,
[data-contrast="high"] .case-metric-label {
color: #fff !important;
}
.case-a11y-note {
display: flex;
align-items: center;
gap: 10px;
margin-top: 24px;
padding: 14px 20px;
background: color-mix(in srgb, var(--blue) 5%, var(--surface));
border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
border-radius: 10px;
font-size: 0.85rem;
font-weight: 500;
color: var(--muted);
}
.case-a11y-note svg {
width: 20px;
height: 20px;
color: var(--blue);
flex-shrink: 0;
}
.case-study-pagination {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.pagination-card {
display: flex;
min-width: 0;
align-items: center;
gap: 14px;
padding: 16px 20px;
min-height: 72px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--panel);
color: var(--text);
transition:
background-color var(--motion-fast) var(--ease-standard),
border-color var(--motion-fast) var(--ease-standard),
color var(--motion-fast) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard);
}
.pagination-card:hover,
.pagination-card:focus-visible {
transform: translateY(-2px);
border-color: var(--blue);
box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
background: color-mix(in srgb, var(--surface) 90%, var(--page));
}
.pagination-prev {
justify-content: flex-start;
text-align: start;
}
.pagination-next {
justify-content: flex-end;
text-align: end;
}
.pagination-arrow-box {
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: color-mix(in srgb, var(--blue) 10%, transparent);
color: var(--blue);
flex: 0 0 38px;
transition:
background-color 180ms ease,
color 180ms ease;
}
.pagination-card:hover .pagination-arrow-box,
.pagination-card:focus-visible .pagination-arrow-box {
background: var(--button-bg);
color: var(--button-text);
}
.pagination-arrow-box svg {
width: 18px;
height: 18px;
stroke: currentcolor;
stroke-width: 2.2;
transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pagination-prev:hover .pagination-arrow-box svg,
.pagination-prev:focus-visible .pagination-arrow-box svg {
transform: translateX(-3px);
}
.pagination-next:hover .pagination-arrow-box svg,
.pagination-next:focus-visible .pagination-arrow-box svg {
transform: translateX(3px);
}
[dir="rtl"] .pagination-prev .pagination-arrow-box svg,
[dir="rtl"] .pagination-next .pagination-arrow-box svg {
transform: scaleX(-1);
}
[dir="rtl"] .pagination-prev:hover .pagination-arrow-box svg,
[dir="rtl"] .pagination-prev:focus-visible .pagination-arrow-box svg {
transform: scaleX(-1) translateX(-3px);
}
[dir="rtl"] .pagination-next:hover .pagination-arrow-box svg,
[dir="rtl"] .pagination-next:focus-visible .pagination-arrow-box svg {
transform: scaleX(-1) translateX(3px);
}
.pagination-info {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.pagination-sub {
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
}
.pagination-title {
font-size: 1.02rem;
font-weight: 700;
color: var(--link-aaa);
overflow-wrap: anywhere;
}
.image-lightbox {
position: fixed;
inset: 0;
z-index: var(--z-dialog);
display: none;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
margin: 0;
padding: 20px;
background: rgb(4 12 24 / 88%);
backdrop-filter: blur(16px);
border: 0;
box-sizing: border-box;
opacity: 0;
transition: opacity 220ms ease;
}
.image-lightbox[open] {
display: flex;
opacity: 1;
}
.image-lightbox::backdrop {
background: rgb(4 12 24 / 88%);
backdrop-filter: blur(16px);
}
.lightbox-content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
max-width: 94vw;
max-height: 94vh;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 25px 60px rgb(0 0 0 / 65%);
transform: scale(0.96);
transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
}
.image-lightbox[open] .lightbox-content {
transform: scale(1);
}
.lightbox-img-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
max-height: 80vh;
overflow: auto;
background: #06111f;
}
.lightbox-img {
display: block;
max-width: 100%;
max-height: 80vh;
object-fit: contain;
}
.lightbox-caption {
width: 100%;
margin: 0;
padding: 12px 20px;
background: var(--surface);
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 0.9rem;
font-weight: 500;
text-align: center;
box-sizing: border-box;
}
.lightbox-close-btn {
position: absolute;
top: 12px;
inset-inline-end: 12px;
z-index: 10;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 0;
border-radius: 50%;
background: rgb(0 0 0 / 60%);
border: 1px solid rgb(255 255 255 / 30%);
color: #fff;
cursor: pointer;
box-sizing: border-box;
transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.lightbox-close-btn:hover,
.lightbox-close-btn:focus-visible {
background: var(--blue);
border-color: var(--blue);
transform: scale(1.08);
}
.lightbox-close-btn svg {
width: 18px;
height: 18px;
stroke: currentcolor;
stroke-width: 2.5;
}
.live-embed-wrapper {
display: none;
margin-bottom: 24px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 16px 40px rgb(0 0 0 / 25%);
animation: project-fade-in 240ms cubic-bezier(0.2, 0, 0, 1) both;
}
.live-embed-wrapper.is-open {
display: block;
}
.live-embed-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: var(--surface);
border-bottom: 1px solid var(--line);
gap: 12px;
flex-wrap: wrap;
}
.live-embed-controls {
display: flex;
align-items: center;
gap: 6px;
}
.device-btn {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 38px;
padding: 4px 12px;
border: 1px solid var(--line);
border-radius: 8px;
background: transparent;
color: var(--text-secondary);
font-family: inherit;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.device-btn.is-active,
.device-btn:hover {
background: var(--pill-bg);
border-color: var(--blue);
color: var(--link-aaa);
}
.live-embed-frame-container {
display: flex;
justify-content: center;
background: #0a1420;
padding: 16px;
min-height: 600px;
transition: background-color var(--motion-slow) var(--ease-standard);
}
.live-embed-iframe {
width: 100%;
height: 640px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
transition: width 240ms ease;
}
.live-embed-frame-container[data-device="mobile"] .live-embed-iframe {
width: 390px;
height: 720px;
box-shadow: 0 12px 36px rgb(0 0 0 / 40%);
}
@media screen and (min-width: 561px) and (max-width: 1080px) {
.portfolio-header {
padding-inline: clamp(20px, 4vw, 36px);
}
.hero {
grid-template-columns: 1fr;
gap: 20px;
padding: 22px 0 10px;
}
.hero-identity {
flex: 1 1 100%;
max-width: 100%;
}
.hero-contact-card {
width: 100%;
max-width: 820px;
}
.hero-controls-rail {
flex: 0 0 auto;
}
}
@media (max-width: 700px) {
.controls-group {
flex-direction: row;
align-items: stretch;
gap: 8px;
justify-content: space-between;
overflow: hidden;
}
.language-selector {
flex: 0 0 auto;
width: auto;
max-width: 100%;
justify-content: center;
padding: 3px;
}
.language-selector-icon {
display: none;
}
.language-option {
min-width: 44px;
min-height: 44px;
font-size: 0.75rem;
padding: 0 8px;
}
.language-option[lang="en"] span {
font-size: 0;
}
.language-option[lang="en"] span::after {
content: "EN";
font-size: 0.75rem;
}
.language-option[lang="ar"] span {
font-size: 0;
}
.language-option[lang="ar"] span::after {
content: "AR";
font-size: 0.85rem;
}
.display-mode-group {
display: inline-flex;
flex: 0 0 auto;
gap: 2px;
}
.display-mode-group > button {
width: auto;
min-width: 44px;
min-height: 44px;
padding: 0 8px;
gap: 4px;
font-size: 0.75rem;
}
html[lang="en"] .theme-toggle .control-label {
font-size: 0;
}
html[lang="en"] .theme-toggle .control-label::after {
content: "Light";
font-size: 0.75rem;
}
html[data-theme="dark"]:not([data-contrast="high"])[lang="en"] .theme-toggle .control-label::after {
content: "Dark";
}
html[lang="en"] .contrast-toggle .control-label {
font-size: 0;
}
html[lang="en"] .contrast-toggle .control-label::after {
content: "Contrast";
font-size: 0.75rem;
}
html[lang="ar"] .theme-toggle .control-label {
font-size: 0;
}
html[lang="ar"] .theme-toggle .control-label::after {
content: "فاتح";
font-size: 0.80rem;
}
html[data-theme="dark"]:not([data-contrast="high"])[lang="ar"] .theme-toggle .control-label::after {
content: "داكن";
}
html[lang="ar"] .contrast-toggle .control-label {
font-size: 0;
}
html[lang="ar"] .contrast-toggle .control-label::after {
content: "تباين";
font-size: 0.80rem;
}
}
@media (max-width: 560px) {
.resume-shell {
padding: 0;
}
.resume-card {
border-radius: 0;
min-height: 100vh;
border-width: 0;
}
.portfolio-header {
margin: 0;
padding: 10px 16px 30px;
border-inline: 0;
border-radius: 0 0 24px 24px;
}
.hero {
display: flex;
min-height: auto;
padding: 18px 0 4px;
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.hero-identity {
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
.avatar-wrap {
width: 96px;
height: 96px;
}
.identity-copy {
align-items: center;
text-align: center;
}
.hero-bio {
text-align: center;
}
.tags {
justify-content: center;
}
.hero-ctas {
position: relative;
justify-content: center;
width: 100%;
}
.resume-download-menu {
position: static;
max-width: 100%;
}
.hero-btn-resume {
max-width: 100%;
text-align: center;
white-space: normal;
}
.resume-download-options {
inset-inline: 0;
width: auto;
max-width: none;
}
.hero-contact-card {
display: block;
width: 100%;
max-width: none;
padding: 12px 8px 8px;
border: 1px solid rgb(203 213 225 / 24%);
box-shadow: none;
background: rgb(255 255 255 / 4%);
}
.contact-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
}
.contact-item:first-child {
grid-column: auto;
}
.contact-item {
min-width: 0;
padding: 0;
}
.contact-link-main {
flex-direction: column;
justify-content: center;
gap: 7px;
min-height: 60px;
padding: 6px 4px;
text-align: center;
}
.contact-icon {
display: inline-grid;
}
.hero-contact-card .contact-label {
font-size: 0.75rem;
}
.contact-card-title {
margin-inline: 4px;
text-align: center;
}
.hero-controls-rail {
width: 100%;
padding: 0;
}
.control-label:not(.sr-only) {
font-size: 0.7rem;
white-space: normal;
}
.control-state {
font-size: 0.7rem;
}
.ambient-particles {
animation: none;
}
.section-nav {
display: flex;
box-sizing: border-box;
width: calc(100% - 20px);
max-width: 440px;
margin: -22px auto 16px;
top: 8px;
padding: 4px;
gap: 2px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--line) 70%, var(--blue) 30%);
background: color-mix(in srgb, var(--surface) 92%, transparent);
backdrop-filter: blur(16px) saturate(180%);
box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
overflow: hidden;
touch-action: pan-y;
scrollbar-width: none;
}
.section-nav::-webkit-scrollbar {
display: none;
}
.section-nav a,
.section-nav-link {
flex: 1 1 0;
min-width: 0;
min-height: 44px;
padding: 6px;
font-size: 0.78rem;
gap: 5px;
justify-content: center;
text-align: center;
white-space: nowrap;
border-radius: 999px;
}
.section-nav-icon {
width: 15px;
height: 15px;
flex-shrink: 0;
}
.global-audio-player {
inset-block-end: max(8px, env(safe-area-inset-bottom));
width: calc(100% - 16px);
padding: 12px;
gap: 6px;
border-radius: 17px;
}
.audio-player-summary {
gap: 10px;
}
.global-audio-player[data-expanded="false"] .audio-player-artwork {
display: none;
}
.audio-player-artwork {
width: 44px;
height: 44px;
border-radius: 13px;
}
.audio-player-track {
grid-template-columns: 3em minmax(0, 1fr) 3em;
gap: 7px;
}
.audio-player-controls {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.audio-player-settings {
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-inline-start: 0;
}
.audio-player-transport {
justify-content: center;
min-width: 0;
gap: 4px;
}
.audio-control-primary {
flex: 1 1 auto;
min-width: 72px;
}
.audio-player-speed {
justify-content: center;
}
.audio-volume-range {
width: clamp(72px, 24vw, 96px);
}
.has-audio-player {
padding-bottom: 310px;
}
.has-audio-player.audio-player-compact {
padding-bottom: 154px;
}
.back-to-top-fab {
inset-inline-end: max(12px, env(safe-area-inset-right));
inset-block-end: max(12px, env(safe-area-inset-bottom));
}
.has-audio-player .back-to-top-fab {
inset-block-end: max(298px, calc(env(safe-area-inset-bottom) + 286px));
}
.has-audio-player.audio-player-compact .back-to-top-fab {
inset-block-end: max(142px, calc(env(safe-area-inset-bottom) + 130px));
}
html {
scroll-padding-top: 112px;
}
.panel {
scroll-margin-top: 112px;
padding: 20px 16px;
}
.content-grid {
gap: 24px;
padding: 32px 16px;
}
.project-grid {
grid-template-columns: 1fr;
}
.timeline article {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
.employment-panel .li-experience-group {
grid-template-columns: 1fr;
}
.li-date-aside {
flex-flow: row wrap;
gap: 4px 10px;
margin-bottom: 8px;
}
.compact-list li {
align-items: flex-start;
gap: 12px;
padding: 14px 12px;
}
.compact-list li::before {
flex-basis: 40px;
width: 40px;
height: 40px;
border-radius: 10px;
}
.impact-card {
padding: 0 0 0 14px;
background: transparent;
border: 0;
border-inline-start: 2px solid var(--line);
border-radius: 0;
}
[dir="rtl"] .impact-card {
padding: 0 14px 0 0;
}
.copy-button {
opacity: 0.85;
}
.site-footer {
border-radius: 0;
margin: 0;
}
.footer-nav-bar {
flex-direction: column;
align-items: stretch;
padding: 14px 16px;
overflow: hidden;
}
.footer-sections {
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
max-width: 100%;
}
.footer-sections::-webkit-scrollbar {
display: none;
}
.footer-content {
grid-template-columns: 1fr;
padding: 20px 16px;
}
.footer-bottom {
grid-template-columns: 1fr;
flex-direction: column;
text-align: center;
padding: 14px 16px;
}
.footer-heart {
text-align: center;
}
}
@media screen and (min-width: 561px) and (max-width: 960px) {
.case-study-hero {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.case-meta-grid {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.case-section-nav {
max-width: min(calc(100% - 24px), 480px);
padding: 4px 6px;
gap: 3px;
}
.case-section-back,
.case-section-link {
padding: 8px 12px;
font-size: 0.82rem;
gap: 6px;
min-height: 44px;
}
}
@media (max-width: 640px) {
.case-study-pagination {
grid-template-columns: 1fr;
}
.pagination-next {
justify-content: flex-start;
text-align: start;
}
}
@media (max-width: 560px) {
.case-study-shell {
width: min(100% - 16px, 980px);
}
.case-study-nav {
padding: 8px 12px;
}
.case-study-breadcrumbs {
display: block;
}
.case-listen-btn .audio-btn-text {
display: inline;
}
.case-study-card {
margin-top: 8px;
padding: 18px;
}
.case-study-hero {
grid-template-columns: 1fr;
gap: 20px;
}
.case-hero-image {
order: 2;
}
.case-meta-grid {
grid-template-columns: 1fr;
}
.case-meta-item {
flex-direction: row;
align-items: center;
gap: 12px;
}
.case-meta-item:first-child {
border-radius: 12px 12px 0 0;
}
.case-meta-item:last-child {
border-radius: 0 0 12px 12px;
}
[dir="rtl"] .case-meta-item:first-child {
border-radius: 12px 12px 0 0;
}
[dir="rtl"] .case-meta-item:last-child {
border-radius: 0 0 12px 12px;
}
.case-meta-label {
flex: 1;
}
.case-section-nav {
display: flex;
box-sizing: border-box;
width: 100%;
max-width: 440px;
margin: 0 auto 16px;
top: 8px;
padding: 3px;
gap: 2px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--line) 70%, var(--blue) 30%);
background: color-mix(in srgb, var(--surface) 92%, transparent);
backdrop-filter: blur(16px) saturate(180%);
box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
overflow: hidden;
touch-action: pan-y;
scrollbar-width: none;
}
.case-section-nav::-webkit-scrollbar {
display: none;
}
.case-section-nav-divider {
display: none;
}
.case-section-back,
.case-section-link {
flex: 1 1 0;
min-width: 0;
min-height: 44px;
padding: 6px 3px;
font-size: 0.74rem;
gap: 4px;
justify-content: center;
text-align: center;
white-space: nowrap;
border-radius: 999px;
}
.case-section-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.case-section-jump {
display: none;
}
.case-cta-wrapper {
flex-direction: column;
}
.case-live-cta,
.case-preview-toggle {
width: 100%;
justify-content: center;
}
.case-study-pagination > * {
flex: 1 1 100%;
}
.provenance-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 960px) {
.case-study-nav {
padding-inline: 0;
}
.case-study-controls {
justify-content: space-between;
}
.case-cta-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.case-cta-wrapper > .btn {
min-width: 0;
min-height: 44px;
height: auto;
padding-block: 10px;
white-space: normal;
}
}
@media (max-width: 600px) {
.case-nav-top-row {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.case-study-controls {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.case-display-modes {
display: inline-flex;
gap: 2px;
flex-shrink: 0;
}
.case-display-modes > button {
width: auto;
min-width: 44px;
min-height: 44px;
padding: 0 8px;
gap: 4px;
font-size: 0.75rem;
}
.breadcrumbs [aria-current="page"] {
max-width: 200px;
}
}
@media (max-width: 800px) {
.skill-group {
grid-template-columns: 1fr;
gap: 16px;
}
.footer-content {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-tagline-col {
grid-column: 1 / -1;
}
.impact-cards {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.employment-panel .li-experience-group {
padding: 20px 16px;
}
.li-roles-list {
margin-inline-start: 0;
}
.skills-panel .pills {
gap: 8px;
}
.skills-panel .pills > span {
font-size: 0.875rem;
}
.footer-connect-col {
grid-column: 1 / -1;
}
}
@media (max-width: 360px) {
.section-nav {
width: calc(100% - 10px);
padding: 3px;
gap: 1px;
}
.case-section-nav {
width: 100%;
padding: 2px;
gap: 1px;
}
.section-nav a,
.section-nav-link {
padding: 6px 2px;
font-size: 0.75rem;
gap: 3px;
}
.case-section-back,
.case-section-link {
padding: 6px 2px;
font-size: 0.75rem;
gap: 2px;
}
.section-nav-icon {
width: 13px;
height: 13px;
}
.case-section-icon {
width: 12px;
height: 12px;
}
.breadcrumbs [aria-current="page"] {
max-width: 140px;
}
}
[data-contrast="high"] .skip-link {
background: #000;
color: #ff0;
border: 2px solid #ff0;
border-top: none;
}
[data-contrast="high"] .skip-link:focus-visible {
outline: 2px solid #ff0;
outline-offset: 2px;
}
[data-contrast="high"],
[data-contrast="high"] * {
transition: none !important;
}
[data-contrast="high"] {
--page: #000;
--surface: #000;
--panel: #000;
--line: #fff;
--soft-line: #fff;
--text: #fff;
--muted: #86efac;
--blue: #ffd700;
--accent: #ffd700;
--project-accent: #ffd700;
--focus: #86efac;
--page-background: #000;
--hero-gradient: #000;
--hero-title: #fff;
--hero-subtitle: #86efac;
--hero-surface: #000;
--hero-role-color: #ffd700;
--hero-bio-color: #fff;
--hero-border: #fff;
--hero-contact-card-bg: #000;
--hero-contact-card-border: #fff;
--hero-tag-bg: #000;
--hero-tag-border: #fff;
--hero-tag-text: #fff;
--hero-action-btn-bg: #000;
--hero-action-btn-border: #fff;
--hero-rail-bg: #000;
--hero-rail-border: #fff;
--hero-rail-color: #fff;
--hero-btn-ghost-text: #ffd700;
--hero-btn-primary-bg: #ffd700;
--hero-btn-primary-text: #000;
--text-secondary: #fff;
--link-aaa: #ffd700;
--inner-card: #000;
--project-bg: #000;
--cert-card: #000;
--panel-primary-bg: #000;
--panel-secondary-bg: #000;
--translucent-card: #000;
--pill-bg: #000;
--date-bg: #000;
--date-text: #86efac;
--tooltip-bg: #000;
--tooltip-text: #fff;
--tooltip-border: 1.5px solid #fff;
--tooltip-shadow: none;
}
[data-contrast="high"] .hero-cta {
background: #000 !important;
border: 1px solid #ffd700 !important;
box-shadow: inset 0 0 0 1px #ffd700 !important;
color: #ffd700 !important;
}
[data-contrast="high"] .hero-cta:hover,
[data-contrast="high"] .hero-cta:focus-visible {
background: #ffd700 !important;
color: #000 !important;
}
[data-contrast="high"] .portfolio-header {
background: #000 !important;
border: 1px solid #fff !important;
box-shadow: inset 0 0 0 1px #fff !important;
}
[data-contrast="high"] .portfolio-header :is(h1, .hero-bio, .tag-pill, .contact-card-title, .contact-label, .contact-desc, .control-label, .control-state) {
color: #fff !important;
}
[data-contrast="high"] .portfolio-header .hero-role {
color: #ffd700 !important;
}
[data-contrast="high"] .tag-pill {
background: #000 !important;
border: 1px solid #fff !important;
box-shadow: inset 0 0 0 1px #fff !important;
color: #fff !important;
}
[data-contrast="high"] .tag-pill:hover,
[data-contrast="high"] .tag-pill:focus-visible {
border-color: #ffd700 !important;
box-shadow: inset 0 0 0 1px #ffd700 !important;
color: #ffd700 !important;
}
[data-contrast="high"] .hero-btn-resume {
color: #ffd700 !important;
}
[data-contrast="high"] .hero-btn-resume:hover,
[data-contrast="high"] .hero-btn-resume:focus-visible {
color: #86efac !important;
text-decoration: underline !important;
}
[data-contrast="high"] .resume-download-options {
background: #000 !important;
border: 1px solid #fff !important;
box-shadow: inset 0 0 0 1px #fff !important;
}
[data-contrast="high"] .resume-download-options > a,
[data-contrast="high"] .resume-download-options > button {
color: #fff !important;
}
[data-contrast="high"] .resume-download-options > a:hover,
[data-contrast="high"] .resume-download-options > button:hover,
[data-contrast="high"] .resume-download-options > a:focus-visible,
[data-contrast="high"] .resume-download-options > button:focus-visible {
background: #000 !important;
color: #ffd700 !important;
outline: 2px solid #ffd700 !important;
}
[data-contrast="high"] .section-nav-indicator,
[data-contrast="high"] .case-section-indicator {
background: #000 !important;
border: 1px solid #ffd700 !important;
box-shadow: inset 0 0 0 1px #ffd700 !important;
}
[data-contrast="high"] .section-nav,
[data-contrast="high"] .case-section-nav {
background: #000 !important;
border: 1px solid #fff !important;
box-shadow: inset 0 0 0 1px #fff !important;
}
[data-contrast="high"] .case-section-nav.is-stuck {
border-color: #ffd700 !important;
}
[data-contrast="high"] .section-nav a,
[data-contrast="high"] .case-section-link,
[data-contrast="high"] .case-section-back {
color: #fff !important;
}
[data-contrast="high"] .section-nav a.active,
[data-contrast="high"] .section-nav a[aria-current],
[data-contrast="high"] .case-section-link.is-active,
[data-contrast="high"] .case-section-link[aria-current] {
color: #ffd700 !important;
}
[data-contrast="high"] .section-nav a:hover,
[data-contrast="high"] .section-nav a:focus-visible,
[data-contrast="high"] .case-section-link:hover,
[data-contrast="high"] .case-section-link:focus-visible,
[data-contrast="high"] .case-section-back:hover,
[data-contrast="high"] .case-section-back:focus-visible {
color: #86efac !important;
}
[data-contrast="high"] [data-tooltip]::before {
background: #000 !important;
color: #fff !important;
border: 1.5px solid #fff !important;
box-shadow: none !important;
}
[data-contrast="high"] [data-tooltip]::after {
border-color: transparent transparent #fff !important;
}
[data-contrast="high"] .global-audio-player [data-tooltip]::after {
border-color: #fff transparent transparent !important;
}
[data-contrast="high"] .hero-contact-card {
background: #000 !important;
border: 1px solid #fff !important;
box-shadow: inset 0 0 0 1px #fff !important;
}
[data-contrast="high"] .control-switch {
border: 1px solid #fff;
box-shadow: inset 0 0 0 1px #fff;
background: #000;
}
[data-contrast="high"] [role="switch"][aria-checked="true"] .control-switch {
border-color: #ffd700;
box-shadow: inset 0 0 0 1px #ffd700;
background: #ffd700;
}
[data-contrast="high"] [role="switch"][aria-checked="true"] .control-switch > span {
background: #000;
}
[data-contrast="high"] .panel {
border: 1px solid #fff !important;
box-shadow: inset 0 0 0 1px #fff !important;
}
[data-contrast="high"] .global-audio-player,
[data-contrast="high"] .audio-player-controls button,
[data-contrast="high"] .audio-player-speed select:not(.enhanced-select-native),
[data-contrast="high"] .select-menu-trigger,
[data-contrast="high"] .select-menu-list {
border: 1px solid #fff !important;
box-shadow: inset 0 0 0 1px #fff !important;
background: #000;
color: #fff;
}
[data-contrast="high"] .audio-player-artwork,
[data-contrast="high"] .back-to-top-fab,
[data-contrast="high"] .cert-item-icon {
border: 1px solid #ffd700 !important;
box-shadow: inset 0 0 0 1px #ffd700 !important;
background: #000;
color: #ffd700;
}
[data-contrast="high"] .compact-list li,
[data-contrast="high"] .featured article {
border: 1px solid #fff !important;
box-shadow: inset 0 0 0 1px #fff !important;
backdrop-filter: none;
}
[data-contrast="high"] .pills > span {
border: 1px solid #ffd700;
color: #ffd700;
}
[data-contrast="high"] .impact-card {
background: #000 !important;
border: 1px solid #fff !important;
box-shadow: inset 0 0 0 1px #fff !important;
}
[data-contrast="high"] .impact-metric {
color: #ffd700 !important;
}
[data-contrast="high"] .compact-list a,
[data-contrast="high"] .featured h4 a {
color: #ffd700 !important;
}
[data-contrast="high"] .external-icon {
opacity: 1;
}
[data-contrast="high"] .li-company-name {
color: #ffd700;
}
[data-contrast="high"] .li-entity-link:hover .li-company-name,
[data-contrast="high"] .li-entity-link:focus-visible .li-company-name {
color: #86efac;
}
[data-contrast="high"] .compact-list a:hover,
[data-contrast="high"] .featured h4 a:hover {
color: #86efac !important;
text-decoration: underline !important;
}
[data-contrast="high"] .panel h2 {
color: #fff !important;
}
[data-contrast="high"] .panel h2 .panel-icon-box {
background: #86efac !important;
color: #000 !important;
}
[data-contrast="high"] .language-selector,
[data-contrast="high"] .display-mode-group {
border: 1px solid #fff !important;
box-shadow: inset 0 0 0 1px #fff !important;
background: #000 !important;
color: #fff !important;
border-radius: 12px !important;
}
[data-contrast="high"] .display-mode-group button,
[data-contrast="high"] .language-option {
border: 1px solid transparent !important;
border-radius: 9px !important;
color: #fff !important;
background: #000 !important;
}
[data-contrast="high"] .language-option:has(input:checked),
[data-contrast="high"] .display-mode-group button[aria-checked="true"] {
border: 1px solid #ffd700 !important;
box-shadow: inset 0 0 0 1px #ffd700 !important;
background: #ffd700 !important;
color: #000 !important;
}
[data-contrast="high"] .display-mode-group button:hover,
[data-contrast="high"] .display-mode-group button:focus-visible,
[data-contrast="high"] .language-option:hover,
[data-contrast="high"] .language-option:has(input:focus-visible) {
border-color: #ffd700 !important;
box-shadow: inset 0 0 0 1px #ffd700 !important;
color: #ffd700 !important;
}
[data-contrast="high"] .display-mode-group button[aria-checked="true"]:hover,
[data-contrast="high"] .display-mode-group button[aria-checked="true"]:focus-visible,
[data-contrast="high"] .language-option:has(input:checked):hover,
[data-contrast="high"] .language-option:has(input:checked:focus-visible) {
background: #ffd700 !important;
color: #000 !important;
}
[data-contrast="high"] .lang-toggle,
[data-contrast="high"] .print-button {
border: 1px solid #fff !important;
box-shadow: inset 0 0 0 1px #fff !important;
background: #000 !important;
color: #fff !important;
}
[data-contrast="high"] .copy-button {
border: 1px solid #fff !important;
box-shadow: inset 0 0 0 1px #fff !important;
background: #000 !important;
color: #fff !important;
border-radius: 6px !important;
opacity: 1 !important;
}
[data-contrast="high"] .copy-button:hover,
[data-contrast="high"] .copy-button:focus-visible,
[data-contrast="high"] .contact-list li:hover .copy-button,
[data-contrast="high"] .contact-list li:focus-within .copy-button,
[data-contrast="high"] .compact-list li:hover .copy-button,
[data-contrast="high"] .compact-list li:focus-within .copy-button,
[data-contrast="high"] .featured article:hover .copy-button,
[data-contrast="high"] .featured article:focus-within .copy-button {
opacity: 1 !important;
}
[data-contrast="high"] .copy-button span {
background: #000 !important;
border: 1px solid #fff !important;
}
[data-contrast="high"] .copy-button:hover,
[data-contrast="high"] .copy-button:focus-visible,
[data-contrast="high"] .lang-toggle:hover,
[data-contrast="high"] .lang-toggle:focus-visible,
[data-contrast="high"] .print-button:hover,
[data-contrast="high"] .print-button:focus-visible {
border-color: #ffd700 !important;
box-shadow: inset 0 0 0 1px #ffd700 !important;
color: #ffd700 !important;
}
[data-contrast="high"] .copy-button:hover span,
[data-contrast="high"] .copy-button:focus-visible span {
border-color: #ffd700 !important;
}
[data-contrast="high"] a:focus-visible,
[data-contrast="high"] button:focus-visible {
outline: 3px solid #86efac !important;
outline-offset: 4px !important;
box-shadow: none !important;
}
@media (forced-colors: active) {
:root {
--page: Canvas;
--surface: Canvas;
--panel: Canvas;
--line: ButtonBorder;
--soft-line: ButtonBorder;
--text: CanvasText;
--muted: HighlightText;
--blue: LinkText;
--accent: Highlight;
--focus: Highlight;
--page-background: Canvas;
--hero-title: CanvasText;
--hero-subtitle: HighlightText;
--project-bg: Canvas;
--cert-card: Canvas;
--pill-bg: Canvas;
--date-bg: Canvas;
--date-text: LinkText;
}
.theme-toggle {
display: none !important;
}
.portfolio-header {
background: Canvas;
border: 1.5px solid ButtonBorder;
box-shadow: none;
forced-color-adjust: auto;
}
.portfolio-header :is(h1, .hero-role, .hero-bio, .tag-pill, .contact-card-title, .contact-label, .control-label, .control-state) {
color: CanvasText;
}
.control-switch {
border-color: ButtonBorder;
background: ButtonFace;
}
.panel,
.compact-list li,
.featured article,
.global-audio-player,
.audio-player-controls button,
.audio-player-speed select:not(.enhanced-select-native),
.select-menu-trigger,
.select-menu-list,
.select-menu-option {
border: 1.5px solid ButtonBorder !important;
}
.hero-cta {
background: ButtonFace !important;
border: 1.5px solid ButtonBorder !important;
color: ButtonText !important;
box-shadow: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.case-hero-image:hover .case-study-image,
.project-thumbnail-link:hover .project-thumbnail {
transform: none;
}
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
}
}
[data-contrast="high"] {
--button-bg: #ffd700;
--button-text: #000;
}
[data-tooltip][data-tooltip-dismissed]::before,
[data-tooltip][data-tooltip-dismissed]::after,
html[lang] .controls-group [data-tooltip][data-tooltip-dismissed]::before,
html[lang] .controls-group [data-tooltip][data-tooltip-dismissed]::after {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
[data-contrast="high"] .section-nav a:focus-visible {
outline-offset: -4px !important;
}
@media (hover: none), (pointer: coarse), (max-width: 560px) {
.copy-button {
opacity: 1;
}
[data-tooltip]::before,
[data-tooltip]::after {
display: none !important;
}
}
[data-contrast="high"] .theme-toggle {
display: none !important;
}
[data-theme="dark"]:not([data-contrast="high"]) .portfolio-header {
color: #f0f6fc;
background:
radial-gradient(circle at 78% 22%, rgb(59 130 246 / 18%), transparent 28rem),
linear-gradient(145deg, #10223b 0%, #091422 48%, #07101d 100%);
border: 1px solid rgb(121 192 255 / 22%);
box-shadow: 0 24px 60px rgb(7 16 29 / 20%);
}
[data-theme="dark"]:not([data-contrast="high"]) .portfolio-header .identity-copy h1 {
color: #f8fbff;
}
[data-theme="dark"]:not([data-contrast="high"]) .portfolio-header .hero-role {
color: #60a5fa;
}
[data-theme="dark"]:not([data-contrast="high"]) .portfolio-header .hero-bio {
color: #d5deeb;
}
[data-theme="dark"]:not([data-contrast="high"]) .portfolio-header .avatar {
border-color: #3b82f6;
box-shadow: 0 0 0 7px rgb(59 130 246 / 10%), 0 20px 44px rgb(0 0 0 / 32%);
}
[data-theme="dark"]:not([data-contrast="high"]) .portfolio-header .tag-pill {
background: rgb(255 255 255 / 4%);
border: 1px solid rgb(203 213 225 / 24%);
color: #dbe7f5;
box-shadow: none;
}
[data-theme="dark"]:not([data-contrast="high"]) .portfolio-header .tag-pill:hover {
background: rgb(255 255 255 / 8%);
border-color: #79c0ff;
color: #79c0ff;
}
[data-theme="dark"]:not([data-contrast="high"]) .portfolio-header .hero-contact-card {
background: rgb(255 255 255 / 4%);
border: 1px solid rgb(203 213 225 / 24%);
box-shadow: none;
}
[data-theme="dark"]:not([data-contrast="high"]) .portfolio-header .contact-card-title {
color: #f8fbff;
}
[data-theme="dark"]:not([data-contrast="high"]) .portfolio-header .contact-label {
color: #f0f6fc;
}
[data-theme="dark"]:not([data-contrast="high"]) .portfolio-header .contact-desc {
color: #cbd5e1;
}
[data-theme="dark"]:not([data-contrast="high"]) .portfolio-header .contact-item:hover,
[data-theme="dark"]:not([data-contrast="high"]) .portfolio-header .contact-item:focus-within {
background: rgb(255 255 255 / 7%);
}
[data-theme="dark"]:not([data-contrast="high"]) .portfolio-header .contact-link-main:hover .contact-label,
[data-theme="dark"]:not([data-contrast="high"]) .portfolio-header .contact-link-main:focus-visible .contact-label {
color: #79c0ff;
}
[data-theme="dark"]:not([data-contrast="high"]) :is(.portfolio-header, .case-study-controls) .language-selector,
[data-theme="dark"]:not([data-contrast="high"]) :is(.display-mode-group, .case-display-modes) {
background: rgb(7 16 29 / 32%);
border-color: rgb(203 213 225 / 18%);
}
[data-theme="dark"]:not([data-contrast="high"]) .portfolio-header .language-selector-icon {
color: #8fcaff;
}
[data-theme="dark"]:not([data-contrast="high"]) :is(.portfolio-header, .case-study-controls) .language-option,
[data-theme="dark"]:not([data-contrast="high"]) :is(.display-mode-group, .case-display-modes) button {
color: #cbd5e1;
}
[data-theme="dark"]:not([data-contrast="high"]) :is(.portfolio-header, .case-study-controls) .language-option:hover,
[data-theme="dark"]:not([data-contrast="high"]) :is(.display-mode-group, .case-display-modes) button:hover {
color: #fff;
background: rgb(255 255 255 / 8%);
border-color: rgb(255 255 255 / 15%);
}
[data-theme="dark"]:not([data-contrast="high"]) :is(.portfolio-header, .case-study-controls) .language-option:has(input:focus-visible),
[data-theme="dark"]:not([data-contrast="high"]) :is(.display-mode-group, .case-display-modes) button:focus-visible {
outline: 2px solid #60a5fa;
outline-offset: 2px;
}
[data-theme="dark"]:not([data-contrast="high"]) :is(.portfolio-header, .case-study-controls) .language-option:has(input:checked),
[data-theme="dark"]:not([data-contrast="high"]) :is(.display-mode-group, .case-display-modes) button[aria-checked="true"] {
background: #1d4f91;
color: #fff;
border: 1px solid rgb(121 192 255 / 35%);
box-shadow: 0 1px 4px rgb(0 0 0 / 25%), inset 0 1px 0 rgb(255 255 255 / 15%);
}
@media (prefers-reduced-motion: no-preference) {
body {
transition:
background-color var(--motion-fast) var(--ease-standard),
color var(--motion-fast) var(--ease-standard);
}
:where(
.btn,
.hero-cta,
.audio-player-controls button,
.device-btn,
.skill-btn,
.display-mode-group button,
.copy-button,
.pagination-card,
.case-nav-back-pill,
.language-option,
.tag-pill,
.btn-secondary,
.resume-download-toggle
):active {
transform: scale(0.97);
transition: none;
}
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
.project-card,
.panel,
.provenance-card,
.featured article {
transition:
transform var(--motion-normal) var(--ease-standard),
box-shadow var(--motion-normal) var(--ease-standard),
border-color var(--motion-normal) var(--ease-standard);
}
.project-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 28px rgb(0 0 0 / 12%);
}
.panel:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgb(0 0 0 / 7%);
}
.provenance-card:hover {
transform: translateY(-2px);
border-color: var(--blue);
}
.project-card:focus-within {
transform: none;
transition: none;
}
.project-thumbnail {
transition: transform var(--motion-slow) var(--ease-standard);
}
.project-thumbnail-link:hover .project-thumbnail {
transform: scale(1.025);
}
.contact-link-main .contact-icon {
transition: transform var(--motion-normal) var(--ease-standard);
}
.contact-link-main:hover .contact-icon {
transform: translateY(-2px);
}
.skill-btn {
transition:
transform var(--motion-fast) var(--ease-standard),
background-color var(--motion-fast) var(--ease-standard),
border-color var(--motion-fast) var(--ease-standard);
}
.skill-btn:hover {
transform: translateY(-1px);
}
}
@media print {
@page {
size: a4;
margin: 15mm 14mm 14mm;
@top-left {
content: "";
font: 500 8pt Aptos, Arial, sans-serif;
color: #526172;
vertical-align: top;
margin-top: 5mm;
}
@top-right {
content: "Ahmed Mahdy | UX Designer & Data Visualizer";
font: 650 8pt Aptos, Arial, sans-serif;
color: #25364a;
vertical-align: top;
margin-top: 5mm;
}
@bottom-center {
content: "Page " counter(page) " of " counter(pages);
font: 500 8pt Aptos, Arial, sans-serif;
color: #526172;
}
}
@page resume-ar {
@top-right {
content: "أحمد مهدي | مصمم تجربة المستخدم ومصور البيانات";
font-family: "Noto Sans Arabic Variable", Arial, sans-serif;
direction: rtl;
}
@bottom-center {
content: "صفحة " counter(page) " من " counter(pages);
font-family: "Noto Sans Arabic Variable", Arial, sans-serif;
}
}
html[lang="ar"] body { page: resume-ar; }
*, *::before, *::after {
animation: none !important;
box-shadow: none !important;
text-shadow: none !important;
transition: none !important;
}
html, body { background: #fff !important; color: #182230 !important; }
body {
margin: 0 !important;
padding: 0 !important;
font-family: Aptos, Arial, sans-serif !important;
font-size: 10.5pt !important;
line-height: 1.42 !important;
}
html[lang="ar"] body,
html[lang="ar"] body * {
font-family: "Noto Sans Arabic Variable", Arial, sans-serif !important;
letter-spacing: normal !important;
}
a {
color: #173f68 !important;
text-decoration: underline !important;
text-decoration-thickness: 0.5pt !important;
text-underline-offset: 1.5pt !important;
}
p, li { orphans: 3; widows: 3; }
.ambient-particles,
.hero-controls-rail,
.controls-group,
.hero-contact-card,
.section-nav,
.hero-ctas,
.avatar-wrap,
.panel-subtitle,
.panel-icon-box,
.audio-play-btn,
.global-audio-player,
.back-to-top-fab,
.copy-button,
.external-icon,
.project-thumbnail-link,
.project-actions,
.project-toggle,
.skill-group-icon,
.skill-item-icon,
.cert-item-icon,
.cert-count-badge,
.cert-desc,
.credential-meta-icon,
.cert-external-link,
.li-company-logo,
.li-role-dot,
.impact-icon,
.impact-icon-box,
.degree-badge,
.print-qr-card,
.site-footer,
.skip-link { display: none !important; }
.resume-shell,
.resume-card,
.portfolio-header {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: #fff !important;
box-shadow: none !important;
}
.hero {
display: block !important;
min-height: auto !important;
margin: 0 0 6mm !important;
padding: 0 0 4.5mm !important;
border: 0 !important;
border-bottom: 1.25pt solid #173f68 !important;
background: #fff !important;
}
.hero-identity, .identity-copy { display: block !important; width: 100% !important; }
h1 {
margin: 0 !important;
color: #102a43 !important;
font-size: 25pt !important;
font-weight: 760 !important;
line-height: 1.08 !important;
letter-spacing: -0.02em !important;
}
.hero-role {
margin: 2px 0 0 !important;
color: #173f68 !important;
font-size: 13pt !important;
font-weight: 650 !important;
}
.hero-bio, .tags { display: none !important; }
.print-contact {
display: flex !important;
flex-wrap: wrap !important;
gap: 2px 10px !important;
margin: -3mm 0 5mm !important;
padding: 0 0 4mm !important;
border-bottom: 0.5pt solid #b9c5d2 !important;
color: #34495e !important;
font-size: 9.4pt !important;
font-style: normal !important;
}
.print-contact > *:not(:last-child)::after {
content: " | ";
margin-inline-start: 10px;
}
body[data-page="case-study"] .case-study-header-bar,
body[data-page="case-study"] .case-study-nav,
body[data-page="case-study"] .case-study-breadcrumbs,
body[data-page="case-study"] .case-section-nav,
body[data-page="case-study"] .case-section-jump,
body[data-page="case-study"] .case-cta-wrapper,
body[data-page="case-study"] .case-study-pagination,
body[data-page="case-study"] .live-embed-viewer,
body[data-page="case-study"] dialog { display: none !important; }
body[data-page="case-study"] .case-study-card,
body[data-page="case-study"] .case-study-shell {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: #fff !important;
}
body[data-page="case-study"] .case-study-section,
body[data-page="case-study"] .case-accordion {
opacity: 1 !important;
transform: none !important;
break-inside: auto !important;
}
body:not([data-page="case-study"]) .resume-card { display: none !important; }
.print-resume-document {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: #182230 !important;
font-size: 11.5pt !important;
}
.print-resume-document .print-resume-header {
margin: 0 0 5mm !important;
padding: 0 0 4mm !important;
border-bottom: 1.25pt solid #173f68 !important;
}
.print-resume-document .print-resume-name {
margin: 0 !important;
color: #102a43 !important;
font-size: 22pt !important;
font-weight: 760 !important;
line-height: 1.08 !important;
letter-spacing: -0.02em !important;
}
.print-resume-document .print-resume-role {
margin: 2px 0 2.5mm !important;
color: #173f68 !important;
font-size: 11.5pt !important;
font-weight: 650 !important;
}
.print-resume-document address {
display: flex !important;
flex-wrap: wrap !important;
gap: 1mm 3mm !important;
color: #34495e !important;
font-size: 8.4pt !important;
font-style: normal !important;
}
.print-resume-document address > *:not(:last-child)::after {
content: " | ";
margin-inline-start: 3mm;
color: #8391a1;
}
.print-resume-document > section {
margin: 0 0 4mm !important;
break-inside: auto !important;
}
.print-resume-document > section > h2 {
margin: 0 0 2mm !important;
padding: 0 0 1mm !important;
border-bottom: 0.75pt solid #91a4b7 !important;
color: #102a43 !important;
font-size: 11.5pt !important;
font-weight: 760 !important;
letter-spacing: 0.035em !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
break-after: avoid !important;
}
.print-resume-document > section > p {
margin: 0 !important;
color: #27384a !important;
}
.print-skill-list { margin: 0 !important; }
.print-skill-list > div {
display: block !important;
padding: 1.6mm 0 !important;
border-bottom: 0.35pt solid #d4dce4 !important;
break-inside: avoid !important;
}
.print-skill-list dt {
display: inline !important;
color: #263b50 !important;
font-weight: 700 !important;
}
.print-skill-list dt::after { content: ": "; }
.print-skill-list dd { display: inline !important; margin: 0 !important; color: #27384a !important; }
.print-role {
margin: 0 0 4mm !important;
break-inside: avoid !important;
}
.print-role h3,
.print-projects h3,
.print-education h3 {
margin: 0 !important;
color: #182230 !important;
font-size: 11pt !important;
font-weight: 730 !important;
line-height: 1.3 !important;
}
.print-role .print-meta,
.print-education p {
margin: 0.4mm 0 1mm !important;
color: #526172 !important;
font-size: 9.3pt !important;
font-weight: 600 !important;
}
.print-role ul {
margin: 0 !important;
padding-inline-start: 5mm !important;
}
.print-role li { margin: 0 0 1mm !important; color: #27384a !important; }
.print-projects { break-before: page !important; }
.print-projects article {
margin: 0 0 3mm !important;
padding-inline-start: 4mm !important;
border-inline-start: 1.5pt solid #9bb0c5 !important;
break-inside: avoid !important;
}
.print-projects article p {
margin: 0.4mm 0 0 !important;
color: #27384a !important;
font-size: 11.5pt !important;
}
.print-education { margin: 0 0 3mm !important; break-inside: avoid !important; }
.print-certifications {
display: block !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.print-certifications li { margin-bottom: 3mm !important; break-inside: avoid !important; }
.print-certifications a { display: block !important; color: #182230 !important; font-weight: 700 !important; }
.print-certifications span { display: block !important; color: #526172 !important; font-size: 9pt !important; }
}