/* ============================================================================ CSM Unirea — site.css Stiluri pentru SITE-UL PUBLIC (browser/desktop). PWA-ul mobil intern va avea app.css separat. Nu se amesteca. Ordine import (in ): variables.css → typography.css → site.css ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); overflow-x: hidden; } img, svg { max-width: 100%; display: block; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Dimensiuni implicite pt iconitele inline (evita SVG-uri „gigant” fara marime) */ .btn svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; } .chip svg { width: 13px; height: 13px; flex: 0 0 auto; } .dev-note svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; } .theme-toggle svg { width: 20px; height: 20px; } /* ── Layout ───────────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); /* În secțiunile centrate cu grid (paginile auth: login, 2fa, 2fa-setare) containerul e item de grid; fără asta min-content-ul (padding + card) îl făcea cu câțiva px mai lat decât ecranul pe mobil. No-op în flux normal. */ min-width: 0; } .section { padding-block: clamp(40px, 5vw, 76px); } .section-tight { padding-block: clamp(30px, 3.5vw, 52px); } /* Pagina Contact: mai puțin gol între intro („scrie-ne sau sună-ne") și carduri. */ .contact-body { padding-top: clamp(20px, 2.4vw, 32px); } .section-head { max-width: 720px; margin-bottom: var(--sp-6); } .section-head.center { margin-inline: auto; text-align: center; } .section-head .h2 { margin-top: var(--sp-3); } /* Titlu pe un singur rand pe desktop (pe mobil se rupe normal) */ .section-head:has(.nowrap-lg) { max-width: none; } @media (min-width: 760px) { .section-head .h2.nowrap-lg { white-space: nowrap; } } .section-head .lead { margin-top: var(--sp-4); } .bg-muted { background: var(--bg-muted); } .bg-ink { background: var(--ink); color: var(--text-onink); } /* ── Butoane ──────────────────────────────────────────────────────────────── */ .btn { --_bg: var(--accent); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: .95rem; white-space: nowrap; padding: 14px 26px; border: 2px solid transparent; border-radius: var(--r-pill); background: var(--_bg); color: var(--text-onaccent); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); will-change: transform; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-accent); color: var(--text-onaccent); background: var(--accent-strong); } .btn:active { transform: translateY(0); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); box-shadow: var(--shadow-sm); border-color: var(--text-3); } .btn-onink { background: #fff; color: var(--ink); } .btn-onink:hover { background: #fff; color: var(--accent-strong); } .btn-lg { padding: 17px 34px; font-size: 1.02rem; } .btn-sm { padding: 10px 18px; font-size: .85rem; } /* Utilitare: nu rupe cuvintele / break vizibil doar pe mobil. */ .nowrap { white-space: nowrap; } .br-m { display: none; } /* Buton „Autentificare" ascuns implicit (apare doar în meniul burger mobil). */ .nav__login-m { display: none; } /* ── NAV ──────────────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .nav.scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } .nav__inner { height: 100%; display: flex; align-items: center; gap: var(--sp-5); } .brand { display: inline-flex; align-items: center; gap: var(--sp-3); margin-right: auto; } .brand__logo { height: 46px; width: auto; } :root[data-theme="dark"] .brand__logo { filter: brightness(0) invert(.9); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand__logo { filter: brightness(0) invert(.9); } } .brand__text { display: flex; flex-direction: column; line-height: 1; } .brand__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .04em; color: var(--text); } .brand__sub { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; } .nav__links { display: flex; align-items: center; gap: var(--sp-2); } .nav__links a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; font-weight: 500; color: var(--text-2); padding: 9px 14px; border-radius: var(--r-sm); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .nav__links a:hover { color: var(--text); background: var(--surface-2); } .nav__links a.is-active { color: var(--accent-text); } .nav__actions { display: flex; align-items: center; gap: var(--sp-3); } .theme-toggle { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--text-2); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .theme-toggle:hover { color: var(--accent); border-color: var(--border-strong); transform: rotate(-12deg); } .theme-toggle .sun { display: none; } :root[data-theme="dark"] .theme-toggle .sun { display: block; } :root[data-theme="dark"] .theme-toggle .moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .moon { display: none; } } .nav__burger { display: none; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); } .nav__burger span { display: block; width: 20px; height: 2px; background: var(--text); margin: 4px auto; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } /* ── HERO ─────────────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; background: var(--ink); color: var(--text-onink); padding-block: clamp(72px, 12vw, 140px); } .hero__bg { position: absolute; inset: 0; z-index: 0; opacity: .9; } .hero__glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; } .hero__glow--1 { width: 520px; height: 520px; background: var(--accent); top: -160px; right: -120px; opacity: .35; } .hero__glow--2 { width: 420px; height: 420px; background: #5b4a2a; bottom: -180px; left: -140px; opacity: .3; } .hero__grid-lines { position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb,#fff 6%,transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb,#fff 6%,transparent) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%); } .hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero .eyebrow { color: #fff; } .hero .eyebrow::before { background: var(--accent); } .hero__title { color: #fff; margin-top: var(--sp-4); } .hero .hero__title .accent-text { color: #fff; -webkit-text-stroke: 1px var(--accent); } .hero__desc { margin-top: var(--sp-5); max-width: 46ch; color: color-mix(in srgb, #fff 78%, transparent); font-size: 1.18rem; line-height: 1.7; } .hero__cta { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-3); } .hero__stats { margin-top: var(--sp-7); display: flex; gap: clamp(20px, 4vw, 44px); flex-wrap: wrap; } .hero__stat .num { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; color: #fff; line-height: 1; } .hero__stat .lbl { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: color-mix(in srgb,#fff 62%,transparent); margin-top: 6px; } /* medalionul cu sigla in hero */ .hero__badge { display: grid; place-items: center; } .hero__medallion { width: min(360px, 74vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #fff 0%, #f0f0f0 70%, #e2e2e2 100%); box-shadow: 0 0 0 10px color-mix(in srgb,#fff 10%,transparent), 0 30px 70px rgba(0,0,0,.5); animation: floaty 6s var(--ease) infinite; } .hero__medallion img { width: 62%; height: auto; } @keyframes floaty { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } } /* ── Grila secţii sportive ────────────────────────────────────────────────── */ .grid { display: grid; gap: var(--sp-5); } .grid--cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .card { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .card::after { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .card:hover::after { transform: scaleX(1); } /* Antet card: iconiță la stânga, titlu alături (mai mult spațiu pe orizontală pentru descrierea de dedesubt). */ .card__head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); } .card__head .card__icon { margin-bottom: 0; flex: none; } .card__head .card__title { margin-bottom: 0; } .card__icon { width: 58px; height: 58px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: var(--sp-4); background: var(--accent-soft); color: var(--accent-text); } .card__icon svg { width: 30px; height: 30px; } /* Varianta cu ilustrație proprie (SVG color): fundal alb + ramă aurie ca o miniatură încadrată; arta e color (nu moștenește currentColor) și are rapoarte diferite → object-fit:contain o încadrează fără s-o deformeze. */ .card__icon--img { width: 64px; height: 64px; background: #fff; color: inherit; border: 1px solid var(--accent); box-shadow: var(--shadow-sm); } .card__icon--img img { width: 44px; height: 44px; object-fit: contain; } .card__title { margin-bottom: var(--sp-2); } .card__desc { color: var(--text-2); font-size: .98rem; margin: 0; } /* margin-top:auto împinge meta la baza cardului (cardul e flex-column), deci toate chip-urile sunt aliniate jos, la aceeași înălțime, indiferent de câte rânduri are descrierea. padding-top păstrează marginea minimă (cât la cele cu 3 rânduri de text acum). */ .card__meta { margin-top: auto; padding-top: var(--sp-4); display: flex; gap: var(--sp-2); flex-wrap: wrap; } /* Chip-ul din card ocupă toată lățimea (cât textul de deasupra) și își centrează conținutul — uniform pe toate cardurile, indiferent de text. */ .card__meta .chip { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; } .chip { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill); background: var(--bg-muted); color: var(--text-2); border: 1px solid var(--border); } /* ── Banda „de ce noi” / features simple ──────────────────────────────────── */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: var(--sp-5); } .feature { display: flex; gap: var(--sp-4); } .feature__ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--ink); color: #fff; } :root[data-theme="dark"] .feature__ic { background: var(--accent); color: var(--text-onaccent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feature__ic { background: var(--accent); color: var(--text-onaccent); } } .feature__ic svg { width: 24px; height: 24px; } .feature h3 { margin: 0 0 4px; } .feature p { margin: 0; color: var(--text-2); font-size: .96rem; } /* ── CTA band ─────────────────────────────────────────────────────────────── */ .cta-band { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--accent), var(--gold)); color: var(--text-onaccent); border-radius: var(--r-xl); padding: clamp(40px, 6vw, 72px); text-align: center; } .cta-band .h2 { color: var(--ink); } .cta-band p { color: color-mix(in srgb, #2a220a 82%, transparent); max-width: 52ch; margin-inline: auto; } .cta-band .btn { margin-top: var(--sp-5); } .cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.28), transparent 45%); } /* ── Rezultate / tabele ───────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); } table.data { width: 100%; border-collapse: collapse; min-width: 560px; } table.data th, table.data td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); } table.data thead th { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: var(--text-3); background: var(--bg-muted); } table.data tbody tr:hover { background: var(--surface-2); } table.data td .medal { color: var(--gold); font-weight: 700; } /* ── Contact ──────────────────────────────────────────────────────────────── */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; } .contact-item { display: flex; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); } .contact-item:last-child { border-bottom: 0; } .contact-item .ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); } .contact-item .ic svg { width: 22px; height: 22px; } .contact-item b { display: block; } .contact-item span { color: var(--text-2); } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); } .field label { font-size: .85rem; font-weight: 600; color: var(--text-2); } .field input, .field textarea { font: inherit; padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* ── FOOTER ───────────────────────────────────────────────────────────────── */ .footer { background: var(--ink); color: var(--text-onink); padding-block: var(--sp-8) var(--sp-6); } .footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: var(--sp-6); } /* Blocul de brand: sigla în stânga, textul în dreapta (economie de spațiu). */ .footer__brand { display: flex; align-items: flex-start; gap: var(--sp-4); } .footer__logo { flex: 0 0 auto; height: 60px; width: auto; } .footer__brand p { margin: 0; } .footer p { color: color-mix(in srgb,#fff 62%,transparent); font-size: .94rem; } /* Rețele sociale — grupate pe „Masculin" / „Feminin", doar cele completate. */ /* Grupurile social stivuite (clubul sus, apoi feminin) cu linie fină de delimitare între ele — cerut ca să nu pară lipite. */ .footer__socials { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); } .footer__social-group + .footer__social-group { padding-top: var(--sp-4); border-top: 1px solid color-mix(in srgb,#fff 14%,transparent); } .footer__social-cap { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: color-mix(in srgb,#fff 55%,transparent); margin-bottom: 8px; } .footer__social { display: flex; gap: var(--sp-2); } .footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb,#fff 18%,transparent); color: color-mix(in srgb,#fff 78%,transparent); font-size: 20px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .footer__social a:hover { color: #fff; border-color: var(--accent); background: color-mix(in srgb,#fff 6%,transparent); } .footer h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: #fff; margin: 0 0 var(--sp-4); } .footer__links a { display: block; color: color-mix(in srgb,#fff 66%,transparent); padding: 6px 0; font-size: .94rem; overflow-wrap: anywhere; } .footer__links a:hover { color: #fff; } .footer__bottom { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid color-mix(in srgb,#fff 12%,transparent); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); color: color-mix(in srgb,#fff 55%,transparent); font-size: .86rem; } /* ── Note dev (placeholder pana pe 1 aug) ─────────────────────────────────── */ .dev-note { display: flex; gap: var(--sp-3); align-items: flex-start; background: color-mix(in srgb, var(--gold) 14%, var(--surface)); border: 1px dashed var(--gold); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); color: var(--text-2); font-size: .9rem; margin-top: var(--sp-5); } .dev-note b { color: var(--text); } /* ── Mesaj formular contact (flash ok/eroare) ─────────────────────────────── */ .form-msg { display: flex; gap: var(--sp-3); align-items: flex-start; border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-size: .92rem; } .form-msg svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; } .form-msg--ok { background: color-mix(in srgb, #16a34a 14%, var(--surface)); border: 1px solid color-mix(in srgb, #16a34a 45%, transparent); color: var(--text); } .form-msg--err { background: color-mix(in srgb, #dc2626 12%, var(--surface)); border: 1px solid color-mix(in srgb, #dc2626 45%, transparent); color: var(--text); } /* Honeypot: ascuns vizual, dar prezent în DOM ca boții să-l completeze. */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ── Animatii scroll (JS adauga .in) ──────────────────────────────────────── */ .anim { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .anim.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .anim { opacity: 1; transform: none; transition: none; } .hero__medallion { animation: none; } html { scroll-behavior: auto; } } /* ── RESPONSIVE ───────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero .eyebrow { justify-content: center; } .hero__desc { margin-inline: auto; } .hero__cta, .hero__stats { justify-content: center; } .hero__badge { order: -1; } .hero__medallion { width: min(240px, 60vw); } .contact-grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .nav__links, .nav__actions .btn { display: none; } .nav__burger { display: block; } .nav.open .nav__links { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--bg-elev); border-bottom: 1px solid var(--border); padding: var(--sp-3); gap: 2px; box-shadow: var(--shadow-lg); } .nav.open .nav__links a { padding: 13px 16px; } /* Break vizibil doar pe mobil (ex. titlul CTA pe 2 rânduri). */ .br-m { display: inline; } /* Eyebrow hero pe mobil: fără liniuța din stânga, tot textul pe un rând. */ .hero .eyebrow::before { display: none; } .hero .eyebrow { white-space: nowrap; letter-spacing: .06em; font-size: .7rem; } /* Autentificare vizibilă în meniul burger deschis. */ .nav.open .nav__links .nav__login-m { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: 6px; color: var(--accent-text); font-weight: 600; } /* Footer compact pe mobil: logo/tagline pe toată lățimea, apoi grupurile de linkuri pe 2 coloane (nu mai stivuim tot pe o singură coloană = prea lung). */ .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .footer__grid > :first-child { grid-column: 1 / -1; } .footer__links a { padding: 4px 0; } .footer__bottom { flex-direction: column; } } /* ── Documente publice (pagina /documente) ───────────────────────────────── */ .pubdoc-group { margin-bottom: var(--sp-7); } .pubdoc-group:last-child { margin-bottom: 0; } .pubdoc-group__title { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); } .pubdoc-group__title svg { width: 18px; height: 18px; color: var(--accent); flex: none; } .pubdoc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-3); } .pubdoc { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .pubdoc:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .pubdoc__tile { flex: none; width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; } .pubdoc__tile svg { width: 20px; height: 20px; } .pubdoc__tile--pdf { background: color-mix(in srgb, #d13b40 14%, transparent); color: #d13b40; } .pubdoc__tile--doc { background: color-mix(in srgb, #3b74d6 14%, transparent); color: #3b74d6; } .pubdoc__tile--xls { background: color-mix(in srgb, #1a8f4e 15%, transparent); color: #1a8f4e; } .pubdoc__tile--img { background: color-mix(in srgb, #d98a1e 16%, transparent); color: #c47a16; } .pubdoc__tile--file { background: var(--surface-2); color: var(--text-3); } .pubdoc__body { flex: 1 1 auto; min-width: 0; } .pubdoc__title { display: block; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pubdoc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; margin-top: 2px; font-size: .82rem; color: var(--text-3); } .pubdoc__meta span { display: inline-flex; align-items: center; gap: 5px; } .pubdoc__meta svg { width: 13px; height: 13px; opacity: .75; flex: none; } .pubdoc__dl { flex: none; color: var(--text-3); transition: color .15s ease; } .pubdoc__dl svg { width: 20px; height: 20px; } .pubdoc:hover .pubdoc__dl { color: var(--accent); }