/* ========================================================================== Internalytics — main.css (MVP) Source: Strategy & Design Briefs Brand: Analytical • Credible • Insightful • Student‑first ========================================================================== */ /* ---------------------------- 0) Root Variables ---------------------------- */ :root { /* Brand palette */ --navy-900: #0C1A2B; --teal-500: #00D1C1; --violet-500: #5B4FE9; --green-500: #00A676; --gold-400: #E5B700; --soft-blue-300: #A5C8FF; --offer-green-400: #2ECC71; /* Neutrals */ --gray-950: #0b0f14; --gray-900: #121722; --gray-800: #1a2230; --gray-700: #2a3446; --gray-600: #3b465b; --gray-500: #55627a; --gray-400: #7a889d; --gray-300: #A8B3C2; --gray-200: #D4DAE2; --gray-150: #E6EBF2; --gray-100: #F2F5F9; --white: #FFFFFF; /* Typography */ --font-sans-head: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; --font-sans-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; /* Type scale (Design brief: H1 36, H2 24, Body 16, Caption 13) */ --fs-hero: clamp(2rem, 4vw + 1rem, 2.25rem); /* ~36px */ --fs-h1: clamp(1.75rem, 3vw + 1rem, 2.25rem); --fs-h2: clamp(1.25rem, 1.6vw + 0.8rem, 1.5rem); --fs-body: 1rem; /* 16px */ --fs-caption: 0.8125rem; /* 13px */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; /* Effects */ --shadow-sm: 0 2px 8px rgba(12, 26, 43, 0.06); --shadow-md: 0 6px 16px rgba(12, 26, 43, 0.10); --shadow-lg: 0 16px 32px rgba(12, 26, 43, 0.12); --ring: 0 0 0 3px rgba(0, 209, 193, 0.3); /* Component tokens */ --card-bg: var(--white); --card-border: var(--gray-150); --text-strong: var(--navy-900); --text-body: #1e2a3b; --text-muted: var(--gray-500); --link: var(--violet-500); --accent: var(--teal-500); /* Layout */ --container-max: 1200px; --header-h: 64px; } /* Optional dark theme (Phase 2 ready): add .theme-dark on or */ .theme-dark { --card-bg: var(--gray-800); --card-border: #263144; --text-strong: #E7EEFA; --text-body: #D9E2F2; --text-muted: #A9B7CC; --link: #8E87FF; --accent: #3CE6D9; --gray-100: #0f1724; --gray-150: #1b2333; --gray-200: #212a3b; --shadow-sm: 0 2px 8px rgba(0,0,0,.25); --shadow-md: 0 8px 20px rgba(0,0,0,.35); --shadow-lg: 0 22px 44px rgba(0,0,0,.45); background: var(--gray-100); color: var(--text-body); } /* ---------------------------- 1) Resets & Base ---------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap"); *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans-body); font-size: var(--fs-body); line-height: 1.6; color: var(--text-body); background: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, picture, video { display: block; max-width: 100%; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* Typography */ h1, h2, h3 { font-family: var(--font-sans-head); color: var(--text-strong); margin: 0 0 var(--space-3); line-height: 1.2; } h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); } h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); } p { margin: 0 0 var(--space-4); } .small, .caption { font-size: var(--fs-caption); color: var(--text-muted); } /* Accessibility helpers */ .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; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ---------------------------- 2) Layout Containers ---------------------------- */ .container { width: min(100% - 2rem, var(--container-max)); margin-inline: auto; } .grid { display: grid; gap: var(--space-6); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 992px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } } /* ---------------------------- 3) Header & Navigation ---------------------------- */ .header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--white); border-bottom: 1px solid var(--gray-150); display: flex; align-items: center; backdrop-filter: saturate(160%) blur(10px); } .header .inner { height: 100%; display: flex; align-items: center; justify-content: space-between; } .nav { display: flex; gap: var(--space-4); align-items: center; } .nav a { font-weight: var(--fw-medium); color: var(--text-strong); padding: .5rem .75rem; border-radius: 8px; } .nav a:is(:hover, :focus-visible) { background: var(--gray-100); text-decoration: none; } .nav .cta { background: var(--accent); color: #031017; border-radius: 10px; padding: .55rem .9rem; box-shadow: var(--shadow-sm); } .nav .cta:hover { filter: brightness(0.95); text-decoration: none; } /* ---------------------------- 4) Hero ---------------------------- */ .hero { position: relative; background: radial-gradient(1200px 500px at 10% -20%, rgba(0,209,193,.12), transparent), linear-gradient(180deg, #0C1A2B 0%, #0f1f34 100%); color: #E9F7F6; padding: clamp(3rem, 8vw, 6rem) 0; overflow: hidden; } .hero .content { display: grid; gap: var(--space-4); max-width: 840px; } .hero h1 { font-size: var(--fs-hero); color: #F4FBFA; letter-spacing: .2px; } .hero p { color: #BDEDE7; } .hero .actions { display: flex; gap: var(--space-3); flex-wrap: wrap; } /* ---------------------------- 5) Buttons & Chips ---------------------------- */ .btn { --btn-bg: var(--accent); --btn-fg: #06131A; --btn-bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1rem; border: 1px solid var(--btn-bd); border-radius: 12px; font-weight: var(--fw-semibold); text-decoration: none; box-shadow: var(--shadow-sm); background: var(--btn-bg); color: var(--btn-fg); transition: transform .06s ease, box-shadow .2s ease, filter .2s ease; } .btn:hover { transform: translateY(-1px); filter: brightness(0.97); text-decoration: none; } .btn:active { transform: translateY(0); } .btn.ghost { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255,255,255,.35); box-shadow: none; } .btn.secondary { --btn-bg: var(--violet-500); --btn-fg: #ffffff; } .btn.neutral { --btn-bg: var(--gray-150); --btn-fg: var(--text-strong); } .chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .7rem; border-radius: 999px; background: var(--gray-100); color: var(--text-strong); border: 1px solid var(--gray-150); font-size: 0. nine rem; } .chip[data-active="true"] { background: rgba(0,209,193,.14); border-color: var(--teal-500); } /* Profession chips (MVP) */ .chip.finance { --chip: var(--teal-500); } .chip.accounting { --chip: var(--navy-900); } .chip.consulting { --chip: var(--violet-500); } .chip.realestate { --chip: var(--green-500); } /* ---------------------------- 6) Cards ---------------------------- */ .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); } .card:hover { box-shadow: var(--shadow-md); } .card .title { font-weight: var(--fw-semibold); color: var(--text-strong); } .card .meta { color: var(--gray-500); font-size: var(--fs-caption); } /* Feature grid cards on Home */ .feature-card { display: grid; gap: .35rem; border-left: 4px solid transparent; } .feature-card.finance { border-left-color: var(--teal-500); } .feature-card.accounting { border-left-color: var(--navy-900); } .feature-card.consulting { border-left-color: var(--violet-500); } .feature-card.realestate { border-left-color: var(--green-500); } /* Hover lift */ .lift { transition: transform .15s ease, box-shadow .2s ease; } .lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } /* ---------------------------- 7) Analytics Bar (counters) ---------------------------- */ .analytics-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-6); } @media (max-width: 768px) { .analytics-bar { grid-template-columns: repeat(2, 1fr); } } .kpi { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: var(--space-4); display: grid; gap: .25rem; } .kpi .value { font-family: var(--font-sans-head); font-weight: var(--fw-bold); font-size: 1.5rem; color: var(--text-strong); } .kpi .label { color: var(--text-muted); font-size: var(--fs-caption); } /* ---------------------------- 8) Opportunity Radar (cards + table toggle) ---------------------------- */ .radar-controls { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: center; margin-bottom: var(--space-4); } .view-toggle { display: inline-flex; border: 1px solid var(--card-border); border-radius: 10px; overflow: hidden; } .view-toggle button { appearance: none; background: transparent; border: 0; padding: .5rem .8rem; font-weight: var(--fw-medium); color: var(--text-strong); } .view-toggle button[aria-pressed="true"] { background: var(--gray-100); } .radar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } @media (max-width: 1024px) { .radar-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .radar-grid { grid-template-columns: 1fr; } } .radar-card { position: relative; display: grid; gap: .5rem; padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--card-border); background: var(--card-bg); box-shadow: var(--shadow-sm); } .radar-card .top-line { display: flex; justify-content: space-between; align-items: start; gap: var(--space-3); } .radar-card .signal { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .5rem; border-radius: 999px; background: rgba(91, 79, 233, .08); color: var(--violet-500); font-weight: 600; font-size: .875rem; } .radar-card .why { color: var(--text-muted); font-size: .925rem; } .radar-card .tags { display: flex; gap: .4rem; flex-wrap: wrap; } .radar-card .tag { padding: .25rem .5rem; font-size: .75rem; background: var(--gray-100); border: 1px solid var(--gray-150); border-radius: 999px; color: var(--text-strong); } /* Drawer for role details */ .drawer { position: fixed; top: 0; right: 0; width: min(560px, 100%); height: 100dvh; background: var(--card-bg); border-left: 1px solid var(--card-border); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .25s ease; z-index: 80; display: grid; grid-template-rows: auto 1fr; } .drawer[open] { transform: translateX(0%); } .drawer .head { padding: var(--space-5); border-bottom: 1px solid var(--card-border); display: flex; align-items: center; justify-content: space-between; } .drawer .body { padding: var(--space-5); overflow: auto; } /* ---------------------------- 9) Cycle Intelligence (CycleMap) ---------------------------- */ .cyclemap { border: 1px solid var(--card-border); background: var(--card-bg); border-radius: var(--radius-lg); padding: var(--space-4); overflow: auto; box-shadow: var(--shadow-sm); } .cyclemap .row { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-3); align-items: center; padding: .5rem 0; border-bottom: 1px dashed var(--gray-150); } .cyclemap .row:last-child { border-bottom: 0; } .cyclemap .role { font-weight: var(--fw-medium); color: var(--text-strong); } .cyclemap .lane { position: relative; height: 28px; background: linear-gradient(90deg, transparent 49.5%, rgba(0,0,0,.04) 50%, transparent 50.5%); background-size: 80px 100%; border-radius: 999px; } .phase { position: absolute; height: 100%; border-radius: 999px; display: grid; place-items: center; font-size: .8rem; font-weight: 600; color: #0d1420; box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset; } .phase.open { background: var(--soft-blue-300); } .phase.interview { background: var(--gold-400); } .phase.offer { background: var(--offer-green-400); } .legend { display: inline-flex; gap: .75rem; align-items: center; flex-wrap: wrap; } .legend .dot { width: 12px; height: 12px; border-radius: 999px; display: inline-block; } .dot.open { background: var(--soft-blue-300); } .dot.interview { background: var(--gold-400); } .dot.offer { background: var(--offer-green-400); } /* ---------------------------- 10) Playbooks (Tabs) ---------------------------- */ .tabs { display: grid; gap: var(--space-4); } .tablist { display: flex; gap: .5rem; flex-wrap: wrap; border-bottom: 1px solid var(--card-border); } .tab { appearance: none; background: transparent; border: 0; padding: .7rem 1rem; cursor: pointer; font-weight: var(--fw-semibold); color: var(--text-strong); border-bottom: 2px solid transparent; } .tab[aria-selected="true"] { color: var(--violet-500); border-bottom-color: var(--violet-500); } .tabpanel { padding-top: var(--space-4); } /* ---------------------------- 11) Networking Hub (dual pane) ---------------------------- */ .split { display: grid; grid-template-columns: 360px 1fr; gap: var(--space-5); } @media (max-width: 992px) { .split { grid-template-columns: 1fr; } } .list { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; } .list .row { display: grid; gap: .25rem; padding: .75rem .9rem; border-bottom: 1px solid var(--gray-150); } .list .row:hover { background: var(--gray-100); } .list .row:last-child { border-bottom: 0; } /* ---------------------------- 12) Tracker (Kanban) ---------------------------- */ .kanban { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(260px, 1fr)); } @media (max-width: 1024px) { .kanban { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .kanban { grid-template-columns: 1fr; } } .column { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: var(--space-4); display: grid; gap: var(--space-3); } .column .col-title { font-weight: var(--fw-semibold); } .ticket { background: var(--white); border: 1px solid var(--gray-150); border-radius: var(--radius-md); padding: .75rem; display: grid; gap: .35rem; box-shadow: var(--shadow-sm); } .theme-dark .ticket { background: #1e2940; } /* ---------------------------- 13) Tables (for Radar data view) ---------------------------- */ .table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; } .table th, .table td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--gray-150); } .table th { background: var(--gray-100); font-weight: var(--fw-semibold); color: var(--text-strong); } .table tr:last-child td { border-bottom: 0; } /* ---------------------------- 14) Forms ---------------------------- */ .input, select, textarea { width: 100%; padding: .65rem .8rem; border-radius: 10px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-strong); box-shadow: var(--shadow-sm); } .input:focus, select:focus, textarea:focus { box-shadow: var(--ring); outline: none; } .label { font-weight: var(--fw-medium); color: var(--text-strong); } .helper { font-size: var(--fs-caption); color: var(--text-muted); } /* ---------------------------- 15) Tooltips & Modals ---------------------------- */ .tooltip { position: absolute; z-index: 100; background: #0b1524; color: #E6F1FF; padding: .4rem .6rem; border-radius: 8px; font-size: .8125rem; box-shadow: var(--shadow-md); } .modal-backdrop { position: fixed; inset: 0; background: rgba(7,12,20,.55); backdrop-filter: blur(2px); } .modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 2rem; } .modal .dialog { width: min(680px, 100%); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-lg); } /* ---------------------------- 16) Footer ---------------------------- */ .footer { margin-top: var(--space-12); border-top: 1px solid var(--gray-150); background: #fbfcfe; } .footer .inner { padding: var(--space-6) 0; display: grid; gap: var(--space-6); } .footer small { color: var(--text-muted); } /* ---------------------------- 17) Utility classes ---------------------------- */ .center { text-align: center; } .right { text-align: right; } .m-0 { margin: 0 !important; } .mt-2 { margin-top: var(--space-2) !important; } .mt-4 { margin-top: var(--space-4) !important; } .mt-6 { margin-top: var(--space-6) !important; } .mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: var(--space-2) !important; } .mb-4 { margin-bottom: var(--space-4) !important; } .mb-6 { margin-bottom: var(--space-6) !important; } .p-0 { padding: 0 !important; } .p-4 { padding: var(--space-4) !important; } .p-6 { padding: var(--space-6) !important; } .hide { display: none !important; } .inline { display: inline !important; } .block { display: block !important; } .flex { display: flex !important; } .row { display: flex; gap: var(--space-3); align-items: center; } .col { display: grid; gap: var(--space-3); } /* Profession accent borders / text */ [data-profession="finance"] { --accent: var(--teal-500); } [data-profession="accounting"] { --accent: var(--navy-900); } [data-profession="consulting"] { --accent: var(--violet-500); } [data-profession="realestate"] { --accent: var(--green-500); } .accent-border { border-left: 4px solid var(--accent); padding-left: var(--space-4); } /* ---------------------------- 18) Page-specific spacing helpers ---------------------------- */ .section { padding: clamp(2rem, 4vw, 3rem) 0; } .section.headroom { padding-top: calc(var(--header-h) + 1.5rem); } /* ---------------------------- 19) Print (for exporting calendar snapshots) ---------------------------- */ @media print { .header, .hero, .footer, .btn, .drawer, .modal, .chips, .view-toggle { display: none !important; } .section { padding: 0 !important; } body { background: #fff; color: #000; } .card, .cyclemap, .table { box-shadow: none !important; } } .company-checkbox-list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); } .company-category h2 { font-size: 1.1rem; margin-bottom: var(--space-2); } .company-category-list { display: flex; flex-direction: column; gap: var(--space-2); } .company-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--card-border); cursor: pointer; } .company-row input[type="checkbox"] { transform: scale(1.1); } .company-info { flex: 1; } .company-name { font-weight: 600; } .company-meta { font-size: 0.85rem; opacity: 0.75; } .company-link { font-size: 0.85rem; text-decoration: underline; } .caption.subtle { margin-top: var(--space-3); font-size: 0.8rem; opacity: 0.7; } .dashboard-company-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); } .company-card { padding: var(--space-3); border-radius: var(--radius-lg); border: 1px solid var(--card-border); box-shadow: var(--shadow-xs); display: flex; flex-direction: column; gap: var(--space-2); } .company-card h2 { font-size: 1rem; } .company-card .company-meta { font-size: 0.85rem; opacity: 0.75; } .company-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); }