/* ============================================================ Applied Analysis — Client Portal Stylesheet /assets/css/portal.css Depends on: Bootstrap 5.3, Oswald + Playfair Display (Google Fonts) ============================================================ */ /* ── Design tokens ── */ :root { --accent: #3d8a4a; --accent-light: #3d8a4a; /* overridden inline per client via style attribute on */ --dkGreen: #214326; --darkNew: rgb(10,14,17); --dkGray: #231f20; --gray: #878787; --fontSans: 'Oswald', sans-serif; --fontSerif: 'Playfair Display', serif; } /* ── Base ── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--fontSerif); background: #f4f5f6; color: var(--dkGray); min-height: 100vh; display: flex; flex-direction: column; margin: 0; } /* ══════════════════════════════════════════════ NAVBAR ══════════════════════════════════════════════ */ .portal-nav { background: var(--darkNew); border-bottom: 3px solid var(--accent); padding: .75rem 2rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1000; } .portal-nav .aa-logo img { height: 34px; width: auto; display: block; } .portal-nav .logout-link { font-family: var(--fontSans); font-size: .72rem; font-weight: 300; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.4); text-decoration: none; transition: color .2s; } .portal-nav .logout-link:hover { color: var(--accent); } .portal-nav .logout-link .bi { font-size: .85rem; margin-right: .3rem; } /* ══════════════════════════════════════════════ HERO ══════════════════════════════════════════════ */ .portal-hero { background: var(--darkNew); padding: 3.5rem 2rem 3rem; border-bottom: 1px solid rgba(255,255,255,.06); } .portal-hero-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; } .portal-client-logo { height: 72px; width: auto; max-width: 200px; object-fit: contain; opacity: .88; } .portal-client-initial { width: 72px; height: 72px; border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--fontSans); font-size: 2rem; font-weight: 500; color: var(--accent); flex-shrink: 0; } /* Kicker / eyebrow label — shared base for portal variants */ .portal-kicker, .prj-portal-kicker { font-family: var(--fontSans); font-weight: 500; letter-spacing: .4em; text-transform: uppercase; } .portal-kicker { font-size: .7rem; color: var(--accent-light); /* overridden per-client via CSS var on */ margin-bottom: .5rem; } .portal-client-name { font-family: var(--fontSans); font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 500; text-transform: uppercase; color: #fff; line-height: 1.1; margin-bottom: 1rem; } .portal-intro { font-family: var(--fontSerif); font-size: .95rem; color: rgba(255,255,255,.52); line-height: 1.7; max-width: 680px; margin: 0; } /* ══════════════════════════════════════════════ MAIN BODY ══════════════════════════════════════════════ */ .portal-body { flex: 1; max-width: 1200px; width: 100%; margin: 0 auto; padding: 3rem 2rem; } /* ══════════════════════════════════════════════ SECTION ══════════════════════════════════════════════ */ .portal-section { margin-bottom: 3.5rem; } .portal-section-header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: .75rem; border-bottom: 1px solid rgba(0,0,0,.1); } .portal-section-title { font-family: var(--fontSans); font-size: 1.1rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--dkGray); margin: 0; } .portal-section-count { font-family: var(--fontSans); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gray); } /* ══════════════════════════════════════════════ CARD GRID — default 4 columns; modifier for 3 ══════════════════════════════════════════════ */ .portal-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .portal-card-grid--3col { grid-template-columns: repeat(3, 1fr); } .portal-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-top: 3px solid var(--accent); display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; } .portal-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.10); transform: translateY(-2px); } .portal-card-thumb { width: 100%; aspect-ratio: var(--card-thumb-ratio, 4/3); object-fit: cover; object-position: top; display: block; background: #e8eaec; } .portal-card-thumb-placeholder { width: 100%; aspect-ratio: var(--card-thumb-ratio, 4/3); background: linear-gradient(135deg, #1a2a1a, #2d4a2d); display: flex; align-items: center; justify-content: center; font-size: 3rem; color: rgba(255,255,255,.25); } .portal-card-body { padding: 1.1rem 1.2rem 1.4rem; flex: 1; display: flex; flex-direction: column; } .portal-card-meta { font-family: var(--fontSans); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: .45rem; display: flex; align-items: center; gap: .5rem; } .portal-draft-badge { display: inline-block; background: #b94747; color: #fff; font-family: var(--fontSans); font-size: .62rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; padding: .15em .55em .1em; line-height: 1.6; } .portal-card-title { font-family: var(--fontSans); font-size: 1rem; font-weight: 500; text-transform: uppercase; color: var(--dkGray); line-height: 1.25; margin-bottom: .6rem; } .portal-card-blurb { font-family: var(--fontSerif); font-size: .88rem; color: #5a6168; line-height: 1.6; flex: 1; margin-bottom: 1.1rem; } .portal-card-cta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; font-family: var(--fontSans); font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); text-decoration: none; border: 1px solid var(--accent); padding: .5rem .75rem; transition: background .18s, color .18s; } .portal-card-cta:hover { background: var(--accent); color: #fff; } .portal-card-cta-group { display: flex; flex-direction: column; gap: .5rem; width: 100%; } /* ══════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════ */ .portal-footer { background: var(--darkNew); border-top: 1px solid rgba(255,255,255,.06); padding: 1.5rem 2rem; margin-top: auto; } .portal-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .portal-footer img { height: 20px; width: auto; opacity: .45; filter: brightness(0) invert(1); } .portal-footer-legal { font-family: var(--fontSans); font-size: .68rem; font-weight: 300; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.3); } .portal-footer-legal a { color: rgba(255,255,255,.3); text-decoration: none; } .portal-footer-legal a:hover { color: var(--accent); } /* ══════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════ */ /* 4 → 2 columns at tablet */ @media (max-width: 1100px) { .prj-portal-body { grid-template-columns: minmax(0, 1fr) minmax(380px, 420px); gap: 2.5rem; } } @media (max-width: 991px) { .portal-card-grid, .portal-card-grid--3col { grid-template-columns: repeat(2, 1fr); } } /* 2 → 1 column at mobile; tighten spacing */ @media (max-width: 600px) { .portal-hero { padding: 2.5rem 1.25rem 2rem; } .portal-body { padding: 2rem 1.25rem; } .portal-card-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════ PROJECT PAGE (.prj-portal-*) Used by portal-project.php ══════════════════════════════════════════════ */ .prj-portal-hero { background: var(--darkNew); border-bottom: 1px solid rgba(255,255,255,.06); } .prj-portal-hero-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 600px; gap: 0; align-items: start; } .prj-portal-hero-left { padding: 3.5rem 3rem 3.5rem 2rem; display: flex; flex-direction: column; justify-content: flex-start; } .prj-portal-client-lockup { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; } .prj-portal-client-logo { height: 40px; width: auto; max-width: 160px; object-fit: contain; opacity: .85; } .prj-portal-client-divider { width: 1px; height: 28px; background: rgba(255,255,255,.15); } .prj-portal-client-name { font-family: var(--fontSans); font-size: .7rem; font-weight: 300; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.4); margin: 0; } /* prj-portal-kicker inherits shared base from .portal-kicker group above */ .prj-portal-kicker { font-size: .9rem; color: var(--accent); margin-bottom: .6rem; } .prj-portal-title { font-family: var(--fontSans); font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 500; text-transform: uppercase; color: #fff; line-height: 1.08; margin-bottom: 0; transition: color .2s; } .prj-portal-title-link { text-decoration: none; } .prj-portal-title-link:hover .prj-portal-title { color: var(--accent); } .prj-portal-hero-cover { background: var(--darkNew); display: flex; align-items: center; justify-content: center; padding: 2rem 2rem 2rem 0; } .prj-portal-hero-cover a { display: block; } .prj-portal-hero-cover img { width: 100%; height: auto; display: block; opacity: .92; transition: opacity .2s; } .prj-portal-hero-cover a:hover img { opacity: 1; } /* Body + sidebar */ .prj-portal-body { flex: 1; max-width: 1200px; width: 100%; margin: 0 auto; padding: 3.5rem 2rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 480px); gap: 3rem; align-items: start; } .prj-portal-descrip { font-family: var(--fontSerif); font-size: 1.05rem; line-height: 1.8; color: #3a3a3a; } .prj-portal-sidebar { display: flex; flex-direction: column; gap: 1.25rem; } .prj-portal-sidebar-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-top: 3px solid var(--accent); padding: 1.4rem 1.5rem; } /* Video card */ .prj-portal-sidebar-card.video-card { padding-top: 0; padding-left: 0; padding-right: 0; } .prj-portal-sidebar-label { font-family: var(--fontSans); font-size: .65rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gray); margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(0,0,0,.07); } .prj-portal-file-link { display: flex; align-items: center; gap: .75rem; font-family: var(--fontSans); font-size: .78rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); text-decoration: none; padding: .5rem 0; border-bottom: 1px solid transparent; transition: border-color .18s, gap .18s; } .prj-portal-file-link + .prj-portal-file-link { margin-top: .25rem; } .prj-portal-file-link:hover { border-color: var(--accent); color: var(--accent); gap: 1rem; } .prj-portal-file-link .bi { font-size: 1.2rem; flex-shrink: 0; } .prj-portal-file-meta { font-family: var(--fontSans); font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gray); margin-top: .2rem; } /* Video embed loading state */ .prj-portal-video-card { padding: 0 0 1rem 0; } .prj-portal-video-link { margin-bottom: 0; padding-left: 1rem; padding-right: 1rem; } .prj-portal-video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 10.5; overflow: hidden; background: var(--darkNew); margin-bottom: 1rem; } .prj-portal-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .35s ease; } .prj-portal-video-loader { position: absolute; inset: 0; z-index: 2; transition: opacity .35s ease, visibility .35s ease; } .prj-portal-video-placeholder { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; filter: brightness(.72); } .prj-portal-video-placeholder-empty { background: linear-gradient(135deg, var(--darkNew), var(--dkGray)); } .prj-portal-video-loading-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.18); color: #fff; } .prj-portal-video-wrap.is-loaded .prj-portal-video-frame { opacity: 1; } .prj-portal-video-wrap.is-loaded .prj-portal-video-loader { opacity: 0; visibility: hidden; pointer-events: none; } /* Responsive — project page */ @media (max-width: 1100px) { .prj-portal-body { grid-template-columns: minmax(0, 1fr) minmax(380px, 420px); gap: 2.5rem; } } @media (max-width: 991px) { .prj-portal-hero-inner { grid-template-columns: 1fr; } .prj-portal-hero-cover { padding: 0 1.25rem 2rem; } .prj-portal-body { grid-template-columns: 1fr; gap: 2.5rem; } } @media (max-width: 600px) { .prj-portal-hero-left { padding: 2.5rem 1.25rem; } .prj-portal-body { padding: 2rem 1.25rem; } }