/* app.css */ /* ========================================================================== GIA Connect + FTR 2050 — design system "Chrome & Dusk" (productie) Fara biblioteci externe, fara CDN, fara stiluri inline (CSP style-src 'self'). Mobil intai: baza = telefon; @media (min-width) pentru tableta / desktop. Sectiuni: 1 tokeni · 2 baza · 3 tipografie · 4 butoane · 5 panouri · 6 raritati · 7 cartonas 3D · 8 antet · 9 formulare · 10 pagina de start 11 pagini interne · 12 pachete + scena de deschidere · 13 album · 14 fisa cartonasului · 15 trade · 16 tabele · 17 diverse · 18 subsol · 19 miscare redusa ========================================================================== */ @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/exo2-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/exo2-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'FTR Orbitron'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/ftr-orbitron-latin.woff2') format('woff2'); /* fara cifre (U+0030-0039): Orbitron taie zeroul; cifrele vin din Exo 2 (urmatorul font din stiva), titlurile raman futuriste */ unicode-range: U+0000-002F, U+003A-00FF, U+0102-0103, U+0131, U+0152-0153, U+015E-015F, U+0162-0163, U+0218-021B, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Orbitron completat cu ă Ă ș Ș ț Ț (tools/build_ftr_orbitron.py) */ /* ---------------------------------------------------------------- 1. TOKENI */ :root { --bg-0: #030912; --bg-1: #06101f; --bg-2: #0a1a31; --bg-3: #0f2542; --navy: #0a2d59; --edge: rgba(150, 185, 230, .22); --edge-hi: rgba(200, 225, 255, .45); --chrome-1: #f6f9fd; --chrome-2: #dbe3ee; --chrome-3: #c5cfdb; --chrome-4: #b4c0cf; --chrome: linear-gradient(180deg, #ffffff 0%, #d6dfec 38%, #8e9bb0 52%, #e9eff7 100%); --ice: #8cc8ff; --ice-2: #4a84b9; --glow: rgba(110, 180, 255, .55); --gold-1: #fbe7ae; --gold-2: #e3c06c; --gold-3: #aa8b47; --gold-4: #5d4619; --gold: linear-gradient(180deg, #fff1c4 0%, #e8c670 42%, #a98536 58%, #f3d98c 100%); --sun-1: #ffb15c; --sun-2: #ff7a3d; --common: #8b8f94; --common-bg: #33373d; --common-glow: rgba(190, 200, 215, .35); --rare: #4a84b9; --rare-bg: #0a2d59; --rare-glow: rgba(90, 160, 235, .55); --epic: #845ab3; --epic-bg: #301853; --epic-glow: rgba(160, 110, 230, .55); --legendary: #aa8b47; --legendary-bg: #190c02; --legendary-glow: rgba(240, 195, 100, .6); /* nume vechi (compatibilitate cu sabloanele existente) */ --bg: var(--bg-0); --surface: var(--bg-2); --surface-2: var(--bg-3); --line: var(--edge); --text: #eef3f9; --muted: #c5cfdb; --faint: #c5cfdb; --accent: var(--ice-2); --accent-strong: var(--ice); --ok: #7fe0a8; --danger: #ff8c8c; --font-title: 'FTR Orbitron', 'Orbitron', 'Exo 2', system-ui, sans-serif; --font-body: 'Exo 2', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 6.5rem; --gutter: 1rem; --wrap: 1240px; --radius: 12px; --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --card-r: 4.2% / 2.9%; --ease: cubic-bezier(.2, .8, .2, 1); --header-h: 64px; } @media (min-width: 720px) { :root { --gutter: 1.75rem; --header-h: 76px; } } @media (min-width: 1100px) { :root { --gutter: 2.5rem; } } /* ---------------------------------------------------------------- 2. BAZA */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--text); font: 400 1rem/1.65 var(--font-body); overflow-x: hidden; background: radial-gradient(1200px 700px at 85% -10%, rgba(40, 90, 170, .35), transparent 60%), radial-gradient(900px 600px at -10% 30%, rgba(30, 70, 140, .25), transparent 60%), linear-gradient(180deg, var(--bg-1), var(--bg-0) 60%); background-attachment: fixed; } body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background: repeating-linear-gradient(90deg, rgba(120, 160, 220, .035) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, rgba(120, 160, 220, .035) 0 1px, transparent 1px 72px); -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); } img, svg { max-width: 100%; display: block; } img { height: auto; } a { color: var(--ice); text-decoration: none; } a:hover { color: #fff; } :focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 4px; } ::selection { background: rgba(110, 180, 255, .35); } .skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--bg-3); color: #fff; padding: .6rem 1rem; } .skip:focus { left: 0; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } main { flex: 1; } .page { padding-top: calc(var(--header-h) + var(--s6)); padding-bottom: var(--s8); overflow-x: clip; } .no-scroll { overflow: hidden; } /* cat timp scena de deschidere acopera ecranul, nu se mai deseneaza antetul cu blur si grila de fundal (randare mai fluida pe telefoane slabe) */ body.no-scroll::before { display: none; } body.no-scroll .site-header { visibility: hidden; } /* ---------------------------------------------------------------- 3. TIPOGRAFIE */ h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 600; line-height: 1.15; margin: 0 0 var(--s3); letter-spacing: .08em; text-transform: uppercase; } .display { font-size: clamp(2.1rem, 8.2vw, 4.4rem); font-weight: 700; letter-spacing: .14em; line-height: 1.02; } h1 { font-size: clamp(1.5rem, 4.6vw, 2.6rem); margin-bottom: var(--s4); } h2 { font-size: clamp(1.15rem, 3.2vw, 1.8rem); margin-top: var(--s6); } h3 { font-size: 1rem; letter-spacing: .12em; } h4 { font-size: .875rem; letter-spacing: .2em; color: var(--chrome-2); } p { margin: 0 0 var(--s4); } .lead { font-size: clamp(1.02rem, 2.2vw, 1.25rem); color: var(--muted); max-width: 60ch; } .muted { color: var(--muted); } .small { font-size: .875rem; } .mono-num { font-family: var(--font-title); font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .chrome-text { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); } .gold-text { background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .eyebrow { font: 600 .875rem/1 var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--gold-2); display: inline-flex; align-items: center; gap: .9rem; margin-bottom: var(--s4); } .eyebrow::before, .eyebrow::after { content: ''; width: 2.2rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2)); } .eyebrow::after { transform: scaleX(-1); } .eyebrow.left::before { display: none; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: rgba(3, 9, 18, .7); border: 1px solid var(--edge); border-radius: 6px; padding: .1rem .4rem; word-break: break-all; } /* ---------------------------------------------------------------- 4. BUTOANE (chamfer ca la plachetele de raritate) */ .btn { --cut: 11px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: .8rem 1.7rem; font: 700 .875rem/1 var(--font-title); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid transparent; color: #1b1405; background: var(--gold) padding-box, var(--gold) border-box; clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%); transition: transform .25s var(--ease), filter .25s var(--ease); overflow: hidden; isolation: isolate; } .btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%); transform: translateX(-120%); animation: shimmer 5.5s var(--ease) infinite; } .btn:hover { transform: translateY(-2px); filter: brightness(1.08) drop-shadow(0 8px 18px rgba(227, 192, 108, .35)); color: #1b1405; } .btn:active { transform: translateY(0); } .btn-lg { min-height: 58px; padding-inline: 2.2rem; font-size: .9rem; line-height: 1.3; } /* etichetele lungi (RO pe telefon) pot trece pe doua randuri fara sa se atinga */ .btn.ghost, .btn.secondary { color: var(--text); background: linear-gradient(180deg, rgba(25, 52, 92, .75), rgba(8, 20, 40, .75)) padding-box, linear-gradient(180deg, var(--edge-hi), rgba(120, 160, 210, .15)) border-box; } .btn.ghost::after, .btn.secondary::after { display: none; } .btn.ghost:hover, .btn.secondary:hover { color: #fff; filter: brightness(1.2) drop-shadow(0 6px 16px var(--glow)); } .btn.danger { color: #ffe5e5; background: linear-gradient(180deg, #7a1f27, #3e0d13) padding-box, linear-gradient(180deg, #ff9a9a, #7a1f27) border-box; } .btn.danger::after { display: none; } .btn.danger:hover { color: #fff; filter: brightness(1.15) drop-shadow(0 6px 16px rgba(255, 90, 90, .35)); } .btn.sm, .btn.small { min-height: 38px; padding: .55rem 1.1rem; font-size: .875rem; --cut: 8px; } .btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; filter: grayscale(.6); cursor: not-allowed; } button.linklike { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; color: inherit; padding: 0; } button.linklike:hover { color: #fff; } @keyframes shimmer { 0%, 62% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } .actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s4); } .links { margin-top: var(--s4); font-size: .95rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; } .cta-row { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; } /* ---------------------------------------------------------------- 5. PANOURI DE STICLA */ .panel, .glass { position: relative; border-radius: var(--r-md); padding: var(--s5); border: 1px solid var(--edge); margin-bottom: var(--s4); background: linear-gradient(160deg, rgba(22, 48, 88, .55), rgba(7, 18, 36, .62)); -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 24px 60px -20px rgba(0, 0, 0, .6); } .panel.wide { max-width: 880px; } .panel.narrow { max-width: 540px; margin-inline: auto; } .panel.flat { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 26, 49, .88); } .panel > h1:first-child, .panel > h2:first-child, .panel > h3:first-child { margin-top: 0; } .rule { height: 1px; border: 0; margin: var(--s5) 0; background: linear-gradient(90deg, transparent, var(--edge-hi), transparent); } .narrow { max-width: 540px; } /* ---------------------------------------------------------------- 6. PLACHETE DE RARITATE (CSS, nu imagini) */ .rarity { --c: var(--common); --bg2: var(--common-bg); --g: var(--common-glow); position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 6.4rem; padding: .42rem 1.3rem; font: 700 .875rem/1 var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: #fff; text-indent: .3em; background: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 70%, #000), var(--bg2)) padding-box, linear-gradient(180deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000)) border-box; border: 1px solid transparent; clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%); text-shadow: 0 0 10px var(--g); } .rarity.common { --c: var(--common); --bg2: var(--common-bg); --g: var(--common-glow); } .rarity.rare { --c: var(--rare); --bg2: var(--rare-bg); --g: var(--rare-glow); } .rarity.epic { --c: var(--epic); --bg2: var(--epic-bg); --g: var(--epic-glow); } .rarity.legendary { --c: var(--legendary); --bg2: var(--legendary-bg); --g: var(--legendary-glow); color: #fbe7ae; } .pill { display: inline-block; min-width: 1.5em; padding: .05em .45em; border-radius: 999px; background: var(--gold); color: #1b1405; font: 700 .8rem/1.5 var(--font-body); letter-spacing: .04em; text-align: center; vertical-align: middle; } .badge { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font: 700 .8rem/1.4 var(--font-body); letter-spacing: .03em; text-transform: uppercase; border: 1px solid var(--edge-hi); color: var(--ice); background: rgba(110, 180, 255, .08); } .badge.new { color: var(--ok); border-color: rgba(127, 224, 168, .5); background: rgba(127, 224, 168, .08); } .badge.dup { color: var(--gold-1); border-color: rgba(227, 192, 108, .5); background: rgba(227, 192, 108, .08); } .tag { display: inline-block; font: 700 .8rem/1 var(--font-body); letter-spacing: .03em; text-transform: uppercase; padding: .45rem .9rem; color: #1b1405; background: var(--gold); clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); } .gold-badge { color: var(--gold-1); font-weight: 700; } .notice { border: 1px dashed var(--gold-3); color: var(--gold-1); border-radius: 8px; padding: .5rem .9rem; display: inline-block; font-weight: 600; margin-bottom: var(--s4); } .warn { color: #ffb4a8; } /* ---------------------------------------------------------------- 7. CARTONAS 3D (rama metalica, inclinare, folie holografica) */ .tilt { perspective: 1100px; touch-action: pan-y; } .card3d { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 30%; --foil: 0; --glow: var(--common-glow); --f1: #eef3fa; --f2: #7d8aa0; position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: var(--card-r); padding: 0; background: none; /* fara chenar metalic: cartonasul are rama lui */ transform: rotateX(var(--ry)) rotateY(var(--rx)); transform-style: preserve-3d; transition: transform .35s var(--ease), box-shadow .35s var(--ease); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06); will-change: transform; } .card3d.rare { --glow: var(--rare-glow); --foil: .22; --f1: #e4efff; --f2: #5f8fc4; } .card3d.epic { --glow: var(--epic-glow); --foil: .34; --f1: #efe6ff; --f2: #8a64bb; } .card3d.legendary { --glow: var(--legendary-glow); --foil: .5; --f1: #fff1c4; --f2: #a98536; } .card3d.rare, .card3d.epic, .card3d.legendary { box-shadow: 0 22px 46px -14px rgba(0, 0, 0, .8), 0 0 28px -4px var(--glow); } .card3d img { width: 100%; height: 100%; object-fit: cover; border-radius: 3.4% / 2.3%; } .card3d.bare { padding: 0; background: none; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .75); } .card3d.bare img { border-radius: inherit; } .card3d.is-active { transition: transform .08s linear, box-shadow .35s var(--ease); } .card3d::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; mix-blend-mode: soft-light; opacity: 0; transition: opacity .3s; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 52%); } .card3d::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; mix-blend-mode: color-dodge; opacity: 0; transition: opacity .3s; background: conic-gradient(from calc(var(--gx) * 3.6) at var(--gx) var(--gy), #ff6ec7, #7fc2ff, #7dffb0, #ffe27a, #ff6ec7), repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 12px, rgba(255, 255, 255, .22) 14px 15px); background-blend-mode: overlay; -webkit-mask-image: radial-gradient(circle at var(--gx) var(--gy), #000 0, rgba(0, 0, 0, .35) 55%, transparent 85%); mask-image: radial-gradient(circle at var(--gx) var(--gy), #000 0, rgba(0, 0, 0, .35) 55%, transparent 85%); } .card3d.is-active::before { opacity: .55; } .card3d.is-active::after { opacity: var(--foil); } .card3d.shine::after { opacity: calc(var(--foil) * .7); animation: foilIdle 7s ease-in-out infinite; } @keyframes foilIdle { 0%, 100% { --gx: 20%; --gy: 20%; } 50% { --gx: 80%; --gy: 75%; } } @property --gx { syntax: ''; inherits: true; initial-value: 50%; } @property --gy { syntax: ''; inherits: true; initial-value: 30%; } .verso { border-radius: var(--card-r); background: url('../img/card-back-512.webp') center / contain no-repeat; } .tile-art .verso, .tile .verso { aspect-ratio: 2 / 3; width: 100%; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8); } /* ---------------------------------------------------------------- 8. ANTET */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); transition: background .3s, box-shadow .3s; } .site-header.is-solid { background: rgba(4, 11, 22, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--edge), 0 12px 30px -14px rgba(0, 0, 0, .7); } .site-header .wrap { height: 100%; display: flex; align-items: center; gap: var(--s4); } .brand { display: inline-flex; align-items: center; height: 100%; } .brand img { width: auto; height: 38px; } /* antet identic in EN / RO: sigla nu se strange niciodata, butoanele raman pe un singur rand (textele RO sunt mai lungi) */ .brand, .brand img { flex: none; } .header-cta { flex: none; } .header-cta .btn { white-space: nowrap; } @media (max-width: 640px) { .site-header .wrap { gap: .5rem; } .header-cta { gap: .4rem; } .header-cta .btn.sm { padding-inline: .65rem; letter-spacing: .08em; font-size: .875rem; --cut: 6px; } .header-cta .nav-login { display: none; } /* "Autentificare" ramane in meniu; in antet pe telefon incap logo + "Creeaza cont" + meniu */ } @media (min-width: 720px) { .brand img { height: 46px; } } .nav { display: none; margin-left: auto; align-items: center; gap: 1.05rem; } .nav > a, .nav .acct > summary { white-space: nowrap; font: 600 .875rem/1 var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--chrome-2); padding: .5rem 0; position: relative; cursor: pointer; list-style: none; } .nav > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--gold-2); transform: scaleX(0); transition: transform .3s var(--ease); } .nav > a:hover, .nav > a[aria-current="page"], .nav .acct > summary:hover { color: #fff; } .nav > a:hover::after, .nav > a[aria-current="page"]::after { transform: scaleX(1); } .acct { position: relative; } .acct > summary::-webkit-details-marker { display: none; } .acct > summary::after { content: ' ▾'; font-size: .875rem; } .acct-panel { position: absolute; right: 0; top: calc(100% + 12px); min-width: 220px; padding: .8rem 1rem; display: grid; gap: .1rem; margin: 0; } .acct-panel a, .acct-panel button.linklike { display: block; padding: .6rem .2rem; font: 600 .875rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--chrome-1); text-align: left; width: 100%; } .acct-panel a:hover, .acct-panel button.linklike:hover { color: var(--gold-1); } .acct-panel form { margin: 0; } .header-cta { margin-left: auto; display: flex; align-items: center; gap: .7rem; } .lang { display: none; align-items: center; font: 600 .875rem var(--font-body); letter-spacing: .03em; color: var(--faint); gap: .2rem; } .lang a { color: var(--faint); padding: .1rem .3rem; border-radius: 4px; text-transform: uppercase; } .lang a[aria-current="true"] { color: var(--gold-1); } .menu { position: relative; } .menu > summary { list-style: none; cursor: pointer; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--edge); border-radius: 10px; background: rgba(10, 26, 49, .6); } .menu > summary::-webkit-details-marker { display: none; } .menu > summary span, .menu > summary::before, .menu > summary::after { content: ''; width: 20px; height: 2px; background: var(--chrome-2); border-radius: 2px; grid-area: 1 / 1; transition: transform .3s var(--ease), opacity .2s; } .menu > summary::before { transform: translateY(-6px); } .menu > summary::after { transform: translateY(6px); } .menu[open] > summary span { opacity: 0; } .menu[open] > summary::before { transform: rotate(45deg); } .menu[open] > summary::after { transform: rotate(-45deg); } .menu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(88vw, 340px); padding: 1.1rem; display: grid; gap: .1rem; max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto; margin: 0; } .menu-panel a, .menu-panel button.linklike { display: flex; justify-content: space-between; align-items: center; padding: .85rem .4rem; font: 600 .875rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--chrome-1); border-bottom: 1px solid var(--edge); width: 100%; text-align: left; } .menu-panel form { margin: 0; } .menu-panel > :last-child, .menu-panel form:last-child button { border-bottom: 0; } .menu-lang { display: flex; gap: .6rem; padding: .8rem .4rem 0; font: 600 .875rem var(--font-body); letter-spacing: .03em; } .menu-lang a { border: 0; padding: 0; width: auto; } .menu-lang a[aria-current="true"] { color: var(--gold-1); } @media (min-width: 1200px) { .nav { display: flex; } .menu { display: none; } .lang { display: flex; } .header-cta { margin-left: .6rem; } } @media (min-width: 1200px) and (max-width: 1599px) { .nav { gap: .6rem; } .nav > a, .nav .acct > summary { letter-spacing: .06em; font-size: .875rem; } .header-cta { gap: .5rem; } .site-header .wrap { gap: .8rem; } .header-cta .btn.sm { padding-inline: .8rem; letter-spacing: .12em; } } /* RO are texte mai lungi: incap si la 1200 px */ /* ---------------------------------------------------------------- 9. FORMULARE */ .field { margin-bottom: var(--s4); } label { display: block; font: 500 .875rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; } fieldset { border: 1px solid var(--edge); border-radius: 10px; margin: 0 0 var(--s4); padding: .8rem 1rem; } legend { padding: 0 .4rem; font: 500 .875rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--muted); } input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=datetime-local], input[type=file], select, textarea { width: 100%; min-height: 46px; padding: .7rem 1rem; color: var(--text); font: 400 1rem var(--font-body); background: rgba(3, 9, 18, .7); border: 1px solid var(--edge); border-radius: 10px; transition: border-color .25s, box-shadow .25s; } textarea { min-height: 110px; } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(110, 180, 255, .2); } input[type=checkbox], input[type=radio] { accent-color: var(--gold-2); width: 1.15rem; height: 1.15rem; flex: none; } .hint { color: var(--muted); font-size: .875rem; margin: .3rem 0 0; } .field-error { color: var(--danger); font-size: .9rem; margin: .3rem 0 0; } .check { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .75rem; } .check input { margin-top: .25rem; } .check label, .choice { font: 400 .95rem var(--font-body); letter-spacing: normal; text-transform: none; color: var(--text); margin: 0; cursor: pointer; display: flex; gap: .7rem; align-items: flex-start; } .choice { padding: .7rem .9rem; border: 1px solid var(--edge); border-radius: 10px; margin-bottom: .5rem; background: rgba(8, 20, 40, .55); } .choice:has(input:checked) { border-color: var(--gold-2); box-shadow: 0 0 18px -8px rgba(227, 192, 108, .6); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .flash { border-radius: 10px; padding: .8rem 1.1rem; margin-bottom: var(--s4); border: 1px solid var(--edge-hi); background: rgba(110, 180, 255, .08); } .flash.success { border-color: rgba(127, 224, 168, .5); background: rgba(127, 224, 168, .08); } .flash.error { border-color: rgba(255, 140, 140, .5); background: rgba(255, 140, 140, .08); color: #ffd6d6; } .flash.info { border-color: var(--edge-hi); } .filters { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; margin: var(--s3) 0 var(--s4); } .filters select { width: auto; min-width: 9rem; } .filters .check { display: flex; align-items: center; gap: .35rem; margin: 0; } .filters label { margin-bottom: 0; } /* ---------------------------------------------------------------- 10. PAGINA DE START */ .hero { position: relative; min-height: min(100svh, 980px); padding-top: calc(var(--header-h) + var(--s6)); padding-bottom: var(--s8); display: flex; align-items: center; overflow: clip; isolation: isolate; } .hero-bg { position: absolute; inset: 0; z-index: -2; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; transform: scale(1.06); animation: heroDrift 40s ease-in-out infinite alternate; filter: saturate(1.05) contrast(1.05); } .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 9, 18, .55) 0%, rgba(3, 9, 18, .05) 30%, rgba(3, 9, 18, .25) 62%, var(--bg-0) 99%), linear-gradient(90deg, rgba(3, 9, 18, .92) 0%, rgba(3, 9, 18, .55) 38%, rgba(3, 9, 18, 0) 72%), radial-gradient(800px 420px at 85% 66%, rgba(255, 190, 110, .14), transparent 70%); } @keyframes heroDrift { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: center; width: 100%; } /* coloane stabile: continutul (titlul RO) nu o poate redimensiona */ .hero-copy { container-type: inline-size; } .hero-copy { --word-ratio: 7; } /* latimea celui mai lung cuvant din titlu / corpul de litera (EN: „Collect” ~6,5) */ :lang(ro) .hero-copy { --word-ratio: 12.3; } /* RO: „Colecționează” ~11,7 cu FTR Orbitron (ț / ș au glife proprii) */ .hero-copy h1.display { font-size: min(clamp(2.1rem, 8.2vw, 4.4rem), calc(100cqi / var(--word-ratio))); } /* titlul se micsoreaza automat ca cel mai lung cuvant sa incapa in coloana; nu schimba asezarea evantaiului */ .hero-copy .ftr-logo { width: clamp(180px, 46vw, 330px); margin-bottom: var(--s4); filter: drop-shadow(0 6px 30px rgba(110, 180, 255, .35)); height: auto; } .hero-copy .lead { margin-bottom: var(--s5); } .soon, .soon-note { color: var(--gold-1); font-style: normal; text-transform: uppercase; letter-spacing: .03em; font: 600 .8rem var(--font-body); } .soon-note { text-align: center; margin: .8rem 0 0; font-size: .8rem; } .tagline-line { margin: .4rem 0 .8rem; font: 600 .875rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--gold-1); } .how-note { max-width: 60rem; margin: var(--s6) auto 0; text-align: center; color: var(--muted); font-size: .92rem; line-height: 1.6; } @media (min-width: 980px) { .hero-copy .lead { max-width: 31rem; } } /* textul (RO e mai lung) nu intra sub cartonasul din stanga al evantaiului */ .trust { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: var(--s5) 0 0; padding: 0; list-style: none; font-size: .875rem; color: var(--muted); } .trust li { display: inline-flex; align-items: center; gap: .5rem; } .trust svg { width: 16px; height: 16px; color: var(--gold-2); flex: none; } .hero-stage { position: relative; min-height: 380px; display: grid; place-items: center; } @media (min-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .hero-stage { min-height: 620px; } } .fan { --px: 0; --py: 0; grid-area: 1 / 1; position: relative; width: min(100%, 560px); aspect-ratio: 1 / .92; perspective: 1500px; transform-style: preserve-3d; } .fan-rot { position: absolute; inset: 0; transform-style: preserve-3d; animation: fanSwing 14s ease-in-out infinite alternate; transform: rotateY(calc(var(--px) * 14deg)) rotateX(calc(var(--py) * -8deg)); } @keyframes fanSwing { from { transform: rotateY(-13deg) rotateX(2deg); } to { transform: rotateY(13deg) rotateX(-2deg); } } .fan.follow .fan-rot { animation: none; transition: transform .25s var(--ease); } .fan-card { position: absolute; left: 50%; top: 50%; width: 34%; margin: -26% 0 0 -17%; transform-style: preserve-3d; transition: transform .6s var(--ease); } .fan-card .card3d { animation: bob 6s ease-in-out infinite; } .fan-card:nth-child(2) .card3d { animation-delay: -1.2s; } .fan-card:nth-child(3) .card3d { animation-delay: -2.4s; } .fan-card:nth-child(4) .card3d { animation-delay: -3.6s; } .fan-card:nth-child(5) .card3d { animation-delay: -4.8s; } @keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } .fan-card.f1 { transform: translate3d(-132%, 14%, -160px) rotateZ(-14deg) rotateY(18deg); } .fan-card.f2 { transform: translate3d(-70%, 6%, -70px) rotateZ(-7deg) rotateY(9deg); } .fan-card.f3 { transform: translate3d(0, -4%, 90px) scale(1.18); z-index: 3; } .fan-card.f4 { transform: translate3d(70%, 6%, -70px) rotateZ(7deg) rotateY(-9deg); } .fan-card.f5 { transform: translate3d(132%, 14%, -160px) rotateZ(14deg) rotateY(-18deg); } /* punga: strat separat, FARA perspectiva / 3D / hover (nu face parte din scena cartonaselor si nu intra in asezarea lor); are aceeasi cutie ca evantaiul de dinainte, deci ramane exact unde era */ .pack-anchor { grid-area: 1 / 1; position: relative; width: min(100%, 560px); aspect-ratio: 1 / .92; z-index: 4; pointer-events: none; } .fan-floor { position: absolute; left: 6%; right: 6%; bottom: 2%; height: 14%; background: radial-gradient(closest-side, rgba(110, 180, 255, .35), transparent); filter: blur(8px); transform: translateZ(-200px); } .pack-float { position: absolute; right: -2%; bottom: -4%; width: clamp(110px, 24vw, 210px); z-index: 4; animation: float 7s ease-in-out infinite; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .65)) drop-shadow(0 0 30px rgba(227, 192, 108, .25)); } @keyframes float { 0%, 100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(-18px) rotate(1deg); } } @media (max-width: 560px) { .fan-card.f1, .fan-card.f5 { display: none; } .fan-card { width: 40%; margin-left: -20%; } .fan-card.f2 { transform: translate3d(-58%, 6%, -50px) rotateZ(-7deg); } .fan-card.f4 { transform: translate3d(58%, 6%, -50px) rotateZ(7deg); } } @media (max-width: 899px) { .hero-bg img { object-position: 78% 50%; } .hero-bg::after { background: linear-gradient(180deg, rgba(3, 9, 18, .8) 0%, rgba(3, 9, 18, .5) 40%, rgba(3, 9, 18, .75) 78%, var(--bg-0) 100%); } .hero { padding-bottom: var(--s9); } } @media (min-width: 980px) { .fan { width: min(100%, 500px); } .pack-anchor { width: min(100%, 500px); margin-right: 6%; } .pack-float { right: -10%; width: clamp(110px, 15vw, 190px); } } .section { position: relative; padding-block: var(--s8); } @media (min-width: 900px) { .section { padding-block: var(--s9); } } .section-head { text-align: center; max-width: 760px; margin: 0 auto var(--s7); } .section-head h2 { margin-top: 0; } .section-head p { color: var(--muted); } .bg-grid { background: linear-gradient(180deg, var(--bg-1) 0%, rgba(6, 16, 31, .35) 22%, rgba(6, 16, 31, .35) 78%, var(--bg-1) 100%), url('../img/grid-900.webp') center / cover no-repeat; } @media (min-width: 900px) { .bg-grid { background-image: linear-gradient(180deg, var(--bg-1) 0%, rgba(6, 16, 31, .3) 22%, rgba(6, 16, 31, .3) 78%, var(--bg-1) 100%), url('../img/grid-1672.webp'); } } .series-strip { position: relative; margin-top: calc(var(--s7) * -1); z-index: 3; } .series-strip .panel { display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); text-align: center; padding-block: var(--s5); margin-bottom: 0; } .stat { display: grid; gap: .3rem; } .stat b { font: 700 clamp(1.3rem, 4vw, 2.1rem)/1 var(--font-title); letter-spacing: .06em; } .stat span { font: 500 .875rem/1.3 var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--muted); } @media (min-width: 900px) { .series-strip .panel { grid-template-columns: repeat(4, 1fr); } .series-strip .stat + .stat { border-left: 1px solid var(--edge); } } .series-strip .stat.cd { grid-column: 1 / -1; } @media (min-width: 900px) { .series-strip .stat.cd { grid-column: auto; } } .countdown { display: flex; gap: .6rem; justify-content: center; margin: 0; } .countdown .unit { min-width: 0; flex: 1 1 0; max-width: 5.2rem; padding: .5rem .4rem; border: 1px solid var(--edge); border-radius: 8px; background: rgba(3, 9, 18, .55); text-align: center; } .countdown .num { display: block; font: 700 1.35rem var(--font-title); letter-spacing: .06em; color: #fff; } .countdown .lbl { display: block; font: 500 .8rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--muted); } .countdown-label { color: var(--muted); text-transform: uppercase; letter-spacing: .16em; font-size: .875rem; margin: 0 0 .5rem; } .stats4 { display: grid; gap: var(--s5) var(--s4); grid-template-columns: repeat(2, 1fr); text-align: center; } @media (min-width: 900px) { .stats4 { grid-template-columns: repeat(4, 1fr); } .stats4 .stat + .stat { border-left: 1px solid var(--edge); } } .steps { display: grid; gap: var(--s4); counter-reset: step; } @media (min-width: 820px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } } .step { text-align: left; counter-increment: step; overflow: hidden; margin: 0; } .step::after { content: counter(step, decimal-leading-zero); position: absolute; right: 1rem; top: .4rem; font: 800 3.4rem/1 var(--font-title); color: rgba(150, 190, 240, .08); } .step .ico { width: 56px; height: 56px; margin-bottom: var(--s4); display: grid; place-items: center; border-radius: 14px; color: var(--gold-1); background: radial-gradient(circle at 30% 20%, rgba(255, 220, 140, .22), rgba(255, 255, 255, .02)); border: 1px solid rgba(227, 192, 108, .35); box-shadow: 0 0 24px -6px rgba(227, 192, 108, .45); } .step .ico svg { width: 28px; height: 28px; } .step h3 { color: #fff; } .step p { color: var(--muted); font-size: .94rem; margin: 0; } @media (min-width: 820px) { .step:not(:last-child)::before { content: ''; position: absolute; top: 3.2rem; right: calc(var(--s5) * -1 - 6px); width: calc(var(--s5) + 12px); height: 1px; background: linear-gradient(90deg, var(--gold-3), transparent); z-index: 2; } } .rarities { display: grid; gap: var(--s6) var(--s5); grid-template-columns: repeat(2, 1fr); } @media (min-width: 900px) { .rarities { grid-template-columns: repeat(4, 1fr); } } .rar { display: grid; gap: var(--s3); justify-items: center; text-align: center; } .rar .tilt { width: min(100%, 230px); } .rar p { color: var(--muted); font-size: .88rem; margin: 0; } .rar .pts { font: 600 .875rem var(--font-body); letter-spacing: .03em; color: var(--chrome-2); } .rar .pts b { color: var(--gold-1); font-size: 1.1rem; } .brands { display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); } @media (min-width: 720px) { .brands { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1100px) { .brands { grid-template-columns: repeat(8, 1fr); gap: var(--s3); } } /* 40 de constructori: telefon = primele 8 (2 coloane), desktop = primele 16 (2 randuri de 8); „Vezi toate” le deschide pe toate. Fara JS toate raman vizibile. */ .js .brands:not(.open) .x8 { display: none; } @media (min-width: 720px) { .js .brands:not(.open) .x8:not(.x16) { display: grid; } .js .brands:not(.open) .x16 { display: none; } } .brands-more { text-align: center; margin: var(--s5) 0 0; } .brand-tile { display: grid; gap: .6rem; justify-items: center; text-align: center; padding: var(--s4) var(--s3); margin: 0; transition: transform .35s var(--ease), border-color .3s; } .brand-tile:hover { transform: translateY(-4px); border-color: var(--edge-hi); } .emblem-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .emblem { width: 76px; height: 76px; filter: drop-shadow(0 0 14px rgba(140, 200, 255, .3)); } .brand-tile .emblem { width: 84px; height: 84px; } @media (min-width: 1100px) { .brand-tile { padding: var(--s3) .5rem; } .brand-tile .emblem { width: 72px; height: 72px; } .brand-tile b { font-size: .875rem; letter-spacing: .14em; } } .brand-tile b { font: 700 .875rem var(--font-title); letter-spacing: .2em; } .brand-tile span { font-size: .875rem; color: var(--muted); line-height: 1.3; } .offers { display: grid; gap: var(--s5); } @media (min-width: 900px) { .offers { grid-template-columns: repeat(3, 1fr); align-items: stretch; } } .offer { text-align: center; display: grid; gap: var(--s3); justify-items: center; align-content: start; padding-top: var(--s6); margin: 0; } .offer .pk { width: 120px; margin-bottom: .2rem; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .6)); } .offer.best { border-color: rgba(227, 192, 108, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 60px -14px rgba(227, 192, 108, .45); } .offer .price { font: 700 2.4rem/1 var(--font-title); letter-spacing: .04em; } .offer .price small { font-size: .9rem; color: var(--muted); letter-spacing: .12em; } .offer .ribbon { position: absolute; top: -13px; } .offer ul { list-style: none; padding: 0; margin: 0 0 var(--s3); color: var(--muted); font-size: .9rem; } .club { display: grid; gap: var(--s6); align-items: center; } @media (min-width: 900px) { .club { grid-template-columns: 1.1fr .9fr; } } .cert { border-radius: 10px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8), 0 0 40px -10px rgba(227, 192, 108, .35); width: 100%; } .cert-wrap { aspect-ratio: auto; } .rank { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; gap: .55rem; } .rank li { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .8rem; align-items: center; padding: .7rem 1rem; border: 1px solid var(--edge); border-radius: 10px; background: rgba(8, 20, 40, .55); } .rank .pos { font: 800 1rem var(--font-body); color: var(--gold-2); } .rank .who { font-weight: 600; } .rank .sc, .club-rank li > a { font: 600 .875rem var(--font-body); letter-spacing: .03em; color: var(--chrome-2); } .faq { display: grid; gap: .7rem; max-width: 860px; margin-inline: auto; } .faq details { border: 1px solid var(--edge); border-radius: 12px; background: rgba(8, 20, 40, .55); transition: border-color .3s; } .faq details[open] { border-color: var(--edge-hi); background: rgba(14, 34, 64, .6); } .faq summary { cursor: pointer; list-style: none; padding: 1.05rem 3.2rem 1.05rem 1.3rem; font: 600 .875rem/1.4 var(--font-body); letter-spacing: .03em; position: relative; color: var(--text); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; position: absolute; right: 1.2rem; top: 50%; translate: 0 -50%; font: 400 1.6rem/1 var(--font-body); color: var(--gold-2); transition: rotate .3s var(--ease); } .faq details[open] summary::after { rotate: 45deg; } .faq .ans { padding: 0 1.3rem 1.2rem; color: var(--muted); } .platform { display: grid; gap: var(--s5); align-items: center; text-align: center; } .platform img { width: min(300px, 70%); height: auto; margin-inline: auto; } @media (min-width: 900px) { .platform { grid-template-columns: auto 1fr; text-align: left; gap: var(--s7); } .platform img { margin: 0; width: 280px; } } .pillars { display: grid; gap: var(--s3); } @media (min-width: 700px) { .pillars { grid-template-columns: repeat(3, 1fr); } } .pillars div { padding-left: 1rem; border-left: 2px solid var(--gold-3); } .pillars b { display: block; font: 600 .8rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; margin-bottom: .2rem; } .pillars span { color: var(--muted); font-size: .9rem; } .final-cta { text-align: center; overflow: hidden; padding: var(--s8) var(--s5); border-radius: var(--r-lg); border: 1px solid var(--edge); background: radial-gradient(700px 300px at 50% 0, rgba(110, 180, 255, .22), transparent 70%), linear-gradient(160deg, rgba(20, 46, 86, .75), rgba(5, 14, 28, .85)); } .final-cta .lead { margin-inline: auto; } .coming { display: inline-block; padding: .5rem 1rem; border: 1px dashed var(--gold-3); border-radius: 8px; color: var(--gold-1); font-weight: 600; } /* ---------------------------------------------------------------- 11. PAGINI INTERNE */ .page-head { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: end; justify-content: space-between; margin-bottom: var(--s6); } .page-head h1 { margin-bottom: .2rem; } .page-head p { margin: 0; color: var(--muted); } .crumbs { font: 500 .875rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--s2); } .crumbs a { color: var(--chrome-3); } .two-col { display: grid; gap: var(--s5); grid-template-columns: 1fr; } @media (min-width: 760px) { .two-col { grid-template-columns: 1fr 1fr; } } .two-col > * { min-width: 0; } .legal { max-width: 78ch; } .legal p { max-width: 70ch; color: var(--text); } .plain-list { list-style: none; padding: 0; margin: .5rem 0 var(--s4); } .plain-list li { margin: .35rem 0; } .rank-list { padding-left: 1.4rem; } .rank-list li { margin: .35rem 0; } .rank-name { font-weight: 600; } .club-list { columns: 2 260px; } .verify-panel { max-width: 960px; } .cert-img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--edge); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); } .ring { --p: 4; width: 132px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; margin-inline: auto; background: radial-gradient(closest-side, var(--bg-2) 79%, transparent 81% 100%), conic-gradient(var(--gold-2) calc(var(--p) * 1%), rgba(150, 185, 230, .15) 0); box-shadow: 0 0 40px -8px rgba(227, 192, 108, .4); text-align: center; } .ring b { font: 700 1.5rem var(--font-title); display: block; } .ring span { display: block; font: 500 .8rem var(--font-body); letter-spacing: .03em; color: var(--muted); } .progress { display: grid; gap: var(--s5); align-items: center; } @media (min-width: 800px) { .progress { grid-template-columns: auto 1fr auto; } } .progress-box { margin: .5rem 0 1rem; } .bar { height: 8px; border-radius: 8px; background: rgba(150, 185, 230, .15); overflow: hidden; } .bar i, .bar-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ice-2), var(--ice)); box-shadow: 0 0 14px var(--glow); } .bars { display: grid; gap: .8rem; } .bars .row { display: grid; grid-template-columns: 6.4rem 1fr 3.4rem; gap: .8rem; align-items: center; font-size: .875rem; color: var(--muted); } .chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: var(--s4) 0; } .chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; min-height: 40px; border: 1px solid var(--edge); border-radius: 999px; background: rgba(10, 26, 49, .7); color: var(--chrome-2); font: 600 .8rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: border-color .25s, color .25s; } .chip:hover { border-color: var(--edge-hi); color: #fff; } .chip[aria-current="true"], .chip[aria-pressed="true"] { border-color: var(--gold-2); color: var(--gold-1); box-shadow: 0 0 18px -6px rgba(227, 192, 108, .6); } .chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--chrome-3)); box-shadow: 0 0 8px var(--c, transparent); } .chip i.c-common { --c: var(--common); } .chip i.c-rare { --c: var(--rare); } .chip i.c-epic { --c: var(--epic); } .chip i.c-legendary { --c: var(--legendary); } dl.specs { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: .5rem 0 var(--s4); } dl.specs dt { color: var(--muted); font: 500 .875rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; align-self: center; } dl.specs dd { margin: 0; font-weight: 600; } dl.specs.rows { display: grid; grid-template-columns: 1fr; gap: 0 var(--s5); } @media (min-width: 640px) { dl.specs.rows { grid-template-columns: 1fr 1fr; } } dl.specs.rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--edge); } /* specificatii extinse (fisa cartonasului, doar proprietari): randuri aerisite, pe doua coloane pe ecran lat */ dl.specs.ext { grid-template-columns: 1fr; gap: 0 var(--s5); margin: var(--s3) 0 var(--s4); } dl.specs.ext > div { display: grid; grid-template-columns: minmax(7.5rem, 38%) 1fr; gap: .2rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--edge); align-items: baseline; } dl.specs.ext dt { align-self: baseline; letter-spacing: .14em; line-height: 1.4; } dl.specs.ext dd { font-size: .95rem; line-height: 1.4; overflow-wrap: anywhere; } @media (min-width: 760px) { dl.specs.ext { grid-template-columns: 1fr 1fr; } } @media (max-width: 460px) { dl.specs.ext > div { grid-template-columns: 1fr; gap: .15rem; } } dl.specs.rows dd { font: 600 .95rem var(--font-body); letter-spacing: .03em; text-align: right; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 var(--s4); } .kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-word; } /* ---------------------------------------------------------------- 12. PACHETE + SCENA DE DESCHIDERE */ .pack-art { position: relative; width: 120px; aspect-ratio: 2 / 3; background: url(../img/pack-512.webp) center / contain no-repeat; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)); } .pack-art.big { width: min(52vw, 220px); margin: 6vh auto 0; filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .6)) drop-shadow(0 0 28px rgba(227, 192, 108, .3)); } .pack-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s4); padding: 0; margin: var(--s4) 0; } .pack-tile { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: var(--s4) var(--s3); border: 1px solid var(--edge); border-radius: 14px; background: linear-gradient(160deg, rgba(22, 48, 88, .45), rgba(7, 18, 36, .55)); } .open-bar { display: flex; flex-wrap: wrap; gap: .75rem; margin: var(--s4) 0; } .buy-more { margin: var(--s5) 0; } @keyframes tear { 0% { transform: rotate(0) scale(1); } 15% { transform: rotate(-4deg) scale(1.04); } 30% { transform: rotate(4deg) scale(1.06); } 45% { transform: rotate(-3deg) scale(1.08); } 70% { transform: scale(1.12); } 100% { transform: scale(1.3); opacity: 0; } } .pack-art.tear { animation: tear .9s ease-in forwards; will-change: transform, opacity; } .stage { position: fixed; inset: 0; z-index: 95; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 1rem; background: radial-gradient(900px 600px at 50% 0, rgba(40, 90, 170, .35), transparent 70%), #030912; } .stage[hidden] { display: none; } .stage-inner { width: min(100%, 560px); text-align: center; margin: auto; } .stage-head { color: var(--muted); margin: 0; min-height: 1.4em; font: 500 .875rem var(--font-body); letter-spacing: .03em; } .stage-skip { margin-top: 1rem; } .deck:empty { display: none; } .deck { position: relative; width: min(78vw, 300px); margin: 0 auto 6.5rem; aspect-ratio: 2 / 3; perspective: 1100px; } .rcard { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(24px) scale(.94); transition: opacity .25s ease, transform .25s ease; } .rcard.in { opacity: 1; transform: none; } .rcard-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2, .7, .2, 1); } .rcard.flip .rcard-inner { transform: rotateY(180deg); } .rcard-back, .rcard-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4.2% / 2.9%; overflow: hidden; } .rcard-back.verso { box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .8); } .rcard-front { transform: rotateY(180deg); padding: 2.4% 3.4%; background: linear-gradient(135deg, #eef3fa 0%, #7d8aa0 28%, #eef3fa 50%, #7d8aa0 72%, #eef3fa 100%); } .rcard.r-rare .rcard-front { background: linear-gradient(135deg, #e4efff 0%, #5f8fc4 28%, #e4efff 50%, #5f8fc4 72%, #e4efff 100%); } .rcard.r-epic .rcard-front { background: linear-gradient(135deg, #efe6ff 0%, #8a64bb 28%, #efe6ff 50%, #8a64bb 72%, #efe6ff 100%); } .rcard.r-legendary .rcard-front { background: linear-gradient(135deg, #fff1c4 0%, #a98536 28%, #fff1c4 50%, #a98536 72%, #fff1c4 100%); } .rcard-front img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 3.4% / 2.3%; } .rcard figcaption { position: absolute; left: 0; right: 0; top: 100%; padding-top: .6rem; display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .875rem; opacity: 0; transition: opacity .3s ease; } .rcard.flip figcaption { opacity: 1; } .rcard::before { content: ''; position: absolute; inset: -6px; border-radius: 16px; opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: -1; } .rcard.flip::before { opacity: 1; } .rcard.r-rare::before { box-shadow: 0 0 22px 4px rgba(74, 132, 185, .55); } .rcard.r-epic::before { box-shadow: 0 0 30px 8px rgba(132, 90, 179, .65); } .rcard.r-legendary::before { box-shadow: 0 0 40px 12px rgba(190, 155, 80, .85); } .rcard.r-legendary.flip::before { animation: pulse 1.4s ease-in-out infinite alternate; } @keyframes pulse { from { opacity: .6; } to { opacity: 1; } } .summary h2 { margin-top: 2vh; } .summary .card-row { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); text-align: left; } .summary { width: min(100%, 960px); } .card-row { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s3); padding: 0; margin: var(--s4) 0; } .card-row .tile { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; } .card-row .tile > a { display: block; width: 100%; } .card-row .tile > a > img { width: 100%; height: auto; display: block; border-radius: 6px; padding: 3.2% 4.4%; background: linear-gradient(135deg, #eef3fa 0%, #7d8aa0 28%, #eef3fa 50%, #7d8aa0 72%, #eef3fa 100%); } .card-row .tile.r-rare > a > img { background: linear-gradient(135deg, #e4efff, #5f8fc4 28%, #e4efff 50%, #5f8fc4 72%, #e4efff); box-shadow: 0 0 18px -4px var(--rare-glow); } .card-row .tile.r-epic > a > img { background: linear-gradient(135deg, #efe6ff, #8a64bb 28%, #efe6ff 50%, #8a64bb 72%, #efe6ff); box-shadow: 0 0 20px -4px var(--epic-glow); } .card-row .tile.r-legendary > a > img { background: linear-gradient(135deg, #fff1c4, #a98536 28%, #fff1c4 50%, #a98536 72%, #fff1c4); box-shadow: 0 0 24px -4px var(--legendary-glow); } /* ecranul „Ce ai primit” (dupa deschiderea pachetelor): cartonasele centrate, 5 pe rand (desktop), 4 pe tableta, 2 pe telefon; butoanele centrate dedesubt */ .stage { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .summary { width: min(100%, 980px); } .summary .card-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4) var(--s3); justify-content: center; justify-items: center; max-width: 900px; margin: var(--s4) auto; text-align: center; } .summary .card-row .tile { width: 100%; max-width: 168px; align-items: center; gap: .45rem; } .summary .card-row .tile .badge { align-self: center; } .summary-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; margin: var(--s5) auto var(--s4); } @media (max-width: 1000px) { .summary .card-row { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 720px; } } @media (max-width: 760px) { .summary .card-row { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 540px; } } @media (max-width: 560px) { .summary .card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 380px; } .summary-actions { flex-direction: column; align-items: stretch; width: min(100%, 22rem); } .summary-actions .btn { width: 100%; justify-content: center; text-align: center; } } .tile-name { font-size: .875rem; font-weight: 600; } /* ---------------------------------------------------------------- 13. ALBUM */ .filters.sticky { position: sticky; top: var(--header-h); z-index: 20; padding: .8rem 0; margin: var(--s5) 0; background: linear-gradient(180deg, var(--bg-1) 70%, transparent); } .grid-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4) var(--s3); grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .grid-cards { grid-template-columns: repeat(5, 1fr); gap: var(--s5) var(--s4); } } @media (min-width: 1200px) { .grid-cards { grid-template-columns: repeat(6, 1fr); } } .grid-cards > li { min-width: 0; } .tile-art { position: relative; display: grid; gap: .45rem; } .tile-art .no, .tile-art .acard-no { font: 600 .875rem var(--font-body); letter-spacing: .03em; color: var(--chrome-3); text-align: center; } .tile-art.missing .verso { opacity: .5; filter: saturate(.5) brightness(.8); } .tile-art.missing .no, .tile-art.missing .acard-no { color: var(--faint); } .dupe { position: absolute; right: 6px; top: 6px; z-index: 5; min-width: 30px; text-align: center; padding: .25rem .5rem; font: 700 .8rem var(--font-body); letter-spacing: .03em; color: #1b1405; background: var(--gold); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } .locked { position: absolute; left: 6px; top: 6px; z-index: 5; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .5rem; font: 700 .8rem var(--font-body); letter-spacing: .03em; color: var(--ice); background: rgba(5, 14, 28, .88); border: 1px solid var(--edge-hi); border-radius: 6px; } .locked svg { width: 11px; height: 11px; } /* ---------------------------------------------------------------- 14. FISA CARTONASULUI */ .sheet { display: grid; gap: var(--s6); } @media (min-width: 960px) { .sheet { grid-template-columns: minmax(300px, 440px) 1fr; gap: var(--s7); align-items: start; } } .sheet > * { min-width: 0; } .sheet-card { position: relative; width: min(100%, 440px); margin-inline: auto; } .sheet-card::before { content: ''; position: absolute; inset: 8% -10% -6%; z-index: -1; background: radial-gradient(closest-side, var(--halo, rgba(110, 180, 255, .3)), transparent 72%); filter: blur(24px); } .sheet-card.r-legendary { --halo: rgba(240, 195, 100, .35); } .sheet-card.r-epic { --halo: rgba(160, 110, 230, .35); } .sheet-card.r-rare { --halo: rgba(90, 160, 235, .35); } .flip { perspective: 1400px; cursor: pointer; display: block; width: 100%; } .flip-in { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; transform-style: preserve-3d; transition: transform .9s var(--ease); transform: translateZ(0); } .flip.is-flipped .flip-in { transform: rotateY(180deg); } .flip-face { position: absolute; inset: 0; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--card-r); transition: visibility 0s .45s; } .flip-face.back { transform: rotateY(180deg); visibility: hidden; } .flip.is-flipped .flip-face.back { visibility: visible; } .flip.is-flipped .flip-face:not(.back) { visibility: hidden; } .flip-face, .flip-face .card3d, .flip-face .card3d img { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .flip-face .card3d { height: 100%; transform-style: flat; will-change: auto; } .serial { text-align: center; margin-top: var(--s4); font: 600 .875rem var(--font-body); letter-spacing: .03em; color: var(--chrome-2); } .serial b { color: var(--gold-1); } .owner-note { display: flex; gap: .8rem; align-items: center; padding: .9rem 1.1rem; border-left: 3px solid var(--gold-2); background: rgba(227, 192, 108, .07); border-radius: 0 10px 10px 0; font-size: .9rem; color: var(--chrome-2); margin: var(--s4) 0; } .owner-box { position: relative; border: 1px solid var(--edge); border-radius: var(--r-md); background: linear-gradient(160deg, rgba(22, 48, 88, .45), rgba(7, 18, 36, .55)); padding: var(--s4) var(--s5); margin: var(--s4) 0; } .owner-box > h2:first-child { margin-top: 0; } .story { max-width: 62ch; color: var(--muted); } .copy { border-top: 1px solid var(--edge); padding: .7rem 0; } .locked-note { border: 1px dashed var(--edge-hi); border-radius: var(--r-md); padding: .9rem 1.1rem; color: var(--muted); } .share { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: var(--s4) 0; } .share strong { font: 600 .875rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--chrome-2); } .brand-box { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: center; } .destroy-card { display: flex; gap: var(--s4); align-items: flex-start; margin: var(--s4) 0; } .destroy-card img { width: 140px; height: auto; border-radius: 8px; } .destroy-points { font-weight: 700; color: var(--gold-1); font-size: 1.1rem; } details summary { cursor: pointer; color: var(--ice); } /* ---------------------------------------------------------------- 15. TRADE + NOTIFICARI */ .trade-tabs { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: var(--s4) 0; border-bottom: 1px solid var(--edge); } .trade-tabs a { padding: .5rem .1rem; color: var(--muted); font: 600 .875rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; } .trade-tabs a[aria-current="page"] { color: #fff; border-bottom: 2px solid var(--gold-2); } .trade-sides { align-items: start; } .trade-sides h2 { font-size: .95rem; letter-spacing: .2em; color: var(--chrome-2); margin-top: 0; } .trade-items { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .trade-status { vertical-align: middle; } .trade-status.s-accepted { background: linear-gradient(180deg, #8ef0b4, #3fae75); color: #04140d; } .trade-status.s-rejected, .trade-status.s-cancelled, .trade-status.s-expired { background: #33373d; color: #c9ced6; } .trade-note { margin: var(--s4) 0; } .trade-link { width: min(100%, 26rem); } .trade-pick { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; padding: 0; margin: .5rem 0 var(--s4); max-height: 34rem; overflow-y: auto; } .trade-pick .pick { display: flex; flex-direction: column; gap: .2rem; cursor: pointer; position: relative; border: 2px solid transparent; border-radius: 10px; padding: .25rem; margin: 0; letter-spacing: normal; text-transform: none; font: 400 .875rem var(--font-body); color: var(--text); } .trade-pick .pick:has(input:checked) { border-color: var(--gold-2); background: rgba(227, 192, 108, .06); } .trade-pick .pick input { position: absolute; top: .5rem; left: .5rem; width: 1.3rem; height: 1.3rem; z-index: 1; } .trade-pick .pick img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--edge); display: block; } .trade-matches > li { max-width: none; } form.inline, .form-inline { display: inline; } .notif-list li { padding: .6rem .9rem; border: 1px solid var(--edge); border-radius: 10px; background: rgba(8, 20, 40, .5); margin: .4rem 0; } .notif-list li.unread { font-weight: 600; border-color: var(--gold-3); } .trade-board { display: grid; gap: var(--s5); align-items: center; } @media (min-width: 960px) { .trade-board { grid-template-columns: 1fr auto 1fr; } } .trade-board > * { min-width: 0; } .swap { display: grid; place-items: center; width: 74px; height: 74px; margin-inline: auto; border-radius: 50%; border: 1px solid var(--edge-hi); background: radial-gradient(circle, rgba(110, 180, 255, .3), rgba(5, 14, 28, .9)); box-shadow: 0 0 40px -6px var(--glow); color: var(--ice); animation: swapPulse 3.4s ease-in-out infinite; } .swap svg { width: 34px; height: 34px; } @keyframes swapPulse { 0%, 100% { box-shadow: 0 0 40px -10px var(--glow); } 50% { box-shadow: 0 0 56px 0 var(--glow); } } @media (max-width: 959px) { .swap { transform: rotate(90deg); animation: none; } } .status { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 999px; font: 700 .8rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; border: 1px solid var(--edge-hi); color: var(--ice); background: rgba(110, 180, 255, .1); } .match { display: grid; gap: var(--s3); align-items: center; grid-template-columns: auto 1fr auto; padding: .9rem 1.1rem; border: 1px solid var(--edge); border-radius: 12px; background: rgba(8, 20, 40, .55); } .match p { margin: 0; font-size: .9rem; color: var(--muted); } .stack { display: grid; gap: var(--s3); } /* ---------------------------------------------------------------- 16. TABELE */ .table-wrap { overflow-x: auto; border: 1px solid var(--edge); border-radius: 12px; background: rgba(6, 16, 32, .7); margin-bottom: var(--s4); } table { width: 100%; border-collapse: collapse; font-size: .9rem; } th { text-align: left; font: 600 .875rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--muted); padding: .8rem 1rem; border-bottom: 1px solid var(--edge); background: rgba(15, 37, 66, .55); white-space: nowrap; } td { padding: .7rem 1rem; border-bottom: 1px solid rgba(150, 185, 230, .08); vertical-align: top; } tr:hover td { background: rgba(110, 180, 255, .05); } .stats-table { font-size: .88rem; } .stats-table th, .stats-table td { text-align: right; white-space: nowrap; padding: .55rem .7rem; } .stats-table th:nth-child(-n+3), .stats-table td:nth-child(-n+3) { text-align: left; } .totals { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin: var(--s4) 0; } .totals dt { display: block; } .totals dd { font: 700 1.3rem var(--font-title); } .totals > div { display: grid; } /* ---------------------------------------------------------------- 17. DIVERSE */ .w0 { width: 0%; } .w1 { width: 1%; } .w2 { width: 2%; } .w3 { width: 3%; } .w4 { width: 4%; } .w5 { width: 5%; } .w6 { width: 6%; } .w7 { width: 7%; } .w8 { width: 8%; } .w9 { width: 9%; } .w10 { width: 10%; } .w11 { width: 11%; } .w12 { width: 12%; } .w13 { width: 13%; } .w14 { width: 14%; } .w15 { width: 15%; } .w16 { width: 16%; } .w17 { width: 17%; } .w18 { width: 18%; } .w19 { width: 19%; } .w20 { width: 20%; } .w21 { width: 21%; } .w22 { width: 22%; } .w23 { width: 23%; } .w24 { width: 24%; } .w25 { width: 25%; } .w26 { width: 26%; } .w27 { width: 27%; } .w28 { width: 28%; } .w29 { width: 29%; } .w30 { width: 30%; } .w31 { width: 31%; } .w32 { width: 32%; } .w33 { width: 33%; } .w34 { width: 34%; } .w35 { width: 35%; } .w36 { width: 36%; } .w37 { width: 37%; } .w38 { width: 38%; } .w39 { width: 39%; } .w40 { width: 40%; } .w41 { width: 41%; } .w42 { width: 42%; } .w43 { width: 43%; } .w44 { width: 44%; } .w45 { width: 45%; } .w46 { width: 46%; } .w47 { width: 47%; } .w48 { width: 48%; } .w49 { width: 49%; } .w50 { width: 50%; } .w51 { width: 51%; } .w52 { width: 52%; } .w53 { width: 53%; } .w54 { width: 54%; } .w55 { width: 55%; } .w56 { width: 56%; } .w57 { width: 57%; } .w58 { width: 58%; } .w59 { width: 59%; } .w60 { width: 60%; } .w61 { width: 61%; } .w62 { width: 62%; } .w63 { width: 63%; } .w64 { width: 64%; } .w65 { width: 65%; } .w66 { width: 66%; } .w67 { width: 67%; } .w68 { width: 68%; } .w69 { width: 69%; } .w70 { width: 70%; } .w71 { width: 71%; } .w72 { width: 72%; } .w73 { width: 73%; } .w74 { width: 74%; } .w75 { width: 75%; } .w76 { width: 76%; } .w77 { width: 77%; } .w78 { width: 78%; } .w79 { width: 79%; } .w80 { width: 80%; } .w81 { width: 81%; } .w82 { width: 82%; } .w83 { width: 83%; } .w84 { width: 84%; } .w85 { width: 85%; } .w86 { width: 86%; } .w87 { width: 87%; } .w88 { width: 88%; } .w89 { width: 89%; } .w90 { width: 90%; } .w91 { width: 91%; } .w92 { width: 92%; } .w93 { width: 93%; } .w94 { width: 94%; } .w95 { width: 95%; } .w96 { width: 96%; } .w97 { width: 97%; } .w98 { width: 98%; } .w99 { width: 99%; } .w100 { width: 100%; } /* ---------------------------------------------------------------- 18. SUBSOL */ .site-footer { margin-top: var(--s8); border-top: 1px solid var(--edge); background: rgba(2, 7, 15, .8); padding: var(--s7) 0 var(--s6); font-size: .9rem; color: var(--muted); } .footer-grid { display: grid; gap: var(--s6); } @media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; } } .site-footer .brand-foot img { height: 52px; width: auto; } .site-footer h4 { margin-bottom: var(--s3); } .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .footer-links a { color: var(--muted); font-size: .92rem; } .footer-links a:hover { color: #fff; } .social { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: var(--s4); } .fiction { color: var(--faint); font-size: .875rem; line-height: 1.5; max-width: 62ch; margin-top: var(--s4); } .footer-company { margin-top: .5rem; } .copyright { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--edge); color: var(--faint); font-size: .875rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; } /* ---------------------------------------------------------------- 19. REVELARE LA SCROLL + MISCARE REDUSA + CAPTURI */ .js .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); } .js .rv.in { opacity: 1; transform: none; } .rv.d1 { --d: 80ms; } .rv.d2 { --d: 160ms; } .rv.d3 { --d: 240ms; } .rv.d4 { --d: 320ms; } @media (hover: none) { .btn:hover { transform: none; filter: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .js .rv { opacity: 1; transform: none; } .card3d { transform: none !important; } .fan-rot { transform: none; } .pack-art.tear, .rcard.r-legendary.flip::before { animation: none; } .rcard, .rcard-inner { transition: none; } } /* mod captura (Playwright fullPage): fara blur si fundal fix */ .shot body { background-attachment: scroll; } .shot .panel, .shot .glass, .shot .site-header.is-solid, .shot .filters.sticky, .shot .menu > summary { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .shot .site-header { position: absolute; } .shot .filters.sticky { position: static; } a.tilt { display: block; } .card3d > img { display: block; } /* ---------------------------------------------------------------- 20. FORUM */ .forum-search { display: flex; gap: .5rem; margin: var(--s4) 0; max-width: 520px; } .forum-search input { flex: 1; min-width: 0; } .forum-note { margin: var(--s4) 0; padding: var(--s4); border-color: rgba(227, 192, 108, .45); } .forum-note p { margin: .3rem 0 0; color: var(--muted); } .forum-cats { display: grid; gap: var(--s4); grid-template-columns: 1fr; } @media (min-width: 720px) { .forum-cats { grid-template-columns: 1fr 1fr; } } .forum-cats li { margin: 0; } .forum-cat { display: grid; gap: .35rem; padding: var(--s4); height: 100%; transition: transform .3s var(--ease), border-color .3s; } .forum-cat:hover { transform: translateY(-3px); border-color: var(--edge-hi); } .forum-cat-name { font: 700 1rem var(--font-body); letter-spacing: .03em; color: #fff; } .tlist { display: grid; gap: .6rem; } .tlist li { display: grid; gap: .25rem; padding: .8rem var(--s4); margin: 0; } .tlist li.pinned { border-color: rgba(227, 192, 108, .5); } .tlist-title { font: 600 1.02rem var(--font-body); color: #fff; overflow-wrap: anywhere; } .tlist-flags:empty { display: none; } .tlist-flags { display: flex; gap: .4rem; flex-wrap: wrap; } .pill.staff { background: var(--ice); color: #06101f; } .pill.muted-pill { background: transparent; border: 1px solid var(--edge-hi); color: var(--chrome-3); } .pill.danger-pill { background: transparent; border: 1px solid rgba(255, 140, 140, .6); color: var(--danger); } .forum-title { overflow-wrap: anywhere; } .forum-sub { margin: .4rem 0 var(--s4); } .fposts { display: grid; gap: var(--s3); margin: var(--s4) 0; } .fpost { padding: var(--s4); min-width: 0; } .fpost.removed { opacity: .72; } .fpost-head { display: flex; flex-wrap: wrap; gap: .3rem .75rem; align-items: baseline; margin-bottom: .5rem; } .fauthor { font: 700 .9rem var(--font-body); letter-spacing: .03em; color: #fff; overflow-wrap: anywhere; } .fpost-date { margin-left: auto; } .fbody { overflow-wrap: anywhere; word-break: break-word; } .fbody p { margin: 0 0 .7rem; } .fbody ul { margin: 0 0 .7rem; padding-left: 1.3rem; } .fbody code { background: rgba(110, 180, 255, .12); padding: .05em .35em; border-radius: 4px; font-size: .92em; } .fbody a { color: var(--ice); text-decoration: underline; text-underline-offset: 2px; } .fquote { margin: .3rem 0 .7rem; padding: .5rem .85rem; border-left: 3px solid var(--gold-3); background: rgba(10, 26, 49, .7); color: var(--muted); font-size: .92rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; overflow-wrap: anywhere; } .fquote b { color: var(--chrome-2); } .fhidden { margin: 0; font-style: italic; } .fpost-foot { display: flex; gap: 1.1rem; margin-top: .5rem; } .fpost-foot a { color: var(--chrome-3); } .fpost-foot a:hover { color: #fff; } .fcard { display: inline-block; vertical-align: middle; margin: .15rem .3rem .15rem 0; width: 84px; border-radius: 6px; box-shadow: 0 0 0 1px var(--edge), 0 6px 16px -8px rgba(0, 0, 0, .8); } .fcard img { display: block; width: 100%; height: auto; border-radius: 6px; } .fcard.r-rare { box-shadow: 0 0 0 1px var(--rare), 0 0 14px -4px var(--rare-glow); } .fcard.r-epic { box-shadow: 0 0 0 1px var(--epic), 0 0 14px -4px var(--epic-glow); } .fcard.r-legendary { box-shadow: 0 0 0 1px var(--legendary), 0 0 16px -3px var(--legendary-glow); } .fcard-text { color: var(--ice); } .ftrade { display: grid; gap: .6rem; margin: .4rem 0 .8rem; padding: .8rem; border: 1px solid var(--edge-hi); border-radius: var(--r-md); background: rgba(10, 26, 49, .75); color: var(--text); text-decoration: none; max-width: 520px; } .ftrade:hover { border-color: var(--gold-2); } .ft-head { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; font-size: .92rem; overflow-wrap: anywhere; } .ft-sides { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } .ft-side { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; min-width: 0; } .ft-card { display: block; width: 56px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px var(--edge); } .ft-card img { display: block; width: 100%; height: auto; } .ft-more { color: var(--muted); font-size: .875rem; } .ft-arrow { color: var(--gold-2); font-size: 1.1rem; } .ft-cta { font: 600 .875rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--ice); } .forum-compose { margin-top: var(--s5); } .forum-compose textarea { width: 100%; min-height: 9rem; resize: vertical; } .forum-help { margin: 0 0 var(--s3); color: var(--muted); } .forum-help summary { cursor: pointer; font-size: .9rem; } .held { margin: var(--s4) 0; border-color: rgba(255, 177, 92, .55); } .held-item { margin: .6rem 0; } .radio { display: block; margin: .35rem 0; } .forum-pager { display: flex; gap: .8rem; align-items: center; justify-content: center; margin: var(--s4) 0; flex-wrap: wrap; } /* ---------------------------------------------------------------- 21. PROTECTIE ANTI-COPIERE (vezi assets/js/protect.js) Viteza-bump: nu opreste capturile de ecran. Imaginile nu au URL public direct si poarta watermark (server). */ body[data-protect], body[data-protect] a, body[data-protect] img { -webkit-touch-callout: none; } body[data-protect] img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; } body[data-protect] :is(.card3d, .fcard, .ft-card, .tile, .rcard, .fan-card, .sheet-card, .destroy-card, .pick) img { pointer-events: none; } body[data-protect]:not([data-copy="ok"]) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } body[data-protect] :is(input, textarea, select, [contenteditable="true"], [data-allow-copy], [data-allow-copy] *) { -webkit-user-select: text; user-select: text; } @media print { body[data-protect="strict"] > * { display: none !important; } body[data-protect="strict"]::before { content: attr(data-print-msg); display: block; padding: 2rem; font: 16px/1.5 sans-serif; color: #000; background: #fff; } } /* Insigna CHECK-IN (cartonas primit din check-in: nu se distruge, nu se schimba) */ .checkin-badge { position: absolute; right: 6px; top: 6px; z-index: 5; padding: .22rem .5rem; font: 700 .875rem var(--font-body); letter-spacing: .03em; color: var(--ice); background: rgba(5, 14, 28, .88); border: 1px solid var(--edge-hi); border-radius: 6px; } .checkin-badge.inline { position: static; display: inline-block; vertical-align: middle; } /* Butonul „?” din cont (ajutor) */ .help-box { margin-left: auto; } .help-box[open] { flex: 1 1 100%; } .help-btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--edge-hi); color: var(--ice); font: 700 1.1rem var(--font-body); background: rgba(5, 14, 28, .6); user-select: none; } .help-btn::-webkit-details-marker { display: none; } .help-btn:hover, .help-box[open] .help-btn { background: rgba(5, 14, 28, .95); } .help-body { margin-top: var(--s4); } .help-body h3 { margin: 1.1rem 0 .3rem; font-size: 1rem; } .help-body p { margin: 0; } /* QR-ul exemplarului (fisa cartonasului / pagina /copy) */ .qr-box { display: inline-block; line-height: 0; background: #fff; padding: 6px; border-radius: 6px; } .qr-box svg { width: 112px; height: 112px; display: block; } .copy-facts { margin: .4rem 0; } .copy-qr { display: flex; align-items: center; gap: var(--s4); margin: var(--s3) 0; flex-wrap: wrap; } @media (max-width: 1599px) { .nav > a.nav-wide { display: none; } } /* intre 1200 si 1599 px antetul e deja plin (RO): Catalogul ramane in meniul mobil si in subsol */ /* Video pe cartonas (spec. 44): sub imaginea cartonasului, doar proprietarului, cu sunet la click */ .sheet-left { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; } .card-video { padding: var(--s3); border: 1px solid var(--edge); border-radius: var(--r-lg); background: rgba(10, 26, 49, .6); } .cv-stage { position: relative; border-radius: var(--r-md); overflow: hidden; background: #000; } .cv-stage img, .cv-stage video { display: block; width: 100%; height: auto; } .cv-stage img[hidden], .cv-stage video[hidden] { display: none; } .cv-big { position: absolute; inset: 0; margin: auto; width: 4.2rem; height: 4.2rem; border-radius: 50%; border: 2px solid var(--gold-2); color: var(--gold-1); font-size: 1.6rem; background: rgba(3, 9, 18, .7); cursor: pointer; display: grid; place-items: center; padding-left: .2rem; transition: transform .2s, background .2s; } .cv-big:hover { transform: scale(1.08); background: rgba(93, 70, 25, .7); } .cv-big[hidden] { display: none; } .cv-bar { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; } .cv-bar[hidden] { display: none; } .cv-btn { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--edge-hi); background: rgba(5, 14, 28, .8); color: #fff; cursor: pointer; font-size: .875rem; } .cv-seek { flex: 1; min-width: 4rem; } .cv-vol { width: 4.5rem; } .cv-time { font: 600 .875rem var(--font-body); color: var(--muted); white-space: nowrap; } .cv-hint { margin: .4rem 0 0; } @media (max-width: 520px) { .cv-vol { display: none; } } /* Radio FTR 2050 (spec. 46): player mic in cont, fixat jos-stanga; sub 560 px: bara jos pe toata latimea */ /* avatare (spec. 55): emblema implicita / constructor / vehicul din cartonas; Epic si Legendary cu rama speciala */ .avatar { --av: 1.7rem; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--av); height: var(--av); border-radius: 50%; border: 1px solid var(--gold-3); background: radial-gradient(circle at 30% 25%, #1b3b66, #07142a); overflow: hidden; vertical-align: middle; color: var(--gold-1); } .avatar > img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; } .avatar > svg.emblem { width: 80%; height: 80%; display: block; } .avatar.av-card > img { object-position: 50% 42%; transform: scale(1.55); } .avatar.av-default > img { transform: scale(1.0); } .avatar.av-epic { border-color: var(--epic); box-shadow: 0 0 0 2px var(--epic-bg), 0 0 .7rem var(--epic-glow); } .avatar.av-legendary { border-color: var(--gold-2); box-shadow: 0 0 0 2px #2a1a05, 0 0 .9rem var(--legendary-glow); } .avatar.av-locked { background: rgba(255, 255, 255, .05); border-style: dashed; } .avatar.av-locked svg { width: 45%; height: 45%; } .av-sm { --av: 1.7rem; margin-right: .35rem; } .av-md { --av: 2.6rem; } .av-lg { --av: 4rem; } .av-initials { position: absolute; left: 0; right: 0; bottom: 0; padding: .05rem 0 .1rem; background: rgba(2, 8, 18, .72); color: var(--gold-1); font: 700 .8rem/1.2 var(--font-body); letter-spacing: .03em; text-align: center; } .av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.8rem, 1fr)); gap: .6rem; margin-bottom: var(--s4); } .av-tile { display: grid; justify-items: center; align-content: start; gap: .35rem; padding: .6rem .3rem; border-radius: var(--r-md); border: 1px solid var(--edge); background: rgba(255, 255, 255, .03); color: var(--chrome-2); font: inherit; cursor: pointer; min-width: 0; } .av-tile:hover { border-color: var(--edge-hi); background: rgba(140, 200, 255, .08); } .av-tile:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; } .av-tile.is-current { border-color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--gold-3); background: rgba(227, 192, 108, .1); } .av-tile.locked { opacity: .5; cursor: not-allowed; border-style: dashed; } .av-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; } .av-gallery h3 { margin: var(--s4) 0 var(--s2); font-size: 1rem; } .av-locked > summary { cursor: pointer; font-weight: 600; margin: var(--s3) 0; } .av-pick > summary { cursor: pointer; font-weight: 600; } .av-opt { position: relative; display: inline-grid; place-items: center; cursor: pointer; padding: 3px; } .av-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .av-opt input:checked + .avatar { outline: 2px solid var(--gold-2); outline-offset: 2px; } .av-opt input:focus-visible + .avatar { outline: 2px solid var(--ice); outline-offset: 2px; } .av-pick .av-grid { grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); justify-items: center; margin-top: var(--s3); } .hwho .avatar, .who .avatar, .rank-name .avatar { vertical-align: middle; } /* ---------------------------------------------------------------- Radio FTR 2050 (integrat in design; un singur element, mutat intre sloturi de radio.js) data-mode: card (meniul din stanga) · mini (meniu restrans) · strip (banda de deasupra barei de jos, telefon) · header (buton langa EN / RO + panou) · stash (ascuns) */ .radio { display: block; margin: 0; position: relative; color: var(--text); } .radio[data-mode="stash"] { display: none; } .radio-open { display: none; } .radio-cover { width: 2.6rem; height: 2.6rem; object-fit: cover; border-radius: 8px; flex: none; border: 1px solid var(--gold-4); } .radio-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .1rem .6rem; } .radio-meta { display: grid; min-width: 0; line-height: 1.2; } .radio-name { font: 700 .8rem var(--font-body); letter-spacing: .03em; color: var(--gold-2); text-transform: uppercase; } .radio-title { font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .radio-next { font-size: .875rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .radio-next:empty { display: none; } .radio-btn { position: relative; flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid var(--gold-3); background: rgba(93, 70, 25, .45); color: var(--gold-1); font-size: .875rem; cursor: pointer; padding: 0; } .radio-btn:hover { background: rgba(93, 70, 25, .75); } .radio-btn:focus-visible, .radio-open:focus-visible, .radio-vol:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; } .radio.is-on .radio-btn { background: var(--gold); color: #1a1205; } .radio.needs-tap .radio-btn { animation: radio-pulse 1.4s ease-in-out infinite; } @keyframes radio-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(227, 192, 108, .6); } 50% { box-shadow: 0 0 0 .5rem rgba(227, 192, 108, 0); } } /* egalizator animat discret (doar cand cant) */ .eq { display: none; align-items: flex-end; gap: 2px; height: .95rem; } .eq i { display: block; width: 3px; height: 100%; background: currentColor; border-radius: 1px; transform-origin: bottom; transform: scaleY(.25); } .radio.is-on .eq { display: inline-flex; } .radio.is-on .eq i { animation: radio-eq 1s ease-in-out infinite; } .radio.is-on .eq i:nth-child(2) { animation-delay: -.3s; animation-duration: .8s; } .radio.is-on .eq i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.2s; } .radio.is-on .eq i:nth-child(4) { animation-delay: -.15s; animation-duration: .9s; } @keyframes radio-eq { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } } .radio .radio-btn .eq { display: none; } .radio.is-on .radio-btn .radio-glyph { display: inline; } /* slider de volum auriu (nu cel implicit al browserului) */ .radio-vol { -webkit-appearance: none; appearance: none; width: 100%; height: 1.1rem; background: transparent; cursor: pointer; margin: 0; } .radio-vol::-webkit-slider-runnable-track { height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--gold-2), var(--gold-4)); } .radio-vol::-moz-range-track { height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--gold-2), var(--gold-4)); } .radio-vol::-webkit-slider-thumb { -webkit-appearance: none; width: .85rem; height: .85rem; margin-top: -.31rem; border-radius: 50%; border: 1px solid #1a1205; background: var(--gold-1); box-shadow: 0 0 .4rem rgba(227, 192, 108, .6); } .radio-vol::-moz-range-thumb { width: .75rem; height: .75rem; border-radius: 50%; border: 1px solid #1a1205; background: var(--gold-1); box-shadow: 0 0 .4rem rgba(227, 192, 108, .6); } /* card (meniul din stanga): copertа mica, titlu, play auriu; volumul pe rand separat */ .radio[data-mode="card"] { padding: .45rem; border: 1px solid var(--gold-4); border-radius: var(--r-md); background: rgba(227, 192, 108, .06); } .radio[data-mode="card"] .radio-vol { grid-column: 1 / -1; margin-top: .25rem; } /* mini (meniu restrans): doar butonul rotund auriu cu egalizator; volumul apare la hover / focus / apasare lunga */ .radio[data-mode="mini"] .radio-body { display: block; } .radio[data-mode="mini"] .radio-cover, .radio[data-mode="mini"] .radio-meta { display: none; } .radio[data-mode="mini"] .radio-btn { margin: 0 auto; width: 2.6rem; height: 2.6rem; } .radio[data-mode="mini"].is-on .radio-btn .radio-glyph { display: none; } .radio[data-mode="mini"].is-on .radio-btn .eq { display: inline-flex; } .radio[data-mode="mini"] .radio-vol { position: absolute; z-index: 5; left: 50%; top: calc(100% + .1rem); width: 3.6rem; transform: translateX(-50%); padding: .3rem .35rem; box-sizing: content-box; border: 1px solid var(--gold-4); border-radius: 8px; background: rgba(5, 14, 28, .96); opacity: 0; pointer-events: none; transition: opacity .15s; } .radio[data-mode="mini"]:hover .radio-vol, .radio[data-mode="mini"]:focus-within .radio-vol, .radio[data-mode="mini"].show-vol .radio-vol { opacity: 1; pointer-events: auto; } /* strip (telefon): banda subtire lipita de bara de jos, aceeasi latime si acelasi aspect */ .radio[data-mode="strip"] { padding: .3rem .8rem; border-top: 1px solid var(--edge-hi); background: rgba(4, 11, 22, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .radio[data-mode="strip"] .radio-body { gap: 0 .6rem; } .radio[data-mode="strip"] .radio-cover { width: 1.9rem; height: 1.9rem; border-radius: 6px; } .radio[data-mode="strip"] .radio-meta { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: .5rem; } .radio[data-mode="strip"] .radio-next, .radio[data-mode="strip"] .radio-vol { display: none; } .radio[data-mode="strip"] .radio-btn { width: 2rem; height: 2rem; font-size: .875rem; } .radio[data-mode="strip"] .radio-title { font-size: .875rem; } /* header (pagini fara meniu): buton mic langa EN / RO; click = panou cu controale */ .hdr-radio { display: inline-flex; vertical-align: middle; margin-right: .5rem; } .radio[data-mode="header"] .radio-open { display: inline-grid; place-items: center; position: relative; width: 2.2rem; height: 2.2rem; padding: 0; border-radius: 50%; border: 1px solid var(--gold-3); background: rgba(93, 70, 25, .35); color: var(--gold-1); cursor: pointer; } .radio[data-mode="header"] .radio-open svg { width: 1.15rem; height: 1.15rem; } .radio[data-mode="header"] .radio-open .eq { display: none; position: absolute; inset: 0; margin: auto; width: fit-content; height: .9rem; background: rgba(5, 14, 28, .9); padding: 0 .2rem; border-radius: 4px; } .radio[data-mode="header"].is-on .radio-open { background: var(--gold); color: #1a1205; } .radio[data-mode="header"].is-on .radio-open svg { opacity: 0; } .radio[data-mode="header"].is-on .radio-open .eq { display: inline-flex; background: transparent; } .radio[data-mode="header"] .radio-body { display: none; position: absolute; z-index: 70; right: 0; top: calc(100% + .6rem); width: min(17rem, 86vw); padding: .7rem; border: 1px solid var(--gold-4); border-radius: var(--r-md); background: rgba(5, 14, 28, .97); box-shadow: 0 1rem 2rem -.6rem rgba(0, 0, 0, .7); } .radio[data-mode="header"].open .radio-body { display: grid; } .radio[data-mode="header"] .radio-vol { grid-column: 1 / -1; margin-top: .3rem; } @media (prefers-reduced-motion: reduce) { .radio.needs-tap .radio-btn, .radio.is-on .eq i { animation: none; } .radio.is-on .eq i { transform: scaleY(.7); } } /* banner „Valul X epuizat — urmatorul pe [data]” (spec. 59) cu numaratoare; apare in checkout, pachete, cont, prima pagina */ .wave-banner { margin: 0 0 var(--s4); padding: var(--s4) var(--s5); border-color: var(--gold-3); background: linear-gradient(90deg, rgba(227, 192, 108, .14), rgba(5, 14, 28, .6)); } .wave-banner p { margin: 0 0 .3rem; } .wave-banner .cd { display: inline-flex; gap: .6rem; margin-top: .35rem; } .wave-banner .cd span { display: grid; min-width: 3.4rem; padding: .35rem .5rem; border: 1px solid var(--edge-hi); border-radius: var(--r-sm); background: rgba(3, 9, 18, .6); text-align: center; } .wave-banner .cd i { font: 700 1.2rem var(--font-title); font-style: normal; color: var(--gold-1); } .wave-banner .cd small { display: block; font: 500 .8rem var(--font-body); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; } /* verificare anti-robot (pow.js) */ .pow { margin: 0; font-size: .88rem; color: var(--muted); cursor: default; } /* verificarea anti-robot e invizibila; apare doar mesajul de eroare */ .pow-status:empty { display: none; } .pow.is-fail { margin: 0 0 var(--s4, 1rem); color: #ff9a8a; cursor: pointer; text-decoration: underline; } /* Founding Collector (insigna permanenta, lipita de nume) */ .pill.founding { display: inline-flex; align-items: center; gap: .25rem; margin-left: .45rem; padding: .05rem .5rem; border: 1px solid var(--gold-3); border-radius: 999px; color: var(--gold-1); background: linear-gradient(180deg, rgba(93, 70, 25, .5), rgba(25, 12, 2, .7)); font-size: .8rem; letter-spacing: .04em; vertical-align: middle; white-space: nowrap; } .pill.founding .ico { width: .8rem; height: .8rem; color: var(--gold-2); } .founding-left { display: flex; align-items: center; gap: .4rem; color: var(--gold-1); } .founding-left .ico { width: 1.1rem; height: 1.1rem; } /* mesajele flash pe paginile „full” (antet transparent peste hero): sub antet, nu peste logo */ .page-flash { position: absolute; top: calc(var(--header-h, 4.5rem) + .6rem); left: 0; right: 0; z-index: 45; pointer-events: none; } .page-flash .flash { pointer-events: auto; max-width: 36rem; margin-inline: auto; background: rgba(4, 11, 22, .94); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); } /* „Avantajele contului tau” (prima pagina) + pagina Bonusuri si reguli */ .perks-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); } .perk { display: grid; gap: .5rem; align-content: start; text-align: left; } .perk h3 { margin: 0; font-size: 1rem; line-height: 1.25; letter-spacing: .03em; color: var(--gold-1); overflow-wrap: break-word; } .perks-grid { grid-auto-rows: 1fr; } .perk p { margin: 0; color: var(--muted); font-size: .92rem; } .perk-ico { width: 3.3rem; height: 3.3rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-3); background: linear-gradient(180deg, rgba(93, 70, 25, .5), rgba(25, 12, 2, .7)); flex: none; } .perk-ico .ico { width: 1.75rem; height: 1.75rem; color: var(--gold-2); } .perks-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.6rem; margin: var(--s6) 0 0; } .perks-more { color: var(--gold-1); } .bonuses-page { padding-block: var(--s6); } .bonus-list { display: grid; gap: var(--s4); margin-bottom: var(--s5); } .bonus-item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; } .bonus-item h2 { margin: 0 0 .4rem; font-size: 1.15rem; color: var(--gold-1); } .bonus-item p { margin: 0 0 .5rem; } .bonus-rule { color: var(--muted); font-size: .9rem; } .bonus-general ul { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .4rem; } @media (max-width: 640px) { .bonus-item { grid-template-columns: 1fr; } .perks-cta .btn { width: 100%; justify-content: center; } } /* Banner discret „distributie doar in Romania” (spec. 73) */ .geo-banner .geo-x { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); width: 1.8rem; height: 1.8rem; border: 0; background: none; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; border-radius: 50%; } .geo-banner .geo-x:hover, .geo-banner .geo-x:focus-visible { background: rgba(255, 255, 255, .15); } .geo-banner a { white-space: nowrap; font-weight: 600; } .geo-bonus a { font-weight: 600; } .faq-more { margin-top: 1rem; text-align: center; } /* ediția fizică (spec. 26) */ .phys-pill { display: inline-block; padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--gold-3); color: var(--gold-1); background: rgba(93, 70, 25, .35); font: 700 .8rem var(--font-body); letter-spacing: .03em; vertical-align: middle; } .phys-pill.retired { border-style: dashed; color: var(--chrome-2); background: rgba(255, 255, 255, .06); } .checkin-badge.phys-badge { color: var(--gold-1); border-color: var(--gold-3); } .phys-note { margin: .5rem 0; padding: .6rem .8rem; border: 1px solid var(--gold-3); border-left-width: 4px; border-radius: 8px; background: rgba(93, 70, 25, .22); font-size: .9rem; line-height: 1.45; } .tile-phys { position: absolute; left: 6%; bottom: 6%; font-size: .875rem; } .phys-retire { margin-top: .6rem; } .phys-retire summary { cursor: pointer; color: var(--chrome-2); font-size: .88rem; } .phys-retire form { display: grid; gap: .6rem; margin-top: .6rem; max-width: 30rem; } .avatar.av-ambassador { box-shadow: 0 0 0 2px var(--gold-2), 0 0 14px rgba(227, 192, 108, .55); } /* ---- serii viitoare (0i) */ .next-series .next-topics { list-style: none; margin: var(--s5) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; } .next-series .next-topics li { padding: .8rem 1.4rem; text-align: center; } .next-series .next-topics li.more { border-style: dashed; } .next-series .next-topics b { font: 600 .95rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; } .next-series .next-gift { text-align: center; color: var(--gold-1); max-width: 46rem; margin: 0 auto; } /* ---- Indicatori de stoc pe raritate (fara cifre) ---- */ .stock-levels { margin: var(--s4) auto; max-width: 960px; text-align: center; } .stock-levels h3 { font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 var(--s3); opacity: .8; } .stock-levels { container-type: inline-size; } .stock-levels ul { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3) var(--s4); justify-items: center; max-width: 720px; } .stock-levels li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } @container (max-width: 520px) { .stock-levels ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .stock-levels ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .stock-levels .sl-plenty b { color: #5fd29b; } .stock-levels .sl-medium b { color: #7fb4e6; } .stock-levels .sl-low b { color: #e8b04a; } .stock-levels .sl-out b { color: #e56b6b; } /* Subsol: ANPC SAL + logo-uri de plata (incarcate din admin) */ .footer-legal-strip { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 18px; } .footer-legal-strip .fl-link { display: inline-flex; align-items: center; color: inherit; text-decoration: underline; } .footer-legal-strip .fl-link img { background: #fff; border-radius: 4px; padding: 3px; } .fl-pay { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; align-items: center; } .fl-pay img { background: #fff; border-radius: 4px; padding: 4px 8px; display: block; } .footer-ip { display: block; opacity: .7; font-size: .875rem; margin-top: 6px; } /* Prima pagina: reparatii (05.10.2026) */ .split-copy h2.display { font-size: clamp(1.45rem, 5.2vw, 2.35rem); letter-spacing: .1em; line-height: 1.12; overflow-wrap: normal; word-break: normal; hyphens: none; } .step::after, .step:not(:last-child)::before { content: none !important; display: none !important; } .step { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; column-gap: var(--s4); row-gap: var(--s3); } .step .ico, .step h3 { margin: 0; } .step p { grid-column: 1 / -1; } .series-strip .panel { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 960px; margin-inline: auto; justify-items: center; align-items: start; } .series-strip .stat { width: 100%; justify-items: center; text-align: center; } .series-strip .stat + .stat { border-left: 1px solid var(--edge); } .perks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1100px) { .perks-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .perk h3 { font-size: .875rem; letter-spacing: .01em; } } @media (max-width: 640px) { .perks-grid { display: flex; grid-auto-rows: auto; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(-1 * var(--s3)); padding: 0 var(--s3) .4rem; } .perks-grid::-webkit-scrollbar { display: none; } .perks-grid .perk { flex: 0 0 82%; scroll-snap-align: center; } } .perks-dots { display: none; justify-content: center; gap: .55rem; margin: var(--s3) 0 0; } @media (max-width: 640px) { .perks-dots { display: flex; } } .perks-dots button { width: .6rem; height: .6rem; padding: 0; border-radius: 50%; border: 1px solid var(--gold-3); background: transparent; cursor: pointer; } .perks-dots button[aria-current="true"] { background: var(--gold-2); } .perk-wrap { min-width: 0; } .perks-grid { max-width: 1240px; margin-inline: auto; } .offers { max-width: 1040px; margin-inline: auto; } .pk-fan { position: relative; width: 100%; height: 215px; margin-bottom: 1.2rem; } .pk-fan img { position: absolute; left: 50%; bottom: 0; width: 92px; margin-left: -46px; transform-origin: 50% 100%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); } .pk-fan.n1 img { width: 124px; margin-left: -62px; } .pk-fan.n5 img:nth-child(1) { transform: translateX(-62px) rotate(-24deg); } .pk-fan.n5 img:nth-child(2) { transform: translateX(-31px) rotate(-12deg); } .pk-fan.n5 img:nth-child(3) { transform: translateX(0px) rotate(0deg); } .pk-fan.n5 img:nth-child(4) { transform: translateX(31px) rotate(12deg); } .pk-fan.n5 img:nth-child(5) { transform: translateX(62px) rotate(24deg); } .pk-fan.n10 img:nth-child(1) { transform: translate(-66px, -44px) rotate(-22deg) scale(.95); filter: brightness(.82) drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); } .pk-fan.n10 img:nth-child(6) { transform: translateX(-66px) rotate(-22deg); z-index: 2; } .pk-fan.n10 img:nth-child(2) { transform: translate(-33px, -44px) rotate(-11deg) scale(.95); filter: brightness(.82) drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); } .pk-fan.n10 img:nth-child(7) { transform: translateX(-33px) rotate(-11deg); z-index: 2; } .pk-fan.n10 img:nth-child(3) { transform: translate(0px, -44px) rotate(0deg) scale(.95); filter: brightness(.82) drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); } .pk-fan.n10 img:nth-child(8) { transform: translateX(0px) rotate(0deg); z-index: 2; } .pk-fan.n10 img:nth-child(4) { transform: translate(33px, -44px) rotate(11deg) scale(.95); filter: brightness(.82) drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); } .pk-fan.n10 img:nth-child(9) { transform: translateX(33px) rotate(11deg); z-index: 2; } .pk-fan.n10 img:nth-child(5) { transform: translate(66px, -44px) rotate(22deg) scale(.95); filter: brightness(.82) drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); } .pk-fan.n10 img:nth-child(10) { transform: translateX(66px) rotate(22deg); z-index: 2; } .pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } @media (max-width: 640px) { .pillars { grid-template-columns: 1fr; } } .cert-example .cert-wrap { position: relative; } .cert-tag { position: absolute; top: .7rem; right: .7rem; padding: .2rem .7rem; font: 700 .875rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--gold-1); background: rgba(3, 9, 18, .72); border: 1px solid var(--gold-3); border-radius: 999px; } .step h3 { font-size: .95rem; letter-spacing: .04em; min-width: 0; overflow-wrap: normal; } @media (max-width: 640px) { .series-strip .panel { gap: var(--s2); padding-inline: var(--s2); } .series-strip .stat span { letter-spacing: .08em; font-size: .875rem; } } /* Fundal „oras noaptea”: prima pagina + „In curand”; fix in spatele continutului, imaginea neatinsa (fara tenta / blur); doar o umbra usoara in stanga, in spatele textului */ body:has(.hero)::before, body:has(.coming)::before { content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: linear-gradient(90deg, rgba(2, 6, 14, .72) 0%, rgba(2, 6, 14, .5) 28%, rgba(2, 6, 14, 0) 55%), url('/assets/img/bg/city-night-1672.jpg') center / cover no-repeat; background: linear-gradient(90deg, rgba(2, 6, 14, .72) 0%, rgba(2, 6, 14, .5) 28%, rgba(2, 6, 14, 0) 55%), image-set(url('/assets/img/bg/city-night-1672.webp') type('image/webp'), url('/assets/img/bg/city-night-1672.jpg') type('image/jpeg')) center / cover no-repeat; } @media (max-width: 720px) { body:has(.hero)::before, body:has(.coming)::before { background: linear-gradient(90deg, rgba(2, 6, 14, .6) 0%, rgba(2, 6, 14, .35) 100%), url('/assets/img/bg/city-night-960.jpg') center / cover no-repeat; background: linear-gradient(90deg, rgba(2, 6, 14, .6) 0%, rgba(2, 6, 14, .35) 100%), image-set(url('/assets/img/bg/city-night-960.webp') type('image/webp'), url('/assets/img/bg/city-night-960.jpg') type('image/jpeg')) center / cover no-repeat; } } .hero .hero-bg { display: none; } /* Subsol: coloana „Plati si siguranta” */ .footer-safety { display: grid; gap: var(--s3); align-content: start; justify-items: center; text-align: center; } .footer-safety h4 { margin-bottom: 0; } .footer-safety .fl-pay { gap: 8px; } .footer-safety .fl-link { display: inline-flex; align-items: center; color: inherit; text-decoration: underline; } .footer-safety .fl-link img { background: #fff; border-radius: 4px; padding: 3px; } .fl-flags { display: flex; gap: 10px; align-items: center; } .fl-flags img { display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); } /* Subsol: logo-uri plati (Netopia + Visa + Mastercard) si ANPC SAL, in coloana „Plati si siguranta”, sub steaguri, aliniate la stanga, fara blur */ .footer-pay { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: var(--s4) 0 0; padding: 0; border: 0; } .footer-pay .fp-link { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; color: inherit; } .footer-pay .fp-link img { display: block; width: auto; max-width: 100%; image-rendering: auto; filter: none; } .footer-pay .fp-pay { background: rgba(0, 0, 0, .35); padding: 6px 12px; border-radius: 8px; } .footer-pay .fp-link { width: 11rem; max-width: 100%; justify-content: center; box-sizing: border-box; } .footer-pay .fp-pay img, .footer-pay .fp-anpc img { width: 100%; height: auto; } .footer-pay .fp-anpc img { border-radius: 6px; } .footer-pay .fp-text { font-size: .875rem; line-height: 1.3; text-decoration: underline; } @media (max-width: 480px) { .footer-pay { gap: 12px; } } .careers-list { display: grid; gap: var(--s4); margin: var(--s5) 0; } .career { text-align: left; } .career h2 { margin: 0 0 .3rem; font-size: 1.15rem; } .career .meta { color: var(--muted); font-size: .875rem; margin-bottom: .5rem; } /* Firimitura de navigare vizibila (SEO) */ .seo-crumbs { margin: 0 auto var(--s3); font-size: .875rem; color: var(--muted); } .seo-crumbs a { color: var(--muted); text-decoration: underline; } /* insigna „Moderator” (forum, chat, cont) */ .mod-badge { display: inline-block; margin-left: .35rem; padding: .05rem .5rem; border-radius: 999px; font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; background: rgba(74, 132, 185, .25); color: #cfe6ff; border: 1px solid #4a84b9; } /* Campuri de parola: ochi (arata / ascunde), potrivire pe loc, reguli bifate (passwords.js; site + admin) */ .pw-wrap { position: relative; display: block; width: 100%; } .pw-wrap > input { width: 100%; padding-right: 3rem; box-sizing: border-box; } .pw-eye { position: absolute; top: 50%; right: .35rem; transform: translateY(-50%); display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted, #9fb3cc); cursor: pointer; } .pw-eye:hover, .pw-eye:focus-visible { color: var(--gold-1, #f1d98a); background: rgba(255, 255, 255, .06); outline: none; } .pw-eye[aria-pressed="true"] { color: var(--gold-2, #d6b45a); } .pw-match { min-height: 1.3em; margin: .35rem 0 0; font-size: .88rem; font-weight: 600; } .pw-match.ok { color: #4fd18b; } .pw-match.bad { color: #ff7a7a; } .pw-rules { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .15rem; font-size: .875rem; color: var(--muted, #9fb3cc); } .pw-rules li::before { content: '\25CB'; display: inline-block; width: 1.3em; } .pw-rules li.ok { color: #4fd18b; } .pw-rules li.ok::before { content: '\2713'; } .pw-rules li.bad { color: #ff7a7a; } .pw-rules li.bad::before { content: '\2715'; } button.pw-blocked, input.pw-blocked { opacity: .55; cursor: not-allowed; } /* Modalul benzii „Anunta-ma” (lista de asteptare): pe aceeasi pagina, lizibil pe telefon (campuri de 16px, fara zoom automat) */ .geo-modal { width: min(92vw, 29rem); max-height: 90vh; overflow: auto; padding: 1.4rem 1.3rem 1.2rem; border: 1px solid var(--edge-hi, #3a5a85); border-radius: 16px; background: linear-gradient(180deg, #0b1d38, #07142a); color: var(--text, #eef3fb); box-shadow: 0 24px 70px rgba(0, 0, 0, .7); } .geo-modal::backdrop { background: rgba(2, 6, 14, .72); } .geo-modal h2 { margin: 0 2rem .5rem 0; font-size: 1.15rem; line-height: 1.3; } .geo-modal-lead { margin: 0 0 1rem; color: var(--muted, #9fb3cc); font-size: .95rem; } .geo-modal-x { position: absolute; top: .5rem; right: .5rem; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; } .geo-modal-x:hover, .geo-modal-x:focus-visible { background: rgba(255, 255, 255, .12); outline: none; } .geo-modal .field { margin-bottom: .9rem; } .geo-modal input[type="email"], .geo-modal select { width: 100%; box-sizing: border-box; font-size: 16px; padding: .65rem .75rem; } .geo-modal .check { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; line-height: 1.45; margin: .4rem 0 .8rem; } .geo-modal .check input { margin-top: .2rem; flex: none; width: 1.15rem; height: 1.15rem; } .geo-modal .actions .btn { width: 100%; justify-content: center; } .geo-modal-err { margin: 0 0 .7rem; color: #ff8a8a; font-weight: 600; font-size: .9rem; } .geo-modal-done { margin: 1rem 0 .4rem; font-size: 1.1rem; font-weight: 600; line-height: 1.5; } @media (max-width: 480px) { .geo-modal { width: 100vw; max-width: 100vw; max-height: 100svh; margin: auto 0 0; border-radius: 16px 16px 0 0; } } .geo-modal label.check, .geo-modal label.check span { font: 400 .9rem/1.45 var(--font-body); text-transform: none; letter-spacing: 0; color: var(--text, #eef3fb); } .geo-modal h2 { font-size: 1rem; letter-spacing: .04em; } /* Meniul hamburger pe telefon: acopera TOT ecranul cu fundal opac; pagina de dedesubt nu se deruleaza; X-ul ramane deasupra (ui.js) */ html.menu-open, html.menu-open body { overflow: hidden; } html.menu-open .site-header { z-index: 2000; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; background: #030912; } @media (max-width: 1199px) { .menu[open] > summary { position: relative; z-index: 2002; } .menu[open] > .menu-panel.panel { position: fixed; inset: 0; z-index: 2001; width: auto; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: linear-gradient(180deg, #030912, #06101f 60%, #0a1a31); -webkit-backdrop-filter: none; backdrop-filter: none; padding: calc(var(--header-h, 4.5rem) + var(--age-top, var(--geo-top, 0px)) + .6rem) 1.3rem calc(2rem + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } } /* Banda 18+ (prima pagina, branduri): bloc separat, in fluxul paginii, DEASUPRA antetului (nu se suprapune); antetul fix si pagina coboara sub ea */ /* Paginile „Ce este FTR 2050” / „Cum functioneaza” */ .ftr-page .lead { font-size: 1.15rem; line-height: 1.55; margin: .5rem 0 1.25rem; } .ftr-page .pillars { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; } .ftr-steps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 1rem; counter-reset: ftr; } .ftr-steps li { counter-increment: ftr; } .ftr-steps li h2::before { content: counter(ftr) ". "; } .ftr-links { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; } .ftr-page .grid-cards a { color: inherit; text-decoration: none; display: block; } /* hud.css */ /* Chenarul hud, UNIFORM pe tot site-ul (utilizatori, portal magazin partener, admin): panou de sticla bleumarin cu bordura fina si 4 colturi in L, toate la fel (grosime 1px, lungime 16px, 6px de la margine, aceeasi culoare). Modelul: panourile de la Plicuri si de la Cos. O singura definitie a colturilor, aplicata tuturor panourilor / cadranelor (clasele de mai jos). Fara colturi pe butoane, campuri sau elemente mici. Se pune clasa .hud-panel pe orice panou nou; accentele se schimba prin variabile (--hud-c culoarea colturilor, --hud-bc bordura, --hud-bg fundal, --hud-shadow umbra, --hud-bw grosimea bordurii, --hud-r rotunjirea). Panoul „evidentiat” (ex. „cel mai avantajos”) = --hud-c / --hud-bc aurii. Un panou fara colturi: clasa .no-corners. Pozitia o seteaza doar :where (fara pondere), ca un panou fix / lipicios sa ramana asa. */ :where(.hud-panel, .hud, .panel, .glass, .sec-card, .auth-card, .zone-hero, .dash-hero, .series-card, .doc-card, .rar-card, .hl-card, .contact-form, .final-cta, .acc-nav, .today-tile, .checkin-card, .kpi, .empty-state, .ccard) { position: relative; } .hud-panel { border-style: solid; border-color: var(--hud-bc, var(--edge)); border-width: var(--hud-bw, 1px); border-radius: var(--hud-r, var(--r-md)); background: var(--hud-bg, linear-gradient(160deg, rgba(22, 48, 88, .55), rgba(7, 18, 36, .62))); -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25); box-shadow: var(--hud-shadow, inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 40px rgba(70, 130, 210, .10), 0 24px 60px -20px rgba(0, 0, 0, .6)); } .hud-panel > h2 { font-family: var(--font-title); font-weight: 700; font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; } /* colturile: aceeasi definitie pentru toate panourile (zone-hero are ::before ocupat cu fundalul, deci colturile lui stau pe ::after) */ :is(.hud-panel, .hud, .panel, .glass, .sec-card, .auth-card, .dash-hero, .series-card, .doc-card, .rar-card, .hl-card, .contact-form, .final-cta, .acc-nav, .today-tile, .checkin-card, .kpi, .empty-state, .ccard):not(.menu-panel, .acct-panel, .no-corners)::before, .zone-hero:not(.no-corners)::after { --c: var(--hud-c, var(--edge-hi)); content: ''; position: absolute; inset: 6px; pointer-events: none; border-radius: 4px; z-index: 1; background: linear-gradient(var(--c), var(--c)) top left / 16px 1px no-repeat, linear-gradient(var(--c), var(--c)) top left / 1px 16px no-repeat, linear-gradient(var(--c), var(--c)) top right / 16px 1px no-repeat, linear-gradient(var(--c), var(--c)) top right / 1px 16px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 16px 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 1px 16px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 16px 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1px 16px no-repeat; } /* panoul evidentiat: contur si colturi aurii */ :is(.hud-panel, .panel, .sec-card).best, :is(.hud-panel, .panel, .sec-card).is-featured { --hud-c: var(--gold-3); border-color: var(--gold-3); } /* steagul unei tari (helperul flag_img): SVG local 4:3, rotunjit usor, contur fin ca sa se vada si cele albe */ .flag { display: inline-block; flex: none; width: 1.3em; height: auto; aspect-ratio: 4 / 3; vertical-align: -.2em; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); } /* Panouri DERULABILE (ex. meniul din cont): colturile din ::before s-ar derula odata cu continutul, deci stau pe FUNDALUL elementului (un fundal „scroll” nu se deruleaza cu continutul). Elementul primeste clasa .no-corners (fara ::before) si foloseste var(--hud-corners) in `background`: aceeasi geometrie (16 px, 1 px, la 6 px de margine, culoarea --edge-hi). */ :root { --hud-corners: linear-gradient(var(--edge-hi), var(--edge-hi)) left 6px top 6px / 16px 1px no-repeat, linear-gradient(var(--edge-hi), var(--edge-hi)) left 6px top 6px / 1px 16px no-repeat, linear-gradient(var(--edge-hi), var(--edge-hi)) right 6px top 6px / 16px 1px no-repeat, linear-gradient(var(--edge-hi), var(--edge-hi)) right 6px top 6px / 1px 16px no-repeat, linear-gradient(var(--edge-hi), var(--edge-hi)) left 6px bottom 6px / 16px 1px no-repeat, linear-gradient(var(--edge-hi), var(--edge-hi)) left 6px bottom 6px / 1px 16px no-repeat, linear-gradient(var(--edge-hi), var(--edge-hi)) right 6px bottom 6px / 16px 1px no-repeat, linear-gradient(var(--edge-hi), var(--edge-hi)) right 6px bottom 6px / 1px 16px no-repeat; } /* cookies.css */ /* Banner cookie-uri (spec. 18): cele trei butoane au aceeasi forma si aceeasi greutate vizuala. */ .ck { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; display: flex; justify-content: center; padding: 12px; pointer-events: none; } .ck[hidden] { display: none; } .ck-box { pointer-events: auto; width: 100%; max-width: 860px; max-height: 88vh; overflow: auto; padding: 18px 20px; border: 1px solid var(--edge-hi); border-radius: 14px; background: rgba(6, 16, 31, .96); box-shadow: 0 18px 60px rgba(0, 0, 0, .6); color: var(--chrome-2); } .ck-box h2 { margin: 0 0 6px; font-size: 1.05rem; color: var(--chrome-1); } .ck-box p { margin: 0 0 12px; font-size: .92rem; line-height: 1.45; } .ck-box a:not(.btn) { color: var(--ice); text-decoration: underline; } .ck-actions { display: flex; flex-wrap: wrap; gap: 10px; } .ck-actions .ck-btn { flex: 1 1 150px; text-align: center; justify-content: center; } .ck-more { margin: 0 0 12px; } .ck-more .ck-btn { margin-top: 8px; } .ck-cats { display: grid; gap: 8px; margin: 0 0 8px; } .ck-cat { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--edge); border-radius: 10px; cursor: pointer; } .ck-cat input { margin-top: 3px; width: 18px; height: 18px; flex: none; } .ck-cat span { display: grid; gap: 2px; font-size: .9rem; } .ck-cat em { font-style: normal; font-size: .875rem; color: var(--ice); margin-left: 6px; } .ck-cat small { color: var(--chrome-3); font-size: .875rem; line-height: 1.35; } .footer-cookie { color: var(--ice); text-decoration: underline; margin-left: 12px; } .ck-page { max-width: 640px; margin-top: 16px; } .ck-page .ck-actions { margin-top: 14px; } @media (max-width: 640px) { .ck { padding: 8px; } .ck-box { padding: 14px; } .ck-actions .ck-btn { flex-basis: 100%; } } .legal-notice { margin: 0 auto 12px; max-width: 1100px; padding: 10px 14px; border: 1px solid var(--edge-hi); border-radius: 12px; background: rgba(10, 45, 89, .55); font-size: .9rem; } .legal-notice form { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .legal-notice p { margin: 2px 0; } .legal-notice a { color: var(--ice); text-decoration: underline; } .legal-accept { max-width: 760px; margin: 0 auto; padding: 24px 16px; } .legal-accept .panel { margin: 14px 0; padding: 14px 16px; } .legal-accept-form { margin: 18px 0 8px; } .legal-history ul { padding-left: 1.1rem; } .legal-archived { margin: 0 0 14px; padding: 10px 14px; } /* ---- benzi (cookie-uri / varsta 18+ / „doar Romania”): una singura odata, fixate jos, compacte; fara layout shift ---- */ .age-band, .geo-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1900; box-sizing: border-box; width: 100%; background: #0a1a33; color: #e8eef7; border-top: 1px solid var(--edge-hi, rgba(200, 225, 255, .45)); box-shadow: 0 -6px 20px rgba(0, 0, 0, .35); font-size: .92rem; line-height: 1.35; text-align: center; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px)); } .age-band[hidden], .geo-banner[hidden] { display: none; } .age-band { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: .5rem 1rem; } .age-band p { margin: 0; } .age-band .btn { flex: none; padding: .45rem .9rem; min-height: 40px; white-space: nowrap; } .geo-banner { padding-right: 2.8rem; background: #0a2d59; } .geo-banner .geo-x { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); width: 2.2rem; height: 2.2rem; border: 0; background: none; color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: 50%; } .geo-banner .geo-x:hover, .geo-banner .geo-x:focus-visible { background: rgba(255, 255, 255, .15); } .geo-banner a { white-space: nowrap; font-weight: 600; } .bn-short { display: none; } .geo-banner.geo-v2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.2rem; padding-right: 1rem; text-align: left; } .geo-banner.geo-v2[hidden] { display: none; } .geo-banner .geo-copy { flex: 1 1 22rem; max-width: 60rem; } .geo-banner .geo-title { display: block; font-weight: 700; } .geo-banner .geo-actions { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; justify-content: center; } .geo-banner .geo-notify { padding: .45rem .9rem; min-height: 40px; display: inline-flex; align-items: center; } .geo-banner .geo-ok { min-height: 40px; padding: .45rem .9rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: 6px; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; } .geo-banner .geo-ok:hover, .geo-banner .geo-ok:focus-visible { background: rgba(255, 255, 255, .15); } @media (max-width: 640px) { .bn-long { display: none; } .bn-short { display: inline; } .age-band, .geo-banner { max-height: 25svh; overflow: auto; font-size: .875rem; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px)); } .geo-banner { padding-right: 2.6rem; } .age-band { justify-content: space-between; text-align: left; } .age-band .btn { padding: .4rem .7rem; font-size: .85rem; } /* cookie-uri compacte: fara titlu, text scurt, trei butoane pe un rand; „Setari” extinde banda */ .ck { padding: 0; } .ck-box { max-width: none; border-radius: 14px 14px 0 0; max-height: 25svh; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px)); } .ck.ck-expanded .ck-box { max-height: 80svh; } .ck-box .ck-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .ck-box p { margin: 0 0 .5rem; font-size: .85rem; line-height: 1.35; } .ck-actions { flex-wrap: nowrap; gap: .4rem; } .ck-actions .ck-btn { flex: 1 1 0; min-width: 0; padding: .45rem .3rem; min-height: 40px; font-size: .8rem; line-height: 1.15; } } /* zona de cont pe telefon: banda geo sta deasupra barei de jos */ @media (max-width: 899px) { .acc-zone .geo-banner, .acc-zone .age-band { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } } /* zone.css */ /* Zona de utilizator (spec. 42): pachete, schimburi, clasament, sala de onoare, cont, comenzi, notificari, forum, pagini legale. Componente comune: .zone-hero (banner cu fundal), .empty-state, .sec-card, .stat-tiles, .badge-grid, .thumbs, .podium. Fara JS inline, fara style="". */ .ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; } .ico-lg { width: 2.6rem; height: 2.6rem; } :root { --zone-hall: url('/assets/img/zone/hall-1600.webp'); --zone-lounge: url('/assets/img/zone/lounge-1600.webp'); --zone-gallery: url('/assets/img/zone/gallery-1600.webp'); --zone-lobby: url('/assets/img/zone/lobby-1600.webp'); } @media (max-width: 760px) { :root { --zone-hall: url('/assets/img/zone/hall-800.webp'); --zone-lounge: url('/assets/img/zone/lounge-800.webp'); --zone-gallery: url('/assets/img/zone/gallery-800.webp'); --zone-lobby: url('/assets/img/zone/lobby-800.webp'); } } /* ---------------------------------------------------------------- banner de pagina */ .zone-hero { position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; justify-content: space-between; margin: 0 0 var(--s6); padding: clamp(1.4rem, 4vw, 3rem) clamp(1.1rem, 3vw, 2.4rem); border: 1px solid var(--edge); border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(135deg, #0c2342, #07142a) center / cover no-repeat; } .zone-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3, 9, 18, .9) 0%, rgba(3, 9, 18, .55) 55%, rgba(3, 9, 18, .25) 100%); } .zone-hero.bg-hall { background-image: var(--zone-hall); } .zone-hero.bg-lounge { background-image: var(--zone-lounge); } .zone-hero.bg-gallery { background-image: var(--zone-gallery); } .zone-hero.bg-lobby { background-image: var(--zone-lobby); } .zone-hero .zh-text { max-width: 44rem; } .zone-hero h1 { margin: 0 0 .35rem; } .zone-hero p { margin: 0; color: #d3deec; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); } .zone-hero .zh-icon { color: var(--gold-2); } .zone-hero .zh-actions { display: flex; gap: var(--s3); flex-wrap: wrap; } .zone-hero.compact { padding: clamp(1rem, 2.5vw, 1.8rem) clamp(1rem, 3vw, 2rem); margin-bottom: var(--s5); } .zone-hero .eyebrow { margin-bottom: .3rem; } /* sectiune de pagina cu fundal (FAQ pe prima pagina) */ .section-bg-gallery { position: relative; isolation: isolate; background: var(--zone-gallery) center / cover no-repeat; } .section-bg-gallery::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3, 9, 18, .86), rgba(3, 9, 18, .72)); } /* ---------------------------------------------------------------- stari goale */ .empty-state { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; padding: var(--s7) var(--s5); border: 1px dashed var(--edge-hi); border-radius: var(--r-lg); background: rgba(10, 26, 49, .55); } .empty-state .ico { width: 3.2rem; height: 3.2rem; color: var(--ice); opacity: .9; } .empty-state h2 { margin: 0; font-size: 1.15rem; } .empty-state p { margin: 0; color: var(--muted); max-width: 34rem; } /* ---------------------------------------------------------------- sectiuni, statistici, insigne */ .sec-grid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; } .sec-card { padding: var(--s5); border: 1px solid var(--edge); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(15, 37, 66, .72), rgba(8, 20, 38, .85)); } .sec-card > h2 { display: flex; align-items: center; gap: .55rem; margin: 0 0 var(--s4); font-size: 1.05rem; } .sec-card > h2 .ico { color: var(--gold-2); width: 1.5rem; height: 1.5rem; } .sec-card.wide { grid-column: 1 / -1; } .stat-tiles { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); } .stat-tile { padding: .85rem 1rem; border: 1px solid var(--edge); border-radius: var(--r-md); background: rgba(5, 14, 28, .55); } .stat-tile b { display: block; font: 700 1.55rem var(--font-title); letter-spacing: .04em; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .stat-tile span { color: var(--muted); font-size: .875rem; } .badge-grid { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; } .badge-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem .4rem .55rem; border-radius: 999px; border: 1px solid var(--edge); color: var(--faint); font-size: .85rem; background: rgba(5, 14, 28, .5); } .badge-chip .ico { width: 1.15rem; height: 1.15rem; } .badge-chip.earned { color: var(--gold-1); border-color: var(--gold-3); background: linear-gradient(180deg, rgba(93, 70, 25, .45), rgba(25, 12, 2, .6)); } .badge-chip.earned .ico { color: var(--gold-2); } /* ---------------------------------------------------------------- miniaturi de cartonase */ .thumbs { display: flex; gap: .35rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .th { --rc: var(--common); position: relative; width: 3.1rem; aspect-ratio: 2 / 3; border: 2px solid var(--rc); border-radius: 5px; overflow: hidden; background: rgba(5, 14, 28, .7); box-shadow: 0 0 .7rem -.2rem var(--rc); } .th.r-rare { --rc: var(--rare); } .th.r-epic { --rc: var(--epic); } .th.r-legendary { --rc: var(--legendary); } .th img { display: block; width: 100%; height: 100%; object-fit: cover; } .th.blur img { filter: brightness(.75); } .th b { position: absolute; left: 0; right: 0; bottom: 0; padding: .1rem 0; text-align: center; font: 700 .875rem var(--font-body); color: #fff; background: rgba(3, 9, 18, .75); } .thumbs.lg .th { width: 4rem; } .thumbs-more { align-self: center; color: var(--muted); font-size: .875rem; } /* ---------------------------------------------------------------- pachete */ .checkin-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: var(--s5); align-items: center; padding: var(--s5) var(--s6); margin-bottom: var(--s6); border: 1px solid var(--gold-3); border-radius: var(--r-lg); background: radial-gradient(120% 140% at 0% 0%, rgba(227, 192, 108, .18), transparent 55%), linear-gradient(135deg, #10284a, #07142a); overflow: hidden; } .checkin-card .ci-ico { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 1px solid var(--gold-3); color: var(--gold-2); background: rgba(5, 14, 28, .6); } .checkin-card .ci-ico .ico { width: 2.3rem; height: 2.3rem; } .checkin-card h2 { margin: 0 0 .25rem; } .checkin-card p { margin: 0; color: var(--muted); } .checkin-card .ci-side { text-align: center; } .checkin-card .cd { display: inline-flex; gap: .6rem; margin-top: .35rem; } .checkin-card .cd span { display: grid; min-width: 3.2rem; padding: .35rem .5rem; border: 1px solid var(--edge); border-radius: var(--r-sm); background: rgba(3, 9, 18, .6); font: 700 1.25rem var(--font-title); color: #fff; } .checkin-card .cd small { display: block; font: 500 .8rem var(--font-body); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; } .checkin-card .ci-done { color: var(--ok); font-weight: 600; } @media (max-width: 720px) { .checkin-card { grid-template-columns: 1fr; text-align: center; justify-items: center; } } .pack-shelf { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); margin: 0 0 var(--s6); padding: 0; list-style: none; } .pack-shelf .pack-tile { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: var(--s4); border-radius: var(--r-lg); border: 1px solid var(--edge); background: linear-gradient(180deg, rgba(15, 37, 66, .6), rgba(8, 20, 38, .8)); } .pack-shelf .pack-art { width: 100%; max-width: 9.5rem; aspect-ratio: 3 / 4; animation: zone-float 4.6s ease-in-out infinite; filter: drop-shadow(0 .9rem .9rem rgba(0, 0, 0, .55)); } .pack-shelf .pack-tile:nth-child(2n) .pack-art { animation-delay: -1.4s; } .pack-shelf .pack-tile:nth-child(3n) .pack-art { animation-delay: -2.6s; } @keyframes zone-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-.55rem) rotate(1deg); } } @media (prefers-reduced-motion: reduce) { .pack-shelf .pack-art { animation: none; } } .pack-gallery { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); margin: 0 0 var(--s6); padding: 0; list-style: none; } .pack-gallery > li { padding: var(--s4); border-radius: var(--r-md); border: 1px solid var(--edge); background: rgba(10, 26, 49, .6); } .pack-gallery .pg-head { display: flex; justify-content: space-between; gap: var(--s3); margin-bottom: .6rem; font-size: .9rem; } .pack-gallery .pg-head a { color: var(--ice); } .pack-gallery .th { width: 2.35rem; } /* ---------------------------------------------------------------- schimburi */ .zone-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 var(--s5); padding: 0; list-style: none; } .zone-tabs a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border-radius: 999px; border: 1px solid var(--edge); color: var(--muted); text-decoration: none; background: rgba(5, 14, 28, .5); font-size: .92rem; } .zone-tabs a[aria-current='page'], .zone-tabs a:hover { color: #fff; border-color: var(--gold-3); background: rgba(93, 70, 25, .35); } .match-card { display: grid; gap: var(--s3); padding: var(--s4) var(--s5); margin-bottom: var(--s4); border: 1px solid var(--edge); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(15, 37, 66, .65), rgba(8, 20, 38, .85)); } .match-card .mc-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; } .match-card .mc-cols { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .match-card h3 { margin: 0 0 .4rem; font-size: .875rem; letter-spacing: .12em; color: var(--ice); text-transform: uppercase; } .trade-list { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; } .trade-list > li { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border: 1px solid var(--edge); border-radius: var(--r-md); background: rgba(10, 26, 49, .6); } .trade-list .tl-sum { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .trade-list .tl-sum .ico { color: var(--ice); } /* ---------------------------------------------------------------- clasament */ .podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); align-items: end; width: 100%; max-width: 100%; margin: 0 0 var(--s5); padding: 0; list-style: none; } .podium li { min-width: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: var(--s3) var(--s2); border: 1px solid var(--edge); border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-sm); text-align: center; overflow-wrap: anywhere; background: linear-gradient(180deg, rgba(15, 37, 66, .8), rgba(8, 20, 38, .9)); } .podium .p1 { order: 2; min-height: 8.5rem; border-color: var(--gold-3); background: linear-gradient(180deg, rgba(93, 70, 25, .55), rgba(25, 12, 2, .85)); box-shadow: 0 0 1.2rem -.5rem rgba(227, 192, 108, .5); } .podium .p2 { order: 1; min-height: 7.5rem; } .podium .p3 { order: 3; min-height: 7.5rem; } .podium .medal { display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; font: 700 .95rem var(--font-body); color: #07142a; background: var(--chrome); } .podium .p1 .medal { background: var(--gold); } .podium .who { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .15rem .35rem; max-width: 100%; font: 700 .8rem var(--font-title); letter-spacing: .06em; color: #fff; } .podium .p1 .who { font-size: 1rem; } .podium .who .pill.founding { margin-left: 0; max-width: 100%; font-size: .7rem; letter-spacing: .02em; line-height: 1.25; white-space: normal; text-align: center; } .podium .sc { max-width: 100%; color: var(--muted); font-size: .8rem; line-height: 1.3; } .podium .me, .lb-list li.me { outline: 2px solid var(--gold-2); outline-offset: 2px; } .lb-list { display: grid; gap: .4rem; margin: 0 0 var(--s5); padding: 0; list-style: none; } .lb-list li { display: grid; grid-template-columns: 2.6rem minmax(5rem, 9rem) 1fr auto; gap: var(--s3); align-items: center; padding: .5rem var(--s3); border-radius: var(--r-md); border: 1px solid var(--edge); background: rgba(10, 26, 49, .55); } .lb-list .pos { font: 700 .95rem var(--font-body); color: var(--ice); } .lb-list .who { font: 600 1rem var(--font-body); letter-spacing: .03em; } .lb-list .lb-bar { height: .5rem; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; } .lb-list .lb-bar i { display: block; height: 100%; background: var(--gold); border-radius: 999px; } .lb-list .lb-me-tag { margin-left: .4rem; font-size: .875rem; letter-spacing: .12em; color: var(--gold-2); } @media (max-width: 560px) { .lb-list li { grid-template-columns: 2.2rem 1fr auto; } .lb-list .lb-bar { display: none; } .podium .who { font-size: .75rem; } .podium .p1 .who { font-size: .9rem; } } .lb-bar-fill { width: var(--w, 0%); } /* ---------------------------------------------------------------- sala de onoare */ .honor-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 0; padding: 0; list-style: none; } .honor-grid li { position: relative; padding: var(--s5) var(--s4); text-align: center; border: 1px solid var(--gold-3); border-radius: var(--r-md); background: linear-gradient(180deg, rgba(93, 70, 25, .35), rgba(8, 20, 38, .9)); } .honor-grid .hno { font: 700 .875rem var(--font-body); letter-spacing: .03em; color: var(--gold-2); } .honor-grid .hwho { display: block; margin: .3rem 0; font: 700 1.6rem var(--font-title); letter-spacing: .08em; color: #fff; } .honor-grid .hdate { color: var(--muted); font-size: .875rem; } .honor-grid a { display: inline-block; margin-top: .5rem; color: var(--ice); } .honor-grid li:nth-child(-n+3) { box-shadow: 0 0 1.8rem -.5rem rgba(227, 192, 108, .55); } .honor-grid li:nth-child(-n+3)::before { content: ''; position: absolute; left: 50%; top: -1px; width: 38%; height: 3px; transform: translateX(-50%); background: var(--gold); border-radius: 0 0 4px 4px; } /* ---------------------------------------------------------------- notificari, comenzi, forum */ .notif-cards { display: grid; gap: .6rem; margin: var(--s4) 0 0; padding: 0; list-style: none; } .notif-cards li { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--edge); background: rgba(10, 26, 49, .55); } .notif-cards li.unread { border-color: var(--gold-3); background: rgba(93, 70, 25, .22); } .notif-cards .ico { color: var(--ice); width: 1.5rem; height: 1.5rem; } .notif-cards li.unread .ico { color: var(--gold-2); } .notif-cards .nt { flex: 1; min-width: 0; } .forum-cats .forum-cat { display: grid; gap: .3rem; } .forum-cat-name { display: flex; align-items: center; gap: .5rem; } .forum-cat-name .ico { color: var(--gold-2); } .order-cards { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; } .order-cards > li { display: grid; gap: .3rem var(--s4); grid-template-columns: auto 1fr auto; align-items: center; padding: var(--s4); border: 1px solid var(--edge); border-radius: var(--r-md); background: rgba(10, 26, 49, .55); } .order-cards .oc-ico { color: var(--gold-2); } @media (max-width: 560px) { .order-cards > li { grid-template-columns: auto 1fr; } .order-cards .oc-inv { grid-column: 1 / -1; } } /* ---------------------------------------------------------------- legale */ .legal-wrap { max-width: 52rem; margin: 0 auto; padding: var(--s6) var(--s5); border: 1px solid var(--edge); border-radius: var(--r-lg); background: rgba(8, 20, 38, .8); } /* titlul bannerului: iconita si text pe acelasi rand */ .zone-hero h1 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .zone-hero h1 .ico { width: 1.15em; height: 1.15em; -webkit-text-fill-color: initial; } .sec-grid + .sec-grid { margin-top: var(--s5); } .sec-card .plain-list a, .honor-grid a { display: inline-flex; align-items: center; gap: .45rem; } .stat-tile b { font-size: clamp(1.2rem, 1.6vw, 1.55rem); white-space: nowrap; } /* Pachete deschise (spec. 61): 2 coloane pe desktop, cartonase mari, cele 10 dintr-un pachet 5 + 5 (fara rand orfan) */ .pack-gallery { grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .pack-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pack-gallery .thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; } .pack-gallery .th { width: 100%; } .pack-gallery .th b { font-size: .875rem; padding: .2rem 0; } /* „cat iti mai lipseste” pe rarități (spec. 54) */ .miss-list { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: .55rem; } .miss-list li { display: grid; grid-template-columns: 7.5rem minmax(6rem, 1fr) auto; align-items: center; gap: var(--s3); } .miss-list .co-progress { width: 100%; height: .6rem; accent-color: var(--gold-2); } @media (max-width: 600px) { .miss-list li { grid-template-columns: 1fr; gap: .2rem; } } /* schimb cu platforma 5 -> 1 (spec. 54) */ .ex-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--s3); } .ex-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border: 1px solid var(--edge); border-radius: var(--r-md); background: rgba(255, 255, 255, .03); cursor: pointer; } .ex-tab input { position: absolute; opacity: 0; pointer-events: none; } .ex-tab:has(input:checked) { border-color: var(--gold-2); background: rgba(227, 192, 108, .12); } .ex-tab:has(input:focus-visible) { outline: 2px solid var(--ice); outline-offset: 2px; } .ex-panel { border: 0; padding: 0; margin: 0 0 var(--s4); min-width: 0; } .js .ex-panel:not(.is-active) { display: none; } .ex-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .7rem; } .ex-card { position: relative; display: block; cursor: pointer; border: 2px solid var(--edge); border-radius: 6px; overflow: hidden; background: rgba(5, 14, 28, .7); } .ex-card input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; } .ex-card img { display: block; width: 100%; height: auto; pointer-events: none; } .ex-card b { position: absolute; left: 0; right: 0; bottom: 0; padding: .15rem 0; text-align: center; font: 700 .875rem var(--font-body); background: rgba(3, 9, 18, .78); } .ex-card:has(input:checked) { border-color: var(--gold-2); box-shadow: 0 0 0 2px var(--gold-3), 0 0 1rem -.1rem rgba(227, 192, 108, .6); } .ex-card:has(input:disabled) { opacity: .4; cursor: not-allowed; } .ex-bar { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: .7rem 1rem; margin-top: var(--s3); border: 1px solid var(--edge-hi); border-radius: var(--r-md); background: rgba(4, 11, 22, .94); } /* „Imi lipsesc” */ .filter-tabs { margin-top: 0; } .miss-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .9rem; } .miss-card { display: grid; gap: .4rem; justify-items: center; text-align: center; } .miss-img { position: relative; display: block; width: 100%; border: 2px dashed var(--edge-hi); border-radius: 6px; overflow: hidden; } .miss-img img { display: block; width: 100%; height: auto; opacity: .85; pointer-events: none; } .miss-img b { position: absolute; inset: auto 0 0 0; padding: .2rem 0; font: 700 .875rem var(--font-body); background: rgba(3, 9, 18, .8); } .miss-card.r-rare .miss-img { border-color: var(--rare); } .miss-card.r-epic .miss-img { border-color: var(--epic); } .miss-card.r-legendary .miss-img { border-color: var(--legendary); } /* ---- Schimburi reproiectate (spec. 62) ---- */ .who { margin: 0 0 var(--s6); } .match-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .9rem; } .match-card { display: grid; gap: .7rem; padding: 1rem; border: 1px solid var(--edge); border-radius: 10px; background: rgba(5, 14, 28, .55); align-content: start; } .mc-who { display: flex; align-items: center; gap: .7rem; } .mc-who span { display: grid; line-height: 1.25; } .mc-line { margin: 0; font-size: .9rem; color: var(--muted); } .exchange-cta { margin: var(--s5) 0 0; } .trade-pick.img-only { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: .6rem; } .trade-pick.img-only .pick { position: relative; display: block; cursor: pointer; border: 2px solid var(--edge-hi); border-radius: 6px; overflow: hidden; } .trade-pick.img-only .pick img { display: block; width: 100%; height: auto; } .trade-pick.img-only .pick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .trade-pick.img-only .pick:has(input:checked) { border-color: var(--gold-3); box-shadow: 0 0 0 2px var(--gold-3); } .trade-pick.img-only .pick:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; } .trade-pick.img-only .pick.r-rare { border-color: var(--rare); } .trade-pick.img-only .pick.r-epic { border-color: var(--epic); } .trade-pick.img-only .pick.r-legendary { border-color: var(--legendary); } .trade-pick.img-only .pick:has(input:checked) { border-color: var(--gold-3); } .tile-no { position: absolute; inset: auto 0 0 0; padding: .15rem 0; text-align: center; font: 700 .875rem var(--font-body); background: rgba(3, 9, 18, .8); pointer-events: none; } .tile-flag { position: absolute; top: .2rem; right: .25rem; font-size: .875rem; color: var(--gold-3); text-shadow: 0 0 4px #000; pointer-events: none; } .trade-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-top: var(--s5); padding: .8rem 1rem; border: 1px solid var(--edge-hi); border-radius: 10px; background: rgba(3, 9, 18, .94); } .tb-sum { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; } .tb-rar { display: inline-flex; gap: .35rem; flex-wrap: wrap; } .tb-bal.is-ok { color: #7fd69a; } .tb-bal.is-off { color: var(--muted); } .tb-bal.is-over { color: #ff9a8a; } .tb-rar .bal-off { opacity: .6; } .dup-grid { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .9rem; } .dup-img { position: relative; display: block; border: 2px solid var(--edge-hi); border-radius: 6px; overflow: hidden; } .dup-img img { display: block; width: 100%; height: auto; } .dup-img b { position: absolute; inset: auto 0 0 0; padding: .2rem 0; text-align: center; font: 700 .875rem var(--font-body); background: rgba(3, 9, 18, .8); } .dup-n { position: absolute; top: .3rem; right: .3rem; padding: .1rem .45rem; border-radius: 999px; font: 700 .875rem var(--font-body); background: var(--gold-3); color: #1a1205; } .dup-card.r-rare .dup-img { border-color: var(--rare); } .dup-card.r-epic .dup-img { border-color: var(--epic); } .dup-card.r-legendary .dup-img { border-color: var(--legendary); } .miss-form { margin: 0; } .star-btn { position: absolute; top: .2rem; right: .2rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(3, 9, 18, .8); color: var(--gold-3); font-size: 1.1rem; cursor: pointer; } .miss-card.starred .miss-img img { opacity: .6; } .who h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.35rem; } .who h2 .ico { width: 1.4rem; height: 1.4rem; flex: none; } /* insigne (spec. 53) */ .bdg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .6rem; } .bdg-grid.big { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } .bdg { display: grid; gap: .3rem; padding: .6rem .8rem; border: 1px solid var(--edge); border-radius: 10px; background: rgba(5, 14, 28, .5); opacity: .85; } .bdg.big { padding: .9rem 1rem; } .bdg .bdg-name { font-size: .88rem; } .bdg.big .bdg-name { font-size: 1rem; } .bdg progress { width: 100%; height: .35rem; accent-color: var(--gold-3); } .bdg .bdg-n { font-size: .875rem; color: var(--muted); } .bdg.earned { opacity: 1; color: var(--gold-1); border-color: var(--gold-3); background: linear-gradient(180deg, rgba(93, 70, 25, .45), rgba(25, 12, 2, .6)); } .bdg.earned .bdg-n { color: var(--gold-2); } .badge-congrats a { margin-left: .4rem; } /* cele doua cifre de puncte (spec. 63) */ .pts-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s4, 1rem); } .pts-box { display: grid; gap: .3rem; padding: .9rem 1rem; border: 1px solid var(--edge); border-radius: 10px; background: rgba(5, 14, 28, .55); } .pts-n { font: 700 1.3rem var(--font-title); letter-spacing: .03em; color: var(--gold-1); } /* quiz zilnic (spec. 64) */ .quiz-q h2 { font-size: 1.25rem; margin: .8rem 0; } .quiz-quote { margin: 0 0 1rem; padding: .8rem 1rem; border-left: 3px solid var(--gold-3); background: rgba(5, 14, 28, .55); font-style: italic; } .quiz-img img { display: block; max-width: 14rem; height: auto; border-radius: 8px; border: 2px solid var(--edge-hi); } .quiz-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; } .quiz-opt { display: flex; gap: .6rem; align-items: center; padding: .7rem 1rem; border: 1px solid var(--edge); border-radius: 10px; background: rgba(5, 14, 28, .5); cursor: pointer; } .quiz-opt:has(input:checked) { border-color: var(--gold-3); background: rgba(93, 70, 25, .35); } .quiz-result { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; } .quiz-result li { padding: .6rem 1rem; border: 1px solid var(--edge); border-radius: 10px; opacity: .7; } .quiz-result li.is-right { border-color: #7fd69a; opacity: 1; color: #7fd69a; } .quiz-result li.is-wrong { border-color: #ff9a8a; opacity: 1; color: #ff9a8a; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* 2FA utilizator */ .tfa-codes { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; } .tfa-codes li { padding: .55rem .8rem; border: 1px solid var(--edge-hi); border-radius: 8px; background: rgba(5, 14, 28, .6); } .tfa-codes code { font-size: 1rem; letter-spacing: .08em; user-select: all; } .tfa-qr { display: grid; place-items: center; margin: 1rem 0; } .tfa-steps { margin: 0 0 .5rem; padding-left: 1.2rem; display: grid; gap: .3rem; } .tfa-banner { border-color: var(--gold-3); } .qr-box { display: inline-block; background: #fff; padding: .5rem; border-radius: 8px; line-height: 0; max-width: 100%; } .qr-box svg { max-width: 100%; height: auto; } .tfa-gift { display: flex; align-items: center; gap: .5rem; color: var(--gold-1); } .tfa-gift .ico { width: 1.2rem; height: 1.2rem; color: var(--gold-2); } .who-empty { display: grid; justify-items: center; gap: .6rem; padding: 1.4rem 1rem; text-align: center; border: 1px dashed var(--edge-hi); border-radius: 12px; background: rgba(5, 14, 28, .45); } .who-empty-t { margin: 0; font-size: 1.05rem; max-width: 34rem; } .who-empty .btn-lg { white-space: normal; text-align: center; } /* Pagina „Activeaza un cartonas fizic” */ .redeem-info .redeem-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 1.5rem; align-items: start; } .redeem-example { width: 100%; height: auto; border-radius: 12px; } @media (max-width: 720px) { .redeem-info .redeem-grid { grid-template-columns: minmax(0, 1fr); } } /* Filtru worldwide / pe tara (clasament, Sala de onoare) */ .scope-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; } /* Portal distribuitori */ .contract-box { max-height: 320px; overflow: auto; padding: 1rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; font-size: .92rem; line-height: 1.55; margin-bottom: 1rem; } /* Invita un prieten v2 (0d) */ .inv-share { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem; align-items: start; } .inv-qr { text-align: center; } .inv-qr .qr-box svg { width: 140px; height: 140px; } .inv-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0 0; } .inv-progress { width: 100%; height: .6rem; accent-color: var(--gold-3); } .inv-tiers li.done { color: var(--gold-1); } .inv-board li.me { color: var(--gold-1); font-weight: 600; } @media (max-width: 720px) { .inv-share { grid-template-columns: 1fr; } .inv-qr { text-align: left; } } /* Spec. 32: fundal intunecat sub textul bannerului (contrast WCAG AA pe orice latime / lungime de titlu; fotografia ramane neschimbata in rest) */ .zone-hero .zh-text { position: relative; isolation: isolate; } .zone-hero .zh-text::before { content: ''; position: absolute; z-index: -1; inset: -1.6rem -2.4rem -1.6rem -2.4rem; pointer-events: none; background: linear-gradient(90deg, rgba(3, 9, 18, .9) 0%, rgba(3, 9, 18, .9) calc(100% - 2.4rem), rgba(3, 9, 18, 0) 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1rem, #000 calc(100% - 1rem), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 1rem, #000 calc(100% - 1rem), transparent 100%); } /* Sala de onoare: insigna primilor 100 */ .hof-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: .875rem; background: rgba(170, 139, 71, .18); color: #e6cf94; border: 1px solid #AA8B47; } /* Pagina cartonasului pentru vizitatori: invitatie sub cartonas */ .card-cta { margin: var(--s4, 1.2rem) auto 0; max-width: 24rem; text-align: center; } .card-cta p { margin: 0 0 .7rem; } .card-cta-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; } /* Setari → Securitate (2FA optional), chenar hud */ .tfa-sec { margin-bottom: var(--s4, 1.2rem); } .tfa-sec > h2 { display: flex; align-items: center; gap: .5rem; } .tfa-block { margin-top: 1rem; } .tfa-block h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; } .tfa-form { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--edge-hi, rgba(150, 185, 230, .25)); max-width: 28rem; } .tfa-form h4 { margin: 0 0 .5rem; } .tfa-form .actions .btn { min-height: 44px; } .tfa-off { border-top-color: rgba(255, 120, 110, .4); } .tfa-suggest { display: flex; align-items: center; gap: .4rem; margin: .4rem 0 .8rem; } .tfa-suggest .ico { width: 1rem; height: 1rem; color: var(--gold-2, #e3c06c); flex: none; } @media (max-width: 640px) { .tfa-form { max-width: none; } .tfa-form .actions .btn { width: 100%; } } /* clasament: doua podiumuri, fiecare strict in coloana lui; sub 1200 px unul sub altul, pe toata latimea */ .two-col.lb-cols { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } @media (min-width: 1200px) { .two-col.lb-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7, 3rem); } } .lb-cols > section { min-width: 0; overflow-wrap: anywhere; } .lb-cols h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 var(--s3); font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.35; } .lb-cols h2 .ico { width: 1.3rem; height: 1.3rem; } .zone-hero.compact h1 { line-height: 1.3; padding-block: .1em; } /* iconita din titlu nu se mai taie */ .zone-hero.compact h1 .ico { vertical-align: -.2em; } .lb-page-top { scroll-margin-top: calc(var(--header-h) + var(--s4)); } /* viewer3d.css */ /* Ecran impartit pe prima pagina: text + cartonas 3D care se roteste cu mouse-ul / degetul */ .split3d { padding-block: clamp(40px, 7vw, 96px); } .split-grid { display: grid; gap: clamp(24px, 5vw, 64px); grid-template-columns: minmax(0, 1fr); align-items: center; } @media (min-width: 900px) { .split-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .split-copy .eyebrow { display: inline-block; margin-bottom: 8px; } .split-copy h2 { margin: 0 0 12px; } .split-points { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; } .split-points li { padding-left: 26px; position: relative; } .split-points li::before { content: ''; position: absolute; left: 4px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: #4A84B9; box-shadow: 0 0 10px #4A84B9; } .viewer { perspective: 1100px; display: grid; justify-items: center; gap: 12px; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .viewer-stage { width: min(78vw, 320px); aspect-ratio: 2 / 3; position: relative; cursor: grab; } .viewer-stage.dragging { cursor: grabbing; } .viewer-card { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; } .viewer-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; overflow: hidden; box-shadow: 0 26px 60px rgba(0, 0, 0, .55); } .viewer-face img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .viewer-back { transform: rotateY(180deg); } .viewer-shine { position: absolute; inset: 0; border-radius: 14px; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(115deg, transparent calc(var(--sx, 50%) - 22%), rgba(255, 255, 255, .22) var(--sx, 50%), transparent calc(var(--sx, 50%) + 22%)); } .viewer-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; } .viewer-hint { font-size: .875rem; opacity: .75; } @media (prefers-reduced-motion: reduce) { .viewer-card { transition: none; } } /* Clip YouTube pe prima pagina */ .clip-box { position: relative; aspect-ratio: 16 / 9; max-width: 960px; margin: 18px auto; border-radius: 14px; overflow: hidden; background: #050f1d; border: 1px solid rgba(255, 255, 255, .14); } .clip-poster { width: 100%; height: 100%; object-fit: cover; opacity: .55; display: block; } .clip-play { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; padding: 14px 26px; font: inherit; font-weight: 700; color: #fff; background: rgba(10, 45, 89, .9); border: 1px solid #4A84B9; border-radius: 999px; cursor: pointer; } .clip-play:hover, .clip-play:focus-visible { background: #4A84B9; outline: 2px solid #fff; } .clip-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* info.css */ /* Butoanele ⓘ (helperul val_info + info.js): incarcat pe TOATE paginile; zona de cont isi adauga ajustarile in accshell.css. */ .info-wrap { position: relative; display: inline-flex; vertical-align: middle; } .info-i { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); background: rgba(8, 20, 40, .8); color: #fff; font: italic 700 1rem/1 serif; cursor: pointer; display: grid; place-items: center; padding: 0; } .info-i:hover, .info-i[aria-expanded="true"] { border-color: var(--gold-2); color: var(--gold-1); } .info-pop { position: absolute; z-index: 60; top: calc(100% + .5rem); left: 50%; transform: translateX(-50%); width: min(20rem, 80vw); display: grid; gap: .6rem; padding: .9rem 1rem; border: 1px solid var(--edge-hi); border-radius: var(--r-md); background: #0b1d38; color: #fff; font: 400 1rem/1.45 var(--font-body); text-align: left; box-shadow: 0 14px 40px rgba(0, 0, 0, .55); } .info-pop[hidden] { display: none; } .info-close { justify-self: end; min-height: 2.4rem; padding: .3rem 1rem; border-radius: 999px; border: 1px solid var(--edge-hi); background: none; color: #fff; font: 600 .95rem var(--font-body); cursor: pointer; } @media (max-width: 860px) { .info-pop { position: fixed; z-index: 120; left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 1.2rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom, 0px)); font-size: 1.06rem; } html.info-open::after { content: ''; position: fixed; inset: 0; z-index: 110; background: rgba(2, 6, 14, .6); pointer-events: none; } } /* ⓘ cu text lung (reguli, avertismente): randurile noi se pastreaza, iar panoul deruleaza; in subsol se deschide in sus */ .info-txt { white-space: pre-line; max-height: min(62vh, 30rem); overflow-y: auto; overscroll-behavior: contain; } @media (min-width: 861px) { .site-footer .info-pop { top: auto; bottom: calc(100% + .5rem); left: 0; transform: none; width: min(26rem, 80vw); } } /* nav2.css */ /* Antet unic pentru colectionar (clopotel + avatar), meniu lateral grupat, bara de jos cu Scan in mijloc, comutator Album, subsol compact. */ .hdr-bell { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--edge-hi); background: rgba(10, 30, 60, .6); color: #fff; text-decoration: none; } .hdr-bell .ico { width: 1.35rem; height: 1.35rem; } .hdr-bell .pill { position: absolute; top: -.25rem; right: -.25rem; min-width: 1.35rem; padding: 0 .3rem; background: #e5322d; color: #fff; font: 700 .8rem/1.4 var(--font-body); box-shadow: 0 0 0 2px #06101f; } .hdr-bell:hover { border-color: var(--gold-2); } .acct-me { position: relative; } .acct-me > summary { list-style: none; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 50%; border: 1px solid var(--edge-hi); overflow: visible; } .acct-me > summary::-webkit-details-marker, .acct-me > summary::after { display: none; } .acct-me .avatar { --av: 2.4rem; margin: 0; } .acct-me[open] > summary { border-color: var(--gold-2); } .acct-me .acct-panel { right: 0; left: auto; min-width: 13rem; } .nav .acct.comm > summary { white-space: nowrap; } /* meniu lateral grupat */ .acc-gt { margin: .9rem 0 .15rem .5rem; font: 700 .875rem var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--gold-1); } .acc-more-in .acc-gt { margin-left: .2rem; } .acc-shell.is-collapsed .acc-gt { display: none; } .acc-logout { margin-top: var(--s4); } .acc-logout .btn { width: 100%; justify-content: center; } /* Album: comutator Carte / Lista (o singura pagina) */ .alb-switch { display: inline-flex; margin: 0 0 var(--s3); padding: 3px; border: 1px solid var(--edge-hi); border-radius: 999px; background: rgba(10, 30, 60, .6); } .alb-switch .seg { min-height: 44px; display: inline-flex; align-items: center; padding: 0 1.4rem; border-radius: 999px; color: #fff; font: 700 1rem var(--font-body); text-decoration: none; } .alb-switch .seg.on { background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); color: #1b1405; } .acc-content a[href$="view=list"]:not(.seg), .acc-content .bk-fallback { display: none; } /* camera (Scaneaza) */ .scan-h { display: flex; align-items: center; gap: .6rem; font-family: var(--font-body); font-size: 1.4rem; letter-spacing: 0; margin: 0 0 var(--s3); color: #fff; } .scan-manual-d summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: #fff; font-weight: 600; } /* subsol compact in zona de cont */ .site-footer.compact { padding: var(--s4) 0 calc(var(--s4) + 4rem); border-top: 1px solid var(--edge); } .site-footer.compact .footer-links.inline { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; list-style: none; margin: 0 0 .6rem; padding: 0; } .site-footer.compact .footer-links a { color: var(--text); } .site-footer.compact .copyright { margin: 0; color: var(--muted); font-size: .9rem; } @media (min-width: 861px) { .h2-vals { display: none; } } /* scorul si punctele sunt deja in meniul lateral */ .acc-shell { align-content: start; } /* pagini scurte (Scaneaza): continutul porneste de sus, nu centrat */ .alb-switch { position: sticky; top: calc(var(--header-h) + 10px); z-index: 6; margin: 0 auto var(--s3); display: flex; width: max-content; } /* ramane vizibil sub antet, deasupra cartii (album.js lasa loc la derulare), nu peste titlul paginii */ /* Antet colectionar: bulina mica lipita sus-dreapta de cuvant (nu ridica textul), clopotel + avatar identice, comutator EN / RO unitar, linie aurie sub pagina activa */ .nav > a { display: inline-flex; align-items: center; } .nav > a:has(.pill) { margin-right: .7rem; } .nav > a .pill { position: absolute; top: -.3rem; right: -.8rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .28rem; border-radius: 999px; font: 700 .68rem/1.05rem var(--font-body); text-align: center; box-shadow: none; } .hdr-bell, .acct-me > summary { width: 44px; height: 44px; border: 1px solid var(--edge-hi); background: rgba(10, 30, 60, .6); box-sizing: border-box; } .header-cta { gap: .6rem; } .lang { gap: 0; padding: 2px; border: 1px solid var(--edge-hi); border-radius: 999px; background: rgba(10, 30, 60, .6); font-size: .8rem; } .lang a { padding: .3rem .7rem; border-radius: 999px; font-weight: 700; letter-spacing: .08em; line-height: 1; color: var(--chrome-2); } .lang a[aria-current="true"] { background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); color: #1b1405; } .lang a:not([aria-current="true"]):hover { color: #fff; } /* readable.css */ /* Lizibilitate pe tot site-ul (se incarca ULTIMUL): text alb pe fundal inchis, contrast AA, marimi minime, fontul futurist doar la titluri mari si butoane principale. Culorile brandului (auriu, albastru) raman neschimbate. */ html { font-size: 106.25%; } /* 17 px pe telefon */ @media (min-width: 861px) { html { font-size: 100%; } } /* 16 px pe desktop */ body { color: var(--text); line-height: 1.6; } p, li, dd, td, .muted, .hint, .small { color: inherit; } .muted, .hint, .small, small { color: var(--muted); } .muted.small, .hint { font-size: max(.875rem, 14px); } /* campuri de formular: min. 16 px (si fara zoom automat pe iOS), etichete min. 14 px */ input, select, textarea { font-size: max(1rem, 16px); } input::placeholder, textarea::placeholder { color: #aebbcb; opacity: 1; } label, legend, th, dt { font-family: var(--font-body); letter-spacing: .02em; font-size: max(.875rem, 14px); } label, legend { color: var(--text); } th, dt { color: var(--muted); } /* butoane: min. 44 px inaltime; butoanele secundare / mici pe fontul normal */ .btn, button.btn, a.btn, .btn.sm, .btn.small, button[type=submit], input[type=submit], input[type=button] { min-height: 44px; } .btn.sm, .btn.small, .btn.secondary, .btn.ghost { font-family: var(--font-body); letter-spacing: .03em; font-weight: 700; } a, button, summary, [role=button] { -webkit-tap-highlight-color: rgba(227, 192, 108, .2); } .nav > a, .nav .acct > summary, .menu-panel a, .acct-panel a, .acc-link, .acc-tab, .adm-nav a { font-family: var(--font-body); letter-spacing: .02em; } /* nicio spatiere mare intre litere in texte mici / tabele / meniuri */ .eyebrow, .crumbs, .chip, .tag, .badge, .status, .lang, .serial, dl.specs dt, .stat span, .tagline-line, .share strong, .trade-tabs a { font-family: var(--font-body); letter-spacing: .03em; } table, th, td, .tbl, .tbl th, .tbl td { font-family: var(--font-body); letter-spacing: 0; } th { letter-spacing: .03em; } /* text de pe fundal inchis: niciodata gri inchis */ .faint, .dim, [class*="muted"], .copyright, .fiction { color: var(--muted); } footer, .site-footer, .ft-more, .ft-links a { color: var(--text); } a:not(.btn) { text-decoration-thickness: .08em; } h4, h5, h6, .adm-nav h4, .menu-panel h4, summary, .acc-who b { font-family: var(--font-body); letter-spacing: .03em; }