/* osauer.dev shared styles. Pages set data-accent on to pick their topline and primary button colour; everything else is common. */ :root { --paper: #f7f5ef; --paper-strong: #fffdf7; --paper-deep: #ece7db; --ink: #101827; --ink-soft: #26364d; --muted: #42526a; --line: #d8d2c4; --green: #087f6b; --green-dark: #055f52; --blue: #255fb8; --blue-dark: #1d4c93; --amber: #b45309; --amber-dark: #8f4207; --terminal: #0e1626; --terminal-line: #26364c; --accent: var(--terminal); --accent-dark: var(--terminal); } body[data-accent="green"] { --accent: var(--green); --accent-dark: var(--green-dark); } body[data-accent="blue"] { --accent: var(--blue); --accent-dark: var(--blue-dark); } body[data-accent="amber"] { --accent: var(--amber); --accent-dark: var(--amber-dark); } body[data-accent="ink"] { --accent: var(--terminal); --accent-dark: var(--terminal); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; overflow-wrap: break-word; } a { color: var(--accent-dark); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; } code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--paper-deep); font: 0.92em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } pre { overflow-x: auto; margin: 0; padding: 22px; border: 1px solid var(--terminal-line); border-radius: 8px; background: var(--terminal); color: #f4f7fb; font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } pre code { padding: 0; background: none; font: inherit; } pre .k { color: #f0b26b; } pre .s { color: #a3d9a5; } pre .c { color: #8fa3c2; } pre .t { color: #9ccaff; } pre .n { color: #f5c542; } pre.sample { max-width: 820px; margin: 22px 0 30px; padding: 18px 20px; font-size: 13px; } a.quiet { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--muted); font-weight: 600; text-decoration: none; } a.quiet:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; } .links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; } .contact .links { justify-content: flex-end; } .topline { height: 10px; background: var(--accent); } body[data-accent="home"] .topline { background: linear-gradient(90deg, var(--green), var(--blue)); } .wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; } .site-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0 18px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 25px; font-weight: 800; text-decoration: none; } .site-nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: 15px; font-weight: 650; } .site-nav a { color: var(--muted); text-decoration: none; } .site-nav a:hover { color: var(--ink); } .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; } .hero { padding: 46px 0 40px; } .hero.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); gap: 34px; align-items: start; } .hero.split pre { margin-top: 6px; font-size: 13px; } .eyebrow { margin: 0 0 16px; color: var(--accent-dark); font-size: 13px; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; } h1 { max-width: 840px; margin: 0; font-size: clamp(40px, 6vw, 68px); line-height: 1.02; letter-spacing: 0; } .lead { max-width: 760px; margin: 22px 0 0; color: var(--ink-soft); font-size: clamp(18px, 2vw, 21px); line-height: 1.4; } .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 8px; color: var(--ink); font-weight: 750; text-decoration: none; } .button.primary { background: var(--accent); color: #fff; border-color: var(--accent); } .button.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); } .button svg { width: 18px; height: 18px; } .stack { line-height: 1.55; } .stack a { color: var(--ink); font-weight: 650; text-decoration: none; white-space: nowrap; } .stack a:hover { text-decoration: underline; } .stack .dot { display: inline-block; width: 10px; height: 10px; margin: 0 7px 2px 0; border-radius: 50%; background: var(--muted); vertical-align: middle; } .stack .dot[data-dot="green"] { background: var(--green); } .stack .dot[data-dot="blue"] { background: var(--blue); } .stack .dot[data-dot="amber"] { background: var(--amber); } .stack .dot[data-dot="ink"] { background: var(--terminal); } .panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 34px 0 84px; } .panel { display: flex; flex-direction: column; align-items: flex-start; min-height: 0; padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-strong); } .panel[data-accent="green"] { border-top: 5px solid var(--green); } .panel[data-accent="blue"] { border-top: 5px solid var(--blue); } .panel[data-accent="ink"] { border-top: 5px solid var(--terminal); } .panel[data-accent="amber"] { border-top: 5px solid var(--amber); } .panel .label { margin: 0 0 18px; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .panel h2 { display: flex; align-items: center; gap: 14px; margin: 0; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; letter-spacing: 0; } .panel h2 img { width: 44px; height: 44px; border-radius: 10px; box-shadow: 0 8px 18px rgba(16, 24, 39, 0.14); } .panel h2 img.wordmark { width: auto; height: 46px; border-radius: 0; box-shadow: none; } .hero img.wordmark { display: block; width: auto; height: 60px; margin: 0 0 18px; } .hero img.mark { display: block; width: 64px; height: 64px; margin: 0 0 18px; } .pronounce { max-width: 720px; margin: 16px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; } .pronounce [lang="hu"] { color: var(--ink); font-weight: 650; } .pronounce .ipa { font: 15px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); } .panel p { margin: 18px 0 0; color: var(--ink-soft); font-size: 17px; } .panel h2, .panel p, .panel .points { align-self: stretch; } .points { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; } .points li { position: relative; padding-left: 18px; color: var(--muted); font-size: 15.5px; } .points li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .panel .actions { margin-top: auto; padding-top: 28px; } section.block { padding: 54px 0; border-top: 1px solid var(--line); } section.block h2 { margin: 0 0 18px; font-size: clamp(30px, 4vw, 46px); line-height: 1.06; letter-spacing: 0; } section.block > .wrap > p, .prose { max-width: 780px; color: var(--ink-soft); font-size: 17px; } .prose p { margin: 0 0 14px; } .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; } .card { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-strong); } .card h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.2; } .card p { margin: 0; color: var(--muted); font-size: 16px; } .notes { max-width: 820px; margin: 0; padding-left: 24px; color: var(--ink-soft); font-size: 17px; } .notes li { margin: 8px 0; } .notes li strong { color: var(--ink); } figure.shot { margin: 34px 0 0; padding: 0; } figure.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 18px 48px rgba(16, 24, 39, 0.12); } figure.shot figcaption, figure.diagram figcaption { margin: 14px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; } figure.diagram { margin: 26px 0 0; padding: 0; } figure.diagram img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); } .gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; margin-top: 8px; } .gallery figure.shot { margin-top: 18px; } .gallery figure.wide { grid-column: span 2; } .gallery figure.full { grid-column: span 3; } .gallery figure.phone { grid-row: span 2; display: grid; align-content: start; justify-items: center; } .gallery figure.phone img { width: min(100%, 340px); border-radius: 22px; } .contact { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); gap: 30px; align-items: center; padding: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-strong); } .contact h2 { margin: 0 0 12px; font-size: clamp(26px, 3.4vw, 36px); } .contact p { margin: 0; color: var(--ink-soft); font-size: 17px; } .contact .actions { margin: 0; justify-content: flex-end; } footer.site-footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--muted); font-size: 14px; } @media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .wrap { width: min(100% - 32px, 1120px); } .site-header { align-items: flex-start; flex-direction: column; } .hero { padding-top: 28px; } .hero.split { grid-template-columns: 1fr; } .panels { grid-template-columns: 1fr; padding-bottom: 58px; } .panel { min-height: 0; padding: 22px; } .cards { grid-template-columns: 1fr; } .gallery { grid-template-columns: 1fr; } .gallery figure.wide, .gallery figure.full { grid-column: auto; } .gallery figure.phone { grid-row: auto; } .contact { grid-template-columns: 1fr; padding: 24px; } .contact .actions, .contact .links { justify-content: flex-start; } }