/* =========================================================== Practical AI Nepal — Site-wide chrome Imports tokens from colors_and_type.css. Light + dark themes via [data-theme="dark"] on . =========================================================== */ @import url("colors_and_type.css"); *, *::before, *::after { box-sizing: border-box; } html { min-height: 100%; background: var(--ink); } body { min-height: 100vh; min-height: 100dvh; margin: 0; overflow-x: hidden; background: var(--ink); } img, svg { display: block; max-width: 100%; } .grecaptcha-badge { visibility: hidden !important; } .captcha-attribution { font-family: var(--font-sans); font-size: 11px; color: var(--fg-muted); margin-top: 24px; line-height: 1.4; opacity: 0.8; text-align: center; } .captcha-attribution a { color: inherit; text-decoration: underline; } @media (max-width: 640px) { .captcha-attribution { margin-top: 12px; } } html { transition: background var(--dur-state) var(--ease-paper), color var(--dur-state) var(--ease-paper); } /* ----- Containers ---------------------------------------- */ .site { max-width: 100%; min-height: 100vh; min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; background: var(--bg); } .container { max-width: var(--container-wide); margin: 0 auto; padding: 0 48px; } .container.narrow { max-width: 1040px; } .container.measure { max-width: 760px; } /* ----- Nav ----------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); height: var(--nav-height); } .nav-inner { max-width: var(--container-wide); margin: 0 auto; padding: 0 48px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .nav .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .nav .brand img { height: 32px; } .nav .brand .wm { font-family: var(--font-sans); font-size: 17px; font-weight: 700; color: var(--fg); letter-spacing: -0.035em; white-space: nowrap; flex-shrink: 0; } .nav .brand .wm em { color: inherit; font-style: normal; font-weight: 700; } .nav .brand .deva { font-family: var(--font-deva-serif); font-size: 11.5px; color: var(--fg-deva); letter-spacing: 0.005em; font-weight: 500; } .nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; } .nav ul a { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--fg); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color var(--dur-hover) var(--ease-paper), border-color var(--dur-hover) var(--ease-paper); } .nav ul a:hover { color: var(--accent-strong, var(--accent)); } .nav ul a.active { /* Keep the brand accent on the underline indicator, but use --fg for the text itself so contrast stays AA on cream (orange-on-cream is 2.3:1). */ border-bottom-color: var(--accent); color: var(--fg); } .nav ul a.active:hover { color: var(--fg); } .nav .actions { display: flex; align-items: center; gap: 12px; } .lang { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); border: 1px solid var(--border); padding: 5px 10px; border-radius: 999px; } .lang em { color: var(--fg); font-style: normal; font-weight: 600; } /* Theme toggle button */ .theme-toggle { width: 34px; height: 34px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--fg); transition: background var(--dur-hover) var(--ease-paper), border-color var(--dur-hover) var(--ease-paper), color var(--dur-hover) var(--ease-paper); } .theme-toggle:hover { border-color: var(--fg); background: var(--bg-2); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ----- Buttons ------------------------------------------- */ .btn { font-family: var(--font-sans); font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: var(--radius); border: 0; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: background var(--dur-state) var(--ease-paper), color var(--dur-state) var(--ease-paper), border-color var(--dur-state) var(--ease-paper); } .btn-primary { background: var(--accent); color: var(--accent-fg); } .btn-primary:hover { background: var(--accent-hover); color: var(--accent-fg); } .btn-outline { background: transparent; color: var(--fg); border: 1px solid var(--fg); } .btn-outline:hover { background: var(--fg); color: var(--bg); } .btn-on-dark { background: transparent; color: var(--paper); border: 1px solid rgba(236, 229, 214, 0.35); } .btn-on-dark:hover { border-color: var(--paper); color: var(--paper); } .btn-lg { padding: 14px 22px; font-size: 14px; } /* ----- Eyebrow / overline -------------------------------- */ .eyebrow { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 12px; } .eyebrow::before { content: ""; display: inline-block; width: 32px; height: 1px; background: currentColor; } .eyebrow.muted { color: var(--fg-muted); } .eyebrow.muted::before { background: var(--border); } /* ----- Page header (sub-pages) --------------------------- */ .pagehead { background: var(--bg); padding: 80px 0 56px; border-bottom: 1px solid var(--border); } .pagehead .crumbs { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-muted); margin-bottom: 28px; } .pagehead .crumbs a { color: var(--fg-muted); text-decoration: none; } .pagehead .crumbs a:hover { color: var(--fg); } .pagehead h1 { font-family: var(--font-serif); font-size: clamp(40px, 5vw, 68px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; color: var(--fg); margin: 0; text-wrap: balance; max-width: 22ch; } .pagehead .deva-tag { font-family: var(--font-deva-serif); font-size: 18px; color: var(--fg-deva); margin-top: 16px; font-weight: 500; letter-spacing: 0.005em; } .pagehead p.lead { font-family: var(--font-sans); font-size: 19px; line-height: 1.55; color: var(--fg-2); max-width: 60ch; margin: 28px 0 0; text-wrap: pretty; } /* Dark page head variant — always-ink signature band (theme-aware via --ink) */ .pagehead.dark { background: var(--ink); color: var(--on-ink); border-bottom: none; position: relative; overflow: hidden; } .pagehead.dark h1 { color: var(--on-ink); } .pagehead.dark .crumbs, .pagehead.dark .crumbs a { color: var(--on-ink-muted); } .pagehead.dark .deva-tag { color: var(--on-ink-deva); } .pagehead.dark p.lead { color: var(--on-ink-2); } .pagehead .topo { position: absolute; inset: 0; opacity: 0.06; pointer-events: none; } .pagehead .topo svg { width: 100%; height: 100%; } .pagehead .topo path { stroke: var(--on-ink); } .pagehead .container { position: relative; } /* ----- Section ------------------------------------------- */ .section { padding: 96px 0; } .section.tight { padding: 64px 0; } .section.bg-paper-2 { background: var(--bg-2); } /* bg-ink — always-dark signature band; deepens in dark mode for contrast */ .section.bg-ink { background: var(--ink); color: var(--on-ink); } .section.bg-ink h2, .section.bg-ink h3, .section.bg-ink h4 { color: var(--on-ink); } .section.bg-ink p { color: var(--on-ink-2); } .section-head { display: grid; grid-template-columns: 220px 1fr; gap: 40px; margin-bottom: 64px; align-items: baseline; } .section-head .ov { font-family: var(--font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); } .section-head h2 { font-family: var(--font-serif); font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; color: var(--fg); text-wrap: balance; max-width: 22ch; margin: 0; } .section-head .right { font-family: var(--font-sans); font-size: 15px; color: var(--fg-2); max-width: 50ch; } .section.bg-ink .section-head h2 { color: var(--on-ink); } .section.bg-ink .section-head .right { color: var(--on-ink-2); } .section.bg-ink .section-head .ov { color: var(--sunrise); } /* ----- Cards --------------------------------------------- */ .card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; gap: 16px; } .card.filled { background: var(--bg-2); border: 0; } .tag { font-family: var(--font-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--sunrise-tint); color: var(--sunrise-deep); line-height: 1; } .tag.blue { background: var(--midnight-tint); color: var(--midnight-600); } .tag.muted { background: var(--bg-2); color: var(--fg-2); border: 1px solid var(--border); } .tag.dark { background: rgba(255,255,255,0.08); color: var(--paper); border: 1px solid rgba(255,255,255,0.18); } [data-theme="dark"] .tag { background: rgba(245, 130, 51, 0.15); color: var(--sunrise-300); } [data-theme="dark"] .tag.blue { background: rgba(106, 126, 159, 0.18); color: var(--midnight-200); } [data-theme="dark"] .tag.muted { background: var(--bg-2); color: var(--fg-2); border: 1px solid var(--border); } /* ----- Grid wrappers (1px hairline grid) ----------------- */ /* Used by sectors, audiences, briefs, cred grids, etc. */ .hairline-grid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .hairline-grid > * { background: var(--bg); } /* ----- Topo motif ---------------------------------------- */ .topo-bg { position: absolute; inset: 0; opacity: 0.05; pointer-events: none; } .topo-bg svg { width: 100%; height: 100%; } .topo-bg path { stroke: currentColor; fill: none; stroke-width: 1; } /* ----- Footer (always-ink, theme-aware) ------------------ */ .footer { margin-top: auto; background: var(--ink); color: var(--on-ink); padding: 80px 0 calc(32px + env(safe-area-inset-bottom)); } .footer-inner { max-width: var(--container-wide); margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; } .footer .brand-block .wm { font-family: var(--font-sans); font-size: 22px; font-weight: 700; color: var(--paper); letter-spacing:-0.035em; } .footer .brand-block .wm em { color: inherit; font-style: normal; font-weight: 700; } .footer .brand-block .deva { font-family: var(--font-deva-serif); font-size: 14px; color: var(--on-ink-deva); margin-top: 4px; font-weight: 500; letter-spacing: 0.005em; } .footer .brand-block p { font-family: var(--font-sans); font-size: 13px; color: #98A4BA; line-height: 1.55; margin: 24px 0 0; max-width: 36ch; } .footer h4 { font-family: var(--font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; color: var(--paper); margin: 0 0 20px; } .footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .footer ul a { font-family: var(--font-sans); font-size: 13px; color: #C9C0AC; text-decoration: none; } .footer ul a:hover { color: var(--paper); } .footer-base { max-width: var(--container-wide); margin: 56px auto 0; padding: 24px 48px 0; border-top: 1px solid #25364E; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-family: var(--font-mono); font-size: 11px; color: #6E7B92; } /* ----- Form controls (shared) ---------------------------- */ .field { display: grid; gap: 6px; margin-bottom: 20px; } .field label { font-family: var(--font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-2); } .field input, .field textarea, .field select { font: inherit; font-family: var(--font-sans); font-size: 15px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--fg); outline: none; transition: border-color var(--dur-state) var(--ease-paper); } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--fg); } .field textarea { min-height: 120px; resize: vertical; } /* ----- Utility ------------------------------------------- */ .deva { font-family: var(--font-deva-serif); } .mono { font-family: var(--font-mono); } .muted { color: var(--fg-muted); } .divider-h { border: 0; border-top: 1px solid var(--border); margin: 48px 0; } .divider-strong { border: 0; border-top: 2px solid var(--fg); margin: 48px 0; } /* ----- Responsive ---------------------------------------- */ /* Tablet (≤ 1024px) — gentle scale-down before column collapse */ @media (max-width: 1024px) { .container { padding: 0 32px; } .nav-inner { padding: 0 32px; } .footer-inner { padding: 0 32px; } .pagehead h1 { font-size: clamp(40px, 6.5vw, 64px); } .section-head { gap: 32px; } .section-head h2 { font-size: 38px; } } /* Small tablet / large phone landscape (≤ 960px) — start collapsing */ @media (max-width: 960px) { .nav-inner { padding: 0 20px; gap: 16px; } .container { padding: 0 20px; } .footer-inner { grid-template-columns: 1fr 1fr; padding: 0 20px; gap: 32px 24px; } .section { padding: 64px 0; } .section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; } .section-head h2 { font-size: 32px; } .section-head .right { max-width: 60ch; } .pagehead { padding: 64px 0 48px; } .pagehead h1 { font-size: clamp(36px, 7vw, 56px); } .pagehead p.lead { font-size: 17px; } .nav ul { gap: 18px; } .nav ul a { font-size: 13px; } .nav .brand .deva { display: none; } } /* Phone (≤ 640px) — single-column, scrollable nav strip */ @media (max-width: 640px) { .nav { height: auto; } .nav-inner { flex-wrap: wrap; padding: 12px 16px; gap: 12px; height: auto; align-items: center; } .nav .brand .wm { font-size: 15px; } .nav ul { order: 3; width: 100%; gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; } .nav ul::-webkit-scrollbar { display: none; } .nav ul a { white-space: nowrap; font-size: 13px; } .nav .actions { gap: 8px; } .lang { padding: 4px 8px; font-size: 10px; } .theme-toggle { width: 30px; height: 30px; } .container { padding: 0 16px; } .container.narrow, .container.measure { padding: 0 16px; } .section { padding: 48px 0; } .section.tight { padding: 36px 0; } .section-head { gap: 12px; margin-bottom: 28px; } .section-head h2 { font-size: 26px; line-height: 1.15; } .section-head .ov { font-size: 10.5px; } .pagehead { padding: 44px 0 36px; } .pagehead h1 { font-size: clamp(30px, 9vw, 40px); line-height: 1.05; } .pagehead p.lead { font-size: 16px; margin-top: 18px; } .pagehead .deva-tag { font-size: 16px; } .pagehead .crumbs { font-size: 10px; margin-bottom: 18px; } .footer { padding: 56px 0 calc(28px + env(safe-area-inset-bottom)); } .footer-inner { grid-template-columns: 1fr; padding: 0 16px; gap: 28px; } .footer-base { flex-direction: column; align-items: flex-start; gap: 8px; padding: 32px 16px 0; margin-top: 40px; } .footer .brand-block .wm { font-size: 20px; } .btn, .btn-lg { padding: 12px 18px; font-size: 14px; } .card { padding: 22px 20px; } .tag { font-size: 10px; padding: 3px 7px; } } /* Tiny phone (≤ 380px) — keep things from breaking on cramped screens */ @media (max-width: 380px) { .container { padding: 0 14px; } .nav-inner { padding: 12px 14px; } .nav .brand img { height: 28px; } .nav .brand .wm { font-size: 14px; } .pagehead h1 { font-size: 28px; } .section-head h2 { font-size: 24px; } }