/* ============================================================ iron26 — umbrella system + universal app shell Small, sharp tools for files and notes. ------------------------------------------------------------ One stylesheet every tool inherits. A tool page sets its accent by adding a class to (e.g. class="accent-clay") and fills the shell slots. No per-tool layout surgery. ============================================================ */ /* ---- 1. tokens ---------------------------------------------------------- */ :root{ /* core palette (brand floor) */ --ink: #101418; /* near-black text */ --ink-2: #3a3f47; /* strong secondary */ --paper: #fbfaf7; /* warm off-white page bg */ --surface: #ffffff; /* card / panel surface */ --muted: #6b7280; /* secondary text */ --line: #e4e2dc; /* hairline borders */ --line-2: #efeee9; /* faintest divider */ /* accent — overridable per tool (see §accents) */ --accent: #2f6f4f; /* muted forest green */ --accent-ink: #245a40; /* accent text on light */ --accent-soft:#e7efe9; /* accent tint */ /* geometry */ --radius: 10px; --radius-sm:7px; --measure: 720px; /* reading width */ --wide: 940px; /* tool work-area width */ --pad: 24px; /* page gutter */ /* type */ --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --head: "Space Grotesk", var(--sans); --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --shadow: 0 1px 2px rgba(16,20,24,.04); /* used sparingly — hairlines do the work */ } /* ---- accents (curated, in-family) -------------------------------------- */ .accent-green{ --accent:#2f6f4f; --accent-ink:#245a40; --accent-soft:#e7efe9; } .accent-steel{ --accent:#3a5a78; --accent-ink:#2e4a64; --accent-soft:#e8eef4; } .accent-clay { --accent:#9a5b3f; --accent-ink:#824a32; --accent-soft:#f4e9e3; } .accent-slate{ --accent:#4a4f5e; --accent-ink:#3a3e4b; --accent-soft:#ececef; } .accent-plum { --accent:#6a4a6e; --accent-ink:#573c5b; --accent-soft:#efe8f1; } /* ---- dark mode (coherent with light: warm dark, brighter in-family accents) Token-only override — every component derives from these vars, so flipping the tokens flips the whole system. Same hue families, lifted for dark bg: --accent brightens, --accent-ink becomes the LIGHT accent text, --accent-soft becomes a dark-surface tint. Honors the OS setting automatically. ----------- */ @media (prefers-color-scheme: dark){ :root{ --ink: #ece9e2; /* warm off-white text on dark */ --ink-2: #b9b4a9; /* secondary text */ --paper: #15171a; /* warm near-black page bg */ --surface: #1c1f23; /* card / panel surface */ --muted: #8b8f98; /* tertiary text */ --line: #2c2f34; /* hairline borders */ --line-2: #24262a; /* faintest divider */ /* default (green) accent lifted for dark */ --accent: #5fae84; --accent-ink:#7cc59c; --accent-soft:#1d2a23; --shadow: 0 1px 2px rgba(0,0,0,.4); } .accent-green{ --accent:#5fae84; --accent-ink:#7cc59c; --accent-soft:#1d2a23; } .accent-steel{ --accent:#6d9bc4; --accent-ink:#8fb6d9; --accent-soft:#1a2530; } .accent-clay { --accent:#c98a68; --accent-ink:#d7a384; --accent-soft:#2c211b; } .accent-slate{ --accent:#8b909f; --accent-ink:#a3a8b6; --accent-soft:#23252b; } .accent-plum { --accent:#a07ba6; --accent-ink:#b596ba; --accent-soft:#272030; } /* keep form controls legible on dark */ .input, .textarea, select.input{ color-scheme:dark; } .btn-primary{ color:#15171a; } /* dark text on bright accent button */ .chip-soon .dot{ background:#d8b65a; } } /* ---- 2. reset / base --------------------------------------------------- */ *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4{ font-family:var(--head); font-weight:600; line-height:1.15; letter-spacing:-.01em; margin:0; } h1{ font-size:38px; font-weight:700; letter-spacing:-.025em; } h2{ font-size:21px; } h3{ font-size:17px; } p{ margin:0; text-wrap:pretty; } a{ color:var(--accent-ink); text-decoration:none; } a:hover{ text-decoration:underline; text-underline-offset:2px; } ::selection{ background:var(--accent-soft); } code,kbd,samp{ font-family:var(--mono); font-size:.86em; } :focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; border-radius:3px; } /* code chips inside prose */ .kbd{ font-family:var(--mono); font-size:.82em; background:var(--line-2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--ink-2); white-space:nowrap; } /* ---- 3. layout primitives ---------------------------------------------- */ .i26{ min-height:100vh; display:flex; flex-direction:column; } .wrap{ width:100%; max-width:var(--measure); margin:0 auto; padding-inline:var(--pad); } .wrap.wide{ max-width:var(--wide); } .stack > * + *{ margin-top:var(--gap, 18px); } .muted{ color:var(--muted); } .lede{ font-size:19px; line-height:1.55; color:var(--ink-2); } /* mono eyebrow label — used above section headings & as status context */ .eyebrow{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:8px; } .eyebrow::before{ /* the bracket-rivet tick — sibling signature */ content:""; width:6px; height:6px; background:var(--accent); box-shadow:-7px 0 0 -2px var(--accent), 7px 0 0 -2px var(--accent); } /* ---- 4. header / lockup ------------------------------------------------ */ .i26-header{ border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:saturate(1.1) blur(6px); position:sticky; top:0; z-index:20; } .i26-header .bar{ max-width:var(--wide); margin:0 auto; padding:14px var(--pad); display:flex; align-items:center; gap:14px; } .i26-lockup{ display:inline-flex; align-items:center; gap:9px; color:var(--ink); } .i26-lockup:hover{ text-decoration:none; } .i26-mark{ width:22px; height:22px; display:block; color:var(--ink); flex:none; } .i26-wordmark{ font-family:var(--mono); font-weight:700; font-size:16px; letter-spacing:-.02em; } .i26-crumb{ font-family:var(--mono); font-size:14px; color:var(--muted); letter-spacing:-.01em; } .i26-crumb b{ color:var(--ink-2); font-weight:500; } .i26-nav{ margin-left:auto; display:flex; align-items:center; gap:18px; } .i26-nav a{ font-size:14px; color:var(--muted); } .i26-nav a:hover{ color:var(--ink); text-decoration:none; } /* ---- 5. hero ----------------------------------------------------------- */ .i26-main{ flex:1 0 auto; padding-block:54px 72px; } .i26-hero{ } .i26-hero h1{ margin-top:14px; } .i26-hero .lede{ margin-top:16px; max-width:38ch; } .i26-action{ margin-top:30px; } /* swappable module slot */ /* ---- 6. sections ------------------------------------------------------- */ .section{ margin-top:56px; } .section > h2{ display:flex; align-items:baseline; gap:10px; } .section-rule{ border:0; border-top:1px solid var(--line); margin:56px 0 0; } .prose p + p{ margin-top:16px; } .prose{ color:var(--ink-2); } .prose strong{ color:var(--ink); font-weight:600; } /* ---- 6b. article / long-form (blog posts + SEO guides) ----------------- */ .article{ max-width:var(--measure); } .article h2{ font-size:21px; margin:1.8em 0 .5em; } .article h3{ font-size:17px; margin:1.5em 0 .3em; } .article .prose > p, .article .prose li{ line-height:1.65; } .article .prose ul, .article .prose ol{ padding-left:1.3em; margin:1em 0; } .article .prose li{ margin:.35em 0; } .article .prose a{ text-decoration:underline; text-underline-offset:2px; } .article code{ font-family:var(--mono); font-size:.86em; background:var(--accent-soft); padding:1px 6px; border-radius:5px; color:var(--ink); } .article pre{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; overflow-x:auto; font-family:var(--mono); font-size:.85rem; line-height:1.5; } .article pre code{ background:none; padding:0; } .note, .article .note{ border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius); background:var(--surface); padding:2px 18px; margin:1.4em 0; color:var(--ink-2); } .crumb{ font-family:var(--mono); font-size:13px; color:var(--muted); } /* ---- 7. cards ---------------------------------------------------------- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; } .card-grid{ display:grid; gap:14px; } .card-grid.cols-3{ grid-template-columns:repeat(3,1fr); } .card-grid.cols-2{ grid-template-columns:repeat(2,1fr); } /* numbered "how it works" step */ .step .n{ width:26px; height:26px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); font-family:var(--mono); font-size:12px; font-weight:700; display:grid; place-items:center; margin-bottom:14px; } .step h3{ font-family:var(--head); font-size:15px; } .step p{ margin-top:7px; font-size:14px; color:var(--muted); line-height:1.5; } /* ---- 8. buttons -------------------------------------------------------- */ .btn{ font-family:var(--head); font-weight:600; font-size:15px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer; transition:background .12s, border-color .12s, transform .04s; line-height:1; } .btn:hover{ text-decoration:none; } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--accent); color:#fff; } .btn-primary:hover{ background:var(--accent-ink); } .btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--ink-2); } .btn-sm{ padding:8px 14px; font-size:14px; } /* ---- 9. forms ---------------------------------------------------------- */ .field{ display:block; } .field > label, .label{ display:block; font-family:var(--head); font-weight:600; font-size:14px; margin-bottom:7px; color:var(--ink); } .label .opt{ font-family:var(--sans); font-weight:400; color:var(--muted); font-size:13px; } .input, .textarea, select.input{ width:100%; font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px; transition:border-color .12s, box-shadow .12s; } .input::placeholder, .textarea::placeholder{ color:#a7abb2; } .input:focus, .textarea:focus, select.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .textarea{ resize:vertical; min-height:84px; line-height:1.5; } .row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .hint{ font-size:13px; color:var(--muted); margin-top:7px; } .check{ display:inline-flex; align-items:center; gap:9px; font-size:15px; cursor:pointer; } .check input{ width:16px; height:16px; accent-color:var(--accent); } /* email capture row (waitlist) */ .capture{ display:flex; gap:10px; max-width:480px; } .capture .input{ flex:1; } @media (max-width:520px){ .capture{ flex-direction:column; } } /* ---- 10. drop zone (repair archetype) ---------------------------------- */ .dropzone{ border:1.5px dashed var(--line); border-radius:var(--radius); background:var(--surface); padding:46px 24px; text-align:center; transition:border-color .15s, background .15s; } .dropzone:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); } .dropzone .dz-title{ font-family:var(--head); font-weight:600; font-size:18px; } .dropzone .dz-or{ color:var(--muted); font-size:14px; margin:14px 0; } .dropzone .dz-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } /* ---- 11. status chips -------------------------------------------------- */ .chip{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.04em; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); background:var(--surface); } .chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--muted); } .chip-live{ color:var(--accent-ink); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); background:var(--accent-soft); } .chip-live .dot{ background:var(--accent); } .chip-soon{ color:var(--muted); } .chip-soon .dot{ background:#c8a23a; } .chip-paid{ color:var(--ink-2); } /* tag (inside tool mocks) */ .tag{ font-family:var(--mono); font-size:11px; color:var(--muted); background:var(--line-2); border:1px solid var(--line); border-radius:999px; padding:2px 9px; display:inline-block; } /* ---- 12. inline callout (privacy / mechanism) -------------------------- */ .callout{ border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius); background:var(--surface); padding:18px 20px; font-size:15px; line-height:1.55; color:var(--ink-2); } .callout strong{ color:var(--ink); } /* ---- 13. pricing / unlock (optional, omittable) ------------------------ */ .tiers{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .tier{ border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:var(--surface); } .tier.is-paid{ background:color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); border-color:color-mix(in srgb,var(--accent) 22%,var(--line)); } .tier h3{ font-family:var(--head); font-size:17px; } .tier .tier-sub{ color:var(--muted); font-size:14px; margin-top:5px; } .tier ul{ margin:16px 0 0; padding-left:20px; } .tier li{ margin-top:9px; font-size:15px; } .tier .price{ margin-top:16px; font-size:14px; color:var(--ink-2); } .tier .price b{ font-family:var(--mono); color:var(--ink); } /* ---- 14. guides / link list -------------------------------------------- */ .linklist{ margin:14px 0 0; padding:0; list-style:none; } .linklist li{ padding:11px 0; border-top:1px solid var(--line-2); } .linklist li:first-child{ border-top:0; } .linklist a{ display:inline-flex; align-items:center; gap:8px; } .linklist a::before{ content:"→"; color:var(--muted); font-family:var(--mono); } /* ---- 15. footer -------------------------------------------------------- */ .i26-footer{ flex:none; border-top:1px solid var(--line); margin-top:72px; background:color-mix(in srgb, var(--paper) 70%, #f1efe9); } .i26-footer .bar{ max-width:var(--wide); margin:0 auto; padding:26px var(--pad) 40px; display:flex; flex-wrap:wrap; gap:8px 28px; align-items:baseline; } .i26-footer .line{ font-size:14px; color:var(--ink-2); } .i26-footer .line .sep{ color:var(--line); margin:0 6px; } .i26-footer .tag-line{ font-family:var(--mono); font-size:12px; color:var(--muted); width:100%; margin-top:4px; } .i26-footer nav{ margin-left:auto; display:flex; gap:18px; } .i26-footer nav a{ font-size:14px; color:var(--muted); } /* ---- 16. hub directory ------------------------------------------------- */ .hub-head{ padding-block:60px 10px; } .hub-cat{ margin-top:48px; } .hub-cat > .eyebrow{ margin-bottom:16px; } .tool-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } .tool-card{ display:flex; flex-direction:column; gap:10px; min-height:150px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:22px; transition:border-color .12s, transform .06s; } .tool-card:hover{ border-color:var(--accent); text-decoration:none; transform:translateY(-1px); } .tool-card .tc-top{ display:flex; align-items:center; gap:10px; } .tool-card .tc-mark{ width:18px; height:18px; flex:none; } .tool-card h3{ font-family:var(--head); font-size:18px; color:var(--ink); } .tool-card p{ font-size:14.5px; color:var(--muted); line-height:1.5; } .tool-card .tc-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; } .tool-card .tc-go{ font-family:var(--mono); font-size:13px; color:var(--accent-ink); } /* ---- 17. responsive ---------------------------------------------------- */ @media (max-width:760px){ h1{ font-size:30px; } .card-grid.cols-3, .tiers, .tool-grid, .row2{ grid-template-columns:1fr; } .i26-main{ padding-block:38px 48px; } } /* ---- 18. motion safety ------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }