/* ============================================================ PEMCO — Social Housing Health & Safety Forum Shared stylesheet Pages opt in via a body class: → the hub / landing page → an individual session write-up ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* PEMCO brand */ --ink: #0b2647; /* PEMCO navy */ --purple: #6942e2; /* PEMCO purple */ --purple-700: #5630c4; --yellow: #ffd93c; /* PEMCO yellow */ --purple-wash:#f3f0fd; --yellow-wash:#fff7d6; --mid: #515170; --soft: #8a8aa3; --rule: #e8e8f0; --bg: #fafafa; --paper: #ffffff; --shadow-sm: 0 1px 2px rgba(11,38,71,.05); --shadow-md: 0 12px 30px -12px rgba(11,38,71,.18); --shadow-lg: 0 30px 60px -24px rgba(11,38,71,.28); --max: 1080px; /* article aliases (post sub-brand maps onto the brand tokens) */ --accent: var(--purple); --accent-700: var(--purple-700); --accent-light: var(--purple-wash); --white: #ffffff; --section-a: #0b2647; /* navy */ --section-b: #6942e2; /* purple */ --section-c: #1f6f57; /* green */ } html { scroll-behavior: smooth; } body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg); color: var(--ink); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } body.forum-post { line-height: 1.7; } a { color: inherit; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; } /* small caps eyebrow */ .eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--purple); } /* ───────────────── SHARED HEADER ───────────────── */ header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.86); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--rule); } .nav { display: flex; align-items: center; justify-content: space-between; height: 66px; } .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; } .brand .pemco { font-weight: 800; font-size: 1.18rem; letter-spacing: -.01em; color: var(--purple); } .brand .divider { width: 1px; height: 22px; background: var(--rule); } .brand .sub { font-size: .8rem; font-weight: 600; color: var(--mid); letter-spacing: .01em; } @media (max-width: 620px) { .brand .sub, .brand .divider { display: none; } } .nav-links { display: flex; align-items: center; gap: 1.6rem; } .nav-links a { text-decoration: none; font-size: .86rem; font-weight: 600; color: var(--mid); transition: color .18s; } .nav-links a:hover { color: var(--ink); } @media (max-width: 760px) { .nav-links a:not(.btn) { display: none; } } .btn { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 700; text-decoration: none; padding: .62rem 1.15rem; border-radius: 999px; transition: transform .18s, box-shadow .18s, background .18s; } .btn-primary { background: var(--purple); color: #fff; box-shadow: 0 8px 20px -8px rgba(105,66,226,.6); } .btn-primary:hover { background: var(--purple-700); transform: translateY(-1px); } .btn-ghost { border: 1.5px solid var(--rule); color: var(--ink); background: var(--paper); } .btn-ghost:hover { border-color: var(--purple); color: var(--purple); } /* ════════════════════════════════════════════════════════════ HOME / HUB ════════════════════════════════════════════════════════════ */ /* ── HERO ── */ .forum-home .hero { position: relative; overflow: hidden; } .forum-home .hero::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(620px 360px at 88% -8%, rgba(105,66,226,.10), transparent 60%), radial-gradient(520px 340px at -6% 18%, rgba(255,217,60,.16), transparent 55%); } .forum-home .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; padding: 4.2rem 0 4rem; } @media (max-width: 880px) { .forum-home .hero-inner { grid-template-columns: 1fr; gap: 2.2rem; padding: 3rem 0 2.5rem; } } .hero .tagline { display: inline-flex; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--ink); margin-bottom: 1.1rem; } .hero .tagline b { color: var(--purple); } .hero .tagline .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--yellow); } .forum-home .hero h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.06; letter-spacing: -.025em; margin-bottom: 1.1rem; } .hero h1 .mark { background: linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 92%, transparent 92%); padding: 0 .08em; } .hero p.lead { font-size: 1.08rem; color: var(--mid); max-width: 33ch; margin-bottom: 1.7rem; } .hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; } .hero-cta .meta { font-size: .82rem; color: var(--soft); font-weight: 600; } /* FORUM lockup — echoes the flyer speech-bubble */ .lockup { display: flex; justify-content: center; } .bubble { position: relative; width: 100%; max-width: 340px; background: var(--ink); border-radius: 18px; padding: 2.4rem 1.4rem 2.6rem; text-align: center; box-shadow: var(--shadow-lg); } .bubble::after { content:''; position: absolute; left: 38px; bottom: -16px; border-width: 18px 16px 0 0; border-style: solid; border-color: var(--ink) transparent transparent transparent; } .bubble .kicker { font-size: .64rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .7rem; } .bubble .forum { font-size: clamp(2.4rem, 7vw, 3.3rem); font-weight: 800; letter-spacing: .22em; color: var(--yellow); padding-left: .22em; line-height: 1; } .bubble .seal { margin-top: 1rem; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); } .bubble .seal b { color: #fff; } /* ── SECTION SCAFFOLD ── */ section.band { padding: 3.6rem 0; } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; } .sec-head h2 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; } .sec-head .link { font-size: .85rem; font-weight: 700; text-decoration: none; color: var(--purple); white-space: nowrap; } .sec-head .link:hover { text-decoration: underline; } /* ── FEATURED (latest) ── */ .feature { display: grid; grid-template-columns: 1.05fr .95fr; background: var(--paper); border: 1px solid var(--rule); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-md); } @media (max-width: 820px) { .feature { grid-template-columns: 1fr; } } .feature .art { position: relative; background: radial-gradient(420px 240px at 80% 10%, rgba(105,66,226,.22), transparent 60%), linear-gradient(155deg, #11305a, var(--ink)); padding: 2.4rem; color: #fff; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; } .feature .art .big-num { font-size: 5.5rem; font-weight: 800; line-height: .8; color: rgba(255,255,255,.12); letter-spacing: -.04em; } .feature .art .topic { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; max-width: 14ch; } .feature .art .topic span { color: var(--yellow); } .pill { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px; } .pill-live { background: var(--yellow); color: var(--ink); } .feature .body { padding: 2.2rem; display: flex; flex-direction: column; } .feature .body .meta { font-size: .78rem; font-weight: 700; color: var(--soft); letter-spacing: .03em; margin-bottom: .8rem; } .feature .body h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: .7rem; } .feature .body p { color: var(--mid); font-size: .98rem; margin-bottom: 1.3rem; } .feature .body .chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; } .chip { font-size: .72rem; font-weight: 600; color: var(--mid); background: var(--purple-wash); border-radius: 999px; padding: .3rem .7rem; } .feature .body .read { margin-top: auto; } /* ── NEXT SESSION STRIP ── */ .next { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; background: var(--ink); color: #fff; border-radius: 18px; padding: 1.6rem 1.9rem; box-shadow: var(--shadow-md); } .next .when { display: flex; flex-direction: column; gap: .15rem; background: var(--yellow); color: var(--ink); border-radius: 12px; padding: .8rem 1.1rem; text-align: center; min-width: 92px; } .next .when .d { font-size: 1.7rem; font-weight: 800; line-height: 1; } .next .when .m { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .next .info { flex: 1; min-width: 200px; } .next .info .lbl { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); margin-bottom: .25rem; } .next .info h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; } .next .info p { font-size: .85rem; color: rgba(255,255,255,.7); margin-top: .15rem; } .next .btn-primary { background: var(--yellow); color: var(--ink); box-shadow: none; } .next .btn-primary:hover { background: #ffe055; } /* ── SESSIONS TIMELINE ── */ .sessions { display: grid; gap: .7rem; } .srow { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 1.2rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 1rem 1.3rem; text-decoration: none; color: inherit; transition: border-color .18s, transform .18s, box-shadow .18s; } a.srow:hover { border-color: var(--purple); transform: translateX(3px); box-shadow: var(--shadow-sm); } .srow .sn { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--purple); text-align: center; } .srow .sn b { display: block; font-size: 1.45rem; letter-spacing: -.02em; color: var(--ink); } .srow .st h4 { font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; } .srow .st .dt { font-size: .8rem; color: var(--soft); font-weight: 600; } .srow .tag { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; white-space: nowrap; } .tag-pub { background: var(--purple-wash); color: var(--purple-700); } .tag-next { background: var(--yellow-wash); color: #8a6d00; } .tag-soon { background: #f3f3f7; color: var(--soft); } .srow.muted { opacity: .72; } .srow.muted .sn b { color: var(--soft); } @media (max-width: 560px) { .srow { grid-template-columns: 48px 1fr; } .srow .tag { grid-column: 2; justify-self: start; } } /* ── FORMAT (3-part) ── */ .format { background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } @media (max-width: 760px) { .format-grid { grid-template-columns: 1fr; } } .fcard { padding: 1.6rem 1.5rem; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg); } .fcard .fn { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem; color: #fff; background: var(--ink); margin-bottom: 1rem; } .fcard:nth-child(2) .fn { background: var(--purple); } .fcard:nth-child(3) .fn { background: #1f6f57; } .fcard h4 { font-size: 1.08rem; font-weight: 700; margin-bottom: .4rem; letter-spacing: -.01em; } .fcard p { font-size: .9rem; color: var(--mid); } /* ── CTA ── */ .cta-band { text-align: center; } .cta-band .eyebrow { display: inline-block; margin-bottom: .8rem; } .cta-band h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: .7rem; } .cta-band p { color: var(--mid); max-width: 46ch; margin: 0 auto 1.6rem; } .cta-band a.mail { font-weight: 800; color: var(--purple); text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 1px; } /* ── HOME FOOTER ── */ .forum-home footer { background: var(--ink); color: rgba(255,255,255,.66); padding: 2.6rem 0 2rem; font-size: .85rem; } .foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; align-items: flex-start; } .foot .pemco { font-weight: 800; font-size: 1.1rem; color: #fff; } .foot .pemco span { color: var(--yellow); } .foot a { color: rgba(255,255,255,.66); text-decoration: none; } .foot a:hover { color: #fff; } .foot ul { list-style: none; display: flex; gap: 1.3rem; flex-wrap: wrap; } .foot .copy { width: 100%; border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.2rem; margin-top: .6rem; font-size: .78rem; color: rgba(255,255,255,.45); } /* ── HOME ANIMATION ── */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(20px); animation: up .6s cubic-bezier(.2,.7,.3,1) forwards; } .d1 { animation-delay: .05s } .d2 { animation-delay: .15s } .d3 { animation-delay: .25s } .d4 { animation-delay: .35s } @keyframes up { to { opacity: 1; transform: none; } } } /* ════════════════════════════════════════════════════════════ POST / SESSION WRITE-UP ════════════════════════════════════════════════════════════ */ .header-inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 2rem; } .back-link { font-size: .82rem; font-weight: 700; text-decoration: none; color: var(--mid); display: inline-flex; align-items: center; gap: .4rem; transition: color .18s; } .back-link:hover { color: var(--accent); } /* ── HERO ── */ .forum-post .hero { background: var(--ink); padding: 3.4rem 2rem 5rem; position: relative; overflow: hidden; } .forum-post .hero::before { content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(520px 300px at 85% -10%, rgba(105,66,226,.35), transparent 60%); } .forum-post .hero::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 60px; background: var(--bg); clip-path: ellipse(55% 100% at 50% 100%); } .forum-post .hero-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; } .topic-tag { display: inline-block; background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3rem 0.8rem; border-radius: 999px; margin-bottom: 1.5rem; } .forum-post .hero h1 { font-family: 'DM Serif Display', serif; font-size: clamp(2.4rem, 5vw, 3.6rem); color: #fff; line-height: 1.15; margin-bottom: 1.2rem; max-width: 620px; } .hero-meta { color: rgba(255,255,255,.6); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; } .hero-meta strong { color: #fff; font-weight: 600; } /* ── INTRO ── */ .intro-band { max-width: 900px; margin: 3rem auto 0; padding: 0 2rem; } .intro-band p { font-size: 1.05rem; color: var(--mid); max-width: 680px; border-left: 3px solid var(--accent); padding-left: 1.2rem; } /* ── SECTION TABS ── */ .section-nav { max-width: 900px; margin: 3rem auto 0; padding: 0 2rem; display: flex; gap: 0.5rem; flex-wrap: wrap; } .snav-item { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.5rem 1.1rem; border-radius: 999px; text-decoration: none; transition: opacity 0.2s, transform .18s; } .snav-item:hover { opacity: 0.85; transform: translateY(-1px); } .snav-a { background: var(--section-a); color: #fff; } .snav-b { background: var(--section-b); color: #fff; } .snav-c { background: var(--section-c); color: #fff; } /* ── MAIN LAYOUT ── */ .forum-post main { max-width: 900px; margin: 0 auto; padding: 0 2rem 5rem; } /* ── HIGH-LEVEL SECTION BLOCKS ── */ .hl-section { margin-top: 3.5rem; } .hl-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); } .hl-num { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'DM Serif Display', serif; font-size: 1rem; color: #fff; flex-shrink: 0; } .hl-num-a { background: var(--section-a); } .hl-num-b { background: var(--section-b); } .hl-num-c { background: var(--section-c); } .hl-header h2 { font-family: 'DM Serif Display', serif; font-size: 1.55rem; font-weight: 400; color: var(--ink); line-height: 1.2; } .hl-subtitle { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); } /* ── SUB-SECTIONS ── */ .sub-section { margin-top: 2.2rem; } .sub-section h3 { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.7rem; } .sub-section p { color: var(--mid); margin-bottom: 0.8rem; } .sub-section p:last-child { margin-bottom: 0; } /* ── PULL QUOTE ── */ .pull-quote { background: var(--accent-light); border-left: 4px solid var(--accent); padding: 1rem 1.3rem; margin: 1.2rem 0; font-family: 'DM Serif Display', serif; font-size: 1.05rem; font-style: italic; color: var(--ink); line-height: 1.5; } /* ── RISK GRID ── */ .risk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin: 1.2rem 0; } .risk-card { background: var(--white); border: 1px solid var(--rule); border-radius: 10px; padding: 1rem 1.1rem; } .risk-card .risk-icon { font-size: 1.3rem; margin-bottom: 0.4rem; } .risk-card p { font-size: 0.88rem; color: var(--mid); margin: 0; } /* ── PRIORITY TABLE ── */ .priority-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: 0.9rem; } .priority-table th { text-align: left; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); padding: 0.5rem 0.8rem; border-bottom: 2px solid var(--rule); } .priority-table td { padding: 0.75rem 0.8rem; border-bottom: 1px solid var(--rule); color: var(--mid); vertical-align: top; } .priority-table tr:last-child td { border-bottom: none; } .badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .badge-high { background: #fdecea; color: #b71c1c; } .badge-med { background: #fff8e1; color: #e65100; } .badge-low { background: #e8f5e9; color: #1b5e20; } /* ── CHECKLIST ── */ .checklist { list-style: none; margin: 0.8rem 0; } .checklist li { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.45rem 0; border-bottom: 1px solid var(--rule); font-size: 0.93rem; color: var(--mid); } .checklist li:last-child { border-bottom: none; } .checklist li::before { content: '→'; color: var(--accent); flex-shrink: 0; font-weight: 700; margin-top: 0.05em; } /* ── CONTROLS COLUMNS ── */ .controls-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.2rem 0; } @media (max-width: 600px) { .controls-cols { grid-template-columns: 1fr; } } .control-box { background: var(--white); border: 1px solid var(--rule); border-radius: 10px; padding: 1.2rem; } .control-box h4 { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.5rem; } .control-box h4 .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .dot-high { background: #b71c1c; } .dot-med { background: #e65100; } /* ── LINK BOX ── */ .link-box { display: flex; align-items: center; gap: 1.2rem; background: var(--white); border: 1px solid var(--rule); border-radius: 10px; padding: 1.1rem 1.3rem; margin-top: 1.2rem; text-decoration: none; transition: border-color 0.2s, transform .18s; } .link-box:hover { border-color: var(--accent); transform: translateY(-1px); } .link-box .link-icon { width: 40px; height: 40px; background: var(--accent-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .link-box .link-text strong { display: block; font-size: 0.88rem; font-weight: 700; color: var(--ink); margin-bottom: 0.15rem; } .link-box .link-text span { font-size: 0.78rem; color: var(--soft); } /* ── ALERT BOX ── */ .alert-box { background: var(--accent-light); border: 1px solid #d9ccf7; border-radius: 10px; padding: 1.1rem 1.3rem; margin: 1.2rem 0; font-size: 0.92rem; color: var(--mid); } .alert-box strong { color: var(--accent-700); } /* ── NEXT TEASER + POST FOOTER ── */ .post-foot { max-width: 900px; margin: 0 auto; padding: 0 2rem; } .next-teaser { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--white); border: 1px solid var(--rule); border-radius: 14px; padding: 1.3rem 1.5rem; margin-bottom: 3rem; } .next-teaser .lbl { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .next-teaser h4 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; } .next-teaser a { font-size: .85rem; font-weight: 700; text-decoration: none; color: #fff; background: var(--accent); padding: .6rem 1.1rem; border-radius: 999px; transition: background .18s; } .next-teaser a:hover { background: var(--accent-700); } .forum-post footer { background: var(--ink); color: rgba(255,255,255,.6); font-size: 0.8rem; padding: 2.2rem; text-align: center; } .forum-post footer .pemco { font-weight: 800; font-size: 1.05rem; color: #fff; margin-bottom: .4rem; } .forum-post footer .pemco span { color: var(--yellow); } .forum-post footer a { color: rgba(255,255,255,.6); } .forum-post footer a:hover { color: #fff; } /* ── POST ANIMATION ── */ @media (prefers-reduced-motion: no-preference) { .hl-section { opacity: 0; transform: translateY(18px); animation: fadeUp 0.55s ease forwards; } .hl-section:nth-child(1) { animation-delay: 0.1s; } .hl-section:nth-child(2) { animation-delay: 0.25s; } .hl-section:nth-child(3) { animation-delay: 0.4s; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } }