/* Ykköslaina — static rebuild Design: quiet Nordic-editorial identity for a Finnish loan-comparison journal. Deep forest ink on warm birch paper, one gold accent reserved for the article's key figure, Fraunces for headlines paired with Public Sans for reading text and UI. NOTE: fonts are loaded via tags in each page's (with preconnect) rather than @import here, since @import is render-blocking. */ :root { --paper: #F5F1E7; --paper-raised: #FBF9F4; --ink: #16231F; --ink-soft: #2C3B35; --muted: #5B6862; --line: #DAD2BC; --line-soft: #E7E1D0; --forest: #2E5A48; --forest-deep: #1F4436; --gold: #A9812F; --gold-soft: #F1E6C8; --max: 44rem; --wide: 74rem; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Public Sans', system-ui, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, .serif { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--ink); line-height: 1.15; margin: 0; } a { color: var(--forest-deep); text-decoration-color: var(--line); text-underline-offset: 3px; } a:hover { color: var(--gold); } img { max-width: 100%; display: block; } /* ---------- header ---------- */ .site-header { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 10; } .site-header .wrap { max-width: var(--wide); margin: 0 auto; padding: 1.1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .wordmark { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.35rem; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; } .wordmark span { color: var(--gold); } .site-nav { display: flex; align-items: center; gap: 1.75rem; font-size: 0.95rem; } .site-nav a { color: var(--ink-soft); text-decoration: none; } .site-nav a:hover { color: var(--forest-deep); } .site-nav .cta { background: var(--forest); color: #fff !important; padding: 0.5rem 1rem; border-radius: 3px; font-weight: 600; } .site-nav .cta:hover { background: var(--forest-deep); } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--line); margin-top: 5rem; padding: 3rem 1.5rem 2.5rem; } .site-footer .wrap { max-width: var(--wide); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; } .site-footer .about { max-width: 26rem; } .site-footer .about p { color: var(--muted); font-size: 0.92rem; } .site-footer nav { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.92rem; } .site-footer nav a { color: var(--ink-soft); text-decoration: none; } .site-footer nav a:hover { color: var(--forest-deep); } .site-footer .legal { max-width: var(--wide); margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 0.82rem; } /* ---------- homepage ---------- */ .hero { max-width: var(--wide); margin: 0 auto; padding: 3rem 1.5rem 2.5rem; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; } .hero .eyebrow { color: var(--forest); font-weight: 600; font-size: 0.85rem; margin-bottom: 0.9rem; } .hero h1 { font-size: clamp(2.1rem, 4vw, 3rem); margin-bottom: 1rem; } .hero .dek { color: var(--muted); font-size: 1.1rem; max-width: 38rem; margin-bottom: 1.4rem; } .hero .meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.6rem; } .hero .figure { display: inline-flex; flex-direction: column; border-left: 3px solid var(--gold); padding-left: 1rem; margin-bottom: 1.8rem; } .hero .figure .num { font-family: 'Fraunces', serif; font-size: 2.1rem; font-weight: 600; color: var(--gold); line-height: 1; } .hero .figure .lab { color: var(--muted); font-size: 0.88rem; margin-top: 0.25rem; max-width: 16rem; } .hero .read-link { font-weight: 600; color: var(--forest-deep); text-decoration: none; } .hero .read-link:hover { color: var(--gold); } .hero .art { position: relative; } .hero .art img { border-radius: 2px; } .section-head { max-width: var(--wide); margin: 0 auto; padding: 2.5rem 1.5rem 1rem; display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); } .section-head h2 { font-size: 1.5rem; } .section-head .count { color: var(--muted); font-size: 0.88rem; } /* Loan-search widget slot: full-width sections (index) get the standard content max-width; nested inside .article-hero (hakemus page) it just inherits the parent's already-constrained width. */ .widget-slot { max-width: var(--wide); margin: 0.5rem auto 2rem; padding: 0 1.5rem; } .article-hero .widget-slot { max-width: none; margin: 1.2rem 0 0; padding: 0; } .article-list { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; } .article-row { display: grid; grid-template-columns: 1fr auto; gap: 1.75rem; align-items: baseline; padding: 1.6rem 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; } .article-row:last-child { border-bottom: none; } .article-row .body h3 { font-size: 1.25rem; font-weight: 500; color: var(--ink); margin-bottom: 0.4rem; } .article-row .body p { color: var(--muted); font-size: 0.95rem; margin: 0; max-width: 40rem; } .article-row .go { color: var(--forest-deep); font-size: 0.85rem; font-weight: 600; white-space: nowrap; align-self: center; } .article-row:hover .body h3 { color: var(--forest-deep); } .article-row:hover .go { color: var(--gold); } /* ---------- article page ---------- */ .article-hero { max-width: var(--wide); margin: 0 auto; padding: 2.5rem 1.5rem 0; } .crumb { color: var(--muted); font-size: 0.85rem; text-decoration: none; } .crumb:hover { color: var(--forest-deep); } .article-hero h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); max-width: 42rem; margin: 1rem 0 1rem; } .article-meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.75rem; } .article-hero .frame img { width: 100%; max-height: 26rem; object-fit: cover; border-radius: 2px; } .article-body-wrap { max-width: var(--wide); margin: 0 auto; padding: 2.5rem 1.5rem 1rem; display: grid; grid-template-columns: 1fr 15rem; gap: 3.5rem; } .article-body { max-width: var(--max); font-size: 1.05rem; } .article-body h2 { font-size: 1.5rem; margin: 2.4rem 0 1rem; padding-top: 0.4rem; border-top: 1px solid var(--line-soft); } .article-body h2:first-child { border-top: none; padding-top: 0; margin-top: 0; } .article-body h3 { font-size: 1.15rem; font-weight: 600; margin: 1.7rem 0 0.7rem; color: var(--forest-deep); } .article-body p { margin: 0 0 1.1rem; } .article-body ul, .article-body ol { margin: 0 0 1.2rem; padding-left: 1.3rem; } .article-body li { margin-bottom: 0.45rem; } .article-body strong { color: var(--ink); } .article-body em { color: var(--forest-deep); font-style: italic; } .article-body blockquote { margin: 1.6rem 0; padding: 0.2rem 0 0.2rem 1.2rem; border-left: 3px solid var(--gold); font-family: 'Fraunces', serif; font-style: italic; font-size: 1.08rem; color: var(--ink-soft); } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.4rem 0 1.8rem; /* faint edge fade as a visual hint that there's more to scroll to */ background: linear-gradient(to right, var(--paper) 0, rgba(245,241,231,0)), linear-gradient(to left, var(--paper) 0, rgba(245,241,231,0)) right; background-size: 20px 100%; background-repeat: no-repeat; background-attachment: local, local; } .article-body table { width: 100%; min-width: max-content; border-collapse: collapse; margin: 0; font-size: 0.92rem; } .article-body th, .article-body td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); white-space: nowrap; } .article-body th { font-family: 'Fraunces', serif; font-weight: 600; color: var(--forest-deep); border-bottom: 2px solid var(--forest); } .takeaways { background: var(--paper-raised); border: 1px solid var(--line); border-left: 3px solid var(--forest); border-radius: 2px; padding: 1.3rem 1.5rem; margin: 0 0 2.2rem; } .takeaways .lab { font-weight: 700; color: var(--forest-deep); font-size: 0.85rem; margin-bottom: 0.7rem; } .takeaways ul { margin: 0; padding-left: 1.2rem; } .takeaways li { margin-bottom: 0.5rem; color: var(--ink-soft); font-size: 0.97rem; } .takeaways li:last-child { margin-bottom: 0; } .faq-block { margin-top: 0.5rem; } .faq-block h2 { margin-top: 2.4rem; } .faq-block details { border-bottom: 1px solid var(--line-soft); padding: 0.95rem 0; } .faq-block summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 1rem; font-size: 1.02rem; } .faq-block summary::-webkit-details-marker { display: none; } .faq-block summary::after { content: '+'; color: var(--gold); font-family: 'Fraunces', serif; font-size: 1.3rem; line-height: 1; flex-shrink: 0; } .faq-block details[open] summary::after { content: '\2212'; } .faq-block details p { margin: 0.8rem 0 0; color: var(--muted); } /* sidebar */ .side { position: sticky; top: 6rem; align-self: start; } .side .card { border: 1px solid var(--line); border-radius: 2px; padding: 1.4rem; background: var(--paper-raised); margin-bottom: 1.5rem; } .side .card .num { font-family: 'Fraunces', serif; font-size: 2.4rem; font-weight: 600; color: var(--gold); line-height: 1; } .side .card .lab { color: var(--muted); font-size: 0.87rem; margin-top: 0.5rem; } .side .apply { display: block; text-align: center; background: var(--forest); color: #fff; text-decoration: none; font-weight: 600; padding: 0.85rem 1rem; border-radius: 3px; font-size: 0.95rem; } .side .apply:hover { background: var(--forest-deep); } .side .note { font-size: 0.8rem; color: var(--muted); margin-top: 0.6rem; text-align: center; } .more-reading { max-width: var(--max); margin: 3rem auto 0; padding-top: 1.75rem; border-top: 1px solid var(--line); } .more-reading .lab { font-size: 0.85rem; font-weight: 700; color: var(--forest-deep); margin-bottom: 0.9rem; } .more-reading a { display: block; text-decoration: none; color: var(--ink); padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); } .more-reading a:hover { color: var(--forest-deep); } /* ---------- responsive ---------- */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-top: 2rem; } .hero .art { order: -1; } .article-body-wrap { grid-template-columns: 1fr; } .side { position: static; display: flex; gap: 1rem; flex-wrap: wrap; } .side .card { flex: 1 1 12rem; margin-bottom: 0; } } @media (max-width: 640px) { .site-header .wrap { flex-wrap: wrap; row-gap: 0.6rem; } .site-nav { gap: 1rem; font-size: 0.85rem; flex-wrap: wrap; } .site-nav .cta { padding: 0.4rem 0.75rem; } .article-row { grid-template-columns: 1fr; gap: 0.35rem; } .article-row .go { display: none; } .side { flex-direction: column; } }