/** * Impactiqa — about.css * About panel page styles. * Loaded via $page_css = ['about'] in about.php. * * Colour mode system: defaults to Cream (#ece8df); Magenta (#FF2D8B) * activated by [data-color-mode="magenta"] on via JS toggle. */ /* ── Panel variables (static for about page) ────────────────────────────────── */ :root { --panel-mute: rgba(10, 10, 10, .55); --panel-rule: rgba(10, 10, 10, .14); --panel-rule-strong: rgba(10, 10, 10, .28); --panel-accent: #FF2D8B; --bg-transition: background-color .55s cubic-bezier(.22,1,.36,1), color .55s cubic-bezier(.22,1,.36,1), border-color .55s cubic-bezier(.22,1,.36,1); } /* ── Magenta colour mode ────────────────────────────────────────────────────── */ html[data-color-mode="magenta"] { --panel-bg: #FF2D8B; --panel-fg: #f7f6f4; --panel-mute: rgba(247, 246, 244, .65); --panel-rule: rgba(247, 246, 244, .22); --panel-rule-strong: rgba(247, 246, 244, .45); } /* ── Base ───────────────────────────────────────────────────────────────────── */ html, body { height: 100%; } body { background: var(--panel-bg); color: var(--panel-fg); overflow-x: hidden; transition: var(--bg-transition); } main { min-height: 100vh; padding: 132px 8vw 32px; display: flex; flex-direction: column; gap: 88px; } /* ── Section 1 — Hero ───────────────────────────────────────────────────────── */ .hero { display: flex; flex-direction: column; gap: 40px; } .eyebrow { display: inline-flex; align-items: center; gap: 14px; color: var(--panel-mute); transition: color .55s ease; } .eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--panel-rule-strong); transition: background-color .55s ease; } .headline { font-size: clamp(72px, 12vw, 188px); line-height: .86; letter-spacing: -.035em; max-width: 14ch; color: var(--panel-fg); transition: color .55s ease; } .body-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: 1100px; margin-top: 16px; } .body-copy p { font-family: 'Barlow', sans-serif; font-weight: 300; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.55; color: var(--panel-fg); transition: color .55s ease; } /* ── Section 2 — Stats ──────────────────────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--panel-rule); border-bottom: 1px solid var(--panel-rule); transition: border-color .55s ease; } .stat { padding: 32px 28px 36px; border-right: 1px solid var(--panel-rule); display: flex; flex-direction: column; gap: 12px; transition: border-color .55s ease; } .stat:last-child { border-right: none; } .stat-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(48px, 6.5vw, 96px); line-height: .9; letter-spacing: -.025em; color: var(--panel-fg); display: flex; align-items: baseline; gap: 4px; transition: color .55s ease; } .stat-num .suffix { font-size: .55em; font-weight: 700; letter-spacing: -.02em; opacity: .65; } .stat-label { font-family: 'Barlow', sans-serif; font-weight: 300; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--panel-mute); transition: color .55s ease; } /* ── Section 3 — Principles ─────────────────────────────────────────────────── */ .principles { display: flex; flex-direction: column; gap: 40px; } .principles-head { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; } .principles-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(48px, 7vw, 108px); line-height: .88; letter-spacing: -.03em; color: var(--panel-fg); transition: color .55s ease; } .principles-intro { font-family: 'Barlow', sans-serif; font-weight: 300; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6; color: var(--panel-mute); transition: color .55s ease; } .principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--panel-rule); transition: border-color .55s ease; } .principle { padding: 36px 28px 40px; border-right: 1px solid var(--panel-rule); display: flex; flex-direction: column; gap: 20px; transition: border-color .55s ease; } .principle:last-child { border-right: none; } .principle-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 300; font-size: 13px; letter-spacing: .2em; color: var(--panel-mute); transition: color .55s ease; } .principle-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(36px, 4vw, 60px); line-height: .9; letter-spacing: -.02em; color: var(--panel-fg); transition: color .55s ease; } .principle-body { font-family: 'Barlow', sans-serif; font-weight: 300; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; color: var(--panel-mute); transition: color .55s ease; } /* ── Section 4 — Outro ──────────────────────────────────────────────────────── */ .outro { display: grid; grid-template-columns: 1fr auto; gap: 6vw; align-items: center; padding-top: 16px; padding-bottom: 48px; } .outro-text { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(36px, 5vw, 80px); line-height: .9; letter-spacing: -.03em; color: var(--panel-fg); transition: color .55s ease; } .outro-cta { display: inline-flex; align-items: center; gap: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; flex-shrink: 0; } .outro-cta .vl { background: var(--panel-fg); color: var(--panel-bg); padding: 14px 24px; transition: background-color .55s ease, color .55s ease; } .outro-cta .vi { background: var(--panel-fg); color: var(--panel-bg); padding: 14px 16px; transition: background-color .55s ease, color .55s ease; } /* ── Colour toggle widget ────────────────────────────────────────────────────── */ .color-toggle { position: fixed; bottom: 32px; right: 32px; z-index: 200; display: flex; align-items: center; gap: 8px; background: var(--panel-fg); padding: 6px 6px 6px 14px; transition: background-color .55s ease; } .color-swatch { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--panel-bg); background: transparent; border: 1px solid transparent; padding: 6px 10px 5px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; transition: background-color .35s ease, color .35s ease; } .color-swatch.active { background: var(--panel-bg); color: var(--panel-fg); } .color-swatch::before { content: ''; width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; border: 1px solid currentColor; } .color-swatch[data-color="cream"]::before { background: #ece8df; } .color-swatch[data-color="magenta"]::before { background: #FF2D8B; } /* ── Responsive ─────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .body-copy { grid-template-columns: 1fr; gap: 28px; } .principles-head { grid-template-columns: 1fr; gap: 24px; } .principles-grid { grid-template-columns: 1fr; } .principle { border-right: none; border-bottom: 1px solid var(--panel-rule); padding: 28px 0; } .principle:nth-child(2), .principle:nth-child(3) { padding-left: 0; } .principle:last-child { border-bottom: none; } .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(2) { border-right: none; } .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--panel-rule); } .outro { grid-template-columns: 1fr; gap: 28px; } main { padding: 116px 6vw 28px; gap: 64px; } } /* ── Reduced motion ─────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body, .panel-logo, .panel-close, .headline, .stat-num, .principle-title, .body-copy p, .stat-label, .principle-body, .principle-num, .principles-title, .principles-intro, .outro-text, .outro-cta .vl, .outro-cta .vi, .color-toggle, .color-swatch, .eyebrow, .eyebrow::before { transition: none !important; } }