/* tokens.css — the one source of truth for ankitvad.github.io Extracted from index-v3.html and extended for the blog. Lives at the site root; fonts and bg.png are siblings. */ @font-face { font-family: "Literata"; src: url("fonts/literata-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Literata"; src: url("fonts/literata-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; } @font-face { font-family: "CodeLight"; src: url("code-light-webfont.woff") format("woff"), url("code-light-webfont.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "CodeBold"; src: url("code-bold-webfont.woff") format("woff"), url("code-bold-webfont.ttf") format("truetype"); font-display: swap; } :root { /* ---- role colors (field) ---- */ --home: #13c2e2; --about: #e03112; --networks: #a5c023; --contact: #9a32b0; --panda: #666666; --blog: #f28c28; /* ---- role accents (ink on white) ---- */ --home-accent: #06a0cc; --about-accent: #b82207; --networks-accent: #7e960c; --contact-accent: #9445bd; --blog-accent: #c9691a; --ink: #333; --nav: #c4c4c4; --paper: #fff; --rule: rgba(0,0,0,0.10); /* ---- type ---- */ --display: "CodeBold", "Trebuchet MS", Arial, Helvetica, sans-serif; /* headings, nav, dates, labels */ --reading: "Literata", Georgia, "Times New Roman", serif; /* all running text: home panels and posts */ --body: var(--reading); --code-light: "CodeLight", "Trebuchet MS", Arial, Helvetica, sans-serif; /* kept for accents only */ --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* reading scale (post body, Literata) */ --read-size: 1.1rem; --read-leading: 1.7; --read-measure: 66ch; /* ---- layout ---- */ --card-home: 600px; --card-index: 720px; --card-post: 680px; --card-pad: clamp(1.5rem, 5vmin, 2.75rem); --card-shadow: 0 14px 45px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.18); --card-radius: 3px; /* ---- motion ---- */ --spring: cubic-bezier(0.30, 1.25, 0.45, 1); } /* ---- the section "personality" is set once, on ---- */ body[data-section="home"] { --field: var(--home); --accent: var(--home-accent); } body[data-section="about"] { --field: var(--about); --accent: var(--about-accent); } body[data-section="networks"] { --field: var(--networks); --accent: var(--networks-accent); } body[data-section="contact"] { --field: var(--contact); --accent: var(--contact-accent); } body[data-section="panda"] { --field: var(--panda); --accent: var(--ink); } body[data-section="blog"] { --field: var(--blog); --accent: var(--blog-accent); } body[data-section="projects"] { --field: var(--networks); --accent: var(--networks-accent); } /* ---- primitives shared by every page ---- */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--field); color: var(--ink); font-family: var(--body); transition: background-color 0.6s ease; } a { color: var(--ink); text-decoration: none; } #dust { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .card { position: relative; z-index: 1; background: var(--paper) url("bg.png") repeat; box-shadow: var(--card-shadow); border-radius: var(--card-radius); } /* scrolling inside a card never shows a scrollbar */ .panel { scrollbar-width: none; } .panel::-webkit-scrollbar { display: none; } /* the small grey nav row that lives at the top of every panel */ .mini { display: flex; flex-wrap: wrap; gap: 1.1em; font-family: var(--display); font-size: clamp(0.85rem, 2vmin, 1.05rem); } .mini a { color: var(--nav); transition: color 0.2s; } .mini a:hover, .mini a:focus-visible { color: var(--accent); } /* hover-slide list, from the Networks / Contact panels */ .slide-list { list-style: none; } .slide-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: 0.12em 0; transition: transform 0.15s, color 0.15s; } .slide-list a:hover, .slide-list a:focus-visible { transform: translateX(0.3em); color: var(--accent); } .slide-list span { font-family: var(--display); font-size: 0.65em; opacity: 0; transition: opacity 0.2s; } .slide-list a:hover span, .slide-list a:focus-visible span { opacity: 0.65; } @media (hover: none) { .slide-list span { opacity: 0.5; } } /* footer: the AV signature over one line of credits and the quote */ .site-footer { position: fixed; bottom: 0.9rem; left: 0; right: 0; z-index: 1; text-align: center; color: rgba(0,0,0,0.5); font-family: var(--display); font-size: 12px; line-height: 1.6; pointer-events: none; } .site-footer a { pointer-events: auto; color: rgba(0,0,0,0.65); text-decoration: underline; text-decoration-color: rgba(0,0,0,0.3); } .site-footer a:hover { color: var(--ink); } .site-footer .sig { display: block; width: 64px; height: 20px; margin: 0 auto 0.25rem; } .site-footer .sig .w { fill: none; stroke: rgba(0,0,0,0.32); stroke-width: 1.6; stroke-linecap: round; } .site-footer .sig .s { fill: none; stroke: rgba(0,0,0,0.32); stroke-width: 0.9; stroke-linecap: round; } .site-footer .sig .h { fill: rgba(0,0,0,0.32); } .site-footer .quote { font-family: var(--reading); font-style: italic; } .site-footer.static { position: static; margin-top: 3rem; } :focus-visible { outline: 2px dashed rgba(0,0,0,0.4); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { body { transition: none; } }