/* ============================================================ Yardly — public site design system: "Meridian" ------------------------------------------------------------ Loaded only by the marketing pages (index.html, funkciok.html, funkcio-*.html), always AFTER styles.css — so everything here may safely override the app's shared component styles without touching the logged-in product. Direction: cool near-white ground, deep navy acts, one teal brand colour. Structured corporate grid, large display type, photography in full-bleed bands, cards that differ by role rather than repeating one rounded box. ============================================================ */ .mkt{ /* ---------- ground & ink ---------- */ --ground:#F8FAFC; --ground-2:#EEF2F6; --card:#FFFFFF; --ink:#0A1A2B; --ink-2:#12293F; --deep:#123A5C; --deep-2:#0D2B45; /* ---------- brand ---------- One teal carries the whole brand, because it is legible as both a surface and as text: 6.1:1 on white, 5.5:1 on the grey ground, 5.3:1 on the tint — so eyebrows, links, icons and button fills can all share it instead of needing the three-way split a saturated warm accent forced. On the dark acts the ground flips and --brand-light takes over (9.9:1 on --ink). */ --brand:#0E6E66; --brand-deep:#0B554F; --brand-light:#5FD4C4; --tint:#E4F2EF; /* ---------- semantic status (used by the UI mocks) ---------- Deliberately outside the brand hue, so "expiring" never reads as "brand". */ --st-crit:#D92D20; --st-crit-bg:#FEF3F2; --st-crit-tx:#B42318; --st-warn:#DC6803; --st-warn-bg:#FFFAEB; --st-warn-tx:#B54708; --st-ok:#079455; --st-ok-bg:#ECFDF3; --st-ok-tx:#067647; /* ---------- text ---------- */ --tx:#0A1A2B; --tx-soft:#42546B; --tx-mute:#5B6B7F; --on-ink:#F2F5F8; --on-ink-soft:#A8B6C6; /* ---------- lines ---------- */ --hair:rgba(10,26,43,.12); --hair-strong:rgba(10,26,43,.24); --hair-on-ink:rgba(242,245,248,.16); --shell:1240px; --gutter:clamp(20px,5vw,64px); --font-display:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif; --font-body:'Instrument Sans','Inter',system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace; --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1); } /* ============================================================ Base ============================================================ */ body.mkt{background:var(--ground);color:var(--tx);font-family:var(--font-body); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;} .mkt *,.mkt *::before,.mkt *::after{box-sizing:border-box;} .mkt img{max-width:100%;display:block;} .mkt .wrap{width:100%;max-width:var(--shell);margin:0 auto;padding-inline:var(--gutter);} .mkt h1,.mkt h2,.mkt h3,.mkt h4{font-family:var(--font-display);font-weight:700; letter-spacing:-0.035em;line-height:1.0;color:inherit;text-wrap:balance;} /* Display scale — the page's whole personality lives here. */ /* Sized against the hero's ~half-width column, not the viewport — at 8vw the Hungarian compounds ("határidő", "csúszhat") each claimed their own line. */ .mkt .d1{font-size:clamp(42px,5.6vw,84px);line-height:.94;letter-spacing:-0.042em;font-weight:800;} .mkt .d2{font-size:clamp(32px,4.8vw,64px);line-height:1.02;letter-spacing:-0.035em;} .mkt .d3{font-size:clamp(23px,2.4vw,32px);line-height:1.12;letter-spacing:-0.025em;} .mkt .lead{font-size:clamp(17px,1.5vw,20px);line-height:1.62;color:var(--tx-soft);max-width:56ch;} .mkt .eyebrow{font-family:var(--font-mono);font-size:11.5px;font-weight:500;text-transform:uppercase; letter-spacing:.2em;color:var(--brand);display:inline-flex;align-items:center;gap:9px;} .mkt .eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.55;} /* Brand-marked words inside a display heading. */ .mkt .mark{color:var(--brand);} .mkt .quiet{color:var(--tx-mute);} /* ============================================================ Acts — full-bleed bands. Ground / ink / deep alternate. ============================================================ */ .mkt .act{position:relative;padding-block:clamp(88px,11vw,168px);} .mkt .act-ground2{background:var(--ground-2);} .mkt .act-ink{background:var(--ink);color:var(--on-ink);} .mkt .act-ink h1,.mkt .act-ink h2,.mkt .act-ink h3{color:var(--on-ink);} .mkt .act-ink .lead{color:var(--on-ink-soft);} .mkt .act-deep{background:var(--deep);color:var(--on-ink);} .mkt .act-deep h2,.mkt .act-deep h3{color:var(--on-ink);} .mkt .act-deep .lead{color:rgba(242,245,248,.76);} /* On the dark acts the ground flips, so the light teal is the readable one (9.9:1) and --brand would sink into the background. */ .mkt .act-ink .eyebrow{color:var(--brand-light);} .mkt .act-deep .eyebrow{color:var(--brand-light);} /* Section head: eyebrow + heading, left-aligned by default (not centered). The measure is set per child, not on the flex column — a max-width on the column would clamp the paragraph to the heading's much tighter measure. */ .mkt .act-head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;} .mkt .act-head h2{max-width:15ch;} .mkt .act-head.wide h2{max-width:22ch;} .mkt .act-head .lead{margin-top:2px;max-width:54ch;} /* ============================================================ Buttons — override the app's shared .btn for the public site. Square-cornered and solid, not the app's pill. ============================================================ */ .mkt .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; height:54px;padding:0 28px;border-radius:4px;border:1px solid transparent; font-family:var(--font-body);font-size:16px;font-weight:600;letter-spacing:-0.01em; cursor:pointer;white-space:nowrap;position:relative;overflow:hidden; transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);} .mkt .btn-sm{height:44px;padding:0 20px;font-size:15px;} /* White on --brand measures 6.1:1, so the primary button needs no special casing the way the previous warm accent did; hover simply deepens. */ .mkt .btn-primary{background:var(--brand);color:#fff;box-shadow:0 1px 0 rgba(10,26,43,.06);} .mkt .btn-primary:hover{background:var(--brand-deep);transform:translateY(-2px);} .mkt .btn-secondary,.mkt .btn-ghost{background:transparent;color:var(--tx);border-color:var(--hair-strong);} .mkt .btn-secondary:hover,.mkt .btn-ghost:hover{border-color:var(--ink);background:rgba(10,26,43,.04);transform:translateY(-2px);} .mkt .act-ink .btn-secondary,.mkt .act-deep .btn-secondary{color:var(--on-ink);border-color:var(--hair-on-ink);} .mkt .act-ink .btn-secondary:hover,.mkt .act-deep .btn-secondary:hover{background:rgba(242,245,248,.09);border-color:var(--on-ink);} .mkt .btn .btn-arrow,.mkt .mega-footer .btn-arrow{display:inline-block;transition:transform .35s var(--ease);} .mkt .btn:hover .btn-arrow,.mkt .mega-footer:hover .btn-arrow{transform:translateX(4px);} .mkt .btn-block{width:100%;} .mkt .cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;} /* Text link with a rule that grows on hover. */ .mkt .tlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--brand); position:relative;padding-bottom:2px;} .mkt .tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%; background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);} .mkt .tlink:hover::after{transform:scaleX(1);transform-origin:left;} /* ============================================================ Nav — floating, becomes a solid rail once scrolled. Class names come from marketing-nav.js; do not rename. ============================================================ */ /* The scrolled bar's surface belongs on