/* ============================================================ Sezgin Saygili — personal site Warm paper, narrow column, serif prose, sans structure. ============================================================ */ :root{ --paper:#f6f0e6; --paper-2:#fbf7f0; --ink:#2b2722; --ink-2:#4f4941; --muted:#948b7d; --rule:#ded4c3; --rule-2:#e9e1d3; --link:#3550c9; --link-visited:#6a4fb5; --serif:'Newsreader',Iowan Old Style,Georgia,'Times New Roman',serif; --sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --col:39rem; --date:6.6rem; --ease:cubic-bezier(.22,1,.36,1); } /* dark palette, shared by the system preference and the manual toggle. [data-theme] on wins over the media query in both directions. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --paper:#14120f; --paper-2:#1a1713; --ink:#ece5d9; --ink-2:#c3bbab; --muted:#8b8272; --rule:#2f2a23; --rule-2:#26221c; --link:#8fa5ff; --link-visited:#bda6f5; } } :root[data-theme="dark"]{ --paper:#14120f; --paper-2:#1a1713; --ink:#ece5d9; --ink-2:#c3bbab; --muted:#8b8272; --rule:#2f2a23; --rule-2:#26221c; --link:#8fa5ff; --link-visited:#bda6f5; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } main{ position:relative; z-index:1; max-width:var(--col); margin:0 auto; padding:clamp(3.5rem,9vh,6rem) 1.5rem clamp(3rem,7vh,5rem); } ::selection{background:var(--ink);color:var(--paper)} a{color:var(--link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:.6px} a:visited{color:var(--link-visited)} a:hover{text-decoration-thickness:1.4px} /* ─────────── header ─────────── */ header{margin-bottom:2.4rem} /* ─────────── basquiat backdrop ─────────── */ #backdrop{ position:fixed; inset:0; z-index:0; pointer-events:none; display:block; } .masthead{display:flex;align-items:flex-start;gap:1.1rem} /* padding-right keeps the header text clear of the absolutely-placed toggle */ .masthead-text{flex:1;min-width:0;position:relative;padding-right:2.4rem} /* ── theme toggle ── */ .theme-btn{ position:absolute; top:-.15rem; right:0; display:grid; place-items:center; width:30px;height:30px; padding:0; color:var(--muted); background:none; border:1px solid transparent; border-radius:99px; cursor:pointer; transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease); } .theme-btn:hover{color:var(--ink);border-color:var(--rule);background:var(--paper-2)} .theme-btn:focus-visible{outline:2px solid var(--link);outline-offset:2px} .theme-btn svg{grid-area:1/1;transition:opacity .3s var(--ease),transform .45s var(--ease)} /* show the icon for the theme you'd switch *to* */ .i-moon{opacity:1;transform:none} .i-sun{opacity:0;transform:rotate(-70deg) scale(.6)} :root[data-theme="dark"] .i-moon{opacity:0;transform:rotate(70deg) scale(.6)} :root[data-theme="dark"] .i-sun{opacity:1;transform:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .i-moon{opacity:0;transform:rotate(70deg) scale(.6)} :root:not([data-theme="light"]) .i-sun{opacity:1;transform:none} } /* ── thinking orb ── */ .orb{color:var(--ink);display:block} .orb-lg{ flex:none; margin-top:-.55rem; filter:drop-shadow(0 4px 14px color-mix(in srgb,var(--ink) 14%,transparent)); animation:orb-in 1.1s var(--ease) both; } .orb-sm{display:inline-block;vertical-align:-2px;margin-right:.34rem} .wip{ display:inline-flex; align-items:center; font-family:var(--sans); font-size:11.5px; letter-spacing:.02em; color:var(--muted); border:1px solid var(--rule); border-radius:99px; padding:1px 8px 1px 5px; margin-left:.15rem; white-space:nowrap; vertical-align:1px; } @keyframes orb-in{ from{opacity:0;transform:scale(.72) rotate(-16deg)} to{opacity:1;transform:none} } h1{ font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:-.01em; margin:0 0 .15rem; } .tagline{margin:0 0 .8rem;color:var(--muted);font-size:14px} .socials{display:flex;gap:.75rem;align-items:center} .socials a{color:var(--muted);display:inline-flex;transition:color .2s var(--ease),transform .2s var(--ease)} .socials a:hover{color:var(--ink);transform:translateY(-1px)} /* ─────────── prose ─────────── */ .prose{margin-bottom:2.1rem} .prose p{ font-family:var(--serif); font-size:17.5px; line-height:1.58; color:var(--ink-2); margin:0 0 .85rem; } .prose p:last-child{margin-bottom:0} .prose strong{color:var(--ink);font-weight:600} .prose em{font-style:italic} /* ─────────── facts table ─────────── */ .facts{ width:100%; border-collapse:collapse; border:1px solid var(--rule); background:var(--paper-2); font-size:13.5px; margin-bottom:2.6rem; } .facts th,.facts td{ border:1px solid var(--rule); padding:.5rem .7rem; text-align:left; vertical-align:middle; } .facts th{ width:5.4rem; font-family:var(--serif); font-style:italic; font-weight:400; color:var(--muted); } .facts td{color:var(--ink-2)} .facts .sep{color:var(--muted);margin:0 .15rem} .mini{ font-family:var(--sans); font-size:11px; color:var(--muted); background:var(--paper); border:1px solid var(--rule); border-radius:3px; padding:1px 6px; margin-left:.4rem; cursor:pointer; transition:color .18s var(--ease),border-color .18s var(--ease); } .mini:hover{color:var(--ink);border-color:var(--muted)} .mini.done{color:var(--ink);border-color:var(--ink)} /* ─────────── tabs ─────────── */ .tabs{ position:relative; display:flex; gap:1.35rem; border-bottom:1px solid var(--rule); margin-bottom:1.5rem; } .tab{ appearance:none; background:none; border:0; padding:0 0 .6rem; font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--muted); cursor:pointer; transition:color .22s var(--ease); } .tab:hover{color:var(--ink-2)} .tab[aria-selected="true"]{color:var(--ink)} .tab:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:2px} .tab-ink{ position:absolute; bottom:-1px; left:0; height:1px; width:0; background:var(--ink); transition:transform .42s var(--ease),width .42s var(--ease); } /* ─────────── animated panels ─────────── */ .panels{position:relative;overflow:hidden;transition:height .42s var(--ease);margin-bottom:2.9rem} .panel{ opacity:0; transform:translateY(8px); transition:opacity .3s var(--ease),transform .38s var(--ease); } .panel[hidden]{display:none} .panel.is-active{opacity:1;transform:none} .panel.is-leaving{ position:absolute; inset:0 0 auto; opacity:0; transform:translateY(-6px); pointer-events:none; } .panel-note{ margin:0 0 1.1rem; font-family:var(--serif); font-size:16.5px; line-height:1.55; color:var(--ink-2); } /* ─────────── list rows (date first, chronological) ─────────── */ .rows{display:flex;flex-direction:column} .row{ display:grid; grid-template-columns:var(--date) minmax(0,1fr); gap:.15rem .95rem; padding:.46rem .5rem .46rem .45rem; margin:0 -.5rem; border-radius:4px; font-size:14px; color:var(--ink); text-decoration:none; transition:background .18s var(--ease); } a.row:visited{color:var(--ink)} a.row:hover{background:var(--rule-2)} .when{ grid-column:1; color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; padding-top:.13em; } .who{ grid-column:2; display:flex; align-items:center; gap:.5rem; font-weight:500; } .who img{ flex:none; width:16px;height:16px; border-radius:3px; object-fit:contain; } .what{grid-column:2;color:var(--ink-2)} /* nested under a parent org */ .row.sub{margin-left:0;padding-left:.45rem} .row.sub .who{padding-left:1.15rem;position:relative;font-weight:400} .row.sub .who::before{ content:''; position:absolute; left:.3rem;top:50%; width:.5rem;height:1px; background:var(--rule); } .row.sub .what{padding-left:1.15rem} .row.sub .who,.row.sub .what{font-size:13.5px} /* publication rows get a fuller description */ .row.pub{padding-block:.6rem} .row.pub .what{ font-family:var(--serif); font-size:16px; line-height:1.5; margin-top:.12rem; } .row.pub .what em{font-style:italic;color:var(--muted)} a.row .who::after{ content:'↗'; font-size:11px; color:var(--muted); opacity:0; transform:translate(-2px,2px); transition:opacity .2s var(--ease),transform .2s var(--ease); } a.row:hover .who::after{opacity:.75;transform:none} /* ─────────── section rules ─────────── */ section{margin-bottom:2.9rem} .panel section,.panel .rule{margin-bottom:inherit} .rule{ display:flex; align-items:center; gap:.85rem; font-size:13px; font-weight:500; color:var(--muted); margin:2rem 0 .9rem; } .rule::after{content:'';flex:1;height:1px;background:var(--rule)} /* ─────────── build detail ─────────── */ .build{margin-bottom:1.7rem} .build:last-child{margin-bottom:0} .build h3{ font-family:var(--sans); font-size:14.5px; font-weight:600; margin:0 0 .35rem; letter-spacing:-.008em; } .build p{ font-family:var(--serif); font-size:16.5px; line-height:1.55; color:var(--ink-2); margin:0; } .stack{ font-family:var(--sans)!important; font-size:12px!important; line-height:1.7!important; color:var(--muted)!important; margin-top:.45rem!important; } /* ─────────── stack list ─────────── */ .stack-list{ display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:.4rem 1rem; margin:0; font-size:14px; } .stack-list dt{font-family:var(--serif);font-style:italic;color:var(--muted)} .stack-list dd{margin:0;color:var(--ink-2)} /* ─────────── footer ─────────── */ footer{ margin-top:3.4rem; padding-top:1rem; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:12.5px; color:var(--muted); } footer a{color:var(--muted)} footer a:hover{color:var(--ink)} .clocks{font-variant-numeric:tabular-nums} .clocks .sep{opacity:.5} /* ─────────── small screens ─────────── */ @media (max-width:640px){ main{padding-top:2.6rem} :root{--date:5.4rem} .row{gap:.1rem .7rem} .row.pub .what{font-size:15.5px} .stack-list{grid-template-columns:1fr;gap:0} .stack-list dt{margin-top:.6rem} .facts th{width:4.6rem} } @media (max-width:430px){ .row{grid-template-columns:1fr} .when{grid-column:1;grid-row:1;padding-bottom:.1rem} .who,.what{grid-column:1} .row.sub .who,.row.sub .what{padding-left:.9rem} .row.sub .who::before{left:0} } /* ─────────── motion: entrance + scroll reveals ─────────── */ .js .reveal{ opacity:0; transform:translateY(12px); transition:opacity .7s var(--ease),transform .7s var(--ease); } .js .reveal.in{opacity:1;transform:none} /* header pieces animate in on load, staggered */ .js .masthead-text > *, .js .prose p, .js .facts, .js .tabs{ animation:rise .8s var(--ease) both; } .js .masthead-text h1{animation-delay:.05s} .js .masthead-text .tagline{animation-delay:.12s} .js .masthead-text .socials{animation-delay:.19s} .js .prose p:nth-of-type(1){animation-delay:.26s} .js .prose p:nth-of-type(2){animation-delay:.32s} .js .facts{animation-delay:.38s} .js .tabs{animation-delay:.44s} @keyframes rise{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} } /* rows stagger when a panel becomes active */ .panel.is-active .rows .row{animation:rowIn .5s var(--ease) both} .panel.is-active .rows .row:nth-child(1){animation-delay:.02s} .panel.is-active .rows .row:nth-child(2){animation-delay:.06s} .panel.is-active .rows .row:nth-child(3){animation-delay:.10s} .panel.is-active .rows .row:nth-child(4){animation-delay:.14s} .panel.is-active .rows .row:nth-child(5){animation-delay:.18s} .panel.is-active .rows .row:nth-child(6){animation-delay:.22s} @keyframes rowIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} } /* hover polish */ a.row{transition:background .18s var(--ease),transform .18s var(--ease)} a.row:hover{transform:translateX(2px)} .facts tr{transition:background .18s var(--ease)} .facts tr:hover{background:color-mix(in srgb,var(--rule-2) 55%,transparent)} .build{transition:transform .3s var(--ease)} .build h3{transition:color .2s var(--ease)} .build:hover h3{color:var(--link)} @media (prefers-reduced-motion:reduce){ *{transition-duration:.001ms!important;animation-duration:.001ms!important} .panels{transition:none} .orb-lg{animation:none} .reveal{opacity:1!important;transform:none!important} } @media print{ .socials,.mini,footer,.tabs{display:none} body{background:#fff;color:#000} main{max-width:none;padding:0} a{color:#000;text-decoration:none} .panels{height:auto!important;overflow:visible} .panel{opacity:1!important;transform:none!important;position:static!important;display:block!important} .panel[hidden]{display:block!important} section,.build,.row{break-inside:avoid} }