/* ============================================================ DANIEL ALSHRIKY — single page CV Committed single-theme design: paper (hero) inverting to ink. Every surface paints its own ground, so it renders identically regardless of the viewer's light/dark preference. ============================================================ */ :root{ /* ground */ --paper: #E7E6E0; --paper-2: #DCDBD4; --paper-3: #CFCEC6; --ink: #0B0D0C; --ink-2: #121614; --ink-3: #1B211E; /* ink on each ground */ --on-paper: #0B0D0C; --on-paper-mute: #5A615D; --on-paper-faint:#8A908B; --on-ink: #E7E6E0; --on-ink-mute: #8E958F; --on-ink-faint: #5A615D; /* accent — neutral grey, faint green bias to sit in the same family as the neutrals. Mid-tone deliberately: it is used as a filled background on both the light hero and the dark body, so it must hold contrast against each. */ --accent: #9AA09B; --accent-deep: #454B47; /* hairlines, flipped by .on-ink on */ --rule: rgba(11,13,12,.14); --rule-soft: rgba(11,13,12,.08); --gutter: clamp(18px, 4.2vw, 56px); --step: clamp(56px, 9vh, 104px); --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --f-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; --f-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --scrim-a: rgba(231,230,224,.94); --scrim-b: rgba(231,230,224,0); --ease: cubic-bezier(.22,.61,.36,1); } html.on-ink{ --rule: rgba(231,230,224,.13); --rule-soft: rgba(231,230,224,.07); --scrim-a: rgba(11,13,12,.94); --scrim-b: rgba(11,13,12,0); } *,*::before,*::after{ box-sizing:border-box; } html{ font-size:112.5%; /* 18px base — global type scale */ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--ink); color:var(--on-ink); font-family:var(--f-body); font-size:clamp(.95rem, .55vw + .82rem, 1.0625rem); line-height:1.6; font-synthesis-weight:none; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; } ul,ol{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4,p{ margin:0; } ::selection{ background:var(--accent); color:#04120C; } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; } /* ---------- shared type roles ---------- */ .display{ font-family:var(--f-display); font-variation-settings:"wdth" 110, "wght" 800; line-height:.96; letter-spacing:-.018em; text-wrap:balance; } .mono{ font-family:var(--f-mono); font-variation-settings:"wdth" 87.5, "wght" 400; font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.5; } .num{ font-variant-numeric:tabular-nums; } /* ---------- header ---------- */ .masthead{ position:fixed; top:0; left:0; right:0; z-index:80; display:flex; align-items:center; justify-content:flex-end; gap:16px; padding:clamp(16px,2.4vw,26px) var(--gutter); color:var(--on-paper); transition:color .5s var(--ease); } .masthead::before{ content:""; position:absolute; inset:0 0 auto 0; height:190%; background:linear-gradient(to bottom, var(--scrim-a) 38%, var(--scrim-b)); transition:background .5s var(--ease); z-index:-1; pointer-events:none; } html.on-ink .masthead{ color:var(--on-ink); } .masthead__right{ display:flex; align-items:center; gap:clamp(10px,1.6vw,22px); } .masthead__cta{ text-decoration:none; white-space:nowrap; background:none; color:inherit; cursor:pointer; border:1px solid currentColor; padding:7px 13px 6px; border-radius:999px; transition:background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease); } .masthead__cta:hover{ background:var(--accent); border-color:var(--accent); color:#04120C; } /* primary action: always visible, even on the narrowest phone */ .masthead__cta--key{ background:var(--accent); border-color:var(--accent); color:#04120C; font-variation-settings:"wdth" 87.5,"wght" 500; } .masthead__cta--key:hover{ background:var(--accent-deep); border-color:var(--accent-deep); color:var(--on-ink); } /* the long address only fits beside the download CTA on wide screens */ @media (max-width:940px){ .masthead__cta:not(.masthead__cta--key){ display:none; } } /* ---------- generic section shell ---------- */ .band{ position:relative; z-index:1; padding-inline:var(--gutter); } .band--ink{ background:var(--ink); color:var(--on-ink); } .band--paper{ background:var(--paper); color:var(--on-paper); } .row{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(20px,3.2vw,40px); border-top:1px solid var(--rule); padding-block:var(--step); } @media (min-width:900px){ .row{ grid-template-columns:minmax(180px,22%) minmax(0,1fr); gap:clamp(28px,4vw,64px); } } .rail{ position:relative; } @media (min-width:900px){ .rail{ position:sticky; top:clamp(84px,12vh,120px); align-self:start; } } .rail__index{ color:var(--accent); display:block; margin-bottom:.55em; } .rail__title{ font-family:var(--f-display); font-variation-settings:"wdth" 110, "wght" 700; font-size:clamp(1.05rem,1.7vw,1.32rem); line-height:1.08; letter-spacing:-.01em; transition:font-size .5s var(--ease), letter-spacing .5s var(--ease), color .5s var(--ease); } /* The section title blooms while the pointer is anywhere in its section. Driven by font-size rather than transform:scale so the title re-wraps inside the narrow rail instead of spilling across the content column. The hover size is capped so the longest word ("Certification") still fits the rail. */ @media (hover:hover) and (pointer:fine){ .row:hover .rail__title{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing:-.024em; color:var(--accent); } } /* ---------- hero ---------- */ .hero{ background:var(--paper); color:var(--on-paper); padding:clamp(96px,14vh,150px) var(--gutter) clamp(28px,5vh,56px); position:relative; z-index:1; min-height:100svh; display:flex; flex-direction:column; justify-content:center; } /* The particle field fills the whole header; name and title sit over it. */ .hero__stage{ position:relative; width:100%; height:clamp(440px, 88vh, 1000px); margin-block:clamp(8px,2vh,26px) 0; } .hero__idText{ position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:2; max-width:min(56%, 640px); /* let the cursor through to the particles behind the text */ pointer-events:none; } .hero__title{ font-size:clamp(2rem, calc(6.4vw - 8px), 6.5rem); } .hero__role{ color:var(--on-paper-mute); margin-top:.9em; } .hero__body{ display:grid; gap:clamp(24px,4vw,48px); grid-template-columns:minmax(0,1fr); align-items:start; margin-top:clamp(26px,5vh,54px); } @media (min-width:840px){ .hero__body{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); } } /* interactive particle portrait — dark panel so the light particles read */ .pfield{ position:absolute; inset:0; overflow:hidden; cursor:crosshair; touch-action:pan-y; /* never trap a scroll on touch */ } .pfield canvas{ display:block; width:100%; height:100%; } /* The photo is the no-JS fallback only. It used to start visible and fade out once the particles were ready, which flashed the real photo on every load. With JS it is hidden from the first paint; it comes back only if the effect actually fails. */ .pfield img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .4s var(--ease); } html.js .pfield img{ opacity:0; } html.js .pfield.is-fallback img{ opacity:1; } .pfield canvas{ opacity:0; transition:opacity .45s var(--ease); } .pfield.is-live canvas{ opacity:1; } /* Below this width the subject is too wide to clear the text, so overlaying it makes the name unreadable — stack instead of overlap. */ @media (max-width:899px){ .hero__stage{ height:auto; display:flex; flex-direction:column; gap:clamp(14px,3vh,28px); } .hero__idText{ position:static; transform:none; max-width:none; pointer-events:auto; order:1; text-align:center; /* stacked layout: centre the name */ } .pfield{ position:relative; inset:auto; width:100%; height:clamp(320px,52vh,540px); order:2; } } .portrait{ width:clamp(96px,17vw,150px); aspect-ratio:1; border-radius:50%; overflow:hidden; background:var(--paper-3); position:relative; flex:none; } .portrait img{ width:100%; height:100%; object-fit:cover; } .portrait::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(11,13,12,.16); } /* column heads: About and Direct share a baseline across the hero */ .hero__label{ color:var(--on-paper-mute); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--rule); } .hero__intro{ max-width:56ch; } .hero__intro p + p{ margin-top:.9em; } /* the label is a

too — don't let it pick up the paragraph gap */ .hero__intro .hero__label + p{ margin-top:0; } .hero__intro strong{ font-weight:600; } /* closing line of the About copy — inherits the same colour as the paragraphs above it, so it is typographically indistinguishable from them */ .hero__status{ color:inherit; } /* ---------- contact strip ---------- */ .links{ display:flex; flex-wrap:wrap; gap:8px; } .link-chip{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; border:1px solid var(--rule); padding:8px 13px 7px; border-radius:999px; color:inherit; transition:background .26s var(--ease), color .26s var(--ease), border-color .26s var(--ease), transform .26s var(--ease); } .link-chip:hover{ background:var(--accent); border-color:var(--accent); color:#04120C; transform:translateY(-2px); } button.link-chip{ background:none; color:inherit; cursor:pointer; } /* keep the icon out of the event path so e.target is always the button */ [data-copy] svg{ pointer-events:none; } /* copy-to-clipboard */ .outro__copy{ background:none; border:0; padding:0 0 2px; color:inherit; cursor:pointer; font:inherit; text-align:left; width:fit-content; border-bottom:1px solid var(--rule); transition:border-color .24s var(--ease), color .24s var(--ease); } .outro__copy:hover{ border-color:var(--accent); color:var(--accent); } .link-chip.is-copied, .masthead__cta.is-copied{ background:var(--accent); border-color:var(--accent); color:#04120C; } .outro__copy.is-copied{ color:var(--accent); border-color:var(--accent); } .link-chip--key{ border-color:var(--accent-deep); color:var(--accent-deep); font-variation-settings:"wdth" 87.5,"wght" 500; } .link-chip svg{ width:11px; height:11px; flex:none; } /* ---------- career span: a vertical column where block height IS duration ---------- */ .span{ position:relative; display:grid; grid-template-columns:38px minmax(0,1fr); gap:16px; height:clamp(780px, 88vh, 980px); } @media (min-width:760px){ .span{ grid-template-columns:56px minmax(0,1fr); gap:26px; } } .span__rail{ position:relative; } .span__rail::after{ content:""; position:absolute; top:0; bottom:0; right:-13px; width:1px; background:var(--rule); } @media (min-width:760px){ .span__rail::after{ right:-13px; } } .span__rail span{ position:absolute; top:var(--y); right:0; transform:translateY(-50%); font-family:var(--f-mono); font-variation-settings:"wdth" 87.5,"wght" 400; font-size:.6875rem; letter-spacing:.05em; color:var(--on-ink-faint); font-variant-numeric:tabular-nums; } .span__stack{ display:flex; flex-direction:column; height:100%; clip-path:inset(0 0 100% 0); } .span.in .span__stack{ clip-path:inset(0 0 0 0); transition:clip-path 1.05s var(--ease); } .span__seg{ position:relative; height:var(--h); min-height:0; border-top:1px solid var(--rule); padding:9px 0 0 15px; display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 14px; overflow:hidden; transition:background .28s var(--ease); } .span__seg::before{ content:""; position:absolute; left:0; top:2px; bottom:2px; width:3px; background:var(--on-ink-faint); transition:background .28s var(--ease); } .span__seg:hover{ background:rgba(231,230,224,.04); } .span__seg:hover::before{ background:var(--on-ink); } .span__seg.is-now::before{ background:var(--accent); } .span__seg.is-now:hover::before{ background:var(--accent); } .span__seg.is-void{ pointer-events:none; } .span__seg.is-void::before{ background:repeating-linear-gradient(to bottom, var(--rule) 0 3px, transparent 3px 8px); } .span__org{ font-family:var(--f-display); font-variation-settings:"wdth" 110,"wght" 700; font-size:clamp(.82rem,1.15vw,.98rem); letter-spacing:-.004em; line-height:1.2; transform-origin:left center; transition:transform .4s var(--ease); } .span__seg:hover .span__org{ transform:scale(1.04); } .span__meta{ font-family:var(--f-mono); font-variation-settings:"wdth" 87.5,"wght" 450; font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; color:var(--on-ink-mute); line-height:1.4; } .span__when{ margin-left:auto; font-family:var(--f-mono); font-variation-settings:"wdth" 87.5,"wght" 400; font-size:.6875rem; letter-spacing:.05em; text-transform:uppercase; color:var(--on-ink-mute); font-variant-numeric:tabular-nums; } .span__seg.is-now .span__when{ color:var(--accent); } @media (max-width:700px){ .span__when{ display:none; } } /* narrow phones: tighten the mono so org + role stay on one line, and give the short blocks enough height that a wrap is never clipped */ @media (max-width:480px){ .span{ height:1060px; } .span__seg{ gap:2px 10px; } .span__meta{ font-variation-settings:"wdth" 75,"wght" 500; letter-spacing:.02em; } } /* ---------- experience ---------- */ .jobs{ display:flex; flex-direction:column; } .job{ position:relative; border-top:1px solid var(--rule); padding:clamp(22px,3.6vh,34px) 0 clamp(24px,4vh,40px) clamp(14px,2vw,26px); transition:background .3s var(--ease); } .job::before{ content:""; position:absolute; left:0; top:-1px; bottom:0; width:2px; background:transparent; transition:background .3s var(--ease); } .job:hover{ background:rgba(231,230,224,.022); } .job:hover::before{ background:var(--accent); } .job__head{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px clamp(12px,1.6vw,20px); align-items:baseline; } .job__no{ color:var(--accent); font-variation-settings:"wdth" 87.5,"wght" 500; font-variant-numeric:tabular-nums; } .job__title{ font-family:var(--f-display); font-variation-settings:"wdth" 110, "wght" 700; font-size:clamp(1.05rem,1.85vw,1.48rem); line-height:1.14; letter-spacing:-.012em; text-wrap:balance; transform-origin:left center; transition:transform .4s var(--ease), color .4s var(--ease); } .job:hover .job__title{ transform:scale(1.03); color:var(--on-ink); } .job__org{ grid-column:2; margin-top:.5em; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; color:var(--on-ink-faint); } .job__org b{ color:var(--on-ink); font-variation-settings:"wdth" 87.5,"wght" 500; } /* middle dot between company · dates · location */ .job__org > * + *::before{ content:"\00B7"; margin-right:12px; color:var(--on-ink-faint); } .job__dates{ color:var(--on-ink-mute); white-space:nowrap; font-variant-numeric:tabular-nums; } .jobs > .job:first-child .job__dates{ color:var(--accent); } .job__list{ margin-top:clamp(15px,2.2vh,24px); font-size:1rem; line-height:1.52; column-gap:clamp(26px,3.4vw,52px); } @media (min-width:900px){ .job__list{ columns:2; } } .job__list li{ position:relative; padding-left:19px; margin-bottom:.58em; color:var(--on-ink-mute); break-inside:avoid; } .job__list li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--accent); } /* ---------- capability columns ---------- */ .cols{ display:grid; gap:clamp(26px,4vw,44px); grid-template-columns:minmax(0,1fr); } @media (min-width:720px){ .cols--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:960px){ .cols--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .col__head{ color:var(--accent); padding-bottom:10px; margin-bottom:16px; border-bottom:1px solid var(--rule); } /* the three capability groups stack full width, each flowing into the number of columns its own content wants — prose needs a wider measure than short items */ .capblock + .capblock{ margin-top:clamp(34px,5.4vh,60px); } .sub__head{ color:var(--on-ink-faint); margin-bottom:11px; } .toolkit{ display:grid; gap:clamp(20px,2.8vw,34px); grid-template-columns:minmax(0,1fr); } @media (min-width:620px){ .toolkit{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:1040px){ .toolkit{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .plain{ display:flex; flex-direction:column; gap:.55em; } .plain--2,.plain--3{ display:block; } .plain--2 > li,.plain--3 > li{ margin-bottom:.55em; break-inside:avoid; } @media (min-width:820px){ .plain--2{ columns:2; column-gap:clamp(28px,3.6vw,56px); } } @media (min-width:700px){ .plain--3{ columns:2; column-gap:clamp(24px,3vw,46px); } } @media (min-width:1040px){ .plain--3{ columns:3; } } .plain li{ position:relative; padding-left:18px; color:var(--on-ink-mute); } .plain li::before{ content:""; position:absolute; left:0; top:.68em; width:5px; height:5px; border:1px solid var(--accent); } .plain li b{ color:var(--on-ink); font-weight:600; } /* ---------- tag chips ---------- */ .tags{ display:flex; flex-wrap:wrap; gap:6px; } .tag{ font-family:var(--f-mono); font-variation-settings:"wdth" 87.5,"wght" 400; font-size:.6875rem; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--rule); padding:6px 10px 5px; border-radius:2px; color:var(--on-ink-mute); transition:border-color .24s var(--ease), color .24s var(--ease); } .tag:hover{ border-color:var(--accent); color:var(--on-ink); } .tag--key{ border-color:var(--accent); color:var(--accent); } /* ---------- credentials ---------- */ .cred{ display:flex; flex-direction:column; gap:clamp(22px,3.4vh,34px); } .cred__group{ border-top:1px solid var(--rule-soft); padding-top:16px; } .cred__src{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:12px; } .cred__src strong{ font-family:var(--f-display); font-variation-settings:"wdth" 110,"wght" 700; font-size:.95rem; letter-spacing:-.005em; display:inline-block; transform-origin:left center; transition:transform .4s var(--ease); } .cred__group:hover .cred__src strong{ transform:scale(1.04); } .cred__src span{ color:var(--accent); } /* ---------- footer ---------- */ .outro{ background:var(--ink-2); color:var(--on-ink); padding:clamp(64px,11vh,132px) var(--gutter) clamp(26px,4vh,44px); position:relative; z-index:1; } .outro__title{ font-size:clamp(1.6rem, calc(6.5vw - 8px), 6.5rem); margin-bottom:clamp(28px,5vh,54px); } .outro__title em{ font-style:normal; color:var(--accent); } .outro__grid{ display:grid; gap:clamp(22px,3vw,40px); grid-template-columns:minmax(0,1fr); border-top:1px solid var(--rule); padding-top:clamp(22px,3.4vh,36px); } @media (min-width:820px){ .outro__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .outro__k{ color:var(--on-ink-faint); display:block; margin-bottom:.7em; } .outro__v{ display:flex; flex-direction:column; gap:.35em; } .outro__v a{ text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:2px; width:fit-content; transition:border-color .24s var(--ease), color .24s var(--ease); } .outro__v a:hover{ border-color:var(--accent); color:var(--accent); } .colophon{ margin-top:clamp(40px,7vh,80px); border-top:1px solid var(--rule); padding-top:16px; display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between; color:var(--on-ink-faint); } /* ---------- copy toast ---------- */ .toast{ position:fixed; left:50%; bottom:clamp(20px,4vh,34px); transform:translate(-50%,14px); background:var(--accent); color:#04120C; font-family:var(--f-mono); font-variation-settings:"wdth" 87.5,"wght" 500; font-size:.6875rem; letter-spacing:.07em; text-transform:uppercase; padding:11px 20px 10px; border-radius:999px; box-shadow:0 12px 34px rgba(0,0,0,.30); opacity:0; pointer-events:none; z-index:100; white-space:nowrap; max-width:calc(100vw - 32px); overflow:hidden; text-overflow:ellipsis; transition:opacity .3s var(--ease), transform .3s var(--ease); } .toast.is-on{ opacity:1; transform:translate(-50%,0); } /* ---------- reveal ---------- */ .rise{ opacity:0; transform:translateY(14px); } .rise.in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); } .rise.in.d1{ transition-delay:.06s; } .rise.in.d2{ transition-delay:.12s; } .rise.in.d3{ transition-delay:.18s; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .rise,.rise.in{ opacity:1; transform:none; transition:none; } .span__stack,.span.in .span__stack{ clip-path:none; transition:none; } *{ transition-duration:.01ms !important; } } /* ---------- print: back to a clean CV ---------- */ @media print{ .masthead{ display:none !important; } html.on-ink{ --rule:rgba(0,0,0,.2); } body{ background:#fff; color:#000; font-size:10pt; } .band--ink,.outro,.hero{ background:#fff !important; color:#000 !important; } .job__list li,.plain li,.job__org,.span__meta,.outro__k{ color:#333 !important; } .job__org b,.plain li b{ color:#000 !important; } .hero{ min-height:auto; padding-top:0; } .hero__title{ font-size:34pt; } .outro__title{ font-size:26pt; } .job{ break-inside:avoid; } .job__list{ columns:1; } .span__rail::after,.span__seg::before{ background:#999 !important; } .row{ break-inside:avoid; padding-block:18pt; } .rise{ opacity:1 !important; transform:none !important; } .toast{ transition:none; } .toast.is-on{ transform:translate(-50%,0); } .row:hover .rail__title{ font-size:clamp(1.05rem,1.7vw,1.32rem); letter-spacing:-.01em; } .job:hover .job__title, .span__seg:hover .span__org, .cred__group:hover .cred__src strong{ transform:none; } .span{ height:auto !important; } .span__seg{ height:auto !important; min-height:26pt; } .span__stack{ clip-path:none !important; } a{ text-decoration:none; } }