/* ========================================================================== Ohio Homebuyer Plus — guide stylesheet ========================================================================== */ :root { /* Forces the browser to render native controls — select menus, checkboxes, scrollbars, focus rings — in their light styling regardless of the OS appearance setting. Without this the dropdowns stay dark on a dark-mode Mac and clash with the page. */ color-scheme: light; --ink: #10161f; --ink-2: #38445a; --ink-3: #64738d; --line: #e2e7f0; --line-2: #cbd4e4; --bg: #ffffff; --bg-2: #f6f8fc; --bg-3: #eef2f9; /* Ohio's flag uses the national colours by statute: Old Glory Blue and Old Glory Red. Everything else is keyed off those two. */ --brand: #0a3161; /* Old Glory Blue */ --brand-2: #17548f; --brand-ink: #05203f; --accent: #b31942; /* Old Glory Red */ --accent-2: #d02a52; --cream: #fbf7ef; /* the flag's white, warmed slightly */ --buckeye: #6b3f1d; /* buckeye-nut brown */ --buckeye-2: #d9b382; /* the nut's pale eye */ --gold: #b8791a; --green: #10684a; --green-bg: #e8f5ef; --red-bg: #fdecee; --amber-bg: #fdf5e6; --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(16,22,31,.05), 0 8px 24px -12px rgba(16,22,31,.18); --shadow-lg: 0 2px 4px rgba(16,22,31,.06), 0 24px 48px -20px rgba(16,22,31,.28); --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --maxw: 1180px; } /* The page is light, always. The dark palette below is kept but is opt-in only — it activates solely when is set by hand, never from the operating system's appearance setting. */ :root[data-theme="dark"] { color-scheme: dark; --ink: #eef2f8; --ink-2: #b3bed2; --ink-3: #8592ab; --line: #26303f; --line-2: #37455a; --bg: #0d1219; --bg-2: #131a24; --bg-3: #182130; --brand: #7fb4e6; --brand-2: #a5cdf5; --brand-ink:#cfe4fa; --accent: #ff738f; --accent-2: #ff8fa5; --cream: #1b2431; --buckeye: #c08a55; --buckeye-2:#f0d4ab; --gold: #e2a94a; --green: #58d3a4; --green-bg: #10281f; --red-bg: #2a1418; --amber-bg: #2a2113; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7); --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.85); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.015em; } p { margin: 0 0 1em; } a { color: var(--brand-2); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--accent); } strong { font-weight: 650; } abbr { text-decoration: none; border-bottom: 1px dotted var(--ink-3); } hr { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; } .wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--brand); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; } .skip:focus { left: 0; } /* Off-screen holder for the definitions. */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ------------------------------------------------------- Ohio furniture -- */ /* The state outline, used at brand size and as a hero watermark. */ .brand-mark svg { display: block; width: 26px; height: 28px; fill: var(--brand); } .brand:hover .brand-mark svg { fill: var(--accent); } /* Sits in the footer's open right-hand space, never behind running text. */ .footer-watermark { position: absolute; right: 5%; top: 50%; transform: translateY(-50%) rotate(-7deg); width: min(24vw, 250px); height: auto; fill: var(--brand); opacity: .09; pointer-events: none; } :root[data-theme="dark"] .footer-watermark { opacity: .13; } @media (max-width: 900px) { .footer-watermark { display: none; } } /* The Ohio burgee — the only non-rectangular US state flag. */ .eyebrow-flag svg, .burgee { display: block; } .eyebrow-flag { display: inline-block; width: 26px; flex-shrink: 0; margin-top: -1px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.22)); } .eyebrow-flag svg { width: 100%; height: auto; } .burgee { width: 58px; height: auto; flex-shrink: 0; filter: drop-shadow(0 1px 3px rgba(0,0,0,.25)); } /* The flag's white ring around a red disc, reused as a small marker. */ .disc { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--cream), 0 0 0 4px var(--line-2); vertical-align: 1px; margin-right: .45rem; } /* ---------------------------------------------------------------- topbar -- */ .topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); } /* Flag-ribbon rule: red, cream, blue. */ .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, var(--accent) 0 34%, var(--cream) 34% 46%, var(--brand) 46% 100%); } .topbar-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 66px; } .brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); margin-right: auto; } .brand-mark { line-height: 0; } .brand-text { display: flex; flex-direction: column; font-size: 1.02rem; font-weight: 550; letter-spacing: -.02em; } .brand-text strong { color: var(--brand-2); font-weight: 800; } .brand-text small { font-size: .68rem; font-weight: 500; color: var(--ink-3); letter-spacing: .02em; text-transform: uppercase; } .nav { display: flex; align-items: center; gap: .35rem; } .nav a { padding: .45rem .7rem; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 550; color: var(--ink-2); text-decoration: none; } .nav a:hover { background: var(--bg-3); color: var(--ink); } .nav .nav-cta { background: var(--brand); color: #fff; margin-left: .4rem; } :root[data-theme="dark"] .nav .nav-cta { color: #0d1219; } .nav .nav-cta:hover { background: var(--brand-2); color: #fff; } :root[data-theme="dark"] .nav .nav-cta:hover { color: #0d1219; } .nav-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; transition: .2s; } .mobile-nav { display: none; flex-direction: column; padding: .5rem 0 1rem; border-top: 1px solid var(--line); } .mobile-nav a { padding: .7rem 1.25rem; color: var(--ink-2); text-decoration: none; font-weight: 550; } .mobile-nav a:hover { background: var(--bg-3); } @media (max-width: 900px) { .nav { display: none; } .nav-toggle { display: block; } .mobile-nav:not([hidden]) { display: flex; } } /* ------------------------------------------------------------------ hero -- */ .hero { position: relative; overflow: hidden; background: radial-gradient(1100px 480px at 12% -8%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 62%), radial-gradient(800px 420px at 92% 4%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%), var(--bg-2); border-bottom: 1px solid var(--line); padding: 4.5rem 0 4rem; } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.85fr); gap: 3.5rem; align-items: start; } @media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; } .hero { padding: 3rem 0; } } .eyebrow { display: flex; align-items: flex-start; gap: .55rem; font-size: .78rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-2); margin-bottom: 1rem; } .hero h1 { font-family: var(--serif); font-size: clamp(2.1rem, 4.6vw, 3.5rem); letter-spacing: -.025em; line-height: 1.08; margin-bottom: 1.1rem; font-weight: 700; } .hero h1 em { font-style: italic; color: var(--brand-2); } .lede { font-size: 1.13rem; color: var(--ink-2); max-width: 58ch; } .lede strong { color: var(--ink); } .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 1.25rem; } .hero-note { font-size: .84rem; color: var(--ink-3); max-width: 56ch; margin: 0; } .btn { display: inline-flex; align-items: center; gap: .45rem; padding: .72rem 1.3rem; border-radius: 999px; font-size: .95rem; font-weight: 600; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .12s ease, background .15s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow); } .btn-primary:hover { background: var(--brand-ink); color: #fff; } :root[data-theme="dark"] .btn-primary { background: var(--brand); color: #0d1219; } :root[data-theme="dark"] .btn-primary:hover { background: var(--brand-2); color: #0d1219; } .btn-ghost { border-color: var(--line-2); color: var(--ink); background: var(--bg); } .btn-ghost:hover { border-color: var(--brand-2); color: var(--brand-2); } .btn-small { padding: .45rem .9rem; font-size: .84rem; border-color: var(--line-2); color: var(--ink-2); background: var(--bg); } .btn-small:hover { border-color: var(--brand-2); color: var(--brand-2); } .hero-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.7rem; box-shadow: var(--shadow-lg); } .hero-card h2 { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.1rem; font-weight: 650; } .glance { margin: 0; display: grid; gap: 1rem; } .glance div { display: flex; flex-direction: column-reverse; gap: .1rem; } .glance dt { font-size: .82rem; color: var(--ink-3); margin: 0; } .glance dd { margin: 0; font-weight: 600; } .glance .big { font-family: var(--serif); font-size: 1.95rem; line-height: 1.05; color: var(--brand-2); letter-spacing: -.02em; } /* The APY range is a long string, so it gets its own tighter sizing. */ .glance .range { font-size: 1.72rem; white-space: nowrap; letter-spacing: -.03em; } .glance-note { margin: .55rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-3); } .glance-tight { gap: .6rem; } .glance-tight div { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 1rem; } .glance-tight dt { font-size: .87rem; color: var(--ink-2); } .glance-tight dd { font-size: .87rem; text-align: right; font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------------- bands -- */ .band { padding: 4.25rem 0; border-bottom: 1px solid var(--line); } .band-alt { background: var(--bg-2); } @media (max-width: 700px) { .band { padding: 3rem 0; } } .section-title { font-family: var(--serif); font-size: clamp(1.7rem, 3.2vw, 2.35rem); letter-spacing: -.02em; margin-bottom: 1.5rem; } /* Flag ribbon: red / cream / blue, echoing the rule under the header. */ .section-title::after { content: ""; display: block; width: 66px; height: 4px; border-radius: 2px; margin-top: .7rem; background: linear-gradient(90deg, var(--accent) 0 36%, var(--cream) 36% 48%, var(--brand) 48% 100%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); } .section-intro { max-width: 72ch; color: var(--ink-2); } .sub { font-size: 1.02rem; margin-top: 1.5rem; margin-bottom: .6rem; color: var(--ink); } .prose-wide { max-width: 78ch; } .fineprint { font-size: .85rem; color: var(--ink-3); } /* --------------------------------------------------------------- callouts -- */ .callout { border-left: 3px solid var(--brand-2); background: var(--bg-3); padding: 1rem 1.25rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .95rem; margin: 1.75rem 0; } .callout-warn { border-left-color: var(--gold); background: var(--amber-bg); } .callout-info { border-left-color: var(--brand-2); } .alert { background: var(--amber-bg); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); border-radius: var(--radius-sm); padding: .95rem 1.2rem; font-size: .92rem; color: var(--ink-2); margin: 1.5rem 0; } .alert strong { color: var(--ink); } /* ------------------------------------------------------------- two-column -- */ .two-up, .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } @media (max-width: 820px) { .two-up, .two-col { grid-template-columns: 1fr; gap: 1.5rem; } } .feature { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); } .band-alt .feature { background: var(--bg); } /* Flag-coloured discs rather than emoji, which fall back to tofu on some systems. */ .feature-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: var(--cream); font-size: 1.4rem; font-weight: 700; line-height: 1; margin-bottom: .9rem; box-shadow: var(--shadow); } .two-up .feature:nth-child(2) .feature-icon { background: var(--accent); } .feature h3 { font-size: 1.08rem; } .feature p { margin: 0; color: var(--ink-2); font-size: .95rem; } /* ----------------------------------------------------------------- steps -- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; counter-reset: s; } .steps-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 980px) { .steps, .steps-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .steps, .steps-3 { grid-template-columns: 1fr; } } .steps li { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.35rem 1.35rem; box-shadow: var(--shadow); } .step-n { position: absolute; top: -14px; left: 1.35rem; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .88rem; font-weight: 700; box-shadow: var(--shadow); } :root[data-theme="dark"] .step-n { color: #0d1219; } .steps h3 { font-size: 1rem; margin-top: .35rem; } .steps p { font-size: .92rem; color: var(--ink-2); margin-bottom: .75rem; } .steps .btn-small { margin-top: .25rem; } /* ------------------------------------------------------------------ lists -- */ .check, .cross { list-style: none; margin: 0 0 1rem; padding: 0; } .check li, .cross li { position: relative; padding-left: 1.9rem; margin-bottom: .6rem; font-size: .95rem; color: var(--ink-2); } .check li strong, .cross li strong { color: var(--ink); } .check li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--green); font-weight: 800; font-size: 1rem; } .cross li::before { content: "—"; position: absolute; left: .15rem; top: -1px; color: var(--ink-3); font-weight: 800; } .links { list-style: none; margin: 0 0 1rem; padding: 0; } .links li { padding: .55rem 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .1rem; } .links li:last-child { border-bottom: 0; } .links li > a { font-weight: 600; font-size: .95rem; } .links li > span { font-size: .82rem; color: var(--ink-3); } /* ------------------------------------------------------------------ cards -- */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1.1rem; } .card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--shadow); } .card h3 { font-size: 1rem; margin-bottom: .45rem; } .card p { margin: 0; font-size: .91rem; color: var(--ink-2); } .card-flag { border-left: 3px solid var(--gold); } /* ----------------------------------------------------------------- panels -- */ .panel { border-radius: var(--radius); padding: 1.4rem 1.5rem; border: 1px solid var(--line); background: var(--bg); } .panel h3 { font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; } .panel h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; } .panel ul { margin: 0; padding-left: 1.15rem; } .panel li { margin-bottom: .5rem; font-size: .94rem; color: var(--ink-2); } .panel li strong { color: var(--ink); } .panel-yes { background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 28%, transparent); } .panel-yes h3::before { background: var(--green); } .panel-no { background: var(--red-bg); border-color: color-mix(in srgb, var(--accent) 28%, transparent); } .panel-no h3::before { background: var(--accent); } /* ---------------------------------------------------------------- numbers -- */ .numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin: 1.75rem 0; } .number { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; text-align: center; box-shadow: var(--shadow); } .number .n { display: block; font-family: var(--serif); font-size: 2.1rem; font-weight: 700; color: var(--brand-2); letter-spacing: -.02em; line-height: 1.1; } /* Alternate blue / red across the tax-deduction figures. */ .number:nth-child(2) .n { color: var(--accent); } .number { border-top: 3px solid var(--brand-2); } .number:nth-child(2) { border-top-color: var(--accent); } .number .l { display: block; font-size: .83rem; color: var(--ink-3); margin-top: .3rem; } /* --------------------------------------------------------------- controls -- */ .controls { display: grid; grid-template-columns: minmax(150px,.8fr) minmax(200px,1fr) minmax(160px,1fr) minmax(150px,.8fr) auto auto; gap: 1rem 1.25rem; align-items: start; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem; margin: 1.5rem 0; box-shadow: var(--shadow); position: sticky; top: 74px; z-index: 20; } @media (max-width: 900px) { .controls { grid-template-columns: 1fr; position: static; } } .control { display: flex; flex-direction: column; gap: .35rem; } .control label { font-size: .74rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); } .control input[type="search"], .control select { font: inherit; font-size: .94rem; padding: .55rem .8rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); width: 100%; } .control input[type="search"]:focus, .control select:focus { outline: 2px solid var(--brand-2); outline-offset: 1px; border-color: var(--brand-2); } .control-checks { flex-direction: column; gap: .4rem; } .chk { display: flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .87rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); } .chk input { accent-color: var(--brand-2); width: 15px; height: 15px; } .result-count { margin: 0; font-size: .85rem; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; } .result-count span { font-weight: 700; color: var(--ink); font-size: 1.05rem; } /* ------------------------------------------------------- "near me" input -- */ .control-near label { color: var(--brand-2); } .near-row { display: flex; gap: .4rem; align-items: stretch; } .near-row input[type="text"] { font: inherit; font-size: .94rem; padding: .55rem .7rem; min-width: 0; flex: 1 1 auto; border: 1.5px solid var(--brand-2); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--brand) 5%, var(--bg)); color: var(--ink); } .near-row select { font: inherit; font-size: .9rem; padding: .55rem .4rem; flex: 0 0 auto; width: auto; border: 1.5px solid var(--brand-2); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--brand) 5%, var(--bg)); color: var(--brand-2); font-weight: 600; } .near-row button { flex: 0 0 auto; width: 34px; cursor: pointer; font-size: 1.05rem; line-height: 1; border: 1.5px solid var(--brand-2); border-radius: var(--radius-sm); background: var(--brand); color: var(--cream); } .near-row button:hover { background: var(--brand-2); } .near-row input:focus, .near-row select:focus, .near-row button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .near-status { margin: .35rem 0 0; font-size: .76rem; line-height: 1.4; color: var(--ink-3); min-height: 1em; } .near-status.on { color: var(--brand-2); font-weight: 600; } .near-status.warn { color: var(--accent); font-weight: 600; } /* Nearest-branch chip on each row. */ .m-near::before { content: "⌂"; } .m-near.hit { color: var(--brand-2); font-weight: 650; } .m-near.hit::before { color: var(--brand-2); } .m-near.unknown { color: var(--ink-3); font-style: italic; } /* The balance selector drives the whole table, so give it flag-blue emphasis. */ .control-balance label { color: var(--brand-2); } .control-balance select { border-color: var(--brand-2); border-width: 1.5px; font-weight: 600; color: var(--brand-2); background: color-mix(in srgb, var(--brand) 5%, var(--bg)); } /* ------------------------------------------------------ balance summary -- */ .balance-summary { border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent); background: color-mix(in srgb, var(--brand) 7%, var(--bg)); border-left: 4px solid var(--brand); border-radius: var(--radius); padding: 1.1rem 1.35rem; margin: 0 0 1.25rem; } .bs-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem; } .bs-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); width: 100%; } .bs-rate { font-family: var(--serif); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--brand-2); letter-spacing: -.025em; font-variant-numeric: tabular-nums; } .bs-who { font-size: .95rem; color: var(--ink-2); } .bs-who strong { color: var(--ink); } .bs-note { margin: .7rem 0 0; font-size: .84rem; color: var(--ink-3); line-height: 1.55; } .bs-note strong { color: var(--ink-2); } /* ------------------------------------------------- modelled rate column -- */ .rate-interest { font-size: .85rem; color: var(--green); font-weight: 600; white-space: nowrap; padding: .2rem .5rem; border-radius: var(--radius-sm); background: var(--green-bg); } .rate-how { font-size: .73rem; color: var(--ink-3); line-height: 1.35; } .rate-warn { font-size: .75rem; font-weight: 650; color: var(--accent); background: var(--red-bg); padding: .2rem .5rem; border-radius: var(--radius-sm); } .rate-muted { color: var(--ink-3); } /* The tier row the chosen balance actually lands in. */ .tiers tr.tier-active td { background: color-mix(in srgb, var(--brand) 11%, transparent); font-weight: 650; color: var(--ink); } .tiers tr.tier-active td:first-child { box-shadow: inset 3px 0 0 var(--brand-2); padding-left: .5rem; } /* -------------------------------------------------------------- institutions */ .fi-list { display: grid; gap: .9rem; } .fi { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.35rem; box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0,1fr) 232px; gap: 1.25rem 1.6rem; align-items: start; } @media (max-width: 780px) { .fi { grid-template-columns: 1fr; gap: 1rem; } } .fi-closed { opacity: .72; } .fi-top { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .fi-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem .7rem; margin-bottom: .5rem; } .fi-name { font-size: 1.13rem; font-weight: 680; letter-spacing: -.015em; margin: 0; } .fi-name a { color: var(--ink); text-decoration: none; } .fi-name a:hover { color: var(--brand-2); text-decoration: underline; } .badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; } .badge-closed { background: var(--red-bg); color: var(--accent); } .badge-top { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .badge-perk { background: var(--green-bg); color: var(--green); } .badge-flat { background: var(--bg-3); color: var(--ink-3); } .fi-meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .87rem; color: var(--ink-3); margin-bottom: .65rem; } .fi-meta a { color: var(--ink-2); text-decoration: none; } .fi-meta a:hover { color: var(--brand-2); text-decoration: underline; } .fi-meta span { display: inline-flex; align-items: center; gap: .35rem; } /* Glyph markers drawn in CSS rather than emoji, which fall back to tofu on systems without a colour emoji font. */ .fi-meta span::before { font-size: .82rem; font-weight: 700; color: var(--ink-3); display: inline-block; width: 1em; text-align: center; } .m-phone::before { content: "☏"; font-size: .95rem; } .m-mail::before { content: "@"; } .m-min::before { content: "$"; } .perks { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; } .perks li { font-size: .9rem; color: var(--green); font-weight: 600; display: flex; align-items: baseline; gap: .5rem; } /* A buckeye nut, drawn as a gradient: brown shell, pale eye. */ .perks li::before { content: ""; width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; align-self: center; background: radial-gradient(circle at 63% 62%, var(--buckeye-2) 0 27%, var(--buckeye) 28% 100%); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); } .fi-note { font-size: .85rem; color: var(--ink-3); margin: 0; line-height: 1.5; } .fi-note.warn { color: var(--gold); } .tiers { width: 100%; border-collapse: collapse; margin: .6rem 0 .7rem; font-size: .85rem; } .tiers th { text-align: left; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 650; padding: 0 .7rem .3rem 0; border-bottom: 1px solid var(--line); } .tiers td { padding: .34rem .7rem .34rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; } .tiers tr:last-child td { border-bottom: 0; } .tiers td:last-child { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); } details.tier-wrap { margin: .5rem 0 .2rem; } details.tier-wrap > summary { cursor: pointer; font-size: .85rem; font-weight: 620; color: var(--brand-2); list-style: none; display: inline-flex; align-items: center; gap: .35rem; padding: .15rem 0; } details.tier-wrap > summary::-webkit-details-marker { display: none; } details.tier-wrap > summary::after { content: "▾"; font-size: .7rem; transition: transform .15s; } details.tier-wrap[open] > summary::after { transform: rotate(180deg); } .fi-rate { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; padding-left: 1.25rem; border-left: 1px solid var(--line); } @media (max-width: 780px) { .fi-rate { text-align: left; align-items: flex-start; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: .9rem; } } .rate-num { font-family: var(--serif); font-size: 2.3rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--brand-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .rate-num.none { font-size: 1.05rem; font-family: var(--sans); font-weight: 600; color: var(--ink-3); letter-spacing: 0; } .rate-label { font-size: .8rem; color: var(--ink-3); line-height: 1.35; } .rate-asof { font-size: .74rem; color: var(--ink-3); } .fi-rate .btn { width: 100%; justify-content: center; } @media (max-width: 780px) { .fi-rate .btn { width: auto; } } .empty { text-align: center; padding: 2.5rem 1rem; color: var(--ink-3); } .linkbtn { background: none; border: 0; color: var(--brand-2); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; } /* -------------------------------------------------------------------- faq -- */ .faq { display: grid; gap: .6rem; max-width: 82ch; } .faq details { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 1.2rem; box-shadow: var(--shadow); } .faq summary { cursor: pointer; padding: 1rem 0; font-weight: 620; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 1.35rem; font-weight: 400; color: var(--brand-2); line-height: 1; flex-shrink: 0; } .faq details[open] summary::after { content: "–"; } .faq details[open] summary { border-bottom: 1px solid var(--line); } .faq details p { padding: .9rem 0 .3rem; margin: 0; color: var(--ink-2); font-size: .95rem; } .contact-strip { margin-top: 2rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); background: var(--bg-3); font-size: .93rem; text-align: center; } /* ----------------------------------------------------------------- footer -- */ .footer { position: relative; overflow: hidden; background: var(--bg-2); padding: 2.75rem 0; border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--brand) 0 54%, var(--cream) 54% 66%, var(--accent) 66% 100%) 1; } .footer-inner { position: relative; z-index: 1; } .footer-inner { max-width: 76ch; } .footer-flag { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); } .footer-flag span { font-size: .92rem; color: var(--ink-2); } .footer-flag strong { color: var(--ink); } @media (max-width: 560px) { .footer-flag { flex-direction: column; align-items: flex-start; gap: .75rem; } } .footer p { font-size: .9rem; color: var(--ink-2); } .footer .fineprint { font-size: .82rem; } @media print { .topbar, .controls, .hero-actions, .nav-toggle, .fi-rate .btn { display: none !important; } .fi, .card, .faq details { break-inside: avoid; box-shadow: none; } .faq details { } body { font-size: 11pt; } }