/* ============================================ Unbuilt Lab — Free Module shared styles ============================================ All /free/* pages link this in their . Keep this file self-contained — no Sass, no @import chains. */ :root { --fm-bg: #0a0a0f; --fm-card: #15151c; --fm-card-elev: #1c1c25; --fm-border: #2a2a36; --fm-text: #e6e6ed; --fm-text-soft: #b8b8c8; --fm-text-muted: #8a8a99; --fm-accent: #7c3aed; --fm-accent-soft: #a78bfa; --fm-accent-text: #fff; --fm-good: #10b981; --fm-warn: #f59e0b; --fm-bad: #ef4444; --fm-radius: 12px; --fm-radius-lg: 16px; } .free-page { background: var(--fm-bg); color: var(--fm-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif; margin: 0; line-height: 1.55; } .free-page main { max-width: 920px; margin: 0 auto; padding: 56px 24px 96px; } .free-index { max-width: 980px; } .free-page h1 { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; line-height: 1.15; } .free-page .lede { font-size: 17px; color: var(--fm-text-soft); margin: 0 0 32px; max-width: 700px; } .free-page h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin: 40px 0 14px; } .free-page h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; } /* Default link styling for INLINE links inside copy/prose only. */ .free-page p a, .free-page li a, .free-page .cta-row a, .free-page .seo-context a { color: var(--fm-accent-soft); text-decoration: none; } .free-page p a:hover, .free-page li a:hover, .free-page .cta-row a:hover, .free-page .seo-context a:hover { color: var(--fm-accent); text-decoration: underline; } /* Card / tile anchors are CONTAINERS, not inline links — they must inherit normal text colors so the title/description/CTA inside read correctly. Resetting here so the higher-specificity `.free-page a` rule doesn't bleed purple into card chrome. */ .free-page a.card, .free-page a.section-tile, .free-page a.item-card { color: var(--fm-text); text-decoration: none; } .free-page a.card:hover, .free-page a.section-tile:hover, .free-page a.item-card:hover { color: var(--fm-text); text-decoration: none; } .breadcrumbs { font-size: 13px; color: var(--fm-text-muted); margin-bottom: 14px; } .breadcrumbs a { color: var(--fm-text-muted); } .breadcrumbs span { color: var(--fm-text); } /* ---------- Cards & sections ---------- */ .tool-card, .calc-card, .section-card { background: var(--fm-card); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-lg); padding: 28px; margin-bottom: 24px; } .seo-context { margin-top: 32px; color: var(--fm-text-soft); } .seo-context p { margin: 10px 0; } .seo-context .cta-row { color: var(--fm-text); } .seo-context .cta-link { font-weight: 600; } .muted { color: var(--fm-text-muted); font-size: 13px; } /* ---------- Forms ---------- */ .form-label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--fm-text-soft); } .form-input, .form-textarea { width: 100%; background: #0a0a0f; color: var(--fm-text); border: 1px solid var(--fm-border); border-radius: var(--fm-radius); padding: 12px 14px; font-size: 15px; font-family: inherit; box-sizing: border-box; } .form-input.small { max-width: 140px; } .form-input:focus, .form-textarea:focus { outline: 2px solid var(--fm-accent); outline-offset: 1px; border-color: var(--fm-accent); } .form-textarea { resize: vertical; min-height: 80px; } .form-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin-bottom: 14px; } .action-row { display: flex; align-items: center; gap: 12px; margin-top: 18px; } /* ---------- Buttons ---------- */ .btn { border: 1px solid var(--fm-border); background: var(--fm-card-elev); color: var(--fm-text); padding: 10px 18px; border-radius: var(--fm-radius); font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.05s, background 0.12s, border-color 0.12s; } .btn:hover { background: #25252f; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--fm-accent); color: var(--fm-accent-text); border-color: var(--fm-accent); } .btn-primary:hover { background: var(--fm-accent-soft); border-color: var(--fm-accent-soft); } .btn-secondary { background: #25252f; } .btn-ghost { background: transparent; } .btn-large { padding: 14px 28px; font-size: 16px; } .tool-options { margin-top: 16px; color: var(--fm-text-soft); } .tool-options summary { cursor: pointer; font-weight: 600; } .tool-options summary:hover { color: var(--fm-text); } .checkbox { display: block; margin: 6px 0; cursor: pointer; } /* ---------- Index pages ---------- */ .section-card h2 { margin: 0 0 18px; } .item-list { list-style: none; padding: 0; margin: 0; } .item-list li { padding: 8px 0; color: var(--fm-text-soft); } .item-list li a { color: var(--fm-text); font-weight: 600; } .item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 24px; } .item-card { display: block; background: var(--fm-card); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-lg); padding: 22px; color: var(--fm-text); text-decoration: none; transition: transform 0.08s, border-color 0.12s; } .item-card:hover { transform: translateY(-2px); border-color: var(--fm-accent); text-decoration: none; } .item-card h3 { color: var(--fm-text); margin-bottom: 10px; } .item-card p { color: var(--fm-text-muted); font-size: 14px; margin: 0; } /* ---------- Calculator-specific ---------- */ .calc-input-row { display: grid; grid-template-columns: 1fr 180px; gap: 16px; align-items: center; margin-bottom: 12px; } .calc-input-row label { color: var(--fm-text-soft); font-weight: 500; font-size: 14px; } .calc-input-row input { background: #0a0a0f; color: var(--fm-text); border: 1px solid var(--fm-border); border-radius: var(--fm-radius); padding: 10px 14px; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; } .calc-input-row input:focus { outline: 2px solid var(--fm-accent); border-color: var(--fm-accent); } .calc-result { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--fm-border); } .calc-main { font-size: 13px; color: var(--fm-text-muted); } .calc-main-value { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; color: var(--fm-accent-soft); font-variant-numeric: tabular-nums; } .calc-main-label { font-size: 13px; color: var(--fm-text-muted); margin-top: 4px; } .calc-rows { width: 100%; border-collapse: collapse; margin-top: 24px; } .calc-rows td { padding: 10px 0; border-bottom: 1px solid var(--fm-border); color: var(--fm-text-soft); font-size: 14px; } .calc-rows td:first-child { color: var(--fm-text-muted); } .calc-rows td:last-child { text-align: right; color: var(--fm-text); font-weight: 600; } /* ---------- BMC grid ---------- */ .bmc-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr 1fr 0.6fr; gap: 12px; margin-top: 14px; } .bmc-block { background: #0a0a0f; border: 1px solid var(--fm-border); border-radius: var(--fm-radius); padding: 12px; min-height: 110px; display: flex; flex-direction: column; } .bmc-block h3 { font-size: 12px; color: var(--fm-text-muted); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 8px; } .bmc-block textarea { flex: 1; width: 100%; background: transparent; color: var(--fm-text); border: none; outline: none; resize: none; font-size: 13px; font-family: inherit; box-sizing: border-box; } .bmc-keypartners { grid-column: 1; grid-row: 1 / 3; } .bmc-keyactivities { grid-column: 2; grid-row: 1; } .bmc-keyresources { grid-column: 2; grid-row: 2; } .bmc-resources { grid-column: 2; grid-row: 2; } .bmc-value { grid-column: 3; grid-row: 1 / 3; } .bmc-relationships { grid-column: 4; grid-row: 1; } .bmc-channels { grid-column: 4; grid-row: 2; } .bmc-segments { grid-column: 5; grid-row: 1 / 3; } .bmc-costs { grid-column: 1 / 3; grid-row: 3; } .bmc-revenue { grid-column: 3 / 6; grid-row: 3; } @media (max-width: 780px) { .bmc-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(120px, auto); } .bmc-block { grid-column: 1 !important; grid-row: auto !important; } .calc-input-row { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } } /* ---------- RACI ---------- */ .raci-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0; color: var(--fm-text-soft); font-size: 13px; } .raci-legend strong { background: var(--fm-accent); color: var(--fm-accent-text); padding: 1px 8px; border-radius: 4px; margin-right: 4px; font-weight: 700; } .raci-table-wrap { overflow-x: auto; margin-top: 14px; } .raci-table { width: 100%; border-collapse: collapse; background: #0a0a0f; border-radius: var(--fm-radius); overflow: hidden; } .raci-table th, .raci-table td { border: 1px solid var(--fm-border); padding: 8px 12px; text-align: center; font-size: 13px; } .raci-table th { background: var(--fm-card-elev); color: var(--fm-text-muted); font-weight: 600; } .raci-table .raci-task { text-align: left; color: var(--fm-text); } .raci-table select { width: 56px; background: transparent; color: var(--fm-text); border: 1px solid var(--fm-border); border-radius: 6px; padding: 4px 6px; font-weight: 600; cursor: pointer; } .raci-table .del { background: transparent; border: none; color: var(--fm-text-muted); cursor: pointer; margin-left: 4px; } .raci-table .del:hover { color: var(--fm-bad); } /* ---------- Color extractor ---------- */ .color-preview { margin-top: 16px; } .color-preview img { max-width: 100%; max-height: 280px; border-radius: var(--fm-radius); border: 1px solid var(--fm-border); } .palette-row { display: flex; gap: 12px; flex-wrap: wrap; } .swatch { flex: 1 1 110px; min-height: 90px; border-radius: var(--fm-radius); padding: 14px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; font-size: 12px; } .swatch .hex { font-weight: 800; font-size: 14px; } .swatch .rgb { opacity: 0.9; } /* ---------- Site nav (minimal — only shows when SSI fallback used) ---------- */ .site-nav { background: #0a0a0f; border-bottom: 1px solid var(--fm-border); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; } .site-nav .nav-brand { color: var(--fm-text); font-weight: 700; font-size: 16px; } .site-nav nav { display: flex; gap: 18px; } .site-nav nav a { color: var(--fm-text-soft); font-size: 14px; } /* ============================================ Free root index — "Tools, Templates, Calculators" hero + tiles ============================================ */ .free-hero { text-align: center; margin: 0 auto 44px; max-width: 720px; } .free-eyebrow { display: inline-block; background: rgba(124, 58, 237, 0.16); color: var(--fm-accent-soft); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; } .free-hero h1 { font-size: 44px; line-height: 1.12; margin: 0 0 14px; letter-spacing: -0.025em; } .free-hero .lede { font-size: 18px; } .section-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; } .section-tile { display: flex; flex-direction: column; gap: 16px; background: linear-gradient(180deg, var(--fm-card) 0%, var(--fm-card-elev) 100%); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-lg); padding: 28px; color: var(--fm-text); text-decoration: none; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; position: relative; overflow: hidden; } .section-tile::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--fm-accent), var(--fm-accent-soft)); opacity: 0; transition: opacity 0.18s; } .section-tile:hover { text-decoration: none; transform: translateY(-4px); border-color: var(--fm-accent); box-shadow: 0 14px 40px rgba(124, 58, 237, 0.18); } .section-tile:hover::before { opacity: 1; } .section-tile-icon { font-size: 38px; line-height: 1; } /* section-tile child styles handled in the high-specificity block above so .free-page a doesn't bleed link color into the tile's title/body. */ /* ============================================ Section index — Business Tools/Calculators/Templates ============================================ */ .section-hero { margin: 0 0 36px; text-align: center; } .section-hero-icon { display: inline-block; font-size: 38px; line-height: 1; margin-bottom: 10px; } .section-hero h1 { font-size: 36px; margin: 0 0 8px; } .section-hero .lede { margin-left: auto; margin-right: auto; max-width: 580px; } /* ============================================ Card — used on every section index page ============================================ */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; margin-top: 8px; } .card { display: flex; flex-direction: column; gap: 14px; background: var(--fm-card); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-lg); padding: 24px; color: var(--fm-text); text-decoration: none; position: relative; overflow: hidden; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--fm-accent), var(--fm-accent-soft)); opacity: 0; transition: opacity 0.18s; } .card:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--fm-accent); box-shadow: 0 12px 32px rgba(124, 58, 237, 0.16); } .card:hover::before { opacity: 1; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; } .card-icon { font-size: 32px; line-height: 1; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: rgba(124, 58, 237, 0.12); border-radius: 12px; } .card-badge { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--fm-text-muted); border: 1px solid var(--fm-border); padding: 4px 10px; border-radius: 999px; } /* Children inside the card anchor — high specificity to win against .free-page a inheritance. */ .free-page a.card .card-title, .free-page a.section-tile h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--fm-text); letter-spacing: -0.01em; line-height: 1.3; text-decoration: none; } .free-page a.section-tile h2 { font-size: 22px; margin-bottom: 8px; } .free-page a.card .card-desc, .free-page a.section-tile p { color: var(--fm-text-soft); font-size: 13.5px; line-height: 1.55; margin: 0 0 14px; flex: 1; text-decoration: none; } .free-page a.card .card-desc { margin: 0; } .free-page a.card .card-cta, .free-page a.section-tile .section-tile-cta { color: var(--fm-accent-soft); font-weight: 700; font-size: 13.5px; margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .free-page a.card:hover .card-cta, .free-page a.section-tile:hover .section-tile-cta { color: var(--fm-accent); } .card-arrow { display: inline-block; transition: transform 0.18s ease; } .card:hover .card-cta { color: var(--fm-accent); } .card:hover .card-arrow { transform: translateX(4px); } /* Legacy item-card / item-grid no longer used by new builds; kept for any 3rd-party pages that still reference the older markup. */ /* ============================================ App Store / Google Play CTA block (upsell to mobile) ============================================ */ /* Text wraps around the floated button column on the right so the block uses ALL the available horizontal space — no empty void to the right of a short headline + 2 stacked buttons. */ .app-cta { background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(124, 58, 237, 0.03)); border: 1px solid rgba(124, 58, 237, 0.30); border-radius: var(--fm-radius-lg); padding: 28px 32px; margin-top: 40px; overflow: hidden; /* clear floated children */ } .app-cta-buttons { float: right; display: flex; flex-direction: column; gap: 10px; /* 195 px total slot: 28 left + 139 inner + 28 right */ width: 139px; margin: 4px 28px 14px 28px; flex-shrink: 0; } .app-cta-copy { /* No explicit width — text fills whatever's left of the floated buttons and wraps naturally. */ } .app-cta-copy h3 { margin: 0 0 8px; font-size: 20px; color: var(--fm-text); font-weight: 700; letter-spacing: -0.01em; } .app-cta-copy p { margin: 0; color: var(--fm-text-soft); font-size: 14.5px; line-height: 1.6; } .free-page a.store-btn { display: inline-flex; align-items: center; gap: 8px; width: 100%; /* fill parent (.app-cta-buttons) */ min-width: 0; padding: 9px 10px; background: #0a0a0f; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; color: var(--fm-text); text-decoration: none; transition: transform 0.18s, background 0.18s, border-color 0.18s; box-sizing: border-box; } .free-page a.store-btn svg { width: 20px; height: 20px; } .free-page a.store-btn .store-text small { font-size: 9px; } .free-page a.store-btn .store-text strong { font-size: 12.5px; } .free-page a.store-btn:hover { background: #15151c; border-color: var(--fm-accent); transform: translateY(-2px); color: var(--fm-text); text-decoration: none; } .free-page a.store-btn svg { flex-shrink: 0; color: var(--fm-text); } .free-page a.store-btn .store-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .free-page a.store-btn .store-text small { font-size: 10.5px; color: var(--fm-text-muted); margin-bottom: 2px; text-transform: none; letter-spacing: 0.2px; font-weight: 400; } .free-page a.store-btn .store-text strong { font-size: 15px; font-weight: 700; color: var(--fm-text); letter-spacing: -0.005em; } @media (max-width: 720px) { .app-cta { padding: 24px; } .app-cta-buttons { float: none; /* stack below text on mobile */ flex-direction: row; flex-wrap: wrap; width: 100%; margin: 18px 0 0; } .free-page a.store-btn { min-width: 160px; flex: 1; } } /* ---------- Print styles (BMC, RACI, etc.) ---------- */ @media print { .free-page { background: #fff; color: #111; } .free-page main { padding: 20px; max-width: 100%; } .site-nav, .action-row, .seo-context, .breadcrumbs, .tool-options { display: none !important; } .tool-card, .section-card { background: #fff; border: 1px solid #ccc; box-shadow: none; } .bmc-block, .raci-table { background: #fff; color: #111; border-color: #ccc; } .bmc-block textarea, .raci-table select { color: #111; } }