/* lg6-talonas — press/style.css Rizografinė spauda dviem rašalais, 2px misregistracija. Klasių konvencija: kebab-case be prefiksų (ink-strip, coupon-tear, press-mark ...). Šriftai (Bitter, Work Sans) kraunami per index.html , greta preconnect eilučių — ne per @import (žr. index.html:15-18). */ /* ---------- tokens ---------- */ :root { --paper: #E7D8B4; --ink-blue: #0B57A4; --ink-green: #3AA35C; --overlap: #123A2F; --muted: #6E6353; --font-head: "Bitter", Georgia, serif; --font-body: "Work Sans", "Segoe UI", sans-serif; --fs-small: 0.8125rem; /* 13px */ --fs-body: 1rem; /* 16px */ --fs-lead: 1.3125rem; /* 21px */ --fs-h3: 1.75rem; /* 28px */ --fs-h2: 2.375rem; /* 38px */ --fs-h1: 3.1875rem; /* 51px */ --step: 12px; --max-measure: 42ch; --focus-ring: 3px solid var(--ink-green); } /* ---------- reset ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--overlap); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; overflow-x: hidden; } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--font-head); font-weight: 700; margin: 0 0 var(--step); color: var(--overlap); } h1 { font-size: var(--fs-h1); line-height: 1.15; } h2 { font-size: var(--fs-h2); line-height: 1.15; } h3 { font-size: var(--fs-h3); line-height: 1.2; } p { margin: 0 0 var(--step); max-width: var(--max-measure); } a { color: var(--ink-blue); text-underline-offset: 3px; } ul, ol { margin: 0 0 var(--step); padding-left: 1.2em; } button { font-family: inherit; } .talonas-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 0; top: -3rem; background: var(--overlap); color: var(--paper); padding: 0.6em 1em; z-index: 100; transition: none; } .skip-link:focus { top: 0; } :focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* ---------- C: press-mark (slapukai) ---------- */ .press-mark { background: var(--overlap); color: var(--paper); font-size: var(--fs-small); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--step); padding: 0.6em 1rem; } .press-mark p { margin: 0; max-width: none; } .press-mark-dismiss { background: transparent; color: var(--paper); border: 1px solid var(--paper); padding: 0.35em 0.9em; cursor: pointer; font-size: var(--fs-small); font-weight: 600; white-space: nowrap; } .press-mark-dismiss:hover { background: var(--paper); color: var(--overlap); } .press-mark[hidden] { display: none; } /* ---------- H: press-header ---------- */ .press-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--step); padding: 1rem; border-bottom: 1px solid var(--muted); } .brand-mark { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; margin: 0; display: flex; align-items: baseline; gap: 0.5em; } .brand-mark .age-signal { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; border: 1px solid var(--ink-blue); color: var(--ink-blue); padding: 0.1em 0.5em; } .member-link { font-size: var(--fs-small); color: var(--overlap); } .member-link:hover { color: var(--ink-blue); } /* ---------- marquee: ink-strip ---------- */ .ink-strip { background: var(--ink-blue); color: var(--paper); overflow: hidden; white-space: nowrap; border-top: 1px solid var(--overlap); border-bottom: 1px solid var(--overlap); } .ink-strip-track { display: inline-block; padding: 0.6em 0; font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.02em; animation: ink-scroll 22s linear infinite; will-change: transform; } .ink-strip-track span { color: var(--ink-green); padding: 0 0.6em; } @keyframes ink-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ink-strip-track { animation-play-state: paused; } } /* ---------- lead-grid: P + Q + € left / FORM right ---------- Talonas (coupon) yra grid elementas, ne DOM tvarkos pabaigoje vizualiai: dokumento/klaviatūros tvarka lieka P → Q → € → FORM (a11y skaitymo tvarka), bet `grid-template-areas` ties <768px iškelia taloną iškart po antrašte, kad jis liktų pasiekiamas be scroll ir mobiliajame ekrane. */ .lead-grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "pos" "coupon" "act" "money"; gap: calc(var(--step) * 2); padding: calc(var(--step) * 2) 1rem; max-width: 78rem; margin: 0 auto; } @media (min-width: 768px) { .lead-grid { grid-template-columns: 2fr 1fr; grid-template-areas: "pos coupon" "act coupon" "money coupon"; align-items: start; } } .positioning { grid-area: pos; } .activity-note { grid-area: act; } .money-note { grid-area: money; } .coupon-tear { grid-area: coupon; } .positioning h1 { position: relative; color: var(--overlap); text-shadow: -2px 0 0 rgba(11, 87, 164, 0.45), 2px 0 0 rgba(58, 163, 92, 0.45); } .positioning .lead { font-size: var(--fs-lead); font-family: var(--font-head); font-weight: 700; line-height: 1.3; } .activity-note, .money-note { border-left: 2px dashed var(--muted); padding-left: 1em; } .activity-note strong, .money-note strong { color: var(--ink-blue); } /* ---------- FORM: coupon-tear ---------- */ .coupon-tear { background: var(--paper); border: 1px solid var(--overlap); border-left: 2px dashed var(--muted); padding: calc(var(--step) * 1.5); position: relative; } .coupon-tear::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 6px; background-image: radial-gradient(circle, var(--paper) 2px, transparent 2.4px); background-size: 100% var(--step); background-repeat: repeat-y; background-position: center; } .coupon-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px dashed var(--muted); padding-bottom: 0.5em; margin-bottom: var(--step); } .coupon-head h2 { font-size: 1.25rem; margin: 0; text-shadow: -1px 0 0 rgba(11, 87, 164, 0.4), 1px 0 0 rgba(58, 163, 92, 0.4); } .coupon-serial { font-size: var(--fs-small); color: var(--muted); } .coupon-intro { font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--step); } .coupon-field { margin-bottom: var(--step); } .coupon-field label { display: block; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-small); margin-bottom: 0.35em; } .coupon-field input, .coupon-field select { width: 100%; font-family: var(--font-body); font-size: var(--fs-body); padding: 0.5em 0.6em; border: 1px solid var(--overlap); background: var(--paper); color: var(--overlap); } .coupon-field input:focus, .coupon-field select:focus { border-color: var(--ink-blue); } .coupon-field-error { color: var(--overlap); background: rgba(58, 163, 92, 0.18); border-left: 3px solid var(--ink-green); font-size: var(--fs-small); padding: 0.35em 0.6em; margin-top: 0.35em; } .coupon-field-error[hidden] { display: none; } .coupon-consent { display: flex; gap: 0.6em; align-items: flex-start; } .coupon-consent input { width: auto; margin-top: 0.3em; } .coupon-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1em; margin-top: var(--step); } .coupon-button { background: var(--overlap); color: var(--paper); border: none; font-weight: 600; font-size: var(--fs-body); padding: 0.7em 1.3em; cursor: pointer; } .coupon-button:hover { background: var(--ink-blue); } .coupon-back { background: none; border: none; color: var(--overlap); text-decoration: underline; cursor: pointer; font-size: var(--fs-small); padding: 0.4em 0; } .coupon-help { font-size: var(--fs-small); color: var(--muted); margin-top: var(--step); border-top: 1px dashed var(--muted); padding-top: 0.6em; } .coupon-side[hidden] { display: none; } .coupon-success { border: 1px solid var(--ink-green); background: rgba(58, 163, 92, 0.15); padding: 1em; margin-top: var(--step); } .coupon-success[hidden] { display: none; } /* ---------- full-width sections below the fold ---------- */ .press-section { max-width: 60rem; margin: 0 auto; padding: calc(var(--step) * 2) 1rem; } .press-section + .press-section { border-top: 1px solid var(--muted); } .mechanics-list li, .faq-list { margin-bottom: 0; } .moderation-block { display: flex; flex-wrap: wrap; gap: calc(var(--step) * 1.5); align-items: center; } .moderation-figure { flex: 0 0 auto; width: 120px; height: 120px; } .moderation-copy { flex: 1 1 260px; } .commitment-note { border-left: 2px dashed var(--muted); padding-left: 1em; } .faq-item { border-bottom: 1px solid var(--muted); padding: 0.8em 0; } .faq-question { font-family: var(--font-head); font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1em; } .faq-question::-webkit-details-marker { display: none; } .faq-question::after { content: "+"; color: var(--ink-blue); font-size: 1.2em; } .faq-item[open] .faq-question::after { content: "–"; } .faq-answer { margin-top: 0.6em; } .repeat-link { display: inline-block; margin-top: var(--step); font-weight: 600; } .privacy-block { border-left: 2px dashed var(--muted); padding-left: 1em; } .legal-footer { background: var(--overlap); color: var(--paper); padding: calc(var(--step) * 2) 1rem; } .legal-footer a { color: var(--paper); } .legal-links { display: flex; gap: 1.2em; flex-wrap: wrap; list-style: none; padding: 0; margin: var(--step) 0 0; } .legal-footer p { max-width: none; } /* ---------- responsive ---------- */ @media (min-width: 1024px) { .press-section { padding-left: 2rem; padding-right: 2rem; } } @media (max-width: 400px) { .lead-grid { padding: var(--step) 0.75rem; } .press-section { padding-left: 0.75rem; padding-right: 0.75rem; } h1 { font-size: 2.1rem; } h2 { font-size: 1.6rem; } }