:root {
color-scheme: light;
--page: #e5e1d8;
--surface: var(--card-surface);
--panel: var(--card-surface);
--card-surface: #f0e7d9;
--line: #7c8796;
--soft-line: rgb(38 49 63 / 7%);
--text: #26313f;
--muted: #303c4b;
--blue: #004360;
--accent: #004360;
--project-accent: #004360;
--link-aaa: #003f5c;
--focus: #005b8f;
--text-secondary: #2c3a4a;
--hero-title: #26313f;
--hero-subtitle: #004360;
--hero-role-color: #004360;
--hero-bio-color: #303c4b;
--hero-surface: var(--card-surface);
--hero-border: rgb(203 213 225 / 70%);
--hero-shadow: 0 10px 30px rgb(26 35 50 / 5%);
--hero-contact-card-bg: var(--card-surface);
--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: var(--pill-bg);
--hero-tag-border: rgb(26 35 50 / 12%);
--hero-tag-text: #26313f;
--hero-btn-primary-bg: #004360;
--hero-btn-primary-text: #fff;
--hero-btn-ghost-text: #004360;
--hero-rail-bg: var(--card-surface);
--hero-rail-border: rgb(26 35 50 / 12%);
--hero-rail-color: #354254;
--hero-action-btn-bg: var(--pill-bg);
--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:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.16' filter='url(%23grain)'/%3E%3C/svg%3E"),
var(--page);
--card-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.04' filter='url(%23grain)'/%3E%3C/svg%3E");
--card-edge-shadow: inset 0 1px 0 rgb(255 255 255 / 30%);
--card-surface-shadow: var(--card-edge-shadow), 0 3px 12px rgb(26 35 50 / 4%), 0 1px 2px rgb(26 35 50 / 2%);
--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: var(--card-surface);
--panel-primary-bg: var(--panel);
--panel-secondary-bg: var(--hero-surface);
--employment-card-bg: transparent;
--inner-card: var(--card-surface);
--translucent-card: var(--card-surface);
--cert-card: var(--card-surface);
--pill-bg: #e7ddce;
--date-bg: var(--pill-bg);
--date-text: #354254;
--copy-bg: rgb(255 255 255 / 24%);
--shadow: 0 25px 50px rgb(26 35 50 / 18%);
--logo-bg: #fff;
--button-bg: #004360;
--button-text: #fff;
--target-min: 44px;
--control-radius: 8px;
--border-control: color-mix(in srgb, var(--line) 35%, transparent);
--shadow-control: 0 2px 8px rgb(0 0 0 / 8%);
--sticky-nav-surface: #fbf8f2;
--sticky-nav-shadow: 0 8px 24px rgb(26 35 50 / 18%), 0 2px 6px rgb(26 35 50 / 10%);
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-section: clamp(2rem, 4vw, 4.5rem);
--section-rule: color-mix(in srgb, var(--text) 8%, var(--surface));
--navigation-clearance: 112px;
--player-clearance: 24px;
--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-section: 1rem;
--radius-pill: 999px;
--radius-copy: 7px;
--radius-tooltip: 6px;
--shadow-1: 0 4px 8px rgb(0 0 0 / 13%);
--shadow-2: 0 16px 40px rgb(0 0 0 / 25%);
--shadow-card: 0 3px 12px rgb(26 35 50 / 4%);
--shadow-card-hover: 0 12px 28px rgb(26 35 50 / 12%);
--shadow-preview: 0 12px 24px rgb(0 0 0 / 16%);
--shadow-select: 0 4px 14px rgb(0 0 0 / 8%);
--shadow-select-raised: 0 8px 22px rgb(0 0 0 / 12%);
--shadow-rail: 0 2px 8px rgb(0 0 0 / 6%);
--shadow-control-hover: 0 4px 12px rgb(0 0 0 / 12%);
--shadow-skip-link: 0 4px 12px rgb(0 0 0 / 25%);
--motion-fast: 120ms;
--motion-normal: 180ms;
--motion-slow: 260ms;
--motion-reveal: 320ms;
--motion-language-arrival: 520ms;
--motion-language-sequence: 720ms;
--motion-language-card: 480ms;
--motion-language-stagger: 50ms;
--motion-language-action: 360ms;
--motion-language-action-stagger: 20ms;
--motion-language-detail: 300ms;
--motion-tooltip: 150ms;
--motion-switch: 560ms;
--ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
--ease-emphasized: cubic-bezier(0.22, 0.08, 0.22, 1);
--ease-language-arrival: cubic-bezier(0.2, 0.65, 0.3, 1);
--ease-switch: cubic-bezier(0.45, 0, 0.2, 1);
--ease-loop: cubic-bezier(0.45, 0, 0.55, 1);
--ease-tooltip: var(--ease-standard);
--z-navigation: 10;
--z-progress: 11;
--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"] {
color-scheme: dark;
--card-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.07' filter='url(%23grain)'/%3E%3C/svg%3E");
--card-edge-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
--card-surface-shadow: var(--card-edge-shadow), 0 6px 20px rgb(0 0 0 / 18%);
--page: #0d1117;
--surface: #161b22;
--panel: #161b22;
--card-surface: #161b22;
--sticky-nav-surface: #202936;
--sticky-nav-shadow: 0 8px 24px rgb(0 0 0 / 40%), 0 2px 6px rgb(0 0 0 / 24%);
--section-rule: rgb(240 246 252 / 7%);
--logo-bg: #fff;
--line: #6e7681;
--soft-line: rgb(240 246 252 / 6%);
--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;
}
[hidden] {
display: none !important;
}
details:not([open]) > :not(summary) {
display: none;
}
img,
video,
svg {
max-inline-size: 100%;
block-size: auto;
}
h1,
h2,
h3,
h4,
p,
li,
dd {
overflow-wrap: anywhere;
}
html {
background: var(--page);
scroll-padding-top: var(--navigation-clearance);
scroll-padding-bottom: var(--player-clearance);
}
@media (prefers-reduced-motion: no-preference) {
html[data-scripted] {
scroll-behavior: smooth;
}
}
body {
position: relative;
margin: 0;
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: opacity;
transition-duration: var(--motion-fast);
transition-timing-function: var(--ease-standard);
}
body::selection {
color: #fff;
background: var(--blue);
}
@supports (content-visibility: auto) {
@media screen {
.content-grid > .panel:not(.projects-panel),
.narration-library {
content-visibility: auto;
contain-intrinsic-block-size: auto 600px;
}
.content-grid > .panel:target,
.content-grid > .panel:focus-within,
.narration-library:focus-within {
content-visibility: visible;
}
html:has(:target) .content-grid > .panel,
html:has(:target) .narration-library {
content-visibility: visible;
}
}
}
.icon-sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
a {
color: inherit;
cursor: pointer;
text-decoration: none;
transition: color 0s var(--ease-standard);
}
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 var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
: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 0s var(--ease-standard),
border-color 0s var(--ease-standard),
box-shadow 0s var(--ease-standard);
}
.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", "Segoe UI", tahoma, 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: translateY(4px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) 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;
}
.connection-notice {
margin: 0 0 var(--space-4);
padding: var(--space-3) var(--space-4);
border-inline-start: 3px solid var(--blue);
background: var(--surface);
color: var(--text);
font-size: var(--text-sm);
}
.preview-retry {
margin: var(--space-3) var(--space-4);
}
.feedback-card {
display: grid;
grid-template-columns: 2.25rem minmax(0, 1fr);
align-items: start;
gap: var(--space-3);
padding: var(--space-4);
margin: var(--space-4);
border: 1px solid var(--border-control);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--text);
text-align: start;
}
.feedback-content { display: grid; gap: var(--space-3); min-inline-size: 0; }
.feedback-card .embed-help { padding: 0; background: transparent; }
.feedback-copy { font-size: var(--text-sm); line-height: 1.6; }
.feedback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.feedback-actions .btn { min-block-size: var(--target-min); margin: 0; }
.feedback-direct { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: var(--blue); text-decoration: underline; text-underline-offset: 0.2em; }
.feedback-mark { position: relative; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 1px solid var(--border-control); border-radius: var(--radius-sm); color: var(--text); font-size: 1.125rem; font-weight: 700; }
.feedback-card[data-state="error"],
.feedback-card[data-state="offline"],
.feedback-card[data-state="slow"] { border-inline-start: 3px solid var(--color-warning); }
.feedback-card[data-state="ready"] .feedback-mark { color: var(--blue); }
.feedback-card.image-fallback { margin: var(--space-3); }
.feedback-card[data-state="loading"] .feedback-mark::after,
.global-audio-player:is([data-state="loading"], [data-state="buffering"]) .audio-player-artwork::after {
content: "";
position: absolute;
inset: 7px;
border: 2px solid currentcolor;
border-inline-end-color: transparent;
border-radius: 50%;
}
.audio-player-artwork { position: relative; }
.audio-player-feedback { margin: 0; padding: var(--space-3); border-inline-start: 3px solid var(--color-warning); background: var(--pill-bg); color: var(--text); font-size: var(--text-sm); line-height: 1.6; }
.copy-toast[data-tone="error"] { border-inline-start: 3px solid var(--color-warning); }
.copy-toast[data-tone="success"] { border-inline-start: 3px solid var(--blue); }
.feedback-inline::before { content: "!"; display: inline-grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; margin-inline-end: var(--space-2); font-weight: 700; }
.feedback-inline[data-state="loading"]::before { content: ""; vertical-align: middle; border: 2px solid currentcolor; border-inline-end-color: transparent; border-radius: 50%; }
[aria-busy="true"] {
cursor: progress;
}
@media (prefers-reduced-motion: no-preference) {
:is(dialog[open], .resume-download-menu[open] .resume-download-options) {
animation: dropdown-reveal var(--motion-normal) var(--ease-emphasized);
}
.global-audio-player:not([hidden]),
.walkthrough-step[open] > p {
animation: project-fade-in var(--motion-normal) var(--ease-emphasized);
}
}
.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: var(--radius-md);
background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, var(--blue)), var(--surface));
box-shadow: var(--shadow-select);
color: var(--text);
font: inherit;
font-weight: 700;
line-height: 1.35;
text-align: start;
cursor: pointer;
transition: border-color 0s var(--ease-standard), box-shadow 0s 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), var(--shadow-select-raised);
}
.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: var(--radius-md);
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: var(--radius-sm);
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: var(--radius-sm);
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;
}
.lang-toggle,
.print-button {
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: var(--shadow-rail);
cursor: pointer;
transition:
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard),
color 0s var(--ease-standard);
}
.lang-toggle:hover,
.print-button:hover,
.lang-toggle:focus-visible,
.print-button:focus-visible {
transform: none;
background: var(--pill-bg);
border-color: var(--blue);
color: var(--blue);
box-shadow: var(--shadow-control-hover);
}
.lang-toggle svg,
.print-button 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;
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: var(--radius-copy);
cursor: pointer;
opacity: 1;
z-index: var(--z-popover);
transition:
opacity var(--motion-fast) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard),
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard),
color 0s var(--ease-standard);
}
.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: var(--radius-copy);
transition:
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard);
}
.copy-button svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentcolor;
stroke-width: 2;
transition:
transform var(--motion-fast) var(--ease-standard),
color 0s var(--ease-standard);
}
.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);
z-index: calc(var(--z-popover) + 1);
}
.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: 0;
padding: var(--space-6) 0;
background: transparent;
border: 0;
border-block-start: 1px solid var(--section-rule);
border-radius: 0;
box-shadow: none;
}
.panel:target {
animation: targetPanel 700ms var(--ease-emphasized);
}
.panel h2 {
color: var(--text);
display: flex;
align-items: center;
min-width: 0;
max-width: 100%;
gap: 8px;
margin: 0 0 var(--space-3);
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
overflow-wrap: anywhere;
}
.panel h2 > [data-translate] {
min-width: 0;
}
.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: transparent;
border: 1px solid var(--soft-line);
border-radius: var(--radius-sm);
color: var(--text);
font-size: 0.9rem;
font-weight: 500;
transition: background-color 0s var(--ease-standard), border-color 0s var(--ease-standard), color 0s 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: max(20px, calc(var(--player-clearance, 24px) + var(--update-clearance, 0px)), env(safe-area-inset-bottom));
z-index: var(--z-toast);
padding: 10px 14px;
color: var(--text);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
opacity: 0;
transform: translateY(8px);
transition:
opacity var(--motion-normal) var(--ease-standard),
transform var(--motion-normal) var(--ease-standard);
}
.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(var(--player-clearance, 24px), env(safe-area-inset-bottom));
display: flex;
flex-wrap: wrap;
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 > span {
flex: 1 1 12rem;
min-inline-size: 0;
overflow-wrap: anywhere;
}
.app-update[hidden] {
display: none;
}
.app-update button {
max-inline-size: 100%;
min-inline-size: 0;
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;
overflow-wrap: anywhere;
white-space: normal;
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);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.01em;
border-radius: var(--radius-tooltip);
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 9999;
transition:
opacity var(--motion-tooltip) var(--ease-tooltip),
transform var(--motion-tooltip) var(--ease-tooltip),
visibility var(--motion-tooltip) var(--ease-tooltip);
}
[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 var(--motion-tooltip) var(--ease-tooltip),
transform var(--motion-tooltip) var(--ease-tooltip),
visibility var(--motion-tooltip) var(--ease-tooltip);
}
[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;
}
[dir="rtl"] .copy-button[data-tooltip]::before,
html[lang="ar"] .copy-button[data-tooltip]::before {
left: 0;
right: auto;
transform: translateY(-4px);
}
[dir="rtl"] .copy-button[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::before,
html[lang="ar"] .copy-button[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::before {
transform: translateY(0);
}
[dir="rtl"] .copy-button[data-tooltip]::after,
html[lang="ar"] .copy-button[data-tooltip]::after {
left: 17px;
right: auto;
transform: translateY(-4px);
}
[dir="rtl"] .copy-button[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::after,
html[lang="ar"] .copy-button[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::after {
transform: translateY(0);
}
[dir="ltr"] .copy-button[data-tooltip]::before,
html[lang="en"] .copy-button[data-tooltip]::before {
right: 0;
left: auto;
transform: translateY(-4px);
}
[dir="ltr"] .copy-button[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::before,
html[lang="en"] .copy-button[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::before {
transform: translateY(0);
}
[dir="ltr"] .copy-button[data-tooltip]::after,
html[lang="en"] .copy-button[data-tooltip]::after {
right: 17px;
left: auto;
transform: translateY(-4px);
}
[dir="ltr"] .copy-button[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::after,
html[lang="en"] .copy-button[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::after {
transform: translateY(0);
}
.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 var(--radius-sm) var(--radius-sm);
z-index: 9999;
font-weight: 600;
transition: transform var(--motion-normal) var(--ease-standard);
}
.skip-link:focus-visible {
transform: translate(-50%, 0);
outline: none;
box-shadow: var(--shadow-skip-link);
}
[dir="rtl"] .external-icon {
transform: translateY(0.08em) scaleX(-1);
}
.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: var(--radius-sm);
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 0s var(--ease-standard),
border-color 0s var(--ease-standard),
color 0s var(--ease-standard),
box-shadow 0s var(--ease-standard);
}
.case-study-controls .lang-toggle:hover,
.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: var(--shadow-control);
}
.case-study-controls .lang-toggle > span:first-child {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.audio-play-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 48px;
inline-size: 48px;
block-size: 48px;
flex: 0 0 48px;
justify-content: center;
max-inline-size: 100%;
padding: 0;
background: var(--button-bg);
border: 1px solid var(--button-bg);
border-radius: var(--radius-sm);
color: var(--button-text);
font-family: inherit;
font-size: var(--text-sm);
font-weight: 700;
line-height: 1.4;
text-align: start;
box-shadow: var(--shadow-control);
cursor: pointer;
box-sizing: border-box;
transition:
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard),
color 0s 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(--button-bg) 88%, #000);
border-color: var(--focus);
color: var(--button-text);
}
.audio-play-btn.is-playing {
background: #047857;
color: #fff;
border-color: #047857;
}
.audio-icon {
display: block;
flex: 0 0 auto;
width: 20px;
height: 20px;
stroke: currentcolor;
stroke-width: 2;
fill: none;
}
.audio-play-btn[data-tooltip]::before {
inset-inline: auto 0;
max-inline-size: min(18rem, calc(100vw - 48px));
white-space: normal;
inline-size: max-content;
transform: translateY(-4px);
}
.audio-play-btn[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::before {
transform: translateY(0);
}
.global-audio-player {
position: fixed;
z-index: var(--z-popover);
inset: auto auto max(16px, env(safe-area-inset-bottom)) 50%;
display: grid;
grid-template-columns: minmax(0, 1fr);
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: var(--radius-section);
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 var(--ease-loop) 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 var(--ease-loop) infinite;
}
.audio-waveform-bars .bar:nth-child(2) {
height: 95%;
animation: waveformBounce 1.1s var(--ease-loop) infinite 0.2s;
}
.audio-waveform-bars .bar:nth-child(3) {
height: 65%;
animation: waveformBounce 0.95s var(--ease-loop) infinite 0.1s;
}
.audio-waveform-bars .bar:nth-child(4) {
height: 85%;
animation: waveformBounce 1.25s var(--ease-loop) 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: var(--radius-pill);
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: var(--radius-md);
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 0s var(--ease-standard), border-color 0s var(--ease-standard), color 0s var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.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"] .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, calc(var(--player-clearance, 24px) + var(--update-clearance, 0px)), env(safe-area-inset-bottom));
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 48px;
min-height: 48px;
max-width: calc(100vw - 32px);
padding: 10px 14px;
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;
font: inherit;
font-size: 0.875rem;
font-weight: 700;
transition: inset-block-end var(--motion-normal) var(--ease-standard), background-color 0s var(--ease-standard), border-color 0s var(--ease-standard), color 0s var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.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(var(--player-clearance, 24px) + var(--update-clearance, 0px)));
}
.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: var(--radius-sm);
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 0s var(--ease-standard),
border-color 0s var(--ease-standard),
color 0s var(--ease-standard),
transform var(--motion-fast) var(--ease-standard),
box-shadow 0s var(--ease-standard);
}
.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"] .btn-secondary,
[data-theme="dark"] .back-link {
border-color: var(--blue);
color: var(--blue);
}
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-secondary:focus-visible,
[data-theme="dark"] .back-link:hover,
[data-theme="dark"] .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: var(--radius-sm);
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 0s var(--ease-standard), border-color 0s var(--ease-standard), color 0s 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;
}
[data-theme="light"] :is(.btn-secondary, .select-menu-trigger, .back-to-top-fab) {
background: var(--card-surface);
color: var(--blue);
}
.controls-group {
direction: ltr;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: clamp(20px, 5vw, 72px);
}
.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 {
direction: ltr;
position: relative;
display: flex;
align-items: center;
gap: 3px;
min-width: 0;
margin: 0;
padding: 3px;
border: 1px solid var(--border-control);
border-radius: var(--radius-md);
background: var(--hero-action-btn-bg);
color: var(--muted);
transition:
background-color 0s var(--ease-standard),
border-color 0s 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: var(--target-min);
padding: 0 10px;
border: 1px solid transparent;
border-radius: var(--control-radius);
color: var(--muted);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
box-sizing: border-box;
transition:
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard),
color 0s 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: var(--text);
background: rgb(0 94 135 / 8%);
}
.language-option:active > span {
transform: scale(0.97);
}
.language-option:has(input:focus-visible) {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
html[lang] .language-selector .language-option[lang="en"] {
font-family: "Inter Variable", system-ui, sans-serif;
}
html[lang] .language-selector .language-option[lang="ar"] {
font-family: "Noto Sans Arabic Variable", "Segoe UI", tahoma, sans-serif;
}
@media (max-width: 700px) {
.language-selector .language-option[lang="en"] { inline-size: 3.375rem; }
.language-selector .language-option[lang="ar"] { inline-size: 2.75rem; }
}
.language-selector[aria-busy="true"]::after {
content: "";
position: absolute;
inset-inline: 6px;
inset-block-end: 1px;
block-size: 2px;
border-radius: 2px;
background: var(--blue);
transform-origin: center;
animation: language-progress 700ms var(--ease-loop) infinite alternate;
pointer-events: none;
}
@keyframes language-progress {
from { transform: scaleX(0.25); opacity: 0.6; }
to { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.language-selector[aria-busy="true"]::after { animation: none; }
}
.control-label-short { display: none; }
.theme-control {
width: 9.5rem;
position: relative;
isolation: isolate;
display: none;
grid-template-columns: repeat(2, minmax(44px, 1fr));
gap: 3px;
flex: 0 0 auto;
align-items: stretch;
max-inline-size: 100%;
padding: 3px;
border: 1px solid var(--border-control);
border-radius: var(--radius-md);
background: var(--hero-action-btn-bg);
}
[data-scripted] .theme-control { display: inline-grid; }
[data-scripted]:not([data-theme-ready]) .theme-control { visibility: hidden; }
.theme-control .theme-option {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
inline-size: auto;
block-size: auto;
min-inline-size: 44px;
min-block-size: 44px;
margin: 0;
padding: 0 10px;
border: 1px solid transparent;
border-radius: var(--control-radius);
background: transparent;
color: var(--muted);
box-shadow: none;
font: inherit;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: transform 100ms var(--ease-standard);
}
.theme-control .theme-option svg {
inline-size: 16px;
block-size: 16px;
flex-shrink: 0;
fill: none;
stroke: currentcolor;
stroke-width: 1.8;
}
.theme-control .theme-option[aria-checked="true"] {
background: var(--button-bg);
border-color: var(--button-bg);
color: var(--button-text);
box-shadow: 0 1px 4px rgb(0 94 135 / 30%);
}
.theme-control .theme-option > span { font: inherit; }
.theme-control .theme-option[aria-checked="true"] > span { color: #fff; }
.theme-option[aria-checked="true"] svg { animation: theme-choice-settle var(--motion-normal) var(--ease-standard); }
@keyframes theme-choice-settle {
from { opacity: 0.8; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
.theme-control .theme-option[aria-checked="false"]:hover {
background: var(--pill-bg);
color: var(--text);
}
.theme-control .theme-option:active svg { transform: scale(0.94); }
.theme-control .theme-option:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 700px) {
.theme-control { width: 8.5rem; }
.theme-control .theme-option { gap: 4px; padding-inline: 6px; font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
.theme-control .theme-option { transition: none; }
.theme-option[aria-checked="true"] svg { animation: none; }
}
.recordings-entry {
display: grid;
grid-template-columns: 56px minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-6);
margin-block: var(--space-8) 0;
padding: clamp(20px, 3vw, 32px);
border: 1px solid var(--section-rule);
border-radius: var(--radius-lg);
background: var(--surface);
}
.recordings-entry-icon {
display: grid;
place-items: center;
flex: 0 0 56px;
block-size: 56px;
border: 1px solid var(--section-rule);
border-radius: var(--radius-lg);
color: var(--blue);
background: var(--hero-surface);
}
.recordings-entry-icon svg { inline-size: 32px; }
.recordings-entry-copy { min-inline-size: 0; }
.recordings-entry h2 { margin: 0; font-size: 1.125rem; }
.recordings-entry p { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-sm); }
.recordings-open {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-block-size: var(--target-min);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--button-bg);
border-radius: var(--radius-sm);
color: var(--button-text);
background: var(--button-bg);
font-size: var(--text-sm);
font-weight: 650;
line-height: 1.5;
text-align: center;
}
.recordings-open:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.recordings-shell { padding-block-start: var(--space-4); }
.recordings-hero {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(200px, 0.8fr);
align-items: center;
gap: var(--space-8);
padding: clamp(1.5rem, 5vw, 3.5rem);
margin-block: var(--space-4) var(--space-12);
border: 1px solid var(--hero-border);
border-radius: var(--radius-section);
background: var(--panel-primary-bg);
}
.recordings-eyebrow {
margin: 0 0 var(--space-4);
color: var(--blue);
font-size: var(--text-xs);
font-weight: 750;
letter-spacing: 0.1em;
}
html[lang="ar"] .recordings-eyebrow { letter-spacing: normal; }
.recordings-hero h1 {
max-inline-size: 15ch;
margin: 0;
font-size: clamp(2rem, 4.5vw, 3.5rem);
font-weight: 750;
line-height: 1.18;
letter-spacing: -0.035em;
}
html[lang="ar"] .recordings-hero h1 { line-height: 1.6; letter-spacing: normal; }
.recordings-intro { max-inline-size: 48ch; margin-block: var(--space-6); color: var(--muted); }
.recordings-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.recordings-tags span { padding: var(--space-1) var(--space-3); border: 1px solid var(--section-rule); border-radius: var(--radius-pill); font-size: var(--text-xs); background: var(--surface); }
.recordings-art { color: var(--blue); }
.recordings-art svg { display: block; inline-size: 100%; }
.recordings-art-ring { stroke: var(--section-rule); }
.recordings-art-wave { opacity: 0.3; }
.recordings-art-play { fill: var(--surface); stroke: var(--section-rule); }
.recordings-layout {
display: grid;
grid-template-columns: 230px minmax(0, 1fr);
align-items: start;
gap: var(--space-12);
}
.recordings-index {
position: sticky;
inset-block-start: var(--space-6);
max-block-size: calc(100dvh - var(--space-12) - var(--player-clearance));
overflow-y: auto;
padding-inline-end: var(--space-4);
border-inline-end: 1px solid var(--section-rule);
scrollbar-width: thin;
}
.recordings-index h2 { margin: 0 0 var(--space-6); font-size: 1rem; }
.recordings-index h3 { margin: var(--space-6) 0 var(--space-2); color: var(--blue); font-size: var(--text-xs); }
.recordings-index ol { margin: 0; padding: 0; list-style: none; }
.recordings-index a { display: flex; align-items: center; min-block-size: var(--target-min); padding: var(--space-2); border-radius: var(--radius-sm); color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.recordings-index a:hover { color: var(--blue); background: var(--surface); text-decoration: underline; text-underline-offset: 0.2em; }
.recordings-collection { min-inline-size: 0; }
.recordings-note { padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--blue); margin-block-end: var(--space-8); }
.recordings-note h2 { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.recordings-note p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.recordings-group { margin-block-end: var(--space-12); }
.recordings-group-heading { margin-block-end: var(--space-6); }
.recordings-group-heading h2 { margin: 0 0 var(--space-2); font-size: 1.5rem; }
.recordings-group-heading p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.recording-card {
margin-block-end: var(--space-4);
padding: clamp(1.25rem, 3vw, 2rem);
border: 1px solid var(--section-rule);
border-radius: var(--radius-lg);
background: var(--surface);
}
.recording-card:has(:target) { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.recording-card-top { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; margin-block-end: var(--space-4); }
.recording-badge { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--blue); font-size: var(--text-xs); font-weight: 650; }
.recording-badge svg { inline-size: 20px; flex-shrink: 0; }
.recording-number { color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.recording-card h3 { margin: 0 0 var(--space-4); font-size: 1.25rem; line-height: 1.5; }
.recording-text { max-inline-size: 68ch; margin: 0; line-height: 1.9; white-space: pre-line; scroll-margin-block-start: 6rem; }
.recording-text:focus { outline: 2px solid var(--focus); outline-offset: var(--space-2); border-radius: var(--radius-sm); }
.recording-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: 1px solid var(--section-rule); }
.recording-listen.audio-play-btn { inline-size: auto; flex: 0 1 auto; padding-inline: var(--space-4); }
.recording-source { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: var(--blue); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 0.2em; }
.recordings-return { margin-block-end: var(--space-8); }
@media (max-width: 760px) {
.recordings-entry { grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: var(--space-4); }
.recordings-open { grid-column: 1 / -1; inline-size: 100%; }
.recordings-hero { gap: var(--space-4); grid-template-columns: minmax(0, 1fr) 140px; margin-block-end: var(--space-8); }
.recordings-hero h1 { font-size: 2rem; }
.recordings-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.recordings-index { position: static; max-block-size: none; overflow: visible; padding: var(--space-4); border: 1px solid var(--section-rule); border-radius: var(--radius-lg); background: var(--surface); }
.recordings-index h2 { margin-block-end: var(--space-4); }
.recordings-index h3 { margin-block-start: var(--space-4); }
.recordings-index ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); }
}
@media (max-width: 560px) {
#main-content > .recordings-entry { margin-inline: var(--space-4); }
}
@media (max-width: 480px) {
.recordings-hero { position: relative; grid-template-columns: minmax(0, 1fr); }
.recordings-art { inline-size: 140px; grid-row: 1; justify-self: center; }
.recordings-hero h1 { max-inline-size: none; }
.recordings-index ol { grid-template-columns: minmax(0, 1fr); }
}
@media print {
.recordings-entry,
.recordings-index,
.recordings-art,
.recording-actions,
.recordings-tags,
.recordings-return { display: none !important; }
.recordings-layout,
.recordings-hero { display: block; }
.recordings-hero { padding: 0; border: 0; }
.recording-card { break-inside: avoid; }
}
.case-brief {
margin-block: var(--space-4);
padding-block: var(--space-3);
border-block-end: 1px solid var(--section-rule);
}
.case-brief h2 {
margin-block: 0 var(--space-4);
font-size: var(--text-xl);
}
.case-brief-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
gap: var(--space-6) var(--space-8);
margin: 0 0 var(--space-4);
}
.case-brief-grid > div {
min-inline-size: 0;
}
.case-brief dt {
margin-block-end: var(--space-2);
color: var(--blue);
font-size: var(--text-sm);
font-weight: 700;
}
.case-brief dd {
margin: 0;
max-inline-size: var(--content-measure);
}
.brief-explore {
display: inline-block;
min-block-size: var(--target-min);
padding-block: var(--space-2);
color: var(--blue);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.22em;
}
.case-a11y-note a {
display: inline-block;
min-block-size: var(--target-min);
max-inline-size: 100%;
padding-block: var(--space-2);
overflow-wrap: anywhere;
text-decoration: underline;
text-underline-offset: 0.22em;
}
.case-study-shell {
width: min(100% - 32px, 1020px);
margin-inline: auto;
padding-bottom: 64px;
}
.case-study-header-bar {
margin-bottom: var(--space-3);
}
.case-study-nav {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 8px 0;
background: transparent;
border: 0;
border-radius: var(--radius-md);
box-shadow: none;
}
.case-nav-top-row {
direction: ltr;
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;
max-inline-size: 100%;
height: auto;
padding: 8px 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
color: var(--blue);
font-family: inherit;
font-size: 0.9rem;
font-weight: 700;
text-decoration: none !important;
white-space: normal;
flex-shrink: 0;
box-shadow: none;
transition:
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard),
color 0s var(--ease-standard),
box-shadow 0s var(--ease-standard),
transform var(--motion-normal) var(--ease-standard);
}
.case-nav-back-pill svg {
flex: 0 0 16px;
width: 16px;
height: 16px;
stroke: currentcolor;
stroke-width: 2.2;
transition: transform var(--motion-normal) var(--ease-emphasized);
}
.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;
min-inline-size: 0;
max-inline-size: 100%;
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 0s var(--ease-standard);
}
.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 {
direction: ltr;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
min-width: 0;
max-inline-size: 100%;
margin-inline-start: auto;
}
.case-reading-action {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
margin: 0;
}
.case-title-row {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: var(--space-3);
margin-block-end: var(--space-3);
}
.case-study-hero .case-title-row h1 {
margin: 0;
}
.case-study-controls .language-selector, .case-study-controls .theme-control {
flex: 0 0 auto;
min-width: 88px;
background: var(--surface);
border-color: var(--line);
}
.case-study-controls .language-selector { width: auto; }
.case-study-controls .language-option, .case-study-controls .theme-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), .case-study-controls .theme-option[aria-checked="true"] {
background: var(--button-bg);
color: var(--button-text);
}
.case-study-controls > button {
min-width: 44px;
min-height: 44px;
}
.case-decision-detail,
.case-validation-plan {
margin-block-start: var(--space-6);
padding-block-start: var(--space-4);
border-block-start: 1px solid var(--soft-line);
}
.case-screen-guide {
margin-block-start: var(--space-3);
padding-inline-start: var(--space-3);
border-inline-start: 2px solid var(--blue);
font-size: var(--text-sm);
}
.case-decision-detail h3,
.case-validation-plan h3,
.case-deliverables-title {
font-size: var(--text-lg);
margin-block: var(--space-4) var(--space-2);
}
.case-metric-card .case-metric-value {
display: block;
font-size: var(--text-lg);
line-height: 1.4;
overflow-wrap: anywhere;
}
.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: var(--z-progress);
pointer-events: none;
transition: transform 60ms linear;
}
[dir="rtl"] .reading-progress-bar {
transform-origin: 100% 50%;
}
.case-study-card {
max-width: 960px;
margin: var(--space-2) auto var(--space-8);
padding: clamp(16px, 2vw, 24px);
border: 0;
border-radius: var(--radius-lg);
background: transparent;
box-shadow: none;
}
.case-study-hero {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 32px;
align-items: start;
margin-bottom: 0;
}
.case-hero-text {
display: flex;
flex-direction: column;
min-width: 0;
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: var(--radius-pill);
}
.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;
overflow-wrap: anywhere;
}
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 12px;
}
.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: var(--radius-sm);
background: var(--button-bg);
color: var(--button-text);
border: none;
text-decoration: none !important;
transition:
background-color 0s var(--ease-standard),
box-shadow 0s var(--ease-standard),
transform var(--motion-normal) var(--ease-standard);
}
.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 8px;
font-size: 0.9rem;
font-weight: 600;
border-radius: var(--radius-sm);
background: transparent;
color: var(--link-aaa);
border: 0;
cursor: pointer;
font-family: inherit;
text-decoration: none !important;
transition:
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard),
color 0s var(--ease-standard);
}
.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: var(--radius-md);
overflow: hidden;
border: 1px solid var(--soft-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 var(--motion-normal) var(--ease-standard), transform var(--motion-slow) var(--ease-standard);
}
.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: var(--radius-pill);
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 var(--motion-normal) var(--ease-standard),
transform var(--motion-normal) var(--ease-standard),
background-color 0s var(--ease-standard);
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-device-showcase {
margin-block: var(--space-6);
}
.case-device-gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
margin-block-start: var(--space-4);
}
.case-device-card {
min-width: 0;
margin: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface);
}
.case-device-card figcaption {
display: grid;
gap: var(--space-2);
padding: var(--space-4);
font-size: 0.875rem;
line-height: 1.6;
}
.case-device-card figcaption strong {
color: var(--text);
}
.case-device-card figcaption span {
color: var(--muted);
}
@media (width <= 640px) {
.case-device-gallery {
grid-template-columns: minmax(0, 1fr);
}
}
.device-carousel-shell {
min-inline-size: 0;
margin-block: var(--space-6);
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface);
}
.device-carousel-controls {
display: grid;
min-inline-size: 0;
}
.device-carousel-tabs {
display: flex;
min-inline-size: 0;
gap: var(--space-2);
padding: var(--space-3);
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
border-block-end: 1px solid var(--line);
}
.device-carousel-tabs button,
.device-carousel-arrow {
min-inline-size: 44px;
min-block-size: 44px;
border: 1px solid var(--muted);
border-radius: var(--radius-sm);
color: var(--text);
background: var(--surface);
font: inherit;
font-size: var(--text-sm);
cursor: pointer;
}
.device-carousel-tabs button {
display: flex;
flex: 1 0 min(9rem, 100%);
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
text-align: start;
overflow-wrap: anywhere;
}
.device-carousel-tab-number {
flex-shrink: 0;
white-space: nowrap;
font-size: 0.75em;
font-variant-numeric: tabular-nums;
}
.device-carousel-tab-label {
min-inline-size: 0;
}
.device-carousel-tabs [aria-selected="true"] {
border-color: var(--text);
color: var(--surface);
background: var(--text);
font-weight: 700;
}
.device-carousel-toolbar {
container: carousel-toolbar / inline-size;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
min-inline-size: 0;
gap: var(--space-3);
padding: var(--space-3) 16px;
border-block-end: 1px solid var(--line);
}
.device-carousel-active-title {
min-inline-size: 0;
color: var(--text);
font-size: var(--text-sm);
overflow-wrap: anywhere;
}
.device-carousel-navigation {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px;
min-inline-size: 0;
max-inline-size: 100%;
align-items: center;
gap: 8px;
margin-inline-start: auto;
}
.device-carousel-arrow {
display: grid;
flex: 0 0 44px;
place-items: center;
padding: 0;
}
.device-carousel-arrow svg {
inline-size: 20px;
block-size: 20px;
}
.device-carousel-next svg,
[dir="rtl"] .device-carousel-previous svg {
transform: rotate(180deg);
}
[dir="rtl"] .device-carousel-next svg {
transform: none;
}
.device-carousel-arrow[aria-disabled="true"] {
color: var(--muted);
border-style: dashed;
cursor: default;
}
.device-carousel-controls button:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
.device-carousel-count {
direction: ltr;
unicode-bidi: isolate;
color: var(--muted);
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
min-inline-size: 0;
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
}
@container carousel-toolbar (max-width: 112px) {
.device-carousel-navigation {
grid-template-columns: minmax(44px, 1fr);
inline-size: 100%;
}
}
[data-carousel-ready] .case-device-gallery {
grid-template-columns: minmax(0, 1fr);
min-inline-size: 0;
gap: 0;
margin: 0;
touch-action: pan-y pinch-zoom;
}
[data-carousel-ready] .case-device-card {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
margin: 0;
border: 0;
border-radius: 0;
background: var(--hero-surface);
}
.device-carousel-slide {
min-inline-size: 0;
}
.device-carousel-slide[hidden],
.device-carousel-feedback[hidden] {
display: none;
}
.device-carousel-feedback {
margin: 0;
padding: var(--space-3) var(--space-4);
border-block-start: 1px solid var(--line);
color: var(--text);
background: var(--surface);
font-size: var(--text-sm);
}
[data-carousel-ready] .case-device-card .case-study-image {
block-size: clamp(16rem, 52svh, 32rem);
padding: var(--space-4);
object-fit: contain;
background: var(--hero-surface);
transform: none;
}
[data-carousel-ready] .case-device-card figcaption {
justify-items: start;
padding: var(--space-4);
border-block-start: 1px solid var(--line);
color: var(--muted);
background: var(--surface);
text-align: start;
}
[data-carousel-ready] .case-device-card figcaption strong {
max-inline-size: 50ch;
color: var(--text);
font-size: var(--text-body);
}
[data-carousel-ready] .case-device-card figcaption span {
max-inline-size: 60ch;
color: var(--muted);
}
@media (width <= 600px) {
[data-carousel-ready] .case-device-card .case-study-image {
block-size: clamp(14rem, 42svh, 24rem);
padding: var(--space-3);
}
}
@media print {
.device-carousel-shell {
display: block;
overflow: visible;
}
.device-carousel-controls,
.device-carousel-feedback {
display: none;
}
[data-carousel-ready] .case-device-gallery {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
[data-carousel-ready] .case-device-card,
.device-carousel-slide[hidden] {
display: block !important;
break-inside: avoid;
}
[data-carousel-ready] .case-device-card .case-study-image {
block-size: auto;
max-block-size: 8cm;
}
}
.case-project-details {
margin-block: var(--space-6);
padding-block: var(--space-4);
border-block: 1px solid var(--section-rule);
}
.case-project-details p {
margin: 0;
}
.case-role {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 12px;
line-height: 1.6;
}
.case-role > span,
.case-project-meta {
color: var(--muted);
font-size: 0.8125rem;
}
.case-role > strong {
font-size: 0.9375rem;
}
.case-project-details .case-ownership {
margin-block: 6px;
font-size: 0.9375rem;
}
.case-supporting-details {
margin-block: var(--space-6);
border-block-start: 1px solid var(--section-rule);
}
.case-supporting-details > summary {
min-block-size: 44px;
padding: 12px 20px;
color: var(--link-aaa);
font-weight: 700;
cursor: pointer;
}
.case-supporting-body {
padding: 0 20px 20px;
}
.case-supporting-body > p:first-child {
color: var(--muted);
}
.case-meta-grid {
display: flex;
flex-wrap: wrap;
gap: 1px;
margin-bottom: 28px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--radius-md);
overflow: hidden;
}
.case-meta-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 14px 16px;
background: var(--surface);
flex: 1 1 8rem;
min-width: 0;
}
.case-meta-val,
.case-meta-label {
max-inline-size: 100%;
overflow-wrap: anywhere;
}
.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;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 4px;
width: fit-content;
max-width: calc(100% - 24px);
margin: 0 auto 24px;
padding: 4px 6px;
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--line) 70%, var(--blue) 30%);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-control);
scrollbar-width: none;
overflow: hidden;
transition:
box-shadow 0s var(--ease-standard),
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard),
transform var(--motion-normal) var(--ease-standard);
transform: translateZ(0);
}
.case-section-nav.is-stuck {
box-shadow: var(--shadow-control);
background: var(--surface);
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;
max-width: 100%;
padding: 8px 14px;
border-radius: var(--radius-sm);
color: var(--muted);
font-size: 0.86rem;
font-weight: 700;
text-decoration: none !important;
white-space: normal;
transition:
color var(--motion-fast, 120ms) var(--ease-standard),
background-color var(--motion-fast, 120ms) var(--ease-standard),
box-shadow var(--motion-fast, 120ms) var(--ease-standard),
transform var(--motion-fast, 120ms) var(--ease-standard);
}
.case-nav-text {
min-width: 0;
overflow-wrap: anywhere;
}
.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 var(--motion-fast) var(--ease-standard), transform var(--motion-normal) var(--ease-standard);
}
.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: var(--radius-sm);
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: var(--radius-sm);
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.25, 0.1, 0.25, 1)),
width var(--motion-slow, 260ms) var(--ease-standard, cubic-bezier(0.25, 0.1, 0.25, 1)),
height var(--motion-slow, 260ms) var(--ease-standard, cubic-bezier(0.25, 0.1, 0.25, 1)),
opacity var(--motion-fast, 120ms) var(--ease-standard);
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: var(--radius-pill);
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: grid; gap: var(--space-6); }
.case-story-section { min-inline-size: 0; scroll-margin-top: var(--navigation-clearance); }
.case-story-heading { margin: 0 0 var(--space-3); color: var(--text); font-size: var(--text-xl); line-height: 1.3; }
.case-story-body > p { max-inline-size: var(--content-measure); margin: 0; color: var(--text-secondary); line-height: 1.75; }
.case-solution-figure { margin-block-start: var(--space-6); background: var(--surface); box-shadow: var(--shadow-card); }
.case-solution-figure .case-study-image { max-block-size: 34rem; object-fit: contain; background: var(--inner-card); }
.case-solution-figure figcaption { padding: 12px 16px; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.case-reading-action .case-listen-btn { inline-size: auto; block-size: 44px; min-block-size: 44px; flex: 0 0 auto; padding: 0 12px; background: transparent; border-color: transparent; color: var(--link-aaa); box-shadow: none; }
.case-reading-action .case-listen-btn:is(:hover, :focus-visible) { background: var(--pill-bg); color: var(--link-aaa); }
.case-reading-action .case-listen-btn.is-playing { background: var(--button-bg); color: var(--button-text); }
.case-reading-action .transcript-link { display: inline-flex; align-items: center; min-block-size: 44px; font-size: var(--text-sm); }
.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: var(--radius-pill);
background: var(--pill-bg);
color: var(--muted);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition:
background-color 0s var(--ease-standard),
color 0s var(--ease-standard),
border-color 0s var(--ease-standard),
transform var(--motion-fast) var(--ease-standard);
}
.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: var(--radius-md);
transition:
transform var(--motion-normal) var(--ease-standard),
border-color 0s var(--ease-standard);
}
.case-metric-card:hover {
border-color: color-mix(in srgb, var(--blue) 40%, var(--soft-line));
}
.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"] .case-metric-card {
background: rgb(255 255 255 / 3%);
border-color: rgb(255 255 255 / 8%);
}
[data-theme="dark"] .case-metric-value {
color: var(--accent, #60a5fa);
}
.case-a11y-note {
display: flex;
flex-wrap: wrap;
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: var(--radius-sm);
font-size: 0.85rem;
font-weight: 500;
color: var(--muted);
}
.case-a11y-note > span {
flex: 1 1 12rem;
min-inline-size: 0;
overflow-wrap: anywhere;
}
.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: var(--radius-md);
background: var(--panel);
color: var(--text);
transition:
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard),
color 0s 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 0s var(--ease-standard),
color 0s var(--ease-standard);
}
.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 var(--motion-normal) var(--ease-emphasized);
}
.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 var(--motion-normal) var(--ease-standard);
}
.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: var(--radius-md);
overflow: hidden;
box-shadow: 0 25px 60px rgb(0 0 0 / 65%);
transform: scale(0.96);
transition: transform var(--motion-normal) var(--ease-standard);
}
.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 0s var(--ease-standard), border-color 0s 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: var(--radius-md);
overflow: hidden;
box-shadow: 0 16px 40px rgb(0 0 0 / 25%);
animation: project-fade-in var(--motion-slow) var(--ease-emphasized) 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: var(--radius-sm);
background: transparent;
color: var(--text-secondary);
font-family: inherit;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0s var(--ease-standard), border-color 0s var(--ease-standard), color 0s 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: var(--radius-sm);
background: #fff;
transition: width var(--motion-slow) var(--ease-standard);
}
.live-embed-frame-container[data-device="mobile"] .live-embed-iframe {
width: 390px;
height: 720px;
box-shadow: 0 12px 36px rgb(0 0 0 / 40%);
}
.walkthrough-detail {
max-inline-size: 24rem;
margin: 0 var(--space-2) var(--space-4);
}
.walkthrough-crop {
position: relative;
overflow: hidden;
aspect-ratio: var(--crop-ratio);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
}
.walkthrough-crop img {
position: absolute;
left: 0;
top: 0;
inline-size: var(--crop-scale);
max-inline-size: none;
block-size: auto;
transform: translate(var(--crop-x), var(--crop-y));
}
.walkthrough-detail figcaption {
margin-block-start: var(--space-2);
color: var(--muted);
font-size: var(--text-xs);
}
[data-walkthrough="hr"] [data-walkthrough-step="1"] {
--crop-ratio: 360 / 564;
--crop-scale: 333.333%;
--crop-x: -1%;
--crop-y: -7%;
}
[data-walkthrough="hr"] [data-walkthrough-step="2"] {
--crop-ratio: 276 / 260;
--crop-scale: 434.783%;
--crop-x: -47%;
--crop-y: -55%;
}
[data-walkthrough="hr"] [data-walkthrough-step="3"] {
--crop-ratio: 204 / 312;
--crop-scale: 588.235%;
--crop-x: -82%;
--crop-y: -4%;
}
[data-walkthrough="cairo"] [data-walkthrough-step="1"] {
--crop-ratio: 540 / 93;
--crop-scale: 222.222%;
--crop-x: -30%;
--crop-y: -8%;
}
[data-walkthrough="cairo"] [data-walkthrough-step="2"] {
--crop-ratio: 432 / 370;
--crop-scale: 277.778%;
--crop-x: -61%;
--crop-y: -17%;
}
[data-walkthrough="cairo"] [data-walkthrough-step="3"] {
--crop-ratio: 420 / 423;
--crop-scale: 285.714%;
--crop-x: -62%;
--crop-y: -47%;
}
.design-walkthrough {
margin-block: var(--space-8);
padding-block: var(--space-6);
border-block: 1px solid var(--section-rule);
}
.design-walkthrough > h3 {
margin-block: 0 var(--space-3);
font-size: var(--text-xl);
line-height: 1.4;
}
.walkthrough-layout {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
align-items: start;
gap: var(--space-6);
margin-block-start: var(--space-6);
}
.walkthrough-figure {
margin: 0;
min-inline-size: 0;
}
.walkthrough-screen {
position: relative;
overflow: hidden;
border: 1px solid var(--soft-line);
border-radius: var(--radius-md);
background: var(--surface);
}
.walkthrough-screen img {
display: block;
inline-size: 100%;
block-size: auto;
cursor: zoom-in;
}
.walkthrough-figure figcaption {
padding-block-start: var(--space-2);
color: var(--muted);
font-size: var(--text-xs);
}
.walkthrough-region {
display: none;
position: absolute;
left: var(--region-x);
top: var(--region-y);
width: var(--region-width);
height: var(--region-height);
border: 3px solid var(--blue);
border-radius: var(--radius-sm);
box-shadow: 0 0 0 1px var(--surface);
pointer-events: none;
}
.walkthrough-region > span {
display: grid;
place-items: center;
inline-size: 1.75rem;
block-size: 1.75rem;
background: var(--button-bg);
color: var(--button-text);
border: 1px solid var(--surface);
border-radius: var(--radius-pill);
font-size: var(--text-sm);
font-weight: 700;
}
[data-active-step="1"] [data-walkthrough-region="1"],
[data-active-step="2"] [data-walkthrough-region="2"],
[data-active-step="3"] [data-walkthrough-region="3"] {
display: block;
}
.walkthrough-step {
border-block-end: 1px solid var(--soft-line);
}
.walkthrough-step > summary {
display: list-item;
min-block-size: var(--target-min);
padding: var(--space-3) var(--space-2);
list-style: revert;
list-style-position: inside;
font-size: var(--text-body);
font-weight: 600;
line-height: 1.5;
cursor: pointer;
}
.walkthrough-step > summary::marker {
content: normal;
display: inline;
color: var(--blue);
font-size: var(--text-sm);
}
.walkthrough-screen:has(.image-unavailable) .walkthrough-region {
display: none;
}
.walkthrough-step > summary::-webkit-details-marker {
display: inline;
}
.walkthrough-step[open] > summary {
color: var(--blue);
}
.walkthrough-step > p {
margin: 0;
padding: var(--space-2) var(--space-2) var(--space-4);
font-size: var(--text-sm);
}
.walkthrough-controls {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-block-start: var(--space-4);
}
.walkthrough-controls > button {
flex: 1 1 8rem;
min-inline-size: 0;
min-block-size: var(--target-min);
block-size: auto;
padding: var(--space-3);
white-space: normal;
text-align: center;
}
.walkthrough-controls > button:disabled {
opacity: 0.55;
cursor: default;
}
@media (max-width: 700px) {
.walkthrough-layout {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
}
@media print {
.walkthrough-layout {
display: block;
}
.walkthrough-controls,
.walkthrough-region {
display: none !important;
}
.walkthrough-step {
break-inside: avoid;
}
}
[data-walkthrough="hr"] [data-walkthrough-region="1"] {
--region-x: 1%;
--region-y: 7%;
--region-width: 30%;
--region-height: 76%;
}
[data-walkthrough="hr"] [data-walkthrough-region="2"] {
--region-x: 31%;
--region-y: 23%;
--region-width: 49%;
--region-height: 73%;
}
[data-walkthrough="hr"] [data-walkthrough-region="3"] {
--region-x: 83%;
--region-y: 4%;
--region-width: 16%;
--region-height: 93%;
}
[data-walkthrough="cairo"] [data-walkthrough-region="1"] {
--region-x: 2%;
--region-y: 8%;
--region-width: 95%;
--region-height: 7%;
}
[data-walkthrough="cairo"] [data-walkthrough-region="2"] {
--region-x: 61%;
--region-y: 17%;
--region-width: 36%;
--region-height: 28%;
}
[data-walkthrough="cairo"] [data-walkthrough-region="3"] {
--region-x: 62%;
--region-y: 47%;
--region-width: 35%;
--region-height: 32%;
}
.wa-screens {
margin-block: var(--space-6);
}
.wa-history {
margin-block: var(--space-8);
scroll-margin-block-start: var(--navigation-clearance);
}
.wa-history .evidence-image-pair img {
aspect-ratio: 16 / 11;
object-fit: contain;
background: #0c1429;
}
.wa-history a:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 4px;
}
.wa-screens-hint {
color: var(--muted);
font-size: var(--text-sm);
}
.wa-screen-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
margin-block: var(--space-4);
}
[data-screenshot-carousel][data-carousel-ready] .wa-screen-open {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
block-size: clamp(22rem, 62svh, 40rem);
color: var(--text);
background: var(--hero-surface);
text-decoration: none;
}
[data-screenshot-carousel][data-carousel-ready] .wa-screen-open picture {
min-block-size: 0;
padding: var(--space-4);
}
[data-screenshot-carousel][data-carousel-ready] .wa-screen-zoom {
position: static;
justify-self: stretch;
padding: var(--space-3) var(--space-4);
border: 0;
border-block-start: 1px solid var(--line);
border-radius: 0;
color: var(--text);
background: var(--surface);
font-size: var(--text-sm);
text-align: end;
text-decoration: underline;
text-underline-offset: 0.2em;
}
@media (width >= 900px) {
[data-screenshot-carousel] .device-carousel-shell {
display: grid;
grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
grid-template-rows: auto 1fr;
}
[data-screenshot-carousel] .device-carousel-controls {
display: contents;
}
[data-screenshot-carousel] .device-carousel-tabs {
grid-area: 1 / 1 / 3 / 2;
flex-direction: column;
align-items: stretch;
overflow-x: visible;
border-block-end: 0;
border-inline-end: 1px solid var(--line);
background: var(--hero-surface);
}
[data-screenshot-carousel] .device-carousel-tabs button {
flex: 0 0 auto;
min-inline-size: 0;
min-block-size: 64px;
}
[data-screenshot-carousel] .device-carousel-toolbar {
grid-area: 1 / 2;
}
[data-screenshot-carousel] .case-device-gallery {
grid-area: 2 / 2;
align-content: start;
}
}
.wa-screen {
min-inline-size: 0;
margin: 0;
overflow: hidden;
border: 1px solid var(--section-rule);
border-radius: var(--radius-md);
background: var(--surface);
}
.wa-screen-open {
position: relative;
display: block;
block-size: 25rem;
background: #0c1429;
cursor: zoom-in;
}
.wa-screen-open picture,
.wa-screen-open img {
display: block;
inline-size: 100%;
block-size: 100%;
}
.wa-screen-open img {
object-fit: contain;
}
.wa-screen-open--hero,
.wa-screen-open--hero picture,
.wa-screen-open--hero img {
block-size: auto;
}
.wa-screen-open--hero .case-study-image {
transform: none;
}
.wa-screen-open:focus-visible {
outline: 3px solid var(--focus);
outline-offset: -3px;
}
.wa-screen-zoom {
position: absolute;
inset-inline-end: var(--space-2);
inset-block-end: var(--space-2);
padding: 0.4rem 0.65rem;
border: 1px solid rgb(255 255 255 / 45%);
border-radius: var(--radius-pill);
color: #fff;
background: #0c1429;
font-size: 0.75rem;
font-weight: 600;
pointer-events: none;
}
.wa-screen figcaption,
[data-wa-home] figcaption {
padding: var(--space-3) var(--space-4);
border-block-start: 1px solid var(--section-rule);
color: var(--muted);
background: var(--surface);
font-size: var(--text-sm);
line-height: 1.6;
}
@media (max-width: 600px) {
.wa-screen-grid {
grid-template-columns: minmax(0, 1fr);
}
[data-screenshot-carousel][data-carousel-ready] .wa-screen-open {
block-size: clamp(18rem, 48svh, 27rem);
}
[data-screenshot-carousel][data-carousel-ready] .wa-screen-open img {
block-size: 100%;
}
.wa-screen-open {
block-size: auto;
}
.wa-screen-open img {
block-size: auto;
max-block-size: 32rem;
}
}
@media print {
[data-screenshot-carousel] .device-carousel-shell {
display: block;
}
[data-screenshot-carousel] .device-carousel-controls {
display: none;
}
[data-screenshot-carousel][data-carousel-ready] .wa-screen-open {
block-size: auto;
}
.wa-screen-open {
block-size: auto;
}
.wa-screen-open img {
block-size: auto;
max-block-size: 8cm;
}
.wa-screen {
break-inside: avoid;
}
.wa-screen-zoom {
display: none;
}
}
.transcript-link {
display: inline-flex;
align-items: center;
min-block-size: var(--target-min);
padding: var(--space-2);
color: var(--blue);
font-size: var(--text-sm);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.case-evidence {
margin-block: var(--space-8);
padding-block: var(--space-6);
border-block: 1px solid var(--section-rule);
overflow-wrap: anywhere;
}
.case-evidence h2 {
font-size: 1.5rem;
line-height: 1.4;
}
.case-evidence h3 {
margin-block-start: var(--space-6);
}
.evidence-date,
.evidence-hint,
.evidence-image-pair figcaption {
color: var(--muted);
font-size: var(--text-sm);
line-height: 1.6;
}
.evidence-method {
margin-block: var(--space-4);
padding: var(--space-4);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
}
.evidence-method summary {
padding-block: var(--space-2);
font-weight: 700;
cursor: pointer;
}
.evidence-method li,
.evidence-sources li {
margin-block: var(--space-3);
}
.comparison-scroll {
max-inline-size: 100%;
overflow: auto;
overscroll-behavior-inline: contain;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-card);
}
.comparison-table {
inline-size: 100%;
min-inline-size: 52rem;
border-collapse: separate;
border-spacing: 0;
font-size: var(--text-sm);
line-height: 1.65;
table-layout: fixed;
}
.comparison-table caption {
padding: var(--space-6);
color: var(--text);
background: var(--hero-surface);
font-weight: 700;
text-align: start;
}
.comparison-table th,
.comparison-table td {
padding: var(--space-4);
border-block-start: 1px solid var(--section-rule);
border-inline-end: 1px solid var(--section-rule);
text-align: start;
vertical-align: top;
}
.comparison-table th:first-child {
inline-size: 15%;
}
.comparison-table :is(th, td):last-child {
border-inline-end: 0;
}
.comparison-table thead {
background: var(--hero-surface);
}
.comparison-table thead th {
padding-block: var(--space-6);
border-block-start: 0;
}
.comparison-table th:last-child {
inline-size: 22%;
}
.comparison-table tbody tr:nth-child(even) {
background: color-mix(in srgb, var(--hero-surface) 65%, var(--surface));
}
.comparison-table tbody tr:hover {
background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.comparison-table .comparison-winning-cell {
background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.comparison-icon {
display: inline-block;
flex-shrink: 0;
vertical-align: middle;
}
.comparison-dimension-icon {
display: flex;
inline-size: 2.25rem;
block-size: 2.25rem;
align-items: center;
justify-content: center;
margin-block-end: var(--space-3);
border: 1px solid var(--section-rule);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--accent);
}
.comparison-product-logo {
display: block;
inline-size: 3rem;
block-size: 3rem;
flex-shrink: 0;
margin-block-end: var(--space-3);
border: 1px solid var(--section-rule);
border-radius: var(--radius-md);
object-fit: contain;
}
.comparison-product-note {
display: block;
margin-block-start: var(--space-2);
color: var(--muted);
font-size: var(--text-xs);
font-weight: 400;
}
.comparison-cell-summary {
display: block;
margin-block: var(--space-3) var(--space-2);
font-weight: 600;
}
.comparison-cell-evidence summary {
min-block-size: var(--target-min);
padding-block: var(--space-2);
color: var(--blue);
cursor: pointer;
text-underline-offset: 0.2em;
}
.comparison-cell-evidence summary:hover {
text-decoration: underline;
}
.comparison-scroll:focus-visible,
.comparison-cell-evidence summary:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
.comparison-verdict,
.comparison-verdict-heading {
background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.comparison-verdict-heading > svg {
display: block;
margin-block-end: var(--space-3);
color: var(--accent);
}
.comparison-verdict-label {
display: flex;
align-items: center;
gap: var(--space-2);
margin-block-end: var(--space-3);
color: var(--muted);
font-size: var(--text-xs);
font-weight: 600;
}
.comparison-verdict:is([data-verdict="winner"], [data-verdict="split"]) .comparison-verdict-label {
color: var(--accent);
}
.comparison-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
padding: 0;
margin-block: var(--space-6) var(--space-3);
list-style: none;
}
.comparison-table p {
margin-block: var(--space-3);
font-size: inherit;
line-height: inherit;
}
.evidence-status {
display: inline-flex;
align-items: center;
gap: 0.35em;
padding: 0.25em 0.6em;
border: 1px solid var(--section-rule);
border-radius: var(--radius-pill);
color: var(--muted);
font-size: 0.85em;
font-weight: 600;
}
.evidence-status .comparison-icon {
inline-size: 1em;
block-size: 1em;
}
.evidence-status[data-evidence-status="observed"] {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.evidence-status[data-evidence-status="documented"] {
color: var(--text);
background: var(--hero-surface);
}
.evidence-status[data-evidence-status="unverified"] {
border-style: dashed;
}
.comparison-final {
margin-block-start: var(--space-8);
padding: clamp(1rem, 3vw, 2rem);
border: 1px solid var(--section-rule);
border-block-start: 4px solid var(--accent);
border-radius: var(--radius-lg);
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface));
}
.comparison-final-heading {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--accent);
}
.comparison-final-heading h3 {
margin: 0;
font-size: 1rem;
}
.case-evidence .comparison-final-headline {
margin-block: var(--space-4);
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
line-height: 1.4;
font-weight: 700;
}
.comparison-recommendations {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
padding: 0;
margin-block: var(--space-6);
list-style: none;
}
.comparison-recommendations li {
padding: var(--space-4);
border: 1px solid var(--section-rule);
border-radius: var(--radius-md);
background: var(--surface);
font-size: var(--text-sm);
}
.comparison-recommendation-use {
color: var(--muted);
font-size: var(--text-xs);
}
.comparison-recommendations h4 {
display: flex;
align-items: center;
gap: var(--space-3);
margin-block: var(--space-2) var(--space-3);
font-size: 1.125rem;
color: var(--text);
}
.comparison-recommendations .comparison-product-logo {
inline-size: 2.25rem;
block-size: 2.25rem;
margin: 0;
}
.comparison-recommendations p {
font-size: inherit;
}
.case-evidence .comparison-final > .evidence-hint {
font-size: var(--text-sm);
}
.evidence-refs a {
display: inline-block;
min-inline-size: 2rem;
padding-block: 0.25rem;
}
.evidence-finding {
border-inline-start: 3px solid var(--accent);
margin-block: var(--space-6);
padding-inline-start: var(--space-4);
}
.evidence-actions {
padding-inline-start: 1.5rem;
}
.evidence-actions li {
margin-block: var(--space-6);
padding-inline-start: var(--space-2);
}
.evidence-actions h4 {
margin-block: 0 var(--space-2);
font-size: 1rem;
}
.evidence-image-pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6);
align-items: start;
}
.evidence-image-pair figure {
margin: 0;
}
.evidence-image-pair img {
display: block;
inline-size: 100%;
block-size: auto;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
}
.evidence-image-pair figcaption {
margin-block-start: var(--space-2);
}
@media (width <= 600px) {
.comparison-table tr > th:first-child {
position: sticky;
inset-inline-start: 0;
z-index: 1;
background: var(--surface);
}
.comparison-recommendations {
grid-template-columns: minmax(0, 1fr);
}
.evidence-image-pair {
grid-template-columns: minmax(0, 1fr);
}
}
@media print {
.comparison-scroll {
overflow: visible;
}
.comparison-table {
min-inline-size: 0;
font-size: 8pt;
}
.comparison-table :is(th, td) {
padding: 4pt;
}
.comparison-cell-evidence > p {
display: block !important;
}
.comparison-cell-evidence::details-content {
content-visibility: visible;
}
.comparison-cell-evidence summary,
.comparison-dimension-icon {
display: none;
}
.comparison-table tr {
break-inside: avoid;
}
.comparison-scroll {
box-shadow: none;
}
.evidence-hint {
display: none;
}
.comparison-final .evidence-hint {
display: block;
}
}
@view-transition {
navigation: none;
}
html[data-language-reveal] main {
--language-text-delay: var(--motion-language-stagger);
--language-text-duration: var(--motion-language-arrival);
--language-text-distance: 4px;
--language-direction: -1;
--language-text-offset: calc(16px * var(--language-direction));
--language-action-offset: calc(12px * var(--language-direction));
--language-card-offset: calc(10px * var(--language-direction));
}
html[data-language-reveal][dir="rtl"] main {
--language-direction: 1;
}
html[data-language-reveal] main :is(h1, h2, h3, p) {
animation: language-text-arrival var(--language-text-duration) var(--ease-language-arrival) var(--language-text-delay) both;
}
html[data-language-reveal] main :is(
.avatar-wrap, .hero-contact-card, .project-card, .skill-group,
.li-experience-group, .certifications-panel .compact-list > li,
.case-brief, .case-accordion, .case-pagination,
.recordings-entry, .recording-card, .recordings-art
) {
--language-card-delay: var(--motion-language-stagger);
--language-text-delay: calc(var(--language-card-delay) + var(--motion-language-stagger));
--language-text-duration: var(--motion-language-card);
--language-text-distance: 2px;
--language-text-offset: calc(4px * var(--language-direction));
transform-origin: center top;
animation: language-card-arrival var(--motion-language-card) var(--ease-language-arrival) var(--language-card-delay) both;
}
html[data-language-reveal] main :is(
.project-card, .skill-group, .li-experience-group,
.certifications-panel .compact-list > li, .recording-card
):nth-child(2) {
--language-card-delay: calc(2 * var(--motion-language-stagger));
}
html[data-language-reveal] main :is(
.project-card, .skill-group, .li-experience-group,
.certifications-panel .compact-list > li, .recording-card
):nth-child(n + 3) {
--language-card-delay: calc(3 * var(--motion-language-stagger));
}
html[data-language-reveal] main :is(
.btn, .recordings-open, .audio-play-btn, .skill-btn, .skills-expand,
.contact-link-main, .contact-email, .section-copy-btn
) {
--language-action-order: 0;
animation: language-action-arrival var(--motion-language-action) var(--ease-language-arrival) calc(var(--language-text-delay) + var(--motion-language-stagger) + var(--language-action-order) * var(--motion-language-action-stagger)) both;
}
html[data-language-reveal] main :is(.btn-secondary, .btn-ghost) {
--language-action-order: 1;
}
html[data-language-reveal] .contact-item:nth-child(2) .contact-link-main {
--language-action-order: 1;
}
html[data-language-reveal] .contact-item:nth-child(3) .contact-link-main {
--language-action-order: 2;
}
html[data-language-reveal] main :is(.tag-pill, .project-card-tag, .recordings-tags > span, .pills > span) {
animation: language-detail-arrival var(--motion-language-detail) var(--ease-language-arrival) 100ms both;
}
html[data-language-reveal] :is(
.section-nav > a, .case-section-link, .case-section-back, .case-nav-back-pill
) > :is(span, svg),
html[data-language-reveal] :is(.language-option, .theme-option) > :is(span, svg),
html[data-language-reveal] .language-selector-icon svg {
animation: language-detail-arrival var(--motion-language-detail) var(--ease-language-arrival) 60ms both;
}
@keyframes language-detail-arrival {
from { translate: 0 4px; }
to { translate: 0 0; }
}
@keyframes language-text-arrival {
from { translate: var(--language-text-offset) var(--language-text-distance); }
to { translate: 0 0; }
}
@keyframes language-card-arrival {
from { translate: var(--language-card-offset) 6px; scale: 0.985; }
to { translate: 0 0; scale: 1; }
}
@keyframes language-action-arrival {
from { translate: var(--language-action-offset) 0; }
to { translate: 0 0; }
}
::view-transition {
pointer-events: none;
}
::view-transition-group(root) {
animation: none;
}
::view-transition-old(root) {
animation: none;
mix-blend-mode: normal;
}
::view-transition-new(root) {
animation: switch-reveal var(--motion-switch) var(--ease-switch) both;
mask-image: radial-gradient(circle closest-side, #000 calc(100% - 28px), transparent 100%);
mask-repeat: no-repeat;
mix-blend-mode: normal;
}
@keyframes switch-reveal {
from {
mask-size: 0 0;
mask-position: var(--switch-reveal-x) var(--switch-reveal-y);
}
to {
mask-size: calc(2 * var(--switch-reveal-radius)) calc(2 * var(--switch-reveal-radius));
mask-position: calc(var(--switch-reveal-x) - var(--switch-reveal-radius)) calc(var(--switch-reveal-y) - var(--switch-reveal-radius));
}
}
@media (prefers-reduced-motion: reduce) {
@view-transition {
navigation: none;
}
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*),
html[data-language-reveal] body,
html[data-language-reveal] body * {
animation: none !important;
}
}
@media (forced-colors: active) {
html[data-language-reveal] body,
html[data-language-reveal] body * { animation: none; }
}
@media print {
html[data-language-reveal] body,
html[data-language-reveal] body * { animation: none !important; }
}
.section-nav-indicator,
.case-section-indicator {
transform-origin: top left;
transition: opacity var(--motion-fast) var(--ease-standard);
will-change: auto;
}
.case-section-nav.has-indicator .case-section-link:hover,
.case-section-nav.has-indicator .case-section-link:focus-visible,
.case-section-nav.has-indicator .case-section-back:hover,
.case-section-nav.has-indicator .case-section-back:focus-visible {
background: color-mix(in srgb, var(--muted) 8%, transparent);
}
.case-section-nav.has-indicator .case-section-link[aria-current] {
background: transparent;
}
.copy-toast {
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.section-nav a,
.case-section-link,
.case-section-back {
transition:
scale var(--motion-fast) var(--ease-standard),
color 0s var(--ease-standard),
background-color 0s var(--ease-standard);
}
.section-nav a:active svg,
.case-section-link:active svg,
.audio-control:active svg,
.audio-play-btn:active svg,
.section-copy-btn:active svg,
.footer-share:active svg {
scale: 0.92;
}
.audio-control svg,
.audio-play-btn svg,
.section-copy-btn svg,
.footer-share svg,
.skills-expand svg,
.back-to-top-fab svg {
transition: scale var(--motion-fast) var(--ease-standard), translate var(--motion-fast) var(--ease-standard);
}
.btn:active,
.skills-expand:active,
.select-menu-trigger:active {
box-shadow: inset 0 2px 4px rgb(0 0 0 / 18%);
}
.copy-button.copied svg,
.section-copy-btn.copied svg {
animation: feedback-confirm var(--motion-slow) var(--ease-emphasized);
}
.accordion-chevron,
.resume-menu-chevron,
.select-menu-chevron {
transition: transform var(--motion-normal) var(--ease-emphasized);
}
.back-to-top-fab:not([hidden]),
.app-update:not([hidden]) {
animation: project-fade-in var(--motion-normal) var(--ease-emphasized);
}
@supports (transition-behavior: allow-discrete) {
.cert-lightbox,
.image-lightbox {
opacity: 0;
transition:
opacity var(--motion-normal) var(--ease-standard),
translate var(--motion-normal) var(--ease-standard),
scale var(--motion-normal) var(--ease-standard),
display var(--motion-normal) allow-discrete,
overlay var(--motion-normal) allow-discrete;
}
.cert-lightbox {
translate: 0 8px;
scale: 0.985;
}
.cert-lightbox[open],
.image-lightbox[open] {
opacity: 1;
translate: 0 0;
scale: 1;
animation: none;
}
.image-lightbox .lightbox-content {
transform: none;
translate: 0 8px;
scale: 0.99;
transition:
translate var(--motion-normal) var(--ease-emphasized),
scale var(--motion-normal) var(--ease-emphasized);
}
.image-lightbox[open] .lightbox-content {
translate: 0 0;
scale: 1;
}
.cert-lightbox::backdrop,
.image-lightbox::backdrop {
opacity: 0;
transition:
opacity var(--motion-normal) var(--ease-standard),
display var(--motion-normal) allow-discrete,
overlay var(--motion-normal) allow-discrete;
}
.cert-lightbox[open]::backdrop,
.image-lightbox[open]::backdrop {
opacity: 1;
}
@starting-style {
.cert-lightbox[open],
.image-lightbox[open] {
opacity: 0;
}
.cert-lightbox[open] {
translate: 0 8px;
scale: 0.985;
}
.image-lightbox[open] .lightbox-content {
translate: 0 8px;
scale: 0.99;
}
.cert-lightbox[open]::backdrop,
.image-lightbox[open]::backdrop {
opacity: 0;
}
}
}
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.project-actions .external-icon {
transition:
opacity var(--motion-fast) var(--ease-standard),
translate var(--motion-normal) var(--ease-standard);
}
.project-actions a:hover .external-icon {
translate: 0 -1px;
}
}
@keyframes feedback-confirm {
40% { scale: 1.12; }
100% { scale: 1; }
}
@media (prefers-reduced-motion: no-preference) {
:is(.btn, .audio-control, .skill-btn, .device-btn, .device-carousel-arrow, .select-menu-trigger, .footer-share, .cert-thumb-btn) {
transition: scale var(--motion-fast) var(--ease-standard);
}
:is(.btn, .audio-control, .skill-btn, .device-btn, .device-carousel-arrow, .select-menu-trigger, .footer-share, .cert-thumb-btn):not(:disabled, [aria-disabled="true"]):active { scale: 0.97; }
.feedback-card:is([data-state="error"], [data-state="offline"], [data-state="slow"]),
.audio-player-feedback:not([hidden]),
.connection-notice:not([hidden]) { animation: feedback-arrival var(--motion-normal) var(--ease-emphasized); }
.feedback-card[data-state="ready"] .feedback-mark { animation: feedback-confirm var(--motion-slow) var(--ease-emphasized); }
.feedback-card[data-state="loading"] .feedback-mark::after,
.feedback-inline[data-state="loading"]::before,
.global-audio-player:is([data-state="loading"], [data-state="buffering"]) .audio-player-artwork::after,
.copy-toast[data-tone="loading"]::before { animation: feedback-spin 900ms linear infinite; }
}
.copy-toast[data-tone="loading"]::before {
content: "";
display: inline-block;
inline-size: 0.875rem;
block-size: 0.875rem;
margin-inline-end: var(--space-2);
vertical-align: middle;
border: 2px solid currentcolor;
border-inline-end-color: transparent;
border-radius: 50%;
}
@keyframes feedback-spin { to { rotate: 1turn; } }
@keyframes feedback-arrival {
from { translate: 0 3px; }
to { translate: 0 0; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.btn .btn-icon,
.feedback-direct { transition: translate var(--motion-normal) var(--ease-emphasized); }
.btn:not(:disabled):hover .btn-icon { translate: 0 -1px; }
.feedback-direct:hover { translate: 0 -1px; }
}
@media (prefers-reduced-motion: reduce) {
.copy-toast {
transform: none;
}
}
@media print {
.feedback-actions,
.feedback-mark,
.audio-player-feedback { display: none !important; }
.feedback-card { display: block; }
.section-nav-indicator,
.case-section-indicator {
animation: none !important;
}
}
@media screen and (min-width: 561px) and (max-width: 1080px) {
.portfolio-header {
padding-inline: clamp(20px, 4vw, 36px);
}
.hero {
grid-template-columns: 1fr;
gap: 12px;
padding: 0;
}
.hero-identity {
flex: 1 1 100%;
max-width: 100%;
}
.hero-contact-card {
width: 100%;
max-width: 1080px;
}
.hero-controls-rail {
flex: 0 0 auto;
}
.hero-ctas {
position: relative;
}
.resume-download-menu {
position: static;
}
.resume-download-options {
inset-inline: 0 auto;
min-width: 0;
max-width: 100%;
}
}
@media (max-width: 1080px) {
.hero-identity {
grid-template-columns: 104px minmax(0, 1fr);
}
.hero-controls-rail {
grid-column: 1 / -1;
grid-row: 1;
margin-block-end: var(--space-2);
}
.avatar-wrap {
grid-row: 2 / span 6;
}
.identity-copy > h1 { grid-row: 2; }
.identity-copy > .hero-role { grid-row: 3; }
}
@media (max-width: 700px) {
.controls-group {
flex-flow: row wrap;
align-items: stretch;
gap: 8px;
justify-content: space-between;
}
.language-selector {
flex: 0 0 auto;
width: auto;
max-width: 100%;
justify-content: center;
padding: 3px;
}
.language-selector-icon {
display: grid;
width: 18px;
flex-basis: 18px;
}
.language-option, .theme-option {
min-width: 44px;
min-height: 44px;
font-size: 0.75rem;
padding: 0 6px;
}
.control-label-full { display: none; }
.control-label-short { display: inline; }
.portfolio-header .hero-controls-rail {
width: 100%;
justify-self: stretch;
}
.portfolio-header .controls-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
width: 100%;
gap: 8px;
}
.portfolio-header :is(.language-selector, .theme-control) {
box-sizing: border-box;
width: 100%;
min-width: 0;
grid-template-columns: repeat(2, minmax(44px, 1fr));
align-items: stretch;
padding: 3px;
gap: 3px;
}
.portfolio-header .language-selector { display: grid; }
.portfolio-header .language-selector .language-option { inline-size: auto; }
.portfolio-header .language-selector-icon { display: none; }
.portfolio-header :is(.language-option, .theme-option) {
inline-size: auto;
min-inline-size: 44px;
min-block-size: 44px;
padding: 4px;
font-size: clamp(0.75rem, 3.3vw, 0.8125rem);
line-height: 1.3;
}
.portfolio-header .theme-option { flex-wrap: wrap; gap: 4px; }
.portfolio-header .theme-option svg { inline-size: 14px; block-size: 14px; }
}
@media (max-width: 560px) {
.resume-shell {
padding: 0;
}
.resume-card {
border-radius: 0;
min-height: 100vh;
border-width: 0;
}
.portfolio-header {
margin: 0;
padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
border-inline: 0;
border-radius: 0 0 24px 24px;
}
.hero {
display: flex;
min-height: auto;
padding: 0;
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.hero-identity {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
align-items: center;
text-align: start;
gap: var(--space-2) var(--space-4);
}
.avatar-wrap {
grid-column: 1;
grid-row: 2 / span 2;
width: 52px;
height: 52px;
}
.identity-copy {
display: contents;
}
.identity-copy h1,
.hero-role {
grid-column: 2;
text-align: start;
margin: 0;
}
.identity-copy h1 {
font-size: clamp(1.55rem, 7vw, 1.8rem);
}
.hero-role {
font-size: 0.9rem;
}
.hero-bio,
.hero-hiring,
.tags,
.hero-ctas {
grid-column: 1 / -1;
}
.hero-bio {
text-align: start;
margin-block-start: var(--space-2);
}
.tags {
justify-content: flex-start;
margin-block-start: 0;
}
.hero-ctas {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
position: relative;
justify-content: flex-start;
gap: var(--space-2);
margin-block-start: var(--space-2);
width: 100%;
}
.hero-ctas > * {
flex: 1 1 9rem;
min-width: 0;
}
.hero-ctas .btn {
width: 100%;
min-height: 48px;
box-sizing: border-box;
justify-content: center;
padding-inline: var(--space-2);
font-size: 0.8125rem;
}
.resume-download-menu {
position: relative;
max-width: 100%;
}
.hero-btn-resume {
max-width: 100%;
text-align: center;
white-space: normal;
}
.resume-download-options {
inset-inline: auto 0;
width: min(22rem, calc(100vw - 32px));
min-width: 0;
max-width: calc(100vw - 32px);
}
.hero-contact-card {
width: 100%;
max-width: none;
padding: 4px;
border-radius: 18px;
}
.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: row;
justify-content: center;
gap: 7px;
min-height: var(--target-min);
padding: 6px 4px;
text-align: center;
}
.contact-icon {
display: inline-grid;
}
.hero-contact-card .contact-label {
font-size: 0.75rem;
min-inline-size: 0;
overflow-wrap: anywhere;
word-break: normal;
}
.contact-link-arrow {
display: none;
}
.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;
}
.section-nav {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
width: calc(100% - 20px);
max-width: 440px;
margin: var(--space-3) auto var(--space-2);
top: 8px;
padding: 4px;
gap: 2px;
border-radius: var(--radius-md);
border: 1px solid var(--soft-line);
background: var(--surface);
box-shadow: var(--shadow-rail);
overflow: hidden;
touch-action: pan-y pinch-zoom;
scrollbar-width: none;
}
.section-nav::-webkit-scrollbar {
display: none;
}
.section-nav a,
.section-nav-link {
flex: 1 1 auto;
min-width: var(--target-min);
min-height: 44px;
padding: 6px 4px;
font-size: 0.8125rem;
gap: 5px;
justify-content: center;
text-align: center;
white-space: normal;
overflow-wrap: normal;
border-radius: var(--radius-sm);
}
.section-nav-icon {
display: none;
}
.section-nav-link > span {
min-inline-size: 0;
overflow-wrap: normal;
}
.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, calc(var(--player-clearance, 24px) + var(--update-clearance, 0px)), env(safe-area-inset-bottom));
}
.has-audio-player .back-to-top-fab {
inset-block-end: max(298px, calc(var(--player-clearance, 24px) + var(--update-clearance, 0px)));
}
.has-audio-player.audio-player-compact .back-to-top-fab {
inset-block-end: max(142px, calc(var(--player-clearance, 24px) + var(--update-clearance, 0px)));
}
html {
scroll-padding-top: var(--navigation-clearance);
}
.panel {
scroll-margin-top: 0;
padding: var(--space-6) 0;
}
.content-grid {
gap: var(--space-section);
padding: 0 var(--space-4) var(--space-4);
}
.section-intro {
margin-block-end: var(--space-4);
}
.section-intro h2 {
font-size: 1.6rem;
}
.project-card-featured {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.project-card-featured .project-card-content {
display: contents;
}
.project-card-featured h3 {
grid-row: 1;
margin: 0;
padding: var(--space-4);
font-size: 1.15rem;
}
.project-card-featured .project-card-tag {
display: none;
}
.project-card-featured .project-card-content > :is(p, div, small, details) {
margin-inline: var(--space-4);
}
.project-card-featured .project-card-content > p {
margin-block-start: var(--space-4);
}
.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;
padding: var(--space-6) var(--space-4) calc(var(--space-8) + var(--target-min));
}
.footer-game-link {
inline-size: 100%;
}
}
@media screen and (min-width: 561px) and (max-width: 960px) {
.case-study-hero {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.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: none;
}
.case-study-card {
margin-top: 8px;
padding: 18px;
}
.case-study-hero {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
.case-hero-image {
order: 2;
}
.case-meta-item {
flex-basis: 100%;
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 0 auto;
}
.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 pinch-zoom;
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 auto;
min-width: 0;
min-height: 44px;
padding: 6px 3px;
font-size: 0.74rem;
gap: 4px;
justify-content: center;
text-align: center;
white-space: normal;
border-radius: 999px;
}
.case-section-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.case-section-jump {
display: none;
}
.case-cta-wrapper {
flex-direction: row;
align-items: center;
}
.case-live-cta,
.case-preview-toggle {
width: auto;
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: flex;
align-items: center;
flex-wrap: wrap;
}
.case-cta-wrapper > .btn {
min-width: 0;
min-height: 44px;
height: auto;
padding-block: 10px;
white-space: normal;
}
}
@media (max-width: 360px) {
.portfolio-header .contact-link-main {
flex-direction: column;
gap: 4px;
}
.portfolio-header .contact-label {
max-inline-size: 100%;
overflow-wrap: anywhere;
line-height: 1.3;
}
}
@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;
}
.breadcrumbs [aria-current="page"] {
max-width: 200px;
}
}
@media (max-width: 800px) {
.skill-group {
grid-template-columns: 1fr;
gap: 16px;
}
.impact-cards {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.employment-panel .li-experience-group {
padding: var(--space-4) 0;
}
.li-roles-list {
margin-inline-start: 0;
}
.skills-panel .pills {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.skills-panel .skill-group {
padding: 16px 0;
gap: 12px;
}
.skills-panel .skill-btn {
min-block-size: 48px;
gap: 12px;
padding: 12px;
}
.skills-panel .skill-group-header {
gap: 10px;
}
.skills-panel .skill-group-header :is(h3, p) {
overflow-wrap: normal;
}
.skills-explore-hint {
align-items: flex-start;
}
.skills-explore-hint svg {
margin-block-start: 4px;
}
}
@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 4px;
font-size: 0.8125rem;
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;
}
}
:is(button, .btn, summary, select, .select-menu-trigger, .select-menu-panel,
.language-selector, .language-option, .theme-control, .theme-option,
.portfolio-header, .project-card, .skill-group,
.compact-list > li, .tag-pill, .pills > span, .recordings-tags > span,
.section-nav, .section-nav > a, .case-section-nav, .case-section-link,
.case-nav-back-pill, .case-brief, .case-meta-grid, .case-accordion,
.case-callout, .provenance-card, .case-metric-card, .pagination-card,
.walkthrough-step, .comparison-table caption, .comparison-table th,
.case-device-card, .device-carousel-shell, .device-carousel-toolbar,
.recordings-entry, .recordings-hero, .recording-card, .recordings-index,
.contact-invitation, .feedback-card, .device-carousel-feedback,
.connection-notice, .copy-toast, .app-update, .global-audio-player,
.audio-player-feedback, .resume-download-options, dialog,
.skill-dialog-card, .live-embed-bar, .site-footer, .rescue-card,
.rescue-scene, .rescue-option, .rescue-theme, .rescue-locale,
.rescue-scene-task, .rescue-deltas li, .rescue-emblem) {
background-image: var(--card-grain) !important;
background-repeat: repeat;
}
@media (forced-colors: active), (prefers-contrast: more), print {
:root, [data-theme="dark"] { --card-grain: none; }
}
.image-lightbox {
inline-size: 100%;
block-size: 100dvh;
max-inline-size: none;
max-block-size: none;
}
.image-lightbox .lightbox-content {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
align-items: stretch;
max-block-size: calc(100dvh - 40px);
}
.image-lightbox .lightbox-img-wrapper {
display: grid;
grid-template-rows: minmax(0, 1fr);
min-block-size: 0;
max-block-size: 100%;
}
.image-lightbox .lightbox-img {
inline-size: 100%;
block-size: 100%;
min-block-size: 0;
max-block-size: 100%;
object-fit: contain;
}
.image-lightbox .lightbox-caption {
max-block-size: 40dvh;
overflow: auto;
}
.image-lightbox .lightbox-caption:focus-visible {
outline-offset: -4px;
}
.comparison-recommendations > li > a[href^="#evidence-"] {
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: var(--target-min);
min-block-size: var(--target-min);
margin-inline-end: var(--space-1);
}
@media (prefers-reduced-transparency: reduce) {
.case-section-nav,
.global-audio-player,
.back-to-top-fab {
background: var(--surface);
backdrop-filter: none;
}
.image-lightbox,
.image-lightbox::backdrop,
.cert-lightbox::backdrop,
.skill-dialog::backdrop {
background: var(--page);
backdrop-filter: none;
}
}
@media (prefers-contrast: more) {
:root {
--page-background: var(--page);
--card-grain: none;
--card-edge-shadow: inset 0 0 0 transparent;
--card-surface-shadow: none;
}
}
@media (forced-colors: active) {
:root {
--page: Canvas;
--surface: Canvas;
--panel: Canvas;
--card-surface: Canvas;
--line: ButtonBorder;
--soft-line: ButtonBorder;
--section-rule: ButtonBorder;
--text: CanvasText;
--muted: HighlightText;
--blue: LinkText;
--accent: Highlight;
--focus: Highlight;
--page-background: Canvas;
--card-grain: none;
--card-surface-shadow: none;
--hero-title: CanvasText;
--hero-subtitle: HighlightText;
--project-bg: Canvas;
--cert-card: Canvas;
--pill-bg: Canvas;
--date-bg: Canvas;
--date-text: LinkText;
}
.theme-control {
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-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-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;
}
@media (hover: none), (pointer: coarse), (max-width: 560px) {
.copy-button {
opacity: 1;
}
[data-tooltip]::before,
[data-tooltip]::after {
display: none !important;
}
}
[data-theme="dark"] .portfolio-header .identity-copy h1 {
color: var(--hero-title);
}
[data-theme="dark"] .portfolio-header .hero-role {
color: var(--hero-role-color);
}
[data-theme="dark"] .portfolio-header .hero-bio {
color: #d5deeb;
}
[data-theme="dark"] .portfolio-header .avatar {
border-color: var(--soft-line);
box-shadow: none;
}
[data-theme="dark"] .portfolio-header .tag-pill {
background: transparent;
border: 0;
color: #dbe7f5;
box-shadow: none;
}
[data-theme="dark"] .portfolio-header .tag-pill:hover {
background: rgb(255 255 255 / 8%);
border-color: #79c0ff;
color: #79c0ff;
}
[data-theme="dark"] .portfolio-header .contact-label {
color: #f0f6fc;
}
[data-theme="dark"] .portfolio-header .contact-desc {
color: #cbd5e1;
}
[data-theme="dark"] .portfolio-header .contact-item:hover,
[data-theme="dark"] .portfolio-header .contact-item:focus-within {
background: rgb(255 255 255 / 7%);
}
[data-theme="dark"] .portfolio-header .contact-link-main:hover .contact-label,
[data-theme="dark"] .portfolio-header .contact-link-main:focus-visible .contact-label {
color: #79c0ff;
}
[data-theme="dark"] :is(.portfolio-header, .case-study-controls) .language-selector, [data-theme="dark"] :is(.portfolio-header, .case-study-controls) .theme-control {
background: rgb(7 16 29 / 32%);
border-color: rgb(203 213 225 / 18%);
}
[data-theme="dark"] .portfolio-header .language-selector-icon {
color: #8fcaff;
}
[data-theme="dark"] :is(.portfolio-header, .case-study-controls) .language-option, [data-theme="dark"] :is(.portfolio-header, .case-study-controls) .theme-option {
color: #cbd5e1;
}
[data-theme="dark"] :is(.portfolio-header, .case-study-controls) .language-option:hover, [data-theme="dark"] :is(.portfolio-header, .case-study-controls) .theme-option:hover {
color: #fff;
background: rgb(255 255 255 / 8%);
border-color: rgb(255 255 255 / 15%);
}
[data-theme="dark"] :is(.portfolio-header, .case-study-controls) .language-option:has(input:focus-visible), [data-theme="dark"] :is(.portfolio-header, .case-study-controls) .theme-option:focus-visible {
outline: 2px solid #60a5fa;
outline-offset: 2px;
}
[data-theme="dark"] :is(.portfolio-header, .case-study-controls) .language-option:has(input:checked), [data-theme="dark"] :is(.portfolio-header, .case-study-controls) .theme-option[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 0s var(--ease-standard),
color 0s var(--ease-standard);
}
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.project-card,
.provenance-card {
transition:
transform var(--motion-normal) var(--ease-standard),
box-shadow 0s var(--ease-standard),
border-color 0s var(--ease-standard);
}
.project-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card-hover);
}
.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.018);
}
.contact-link-main .contact-icon {
transition: transform var(--motion-normal) var(--ease-standard);
}
.contact-link-main:hover .contact-icon {
transform: translateY(-1px);
}
.skill-btn {
transition:
scale var(--motion-fast) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard),
background-color 0s var(--ease-standard),
border-color 0s 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 & AI Workflow Lead";
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; }
.portfolio-header,
.project-card,
.contact-invitation {
background-image: none !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; }
.specialty-links,
.recordings-entry,
.transcript-link,
.contact-invitation,
.brief-explore,
.portfolio-motif,
.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-story-section {
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; }
}