/* ========================================================================== Javed M A i — Data Privacy & AI Governance Design tokens and components, ported from the Nocturne handoff bundle. Light is the default theme; the choice is persisted and applied as data-theme="light" | "dark" on . ========================================================================== */ /* ---------- Inter, self-hosted ---------- Google serves Inter as one variable font per subset, so a single file covers every weight the site uses (400 body, 600 buttons, 700 headings). Hosting it on our own origin removes two third-party DNS + TLS handshakes from the critical path. unicode-range means latin-ext is only fetched if a page actually contains one of its characters. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Tokens: light (default) ---------- */ :root { --color-bg: #ffffff; --color-surface: #f5f7fa; --color-text: #111214; --color-heading: #123a6b; --color-accent: #17603e; --color-accent-100: #0d4529; --color-accent-200: #115434; --color-accent-300: #0f5231; --color-accent-700: #57ab7f; --color-accent-800: #dcf0e4; --color-divider: rgba(17, 18, 20, 0.14); --color-neutral-300: #16181c; --color-neutral-400: #24272d; --color-neutral-500: #3f444c; --color-neutral-800: #e3e7ec; --color-section: #0f4a30; --shadow-sm: 0 0 0 1px #e4e8ee; --shadow-md: 0 0 0 1px #dfe3ea, 0 6px 18px rgba(17, 18, 20, 0.08); --shadow-lg: 0 0 0 1px #d6dae2, 0 16px 40px rgba(17, 18, 20, 0.12); --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --space-1: 2.8px; --space-2: 5.6px; --space-3: 8.4px; --space-4: 11.2px; --space-6: 16.8px; --space-8: 22.4px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --page-max: 1120px; } /* ---------- Tokens: dark ---------- */ html[data-theme="dark"] { --color-bg: #161826; --color-surface: #232532; --color-text: #e9e9ed; --color-heading: #9ecbf5; --color-accent: #7fd8a6; --color-accent-100: #f5f4ff; --color-accent-200: #e7e5fe; --color-accent-300: #b6ecce; --color-accent-700: #2f6b4c; --color-accent-800: #1d4531; --color-divider: rgba(233, 233, 237, 0.16); --color-neutral-300: #cfd3e5; --color-neutral-400: #b2b6ca; --color-neutral-500: #9397ab; --color-neutral-800: #3f424d; --color-section: #123a2a; --shadow-sm: 0 0 0 1px #3f424d; --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, 0.55); --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0, 0, 0, 0.65); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } /* A display value from a class outranks the browser's [hidden] rule, so state it explicitly — .grid-3[hidden] must actually stay hidden. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400; min-height: 100vh; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); color: var(--color-heading); } h1 { font-size: 42px; } h2 { font-size: 36px; } h3 { font-size: 27px; } h4 { font-size: 20px; } h5 { font-size: 16px; } h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } p { margin: 0 0 var(--space-3); } p, li { text-align: justify; text-justify: inter-word; hyphens: auto; } a { color: var(--color-accent); text-underline-offset: 3px; } a:hover { color: var(--color-accent-300); } /* height:auto keeps the intrinsic aspect ratio when width/height attributes are present — those attributes are there to reserve layout space, not to fix the rendered box. */ img { display: block; max-width: 100%; height: auto; } figure { margin: 0; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: var(--color-accent-800); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--color-bg); color: var(--color-accent); padding: 10px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .skip-link:focus { left: 12px; top: 12px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Layout ---------- */ .page { max-width: var(--page-max); margin: 0 auto; padding: 64px 32px 96px; } .page--home { padding-top: 0; } .kicker { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); font-weight: 700; margin: 0 0 16px; text-align: left; } .page-h1 { font-size: 50px; letter-spacing: -0.025em; margin: 0 0 24px; } .hero-h1 { font-size: 60px; line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 20px; max-width: 15ch; } /* Pull quote — the hero headline's treatment (Inter 700, heading colour, tight leading, -0.025em tracking), sized down to fit the narrow column it sits in. Not a heading element, so the h1 rule that supplies those values elsewhere is restated here. */ .pull-quote { font-family: var(--font-heading); font-weight: 700; color: var(--color-heading); font-size: clamp(23px, 2.9vw, 34px); line-height: 1.15; letter-spacing: -0.025em; margin: 0; text-align: left; } .lead { font-size: 18px; line-height: 1.65; color: var(--color-neutral-300); /* Body copy fills its column rather than sitting on a narrow measure. */ max-width: none; margin: 0 0 32px; text-align: justify; } /* Fading hairline — a Nocturne signature */ .hr { height: 1px; border: 0; margin: 56px 0 40px; background: linear-gradient(90deg, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent); } .hr--tight { margin: 32px 0 24px; } .section { padding: 72px 0 0; } .section:first-child { padding-top: 0; } .grid-col2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 48px; align-items: center; } .grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .grid-labelrow { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); } @supports not (background: color-mix(in srgb, red 50%, transparent)) { .site-header { background: var(--color-bg); } } .site-header::after { content: ""; display: block; height: 1px; background: linear-gradient(90deg, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent); } .nav { display: flex; align-items: center; gap: var(--space-4); max-width: var(--page-max); margin: 0 auto; padding: 14px 32px; } .nav-brand { font-family: var(--font-heading); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; margin-right: auto; color: var(--color-text); text-decoration: none; } .nav-links { display: flex; align-items: center; gap: 22px; } .nav-links a { color: inherit; text-decoration: none; font-size: 14px; } .nav-links a:hover { color: var(--color-accent); } .nav-links a[aria-current="page"] { color: var(--color-accent); font-weight: 700; } .nav-toggle { display: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); } .btn-primary { color: var(--color-accent); border-color: var(--color-accent); font-weight: 700; } .btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); } .btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } /* ---------- Cards ---------- */ .card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); } a.card { text-decoration: none; color: inherit; } a.card:hover { box-shadow: var(--shadow-md); color: inherit; } .card-thumb { width: 100%; height: 96px; object-fit: contain; object-position: left center; border-radius: var(--radius-sm); background: var(--color-bg); padding: 8px; } .card-kicker { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); font-weight: 700; } .card-title { font-family: var(--font-heading); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--color-heading); } .card-body { margin: 0; font-size: 15px; flex: 1; color: var(--color-neutral-400); text-align: justify; } .card-meta { font-size: 14px; font-family: var(--font-mono); color: var(--color-neutral-500); margin: 0; text-align: left; } .card-link { font-size: 14px; text-decoration: none; } .card-result { font-size: 14px; color: var(--color-accent-300); } /* ---------- Tags ---------- */ .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); font-weight: 700; } .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); } .tag-row { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 56px; } /* ---------- Stat band ---------- */ .statband { border-radius: var(--radius-lg); padding: 40px 44px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; background-color: var(--color-section); color: #ffffff; } .statband .stat-value { font-family: var(--font-heading); font-weight: 600; font-size: 38px; letter-spacing: -0.02em; line-height: 1; color: #ffffff; } .statband .stat-label { font-size: 14px; margin-top: 8px; color: rgba(255, 255, 255, 0.9); text-align: left; } /* ---------- Forms ---------- */ .field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); } .input { width: 100%; min-height: 36px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } textarea.input { min-height: 120px; resize: vertical; } .contact-form { display: flex; flex-direction: column; gap: 18px; } /* ---------- Hero word animation ---------- */ @keyframes charReveal { 0%, 5% { opacity: 0; transform: translate3d(-0.9em, 0, 0); } 16%, 100% { opacity: 1; transform: none; } } /* Each character is its own inline-block, which the browser treats as a break opportunity — without this the word splits across lines mid-letter. */ [data-animate-word] { white-space: nowrap; } .char-anim { display: inline-block; will-change: transform, opacity; animation: charReveal 10s cubic-bezier(0.16, 1, 0.3, 1) infinite; } @media (prefers-reduced-motion: reduce) { .char-anim { animation: none; } html { scroll-behavior: auto; } } .accent { color: var(--color-accent); font-weight: 700; } /* ---------- Bulleted lists with square accent markers ---------- */ .marker-list { display: flex; flex-direction: column; gap: 20px; } .marker-item { position: relative; padding-left: 18px; } .marker-item::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; background: var(--color-accent); } .marker-title { font-size: 18px; text-align: left; } .marker-sub { font-size: 14px; color: var(--color-neutral-500); margin-top: 4px; text-align: left; } .rule-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .rule-item { font-size: 16px; padding-left: 14px; border-left: 2px solid var(--color-accent-700); } /* ---------- Logo plates ---------- */ .logo-stack { display: grid; grid-template-columns: 1fr; gap: 12px; } .logo-plate { background: #ffffff; border-radius: var(--radius-md); padding: 12px 16px; display: flex; align-items: center; justify-content: center; min-height: 112px; } .logo-plate img { height: 64px; max-height: 100%; width: auto; max-width: 100%; object-fit: contain; } /* Logos are sized optically rather than to one fixed height: a square crest at the same height as a wide wordmark reads as much smaller than it is. The class is applied from each image's own aspect ratio — see work.html. */ .logo-plate img.logo--mark { height: 88px; } .logo-plate img.logo--regular { height: 68px; } .logo-plate img.logo--wide { height: 54px; } .logo-plate .logo-name { font-size: 15px; font-weight: 600; color: #111214; text-align: center; } .aside-kicker { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); font-weight: 700; margin: 0 0 14px; text-align: center; } /* ---------- Memberships ---------- */ .membership-list { display: flex; flex-direction: column; gap: 20px; } .membership-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: center; } .membership-row .logo-plate { min-height: 96px; } /* ---------- Experience list ---------- */ .role-list { display: flex; flex-direction: column; gap: 40px; } .role-dates { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); font-weight: 700; margin-bottom: 8px; } .role-title { font-size: 24px; margin: 0 0 4px; } .role-org { font-size: 15px; color: var(--color-neutral-500); margin-bottom: 14px; } .role-body { margin: 0; font-size: 16px; line-height: 1.65; color: var(--color-neutral-300); } /* ---------- Article body (blog posts, service pages) ---------- */ .article { max-width: none; } .article h2 { font-size: 30px; margin: 48px 0 16px; } .article h3 { font-size: 22px; margin: 32px 0 12px; } .article p { font-size: 17px; line-height: 1.7; color: var(--color-neutral-300); margin: 0 0 18px; } .article ul, .article ol { padding-left: 22px; margin: 0 0 20px; } .article li { font-size: 17px; line-height: 1.7; color: var(--color-neutral-300); margin-bottom: 10px; } .article ul { list-style: none; padding-left: 0; } .article ul > li { position: relative; padding-left: 18px; } .article ul > li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; background: var(--color-accent); } .article ol > li::marker { color: var(--color-accent); font-weight: 700; } .article blockquote { margin: 24px 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--color-accent-700); color: var(--color-neutral-400); } .post-meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 14px; color: var(--color-neutral-500); margin: 0 0 32px; } .breadcrumb { font-size: 14px; color: var(--color-neutral-500); margin: 0 0 16px; text-align: left; } .breadcrumb a { text-decoration: none; } .back-link { display: inline-block; margin-top: 40px; font-size: 15px; } /* ---------- Collection listings (auto-generated) ---------- */ /* The empty state stands in for a whole row of cards. */ .collection-empty { grid-column: 1 / -1; padding: 24px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); color: var(--color-neutral-400); font-size: 15px; } /* ---------- Footer ---------- */ .site-footer { background: linear-gradient(90deg, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent) top / 100% 1px no-repeat; } .site-footer .footer-inner { max-width: var(--page-max); margin: 0 auto; padding: 32px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-size: 14px; color: var(--color-neutral-500); } .site-footer a { text-decoration: none; } .footer-links { display: flex; flex-wrap: wrap; gap: 20px; } /* ---------- Responsive ---------- */ @media (max-width: 840px) { /* !important because several pages set their column ratio inline, which would otherwise win here and keep them two-column on a phone. */ .grid-col2, .grid-labelrow { grid-template-columns: minmax(0, 1fr) !important; } .grid-col2 { gap: 32px; } .grid-labelrow { gap: 20px; } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .statband { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 28px; gap: 24px; } .hero-h1 { font-size: 34px; } .page-h1 { font-size: 32px; } h2 { font-size: 28px; } h3 { font-size: 22px; } .sticky-photo { position: static !important; max-width: 360px; width: 100% !important; height: auto !important; } .page { padding-left: 20px; padding-right: 20px; } .nav { flex-wrap: wrap; gap: 12px; padding: 12px 20px; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-divider); border-radius: var(--radius-md); color: var(--color-text); padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; } .nav-links { display: none; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 6px; } .nav-links.is-open { display: flex; } .nav-links a { padding: 8px 0; font-size: 15px; } .nav-links .theme-toggle { margin-top: 6px; } } @media (max-width: 560px) { .membership-row { grid-template-columns: minmax(0, 1fr); gap: 14px; } .grid-3 { grid-template-columns: minmax(0, 1fr); } .statband { grid-template-columns: minmax(0, 1fr); } .hero-h1 { font-size: 30px; } } @media print { .site-header, .site-footer, .nav-toggle { display: none; } body { background: #fff; color: #000; } }