/* ========================================================================== Areeba Hassan — Portfolio Design system: "Schema" — a blueprint/systems-diagram aesthetic. Palette derived from the hero portrait (rust hijab, denim, sky). Display: Space Grotesk · Mono: JetBrains Mono · Body: Inter ========================================================================== */ /* Fonts are loaded via a preconnected in index.html's rather than @import here — @import blocks CSS parsing on a second network round-trip, which delays first paint. See index.html . */ :root{ /* --- color tokens --- paper-faint and rust below are tuned slightly off their first-pass values: a computed WCAG contrast check (see SEO_AUDIT_REPORT.md) found the original shades fell just under the 4.5:1 AA minimum for small text on --ink / --ink-2. These are the same hues, nudged just enough to clear 4.5:1. */ --ink: #10151F; /* page background — deep blueprint navy */ --ink-2: #161C2A; /* raised panel background */ --ink-3: #1C2333; /* hover / elevated panel */ --paper: #F2ECE1; /* primary text — warm paper */ --paper-dim: #9AA3B8; /* secondary text — cool muted */ --paper-faint:#7D879E; /* tertiary text / placeholders — WCAG AA verified */ --rust: #C96034; /* primary accent — from the hijab — WCAG AA verified */ --rust-deep: #93401F; /* pressed / border accent */ --rust-tint: #C55E331A; /* 10% wash */ --slate: #7C97B8; /* secondary accent — denim / sky */ --slate-dim: #7C97B833; --moss: #58A374; /* status accent — echoes "PAID" badges */ --amber: #D6A24C; /* status accent — echoes "OVERDUE" badges, used sparingly */ --line: #262E40; /* hairline borders */ --line-soft: #1D2434; /* --- type --- */ --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --body: 'Inter', ui-sans-serif, system-ui, sans-serif; /* --- layout --- */ --maxw: 1180px; --gutter: clamp(20px, 5vw, 64px); --radius-s: 6px; --radius-m: 12px; --radius-l: 22px; } /* ---------------------------------- reset --------------------------------- */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body{ margin: 0; background: var(--ink); color: var(--paper); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } h1,h2,h3,h4{ margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; } p{ margin: 0; } ul{ margin: 0; padding: 0; list-style: none; } button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ::selection{ background: var(--rust); color: var(--ink); } :focus-visible{ outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 2px; } .skip-link{ position: absolute; top: -60px; left: 12px; z-index: 200; background: var(--rust); color: #17110C; font-family: var(--mono); font-size: 0.85rem; font-weight: 600; padding: 12px 18px; border-radius: 8px; transition: top .15s ease; } .skip-link:focus{ top: 12px; } /* faint blueprint dot-grid, fixed to viewport */ body::before{ content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.35; mask-image: linear-gradient(180deg, black, black 60%, transparent 100%); } .wrap{ max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); position: relative; z-index: 1; } /* ------------------------------- utility bits ------------------------------ */ .eyebrow{ font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--rust); display: inline-flex; align-items: center; gap: 8px; text-transform: none; } .eyebrow::before{ content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--rust); transform: rotate(45deg); flex: none; } .eyebrow.is-slate{ color: var(--slate); } .eyebrow.is-slate::before{ background: var(--slate); } .eyebrow.is-moss{ color: var(--moss); } .eyebrow.is-moss::before{ background: var(--moss); } .section-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; } .section-head h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); } .section-tag{ font-family: var(--mono); font-size: 0.82rem; color: var(--paper-faint); white-space: nowrap; } section{ position: relative; z-index: 1; padding: 110px 0; } section + section{ border-top: 1px solid var(--line-soft); } .btn{ display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 999px; font-family: var(--mono); font-size: 0.86rem; font-weight: 500; border: 1px solid var(--line); transition: border-color .2s ease, transform .2s ease, background .2s ease; white-space: nowrap; } .btn:hover{ transform: translateY(-1px); } .btn-primary{ background: var(--rust); border-color: var(--rust); color: #17110C; font-weight: 600; } .btn-primary:hover{ background: #D6703F; border-color: #D6703F; } .btn-ghost{ color: var(--paper); background: var(--ink-2); } .btn-ghost:hover{ border-color: var(--slate); color: var(--paper); } .btn-arrow{ transition: transform .2s ease; } .btn:hover .btn-arrow{ transform: translateX(3px); } .tagrow{ display: flex; flex-wrap: wrap; gap: 8px; } .tag{ font-family: var(--mono); font-size: 0.76rem; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--paper-dim); background: var(--ink-2); } /* corner-tick "blueprint registration marks" used on framed panels */ .blueprint-frame{ position: relative; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--ink-2); } .blueprint-frame::before, .blueprint-frame::after, .blueprint-frame > .tick-tl, .blueprint-frame > .tick-br{ content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; } .blueprint-frame::before{ top: -1px; left: -1px; border-top: 2px solid var(--rust); border-left: 2px solid var(--rust); border-top-left-radius: 4px; } .blueprint-frame::after{ bottom: -1px; right: -1px; border-bottom: 2px solid var(--rust); border-right: 2px solid var(--rust); border-bottom-right-radius: 4px; } /* ------------------------------- reveal-on-scroll -------------------------- */ .reveal{ opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); } .reveal.is-visible{ opacity: 1; transform: none; } /* ================================ NAV ==================================== */ .nav{ position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 18px 0; background: linear-gradient(180deg, rgba(16,21,31,0.92), rgba(16,21,31,0.7) 70%, transparent); backdrop-filter: blur(6px); } .nav .wrap{ display: flex; align-items: center; justify-content: space-between; } .nav-mark{ font-family: var(--mono); font-weight: 600; font-size: 0.95rem; color: var(--paper); display: flex; align-items: center; gap: 10px; } .nav-mark .dot{ width: 8px; height: 8px; background: var(--rust); border-radius: 2px; transform: rotate(45deg); } .nav-routes{ display: flex; gap: 30px; } .nav-routes a{ font-family: var(--mono); font-size: 0.86rem; color: var(--paper-dim); transition: color .2s ease; position: relative; } .nav-routes a:hover, .nav-routes a.is-active{ color: var(--rust); } .nav-cta{ display: flex; align-items: center; gap: 18px; } .nav-toggle{ display: none; } @media (max-width: 760px){ .nav-routes{ position: fixed; top: 62px; right: 20px; left: 20px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-m); flex-direction: column; gap: 0; padding: 8px; transform-origin: top right; transform: scale(0.96); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .nav-routes.is-open{ opacity: 1; transform: scale(1); pointer-events: auto; } .nav-routes a{ padding: 12px 14px; display: block; border-radius: var(--radius-s); } .nav-routes a:hover{ background: var(--ink-3); } .nav-cta .btn-ghost{ display: none; } .nav-toggle{ display: inline-flex; flex-direction: column; gap: 4px; padding: 10px; } .nav-toggle span{ width: 18px; height: 2px; background: var(--paper); display: block; } } /* ================================ HERO ==================================== */ .hero{ padding-top: 168px; padding-bottom: 90px; border-top: none; } .hero .wrap{ display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; } .hero-kicker{ margin-bottom: 22px; } .hero h1{ font-size: clamp(2.6rem, 5.6vw, 4.5rem); line-height: 1.02; color: var(--paper); } .hero h1 em{ font-style: normal; color: var(--rust); } .hero-role{ font-family: var(--mono); color: var(--slate); font-size: clamp(1rem, 1.6vw, 1.2rem); margin-top: 20px; min-height: 1.6em; } .hero-role .caret{ display: inline-block; width: 8px; height: 1.1em; background: var(--rust); margin-left: 3px; vertical-align: -0.18em; animation: blink 1s step-end infinite; } @keyframes blink{ 50%{ opacity: 0; } } .hero-copy{ margin-top: 26px; max-width: 46ch; color: var(--paper-dim); font-size: 1.04rem; } .hero-actions{ margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; } .hero-stats{ display: flex; gap: 28px; margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; } .hero-stats div b{ display: block; font-family: var(--display); font-size: 1.5rem; color: var(--paper); } .hero-stats div span{ font-family: var(--mono); font-size: 0.74rem; color: var(--paper-faint); } .hero-portrait{ position: relative; justify-self: center; width: min(100%, 340px); } .hero-portrait .arch{ position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 170px 170px 14px 14px; border: 1px solid var(--line); background: var(--ink-2); } .hero-portrait img{ width: 100%; height: 100%; object-fit: cover; } .hero-portrait .arch::after{ content: ""; position: absolute; inset: 0; box-shadow: inset 0 -60px 70px -30px rgba(16,21,31,0.55); } .hero-portrait .tag-chip{ position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); background: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; font-family: var(--mono); font-size: 0.75rem; color: var(--paper-dim); white-space: nowrap; display: flex; align-items: center; gap: 8px; } .hero-portrait .tag-chip .pulse{ width: 7px; height: 7px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 0 0 rgba(88,163,116,.6); animation: pulse 2s infinite; } @keyframes pulse{ 0%{ box-shadow: 0 0 0 0 rgba(88,163,116,.5); } 70%{ box-shadow: 0 0 0 8px rgba(88,163,116,0); } 100%{ box-shadow: 0 0 0 0 rgba(88,163,116,0); } } @media (max-width: 900px){ .hero .wrap{ grid-template-columns: 1fr; } .hero-portrait{ order: -1; width: min(60%, 260px); margin: 0 auto 12px; } .hero{ padding-top: 130px; } } /* ================================ ABOUT ==================================== */ .about-grid{ display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; } .about-bio p{ color: var(--paper-dim); font-size: 1.03rem; } .about-bio p + p{ margin-top: 16px; } .status-line{ margin-top: 26px; padding: 16px 18px; border-left: 2px solid var(--rust); background: var(--rust-tint); border-radius: 0 var(--radius-s) var(--radius-s) 0; font-family: var(--mono); font-size: 0.86rem; color: var(--paper); } .currently{ margin-top: 28px; display: flex; gap: 12px; align-items: flex-start; font-family: var(--mono); font-size: 0.86rem; color: var(--paper-dim); } .currently b{ color: var(--paper); } .skill-groups{ display: grid; gap: 12px; } .skill-card{ border: 1px solid var(--line); background: var(--ink-2); border-radius: var(--radius-m); padding: 18px 20px; } .skill-card h3{ font-family: var(--mono); font-size: 0.78rem; color: var(--slate); font-weight: 500; margin-bottom: 12px; letter-spacing: .02em; } .skill-card .tagrow{ gap: 7px; } /* leetcode widget */ .leet-card{ margin-top: 14px; border: 1px solid var(--line); background: var(--ink-2); border-radius: var(--radius-m); padding: 20px; } .leet-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .leet-head h3{ font-family: var(--mono); font-size: 0.82rem; color: var(--paper); margin: 0; } .leet-head a{ font-family: var(--mono); font-size: 0.76rem; color: var(--rust); display:flex; align-items:center; gap:6px; } .leet-note{ font-family: var(--mono); font-size: 0.78rem; color: var(--paper-dim); } /* ================================ WORK ===================================== */ .project{ padding: 48px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--ink-2); } .project + .project{ margin-top: 40px; } .project-top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; } .project-title{ font-size: clamp(1.5rem, 2.6vw, 1.9rem); } .project-pitch{ color: var(--paper-dim); margin-top: 10px; max-width: 60ch; font-size: 1.02rem; } .project-links{ display: flex; gap: 10px; flex-wrap: wrap; } .project-body{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; margin-top: 28px; } .project-bullets li{ position: relative; padding-left: 20px; color: var(--paper-dim); font-size: 0.96rem; margin-bottom: 12px; } .project-bullets li::before{ content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--rust); } .project-bullets b{ color: var(--paper); font-weight: 600; } .decision{ border: 1px dashed var(--line); border-radius: var(--radius-m); padding: 18px 20px; background: var(--ink); } .decision .eyebrow{ margin-bottom: 10px; } .decision p{ font-size: 0.92rem; color: var(--paper-dim); } .decision p + p{ margin-top: 8px; } .demo-box{ margin-top: 18px; border-radius: var(--radius-m); border: 1px solid var(--slate-dim); background: linear-gradient(180deg, rgba(124,151,184,0.08), transparent); padding: 16px 18px; } .demo-box .eyebrow{ margin-bottom: 10px; } .demo-creds{ display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.86rem; } .demo-creds code{ background: var(--ink-2); border: 1px solid var(--line); padding: 2px 8px; border-radius: 4px; color: var(--paper); } .demo-note{ margin-top: 10px; font-size: 0.8rem; color: var(--paper-faint); } .shots{ margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .shot{ border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); background: var(--ink); cursor: zoom-in; } .shot img{ width: 100%; height: 190px; object-fit: cover; object-position: top; transition: transform .35s ease; } .shot:hover img{ transform: scale(1.04); } .shot figcaption{ font-family: var(--mono); font-size: 0.7rem; color: var(--paper-faint); padding: 10px 12px; border-top: 1px solid var(--line); } .flow-block{ margin-top: 30px; } .flow-block .eyebrow{ margin-bottom: 14px; } .diagram-card{ background: var(--paper); border-radius: var(--radius-m); padding: 18px; border: 1px solid var(--rust-deep); box-shadow: 0 18px 34px -18px rgba(0,0,0,0.55); } .diagram-card .cap{ font-family: var(--mono); font-size: 0.7rem; color: #6b4a37; margin-bottom: 10px; display: flex; justify-content: space-between; } .diagram-card img{ border-radius: 4px; cursor: zoom-in; width: 100%; height: auto; } .diagram-card + .diagram-card{ margin-top: 20px; } .flow-stack .diagram-card:first-of-type{ margin-top: 0; } @media (max-width: 900px){ .project{ padding: 26px; } .project-body{ grid-template-columns: 1fr; } .shots{ grid-template-columns: 1fr 1fr; } .about-grid{ grid-template-columns: 1fr; } } @media (max-width: 560px){ .shots{ grid-template-columns: 1fr; } section{ padding: 76px 0; } } /* ================================ CONTACT =================================== */ .contact-panel{ border: 1px solid var(--line); border-radius: var(--radius-l); background: radial-gradient(120% 140% at 10% 0%, rgba(197,94,51,0.10), transparent 60%), var(--ink-2); padding: 64px var(--gutter); text-align: center; } .contact-panel h2{ font-size: clamp(1.9rem, 4vw, 2.8rem); max-width: 18ch; margin: 0 auto; } .contact-panel p{ color: var(--paper-dim); margin-top: 16px; max-width: 48ch; margin-left: auto; margin-right: auto; } .contact-actions{ margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .contact-links{ margin-top: 44px; display: flex; justify-content: center; gap: 34px; flex-wrap: wrap; } .contact-links a{ font-family: var(--mono); font-size: 0.86rem; color: var(--paper-dim); display: flex; align-items: center; gap: 8px; transition: color .2s ease; } .contact-links a:hover{ color: var(--rust); } footer{ padding: 30px 0 50px; text-align: center; font-family: var(--mono); font-size: 0.76rem; color: var(--paper-faint); } /* ================================ LIGHTBOX =================================== */ .lightbox{ position: fixed; inset: 0; z-index: 100; background: rgba(10,13,20,0.92); display: flex; align-items: center; justify-content: center; padding: 40px; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .lightbox[hidden]{ display: none; } /* our own display:flex above would otherwise beat the UA [hidden] rule */ .lightbox.is-open{ opacity: 1; pointer-events: auto; } .lightbox img{ max-width: min(92vw, 1100px); max-height: 88vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.6); } .lightbox-close{ position: absolute; top: 26px; right: 30px; font-family: var(--mono); color: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 0.8rem; background: var(--ink-2); }