/* ===================================================================== theme.css: the extra tokens every page uses, light mode, and the preferences control (theme + language). Loaded after each page's own styles. Dark is the default; [data-theme="light"] on switches. ===================================================================== */ :root{ --text-2:#D6D1CD;--muted-2:#8F8884;--surface-3:#3D3838; --card:#242121;--card-hover:#1F1D1D;--well:#1C1A1A;--peek:#2E2A2A;--peek-tile:#1E1C1C; --glass:rgba(42,39,39,.92);--veil:rgba(18,16,16,.78);--accent-hover:#F4A07D;--shadow:rgba(0,0,0,.8); } :root[data-theme="light"]{ color-scheme:light; --bg:#F7F3EF;--surface:#EFE9E4;--surface-2:#E6DFD9;--surface-3:#DDD5CE;--line:#DDD4CD; --text:#2B2523;--display:#1E1A19;--muted:#6B625D;--text-2:#4A423F;--muted-2:#736A65; --accent:#A94A24;--accent-ink:#FFFFFF;--accent-hover:#8E3E1D;--clay:#A97A69;--clay-deep:#6E3F2E; --card:#FFFFFF;--card-hover:#FBF8F5;--well:#EAE4DE;--peek:#E9E3DD;--peek-tile:#E2DBD4; --glass:rgba(255,252,249,.92);--veil:rgba(247,243,239,.88);--scrim:rgba(60,40,30,.22);--shadow:rgba(60,40,30,.22); } :root[data-theme="light"] body{background:var(--bg);color:var(--text)} :root[data-theme="light"] ::-webkit-scrollbar-track{background:var(--bg)} :root[data-theme="light"] ::-webkit-scrollbar-thumb{background:var(--line);border-color:var(--bg)} :root[data-theme="light"] .side-photo,:root[data-theme="light"] .side-photo img{box-shadow:0 0 0 1px var(--line)} :root[data-theme="light"] .glow{opacity:.75} /* ===================================================================== Light mode depth. The dark theme's shadows were black at 70-90%: on paper they turn into grey smudges. One light source (above), one tint (the warm ink, 60 40 30), five steps. Each step pairs a tight contact shadow with a soft cast one; the cast grows and the contact fades as things come closer. Raised surfaces are lighter than the page (white on cream), never darker: darker reads as a well. ===================================================================== */ :root[data-theme="light"]{ --hair:0 0 0 1px rgba(60,40,30,.07); /* edge definition for white on cream */ --lit:inset 0 1px 0 rgba(255,255,255,.75); /* the lit top edge of a raised surface */ --elev-1:0 1px 2px rgba(60,40,30,.06),0 2px 8px rgba(60,40,30,.06); /* resting cards */ --elev-2:0 2px 4px rgba(60,40,30,.06),0 10px 24px -6px rgba(60,40,30,.14); /* hover lift, floating buttons */ --elev-3:0 4px 10px rgba(60,40,30,.05),0 20px 44px -14px rgba(60,40,30,.20); /* popovers: folder previews, dock */ --elev-4:0 8px 20px rgba(60,40,30,.06),0 32px 72px -24px rgba(60,40,30,.26); /* modal: the drawer, the photo viewer */ } /* cards that sit on the page: white, lit edge, resting shadow; they lift on hover */ :root[data-theme="light"] .tm-card, :root[data-theme="light"] .beliefs li, :root[data-theme="light"] .find a{background:var(--card);box-shadow:var(--lit),var(--hair),var(--elev-1)} :root[data-theme="light"] .tm-card:hover, :root[data-theme="light"] .find a:hover{background:var(--card);box-shadow:var(--lit),var(--hair),var(--elev-2)} :root[data-theme="light"] .tm-card .tm-by{background:#FAF6F2;box-shadow:inset 0 1px 0 rgba(60,40,30,.06)} :root[data-theme="light"] .quest:hover{background:var(--card);border-color:transparent;box-shadow:var(--hair),var(--elev-2)} :root[data-theme="light"] .tm-dots button{background:rgba(60,40,30,.22)} :root[data-theme="light"] .tm-dots button[aria-current="true"]{background:var(--accent)} /* the hero */ :root[data-theme="light"] .inline-reel::after{box-shadow:inset 0 0 0 1px rgba(60,40,30,.08)} :root[data-theme="light"] .inline-reel:hover{box-shadow:var(--elev-3)} :root[data-theme="light"] .chip-img:hover{box-shadow:var(--hair),var(--elev-3)} :root[data-theme="light"] .logo-stack img{box-shadow:0 0 0 2px var(--bg),0 4px 12px -4px rgba(60,40,30,.28)} :root[data-theme="light"] .sel-cursor svg{filter:drop-shadow(0 1px 1px rgba(60,40,30,.25))} /* the work list's folder previews and the company cards: white fronts, warm backs, a popover shadow */ :root[data-theme="light"] .peek-back, :root[data-theme="light"] .f-back{background:var(--surface-2);box-shadow:var(--elev-3)} :root[data-theme="light"] .peek-back::before, :root[data-theme="light"] .f-back::before{background:var(--surface-2)} :root[data-theme="light"] .peek-front, :root[data-theme="light"] .f-front, :root[data-theme="light"] .co-card{background:var(--card);box-shadow:var(--lit),0 -10px 24px -16px rgba(60,40,30,.18)} :root[data-theme="light"] .co-card{box-shadow:var(--lit),var(--hair),var(--elev-3)} :root[data-theme="light"] .peek-tiles img, :root[data-theme="light"] .co-tiles img, :root[data-theme="light"] .f-tiles img{background:var(--card);box-shadow:var(--hair),0 6px 16px -6px rgba(60,40,30,.22)} :root[data-theme="light"] .co-logo{box-shadow:0 0 0 3px var(--card),0 8px 18px -8px rgba(60,40,30,.28)} /* the stack game: bricks cast a short warm shadow; the win badge is the accent with white ink */ :root[data-theme="light"] .brick{filter:drop-shadow(0 3px 5px rgba(60,40,30,.16))} :root[data-theme="light"] .stack-layer .brick{filter:none} :root[data-theme="light"] .win-badge{color:var(--accent-ink);box-shadow:inset 0 -8px 0 rgba(0,0,0,.16),0 10px 24px -10px rgba(169,74,36,.40)} :root[data-theme="light"] .win-badge::before,:root[data-theme="light"] .win-badge::after{background:#BD5E36} :root[data-theme="light"] .base-block.cheer .b-face{animation-name:baseGlowLight} @keyframes baseGlowLight{0%{box-shadow:0 0 0 0 rgba(169,74,36,0)}30%{box-shadow:0 0 0 4px rgba(169,74,36,.18),0 0 36px 6px rgba(169,74,36,.22)}100%{box-shadow:0 0 0 0 rgba(169,74,36,0)}} /* the case drawer: the page's cream on top of the dimmed page, with a modal shadow on its open edge */ :root[data-theme="light"] .sheet,:root[data-theme="light"] .sheet-bar{background:var(--bg)} :root[data-theme="light"] .sheet{box-shadow:-24px 0 64px -28px rgba(60,40,30,.30),48px 0 0 0 var(--bg)} :root[data-theme="light"][dir="rtl"] .sheet{box-shadow:24px 0 64px -28px rgba(60,40,30,.30),-48px 0 0 0 var(--bg)} :root[data-theme="light"] .shot a{box-shadow:var(--hair),var(--elev-1)} :root[data-theme="light"] .shot a:hover{box-shadow:var(--hair),var(--elev-2)} /* the photo viewer (home lightbox) */ :root[data-theme="light"] .lb-img{box-shadow:var(--hair),var(--elev-4)} :root[data-theme="light"] .lb-img.zoomed{box-shadow:none} :root[data-theme="light"] .lb-close,:root[data-theme="light"] .lb-nav{background:var(--card);color:var(--text);box-shadow:var(--hair),var(--elev-2)} :root[data-theme="light"] .lb-close:hover,:root[data-theme="light"] .lb-nav:hover{background:var(--accent);color:var(--accent-ink);box-shadow:var(--elev-2)} /* the dock (the playground draws its own cards on its grey stage) */ :root[data-theme="light"] .dock ul{box-shadow:var(--hair),var(--elev-3)} /* about, resume */ :root[data-theme="light"] .ab-photo{box-shadow:0 0 0 1px var(--line),var(--elev-3)} :root[data-theme="light"] .thumb:hover{box-shadow:0 0 0 1px var(--clay),var(--elev-2)} :root[data-theme="light"] .tool{box-shadow:inset 0 0 0 1px rgba(60,40,30,.05)} :root[data-theme="light"] .tower span{box-shadow:inset 0 -6px 0 rgba(60,40,30,.16)} :root[data-theme="light"] .tower span:nth-child(2n){background:#6B5F59} :root[data-theme="light"] .tower span:nth-child(2n)::before{background:repeating-linear-gradient(90deg,#6B5F59 0 14px,transparent 14px 26px)} /* the floating theme + language pill sits on content: give it the popover step */ :root[data-theme="light"] .prefs-float{box-shadow:var(--elev-2)} /* ---------- preferences: theme + language ---------- */ .prefs{display:flex;align-items:center;gap:8px} .pref{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;min-width:34px;padding:0 10px;border-radius:999px;border:1px solid var(--line);color:var(--text);background:transparent;font:600 .78rem/1 var(--display-font);letter-spacing:.04em;transition:border-color .25s,background .25s,color .25s} .pref:hover{border-color:var(--clay);background:var(--surface)} .pref svg{width:16px;height:16px} .pref .i-sun{display:none} :root[data-theme="light"] .pref .i-sun{display:block} :root[data-theme="light"] .pref .i-moon{display:none} .pref-lang{font-family:"Doran",var(--display-font);font-size:.95rem;min-width:40px} :root[lang="ar"] .pref-lang{font-family:var(--display-font);font-size:.78rem} .prefs-float{position:fixed;top:20px;right:clamp(16px,2.4vw,32px);z-index:9;display:flex;padding:5px;border-radius:999px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .prefs-float .pref{height:32px;min-width:32px;border:0} @media (max-width:1099px){.prefs-float{top:12px;right:12px}} [dir="rtl"] .prefs-float{right:auto;left:clamp(16px,2.4vw,32px)} @media (max-width:1099px){[dir="rtl"] .prefs-float{left:12px}} /* light: the hero glow becomes a soft clay wash (the dark one reads as a grey wedge on paper) */ :root[data-theme="light"] .glow{background:radial-gradient(circle at 60% 40%,rgba(201,140,112,.32),rgba(201,140,112,0) 62%)} :root[data-theme="light"] #page{background:var(--bg)} /* phones and tablets: the home header leaves room for the floating theme + language control */ /* the home and resume headers leave room for it (inline-end = right in English, left in Arabic) */ #page .top{padding-inline-end:max(0px,calc(clamp(16px,2.4vw,32px) + 100px - var(--gutter)))} @media (max-width:1099px){#page .top{padding-inline-end:max(0px,calc(112px - var(--gutter)))}} .page .top{padding-inline-end:112px} /* the playground's "about me" sits beside it */ .pl-about{right:clamp(124px,calc(2.4vw + 104px),136px)} [dir="rtl"] .pl-about{right:auto;left:clamp(124px,calc(2.4vw + 104px),136px)} @media (max-width:1099px){.pl-about{right:116px}[dir="rtl"] .pl-about{left:116px}}