/* mahadii.com — Chrome extensions portfolio Base: dark navy shell shared by every page. Per-extension pages add a theme class to that swaps the accent. */ :root { --ink: #0e1830; --ink-mid: #16233f; --panel: #1d2c4c; --line: #25375b; --text: #e6ecf7; --muted: #8fa3c4; --mono: "SF Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace; --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* default accent — used on index/contact (neutral indigo) */ --accent: #6d8cff; --accent-lt: #93a9ff; --accent-ink: #0d1230; } /* Theme: NUB Office Schedule Tracker — amber */ body.theme-amber { --accent: #e8901a; --accent-lt: #f4ab52; --accent-ink: #2a1a00; } /* Theme: NUB Automated Marks Entry — blue/green */ body.theme-marks { --accent: #2563eb; --accent-lt: #60a5fa; --accent-ink: #ffffff; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } body { font-family: var(--sans); background: var(--ink); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; } .wrap { max-width: 820px; margin: 0 auto; padding: 0 24px; } /* ---------- header ---------- */ .top { border-bottom: 1px solid var(--line); background: var(--ink-mid); position: sticky; top: 0; z-index: 10; } .top .wrap { display: flex; align-items: center; gap: 12px; height: 64px; } .mark { width: 32px; height: 32px; border-radius: 9px; flex: none; background: var(--accent); display: grid; place-items: center; color: var(--accent-ink); font-size: 15px; font-weight: 800; overflow:hidden; } .mark img { width: 100%; height: 100%; object-fit: cover; } .brand { font-weight: 700; font-size: 15px; letter-spacing: .2px; } .brand span { display: block; font-size: 10.5px; color: var(--muted); font-weight: 400; letter-spacing: .4px; } .top nav { margin-left: auto; display: flex; gap: 4px; } .top nav a { color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 500; padding: 7px 12px; border-radius: 8px; } .top nav a:hover { color: var(--text); background: rgba(255,255,255,.05); } .top nav a[aria-current="page"] { color: var(--accent); } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---------- hero ---------- */ .hero { padding: 64px 0 40px; } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } h1 { font-size: clamp(30px, 6vw, 46px); line-height: 1.1; font-weight: 700; letter-spacing: -.5px; } h1 em { font-style: normal; color: var(--accent); } .lede { color: var(--muted); font-size: 17px; margin-top: 16px; max-width: 60ch; } /* ---------- extension cards (index page) ---------- */ .ext-grid { display: grid; gap: 16px; margin-top: 10px; } .ext-card { display: flex; gap: 18px; align-items: flex-start; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 22px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; } .ext-card:hover { border-color: var(--card-accent, var(--accent)); transform: translateY(-2px); } .ext-card .icon { width: 56px; height: 56px; border-radius: 14px; flex: none; overflow: hidden; background: white; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); } .ext-card .icon img { width: 100%; height: 100%; object-fit: cover; } .ext-card .body h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; } .ext-card .body p { color: var(--muted); font-size: 14px; margin-bottom: 10px; } .ext-card .tags { display: flex; gap: 6px; flex-wrap: wrap; } .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); } .ext-card .cta { margin-left: auto; align-self: center; flex: none; font-size: 13px; font-weight: 600; color: var(--accent-card, var(--accent)); white-space: nowrap; } /* ---------- sections ---------- */ section { padding: 40px 0; border-top: 1px solid var(--line); } section:first-of-type { border-top: none; } h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); font-weight: 700; margin-bottom: 18px; } h3 { font-size: 17px; margin: 26px 0 8px; font-weight: 600; } h3:first-child { margin-top: 0; } p { margin-bottom: 14px; color: #cdd8ea; } p.tight { margin-bottom: 8px; } ul { margin: 0 0 16px 20px; color: #cdd8ea; } ol { margin: 0 0 16px 20px; color: #cdd8ea; } li { margin-bottom: 7px; } strong { color: var(--text); } a { color: var(--accent); } a:hover { color: var(--accent-lt); } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .card { border: 1px solid var(--line); border-radius: 13px; padding: 18px 18px 16px; background: var(--panel); } .card h4 { font-size: 14.5px; margin-bottom: 6px; font-weight: 600; } .card p { font-size: 13.5px; color: var(--muted); margin: 0; } /* column-format table used on marks-entry page */ .col-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 10px 0 18px; } .col-table th, .col-table td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; } .col-table th { background: var(--panel); color: var(--accent); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; } .col-table td { color: #cdd8ea; } /* contact block */ .contact-box { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 22px; margin-bottom: 20px; } .contact-box .label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .contact-box .value { font-size: 19px; font-weight: 600; word-break: break-all; } .contact-box .value a { text-decoration: none; } .note { font-size: 13px; color: var(--muted); margin-top: 10px; } .updated { font-family: var(--mono); font-size: 12px; color: var(--muted); border-left: 2px solid var(--accent); padding-left: 12px; margin-bottom: 26px; } /* small badge for "which extension" selector on contact page */ .ext-pick { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 22px; } .ext-pick a { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; text-decoration: none; color: var(--text); font-size: 13.5px; font-weight: 600; background: var(--panel); } .ext-pick a:hover { border-color: var(--accent); } .ext-pick .dot { width: 8px; height: 8px; border-radius: 50%; } /* ---------- footer ---------- */ footer { border-top: 1px solid var(--line); margin-top: 30px; padding: 26px 0 42px; color: var(--muted); font-size: 13px; } footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; } footer a { color: var(--muted); text-decoration: none; } footer a:hover { color: var(--accent); } @media (max-width: 560px) { .hero { padding: 44px 0 30px; } .top nav a { padding: 7px 9px; } .ext-card { flex-direction: column; } .ext-card .cta { margin-left: 0; } }