/* ============================================================ gurtejgill.com · SHARED CHROME The sticky header and the closing footer, for every page. This file is the ONLY place either is defined. It loads LAST on every page so it wins any collision with a page stylesheet. Pages: /index.html /essays/build-an-ai-that-compounds/index.html /essays/drafts//index.html Not anhad.html, which is deliberately outside the site architecture (see knowledge/career/site.md). ============================================================ */ /* --- FONTS --------------------------------------------------- url() resolves against THIS file, so one declaration is right at every page depth. The homepage and the compounds essay ask for the same four files at the same URLs, so nothing extra is downloaded there; a draft page on its own type system gets the chrome's faces for free. ------------------------------------------------------------ */ @font-face{font-family:Garamond;src:url('fonts/eb-garamond-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:Garamond;src:url('fonts/eb-garamond-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:Inter;src:url('fonts/inter-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:Inter;src:url('fonts/inter-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} /* --- TOKENS -------------------------------------------------- The chrome carries its own palette and never reads a page's tokens, so the homepage (--paper #f6f3ec) and the essay pages (--cream #FAF8F5) get an identical header and footer. Measured contrast on the band #ece6d8: --chrome-ink 11.75:1 --chrome-forest 9.55:1 --chrome-quiet 5.46:1 --chrome-field-hint 4.16:1 (placeholder; the label is visible) --chrome-field-rule 3.08:1 (WCAG 1.4.11 non-text) Band against its grounds: 1.123:1 on paper, 1.174:1 on cream, 11.54:1 under the forest music room. ------------------------------------------------------------ */ :root{ --header-height:90px; --chrome-paper:#f6f3ec; --chrome-ink:#292924; --chrome-quiet:#5f5b4e; --chrome-forest:#173e2f; --chrome-forest-hover:#25533e; --chrome-rust:#b83f27; --chrome-line:#d9d5ca; --chrome-band:#ece6d8; --chrome-band-rule:#d9d1bd; --chrome-field-rule:#8b8171; --chrome-field-hint:#756c5c; --chrome-serif:Garamond,Georgia,serif; --chrome-sans:Inter,Arial,sans-serif; } html{scroll-padding-top:calc(var(--header-height) + 24px)} .wrap{width:min(1120px,calc(100% - 112px));margin-inline:auto} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} input:disabled,button:disabled{opacity:.6;cursor:default} .skip-link{position:fixed;top:12px;left:12px;transform:translateY(-200%);z-index:100;background:var(--chrome-ink);color:var(--chrome-paper);font-family:var(--chrome-sans);font-size:13px;line-height:1.4;padding:12px 18px;text-decoration:none} .skip-link:focus{transform:none} /* ============================================================ HEADER Sticky, and opaque on whatever ground it sits on. Every page sets background-color on ; inheriting it is the one line that stays right on --paper #f6f3ec and on --cream #FAF8F5, with no per-page override. A future page that leaves transparent would take this header transparent with it. .has-name homepage state, toggled by script.js once the hero name scrolls under the bar .name-always essay state, static in the markup ============================================================ */ .site-header{position:sticky;top:0;z-index:40;background-color:inherit} .site-header a,.site-header a:hover{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent} .site-header .wordmark,.site-header .wordmark:hover{color:var(--chrome-forest)} .header-inner{height:90px;display:flex;align-items:center;border-bottom:1px solid var(--chrome-line)} /* flex-shrink:1 with min-width:0 so a tight phone header clips a redundant wordmark instead of putting a scrollbar on the page. */ .header-name{max-width:0;margin-right:0;flex-shrink:1;min-width:0;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(5px);transition:max-width .28s ease,margin-right .28s ease,opacity .2s ease,transform .28s ease,visibility .28s} .site-header.has-name .header-name{max-width:180px;margin-right:40px;opacity:1;visibility:visible;transform:none} .site-header.name-always .header-name{max-width:none;margin-right:40px;opacity:1;visibility:visible;transform:none;transition:none} .header-name .wordmark:focus-visible{outline-offset:-2px} .wordmark{display:inline-block;flex-shrink:0;font-family:var(--chrome-serif);font-size:28px;font-weight:400;line-height:1.2;letter-spacing:-.6px;white-space:nowrap;color:var(--chrome-forest)} /* padding/max-width/position are reset explicitly: a page whose own stylesheet styles a bare nav{} must not reach the shared header. */ .site-header nav{display:flex;gap:34px;min-width:0;margin:0 auto 0 0;padding:0;max-width:none;position:static;background:none} .site-header nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-family:var(--chrome-sans);font-size:12px;line-height:2;white-space:nowrap} .site-header nav a:after{content:'';position:absolute;left:0;right:100%;bottom:calc(50% - .95em);height:1px;background:var(--chrome-rust);transition:right .2s} .site-header nav a:hover:after{right:0} .hello-link{display:flex;align-items:center;gap:20px;min-height:44px;white-space:nowrap;font-family:var(--chrome-sans);font-size:12px;line-height:2;border:1px solid var(--chrome-line);border-radius:2px;padding:6px 15px;margin-left:18px} .hello-link:hover{border-color:var(--chrome-ink)} .hello-link span{transition:transform .2s} .hello-link:hover span{transform:translateY(2px)} .site-header a:focus-visible{outline:2px solid var(--chrome-forest);outline-offset:6px;border-radius:0} .hello-link:focus-visible{outline-offset:3px} /* ============================================================ FOOTER · the closing room A warm band one step off the page ground, on every page. Two zones: the invitation (heading, line, the site's one signup form, the mailto) and the ledger (wordmark, copyright, nav). No top rule. The tint change is the edge, which is what keeps it correct both under the dark music room and under cream. ============================================================ */ .site-footer{display:block;background:var(--chrome-band);border-top:0;margin:0;padding-block:76px 30px;font-family:var(--chrome-sans);color:var(--chrome-ink)} .site-footer .footer-frame{display:block;margin-left:auto;margin-right:auto;font-size:inherit;gap:0;text-align:left;max-width:none} .site-footer a,.site-footer a:hover{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent} .footer-invite{display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:start;padding-bottom:58px} .footer-invite:focus{outline:none} .invite-title{font-family:var(--chrome-serif);font-size:42px;font-weight:400;line-height:1.14;letter-spacing:-1px;color:var(--chrome-ink);margin:0} .invite-title em{font-style:italic;font-weight:400;color:var(--chrome-forest)} .invite-lede{font-family:var(--chrome-sans);font-size:14px;line-height:1.8;color:var(--chrome-quiet);margin:16px 0 0;max-width:390px;text-wrap:pretty} .invite-aside{font-family:var(--chrome-sans);font-size:11px;line-height:1.8;color:var(--chrome-quiet);margin:26px 0 0;max-width:340px} .invite-email{display:inline-flex;align-items:center;gap:20px;font-family:var(--chrome-serif);font-size:21px;line-height:1.2;color:var(--chrome-ink);border-bottom:1px solid var(--chrome-field-rule);padding:12px 0 8px;margin-top:2px} .invite-email span{font-family:var(--chrome-sans);font-size:16px;transition:transform .2s} .invite-email:hover span{transform:translate(2px,-2px)} .newsletter-form{margin:0} .field-label{display:block;font-family:var(--chrome-sans);font-size:10px;line-height:1.8;color:var(--chrome-quiet);margin:0 0 10px} .email-field{display:flex;align-items:center;gap:9px;min-height:44px;background:transparent;border:0;border-bottom:1px solid var(--chrome-field-rule);border-radius:0} /* 16px is deliberate: iOS Safari zooms the viewport on focus of any smaller field, which side-scrolls the page on every phone tap. */ .email-field input{flex:1;min-width:0;width:100%;background:transparent;border:0;border-radius:0;appearance:none;-webkit-appearance:none;font-family:var(--chrome-sans);font-size:16px;line-height:1.5;color:var(--chrome-ink);padding:11px 0} .email-field input::placeholder{color:var(--chrome-field-hint);opacity:1} .email-field button{display:flex;align-items:center;gap:14px;min-height:44px;white-space:nowrap;background:transparent;border:0;border-radius:0;font-family:var(--chrome-sans);font-size:11px;line-height:1.6;color:var(--chrome-forest);padding:12px 0 12px 10px;cursor:pointer} .email-field button:hover{color:var(--chrome-forest-hover)} .email-field button span{font-size:18px;transition:transform .2s} .email-field button:hover span{transform:translateX(3px)} .form-note{font-family:var(--chrome-sans);font-size:11px;line-height:1.7;color:var(--chrome-quiet);margin:12px 0 0;max-width:340px;text-align:left} .form-status{font-family:var(--chrome-sans);font-size:11px;line-height:1.7;color:var(--chrome-rust);margin:12px 0 0;max-width:340px;text-align:left} .form-status:empty{display:none} .form-done{font-family:var(--chrome-sans);font-size:15px;line-height:1.8;color:var(--chrome-forest);margin:0;max-width:340px;text-align:left} .form-done:focus{outline:none} .footer-ledger{display:flex;align-items:center;gap:27px;border-top:1px solid var(--chrome-band-rule);padding-top:26px} .footer-ledger .wordmark{font-size:25px;color:var(--chrome-forest)} .ledger-copy{font-family:var(--chrome-sans);font-size:9px;line-height:1.8;color:var(--chrome-quiet);margin:0} .ledger-copy span{margin-left:17px} .footer-nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 26px;margin-left:auto;padding:0;max-width:none;position:static;background:none} .footer-nav a{font-family:var(--chrome-sans);font-size:11px;line-height:1.8;color:var(--chrome-quiet);padding-block:13px} .footer-nav a:hover{color:var(--chrome-ink)} .footer-nav span{margin-left:7px} .site-footer a:focus-visible,.site-footer button:focus-visible,.site-footer input:focus-visible{outline:2px solid var(--chrome-forest);outline-offset:6px;border-radius:0} /* ============================================================ BREAKPOINTS · the site's own: 1500 min, 1100, 800, 600, 360 ============================================================ */ @media(min-width:1500px){ .wrap{width:min(1200px,calc(100% - 160px))} .footer-invite{gap:110px} .invite-title{font-size:46px} } @media(max-width:1100px){ .wrap{width:calc(100% - 80px)} .footer-invite{gap:56px} } @media(max-width:800px){ .wrap{width:calc(100% - 48px)} :root{--header-height:81px} .header-inner{height:81px} .site-header.has-name .header-name,.site-header.name-always .header-name{margin-right:18px} .site-header nav{gap:24px} .hello-link{margin-left:6px;font-size:10px;padding:6px 10px;gap:12px} .site-footer{padding-block:56px 26px} .footer-invite{grid-template-columns:1fr 1.1fr;gap:40px;padding-bottom:44px} .invite-title{font-size:36px} .invite-lede{font-size:13px} } @media(max-width:600px){ .wrap{width:calc(100% - 40px)} :root{--header-height:74px} .header-inner{height:74px} .wordmark{font-size:22px;letter-spacing:-.4px} .site-header.has-name .header-name{max-width:110px} .site-header.has-name .header-name,.site-header.name-always .header-name{margin-right:12px} .site-header nav{gap:20px} .site-header nav a{font-size:10px} .hello-link{border:0;padding:6px 0;margin-left:5px;gap:7px;font-size:10px} .site-footer{padding-block:44px 22px} .footer-invite{display:block;padding-bottom:32px} .invite-title{font-size:32px;letter-spacing:-.6px} .invite-lede{font-size:14px;max-width:340px} .invite-aside{margin-top:22px} .newsletter-form{margin-top:30px;padding-top:27px;border-top:1px solid var(--chrome-band-rule)} .footer-ledger{flex-wrap:wrap;gap:16px;padding-top:22px} .footer-ledger .wordmark{font-size:22px} .ledger-copy span{display:block;margin-left:0} .footer-nav{width:100%;margin-left:0;gap:0 18px} .footer-nav a{font-size:10px} .footer-top{display:none} } @media(max-width:360px){ .wrap{width:calc(100% - 32px)} .site-header nav{gap:11px} .site-header.has-name .header-name,.site-header.name-always .header-name{max-width:0;margin-right:0} .hello-link{font-size:9px;gap:5px;margin-left:4px} .invite-title{font-size:28px} .footer-nav{gap:0 14px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .header-name,.hello-link span,.site-header nav a:after,.invite-email span,.email-field button span{transition:none} } @media print{ .skip-link,.site-header,.footer-invite,.footer-nav{display:none} .site-footer{background:none;padding:16px 0 0;margin-top:26px;break-inside:avoid} .footer-ledger{display:block;border-top:1px solid #bbb;padding-top:14px} .footer-ledger .wordmark{font-size:15px;color:#000} .ledger-copy{font-size:9px;color:#333;margin-top:4px} .ledger-copy span{display:block;margin-left:0} .footer-ledger:after{content:'gurtejgill.com';display:block;font-size:9px;color:#333;margin-top:2px} } /* ============================================================ V8 · FOOTER, TWO PATHS Say hello (a button that opens mail) beside A note, now and then (a button that asks for the email when pressed). One button on both sides: the page's .button-ink, drawn again in chrome tokens so it renders the same on every page ground. ============================================================ */ .footer-invite{grid-template-columns:1fr 1fr;gap:0;align-items:stretch} .footer-path{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-right:64px} .footer-path+.footer-path{padding:0 0 0 64px;border-left:1px solid var(--chrome-band-rule)} .path-action{margin-top:auto;padding-top:30px;width:100%} .site-footer .footer-cta{display:inline-flex;align-items:center;gap:30px;padding:15px 20px;font-family:var(--chrome-sans);font-size:11px;line-height:1.4;border-radius:2px;background:var(--chrome-forest);color:var(--chrome-paper);cursor:pointer;list-style:none;transition:background .2s,transform .2s} .site-footer .footer-cta:hover{background:var(--chrome-forest-hover);color:var(--chrome-paper);transform:translateY(-2px)} .site-footer .footer-cta:focus-visible{outline:2px solid var(--chrome-forest);outline-offset:4px;border-radius:2px} .footer-cta::-webkit-details-marker{display:none} .footer-cta::marker{content:''} .path-fine{font-family:var(--chrome-sans);font-size:11px;line-height:1.7;color:var(--chrome-quiet);margin:12px 0 0} .signup[open]>summary{display:none} .signup .email-field{max-width:420px;min-height:0;align-items:stretch;gap:0;border:1px solid var(--chrome-field-rule);border-radius:2px;background:var(--chrome-paper)} .signup .email-field:focus-within{outline:2px solid var(--chrome-forest);outline-offset:3px} .signup .email-field input{padding:12px 14px} .site-footer .signup .email-field input:focus-visible{outline:none} .signup .email-field button{min-height:46px;padding:0 18px;gap:14px;border-radius:0 1px 1px 0;background:var(--chrome-forest);color:var(--chrome-paper)} .signup .email-field button:hover{background:var(--chrome-forest-hover);color:var(--chrome-paper)} .signup .email-field button span{font-size:14px} .signup .form-done{padding:12px 0 2px} @keyframes chrome-reveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .signup[open] .newsletter-form{animation:chrome-reveal .25s ease} @media(min-width:1500px){.footer-path{padding-right:90px}.footer-path+.footer-path{padding-left:90px}} @media(max-width:1100px){.footer-invite{gap:0}.footer-path{padding-right:44px}.footer-path+.footer-path{padding-left:44px}} @media(max-width:800px){.footer-invite{grid-template-columns:1fr 1fr;gap:0}.footer-path{padding-right:28px}.footer-path+.footer-path{padding-left:28px}.site-footer .footer-cta{padding:13px 15px;font-size:10px;gap:22px}} @media(max-width:600px){.footer-path{padding:0}.footer-path+.footer-path{margin-top:34px;padding:30px 0 0;border-left:0;border-top:1px solid var(--chrome-band-rule)}.path-action{padding-top:22px}.newsletter-form{margin-top:0;padding-top:0;border-top:0}.signup .email-field{max-width:none}} @media(prefers-reduced-motion:reduce){.site-footer .footer-cta{transition:none}.site-footer .footer-cta:hover{transform:none}.signup[open] .newsletter-form{animation:none}}