/* ========================================================================== Reiger Softworks intranet — design system (DARK MODE) Deep charcoal surfaces, a red accent, and soft ambient glow. ========================================================================== */ :root { color-scheme: dark; --accent: #ff4d5e; /* brightened red for dark surfaces */ --accent-dark: #e03449; --accent-tint: rgba(255, 77, 94, .14); --accent-glow: rgba(255, 77, 94, .10); --bg: #0d1015; /* page background */ --panel: #161a21; /* card surface */ --panel-2: #1d222b; /* inputs / subtle raised */ --elevated: #232a34; /* hover / focus surface */ --ink: #f3f5f8; /* headings / near-white */ --ink-soft: #c4cad3; /* body text */ --muted: #838d9c; /* secondary text */ --line: #2a313c; /* borders */ --line-soft: #21272f; /* faint dividers */ --link: #6fa8ff; --ok: #4ade80; --warn: #fbbf24; --busy: #f87171; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --shadow-md: 0 12px 34px rgba(0, 0, 0, .55); --radius: 14px; --radius-sm: 10px; --maxw: 1200px; --font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; } /* Light theme — applied when . The toggle in the masthead sets this and remembers the choice. Dark stays the default. */ :root[data-theme="light"] { color-scheme: light; --accent: #d81f2d; --accent-dark: #b3121f; --accent-tint: rgba(216, 31, 45, .10); --accent-glow: rgba(216, 31, 45, .06); --bg: #eef1f4; --panel: #ffffff; --panel-2: #f4f6f9; --elevated: #e9edf2; --ink: #14181e; --ink-soft: #3a424d; --muted: #66707c; --line: #dce1e7; --line-soft: #e7ebf0; --link: #2563c9; --ok: #1f9d57; --warn: #b5701a; --busy: #d64545; --shadow-sm: 0 1px 2px rgba(20, 24, 30, .07); --shadow-md: 0 12px 34px rgba(20, 24, 30, .13); } /* Light-mode fixes for a few spots that hard-code dark colors. */ :root[data-theme="light"] .masthead { background: rgba(255, 255, 255, .82); } :root[data-theme="light"] .res-card__del { background: rgba(255, 255, 255, .7); } :root[data-theme="light"] .badge--completed { color: #5a6472; } :root[data-theme="light"] .status-edit__sel--completed { color: #5a6472; } /* Primary buttons: dark text reads well on the bright dark-mode red, but the deeper light-mode red needs white text to stay legible. */ :root[data-theme="light"] .btn--primary, :root[data-theme="light"] .btn--primary:hover { color: #fff; } /* Drop the soft red halo behind red icons in light mode — sit them on a plain surface. */ :root[data-theme="light"] .qlink__icon, :root[data-theme="light"] .launch__icon, :root[data-theme="light"] .tile__icon { background: var(--panel-2); } /* Remove the red glow (drop-shadow) around the logo in light mode. */ :root[data-theme="light"] .brandmark, :root[data-theme="light"] .home-hero__mark .brandmark { filter: none; } /* Active nav links: dark mode goes white + bold; light mode needs the same emphasis but with legible dark ink instead of white. Keep the bold + red underline. */ :root[data-theme="light"] .channels a.is-active, :root[data-theme="light"] .channels__trigger.is-active { color: var(--ink); } /* Keep selected text legible in light mode (dark ink instead of white). */ :root[data-theme="light"] ::selection { color: var(--ink); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); color: var(--ink-soft); background-color: var(--bg); /* ambient glow — a soft red top-center wash + cool corner light */ background-image: radial-gradient(1100px 620px at 50% -10%, var(--accent-glow), transparent 60%), radial-gradient(820px 520px at 90% 0%, rgba(70, 120, 210, .07), transparent 55%); background-attachment: fixed; -webkit-font-smoothing: antialiased; line-height: 1.5; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* Toast notifications — small, dismissible status messages --------------- */ .toast-host { position: fixed; right: 20px; bottom: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; max-width: min(360px, calc(100vw - 40px)); } .toast { display: flex; align-items: flex-start; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--busy); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 13px 14px; color: var(--ink-soft); font-size: 14px; line-height: 1.45; animation: toast-in .22s ease; } .toast--error { border-left-color: var(--busy); } .toast--info { border-left-color: var(--link); } .toast--out { opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; } .toast__msg { flex: 1; } .toast__x { flex: none; background: none; border: 0; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; } .toast__x:hover { color: var(--ink); } @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .toast { animation: none; } .toast--out { transition: none; } } /* Office Essentials launch pad (home page) ------------------------------- */ .launchpad { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; } .launch { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 13px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); text-align: center; transition: border-color .15s ease, transform .15s ease, background .15s ease; } .launch:hover { border-color: var(--accent); background: var(--elevated); transform: translateY(-2px); text-decoration: none; } .launch__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-tint); color: var(--accent); } .launch__icon svg { width: 19px; height: 19px; } .launch__label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink); } .launch__ext { color: var(--muted); display: inline-flex; } .launch__logo { width: 22px; height: 22px; object-fit: contain; display: block; } /* Home top row: header stays centered on the page; Office Essentials panel sits on the right. The empty left column mirrors the panel's width so the header column (middle) stays centered. */ .home-top { display: grid; grid-template-columns: 236px minmax(0, 1fr) 236px; gap: 20px; align-items: start; } .home-top .home-hero { grid-column: 2; padding: 24px 0 8px; } .launch-panel { grid-column: 3; margin-top: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; } .launch-panel .section-title { margin-bottom: 12px; } /* Office Essentials — inline edit mode (Project Manager rank and above) */ .launch-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .launch-panel__edit { border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 999px; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .launch-panel__edit:hover { border-color: var(--accent); color: var(--accent); } .launch--editing { position: relative; cursor: default; } .launch--editing:hover { transform: none; border-color: var(--line); background: var(--panel); } .launch__del { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--accent); cursor: pointer; box-shadow: var(--shadow-sm); transition: background .15s ease, color .15s ease, border-color .15s ease; } .launch__del svg { width: 13px; height: 13px; } .launch__del:hover { background: var(--accent); color: #120406; border-color: transparent; } .es-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .es-form input[type="color"].select { padding: 4px; height: 40px; cursor: pointer; } .es-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; cursor: pointer; } .es-check input { cursor: pointer; } @media (max-width: 980px) { .home-top { grid-template-columns: 1fr; gap: 12px; } .home-top .home-hero { grid-column: auto; padding-top: 48px; } .launch-panel { grid-column: auto; margin-top: 0; } } /* Consultants & Reps — external contact cards ---------------------------- */ .contacts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .contact-card { display: flex; flex-direction: column; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); transition: border-color .12s ease, transform .12s ease; } .contact-card:hover { border-color: var(--accent); transform: translateY(-2px); } .contact-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .contact-card__company { font-weight: 700; color: var(--ink); font-size: 16px; line-height: 1.25; } .contact-card__name { color: var(--ink-soft); font-size: 13.5px; margin-top: 3px; } .contact-card__role { color: var(--muted); } .cat-tag { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .3px; color: var(--accent); background: var(--accent-tint); padding: 4px 9px; border-radius: 999px; white-space: nowrap; } .contact-card__rows { display: flex; flex-direction: column; gap: 8px; } .contact-row { display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 13.5px; word-break: break-word; } a.contact-row:hover { color: var(--accent); text-decoration: none; } .contact-row svg { flex: none; width: 16px; height: 16px; color: var(--muted); } a.contact-row:hover svg { color: var(--accent); } .contact-card__notes { color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line-soft); padding-top: 10px; line-height: 1.5; } .contact-card__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; } .contact-card__actions .btn { padding: 7px 14px; font-size: 13px; } .con-del { color: var(--busy); } .con-del:hover { background: rgba(248, 113, 113, .12); border-color: transparent; } h1, h2, h3, h4, h5 { color: var(--ink); margin: 0; } img { max-width: 100%; display: block; } ::placeholder { color: var(--muted); } ::selection { background: rgba(255, 77, 94, .3); color: #fff; } /* -------------------------------------------------------------------------- Header / navigation ----------------------------------------------------------------------- */ .masthead { position: sticky; top: 0; z-index: 50; background: rgba(13, 16, 21, .82); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--line); } .masthead__bar { max-width: var(--maxw); margin: 0 auto; padding: 14px 24px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; } .logo { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; } .logo:hover { text-decoration: none; } .logo__mark { display: inline-flex; flex: none; line-height: 0; } .brandmark { display: block; filter: drop-shadow(0 3px 8px rgba(217, 41, 62, .28)); } .logo__lockup { display: flex; flex-direction: column; line-height: 1.05; } .logo__word { font-size: 20px; font-weight: 800; letter-spacing: 2px; color: var(--ink); white-space: nowrap; } .logo__firm { font-size: 11px; font-weight: 600; letter-spacing: .3px; color: var(--muted); margin-top: 2px; white-space: nowrap; } .search { position: relative; max-width: 720px; width: 100%; margin: 0 auto; } .search input { width: 100%; height: 46px; padding: 0 46px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); font-size: 15px; color: var(--ink); box-shadow: var(--shadow-sm); outline: none; transition: border-color .15s, box-shadow .15s, background .15s; } .search input:focus { background: var(--elevated); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } .search__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .masthead__tools { display: inline-flex; align-items: center; gap: 10px; } .iconbtn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); background: transparent; border: 1px solid transparent; cursor: pointer; } .iconbtn:hover { background: var(--panel-2); border-color: var(--line); color: var(--ink); } .channels { border-top: 1px solid var(--line-soft); } .channels__inner { max-width: var(--maxw); margin: 0 auto; padding: 4px 24px; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; } .channels a { color: var(--ink-soft); font-size: 15px; font-weight: 500; padding: 12px 16px; border-bottom: 2px solid transparent; white-space: nowrap; } .channels a:hover { color: var(--ink); text-decoration: none; } .channels a.is-active { color: #fff; font-weight: 700; border-bottom-color: var(--accent); } /* Resources dropdown (end of the nav) */ .channels__group { position: relative; display: inline-flex; } .channels__trigger { color: var(--ink-soft); font-size: 15px; font-weight: 500; font-family: inherit; padding: 12px 16px; background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .channels__trigger:hover { color: var(--ink); } .channels__trigger.is-active { color: #fff; font-weight: 700; border-bottom-color: var(--accent); } .channels__caret { font-size: 11px; transition: transform .15s ease; } .channels__trigger[aria-expanded="true"] .channels__caret { transform: rotate(180deg); } .channels__menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 230px; margin-top: 4px; padding: 6px; z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.38); display: flex; flex-direction: column; gap: 2px; } .channels__menu[hidden] { display: none; } .channels__menu a { color: var(--ink-soft); font-size: 14px; font-weight: 500; white-space: nowrap; padding: 9px 12px; border-radius: 7px; border-bottom: 0; display: flex; align-items: center; gap: 8px; } .channels__menu a:hover { color: var(--ink); background: var(--panel-2); text-decoration: none; } .channels__menu a.is-active { color: #fff; background: var(--accent); } .channels__ext { display: inline-flex; margin-left: auto; opacity: .6; } .channels__ext svg { width: 13px; height: 13px; } /* Account menu (masthead avatar → My account / Sign out) */ .acctmenu { position: relative; display: inline-flex; } .acctmenu__menu { position: absolute; top: 100%; right: 0; min-width: 190px; margin-top: 6px; padding: 6px; z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.38); display: flex; flex-direction: column; gap: 2px; } .acctmenu__menu[hidden] { display: none; } .acctmenu__menu a, .acctmenu__menu button { color: var(--ink-soft); font: inherit; font-size: 14px; font-weight: 500; text-align: left; padding: 9px 12px; border-radius: 7px; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; gap: 9px; white-space: nowrap; width: 100%; } .acctmenu__menu a:hover, .acctmenu__menu button:hover { color: var(--ink); background: var(--panel-2); text-decoration: none; } .acctmenu__menu svg { width: 16px; height: 16px; flex-shrink: 0; } /* -------------------------------------------------------------------------- Layout scaffolding ----------------------------------------------------------------------- */ .page { max-width: var(--maxw); margin: 0 auto; padding: 28px 24px 72px; } .breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 18px; } .breadcrumb a { color: var(--muted); } .breadcrumb a:hover { color: var(--ink); } .breadcrumb .sep { opacity: .5; } .page-title { font-size: 34px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--ink); margin: 0 0 20px; } .section-title { font-size: 15px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card--pad { padding: 20px; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); } .btn:hover { background: var(--elevated); text-decoration: none; } .btn svg { width: 16px; height: 16px; flex: none; } .btn--primary { background: var(--accent); border-color: var(--accent); color: #120406; } .btn--primary:hover { background: var(--accent-dark); color: #120406; } .pill-count { color: var(--muted); font-weight: 500; } /* -------------------------------------------------------------------------- Home landing (hero + directory tiles) ----------------------------------------------------------------------- */ .home-hero { text-align: center; padding: 56px 20px 8px; } .home-hero__mark { display: flex; justify-content: center; margin-bottom: 20px; line-height: 0; } .home-hero__mark .brandmark { filter: drop-shadow(0 8px 22px rgba(217, 41, 62, .4)); } .home-hero__title { font-size: 46px; font-weight: 800; letter-spacing: 8px; color: var(--ink); line-height: 1.05; padding-left: 8px; } .home-hero__sub { color: var(--ink-soft); font-size: 17px; margin: 14px 0 0; } .home-hero__sub strong { color: var(--ink); } .home-hero__greeting { color: var(--muted); font-size: 13.5px; margin: 12px 0 0; letter-spacing: .2px; } .home-hero__search { position: relative; max-width: 560px; margin: 30px auto 0; } .home-hero__search input { width: 100%; height: 50px; padding: 0 18px 0 46px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); font-size: 16px; color: var(--ink); box-shadow: var(--shadow-sm); outline: none; transition: border-color .15s, box-shadow .15s, background .15s; } .home-hero__search input:focus { background: var(--elevated); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } .home-hero__search .search__icon { left: 16px; } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-top: 44px; } .tile { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px; min-height: 200px; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .12s, box-shadow .12s, border-color .12s; } .tile:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); } .tile__icon { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); } .tile__title { font-size: 20px; font-weight: 700; color: var(--ink); } .tile__desc { color: var(--ink-soft); font-size: 14px; } .tile__count { margin-top: auto; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); } /* -------------------------------------------------------------------------- Directory toolbar (people / practice) ----------------------------------------------------------------------- */ .toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; } .toolbar .search-inline { position: relative; flex: 1; min-width: 240px; } .toolbar .search-inline input { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 999px; padding: 0 16px 0 42px; font-size: 15px; background: var(--panel-2); color: var(--ink); outline: none; } .toolbar .search-inline input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); background: var(--elevated); } .toolbar .search-inline .search__icon { left: 14px; } .select { height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-size: 14px; font-family: var(--font); cursor: pointer; } .select:focus { outline: none; border-color: var(--accent); } .result-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .result-bar .count { font-weight: 700; color: var(--ink); font-size: 18px; } .viewtoggle { display: inline-flex; gap: 4px; } .viewtoggle button { width: 36px; height: 34px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px; cursor: pointer; color: var(--muted); display: grid; place-items: center; } .viewtoggle button:hover { color: var(--ink); } .viewtoggle button.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); } /* People cards (grid) */ .people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 26px 18px; } .person { text-align: center; cursor: pointer; padding: 10px; border-radius: var(--radius); transition: background .12s; } .person:hover { background: var(--panel); text-decoration: none; } .avatar { width: 116px; height: 116px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 30px; box-shadow: var(--shadow-sm); position: relative; } .avatar .status { position: absolute; right: 8px; bottom: 8px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--bg); } .status--available { background: var(--ok); } .status--busy { background: var(--busy); } .status--away { background: var(--warn); } .person__name { font-weight: 700; color: var(--ink); } .person__title { font-size: 13px; color: var(--muted); } /* List view (shared) */ .list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); } .list__row { display: grid; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); cursor: pointer; color: inherit; } .list__row:last-child { border-bottom: none; } .list__row:hover { background: var(--elevated); text-decoration: none; } .list__row--people { grid-template-columns: 52px 1.4fr 1.4fr 1fr; } .list__row--projects { grid-template-columns: 110px 2fr 1.2fr 1fr; } .list__head { background: var(--panel-2); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 700; cursor: default; } .list__head:hover { background: var(--panel-2); } .avatar--sm { width: 44px; height: 44px; font-size: 15px; margin: 0; } .avatar--sm .status { width: 11px; height: 11px; right: 1px; bottom: 1px; border-width: 2px; } .cell-strong { font-weight: 700; color: var(--ink); } .cell-sub { font-size: 13px; color: var(--muted); } /* -------------------------------------------------------------------------- Profile / detail pages ----------------------------------------------------------------------- */ .profile { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; } @media (max-width: 820px) { .profile { grid-template-columns: 1fr; } } .profile__hero { display: flex; gap: 28px; align-items: center; } .avatar--xl { width: 180px; height: 180px; font-size: 52px; flex: none; } .profile__name { font-size: 40px; font-weight: 800; color: var(--ink); } .profile__title { font-size: 18px; color: var(--muted); margin-top: 4px; } .definition { margin-top: 34px; } .definition h4 { text-transform: uppercase; letter-spacing: 1px; font-size: 14px; margin-bottom: 16px; color: var(--ink); } .definition__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 40px; } .dt { font-size: 13px; color: var(--muted); font-weight: 600; } .dd { color: var(--ink); font-weight: 500; } /* Account page */ .account-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .account-hint { font-size: 12px; color: var(--muted); } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .field:last-child { margin-bottom: 0; } .field__label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; } .field .select, .field textarea { width: 100%; } .field input.select { cursor: text; } .field-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; } .field-row .field { flex: 1; min-width: 160px; margin-bottom: 12px; } /* Searchable, list-only combobox (e.g. the consultant category picker) */ .combo { position: relative; } .combo__input { width: 100%; } .combo__menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 5px; list-style: none; max-height: 260px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, .28); } .combo__menu li[role="option"] { padding: 9px 11px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .combo__menu li.is-active { background: var(--panel-2); color: var(--ink); } .combo__menu li[aria-selected="true"] { color: var(--accent); font-weight: 600; } .combo__empty { padding: 9px 11px; color: var(--muted); font-size: 13px; } .account-foot { display: flex; align-items: center; gap: 14px; margin-top: 8px; } .account-saved { color: var(--ok); font-weight: 700; font-size: 13px; } .info-list { display: flex; flex-direction: column; gap: 14px; } .info-list .row { display: flex; align-items: center; gap: 12px; color: var(--ink); } .info-list .row .ic { color: var(--muted); width: 20px; display: grid; place-items: center; } .status-dot { display: inline-flex; align-items: center; gap: 8px; } .status-dot i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .mini-project { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line-soft); } .mini-project:last-child { border-bottom: none; } .mini-thumb { width: 62px; height: 46px; border-radius: 8px; flex: none; background: linear-gradient(135deg, var(--elevated), var(--panel-2)); display: grid; place-items: center; color: var(--muted); } .mini-project__name { font-weight: 700; color: var(--ink); line-height: 1.3; } .mini-project__meta { font-size: 13px; color: var(--muted); } /* Project detail specifics */ .detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; } .badge { font-size: 12px; font-weight: 700; letter-spacing: .4px; padding: 5px 12px; border-radius: 999px; } .badge--active { background: rgba(74, 222, 128, .14); color: var(--ok); } .badge--onhold { background: rgba(251, 191, 36, .15); color: var(--warn); } .badge--completed { background: rgba(131, 141, 156, .16); color: #aeb6c2; } .badge--type { background: var(--accent-tint); color: var(--accent); } /* Inline, permission-gated project-status editor (project detail head) */ .status-edit { display: inline-flex; align-items: center; gap: 8px; } .status-edit__cap { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); } .status-edit__sel { height: 30px; padding: 0 30px 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .3px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); cursor: pointer; } .status-edit__sel:focus { outline: none; border-color: var(--accent); } .status-edit__sel--active { color: var(--ok); } .status-edit__sel--onhold { color: var(--warn); } .status-edit__sel--completed { color: #aeb6c2; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px 18px; } .stat { padding: 16px; border-radius: var(--radius-sm); } .stat:hover { background: var(--panel-2); } .stat .k { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; } .stat .v { font-size: 17px; color: var(--ink); font-weight: 700; margin-top: 6px; } .team-strip { display: flex; flex-wrap: wrap; gap: 18px; } .team-member { display: flex; flex-direction: column; align-items: center; width: 92px; text-align: center; cursor: pointer; } .team-member:hover { text-decoration: none; } .team-member .avatar { width: 64px; height: 64px; font-size: 18px; margin-bottom: 8px; } .team-member small { color: var(--muted); font-size: 11px; } .team-member strong { color: var(--ink); font-size: 12.5px; font-weight: 600; } /* -------------------------------------------------------------------------- Community board events ----------------------------------------------------------------------- */ .event { display: grid; grid-template-columns: 78px 1fr auto; gap: 20px; align-items: center; padding: 18px 22px; margin-bottom: 14px; } .event__date { text-align: center; border-right: 1px solid var(--line); padding-right: 18px; } .event__date .m { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); font-weight: 800; } .event__date .d { font-size: 28px; font-weight: 800; color: var(--ink); line-height: 1; } .event__title { font-weight: 700; color: var(--ink); font-size: 17px; } .event__meta { color: var(--muted); font-size: 14px; margin-top: 2px; } .event__cat { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--panel-2); color: var(--ink-soft); } /* -------------------------------------------------------------------------- Misc ----------------------------------------------------------------------- */ .empty { text-align: center; color: var(--muted); padding: 60px 20px; } .hidden { display: none !important; } /* -------------------------------------------------------------------------- Nav unread badge (Community Board) ----------------------------------------------------------------------- */ .nav-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; vertical-align: middle; } /* -------------------------------------------------------------------------- Home — quick links ----------------------------------------------------------------------- */ .home-section { margin-top: 46px; } /* Three across, two down — the six links fill the grid exactly, so it reads as a deliberate block rather than a row that happens to wrap. Fixed columns instead of auto-fill: auto-fill re-flowed to 2 or 4 depending on the window, which broke that shape at common widths. Steps down to 2, then 1, before the 280px cards start to crush. */ .quick-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 980px) { .quick-links { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .quick-links { grid-template-columns: 1fr; } } .qlink { display: flex; align-items: center; gap: 14px; padding: 16px; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .12s, border-color .12s, background .12s; } .qlink:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--accent); background: var(--panel-2); } .qlink__icon { width: 44px; height: 44px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); } .qlink__body { display: flex; flex-direction: column; } .qlink__label { font-weight: 700; color: var(--ink); font-size: 15px; display: inline-flex; align-items: center; gap: 6px; } .qlink__ext { color: var(--muted); display: inline-flex; } .qlink:hover .qlink__ext { color: var(--accent); } .qlink__desc { font-size: 13px; color: var(--muted); } /* -------------------------------------------------------------------------- Project — files bar, progress, phase stepper ----------------------------------------------------------------------- */ .filebar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 22px; } .filebar__actions { display: flex; gap: 10px; flex-wrap: wrap; } .filepath { font-family: "Cascadia Code", Consolas, "Courier New", monospace; font-size: 13px; color: var(--ink-soft); background: var(--panel-2); border: 1px solid var(--line); padding: 6px 12px; border-radius: 8px; display: inline-block; word-break: break-all; } .progress { max-width: 460px; } .progress__head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; } .progress__track { height: 9px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; } .progress__fill { height: 100%; background: linear-gradient(90deg, var(--accent-dark), var(--accent)); border-radius: 999px; } .phase-track { display: flex; flex-wrap: wrap; gap: 6px 0; } .phase-step { flex: 1; min-width: 130px; position: relative; padding: 20px 10px 0 0; } .phase-step::before { content: ""; position: absolute; top: 6px; left: 7px; right: 0; height: 2px; background: var(--line); } .phase-step:last-child::before { display: none; } .phase-step.is-done::before { background: var(--accent); } .phase-step__dot { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--panel-2); border: 2px solid var(--line); } .phase-step.is-done .phase-step__dot { background: var(--accent); border-color: var(--accent); } .phase-step.is-current .phase-step__dot { background: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } .phase-step__label { display: block; font-size: 12.5px; color: var(--muted); } .phase-step.is-done .phase-step__label { color: var(--ink-soft); } .phase-step.is-current .phase-step__label { color: var(--ink); font-weight: 700; } /* -------------------------------------------------------------------------- Site footer ----------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); background: var(--panel); margin-top: 60px; } .site-footer__top { max-width: var(--maxw); margin: 0 auto; padding: 42px 24px 30px; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.7fr; gap: 34px; } @media (max-width: 860px) { .site-footer__top { grid-template-columns: 1fr 1fr; gap: 28px; } } /* Quick links belong to the home page. On every other route, drop the footer's link columns (Explore / Resources) so the page content owns the screen; branding + office locations stay on every page. */ body:not(.route-home) .site-footer__col:not(.site-footer__col--offices) { display: none; } .site-footer__lockup { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 14px; } .site-footer__blurb { color: var(--muted); font-size: 13.5px; max-width: 36ch; margin: 0; } .site-footer__col h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--ink); margin-bottom: 14px; } .site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .site-footer__col a { color: var(--ink-soft); font-size: 14px; } .site-footer__col a:hover { color: var(--accent); } .office { margin-bottom: 14px; } .office__city { color: var(--ink); font-weight: 700; font-size: 14px; } .office__city span { color: var(--muted); font-weight: 500; } .office__addr { color: var(--muted); font-size: 13px; } .site-footer__bar { max-width: var(--maxw); margin: 0 auto; padding: 16px 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line-soft); } /* -------------------------------------------------------------------------- Community post composer + feed ----------------------------------------------------------------------- */ .mini-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; } .mini-avatar svg { width: 20px; height: 20px; } .composer2 { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; } .composer2__head { display: flex; align-items: center; gap: 12px; } .composer2__title { flex: 1; height: 44px; border: 1px solid var(--line); border-radius: 999px; padding: 0 18px; background: var(--panel-2); color: var(--ink); font-size: 15px; outline: none; } .composer2__title:focus { border-color: var(--accent); background: var(--elevated); box-shadow: 0 0 0 3px var(--accent-tint); } .composer2__body { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel-2); color: var(--ink); font-family: var(--font); font-size: 14px; resize: vertical; outline: none; } .composer2__body:focus { border-color: var(--accent); } .composer2__sched { display: flex; gap: 12px; flex-wrap: wrap; padding: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; } .composer2__field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; } .composer2__field--grow { flex: 1; min-width: 180px; } .composer2__field input.select { cursor: text; } .composer2__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .composer2__opts { display: flex; gap: 10px; flex-wrap: wrap; } .composer2__err { color: var(--accent); font-size: 13px; } .btn.is-active { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); } .btn.is-copied { border-color: var(--ok); color: var(--ok); } .cposts { display: flex; flex-direction: column; gap: 14px; } .cposts__empty { color: var(--muted); padding: 18px 4px; } .cposts-bar { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 14px; } .cposts--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; } .cposts--grid .cposts__empty { grid-column: 1 / -1; } .cpost { padding: 18px 20px; } .cpost__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .cpost__meta { display: flex; flex-direction: column; } .cpost__author { font-weight: 700; color: var(--ink); } .cpost__date { font-size: 12px; color: var(--muted); } .cpost__cat { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-tint); padding: 4px 10px; border-radius: 999px; } .cpost__del { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 5px; border-radius: 6px; display: grid; place-items: center; } .cpost__del:hover { color: var(--accent); background: var(--panel-2); } .cpost__title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .cpost__body { color: var(--ink-soft); margin: 0; } .cpost__event { margin-top: 12px; display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 13px; background: var(--panel-2); border: 1px solid var(--line); padding: 8px 12px; border-radius: 8px; } .cpost__event svg { color: var(--accent); flex: none; width: 18px; height: 18px; } /* -------------------------------------------------------------------------- Reusable month calendar ----------------------------------------------------------------------- */ .cal { width: 100%; } .cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .cal__title { font-weight: 700; color: var(--ink); font-size: 16px; } .cal__nav { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; } .cal__nav:hover { border-color: var(--accent); color: var(--accent); } .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal__grid--dow { margin-bottom: 4px; } .cal__dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; padding: 4px 0; } .cal__day { position: relative; aspect-ratio: 1; border: 1px solid transparent; border-radius: 8px; background: var(--panel-2); color: var(--ink-soft); cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; } .cal__day:hover { border-color: var(--line); color: var(--ink); } .cal__day--empty { background: transparent; cursor: default; } .cal__day.is-today { color: var(--ink); font-weight: 800; box-shadow: inset 0 0 0 1px var(--accent); } .cal__day.is-selected { background: var(--accent); color: #fff; font-weight: 700; border-color: var(--accent); } .cal__dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .cal__day.is-selected .cal__dot { background: #fff; } .cal__list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; } .cal__list-head { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; } .cal-ev { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; } .cal-ev__bar { width: 4px; align-self: stretch; border-radius: 4px; background: var(--muted); } .cal-ev--firm .cal-ev__bar { background: var(--link); } .cal-ev--community .cal-ev__bar { background: var(--accent); } .cal-ev__title { font-weight: 700; color: var(--ink); font-size: 14px; } .cal-ev__meta { font-size: 12px; color: var(--muted); } .cal-ev__cat { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line); padding: 3px 8px; border-radius: 999px; } .cal-empty { color: var(--muted); font-size: 13px; padding: 8px 2px; } /* Global calendar widget — opens from the masthead calendar icon; slide-in panel */ #cal-open svg { width: 20px; height: 20px; } .cal-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity .2s; z-index: 70; } .cal-scrim.is-open { opacity: 1; visibility: visible; } .cal-panel { position: fixed; top: 0; left: 0; height: 100%; width: 400px; max-width: 92vw; background: var(--panel); border-right: 1px solid var(--line); z-index: 80; transform: translateX(-100%); transition: transform .24s ease; display: flex; flex-direction: column; } .cal-panel.is-open { transform: translateX(0); } .cal-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--line); } .cal-panel__body { padding: 20px; overflow-y: auto; flex: 1; } .cal-panel__foot { padding: 16px 20px; border-top: 1px solid var(--line); } .cal-panel__foot .btn { width: 100%; justify-content: center; } /* -------------------------------------------------------------------------- Project timeline page ----------------------------------------------------------------------- */ .cal-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: start; } @media (max-width: 820px) { .cal-layout { grid-template-columns: 1fr; } } .mstone-list { list-style: none; margin: 0; padding: 0; } .mstone { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); } .mstone:last-child { border-bottom: none; } .mstone__dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; flex: none; background: var(--panel-2); border: 2px solid var(--line); } .mstone.is-done .mstone__dot { background: var(--accent); border-color: var(--accent); } .mstone.is-today .mstone__dot { background: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } .mstone__body { flex: 1; } .mstone__label { font-weight: 700; color: var(--ink); } .mstone.is-upcoming .mstone__label { color: var(--ink-soft); } .mstone__date { font-size: 13px; color: var(--muted); } .mstone__tag { font-size: 11px; font-weight: 700; color: var(--ink-soft); background: var(--panel-2); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; } /* -------------------------------------------------------------------------- Section resource cards (with site thumbnails) ----------------------------------------------------------------------- */ .res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; } .res-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: border-color .15s, transform .15s; } .res-card:hover { border-color: var(--accent); transform: translateY(-2px); } .res-card__link { position: absolute; inset: 0; z-index: 1; } .res-card__thumb { position: relative; aspect-ratio: 16 / 10; background: var(--panel-2); display: flex; align-items: center; justify-content: center; color: var(--muted); border-bottom: 1px solid var(--line); } .res-card__ph svg { width: 34px; height: 34px; } .res-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--panel-2); } .res-card__thumb img.is-favicon { object-fit: contain; padding: 34px; } .res-card__body { padding: 12px 14px; } .res-card__label { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); } .res-card__ext svg { width: 13px; height: 13px; color: var(--muted); } .res-card__desc { margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.4; } .res-card__del { position: absolute; z-index: 2; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: rgba(13, 16, 21, .6); color: var(--ink-soft); cursor: pointer; } .res-card__del:hover { color: #fff; background: var(--accent); border-color: var(--accent); } /* ========================================================================== Phone / small-tablet layout — tunes the UI for narrow (≤768px) screens. The desktop rules above are the source of truth; these only override what would otherwise crowd, overflow, or shrink too far on a narrow viewport. (Breakpoint raised 640→768 so large phones in landscape and small tablets get the mobile layout instead of a cramped desktop one.) ========================================================================== */ @media (max-width: 768px) { /* No sideways scrolling on phones. The off-screen calendar drawer (fixed, translated fully to the left) would otherwise let the page swipe sideways; `clip` kills that without breaking the sticky masthead the way overflow:hidden would. */ html, body { overflow-x: clip; } /* Simplify for phones: hide desktop-only workflow items (Office Essentials launch pad, plus anything flagged desktopOnly in the data — Tech, CAD Standards, Deltek Time Entry). They stay on desktop; the flag lives in data.js so which items are hidden is easy to adjust. */ #essentials-panel, .is-desktop-only { display: none !important; } /* No calendar drawer on phones: the off-screen fixed panel invites accidental sideways scrolling on touchpads, and it isn't needed on mobile. Hiding the opener + the panel/scrim removes the option entirely. */ #cal-open, .cal-panel, .cal-scrim { display: none !important; } /* Tighten the generous desktop side padding so content isn't pinched. */ .masthead__bar, .channels__inner, .site-footer__bar { padding-left: 16px; padding-right: 16px; } .page { padding: 20px 16px 56px; } .site-footer__top { padding: 32px 16px 24px; } /* Masthead: logo + tools share the top row; search drops to a full-width second row instead of being crushed between them. */ .masthead__bar { grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 10px; } .masthead__bar .logo { grid-column: 1; grid-row: 1; } .masthead__bar .masthead__tools { grid-column: 2; grid-row: 1; } /* Phones: drop the global search bars (masthead + hero) to declutter — the masthead is just logo + tools. Per-section filter inputs still stay. */ .masthead .search { display: none; } .logo__word { font-size: 18px; letter-spacing: 1.5px; } .masthead__tools { gap: 4px; } /* Nav tabs: smaller padding so they wrap into fewer rows. Kept wrapping (not horizontal scroll) so the Resources dropdown isn't clipped. */ .channels a, .channels__trigger { padding: 10px 11px; font-size: 14px; } /* Home hero on phones: the masthead logo already brands the page and the greeting only costs a row of vertical space, so drop the hero entirely and open straight onto the launch pad. Desktop keeps the full hero. */ .home-hero { display: none; } .home-section { margin-top: 32px; } /* Page titles */ .page-title { font-size: 24px; margin-bottom: 16px; } /* Landing tiles + quick links: a touch less padding, still auto-collapsing. */ .tiles { gap: 16px; margin-top: 28px; } .tile { min-height: auto; padding: 20px; } /* People directory grid — 2 compact cards per row beats one huge card. */ .people-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; } .people-grid .avatar { width: 88px; height: 88px; font-size: 24px; } /* Directory list view — drop secondary columns that can't fit on a phone. People rows keep avatar + name/discipline; project rows keep number + name/client + status. The hidden cells fall out of both body and head. */ .list__row--people { grid-template-columns: 44px 1fr; gap: 12px; padding: 12px 14px; } .list__row--people > :nth-child(3), .list__row--people > :nth-child(4) { display: none; } .list__row--projects { grid-template-columns: 54px 1fr auto; gap: 12px; padding: 12px 14px; } .list__row--projects > :nth-child(3) { display: none; } /* Profile / detail header stacks the avatar above the name, centered. */ .profile__hero { flex-direction: column; text-align: center; gap: 16px; } .avatar--xl { width: 120px; height: 120px; font-size: 40px; } .profile__name { font-size: 30px; } .profile__title { font-size: 16px; } .definition__grid { grid-template-columns: 1fr; gap: 18px; } /* Footer collapses to a single column below the 2-col tablet layout. */ .site-footer__top { grid-template-columns: 1fr; gap: 26px; } /* On phones the masthead handles navigation, so drop the footer's link columns (Explore / Resources) — keep just branding + office locations. */ .site-footer__col:not(.site-footer__col--offices) { display: none; } /* Community board event rows: date + body stacked with the category tag. */ .event { grid-template-columns: 56px 1fr; gap: 10px 14px; padding: 14px 16px; } .event__cat { grid-column: 2; justify-self: start; } } /* Extra squeeze for the smallest phones. */ @media (max-width: 400px) { .home-hero__title { font-size: 26px; letter-spacing: 3px; } .people-grid .avatar { width: 76px; height: 76px; font-size: 21px; } } /* ========================================================================== Sign-in gate — shown before the app loads (no masthead / footer) ========================================================================== */ .login { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; } .login__card { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 40px 34px 30px; text-align: center; } /* The card centres its contents with text-align, but .brandmark is display:block and a block box ignores that — so the logo sat flush against the left edge. Everywhere else the mark lives in a flex row, which is why it only ever looked wrong here. */ .login__mark { display: flex; justify-content: center; margin-bottom: 18px; } .login__word { font-size: 30px; font-weight: 700; letter-spacing: .04em; color: var(--ink); } .login__firm { font-size: 13px; color: var(--muted); margin-top: 2px; } .login__lead { margin: 20px 0 22px; color: var(--ink-soft); font-size: 15px; } .login__error { background: var(--accent-tint); border: 1px solid var(--accent); color: var(--ink); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; margin: 0 0 18px; } .login__google { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; border-radius: var(--radius-sm); padding: 12px 16px; font-size: 15px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: background .15s, box-shadow .15s; } .login__google:hover { background: #f7f8f8; box-shadow: var(--shadow-sm); } .login__google:disabled, .login__google.is-loading { opacity: .6; cursor: default; } .login__g { display: inline-flex; } .login__note { margin: 18px 0 0; font-size: 12.5px; color: var(--muted); } .login__note strong { color: var(--ink-soft); } /* ========================================================================== Keyboard focus — a clear, consistent ring for keyboard users only. :focus-visible doesn't fire on mouse clicks, so pointer users see nothing change. Before this, buttons/links/nav/tiles had no visible focus at all. Placed last so it wins source-order ties (e.g. the earlier `.select:focus { outline: none }`). ========================================================================== */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Text inputs already show their own box-shadow ring on focus — don't double it up with an outline. */ .search input:focus-visible, .home-hero__search input:focus-visible, .toolbar .search-inline input:focus-visible, .composer2__title:focus-visible, .composer2__body:focus-visible { outline: none; } /* Selects only changed border-color before (weak for keyboard) — give them the ring too, overriding the earlier outline:none. */ .select:focus-visible, .status-edit__sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Respect users who prefer reduced motion — near-instant transitions/animations instead of movement that can cause discomfort. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }