/* ============================================================ myPropIQ Learn — "The Briefing" A warm editorial design system. Direction C palette. Two themes: paper (default) · ink ============================================================ */ /* Fonts are loaded via in each page's for faster, pre-paint delivery. */ /* ============================================================ TOKENS ============================================================ */ :root { /* Use Next.js CSS variables when running in the app (fonts served locally under hashed names). Fall back to the public font names for standalone/design-handoff usage. */ --font-display: var(--font-newsreader, 'Newsreader', Georgia, serif); --font-read: var(--font-newsreader, 'Newsreader', Georgia, serif); --font-ui: var(--font-inter, 'Inter', system-ui, sans-serif); --font-mono: var(--font-jetbrains, 'JetBrains Mono', ui-monospace, monospace); --maxw: 1180px; --readw: 668px; /* paper theme (default) */ --bg: #F2E7D2; --bg-deep: #E9DABE; --surface: #FCF8F0; --surface-2: #F8EFDE; --ink: #1C1917; --text: #4A3F33; --text-soft: #6B5F52; --text-faint: #9A8C78; --rule: #E1D4BB; --rule-strong: #D2BF9C; --amber: #B96E1F; --amber-deep: #9A5A16; --amber-soft: rgba(199,124,42,.13); --amber-line: rgba(199,124,42,.34); --slate: #3D5A6C; --slate-soft: rgba(61,90,108,.10); --slate-line: rgba(61,90,108,.30); --moss: #54702F; --moss-soft: rgba(95,122,60,.13); --moss-line: rgba(95,122,60,.34); --terra: #A8472F; --terra-soft: rgba(177,79,58,.10); --terra-line: rgba(177,79,58,.34); --shadow-card: 0 1px 2px rgba(28,25,23,.04), 0 12px 32px -16px rgba(28,25,23,.22); --shadow-lift: 0 2px 6px rgba(28,25,23,.06), 0 26px 60px -24px rgba(28,25,23,.34); } [data-theme="ink"] { --bg: #1A1613; --bg-deep: #131008; --surface: #241F18; --surface-2: #2B251C; --ink: #FAF6EE; --text: #D9CFC1; --text-soft: #A89E92; --text-faint: #6B5F52; --rule: rgba(255,255,255,.10); --rule-strong: rgba(255,255,255,.18); --amber: #DD9A4E; --amber-deep: #C77C2A; --amber-soft: rgba(221,154,78,.14); --amber-line: rgba(221,154,78,.32); --slate: #84A9C4; --slate-soft: rgba(132,169,196,.13); --slate-line: rgba(132,169,196,.30); --moss: #8FB35E; --moss-soft: rgba(143,179,94,.13); --moss-line: rgba(143,179,94,.32); --terra: #E78A72; --terra-soft: rgba(231,138,114,.12); --terra-line: rgba(231,138,114,.34); --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 14px 40px -18px rgba(0,0,0,.7); --shadow-lift: 0 2px 8px rgba(0,0,0,.4), 0 30px 70px -26px rgba(0,0,0,.8); } /* display-face tweak */ [data-display="dmserif"] { --font-display: 'DM Serif Display', Georgia, serif; } /* ============================================================ RESET / BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-read); background: var(--bg); color: var(--text); font-size: 19px; line-height: 1.72; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .4s ease, color .4s ease; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 700; line-height: 1.08; margin: 0; letter-spacing: -.012em; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: var(--amber-soft); color: var(--ink); } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 6px; } /* ============================================================ SHARED ATOMS ============================================================ */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } .read { max-width: var(--readw); margin: 0 auto; } .eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); } .eyebrow--soft { color: var(--text-faint); } .lede { font-size: 1.32rem; line-height: 1.62; color: var(--text-soft); } .hr { height: 1px; background: var(--rule); border: 0; } .hr-strong { height: 1px; background: var(--rule-strong); border: 0; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* brand mark */ .brandmark { display: inline-flex; align-items: center; gap: 10px; } .brandmark .iq { width: 30px; height: 30px; border-radius: 8px; background: var(--amber); color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 14px; display: grid; place-items: center; letter-spacing: -.02em; box-shadow: 0 2px 8px -2px rgba(185,110,31,.6); } .brandmark .word { font-family: var(--font-ui); font-weight: 700; font-size: 17px; color: var(--ink); letter-spacing: -.02em; } .brandmark .word b { color: var(--amber); font-weight: 700; } /* buttons */ .btn { font-family: var(--font-ui); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: all .18s ease; line-height: 1; } .btn .arr { transition: transform .2s ease; } .btn:hover .arr { transform: translateX(3px); } .btn-primary { background: var(--amber); color: #fff; box-shadow: 0 8px 22px -10px rgba(185,110,31,.8); } .btn-primary:hover { background: var(--amber-deep); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); } .btn-ghost:hover { border-color: var(--ink); } .btn-quiet { padding: 0; color: var(--text-soft); font-weight: 600; } .btn-quiet:hover { color: var(--amber); } /* access tags */ .tag { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 5px; white-space: nowrap; line-height: 1; display: inline-flex; align-items: center; gap: 5px; } .tag-free { color: var(--moss); background: var(--moss-soft); border: 1px solid var(--moss-line); } .tag-account { color: var(--slate); background: var(--slate-soft); border: 1px solid var(--slate-line); } .tag-subscriber { color: var(--amber); background: var(--amber-soft); border: 1px solid var(--amber-line); } /* ============================================================ MASTHEAD (shared top bar) ============================================================ */ .masthead { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--rule); } .masthead-inner { display: flex; align-items: center; justify-content: space-between; height: 62px; } .masthead-nav { display: flex; align-items: center; gap: 22px; font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--text-soft); } .masthead-nav a { transition: color .15s; } .masthead-nav a:hover { color: var(--ink); } .masthead-nav .crumb { display: flex; align-items: center; gap: 9px; min-width: 0; } .masthead-nav .crumb .lbl { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dot-sep { color: var(--text-faint); } /* ============================================================ NOTICES (callouts) ============================================================ */ .notice { position: relative; border-radius: 0 12px 12px 0; padding: 20px 22px 20px 24px; margin: 30px 0; background: var(--surface-2); border: 1px solid var(--rule); border-left: 3px solid var(--text-faint); display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; } .notice .ic { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; } .notice .n-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 5px; } .notice .n-text { font-size: 1.02rem; line-height: 1.6; color: var(--text); } .notice--fact { border-left-color: var(--slate); background: var(--slate-soft); } .notice--fact .n-label, .notice--fact .ic { color: var(--slate); } .notice--tip { border-left-color: var(--moss); background: var(--moss-soft); } .notice--tip .n-label, .notice--tip .ic { color: var(--moss); } .notice--warning { border-left-color: var(--terra); background: var(--terra-soft); } .notice--warning .n-label, .notice--warning .ic { color: var(--terra); } .notice--scam { border-left-width: 4px; border-left-color: var(--terra); background: var(--terra-soft); } .notice--scam .n-label, .notice--scam .ic { color: var(--terra); } /* ============================================================ FIGURE frame (data visuals as report figures) ============================================================ */ .figure { margin: 36px 0 8px; } .figure-cap { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); } .figure-cap b { color: var(--amber); font-weight: 700; } .figure-cap .line { flex: 1; height: 1px; background: var(--rule); } .fig-body { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 26px; box-shadow: var(--shadow-card); } /* ============================================================ TWEAKS PANEL (vanilla, host-protocol) ============================================================ */ #tweaks { position: fixed; right: 18px; bottom: 18px; z-index: 9999; width: 268px; display: none; font-family: var(--font-ui); background: var(--surface); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 14px; box-shadow: var(--shadow-lift); overflow: hidden; } #tweaks.on { display: block; } .tw-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--rule); cursor: grab; } .tw-head .t { font-size: 13px; font-weight: 700; letter-spacing: -.01em; } .tw-x { border: 0; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 17px; line-height: 1; padding: 2px 4px; } .tw-x:hover { color: var(--ink); } .tw-body { padding: 14px 15px 16px; display: grid; gap: 16px; } .tw-sec > .lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; } .tw-seg { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--rule); border-radius: 9px; padding: 3px; } .tw-seg button { flex: 1; border: 0; background: transparent; cursor: pointer; font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--text-soft); padding: 7px 4px; border-radius: 6px; transition: all .15s; } .tw-seg button.sel { background: var(--amber); color: #fff; } /* ============================================================ FOOTER / DISCLAIMER ============================================================ */ .disclaimer { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.7; color: var(--text-faint); border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; } .disclaimer b { color: var(--text-soft); font-weight: 600; } /* reveal animation */ .rv { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } } @media (max-width: 720px) { body { font-size: 18px; } .wrap { padding: 0 20px; } .masthead-nav { gap: 14px; } }