/* Theme Name: Bardal Factors Theme URI: https://bardalfactors.com Author: Bardal Factors Description: Lightweight editorial theme for bardalfactors.com, carrying the Bardal Index design system across the whole site. Built to host interactive tools without CSS collisions. Version: 1.0.5 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 8.0 License: GPL-2.0-or-later Text Domain: bardalfactors */ /* ---- design tokens: the same palette both tools already use ---- */ :root{--paper:#f3f4f1;--card:#fff;--inset:#f8f9f7;--ink:#141a17;--ink2:#4a534d;--ink3:#7a837c; --rule:#d9ddd6;--rule2:#c3c9be;--green:#1c5f3f;--green-bg:#e4efe8;--amber:#8a5d10;--amber-bg:#f7efdc} @media(prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#0d100e;--card:#161a18; --inset:#121614;--ink:#e8ebe7;--ink2:#a4ada7;--ink3:#757e78;--rule:#252b28;--rule2:#39413c; --green:#5fb98a;--green-bg:#132419;--amber:#d3a44e;--amber-bg:#2a2113}} :root[data-theme=dark]{--paper:#0d100e;--card:#161a18;--inset:#121614;--ink:#e8ebe7;--ink2:#a4ada7; --ink3:#757e78;--rule:#252b28;--rule2:#39413c;--green:#5fb98a;--green-bg:#132419; --amber:#d3a44e;--amber-bg:#2a2113} *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{background:var(--paper);color:var(--ink);font-family:Karla,system-ui,-apple-system,sans-serif; font-size:15px;line-height:1.6;padding:0 18px 70px;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto} a{color:var(--green);text-underline-offset:2px} .w{max-width:660px;margin:0 auto} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;background:var(--card);color:var(--ink);padding:10px 14px; border:1px solid var(--green);border-radius:4px;z-index:99} /* ---- masthead and navigation ---- */ .site-head{border-bottom:2px solid var(--ink);padding:20px 0 13px;display:flex; justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap} .site-head .brand{font-family:Literata,Georgia,serif;font-size:20px;font-weight:700; color:var(--ink);text-decoration:none;white-space:nowrap} .site-head .brand:hover{color:var(--green)} .site-nav{display:flex;gap:16px;flex-wrap:wrap;font-size:13px} .site-nav a{color:var(--ink2);text-decoration:none;font-weight:600} .site-nav a:hover{color:var(--green)} .site-nav a[aria-current=page]{color:var(--green);border-bottom:2px solid var(--green);padding-bottom:2px} /* ---- long-form typography for ordinary pages ---- */ h1{font-family:Literata,Georgia,serif;font-size:min(28px,calc(5.6vw - 1.8px));font-weight:700; line-height:1.15;margin:26px 0 10px;letter-spacing:-.015em;text-wrap:balance} /* A headline set to span the full column on one line, flush to both edges. Sized in container units (cqw) rather than vw: vw includes the scrollbar, which made the text overflow the column by ~12px on every desktop browser. --h1-cap and --h1-scale are derived from how wide that exact string renders, so they must be recomputed if the wording changes. Below 620px a long headline can only fit on one line by shrinking to an unreadable size, so there it simply wraps and balances like any other heading. */ .entry{container-type:inline-size} @media(min-width:620px){ h1.fit{white-space:nowrap; font-size:min(var(--h1-cap,28px),calc(var(--h1-scale,5.6) * 1cqw))} } h2{font-family:Literata,Georgia,serif;font-size:21px;font-weight:700;margin:38px 0 10px;letter-spacing:-.01em} h3{font-family:Literata,Georgia,serif;font-size:16px;font-weight:600;margin:22px 0 8px} p{margin-bottom:13px;color:var(--ink2);max-width:62ch} p b,p strong{color:var(--ink);font-weight:600} .entry ul,.entry ol{margin:0 0 14px 20px;color:var(--ink2);max-width:62ch} .entry li{margin-bottom:6px} /* Body copy runs the full measure of the column, justified and hyphenated, so the written pages match the landing copy inside the two tools. Scoped to direct children so paragraphs sitting inside cards keep their own narrower measure. */ .entry>p,.entry>ul,.entry>ol{max-width:none} .entry>p{text-align:justify;-webkit-hyphens:auto;hyphens:auto;text-wrap:pretty} .entry>p.hint,.entry>p.legal{text-align:center;-webkit-hyphens:none;hyphens:none} .stand{color:var(--ink2);font-size:16.5px;margin-bottom:24px;line-height:1.5;max-width:none} .quiet{background:var(--inset);border:1px solid var(--rule);border-radius:5px;padding:16px 18px;margin-top:24px} .quiet p{font-size:13.5px;margin-bottom:9px;max-width:none} .quiet p:last-child{margin-bottom:0} /* ---- home: the two tools as cards ---- */ .tools{display:grid;gap:16px;margin:26px 0 8px} @media(min-width:620px){.tools{grid-template-columns:1fr 1fr}} .tool{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule); border-radius:5px;padding:20px;text-decoration:none;color:inherit} .tool:hover{border-color:var(--green)} .tool .kicker{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.13em; text-transform:uppercase;color:var(--green);margin-bottom:9px} .tool h2{font-family:Literata,Georgia,serif;font-size:19px;font-weight:700;margin:0 0 7px} .tool p{font-size:13.5px;color:var(--ink2);margin:0;max-width:none;flex:1} /* The whole card is the link, so this is a styled span rather than a nested