/* * sportstat365 — „Gyep” (F) téma, az egyetlen saját stíluslap. * Terv: POC/sportstat365-gyep-tema.md (4.2), brief: POC/sportstat365-gyep-design-brief.md, * minta: POC/sportstat365-gyep/. * * Négy réteg, a formakod mintájára: * 0. tokenek, @font-face, alap * 1. komponensek (ss- előtaggal — a minta .badge/.h2/.tab nevei ütköznek a bootstrap 3-mal) * 2. integráció: a bootstrap semlegesítése a vendor-markupon (fiók, pénztár, blog) * 3. örökölt osztály-tokenek: gteq_N, a mapper danger/warning/info/success, a klónozott fiók-sablonok bulma-osztályai * * A header a bootstrapot és a font-awesome-ot továbbra is tölti (a fiók- és pénztár-sablonok igénylik), * ez a fájl utolsóként jön, ezért nyer. Módosítás után a ?v= paramétert MINDKÉT headerben léptetni kell. * Betűk: Bebas Neue + Nunito Sans (SIL Open Font License), self-host a téma fonts/ mappájából. */ /* ===================================================================== 0. TOKENEK + ALAP ===================================================================== */ @font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/bebas-neue-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/bebas-neue-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; } /* A Nunito Sans változó font: egy fájl minden vastagságra (400–800 kell) */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('../fonts/nunito-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('../fonts/nunito-sans-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; } :root { --ss-grass: #1C8A42; /* fűcsík 1 — fő zöld, gombok fehér kártyán */ --ss-grass-2: #178039; /* fűcsík 2 */ --ss-line: #FFFFFF; /* pályavonalak, keretek, elsődleges gomb */ --ss-ink: #0E2A18; /* szöveg fehér kártyán, lábléc, mobil tab-sáv */ --ss-mint: #DFF5E6; /* másodlagos szöveg gyepen; elválasztó fehér kártyán */ --ss-mint-2: #F3FAF5; /* input- és táblafejléc-háttér */ --ss-muted: #4E8A62; /* halvány felirat fehér kártyán */ --ss-lockbar: #B9DCC4; /* zárolt sáv kitöltése, hiányzó odds */ --ss-dim: rgba(0, 0, 0, .25); --ss-ring: rgba(255, 255, 255, .35); --ss-bad: #B42318; --ss-cond: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif; --ss-sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ss-tabbar-h: 64px; } html { font-size: 100%; -webkit-text-size-adjust: 100%; } body#s365_theme { margin: 0; min-height: 100vh; color: var(--ss-line); background-color: var(--ss-grass); background-image: repeating-linear-gradient(90deg, var(--ss-grass) 0 120px, var(--ss-grass-2) 120px 240px); font-family: var(--ss-sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body#s365_theme.ss-home { font-size: 16px; } a { color: var(--ss-line); } a:hover, a:focus { color: var(--ss-mint); } :focus-visible { outline: 3px solid var(--ss-line); outline-offset: 2px; } .ss-white :focus-visible { outline-color: var(--ss-grass); } img { max-width: 100%; } svg { flex: none; } .ss-cond { font-family: var(--ss-cond); letter-spacing: .02em; font-weight: 400; } .ss-num { font-variant-numeric: tabular-nums; } .ss-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } [hidden] { display: none !important; } /* ===================================================================== 1. KOMPONENSEK ===================================================================== */ /* --- elrendezés --- */ .ss-wrap { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } .ss-wrap--mid { max-width: 1180px; } .ss-wrap--narrow { max-width: 1000px; } .ss-page { padding-top: 32px; padding-bottom: 64px; } .ss-sec { padding-top: 80px; padding-bottom: 80px; } .ss-sec--sm { padding-top: 56px; padding-bottom: 56px; } .ss-sec--top0 { padding-top: 0; } .ss-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; } .ss-row--center { align-items: center; } .ss-row--between { justify-content: space-between; } .ss-col-side { flex: 1 1 260px; min-width: 0; max-width: 100%; } .ss-col-main { flex: 999 1 640px; min-width: 0; } .ss-stack { display: flex; flex-direction: column; gap: 20px; } .ss-grid { display: grid; gap: 20px; } .ss-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .ss-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .ss-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .ss-grid--5 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .ss-center { text-align: center; } .ss-mt0 { margin-top: 0 !important; } .ss-mb0 { margin-bottom: 0 !important; } /* --- tipográfia --- */ .ss-display, .ss-h1, .ss-h2, .ss-h3, .ss-title { font-family: var(--ss-cond); font-weight: 400; letter-spacing: .02em; color: inherit; } .ss-display { font-size: 150px; line-height: .88; margin: 20px auto 0; max-width: 1000px; text-shadow: 0 4px 0 rgba(0, 0, 0, .18); } .ss-display--md { font-size: 130px; } .ss-h1 { font-size: 110px; line-height: .88; margin: 0 0 16px; text-shadow: 0 4px 0 rgba(0, 0, 0, .18); } .ss-h1--list { font-size: 72px; line-height: .9; margin: 0; text-shadow: none; } .ss-h1--reg { font-size: 96px; margin: 8px 0 18px; } .ss-h2 { font-size: 64px; line-height: .95; margin: 8px 0 40px; } .ss-h2--md { font-size: 44px; margin: 10px 0 14px; } .ss-h3 { font-size: 32px; line-height: 1; margin: 18px 0 8px; } .ss-title { font-size: 28px; line-height: 1; margin: 0; } .ss-title--sm { font-size: 26px; } .ss-eyebrow { font-family: var(--ss-cond); font-size: 20px; letter-spacing: .12em; color: var(--ss-mint); } .ss-lead { font-size: 19px; color: var(--ss-mint); font-weight: 600; max-width: 640px; margin: 24px auto 0; } .ss-soft { color: var(--ss-mint); font-weight: 600; } .ss-mute { color: var(--ss-muted); } .ss-small { font-size: 13px; } .ss-strong { font-weight: 800; } .ss-kicker { display: inline-block; font-family: var(--ss-cond); font-size: 18px; letter-spacing: .1em; border: 2px solid var(--ss-line); border-radius: 999px; padding: 6px 16px; line-height: 1.2; } .ss-note { margin: 24px 0 0; font-size: 13px; color: var(--ss-mint); font-weight: 600; max-width: 760px; } /* --- fejléc --- */ .ss-top { border-bottom: 3px solid var(--ss-line); position: relative; z-index: 30; } .ss-nav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; } .ss-brand { font-family: var(--ss-cond); font-size: 30px; line-height: 1; letter-spacing: .02em; color: var(--ss-line); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .ss-brand:hover, .ss-brand:focus { color: var(--ss-line); text-decoration: none; } .ss-brand img { max-height: 42px; width: auto; display: block; } .ss-brand__img { height: 42px; width: auto; max-height: none; display: block; } .ss-brand__365 { border: 3px solid var(--ss-line); border-radius: 50%; padding: 0 8px; font-size: 20px; line-height: 1.35; } .ss-menu { display: flex; align-items: center; gap: 22px; flex: 1; font-family: var(--ss-cond); font-size: 21px; letter-spacing: .02em; color: var(--ss-mint); } .ss-menu a { color: inherit; text-decoration: none; border-bottom: 3px solid transparent; padding-bottom: 1px; } .ss-menu a:hover, .ss-menu a:focus { color: var(--ss-line); text-decoration: none; } .ss-menu a.is-on { color: var(--ss-line); border-bottom-color: var(--ss-line); } .ss-menu__mob { display: none; } .ss-act { display: flex; gap: 12px; align-items: center; margin-left: auto; } .ss-act__link { color: var(--ss-line); text-decoration: none; font-weight: 700; padding: 10px 14px; } .ss-act__link:hover { color: var(--ss-mint); text-decoration: none; } .ss-menu-btn { display: none; border: 3px solid var(--ss-line); background: transparent; color: var(--ss-line); border-radius: 999px; font-family: var(--ss-cond); font-size: 20px; letter-spacing: .06em; padding: 6px 16px; cursor: pointer; line-height: 1.1; margin-left: auto; } .ss-pill { display: inline-block; font-family: var(--ss-cond); font-size: 17px; letter-spacing: .06em; color: var(--ss-mint); border: 2px solid rgba(255, 255, 255, .6); border-radius: 999px; padding: 6px 14px; white-space: nowrap; line-height: 1.2; } .ss-pill--w { background: var(--ss-line); color: var(--ss-ink); border-color: var(--ss-line); } /* --- mobil alsó tab-sáv (a menu.twig adja) --- */ .ss-tabbar { display: none; } /* --- gombok --- */ .ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 3px solid transparent; border-radius: 999px; padding: 9px 23px; font-family: var(--ss-sans); font-size: 15px; font-weight: 800; line-height: 1.25; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; } .ss-btn:hover, .ss-btn:focus { text-decoration: none; } .ss-btn--w { background: var(--ss-line); color: var(--ss-ink); border-color: var(--ss-line); } .ss-btn--w:hover, .ss-btn--w:focus { background: var(--ss-mint); border-color: var(--ss-mint); color: var(--ss-ink); } .ss-btn--o { background: transparent; color: var(--ss-line); border-color: var(--ss-line); } .ss-btn--o:hover, .ss-btn--o:focus { background: var(--ss-line); color: var(--ss-ink); } .ss-btn--g { background: var(--ss-grass); color: var(--ss-line); border-color: var(--ss-grass); } .ss-btn--g:hover, .ss-btn--g:focus { background: var(--ss-grass-2); border-color: var(--ss-grass-2); color: var(--ss-line); } .ss-btn--gl { background: var(--ss-line); color: var(--ss-grass); border-color: var(--ss-grass); } .ss-btn--gl:hover, .ss-btn--gl:focus { background: var(--ss-grass); color: var(--ss-line); } .ss-btn--hero { font-family: var(--ss-cond); font-weight: 400; font-size: 24px; letter-spacing: .02em; padding: 9px 30px; } .ss-btn--sm { padding: 7px 17px; } .ss-btn--block { display: flex; width: 100%; } .ss-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; } .ss-btns--center { justify-content: center; } /* --- fülek (pill-csoport) --- */ .ss-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; border: 3px solid var(--ss-line); border-radius: 999px; padding: 4px; } .ss-tab { display: inline-block; border: 0; background: transparent; color: var(--ss-mint); font-family: var(--ss-cond); font-size: 20px; letter-spacing: .04em; line-height: 1.1; padding: 8px 16px; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap; } .ss-tab:hover, .ss-tab:focus { color: var(--ss-line); text-decoration: none; } .ss-tab.is-on, .ss-tab.is-on:hover { background: var(--ss-line); color: var(--ss-ink); } .ss-tabs--card { border: 0; background: var(--ss-mint-2); padding: 3px; gap: 2px; } .ss-tabs--card .ss-tab { color: var(--ss-muted); font-size: 17px; padding: 5px 12px; } .ss-tabs--card .ss-tab:hover { color: var(--ss-ink); } .ss-tabs--card .ss-tab.is-on { background: var(--ss-grass); color: var(--ss-line); } .ss-tabs--duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; background: var(--ss-mint-2); border: 0; border-radius: 999px; padding: 4px; margin-bottom: 28px; } .ss-tabs--duo .ss-tab { font-size: 24px; padding: 9px; text-align: center; color: var(--ss-muted); } .ss-tabs--duo .ss-tab.is-on { background: var(--ss-grass); color: var(--ss-line); } /* --- jelvények --- */ .ss-badge { display: inline-block; font-family: var(--ss-cond); font-size: 18px; letter-spacing: .08em; line-height: 1.2; background: var(--ss-line); color: var(--ss-ink); padding: 4px 14px; border-radius: 999px; } .ss-badge--grass { background: var(--ss-grass); color: var(--ss-line); } .ss-badge--float { position: absolute; top: -16px; left: 22px; } .ss-badge--float-r { position: absolute; top: -15px; right: 14px; } /* --- kártyák, sávok --- */ .ss-pitch { border: 3px solid var(--ss-line); border-radius: 14px; } .ss-pitch--lg { border-radius: 20px; } .ss-white { background: var(--ss-line); color: var(--ss-ink); border-radius: 20px; } .ss-white a:not(.ss-btn):not(.ss-tab) { color: var(--ss-grass); } .ss-white a:not(.ss-btn):not(.ss-tab):hover { color: var(--ss-grass-2); } .ss-clip { overflow: hidden; } .ss-pad { padding: 26px; } .ss-pad-sm { padding: 18px 20px; } .ss-band { background: var(--ss-dim); border-top: 2px solid var(--ss-line); border-bottom: 2px solid var(--ss-line); } .ss-band--open { border-bottom: 0; } .ss-head { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; align-items: baseline; padding: 14px 22px; border-bottom: 2px solid var(--ss-mint); } .ss-head--mint { background: var(--ss-mint-2); padding-top: 12px; padding-bottom: 12px; } .ss-head__meta { font-size: 13px; font-weight: 700; color: var(--ss-muted); } .ss-line-t { border-top: 2px solid var(--ss-mint); } /* --- pálya-motívum: középkör + félpálya-vonal --- */ .ss-fieldbg { position: relative; overflow: hidden; } .ss-fieldbg > .ss-on { position: relative; } .ss-circle { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border: 4px solid var(--ss-ring); border-radius: 50%; pointer-events: none; } .ss-circle--sm { width: 220px; height: 220px; margin: -110px 0 0 -110px; border-width: 3px; } .ss-circle--corner { left: -140px; top: auto; bottom: -140px; margin: 0; width: 420px; height: 420px; border-color: rgba(255, 255, 255, .3); } .ss-midline { position: absolute; left: 0; right: 0; top: 50%; height: 4px; background: var(--ss-ring); pointer-events: none; } .ss-midline--v { left: 50%; right: auto; top: 0; bottom: 0; width: 3px; height: auto; } /* --- csíkok, sávok --- */ .ss-stripe { background: repeating-linear-gradient(90deg, var(--ss-grass) 0 24px, var(--ss-grass-2) 24px 48px); } .ss-stripe--l { background: repeating-linear-gradient(-90deg, var(--ss-grass) 0 24px, var(--ss-grass-2) 24px 48px); } .ss-dark { background: var(--ss-ink); } .ss-bar { display: flex; height: 12px; background: var(--ss-mint); border-radius: 6px; overflow: hidden; } .ss-bar > span { display: block; height: 100%; } .ss-bar--end { justify-content: flex-end; } .ss-bar--16 { height: 16px; border-radius: 8px; } .ss-bar__lock { background: var(--ss-lockbar); border-radius: 6px; } .ss-meter { display: flex; align-items: center; gap: 10px; } .ss-meter > .ss-bar { flex: 1; min-width: 40px; } .ss-meter__v { font-family: var(--ss-cond); font-size: 26px; line-height: 1; width: 46px; color: var(--ss-grass); font-variant-numeric: tabular-nums; } .ss-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; } /* --- számlálók, lépések, mutató-csoportok --- */ .ss-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; text-align: center; padding-top: 28px; padding-bottom: 28px; } .ss-counter__v { font-family: var(--ss-cond); font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; } .ss-counter__l { color: var(--ss-mint); font-weight: 600; } .ss-step { padding: 26px; position: relative; } .ss-step__n { width: 56px; height: 56px; border: 3px solid var(--ss-line); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--ss-cond); font-size: 30px; line-height: 1; } .ss-step p { margin: 0; color: var(--ss-mint); font-weight: 600; } .ss-statgroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; } .ss-statgroup__h { font-family: var(--ss-cond); font-size: 30px; line-height: 1; padding-bottom: 10px; border-bottom: 3px solid var(--ss-line); margin-bottom: 14px; } .ss-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .ss-tag { display: inline-block; font-size: 13px; font-weight: 700; padding: 6px 13px; border: 2px solid var(--ss-line); border-radius: 999px; color: var(--ss-line); font-variant-numeric: tabular-nums; } .ss-white .ss-tag { border-color: var(--ss-mint); color: var(--ss-ink); } /* --- pipás listák --- */ .ss-ticks { display: flex; flex-direction: column; gap: 10px; flex: 1; margin: 0; padding: 0; list-style: none; font-size: 15px; font-weight: 600; } .ss-ticks li { display: flex; gap: 10px; align-items: flex-start; } .ss-ticks svg { margin-top: 2px; } .ss-tickc { width: 26px; height: 26px; border: 3px solid var(--ss-line); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; } .ss-bullets { display: flex; flex-direction: column; gap: 12px; margin: 0 0 34px; padding: 0; list-style: none; } .ss-bullets li { display: flex; gap: 12px; align-items: center; font-size: 16px; font-weight: 700; } /* --- csomag-kártyák --- */ .ss-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: stretch; } .ss-prices--lg { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .ss-price { position: relative; border: 4px solid var(--ss-line); padding: 26px; display: flex; flex-direction: column; gap: 14px; } .ss-prices--lg .ss-price { padding: 30px; gap: 16px; } .ss-price--hi { border-color: var(--ss-grass); } .ss-price__name { font-family: var(--ss-cond); font-size: 28px; line-height: 1; } .ss-prices--lg .ss-price__name { font-size: 30px; } .ss-price__v { font-family: var(--ss-cond); font-size: 60px; line-height: 1; color: var(--ss-ink); font-variant-numeric: tabular-nums; } .ss-prices--lg .ss-price__v { font-size: 68px; } .ss-price--hi .ss-price__v { color: var(--ss-grass); } .ss-price__cur { color: var(--ss-muted); font-weight: 700; } .ss-price__old { color: var(--ss-muted); font-weight: 700; font-size: 14px; text-decoration: line-through; } .ss-price__sub { font-size: 14px; color: var(--ss-muted); font-weight: 600; min-height: 22px; } .ss-price .ss-btn { margin-top: auto; } .ss-prices--merge .ss-prices-wrap, .ss-prices--merge .ss-prices { display: contents; } .ss-cols--vb .ss-c-rate { text-align: right; } /* --- tipp-chipek (9 / meccs) --- */ .ss-chips { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; } .ss-chip { text-align: center; border-radius: 12px; padding: 8px 4px; background: var(--ss-line); border: 2px solid var(--ss-mint); } .ss-chip__k { display: block; font-size: 11px; font-weight: 700; color: var(--ss-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-chip__v { display: block; font-family: var(--ss-cond); font-size: 26px; line-height: 1.1; color: var(--ss-ink); font-variant-numeric: tabular-nums; } .ss-chip__o { display: block; font-size: 12px; font-weight: 600; color: var(--ss-muted); font-variant-numeric: tabular-nums; } .ss-chip--hi { background: var(--ss-grass); border-color: var(--ss-grass); } .ss-chip--hi .ss-chip__k, .ss-chip--hi .ss-chip__o { color: var(--ss-mint); } .ss-chip--hi .ss-chip__v { color: var(--ss-line); } .ss-chip--lo { background: var(--ss-mint-2); } .ss-chip--lo .ss-chip__v { color: var(--ss-muted); } .ss-chip--na { opacity: .45; } /* --- listák: oldal-fej, szűrő-oldalsáv, liga-kártya, sor-rács --- */ .ss-listhead { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; } .ss-listhead__sub { color: var(--ss-mint); font-weight: 700; font-size: 14px; margin-top: 8px; } .ss-aside { padding: 22px; display: flex; flex-direction: column; gap: 22px; } .ss-aside__note { font-size: 13px; color: var(--ss-muted); font-weight: 600; border-top: 2px solid var(--ss-mint); padding-top: 14px; } .ss-leagues { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .ss-leagues li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; } .ss-leagues li span:first-child { flex: 1; min-width: 0; } .ss-leagues a { color: var(--ss-ink) !important; text-decoration: none; } .ss-leagues a:hover { color: var(--ss-grass) !important; } .ss-leagues .ss-cnt { color: var(--ss-muted); font-size: 13px; font-variant-numeric: tabular-nums; } .ss-flag { width: 18px; height: auto; border-radius: 2px; vertical-align: -2px; margin-right: 6px; } .ss-cols { display: grid; gap: 12px; align-items: center; padding: 14px 22px; } .ss-cols--head { font-family: var(--ss-cond); font-size: 14px; letter-spacing: .08em; color: var(--ss-muted); padding-top: 10px; padding-bottom: 10px; } .ss-cols--ins { grid-template-columns: 64px minmax(0, 2.6fr) minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, .7fr) 40px; grid-template-areas: "time teams mk rate odds chev"; } .ss-cols--vb { grid-template-columns: 70px minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .7fr) minmax(0, .9fr) minmax(0, 2fr) minmax(0, .9fr) 40px; grid-template-areas: "time teams mk rate odds book diff prof chev"; gap: 14px; padding-top: 13px; padding-bottom: 13px; } .ss-cols--vb.ss-cols--head { padding-top: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ss-mint); background: var(--ss-mint-2); } .ss-c-time { grid-area: time; } .ss-c-teams { grid-area: teams; min-width: 0; } .ss-c-mk { grid-area: mk; } .ss-c-rate { grid-area: rate; } .ss-c-odds { grid-area: odds; text-align: right; } .ss-c-chev { grid-area: chev; text-align: right; } .ss-c-book { grid-area: book; text-align: right; } .ss-c-diff { grid-area: diff; } .ss-c-prof { grid-area: prof; text-align: right; } .ss-mlbl { display: none; } .ss-irow { color: var(--ss-ink); cursor: pointer; transition: background-color .12s; } .ss-irow:hover { background: var(--ss-mint-2); } .ss-time { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .ss-time__d { font-weight: 800; } .ss-time__h { color: var(--ss-muted); font-weight: 600; } .ss-team { font-weight: 800; overflow: hidden; text-overflow: ellipsis; } .ss-sub { font-size: 13px; color: var(--ss-muted); font-weight: 600; } .ss-mk { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .ss-big { font-family: var(--ss-cond); font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; } .ss-mid { font-family: var(--ss-cond); font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; } .ss-pp { color: var(--ss-grass); width: 66px; font-family: var(--ss-cond); font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; } /* lenyitó gomb (Elemzések + Értékfogadások sora): csukva tömör zöld kör lefelé mutató nyíllal és pulzáló gyűrűvel, nyitva menta kör, a nyíl felfelé. A pulzálás az oldalon az első nyitásig tart (a JS a -re ss-hinted osztályt tesz), csökkentett mozgásnál nincs. */ .ss-chev { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ss-grass); color: var(--ss-line); box-shadow: 0 2px 6px rgba(14, 42, 24, .22); transition: background-color .12s, color .12s, transform .15s; } .ss-chev svg { display: block; transition: transform .2s; } .ss-chev::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; border: 2px solid var(--ss-grass); opacity: 0; pointer-events: none; animation: ss-chev-pulse 2.4s ease-out infinite; } .ss-irow:hover .ss-chev { background: var(--ss-ink); transform: scale(1.08); } .ss-match.is-open .ss-chev { background: var(--ss-mint); color: var(--ss-grass); box-shadow: none; } .ss-match.is-open .ss-chev svg { transform: rotate(180deg); } .ss-match.is-open .ss-chev::after, .ss-hinted .ss-chev::after { animation: none; opacity: 0; } @keyframes ss-chev-pulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.75); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ss-chev::after { animation: none; } .ss-chev, .ss-chev svg { transition: none; } } .ss-tips { padding: 2px 22px 18px 98px; color: var(--ss-ink); } .ss-tips__cap { font-family: var(--ss-cond); font-size: 14px; letter-spacing: .08em; color: var(--ss-muted); margin-bottom: 8px; } .ss-blur { filter: blur(4px); -webkit-user-select: none; user-select: none; pointer-events: none; } .ss-lock { color: var(--ss-muted); display: inline-flex; } .ss-locked .ss-c-mk, .ss-locked .ss-c-book { color: var(--ss-muted); } .ss-empty { padding: 28px 22px; text-align: center; color: var(--ss-muted); font-weight: 700; } .ss-more { padding: 12px 22px; border-top: 2px solid var(--ss-mint); text-align: right; font-size: 13px; font-weight: 700; color: var(--ss-muted); } /* vendég: a korábbi nap ingyenes elemzésének kártyája (13.2) — lábléc regisztrációval, kompakt felirat */ .ss-guestwrap { margin-bottom: 18px; } .ss-guestfree__foot { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; padding: 14px 22px; border-top: 2px solid var(--ss-mint); background: var(--ss-mint-2); } .ss-guestfree__t { margin: 0; font-size: 14px; font-weight: 700; color: var(--ss-ink); } .ss-guestfree__btns { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; } .ss-white a.ss-guestfree__login { font-size: 14px; font-weight: 800; } .ss-guestcap { padding: 12px 22px 0; font-family: var(--ss-cond); font-size: 15px; letter-spacing: .08em; color: var(--ss-muted); } /* „Kiemelt ma” kis példány: teljes sor elmosva, rajta overlay-gomb */ .ss-lockrows { position: relative; border-top: 2px solid var(--ss-mint); } .ss-lockrows__rows { filter: blur(5px); opacity: .45; -webkit-user-select: none; user-select: none; pointer-events: none; } .ss-lockrows__btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } /* --- értékfogadás-példa widget (CCA tracking_card / control_card) --- */ .ss-vbcard__h { display: flex; justify-content: space-between; gap: 12px; font-family: var(--ss-cond); font-size: 26px; line-height: 1.1; margin-bottom: 14px; } .ss-vbcard__l { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 700; color: var(--ss-muted); margin-bottom: 6px; } .ss-vbcard__l .ss-num { color: var(--ss-ink); } .ss-vbcard__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--ss-mint); font-family: var(--ss-cond); } .ss-vbcard__k { font-size: 16px; color: var(--ss-muted); letter-spacing: .08em; } .ss-vbcard__v { font-size: 48px; line-height: 1; color: var(--ss-grass); font-variant-numeric: tabular-nums; } /* --- CTA-sáv a lista alatt --- */ .ss-cta { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; border: 3px solid var(--ss-line); border-radius: 20px; padding: 22px 26px; background: var(--ss-dim); } .ss-cta__t { font-family: var(--ss-cond); font-size: 28px; line-height: 1; } .ss-cta__d { color: var(--ss-mint); font-weight: 600; margin-top: 4px; } /* --- értékfogadás: szűrők, jelmagyarázat --- */ .ss-filters { display: flex; gap: 10px; flex-wrap: wrap; } .ss-filters label { display: flex; align-items: center; gap: 8px; font-family: var(--ss-cond); font-size: 18px; letter-spacing: .06em; color: var(--ss-mint); font-weight: 400; margin: 0; } .ss-sel { background: var(--ss-line); color: var(--ss-ink); border: 0; border-radius: 999px; font: inherit; font-family: var(--ss-sans); font-size: 15px; font-weight: 700; letter-spacing: 0; padding: 9px 14px; } .ss-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 28px 0; } .ss-legend__i { border: 3px solid var(--ss-line); border-radius: 16px; padding: 14px 16px; } .ss-legend__t { font-family: var(--ss-cond); font-size: 20px; letter-spacing: .08em; line-height: 1; } .ss-legend__d { font-size: 14px; color: var(--ss-mint); font-weight: 600; margin-top: 6px; } /* --- űrlap-elemek --- */ .ss-form { display: flex; flex-direction: column; gap: 18px; margin: 0; } .ss-lbl { display: block; font-family: var(--ss-cond); font-size: 17px; letter-spacing: .1em; color: var(--ss-muted); margin: 0 0 6px; font-weight: 400; } .ss-lbl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .ss-lbl-row a { font-size: 14px; font-weight: 700; } .ss-inp { display: block; width: 100%; background: var(--ss-mint-2); border: 2px solid var(--ss-mint); border-radius: 12px; color: var(--ss-ink); font: inherit; font-family: var(--ss-sans); font-weight: 600; padding: 11px 14px; outline: 0; box-shadow: none; } .ss-inp:focus { border-color: var(--ss-grass); } .ss-inp::placeholder { color: var(--ss-muted); opacity: .8; } .ss-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 600; margin: 0; cursor: pointer; } .ss-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ss-grass); flex: none; } .ss-err { color: var(--ss-bad); font-size: 13px; font-weight: 700; margin-top: 6px; } .ss-alert { border-radius: 12px; padding: 12px 16px; font-weight: 700; font-size: 14px; margin: 0 0 18px; background: var(--ss-mint-2); color: var(--ss-ink); border: 2px solid var(--ss-mint); } .ss-alert--bad { background: #FEF3F2; border-color: #FECDCA; color: var(--ss-bad); } .ss-alert--ok { background: var(--ss-mint); border-color: var(--ss-grass); } .ss-captcha { color: var(--ss-ink); } .ss-captcha img { border-radius: 12px; border: 2px solid var(--ss-mint); max-width: 100%; } .ss-captcha .form-group { margin: 0; } .ss-captcha label, .ss-captcha .control-label { font-family: var(--ss-cond); font-size: 17px; letter-spacing: .1em; color: var(--ss-muted); font-weight: 400; text-align: left; width: 100%; float: none; padding: 0; margin-bottom: 6px; } .ss-captcha [class*="col-"] { width: 100%; float: none; padding: 0; } .ss-formcard { padding: 32px; max-width: 480px; flex: 1 1 420px; min-width: 0; } .ss-formnote { margin: 24px 0 0; font-size: 12px; color: var(--ss-muted); font-weight: 600; text-align: center; } /* --- regisztráció / belépés oldal --- */ .ss-reg { position: relative; overflow: hidden; } .ss-reg__in { position: relative; display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; padding-top: 64px; padding-bottom: 64px; } .ss-reg__side { flex: 1 1 420px; min-width: 0; container-type: inline-size; } .ss-reg__lead { margin: 0 0 30px; color: var(--ss-mint); font-size: 17px; font-weight: 600; max-width: 460px; } /* a modul fejléc-címe hosszú szót is hozhat (élesben „…FUTBALLKÖZÖSSÉGHEZ…”, ~7,2 × betűméret): a hasábhoz méretezve */ .ss-reg__side .ss-h1--reg { font-size: min(96px, 13.5cqi); overflow-wrap: break-word; } .ss-reg__side a:not(.ss-btn), .ss-soft a:not(.ss-btn), .ss-lead a:not(.ss-btn) { color: var(--ss-line) !important; text-decoration: underline; text-underline-offset: 3px; font-weight: 800; } /* --- forma-körök (GY / D / V) --- */ .ss-forms { display: flex; gap: 5px; } .ss-fc { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--ss-cond); font-size: 16px; line-height: 1; border: 2px solid var(--ss-line); background: transparent; color: var(--ss-line); } .ss-fc--w { background: var(--ss-line); color: var(--ss-ink); } .ss-fc--d { background: rgba(255, 255, 255, .25); } .ss-white .ss-fc, .ss-pcard .ss-fc { border-color: var(--ss-grass); color: var(--ss-grass); } .ss-white .ss-fc--w, .ss-pcard .ss-fc--w { background: var(--ss-grass); color: var(--ss-line); } .ss-white .ss-fc--d, .ss-pcard .ss-fc--d { background: var(--ss-mint); } /* --- odds-pill --- */ .ss-odds { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ss-ink); font-variant-numeric: tabular-nums; } .ss-odds--best { background: var(--ss-grass); color: var(--ss-line); font-weight: 800; } .ss-odds--na { color: var(--ss-lockbar); } /* --- lenyíló meccs-panel (a sor alatt, fehér kártyán belül) --- */ .ss-match { border-top: 2px solid var(--ss-mint); } .ss-panelwrap { border-top: 2px solid var(--ss-mint); background: var(--ss-mint-2); color: var(--ss-ink); } .ss-panel { padding: 18px 22px 24px; } .ss-panel__tabs { margin-bottom: 16px; } .ss-panel__tabs .ss-tabs--card { background: var(--ss-line); } .ss-panel__pane { display: none; } .ss-panel__pane.is-on { display: block; } .ss-spin { padding: 18px 22px; color: var(--ss-muted); font-weight: 700; } .ss-mh { position: relative; overflow: hidden; border: 3px solid var(--ss-line); border-radius: 20px; padding: 26px; color: var(--ss-line); background: repeating-linear-gradient(90deg, var(--ss-grass) 0 60px, var(--ss-grass-2) 60px 120px); box-shadow: 0 0 0 2px var(--ss-mint); margin-bottom: 18px; } .ss-mh__meta { position: relative; font-family: var(--ss-cond); font-size: 20px; letter-spacing: .1em; color: var(--ss-mint); text-align: center; } .ss-mh__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 18px; } .ss-mh__team { font-family: var(--ss-cond); font-size: 56px; line-height: .9; overflow-wrap: anywhere; } .ss-mh__home { text-align: right; } .ss-mh__home .ss-forms { justify-content: flex-end; } .ss-mh__info { font-size: 13px; color: var(--ss-mint); font-weight: 700; margin-top: 8px; } .ss-mh__vs { width: 64px; height: 64px; border: 3px solid var(--ss-line); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--ss-cond); font-size: 26px; background: var(--ss-grass); } .ss-mh .ss-forms { margin-top: 12px; } .ss-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 6px 0 22px; } .ss-tops__h { font-family: var(--ss-cond); font-size: 32px; line-height: 1; margin: 0 0 14px; font-weight: 400; } .ss-top3 { position: relative; background: var(--ss-line); border: 4px solid var(--ss-line); box-shadow: 0 0 0 2px var(--ss-mint); border-radius: 20px; padding: 20px; color: var(--ss-ink); } .ss-top3--hi { border-color: var(--ss-grass); box-shadow: none; } .ss-top3__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .ss-top3__v { font-family: var(--ss-cond); font-size: 64px; line-height: 1; margin-top: 8px; font-variant-numeric: tabular-nums; } .ss-top3--hi .ss-top3__v { color: var(--ss-grass); } .ss-pcards { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; } .ss-pcard { background: var(--ss-line); color: var(--ss-ink); border-radius: 16px; overflow: hidden; flex: 1 1 100%; min-width: 0; } .ss-pcard__h { margin: 0; font-family: var(--ss-cond); font-size: 28px; line-height: 1; letter-spacing: .02em; font-weight: 400; } .ss-pcard__sub { font-size: 13px; color: var(--ss-muted); font-weight: 600; margin-top: 4px; } .ss-pempty { padding: 18px 22px; color: var(--ss-muted); font-weight: 700; } /* összehasonlítás: pillangósorok */ .ss-bfleg { display: flex; justify-content: space-between; gap: 12px; padding: 12px 22px 4px; font-size: 13px; font-weight: 700; } .ss-bfleg > span { display: flex; align-items: center; gap: 8px; } .ss-bf { display: grid; grid-template-columns: 48px minmax(0, 1fr) 150px minmax(0, 1fr) 48px; gap: 12px; align-items: center; padding: 9px 22px; border-top: 2px solid var(--ss-mint); } .ss-bf--hl { background: var(--ss-mint-2); } .ss-bf__v { font-family: var(--ss-cond); font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; } .ss-bf__v--l { text-align: right; } .ss-bf__lbl { text-align: center; font-size: 13px; font-weight: 700; color: var(--ss-muted); line-height: 1.25; } .ss-bf__v.is-strong { color: var(--ss-grass); } .ss-bf--plain .ss-bar { visibility: hidden; } /* H2H */ .ss-h2hs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); border-bottom: 2px solid var(--ss-mint); background: var(--ss-mint-2); } .ss-h2hs > div { padding: 12px 16px; border-right: 2px solid var(--ss-mint); border-bottom: 2px solid var(--ss-mint); } .ss-h2hs__k { font-family: var(--ss-cond); font-size: 14px; letter-spacing: .08em; color: var(--ss-muted); } .ss-h2hs__v { font-family: var(--ss-cond); font-size: 32px; line-height: 1.1; color: var(--ss-grass); font-variant-numeric: tabular-nums; } .ss-h2hs__n { font-size: 12px; color: var(--ss-muted); font-weight: 700; font-variant-numeric: tabular-nums; } .ss-h2hform { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; padding: 14px 22px; border-bottom: 2px solid var(--ss-mint); } .ss-h2hform__t { font-weight: 800; font-size: 14px; margin-bottom: 6px; } .ss-h2hl { display: grid; grid-template-columns: 110px minmax(0, 1.4fr) minmax(0, 2fr) 70px; gap: 12px; align-items: center; padding: 10px 22px; border-top: 2px solid var(--ss-mint); font-size: 14px; } .ss-h2hl__d { color: var(--ss-muted); font-weight: 700; font-variant-numeric: tabular-nums; } .ss-h2hl__l { color: var(--ss-muted); font-size: 13px; font-weight: 600; } .ss-h2hl__m { font-weight: 700; } .ss-h2hl__m b { font-weight: 800; color: var(--ss-grass); } .ss-h2hl__r { text-align: right; font-family: var(--ss-cond); font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; } .ss-h2hsep { padding: 8px 22px; border-top: 2px solid var(--ss-mint); background: var(--ss-mint-2); font-family: var(--ss-cond); font-size: 14px; letter-spacing: .08em; color: var(--ss-muted); } /* Poisson-erőviszony */ .ss-pois { padding: 10px 22px; border-top: 2px solid var(--ss-mint); } .ss-pois__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; margin-bottom: 4px; } .ss-pois__row .ss-bf__lbl { flex: 1; } .ss-pois--sum .ss-bf__lbl { color: var(--ss-grass); font-weight: 800; } /* táblák (tabella, odds) */ .ss-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ss-tbl { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--ss-ink); background: var(--ss-line); } .ss-tbl th { font-family: var(--ss-cond); font-weight: 400; font-size: 14px; letter-spacing: .08em; color: var(--ss-muted); text-align: left; padding: 10px 8px; white-space: nowrap; } .ss-tbl th:first-child, .ss-tbl td:first-child { padding-left: 22px; } .ss-tbl th:last-child, .ss-tbl td:last-child { padding-right: 22px; } .ss-tbl td { padding: 9px 8px; border-top: 2px solid var(--ss-mint); vertical-align: middle; font-variant-numeric: tabular-nums; } .ss-tbl .ss-r { text-align: right; } .ss-tbl .ss-c { text-align: center; } .ss-tbl tr.is-hl td { background: var(--ss-mint-2); font-weight: 800; } .ss-tbl--st { min-width: 520px; } .ss-tbl--odds { min-width: 640px; } .ss-tbl__mk { font-weight: 800; white-space: nowrap; } .ss-tbl__bm img { max-height: 20px; width: auto; vertical-align: middle; } .ss-tbl__avg { color: var(--ss-muted); font-weight: 700; text-align: right; } /* szójegyzék —
, JS nélkül */ .ss-gloss { border-top: 2px solid var(--ss-mint); } .ss-gloss > summary { cursor: pointer; padding: 10px 22px; font-family: var(--ss-cond); font-size: 16px; letter-spacing: .08em; color: var(--ss-grass); list-style: none; } .ss-gloss > summary::-webkit-details-marker { display: none; } .ss-gloss > summary::before { content: '+ '; } .ss-gloss[open] > summary::before { content: '– '; } .ss-gloss__body { padding: 0 22px 14px; font-size: 13px; color: var(--ss-muted); font-weight: 600; } .ss-gloss__body p { margin: 0 0 6px; } .ss-gloss__body b { color: var(--ss-ink); } /* --- információs oldal, blog --- */ .ss-info { padding-top: 72px; padding-bottom: 96px; } .ss-crumbs { font-size: 13px; font-weight: 700; color: var(--ss-mint); margin-bottom: 14px; } .ss-crumbs a { color: var(--ss-mint); text-decoration: none; } .ss-crumbs a:hover { color: var(--ss-line); } .ss-prose { padding: 28px 32px; font-weight: 600; font-size: 16px; line-height: 1.65; max-width: 860px; } .ss-prose--wide { max-width: none; } .ss-prose > :first-child { margin-top: 0; } .ss-prose > :last-child { margin-bottom: 0; } .ss-prose p, .ss-prose ul, .ss-prose ol { margin: 0 0 14px; } .ss-prose h1, .ss-prose h2, .ss-prose h3, .ss-prose h4 { font-family: var(--ss-cond); font-weight: 400; letter-spacing: .02em; line-height: 1; margin: 26px 0 10px; color: var(--ss-ink); } .ss-prose h1 { font-size: 44px; } .ss-prose h2 { font-size: 36px; } .ss-prose h3 { font-size: 28px; } .ss-prose h4 { font-size: 22px; } .ss-prose strong, .ss-prose b { font-weight: 800; } .ss-prose img { height: auto; border-radius: 12px; } .ss-prose table { width: 100%; border-collapse: collapse; margin: 0 0 14px; } .ss-prose th, .ss-prose td { border-top: 2px solid var(--ss-mint); padding: 8px 10px; text-align: left; } .ss-prose th { background: var(--ss-mint-2); } .ss-prose blockquote { margin: 0 0 14px; padding: 4px 0 4px 16px; border-left: 4px solid var(--ss-grass); } /* --- blog (iblogs) --- */ .ss-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .ss-post { display: flex; flex-direction: column; overflow: hidden; height: 100%; } .ss-post__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ss-mint-2); } .ss-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ss-post__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .ss-post__t { font-family: var(--ss-cond); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: .02em; margin: 0; } .ss-white .ss-post__t a { color: var(--ss-ink); text-decoration: none; } .ss-white .ss-post__t a:hover { color: var(--ss-grass); } .ss-post__ex { margin: 0; font-size: 15px; font-weight: 600; color: var(--ss-muted); } .ss-post__meta { font-size: 13px; font-weight: 700; color: var(--ss-muted); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; } .ss-post__meta a { color: var(--ss-grass); } .ss-post__more { margin-top: auto; font-weight: 800; font-size: 14px; } .ss-blogpager { margin-top: 24px; } .ss-blog .swiper-viewport { background: transparent; border: 0; box-shadow: none; margin: 0; } .ss-oldpager { margin-bottom: 16px; } /* --- útmutató-komponensek (a CCA-tartalom használja) --- */ .ss-toc { padding: 18px; background: var(--ss-dim); position: sticky; top: 16px; } .ss-toc__h { font-family: var(--ss-cond); font-size: 20px; letter-spacing: .12em; color: var(--ss-mint); margin-bottom: 10px; } .ss-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; } .ss-toc a { display: flex; gap: 12px; align-items: baseline; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: var(--ss-line); font-size: 15px; font-weight: 700; } .ss-toc a:hover { background: rgba(255, 255, 255, .12); color: var(--ss-line); } .ss-toc a > span:first-child { font-family: var(--ss-cond); color: var(--ss-mint); width: 24px; font-size: 20px; } .ss-sn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 3px solid var(--ss-line); border-radius: 50%; font-family: var(--ss-cond); font-size: 26px; line-height: 1; } .ss-p { margin: 0 0 22px; color: var(--ss-mint); font-weight: 600; } .ss-chapters { display: flex; flex-direction: column; gap: 64px; } /* --- vélemények --- */ .ss-quote { margin: 0; padding: 28px; display: flex; flex-direction: column; gap: 16px; } .ss-quote__m { font-family: var(--ss-cond); font-size: 72px; line-height: .5; color: var(--ss-grass); } .ss-quote blockquote { margin: 0; padding: 0; border: 0; flex: 1; font-size: 15px; font-weight: 600; color: var(--ss-ink); } .ss-quote figcaption { font-family: var(--ss-cond); font-size: 24px; color: var(--ss-grass); } /* --- „Mihez kapsz hozzáférést” kártyák --- */ .ss-feat { display: flex; flex-direction: column; gap: 10px; text-decoration: none; border: 3px solid var(--ss-line); border-radius: 20px; padding: 24px; color: var(--ss-line); } .ss-feat:hover { text-decoration: none; color: var(--ss-line); background: rgba(255, 255, 255, .08); } .ss-feat--w { background: var(--ss-line); color: var(--ss-ink); } .ss-feat--w:hover { background: var(--ss-mint-2); color: var(--ss-ink); } .ss-feat__k { font-family: var(--ss-cond); font-size: 16px; letter-spacing: .1em; color: var(--ss-mint); } .ss-feat--w .ss-feat__k { color: var(--ss-grass); } .ss-feat__t { font-family: var(--ss-cond); font-size: 34px; line-height: 1; } .ss-feat__d { font-size: 15px; font-weight: 600; color: var(--ss-mint); } .ss-feat--w .ss-feat__d { color: var(--ss-muted); } /* --- összevető tábla (Ingyenes vagy Prémium) --- */ .ss-cmp__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 14px 24px; border-top: 2px solid var(--ss-mint); align-items: center; } .ss-cmp__row--head { font-family: var(--ss-cond); font-size: 22px; letter-spacing: .06em; border-top: 0; border-bottom: 2px solid var(--ss-mint); background: var(--ss-mint-2); } .ss-cmp__row > div:first-child { font-weight: 700; } .ss-cmp__f { text-align: center; color: var(--ss-muted); font-family: var(--ss-cond); font-size: 24px; } .ss-cmp__p { text-align: center; color: var(--ss-grass); font-family: var(--ss-cond); font-size: 24px; } /* --- lábléc --- */ .ss-foot { background: var(--ss-ink); border-top: 3px solid var(--ss-line); color: var(--ss-line); } .ss-foot__in { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; padding-top: 44px; padding-bottom: 44px; } .ss-foot__about { max-width: 420px; } .ss-foot .ss-brand { font-size: 28px; } .ss-foot .ss-brand__365 { font-size: 18px; } .ss-foot__meta { margin: 12px 0 0; color: var(--ss-mint); font-size: 14px; font-weight: 600; } .ss-foot__rg { display: flex; gap: 12px; align-items: center; margin-top: 16px; font-size: 14px; font-weight: 700; } .ss-18 { border: 3px solid var(--ss-line); border-radius: 50%; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--ss-cond); font-size: 18px; flex: none; line-height: 1; } .ss-foot__cols { display: flex; gap: 56px; flex-wrap: wrap; font-size: 14px; font-weight: 600; } .ss-foot__col { display: flex; flex-direction: column; gap: 10px; min-width: 120px; } .ss-foot__h { font-family: var(--ss-cond); color: var(--ss-mint); font-size: 20px; letter-spacing: .1em; } .ss-foot__col a { text-decoration: none; } .ss-foot__col a:hover { text-decoration: underline; text-underline-offset: 4px; color: var(--ss-line); } .ss-foot__copy { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; padding-bottom: 28px; font-size: 12px; color: var(--ss-muted); font-weight: 600; } .ss-foot__copy a { color: var(--ss-muted); } /* --- süti-sáv (cookies modul) --- */ .ss-cookie { position: fixed; z-index: 9999; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; max-width: 1248px; margin: 0 auto; padding: 14px 18px; background: var(--ss-ink); color: var(--ss-line); border: 3px solid var(--ss-line); border-radius: 16px; font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); } .ss-cookie a:not(.ss-btn) { color: var(--ss-mint); text-decoration: underline; text-underline-offset: 3px; } /* --- „fehér kártya a gyepen”: 404, success --- */ .ss-msg { padding: 28px 32px; max-width: 720px; font-weight: 600; } .ss-msg p { margin: 0 0 18px; } /* --- S365 CCA-tartalom (a telepítő s365_content_*.php fájljai; inline style helyett) --- */ .ss-hero { padding-top: 56px; padding-bottom: 56px; } .ss-h2--narrow { max-width: 760px; } .ss-h2--lead { margin-bottom: 10px; } .ss-h2--tight { margin: 6px 0 14px; } .ss-intro { margin: 0 0 36px; max-width: 720px; } .ss-soft--lg { margin: 0; font-size: 18px; } .ss-band__in { padding-top: 72px; padding-bottom: 72px; } .ss-band__in--lg { padding-bottom: 80px; } .ss-split { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; } .ss-split__text { flex: 1 1 400px; min-width: 0; } .ss-split__card { flex: 1 1 460px; min-width: 0; } .ss-cta--col > div { flex: 1 1 520px; min-width: 0; } .ss-cta--col .ss-cta__d { margin: 8px 0 0; } .ss-guide-intro { padding-top: 56px; padding-bottom: 32px; } .ss-lead--left { margin-left: 0; margin-right: 0; max-width: 760px; } .ss-guide { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; padding-bottom: 80px; } .ss-chapter { scroll-margin-top: 16px; } .ss-h2--ch { margin: 14px 0 12px; } .ss-fact__t { font-family: var(--ss-cond); font-size: 30px; line-height: 1; color: var(--ss-grass); margin-bottom: 8px; } .ss-fact__d { font-size: 14px; font-weight: 600; color: var(--ss-muted); } .ss-live:empty { display: none; } .ss-live + .ss-live { margin-top: 18px; } .ss-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; } .ss-checks li { padding: 14px 18px; font-weight: 800; } .ss-vsteps { margin-bottom: 18px; } /* a napi ingyenes értékfogadás nélkül a lépés-értékek üresek → a lépés-sor és a megjegyzés nem jelenik meg */ .ss-vbx:has(.ss-vstep__v:empty) { display: none; } .ss-vstep { display: flex; flex-direction: column; gap: 4px; } .ss-vstep__k { font-family: var(--ss-cond); font-size: 16px; letter-spacing: .1em; color: var(--ss-muted); } .ss-vstep__t { font-weight: 800; } .ss-vstep__v { font-family: var(--ss-cond); font-size: 44px; line-height: 1; color: var(--ss-grass); font-variant-numeric: tabular-nums; } .ss-vstep__s { font-size: 13px; font-weight: 700; color: var(--ss-muted); font-variant-numeric: tabular-nums; } .ss-p--note { font-size: 14px; } .ss-rg { display: flex; gap: 16px; align-items: center; padding: 18px 22px; } .ss-rg p { margin: 0; color: var(--ss-mint); font-weight: 600; } /* --- fiók / pénztár / előfizetés (POC/sportstat365-gyep-fiok-penztar.md 4.4) --- */ .ss-backlink { display: inline-block; margin: 0 0 12px; font-size: 14px; font-weight: 800; color: var(--ss-mint); text-decoration: none; } .ss-backlink:hover, .ss-backlink:focus { color: var(--ss-line); text-decoration: underline; text-underline-offset: 3px; } .ss-pagelead { margin: 14px 0 28px; max-width: 720px; color: var(--ss-mint); font-size: 17px; font-weight: 600; } .ss-buy { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; } .ss-buy__side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 20px; } .ss-steps { display: flex; flex-direction: column; gap: 20px; min-width: 0; margin: 0; } .ss-sheet { overflow: hidden; } .ss-sheet--hidden { display: none; } .ss-sheet__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; background: var(--ss-mint-2); border-bottom: 2px solid var(--ss-mint); font-family: var(--ss-cond); font-size: 24px; letter-spacing: .04em; line-height: 1.1; } .ss-sheet__n { flex: none; background: var(--ss-grass); color: var(--ss-line); border-radius: 999px; padding: 3px 12px; font-size: 16px; letter-spacing: .08em; line-height: 1.2; font-variant-numeric: tabular-nums; } .ss-sheet__b { padding: 22px; } .ss-sheet__b--kv { padding-top: 8px; padding-bottom: 18px; } .ss-sheet__b--flush { padding: 0; } .ss-sheet__b > :last-child { margin-bottom: 0; } .ss-btn--lg { padding: 13px 28px; font-size: 17px; } .ss-btn[disabled], .ss-btn:disabled { opacity: .5; cursor: not-allowed; } /* csomag-választó (előfizetés-oldal) */ .ss-plans { display: flex; flex-direction: column; gap: 12px; } .ss-plan { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 18px; border: 3px solid var(--ss-mint); border-radius: 16px; font-weight: 600; cursor: pointer; transition: border-color .15s, background-color .15s; } .ss-plan:hover { border-color: var(--ss-grass); } .ss-plan.is-on { border-color: var(--ss-grass); background: var(--ss-mint-2); } .ss-plan input, .ss-method input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ss-grass); } .ss-plan__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ss-plan__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--ss-cond); font-size: 26px; line-height: 1; letter-spacing: .02em; } .ss-plan__badge { font-size: 14px; padding: 3px 10px; } .ss-plan__desc { font-size: 13px; color: var(--ss-muted); } .ss-plan__price { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .ss-plan__v { font-family: var(--ss-cond); font-size: 34px; line-height: 1; color: var(--ss-ink); } .ss-plan--hi .ss-plan__v { color: var(--ss-grass); } .ss-plan__unit { font-size: 13px; font-weight: 700; color: var(--ss-muted); } /* fizetési mód (rádió-pillek) */ .ss-methods { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; } .ss-method { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 18px; border: 2px solid var(--ss-mint); border-radius: 999px; font-weight: 700; cursor: pointer; } .ss-method:hover { border-color: var(--ss-grass); } .ss-method.is-on { border-color: var(--ss-grass); background: var(--ss-mint-2); } .ss-method__t { min-width: 0; } .ss-method__t img { max-height: 27px; width: auto; margin-right: 6px; vertical-align: middle; } .ss-decl { display: flex; flex-direction: column; gap: 14px; } .ss-decl .ss-btn { margin-top: 6px; } /* címke–érték sorok (összegzés, megerősítés, fiók) */ .ss-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 2px solid var(--ss-mint); font-weight: 600; } .ss-kv:first-child { border-top: 0; } .ss-kv > span, .ss-kv > label { min-width: 0; color: var(--ss-muted); } .ss-kv > b { color: var(--ss-ink); font-weight: 800; text-align: right; } .ss-kv--total > span { color: var(--ss-ink); font-weight: 800; } .ss-kv--total > b { font-family: var(--ss-cond); font-size: 30px; font-weight: 400; line-height: 1; color: var(--ss-grass); } .ss-kv--coupon > b { color: var(--ss-grass); } .ss-kv--meter { align-items: center; } .ss-kv--meter .ss-meter { flex: 0 1 240px; } .ss-kv--meter .ss-meter b { white-space: nowrap; font-weight: 800; color: var(--ss-ink); } /* kupon-doboz (mindig nyitva) */ .ss-coupon { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--ss-mint); } .ss-coupon__f { display: flex; align-items: center; gap: 8px; } .ss-coupon__f .ss-inp { flex: 1; min-width: 0; text-transform: uppercase; } .ss-coupon__x { border: 0; background: transparent; color: var(--ss-muted); font-size: 22px; line-height: 1; padding: 4px; cursor: pointer; } .ss-coupon__msg { margin: 8px 0 0; font-size: 13px; font-weight: 700; } .ss-coupon__msg.is-ok { color: var(--ss-grass); } .ss-coupon__msg.is-error { color: var(--ss-bad); } .ss-infobox .ss-title { margin-bottom: 14px; } .ss-infobox .ss-ticks { font-size: 14px; } .ss-infobox .ss-tickc { width: 22px; height: 22px; border-width: 2px; } .ss-trust { margin: 0; font-size: 12px; font-weight: 700; color: var(--ss-mint); text-align: center; } /* pénztár */ .ss-co { max-width: 860px; } .ss-co > .ss-steps, .ss-co > .ss-auth { margin-top: 24px; } .ss-co__alert { margin: 18px 0 0; } .ss-auth { max-width: 520px; } .ss-auth__lead { margin: 0 0 18px; font-weight: 600; color: var(--ss-muted); } .ss-coform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .ss-coform .form-group { margin: 0; } .ss-coform .form-group.required > .ss-lbl::after { content: ' *'; color: var(--ss-bad); } .ss-span2 { grid-column: 1 / -1; } .ss-coform__opts { display: flex; flex-direction: column; gap: 8px; } .ss-coform__btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 20px; } .ss-coform__btns--agree { justify-content: space-between; } .ss-coform__btns--agree .ss-check { flex: 1 1 320px; } .ss-coaddr__pick { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } textarea.ss-inp { resize: vertical; } .ss-coconf__item + .ss-coconf__item { margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--ss-mint); } .ss-coconf__name { margin: 0 0 6px; font-family: var(--ss-cond); font-size: 28px; line-height: 1; } .ss-coconf__totals { margin-top: 6px; border-top: 3px solid var(--ss-ink); } .ss-coconf .ss-small { margin: 10px 0 0; } .ss-copay { margin-top: 18px; padding-top: 18px; border-top: 2px solid var(--ss-mint); } .ss-coitem__x { border: 0; background: transparent; color: var(--ss-muted); font-family: var(--ss-sans); font-size: 24px; line-height: 1; cursor: pointer; } .ss-coitem__qty { max-width: 160px; margin-top: 14px; } .ss-ticks--ink { flex: none; margin-bottom: 12px; color: var(--ss-ink); } .ss-tickc--g { width: 22px; height: 22px; border-width: 2px; border-color: var(--ss-grass); } /* SimplePay-blokk: a gomb az SDK űrlapjáé (form#SimplePayForm) */ .ss-sp { display: flex; flex-direction: column; gap: 14px; } .ss-sp .ss-check.is-error { color: var(--ss-bad); outline: 2px solid var(--ss-bad); outline-offset: 6px; border-radius: 8px; } .ss-sp__logo { font-size: 13px; font-weight: 700; } .ss-sp__logo img { max-height: 40px; width: auto; margin-right: 8px; vertical-align: middle; } #SimplePayForm { display: flex; justify-content: flex-end; margin: 0; } #SimplePayForm button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; border: 3px solid var(--ss-grass); border-radius: 999px; background: var(--ss-grass); color: var(--ss-line); padding: 11px 28px; font-family: var(--ss-sans); font-size: 16px; font-weight: 800; line-height: 1.25; cursor: pointer; } #SimplePayForm button[type="submit"]:hover, #SimplePayForm button[type="submit"]:focus { background: var(--ss-grass-2); border-color: var(--ss-grass-2); } /* banki átutalás */ .ss-bt { display: flex; flex-direction: column; gap: 10px; } .ss-bt > p, .ss-bt .ss-coform__btns { margin: 0; } .ss-bt__h { margin: 0 0 8px; font-family: var(--ss-cond); font-size: 24px; line-height: 1; } .ss-bt__box { padding: 14px 16px; background: var(--ss-mint-2); border: 2px solid var(--ss-mint); border-radius: 14px; font-weight: 600; } .ss-bt__bank { margin-bottom: 8px; font-variant-numeric: tabular-nums; } /* SimplePay-visszatérés (a valódi sikeroldal): a kártya felső sávja az eredmény színe */ .ss-pay { border-top: 8px solid var(--ss-mint); } .ss-pay--ok { border-top-color: var(--ss-grass); } .ss-pay--fail { border-top-color: var(--ss-bad); } .ss-pay__text { padding: 0; } .ss-pay__text font { color: inherit; } .ss-pay__text p { margin: 0 0 10px; } .ss-pay__btns { margin-top: 22px; } .ss-pay__rg { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; padding-top: 16px; border-top: 2px solid var(--ss-mint); font-size: 13px; color: var(--ss-muted); } .ss-18--ink { border-color: var(--ss-ink); color: var(--ss-ink); } /* fiók-hub és aloldalak */ .ss-acct { max-width: 1180px; } .ss-acct__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; } .ss-acct--sub { max-width: 820px; } .ss-acct--sub > .ss-sheet { margin-top: 24px; } .ss-state { flex: none; padding: 3px 12px; border: 2px solid var(--ss-mint); border-radius: 999px; background: var(--ss-line); color: var(--ss-muted); font-size: 16px; letter-spacing: .08em; line-height: 1.2; } .ss-state--active { background: var(--ss-grass); border-color: var(--ss-grass); color: var(--ss-line); } .ss-state--pending { background: #FFFAEB; border-color: #FEDF89; color: #93370D; } .ss-state--expired { background: var(--ss-mint-2); border-color: var(--ss-lockbar); color: var(--ss-ink); } .ss-acct__btns { margin-top: 16px; } .ss-acct__note { margin: 12px 0 0; } .ss-acct__empty { margin: 8px 0 4px; font-weight: 600; color: var(--ss-muted); } .ss-orders { width: 100%; border-collapse: collapse; font-size: 14px; } .ss-orders th { padding: 10px 14px; background: var(--ss-mint-2); border-bottom: 2px solid var(--ss-mint); font-family: var(--ss-cond); font-size: 15px; font-weight: 400; letter-spacing: .08em; color: var(--ss-muted); text-align: left; } .ss-orders td { padding: 11px 14px; border-top: 2px solid var(--ss-mint); font-weight: 600; vertical-align: top; } .ss-orders tbody tr:first-child td { border-top: 0; } .ss-orders th:first-child, .ss-orders td:first-child { padding-left: 22px; } .ss-orders th:last-child, .ss-orders td:last-child { padding-right: 22px; } .ss-kv.ss-nl { align-items: center; } .ss-kv.ss-nl > label { display: flex; flex-direction: column; gap: 2px; margin: 0; color: var(--ss-ink); font-weight: 700; cursor: pointer; } .ss-nl small { font-size: 12px; font-weight: 600; color: var(--ss-muted); } .ss-nl input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--ss-grass); } .ss-nl-status { margin: 10px 0 0; min-height: 18px; font-size: 13px; font-weight: 700; color: var(--ss-muted); } .ss-nl-status.is-ok { color: var(--ss-grass); } .ss-nl-status.is-error { color: var(--ss-bad); } .ss-acctmenu { display: flex; flex-direction: column; } .ss-acctmenu a.ss-acctmenu__a:not(.ss-btn):not(.ss-tab) { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 2px solid var(--ss-mint); color: var(--ss-ink); font-weight: 800; text-decoration: none; } .ss-acctmenu a.ss-acctmenu__a:not(.ss-btn):not(.ss-tab):first-child { border-top: 0; padding-top: 0; } .ss-acctmenu a.ss-acctmenu__a:not(.ss-btn):not(.ss-tab):hover { color: var(--ss-grass); } .ss-acctmenu a.ss-acctmenu__a--out:not(.ss-btn):not(.ss-tab) { color: var(--ss-bad); } .ss-addrs { display: flex; flex-direction: column; } .ss-addr { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 2px solid var(--ss-mint); } .ss-addr:first-child { border-top: 0; padding-top: 0; } .ss-addr__t { font-weight: 600; line-height: 1.5; } .ss-addr__a { display: flex; gap: 14px; font-size: 14px; font-weight: 800; white-space: nowrap; } .ss-addr__a a.ss-addr__del:not(.ss-btn):not(.ss-tab) { color: var(--ss-bad); } .ss-act__link--out { padding-left: 6px; padding-right: 6px; color: var(--ss-mint); font-weight: 700; } /* ===================================================================== 2. INTEGRÁCIÓ — a bootstrap 3 semlegesítése a vendor-markupon ===================================================================== */ #s365_theme .container { max-width: 1280px; width: auto; padding-left: 24px; padding-right: 24px; } #s365_theme .container h1, #s365_theme .container h2, #s365_theme .container h3, .ss-vendor h1, .ss-vendor h2, .ss-vendor h3 { font-family: var(--ss-cond); font-weight: 400; letter-spacing: .02em; line-height: 1; } #s365_theme .container h1 { font-size: 56px; margin: 24px 0 18px; } #s365_theme .container h2 { font-size: 36px; } #s365_theme .container h3 { font-size: 28px; } #s365_theme .container p, #s365_theme .container ul, #s365_theme .container ol { margin: 0 0 10px; } #s365_theme .container > .row > #content { padding-top: 8px; padding-bottom: 48px; } .ss-vendor { padding-top: 24px; padding-bottom: 48px; } .badge { background: transparent; } label { font-weight: 600; } .text-danger { color: #FFD7D2; font-weight: 700; } .ss-white .text-danger, .panel .text-danger, .modal .text-danger, .well .text-danger, .login_form-wrapper .text-danger, .stats-main-col-2 .text-danger, .insights-main-col-2 .text-danger { color: var(--ss-bad); } .text-muted { color: var(--ss-mint); } .help-block { color: var(--ss-mint); } .btn { border-radius: 999px; font-weight: 800; padding: 9px 20px; border-width: 3px; box-shadow: none; text-shadow: none; } .btn-sm, .btn-group-sm > .btn { padding: 5px 14px; } .btn-xs, .btn-group-xs > .btn { padding: 2px 10px; border-width: 2px; } .btn-lg, .btn-group-lg > .btn { padding: 12px 28px; } .btn-primary, .btn-success { background: var(--ss-line); border-color: var(--ss-line); color: var(--ss-ink); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-success:hover, .btn-success:focus, .btn-success:active { background: var(--ss-mint); border-color: var(--ss-mint); color: var(--ss-ink); } .btn-default, .btn-info, .btn-link { background: transparent; border-color: var(--ss-line); color: var(--ss-line); } .btn-link { border-color: transparent; } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-info:hover { background: var(--ss-line); border-color: var(--ss-line); color: var(--ss-ink); } .btn-danger, .btn-warning { background: transparent; border-color: #FFD7D2; color: #FFD7D2; } .ss-white .btn-primary, .panel .btn-primary, .modal .btn-primary, .well .btn-primary, .login_form-wrapper .btn-primary, .insights-main-col-2 .btn-primary, .stats-main-col-2 .btn-primary, .ss-white .btn-success, .panel .btn-success, .modal .btn-success, .insights-main-col-2 .btn-success { background: var(--ss-grass); border-color: var(--ss-grass); color: var(--ss-line); } .ss-white .btn-primary:hover, .panel .btn-primary:hover, .modal .btn-primary:hover, .login_form-wrapper .btn-primary:hover, .insights-main-col-2 .btn-primary:hover { background: var(--ss-grass-2); border-color: var(--ss-grass-2); color: var(--ss-line); } .ss-white .btn-default, .panel .btn-default, .modal .btn-default, .well .btn-default, .login_form-wrapper .btn-default, .insights-main-col-2 .btn-default, .stats-main-col-2 .btn-default, .ss-white .btn-info, .panel .btn-info, .modal .btn-info, .ss-white .btn-link, .panel .btn-link { background: var(--ss-line); border-color: var(--ss-grass); color: var(--ss-grass); } .ss-white .btn-default:hover, .panel .btn-default:hover, .modal .btn-default:hover, .insights-main-col-2 .btn-default:hover { background: var(--ss-grass); color: var(--ss-line); } .ss-white .btn-danger, .panel .btn-danger, .insights-main-col-2 .btn-danger { border-color: var(--ss-bad); color: var(--ss-bad); background: var(--ss-line); } .form-control { height: auto; background: var(--ss-mint-2); border: 2px solid var(--ss-mint); border-radius: 12px; color: var(--ss-ink); font-weight: 600; padding: 10px 14px; box-shadow: none; } .form-control:focus { border-color: var(--ss-grass); box-shadow: none; } .input-group .form-control:first-child { border-radius: 12px 0 0 12px; } .input-group-btn:last-child > .btn { border-radius: 0 12px 12px 0; } .input-group-addon { background: var(--ss-mint); border: 2px solid var(--ss-mint); color: var(--ss-ink); } .has-error .form-control { border-color: #F04438; } .control-label { color: inherit; } .form-horizontal .control-label { padding-top: 12px; } .panel { background: var(--ss-line); color: var(--ss-ink); border: 0; border-radius: 20px; box-shadow: none; overflow: hidden; margin-bottom: 18px; } .panel-default > .panel-heading, .panel-heading { background: var(--ss-mint-2); color: var(--ss-ink); border-bottom: 2px solid var(--ss-mint); padding: 12px 22px; border-radius: 0; } .panel-title, .panel-heading h4 { font-family: var(--ss-cond); font-size: 22px; letter-spacing: .04em; font-weight: 400; } .panel-title a { color: var(--ss-ink); text-decoration: none; } .panel-body { padding: 22px; } .panel-group .panel + .panel { margin-top: 12px; } .panel-footer { background: var(--ss-mint-2); border-top: 2px solid var(--ss-mint); } .well { background: var(--ss-dim); border: 3px solid var(--ss-line); border-radius: 20px; box-shadow: none; color: var(--ss-line); } .list-group-item { background: var(--ss-line); color: var(--ss-ink); border: 0; border-top: 2px solid var(--ss-mint); } .list-group-item:first-child { border-top: 0; border-radius: 16px 16px 0 0; } .list-group-item:last-child { border-radius: 0 0 16px 16px; } a.list-group-item { color: var(--ss-ink); } a.list-group-item:hover, a.list-group-item.active { background: var(--ss-mint-2); color: var(--ss-ink); border-color: var(--ss-mint); } .alert { border-radius: 12px; border: 2px solid var(--ss-mint); background: var(--ss-line); color: var(--ss-ink); font-weight: 700; } .alert-success { border-color: var(--ss-grass); background: var(--ss-mint); color: var(--ss-ink); } .alert-danger { border-color: #FECDCA; background: #FEF3F2; color: var(--ss-bad); } .alert-warning { border-color: #FEDF89; background: #FFFAEB; color: #93370D; } .alert-info { border-color: var(--ss-mint); background: var(--ss-mint-2); color: var(--ss-ink); } .alert .close { opacity: .6; } .table, .table-responsive > .table { background: var(--ss-line); color: var(--ss-ink); border-radius: 16px; overflow: hidden; margin-bottom: 18px; } .table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th { font-family: var(--ss-cond); font-weight: 400; font-size: 15px; letter-spacing: .08em; color: var(--ss-muted); background: var(--ss-mint-2); border-bottom: 2px solid var(--ss-mint); border-top: 0; } .table > tbody > tr > td, .table > tfoot > tr > td { border-top: 2px solid var(--ss-mint); vertical-align: middle; font-variant-numeric: tabular-nums; } .table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > td, .table-bordered > tfoot > tr > td { border-color: var(--ss-mint); } .table-hover > tbody > tr:hover { background: var(--ss-mint-2); } .table a:not(.btn) { color: var(--ss-grass); } .table-responsive { border: 0; } .breadcrumb { background: transparent; padding: 0; margin: 0 0 14px; font-size: 13px; font-weight: 700; } .breadcrumb > li, .breadcrumb > li a { color: var(--ss-mint); } .breadcrumb > li + li::before { color: var(--ss-mint); content: '›'; padding: 0 8px; } .pagination { display: inline-flex; flex-wrap: wrap; gap: 4px; border: 3px solid var(--ss-line); border-radius: 999px; padding: 4px; margin: 18px 0; } .pagination > li > a, .pagination > li > span { float: none; display: inline-block; margin: 0; border: 0; border-radius: 999px !important; background: transparent; color: var(--ss-mint); font-family: var(--ss-cond); font-size: 18px; letter-spacing: .04em; padding: 6px 14px; line-height: 1.1; } .pagination > li > a:hover { background: transparent; color: var(--ss-line); } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { background: var(--ss-line); color: var(--ss-ink); } .pagination > .disabled > span { background: transparent; color: rgba(255, 255, 255, .45); } .dropdown-menu { background: var(--ss-line); border: 0; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); } .dropdown-menu > li > a { color: var(--ss-ink); font-weight: 600; } .dropdown-menu > li > a:hover { background: var(--ss-mint-2); color: var(--ss-ink); } .modal-content { background: var(--ss-line); color: var(--ss-ink); border: 0; border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); } .modal-header, .modal-footer { border-color: var(--ss-mint); } .modal-title { font-family: var(--ss-cond); font-size: 28px; font-weight: 400; } .nav-tabs { border-bottom: 3px solid var(--ss-line); } .nav-tabs > li > a { border: 0; border-radius: 999px 999px 0 0; color: var(--ss-mint); font-family: var(--ss-cond); font-size: 18px; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background: var(--ss-line); color: var(--ss-ink); border: 0; } .nav-tabs > li > a:hover { background: transparent; color: var(--ss-line); } .img-thumbnail { border-radius: 12px; border: 2px solid var(--ss-mint); } .radio label, .checkbox label { font-weight: 600; } input[type="checkbox"], input[type="radio"] { accent-color: var(--ss-grass); } hr { border-top: 2px solid rgba(255, 255, 255, .35); } .ss-white hr, .panel hr { border-top-color: var(--ss-mint); } /* fehér kártya-környezet a vendor-dobozokon: linkek, címek */ .panel a:not(.btn), .modal a:not(.btn), .login_form-wrapper a:not(.button):not(.btn), .insights-main-col-2 a:not(.btn), .stats-main-col-1 a:not(.btn) { color: var(--ss-grass); } /* iblogs — a vendor-markup marad, a tartalom fehér kártyára */ .ss-blog .iblogs-container, .ss-blog .iblogs-post, .ss-blog .iblogs-category, .ss-blog .iblogs-listing { color: inherit; } /* ===================================================================== 3. ÖRÖKÖLT OSZTÁLY-TOKENEK ===================================================================== */ /* sport_api_insight::get_probability_value_class → gteq_N (a nem átírt helyeken) */ .mb-insight-percentage-gteq_80, .mb-insight-percentage-gteq_90, .mb-insight-percentage-gteq_100 { background: var(--ss-grass); color: var(--ss-line); border-radius: 8px; } .mb-insight-percentage-gteq_0, .mb-insight-percentage-gteq_10, .mb-insight-percentage-gteq_20, .mb-insight-percentage-gteq_30 { background: var(--ss-mint-2); color: var(--ss-muted); border-radius: 8px; } /* data_vendor_mapper osztály-tokenek (danger / warning / info / success) */ .progress { background: var(--ss-mint); border-radius: 6px; box-shadow: none; height: 12px; } .progress-bar { background: var(--ss-grass); box-shadow: none; font-size: 10px; line-height: 12px; } .progress-bar-success { background: var(--ss-grass); } .progress-bar-info { background: #4FA36B; } .progress-bar-warning { background: #9DCBAA; } .progress-bar-danger { background: var(--ss-lockbar); color: var(--ss-ink); } /* bulma-segédosztályok a klón fiók- és pénztár-sablonjaiban */ .is-flex { display: flex; } .is-block { display: block; } .is-flex-direction-column { flex-direction: column; } .is-justify-content-space-between { justify-content: space-between; } .is-justify-content-center { justify-content: center; } .is-justify-content-left { justify-content: flex-start; } .is-align-items-center { align-items: center; } .is-align-items-baseline { align-items: baseline; } .is-align-items-flex-end { align-items: flex-end; } .is-fullwidth { width: 100%; } .is-uppercase { text-transform: uppercase; } .has-text-centered, .text_align_center, .items-align-center { text-align: center; } .has-text-left { text-align: left; } .no-wrap { white-space: nowrap; } .mt-0 { margin-top: 0 !important; } .mt-3 { margin-top: 12px !important; } .mt-4 { margin-top: 16px !important; } .mt-6 { margin-top: 24px !important; } .mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: 8px !important; } .mb-3 { margin-bottom: 12px !important; } .mb-5 { margin-bottom: 20px !important; } .mb-6 { margin-bottom: 24px !important; } .pb-5 { padding-bottom: 8px !important; } .pt-1 { padding-top: 4px !important; } .pr-2 { padding-right: 8px !important; } .mr-2 { margin-right: 8px !important; } .mr-4 { margin-right: 16px !important; } .ml-1 { margin-left: 4px !important; } .section { padding: 48px 24px; } .title, .is-size-36px { font-family: var(--ss-cond); font-size: 40px; line-height: 1; font-weight: 400; letter-spacing: .02em; margin: 0 0 18px; } .has-font-family-primary { font-family: var(--ss-cond); } /* belépés / jelszó / pénztár keret (login_*) — fehér kártya a gyepen */ .login_section-bg-white { display: flex; justify-content: center; padding: 56px 24px 72px; } .login_form-wrapper { width: 100%; max-width: 560px; background: var(--ss-line); color: var(--ss-ink); border-radius: 20px; padding: 32px; text-align: left; } #checkout-checkout.login_form-wrapper { max-width: 900px; } .login_form-container { gap: 0; } .login_form-wrapper .title { color: var(--ss-ink); } .field { margin: 0 0 14px; } .login_border { border: 0; } .input, .login_form-text { display: block; width: 100%; background: var(--ss-mint-2); border: 2px solid var(--ss-mint); border-radius: 12px; color: var(--ss-ink); font: inherit; font-weight: 600; padding: 11px 14px; outline: 0; } .input:focus, .login_form-text:focus { border-color: var(--ss-grass); } .button { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 800; padding: 9px 23px; border: 3px solid var(--ss-grass); background: var(--ss-grass); color: var(--ss-line); text-decoration: none; cursor: pointer; } .button:hover, .button:focus { background: var(--ss-grass-2); border-color: var(--ss-grass-2); color: var(--ss-line); text-decoration: none; } .button.is-fullwidth { display: flex; width: 100%; } .login_link, .signup-txt-mob a { color: var(--ss-grass); font-weight: 700; } .signup-txt-mob { margin: 10px 0 0; font-size: 14px; } .checkbox-form-align { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 600; margin: 4px 0 12px; } .checkbox-form-align input { margin-top: 3px; } /* fiók-belső oldalak (insights-main-container: oldalsáv + fő kártya) */ .insights-main-container.account-main-container, .stats-main-container { max-width: 1280px; margin: 0 auto; padding: 32px 24px 64px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; } .stats-main-col-1, .account-col1 { flex: 1 1 240px; min-width: 0; background: var(--ss-line); color: var(--ss-ink); border-radius: 20px; padding: 22px; } .insights-main-col-2.stats-main-col-2, .col2-my-account { flex: 999 1 640px; min-width: 0; background: var(--ss-line); color: var(--ss-ink); border-radius: 20px; padding: 22px 26px; } .my-account-title, .insights-lf-col-title { font-family: var(--ss-cond); font-size: 28px; line-height: 1; margin: 0 0 12px; } .account-menu-item { margin: 0; border-top: 2px solid var(--ss-mint); } .account-menu-item a { display: block; padding: 9px 0; color: var(--ss-ink) !important; font-weight: 700; text-decoration: none; } .account-menu-item a:hover { color: var(--ss-grass) !important; } .account-menu-item-active a { color: var(--ss-grass) !important; } .acct-title-mob { display: none; } .account-breadcrumb ul { list-style: none; margin: 0 0 14px; padding: 0; } .account-line, .blog-active-breadcrumb { font-family: var(--ss-cond); font-size: 32px; color: var(--ss-ink) !important; text-decoration: none; } /* fiók-klónok (edit, order_list, order_info, subscription_list — 2. döntés: CSS-rétegen): fehér kártya, pill-gombok; a bal oldalsáv rejtve (a fiók-menü a hubban), helyette a kártya „← Fiókom” linkje látszik */ .insights-main-container.account-main-container { max-width: 940px; } .account-main-container > .account-col1 { display: none; } .account-main-container .acct-title-mob { display: block; margin: 0 0 10px; font-size: 14px; font-weight: 800; } .account-main-container .acct-title-mob a { text-decoration: none; } .account-main-container .acct-title-mob .fa { margin-right: 6px; } a.menu-mob-account-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-right: 10px; border: 2px solid var(--ss-grass); border-radius: 50%; color: var(--ss-grass) !important; text-decoration: none; flex: none; } a.menu-mob-account-icon:hover { background: var(--ss-grass); color: var(--ss-line) !important; } .account-subtitle-pwd { margin: 0 0 18px; font-family: var(--ss-cond); font-size: 32px; line-height: 1; color: var(--ss-ink); } .account-four-rows { margin: 0 0 16px; } .settings-rows-account { display: block; margin: 0 0 6px; font-family: var(--ss-cond); font-size: 17px; letter-spacing: .1em; color: var(--ss-muted); } .settings-rows-account-star { color: var(--ss-bad); } .settings-rows-input { display: block; width: 100%; padding: 11px 14px; background: var(--ss-mint-2); border: 2px solid var(--ss-mint); border-radius: 12px; color: var(--ss-ink); font: inherit; font-weight: 600; outline: 0; } .settings-rows-input:focus { border-color: var(--ss-grass); } .btn-container-account { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 20px; } .button.btn-account-save { min-width: 160px; } .col2-my-account .text-danger { color: var(--ss-bad); } .col2-my-account a:not(.btn):not(.button):not(.menu-mob-account-icon) { color: var(--ss-grass); } .col2-my-account .btn-default, .col2-my-account .btn-info { background: var(--ss-line); border-color: var(--ss-grass); color: var(--ss-grass); } .col2-my-account .btn-default:hover { background: var(--ss-grass); color: var(--ss-line); } .col2-my-account .btn-primary { background: var(--ss-grass); border-color: var(--ss-grass); color: var(--ss-line); } .col2-my-account .btn-danger { background: var(--ss-line); border-color: var(--ss-bad); color: var(--ss-bad); } .col2-my-account .form-group { margin: 0 0 14px; } .col2-my-account .control-label { display: block; float: none; width: auto; padding: 0; margin: 0 0 6px; text-align: left; font-family: var(--ss-cond); font-size: 17px; font-weight: 400; letter-spacing: .1em; color: var(--ss-muted); } .col2-my-account .form-group > [class*="col-sm-"] { float: none; width: auto; padding: 0; } .acct-modal { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .col2-my-account .table { border-radius: 12px; } .col2-my-account .table > tbody > tr > th { background: var(--ss-mint-2); } /* a régi lenyíló sor ikonjai (book) — csak ha egy nem átírt sablon még hivatkozza */ .modal-icon-book-close, .modal-icon-book-open { display: inline-block; width: 22px; height: 22px; background: url('../image/book-close.png') center / contain no-repeat; cursor: pointer; } .modal-icon-book-open { background-image: url('../image/book-open.png'); } /* ===================================================================== RESZPONZÍV (≤ 820 px: „Menü” pill, egy oszlop, alsó tab-sáv) ===================================================================== */ @media (max-width: 1100px) { .ss-display { font-size: 110px; } .ss-h1 { font-size: 88px; } .ss-tips { padding-left: 22px; } } @media (max-width: 820px) { body#s365_theme { background-image: repeating-linear-gradient(90deg, var(--ss-grass) 0 60px, var(--ss-grass-2) 60px 120px); padding-bottom: calc(var(--ss-tabbar-h) + env(safe-area-inset-bottom, 0px)); } .ss-wrap { padding-left: 16px; padding-right: 16px; } .ss-sec { padding-top: 56px; padding-bottom: 56px; } .ss-nav { gap: 12px; } .ss-menu-btn { display: inline-block; } .ss-act { display: none; } .ss-menu { display: none; } .ss-menu.is-open { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 100%; order: 10; gap: 10px; padding: 10px 0 4px; border-top: 2px solid rgba(255, 255, 255, .4); } .ss-menu.is-open .ss-menu__mob { display: block; } .ss-menu__sep { display: block; width: 100%; height: 0; border-top: 2px solid rgba(255, 255, 255, .25); margin: 4px 0; } .ss-display, .ss-display--md, .ss-h1, .ss-h1--reg { font-size: 64px; } .ss-h1--list { font-size: 56px; } .ss-h2 { font-size: 40px; margin-bottom: 28px; } .ss-h2--md { font-size: 36px; } .ss-circle { width: 340px; height: 340px; margin: -170px 0 0 -170px; } .ss-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--ss-ink); border-top: 3px solid var(--ss-line); height: calc(var(--ss-tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); } .ss-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ss-mint); font-family: var(--ss-cond); font-size: 15px; letter-spacing: .06em; text-decoration: none; line-height: 1; } .ss-tabbar a.is-on { color: var(--ss-line); } .ss-cookie { bottom: calc(var(--ss-tabbar-h) + 10px + env(safe-area-inset-bottom, 0px)); left: 10px; right: 10px; } .ss-tabbar a:hover { color: var(--ss-line); text-decoration: none; } /* meccslista: kétsoros kártya-rács, oszlopfej nélkül (390 px-en sincs vízszintes görgetés) */ .ss-cols--head { display: none; } .ss-cols--ins { grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "time teams teams chev" "mk mk rate odds"; gap: 8px 12px; padding: 12px 16px; } .ss-cols--vb { grid-template-columns: repeat(4, minmax(0, 1fr)) 34px; grid-template-areas: "time teams teams teams chev" "mk mk rate odds odds" "book diff diff prof prof"; gap: 8px 12px; padding: 12px 16px; } .ss-cols--vb .ss-c-rate, .ss-cols--vb .ss-c-odds, .ss-cols--vb .ss-c-book, .ss-cols--vb .ss-c-prof { text-align: left; } .ss-mlbl { display: block; font-family: var(--ss-cond); font-size: 12px; letter-spacing: .08em; color: var(--ss-muted); } .ss-tips { padding: 0 16px 16px; } .ss-guestfree__foot { padding: 12px 16px; } .ss-guestcap { padding: 10px 16px 0; } .ss-row > .ss-col-side { order: 2; flex-basis: 100%; } .ss-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .ss-head { padding-left: 16px; padding-right: 16px; } .ss-cta { padding: 18px; } .ss-cta .ss-btn { width: 100%; } .ss-panel { padding: 14px 12px 18px; } .ss-mh { padding: 18px 14px; } .ss-mh__grid { gap: 10px; } .ss-mh__team { font-size: 30px; } .ss-mh__vs { width: 44px; height: 44px; font-size: 18px; } .ss-mh .ss-fc { width: 22px; height: 22px; font-size: 13px; } .ss-bf { grid-template-columns: 38px minmax(0, 1fr) 84px minmax(0, 1fr) 38px; gap: 8px; padding: 8px 12px; } .ss-bf__lbl { font-size: 12px; } .ss-h2hl { grid-template-columns: 82px minmax(0, 1fr) 54px; padding: 10px 12px; } .ss-h2hl__l { display: none; } .ss-pois, .ss-bfleg { padding-left: 12px; padding-right: 12px; } .ss-reg__in { gap: 32px; padding-top: 32px; padding-bottom: 40px; } .ss-formcard { padding: 22px; } .ss-prose { padding: 22px 20px; } .ss-info { padding-top: 40px; padding-bottom: 56px; } .ss-toc { position: static; } .ss-foot__cols { gap: 32px; } .ss-counter__v { font-size: 52px; } .ss-cmp__row { padding: 12px 16px; } .login_form-wrapper, .stats-main-col-1, .col2-my-account, .insights-main-col-2.stats-main-col-2 { padding: 20px; } .ss-guide { grid-template-columns: minmax(0, 1fr); gap: 24px; } .ss-guide-intro { padding-top: 32px; padding-bottom: 20px; } .ss-hero { padding-top: 40px; padding-bottom: 40px; } .ss-band__in { padding-top: 48px; padding-bottom: 48px; } .ss-split { gap: 28px; } .ss-buy { grid-template-columns: minmax(0, 1fr); } .ss-buy__side { position: static; } .ss-acct__grid { grid-template-columns: minmax(0, 1fr); } .ss-sheet__h { padding: 12px 16px; font-size: 22px; } .ss-sheet__b { padding: 18px 16px; } .ss-sheet__b--kv { padding-top: 6px; padding-bottom: 14px; } .ss-coform { grid-template-columns: minmax(0, 1fr); } .ss-plan { flex-wrap: wrap; padding: 12px 14px; } .ss-plan__price { flex-direction: row; align-items: baseline; gap: 8px; margin-left: 34px; } .ss-plan__v { font-size: 30px; } .ss-coform__btns { justify-content: stretch; } .ss-coform__btns .ss-btn { flex: 1 1 auto; } .ss-orders thead { display: none; } .ss-orders, .ss-orders tbody, .ss-orders tr, .ss-orders td { display: block; width: 100%; } .ss-orders tr { padding: 10px 16px; border-top: 2px solid var(--ss-mint); } .ss-orders tbody tr:first-child { border-top: 0; } .ss-orders td, .ss-orders td:first-child, .ss-orders td:last-child { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-top: 0; text-align: right; } .ss-orders td::before { content: attr(data-l); color: var(--ss-muted); font-weight: 700; text-align: left; } .ss-addr { flex-direction: column; gap: 8px; } .account-main-container { padding-left: 16px; padding-right: 16px; } } @media (max-width: 420px) { .ss-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ss-brand { font-size: 26px; } .ss-display, .ss-display--md, .ss-h1, .ss-h1--reg { font-size: 54px; } } @media print { .ss-tabbar, .ss-menu-btn { display: none !important; } }