/* ========================================================================== taqimirza.com — stylesheet Design tokens live in :root. Change them here and the whole site follows. Palette is drawn from a personal heraldic scheme: azure ink on paper, with gold reserved for the signature mark and featured items. ========================================================================== */ :root { /* Colour — light theme (default) */ --paper: #FBFAF7; /* page background */ --ink: #101C33; /* primary text — deep azure ink */ --azure: #1E3A6E; /* links, active states */ --gold: #B8902A; /* accent — used sparingly */ --muted: #59627A; /* secondary text */ --line: #E4E1D8; /* hairline rules */ --card: #FFFFFF; /* card surfaces */ --tag-bg: rgba(30,58,110,0.07); --featured-tint: rgba(184,144,42,0.04); --code-bg: #101C33; --code-fg: #FBFAF7; color-scheme: light; /* Type */ --font-display: "Libre Caslon Text", Georgia, serif; --font-body: "Public Sans", -apple-system, "Segoe UI", sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, monospace; /* Layout */ --max-width: 1040px; --gutter: clamp(1.25rem, 4vw, 2.5rem); } /* Colour — dark theme. The same heraldic scheme inverted: gold on an azure field. Applied via data-theme on , set by the inline script in each page's (OS preference first, then any saved choice). */ [data-theme="dark"] { --paper: #0C1424; --ink: #E9E7DE; --azure: #93ACDD; --gold: #D2A93F; --muted: #9AA3B8; --line: #232E47; --card: #121C31; --tag-bg: rgba(147,172,221,0.12); --featured-tint: rgba(210,169,63,0.07); --code-bg: #060C18; --code-fg: #E9E7DE; color-scheme: dark; } /* ---- Reset & base ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background 0.2s ease, color 0.2s ease; } img { max-width: 100%; display: block; } a { color: var(--azure); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--gold); } :focus-visible { outline: 2px solid var(--azure); outline-offset: 3px; border-radius: 2px; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); } /* ---- Typography ---- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.5em; } h1 { font-size: clamp(2.1rem, 5vw, 3.25rem); } h2 { font-size: clamp(1.5rem, 3vw, 2rem); } h3 { font-size: 1.25rem; } .eyebrow { font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 0.75rem; } .lede { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--muted); max-width: 42em; } /* ---- The mark (heraldic mullet) ---- */ .mark { color: var(--gold); } /* ---- Header / nav ---- */ .site-header { border-bottom: 1px solid var(--line); background: var(--paper); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; padding-bottom: 1.1rem; flex-wrap: wrap; } .wordmark { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); text-decoration: none; white-space: nowrap; } .wordmark:hover { color: var(--ink); } .wordmark .mark { margin-right: 0.4rem; } .site-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; } .site-nav a { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.04em; text-decoration: none; color: var(--muted); padding: 0.25rem 0; border-bottom: 2px solid transparent; } .site-nav a:hover { color: var(--ink); } .site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); } /* ---- Theme toggle ---- */ .theme-toggle { font-size: 1rem; line-height: 1; background: none; border: 1px solid var(--line); border-radius: 999px; width: 2.1rem; height: 2.1rem; color: var(--muted); cursor: pointer; transition: all 0.15s ease; } .theme-toggle:hover { border-color: var(--gold); color: var(--gold); } /* ---- Sections ---- */ section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 0.75rem; margin-bottom: 1.75rem; } .section-head h2 { margin: 0; } .section-head a { font-family: var(--font-mono); font-size: 0.85rem; } /* ---- Hero ---- */ .hero { padding-top: clamp(3rem, 8vw, 6rem); } .hero h1 { max-width: 16em; } .hero .lede { margin-top: 1rem; } .hero-links { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; } /* ---- Full-viewport home ---- */ /* body.home stacks header / main / footer over the full viewport height; the hero centres itself in whatever space is left, and its container drops the max-width cap so the page stretches edge to edge. */ .home { min-height: 100dvh; display: flex; flex-direction: column; } .home main { flex: 1; display: flex; } .hero--full { flex: 1; display: flex; align-items: center; padding: clamp(2rem, 4vw, 3rem) 0; } .container--full { max-width: none; width: 100%; } .hero--full h1 { max-width: 18em; } .home .site-footer { margin-top: 0; } .home .site-header .container, .home .site-footer .container { max-width: none; } /* Centred variant — used by the home hero and the contact page. To switch home to a text-left / image-right split instead: remove .hero--center from the section in index.html and see README. */ .hero--center { justify-content: center; text-align: center; } .hero--center h1, .hero--center .lede { margin-left: auto; margin-right: auto; } .hero--center .hero-links { justify-content: center; } .hero--center .contact-list { align-items: center; } .hero--center .contact-list span { min-width: 0; margin-right: 0.35rem; } .button { display: inline-block; font-family: var(--font-mono); font-size: 0.9rem; text-decoration: none; padding: 0.65rem 1.25rem; border: 1px solid var(--ink); border-radius: 14px; color: var(--ink); transition: background 0.15s ease, color 0.15s ease; } .button:hover { background: var(--ink); color: var(--paper); } .button--primary { background: var(--ink); color: var(--paper); } .button--primary:hover { background: var(--azure); border-color: var(--azure); color: var(--paper); } /* ---- Cards & lists ---- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.25rem; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; transition: border-color 0.15s ease, transform 0.15s ease; } .card:hover { border-color: var(--azure); transform: translateY(-2px); } .card h3 { margin: 0; } .card h3 a { color: var(--ink); text-decoration: none; } .card h3 a:hover { color: var(--azure); } .card p { margin: 0; color: var(--muted); font-size: 0.97rem; } .card--featured { border-color: var(--gold); border-width: 1.5px; background: linear-gradient(0deg, var(--featured-tint), var(--featured-tint)), var(--card); } .card-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; } .tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--azure); background: var(--tag-bg); border-radius: 3px; padding: 0.15rem 0.5rem; } .badge-featured { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); } /* ---- Filters ---- */ .filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; } .filter-btn { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.95rem; color: var(--muted); cursor: pointer; transition: all 0.15s ease; } .filter-btn:hover { border-color: var(--azure); color: var(--azure); } .filter-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); } .empty-note { color: var(--muted); font-style: italic; } /* ---- Article (blog post / long-form) ---- */ .article { max-width: 44em; } .article-header { margin-bottom: 2rem; } .article h2 { margin-top: 2em; } .article blockquote { border-left: 3px solid var(--gold); margin: 1.5em 0; padding: 0.25em 0 0.25em 1.25em; color: var(--muted); } .article pre { background: var(--code-bg); color: var(--code-fg); padding: 1rem 1.25rem; border-radius: 6px; overflow-x: auto; font-family: var(--font-mono); font-size: 0.88rem; } .article code { font-family: var(--font-mono); font-size: 0.92em; } /* ---- Contact ---- */ .contact-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.95rem; } .contact-list span { color: var(--muted); display: inline-block; min-width: 6.5rem; } /* ---- Footer ---- */ .site-footer { border-top: 1px solid var(--line); padding: 2rem 0 2.5rem; margin-top: 2rem; } .site-footer .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); } .site-footer a { color: var(--muted); } /* ---- Small screens ---- */ @media (max-width: 640px) { .site-header .container { flex-direction: column; align-items: flex-start; gap: 0.6rem; } .site-nav { gap: 1.1rem; } .grid { grid-template-columns: 1fr; } }