admin
6f58c00fe7
gates / gates (push) Failing after 11m58s
Measured on the live preview, not assumed. --text-3 gave 3.14:1 (comparison header), 3.57:1 (comparison rows) and 3.88:1 (hero caption) against their own backgrounds, all under the 4.5:1 floor for body text. The audit's own rule was that the existing 7.56:1 body contrast is an accessibility win to protect, so dimming a column below AA to make it read as 'the quieter half' is a regression, not a style. All three move to --text-2; the two halves of the comparison are still told apart by the accent colour and the bold lead on the right.
2348 lines
92 KiB
CSS
2348 lines
92 KiB
CSS
/* ============================================================
|
||
felhom.eu — site.css v1 (design system v2, TASK-D3)
|
||
One shared stylesheet for all seven pages. Canonical tokens:
|
||
documentation/design/design-system.md. Bump ?v= in the pages
|
||
whenever this file or icons.svg changes (nginx expires 7d).
|
||
============================================================ */
|
||
|
||
/* --- Vendored fonts (self-hosted; latin-ext is mandatory for ő/ű) --- */
|
||
@font-face {
|
||
font-family: 'Plus Jakarta Sans';
|
||
font-style: normal;
|
||
font-weight: 400 800;
|
||
font-display: swap;
|
||
src: url('/assets/fonts/pjs-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: 'Plus Jakarta Sans';
|
||
font-style: normal;
|
||
font-weight: 400 800;
|
||
font-display: swap;
|
||
src: url('/assets/fonts/pjs-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: 'JetBrains Mono';
|
||
font-style: normal;
|
||
font-weight: 400 500;
|
||
font-display: swap;
|
||
src: url('/assets/fonts/jbm-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: 'JetBrains Mono';
|
||
font-style: normal;
|
||
font-weight: 400 500;
|
||
font-display: swap;
|
||
src: url('/assets/fonts/jbm-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;
|
||
}
|
||
|
||
/* --- Design system v2 tokens (verbatim from design-system.md) --- */
|
||
:root {
|
||
--bg-0: #0A1220; --bg-1: #0F1B2E; --bg-2: #16263F;
|
||
--line: #22344F; --line-soft: #1A2A42;
|
||
--text-1: #EDF2F9; --text-2: #94A6BF; --text-3: #5E7392;
|
||
--blue: #0083D8; --blue-bright: #2EA8F5; --blue-dim: rgba(0,131,216,.13);
|
||
--warn: #E0A93E; --warn-dim: rgba(224,169,62,.12);
|
||
--crit: #E5534B; --crit-dim: rgba(229,83,75,.12);
|
||
--radius: 2px;
|
||
--font-ui: 'Plus Jakarta Sans', -apple-system, sans-serif;
|
||
--font-data: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
/* --- Reset & base --- */
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html { scroll-behavior: smooth; }
|
||
body {
|
||
font-family: var(--font-ui);
|
||
background: var(--bg-0);
|
||
color: var(--text-1);
|
||
line-height: 1.6;
|
||
min-height: 100vh;
|
||
}
|
||
/* Grid background (index only) — RESTORED 2026-07-19. It lived in index.html's inline <style> and
|
||
was dropped, not replaced, when bed8675 migrated that page onto this stylesheet; nothing took its
|
||
place. Same geometry as the original (50px cells, 1px lines) and the same 3% subtlety; the accent
|
||
is the v2 --blue #0083D8 rather than the retired legacy #0088cc. Fixed-position and behind
|
||
everything, so it does not scroll — most visible behind the hero, which is where it was missed. */
|
||
body.page-index::before {
|
||
content: '';
|
||
position: fixed;
|
||
top: 0; left: 0;
|
||
width: 100%; height: 100%;
|
||
background-image:
|
||
linear-gradient(rgba(0,131,216,.03) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(0,131,216,.03) 1px, transparent 1px);
|
||
background-size: 50px 50px;
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
|
||
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 1px; }
|
||
|
||
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
|
||
|
||
/* --- Inline icon (vendored Lucide sprite, stroke = currentColor) --- */
|
||
.ico {
|
||
width: 16px;
|
||
height: 16px;
|
||
flex-shrink: 0;
|
||
vertical-align: -0.18em;
|
||
}
|
||
.ico-sm { width: 14px; height: 14px; }
|
||
.ico-lg { width: 22px; height: 22px; }
|
||
/* Feature-tile icon: the svg itself is a 2px-radius bg-2 square with a muted stroke —
|
||
replaces the emoji tiles; robust inside any container display mode. */
|
||
.ico-tile {
|
||
width: 48px;
|
||
height: 48px;
|
||
padding: 12px;
|
||
background: var(--bg-2);
|
||
border-radius: var(--radius);
|
||
color: var(--text-2);
|
||
}
|
||
/* Comparison marks: presence = blue, absence = muted (exception-color: x is not an error). */
|
||
.ico-yes { color: var(--blue-bright); }
|
||
.ico-no { color: var(--text-3); }
|
||
|
||
/* --- Navigation --- */
|
||
nav {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0;
|
||
padding: 20px 0;
|
||
background: rgba(10, 18, 32, 0.92);
|
||
backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid var(--line);
|
||
z-index: 200;
|
||
}
|
||
nav .container { display: flex; justify-content: space-between; align-items: center; }
|
||
/* The brand lockup is TWO images, not an image plus typed text (2026-10-09). logo.png carries its
|
||
own 'felhom.eu' lettering underneath the mark, so showing it beside a typed span said the name
|
||
twice and shrank the mark to fit.
|
||
|
||
The mark is logo-mark.svg, cut from logo.svg (defs + path6 + g2; the wordmark paths and two empty
|
||
<text> elements dropped). DO NOT swap it for logo_notext.svg: that file is the LIGHT-background
|
||
variant -- its cloud is #00408d with ZERO #ffffff fills, so on this dark nav it renders as a
|
||
hollow outline. That shipped for one commit and the operator caught it. logo_notext_white.svg is
|
||
not the answer either: it is a white OUTLINE version, also unfilled. Only logo.svg carries the
|
||
real artwork (white cloud, #051343 house and servers, #008ddf swoosh).
|
||
|
||
The name beside the mark is the brand's own lettering, cropped from logo.png -- the same thing the
|
||
Facebook covers do. That face is 'M+ 2c'/'Vremena Grotesk' (R-916), which nothing here has, and
|
||
the site deliberately loads NO external font: the published privacy notice says so, so matching it
|
||
with a webfont would make a public claim false. */
|
||
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
|
||
.logo-mark { height: 54px; width: auto; }
|
||
.logo-word { height: 25px; width: auto; }
|
||
@media (max-width: 600px) { .logo-mark { height: 44px; } .logo-word { height: 21px; } }
|
||
.nav-links { display: flex; gap: 32px; list-style: none; }
|
||
.nav-links a {
|
||
color: var(--text-2);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
font-size: 0.95rem;
|
||
transition: color 0.2s ease;
|
||
}
|
||
.nav-links a:hover,
|
||
.nav-links a.active { color: var(--blue-bright); }
|
||
|
||
/* --- Language globe (2026-10-08, matching the controller's lang_globe): a <details> list, no JavaScript.
|
||
The current language is marked by weight and a blue rule, not a check glyph (the emoji gate's range). --- */
|
||
.lang-globe-li { display: flex; align-items: center; }
|
||
.lang-globe { position: relative; margin: 0; }
|
||
.lang-globe-btn { list-style: none; display: inline-flex; align-items: center; color: var(--text-2); cursor: pointer; padding: 2px; border-radius: var(--radius); }
|
||
.lang-globe-btn::-webkit-details-marker { display: none; }
|
||
.lang-globe-btn::marker { content: ""; }
|
||
.lang-globe-btn:hover, .lang-globe[open] .lang-globe-btn { color: var(--blue-bright); }
|
||
.lang-globe-menu { position: absolute; top: calc(100% + 12px); right: 0; margin: 0; padding: 4px; list-style: none; min-width: 8rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); z-index: 210; }
|
||
.nav-links .lang-globe-item { display: block; padding: 6px 10px; font-size: 0.9rem; white-space: nowrap; color: var(--text-2); border-left: 2px solid transparent; }
|
||
.nav-links .lang-globe-item:hover { color: var(--blue-bright); }
|
||
.nav-links .lang-globe-item.current { color: var(--text-1); font-weight: 700; border-left-color: var(--blue); }
|
||
|
||
/* --- Two-tone heading (brand signature): accent span is solid blue-bright --- */
|
||
h1 span, h2 span, h3 span, h4 span { color: var(--blue-bright); }
|
||
|
||
/* --- Section headers / content sections --- */
|
||
.section-header { text-align: center; margin-bottom: 56px; }
|
||
.section-header h2 { font-size: 2.2rem; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em; }
|
||
.section-header p { color: var(--text-2); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }
|
||
.content-section { padding: 80px 0; }
|
||
.content-section.alt-bg { background: var(--bg-1); }
|
||
|
||
/* --- Page header (subpages) --- */
|
||
.page-header { padding: 140px 0 60px; text-align: center; }
|
||
.page-header h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin-bottom: 16px; letter-spacing: -0.02em; }
|
||
.page-header p { font-size: 1.1rem; color: var(--text-2); max-width: 700px; margin: 0 auto; }
|
||
|
||
/* --- Buttons --- */
|
||
.cta-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: var(--blue);
|
||
color: #fff;
|
||
padding: 15px 32px;
|
||
border: 1px solid var(--blue);
|
||
border-radius: var(--radius);
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
font-size: 1rem;
|
||
transition: background 0.2s ease, border-color 0.2s ease;
|
||
}
|
||
.cta-button:hover { background: var(--blue-bright); border-color: var(--blue-bright); }
|
||
.cta-button-secondary {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: transparent;
|
||
color: var(--blue-bright);
|
||
padding: 14px 28px;
|
||
border: 1px solid var(--blue);
|
||
border-radius: var(--radius);
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
font-size: 1rem;
|
||
transition: background 0.2s ease;
|
||
}
|
||
.cta-button-secondary:hover { background: var(--blue-dim); }
|
||
|
||
/* --- Panel/card --- */
|
||
.card {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 32px;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
.card:hover { border-color: var(--blue); }
|
||
|
||
/* --- CTA section (subpages) --- */
|
||
.cta-section { padding: 80px 0; text-align: center; }
|
||
.cta-section h2 { font-size: 2rem; font-weight: 700; margin-bottom: 16px; }
|
||
.cta-section p { color: var(--text-2); font-size: 1.1rem; max-width: 600px; margin: 0 auto 32px; }
|
||
|
||
/* --- Footer --- */
|
||
footer {
|
||
padding: 40px 0;
|
||
border-top: 1px solid var(--line);
|
||
text-align: center;
|
||
}
|
||
footer p { color: var(--text-2); font-size: 0.9rem; }
|
||
/* Footer links were unstyled, so the browser painted them default blue and PURPLE once visited
|
||
(2026-10-09). :visited is pinned to the same colour on purpose -- a legal link that changes
|
||
colour after one read looks like it stopped working. Matches .page-kapcsolat .sidebar-card a. */
|
||
footer a, footer a:link, footer a:visited { color: var(--blue-bright); text-decoration: none; }
|
||
footer a:hover, footer a:focus-visible { text-decoration: underline; }
|
||
|
||
/* --- Hamburger & mobile menu --- */
|
||
.hamburger {
|
||
display: none;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
padding: 8px;
|
||
z-index: 200;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.hamburger-box {
|
||
width: 28px;
|
||
height: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
.hamburger-line {
|
||
display: block;
|
||
width: 100%;
|
||
height: 2px;
|
||
background: var(--text-1);
|
||
border-radius: var(--radius);
|
||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||
transform-origin: center;
|
||
}
|
||
.hamburger.is-active .hamburger-line:nth-child(1) { transform: translateY(9px) rotate(45deg); }
|
||
.hamburger.is-active .hamburger-line:nth-child(2) { opacity: 0; }
|
||
.hamburger.is-active .hamburger-line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
|
||
.mobile-overlay {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 140;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
.mobile-overlay.is-visible { opacity: 1; }
|
||
|
||
@media (max-width: 900px) {
|
||
.hamburger { display: block; }
|
||
.nav-links {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: fixed;
|
||
top: 0;
|
||
right: -280px;
|
||
width: 280px;
|
||
height: 100vh;
|
||
height: 100dvh;
|
||
background: var(--bg-1);
|
||
border-left: 1px solid var(--line);
|
||
padding: 80px 32px 32px;
|
||
gap: 0;
|
||
z-index: 150;
|
||
transition: right 0.3s ease;
|
||
overflow-y: auto;
|
||
}
|
||
.nav-links.is-open { right: 0; }
|
||
.nav-links li { border-bottom: 1px solid var(--line-soft); }
|
||
.nav-links a { display: block; padding: 16px 0; font-size: 1.05rem; }
|
||
/* the globe in the phone menu: last item, its list opens in place (not a floating box the menu would cut off) */
|
||
.lang-globe-li { display: block; }
|
||
.lang-globe-btn { padding: 16px 0; }
|
||
.lang-globe-menu { position: static; min-width: 0; padding: 0 0 8px; background: none; border: none; }
|
||
.nav-links .lang-globe-menu li { border-bottom: none; }
|
||
.nav-links .lang-globe-item { padding: 10px 0 10px 12px; font-size: 1.05rem; }
|
||
.mobile-overlay { display: block; pointer-events: none; }
|
||
.mobile-overlay.is-visible { pointer-events: auto; }
|
||
body.menu-open { overflow: hidden; }
|
||
}
|
||
|
||
/* R-903 (2026-10-10): with JavaScript off the menu button cannot open the off-canvas list, so on a phone the
|
||
links and the language globe were unreachable. With no scripting the list sits in the header as a plain
|
||
wrapped row instead, and the header scrolls with the page so it can grow. Script-on pages are unchanged. */
|
||
@media (max-width: 900px) and (scripting: none) {
|
||
nav { position: static; }
|
||
nav .container { flex-wrap: wrap; row-gap: 12px; }
|
||
.hamburger { display: none; }
|
||
.nav-links {
|
||
position: static;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
width: 100%;
|
||
height: auto;
|
||
padding: 0;
|
||
gap: 4px 20px;
|
||
background: none;
|
||
border-left: none;
|
||
transition: none;
|
||
overflow: visible;
|
||
}
|
||
.nav-links li { border-bottom: none; }
|
||
.nav-links a { padding: 6px 0; font-size: 1rem; }
|
||
.lang-globe-btn { padding: 6px 0; }
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.section-header h2 { font-size: 1.8rem; }
|
||
.content-section { padding: 60px 0; }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after { animation: none !important; transition: none !important; }
|
||
}
|
||
|
||
|
||
/* ================= page: index ================= */
|
||
.page-index .hero {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 120px 0 80px;
|
||
}
|
||
.page-index .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
|
||
.page-index .hero-text h1 {
|
||
font-size: clamp(2.5rem, 5vw, 3.5rem);
|
||
font-weight: 700;
|
||
line-height: 1.1;
|
||
margin-bottom: 24px;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
.page-index .hero-text p { font-size: 1.2rem; color: var(--text-2); margin-bottom: 32px; max-width: 500px; }
|
||
.page-index .hero-visual { display: flex; justify-content: center; align-items: center; }
|
||
.page-index .hero-visual img {
|
||
max-width: 380px;
|
||
width: 100%;
|
||
height: auto;
|
||
|
||
animation: float 6s ease-in-out infinite;
|
||
}
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-15px); }
|
||
}
|
||
.page-index .beta-badge {
|
||
display: inline-block;
|
||
background: var(--blue-dim);
|
||
color: var(--blue-bright);
|
||
padding: 6px 12px;
|
||
border-radius: var(--radius);
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
margin-bottom: 16px;
|
||
}
|
||
.page-index .problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
|
||
.page-index .problem-card {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 32px;
|
||
transition: border-color 0.3s ease, transform 0.3s ease;
|
||
}
|
||
.page-index .problem-card:hover { border-color: var(--blue); }
|
||
.page-index .problem-icon { font-size: 2.5rem; margin-bottom: 20px; }
|
||
.page-index .problem-card h3 { font-size: 1.2rem; margin-bottom: 12px; color: var(--text-1); }
|
||
.page-index .problem-card p { color: var(--text-2); font-size: 0.95rem; }
|
||
.page-index .service-list { display: grid; gap: 20px; }
|
||
.page-index .service-item {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr auto;
|
||
gap: 24px;
|
||
align-items: center;
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 28px 32px;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
.page-index .service-item:hover { border-color: var(--blue); }
|
||
.page-index .service-number {
|
||
font-family: var(--font-data);
|
||
font-size: 0.9rem;
|
||
color: var(--blue-bright);
|
||
background: var(--blue-dim);
|
||
padding: 8px 14px;
|
||
border-radius: var(--radius);
|
||
font-weight: 500;
|
||
}
|
||
.page-index .service-content h3 { font-size: 1.15rem; margin-bottom: 6px; }
|
||
.page-index .service-content p { color: var(--text-2); font-size: 0.95rem; }
|
||
.page-index .service-icon { font-size: 1.8rem; }
|
||
.page-index .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
|
||
.page-index .why-card {
|
||
padding: 40px;
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.page-index .why-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0;
|
||
width: 4px; height: 100%;
|
||
background: var(--blue);
|
||
}
|
||
.page-index .why-card h3 { font-size: 1.3rem; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
|
||
.page-index .why-card p { color: var(--text-2); font-size: 1rem; line-height: 1.7; }
|
||
.page-index .apps-showcase {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.page-index .app-category-preview {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 24px;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.page-index .app-category-preview:hover { border-color: var(--blue); }
|
||
.page-index .app-category-preview .cat-icon { font-size: 2rem; display: block; margin-bottom: 12px; }
|
||
.page-index .app-category-preview h3 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; color: var(--text-1); }
|
||
.page-index .app-category-preview p { font-size: 0.8rem; color: var(--text-2); line-height: 1.4; }
|
||
.page-index .apps-cta { text-align: center; }
|
||
.page-index .apps-cta .apps-count { font-size: 1.1rem; color: var(--text-2); margin-bottom: 24px; }
|
||
.page-index .apps-cta .apps-count strong { color: var(--blue-bright); }
|
||
.page-index .backup-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 60px;
|
||
align-items: center;
|
||
}
|
||
.page-index .backup-text h2 {
|
||
font-size: 2.2rem;
|
||
font-weight: 700;
|
||
margin-bottom: 20px;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.page-index .backup-text p {
|
||
color: var(--text-2);
|
||
font-size: 1.1rem;
|
||
line-height: 1.7;
|
||
margin-bottom: 24px;
|
||
}
|
||
.page-index .backup-visual { display: flex; flex-direction: column; gap: 16px; }
|
||
.page-index .backup-rule-mini {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 20px 24px;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
.page-index .backup-rule-mini:hover { border-color: var(--blue); }
|
||
.page-index .backup-rule-mini .number {
|
||
font-family: var(--font-data);
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
min-width: 50px;
|
||
color: var(--blue-bright);}
|
||
.page-index .backup-rule-mini .rule-text h4 { font-size: 1rem; margin-bottom: 4px; color: var(--text-1); }
|
||
.page-index .backup-rule-mini .rule-text p { font-size: 0.85rem; color: var(--text-2); margin: 0; }
|
||
.page-index .contact { padding: 100px 0; text-align: center; }
|
||
.page-index .contact-box {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 48px;
|
||
}
|
||
.page-index .contact-box h2 { font-size: 2rem; margin-bottom: 16px; }
|
||
.page-index .contact-box p { color: var(--text-2); margin-bottom: 32px; }
|
||
.page-index .contact-methods { display: flex; flex-direction: column; gap: 16px; }
|
||
.page-index .contact-link {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
padding: 16px 24px;
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
color: var(--text-1);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
transition: border-color 0.2s ease, background 0.2s ease;
|
||
}
|
||
.page-index .contact-link:hover { border-color: var(--blue); background: var(--blue-dim); }
|
||
.page-index .process-steps {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 32px;
|
||
position: relative;
|
||
}
|
||
.page-index .process-step {
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
.page-index .step-number {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
background: var(--blue-dim);
|
||
border: 2px solid var(--blue);
|
||
font-family: var(--font-data);
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
color: var(--blue-bright);
|
||
margin-bottom: 20px;
|
||
}
|
||
.page-index .process-step h3 {
|
||
font-size: 1.1rem;
|
||
margin-bottom: 10px;
|
||
color: var(--text-1);
|
||
}
|
||
.page-index .process-step p {
|
||
color: var(--text-2);
|
||
font-size: 0.9rem;
|
||
line-height: 1.6;
|
||
}
|
||
.page-index .process-connector {
|
||
display: none;
|
||
}
|
||
@media (min-width: 901px) {
|
||
.page-index .process-connector {
|
||
display: block;
|
||
position: absolute;
|
||
top: 28px;
|
||
right: -20px;
|
||
color: var(--blue);
|
||
font-size: 1.2rem;
|
||
z-index: 1;
|
||
}
|
||
.page-index .process-step:last-child .process-connector {
|
||
display: none;
|
||
}
|
||
}
|
||
@media (max-width: 900px) {
|
||
.page-index .hero-content { grid-template-columns: 1fr; text-align: center; }
|
||
.page-index .hero-text p { margin-left: auto; margin-right: auto; }
|
||
.page-index .hero-visual { order: -1; }
|
||
.page-index .hero-visual img { max-width: 280px; }
|
||
.page-index .why-grid { grid-template-columns: 1fr; }
|
||
.page-index .service-item { grid-template-columns: 1fr; text-align: center; gap: 16px; }
|
||
.page-index .backup-content { grid-template-columns: 1fr; gap: 40px; }
|
||
.page-index .backup-text { text-align: center; }
|
||
}
|
||
@media (max-width: 600px) {
|
||
.page-index .hero { padding: 100px 0 60px; }
|
||
.page-index .contact-box { padding: 32px 24px; }
|
||
}
|
||
@media (max-width: 900px) {
|
||
body.menu-open {
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
|
||
/* ================= page: kapcsolat ================= */
|
||
.page-kapcsolat .contact-layout {
|
||
display: grid;
|
||
grid-template-columns: 1fr 380px;
|
||
gap: 60px;
|
||
align-items: start;
|
||
}
|
||
.page-kapcsolat .contact-form-card {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 40px;
|
||
}
|
||
.page-kapcsolat .form-group {
|
||
margin-bottom: 24px;
|
||
}
|
||
.page-kapcsolat .form-group label {
|
||
display: block;
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
color: var(--text-1);
|
||
margin-bottom: 8px;
|
||
}
|
||
.page-kapcsolat .form-group label .required {
|
||
color: var(--blue-bright);
|
||
margin-left: 2px;
|
||
}
|
||
.page-kapcsolat .form-group input, .page-kapcsolat .form-group select, .page-kapcsolat .form-group textarea {
|
||
width: 100%;
|
||
padding: 14px 16px;
|
||
background: var(--bg-0);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
color: var(--text-1);
|
||
font-family: inherit;
|
||
font-size: 0.95rem;
|
||
transition: border-color 0.2s ease;
|
||
outline: none;
|
||
}
|
||
.page-kapcsolat .form-group input:focus, .page-kapcsolat .form-group select:focus, .page-kapcsolat .form-group textarea:focus {
|
||
border-color: var(--blue);
|
||
|
||
}
|
||
.page-kapcsolat .form-group input::placeholder, .page-kapcsolat .form-group textarea::placeholder {
|
||
color: var(--text-3);
|
||
}
|
||
.page-kapcsolat .form-group input.error, .page-kapcsolat .form-group select.error, .page-kapcsolat .form-group textarea.error {
|
||
border-color: var(--crit);
|
||
|
||
}
|
||
.page-kapcsolat .form-group .error-message {
|
||
color: var(--crit);
|
||
font-size: 0.8rem;
|
||
margin-top: 6px;
|
||
display: none;
|
||
}
|
||
.page-kapcsolat .form-group .error-message.visible {
|
||
display: block;
|
||
}
|
||
.page-kapcsolat .form-group select {
|
||
appearance: none;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 16px center;
|
||
padding-right: 40px;
|
||
cursor: pointer;
|
||
}
|
||
.page-kapcsolat .form-group select option {
|
||
background: var(--bg-0);
|
||
color: var(--text-1);
|
||
}
|
||
.page-kapcsolat .form-group textarea {
|
||
resize: vertical;
|
||
min-height: 140px;
|
||
}
|
||
.page-kapcsolat .form-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
}
|
||
.page-kapcsolat .file-upload-zone {
|
||
border: 2px dashed var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 32px 24px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: border-color 0.2s ease, background 0.2s ease;
|
||
position: relative;
|
||
}
|
||
.page-kapcsolat .file-upload-zone:hover, .page-kapcsolat .file-upload-zone.dragover {
|
||
border-color: var(--blue);
|
||
background: var(--blue-dim);
|
||
}
|
||
.page-kapcsolat .file-upload-zone input[type="file"] {
|
||
position: absolute;
|
||
inset: 0;
|
||
opacity: 0;
|
||
cursor: pointer;
|
||
}
|
||
.page-kapcsolat .upload-icon {
|
||
font-size: 2rem;
|
||
margin-bottom: 12px;
|
||
}
|
||
.page-kapcsolat .upload-text {
|
||
color: var(--text-2);
|
||
font-size: 0.9rem;
|
||
line-height: 1.6;
|
||
}
|
||
.page-kapcsolat .upload-text strong {
|
||
color: var(--blue-bright);
|
||
}
|
||
.page-kapcsolat .upload-hint {
|
||
color: var(--text-3);
|
||
font-size: 0.8rem;
|
||
margin-top: 8px;
|
||
}
|
||
.page-kapcsolat .file-list {
|
||
margin-top: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
.page-kapcsolat .file-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
background: var(--bg-0);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 10px 14px;
|
||
font-size: 0.85rem;
|
||
}
|
||
.page-kapcsolat .file-item .file-icon {
|
||
font-size: 1.2rem;
|
||
flex-shrink: 0;
|
||
}
|
||
.page-kapcsolat .file-item .file-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.page-kapcsolat .file-item .file-name {
|
||
color: var(--text-1);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.page-kapcsolat .file-item .file-size {
|
||
color: var(--text-3);
|
||
font-size: 0.75rem;
|
||
}
|
||
.page-kapcsolat .file-item .file-remove {
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-3);
|
||
cursor: pointer;
|
||
font-size: 1.1rem;
|
||
padding: 4px;
|
||
border-radius: var(--radius);
|
||
transition: color 0.2s ease, background 0.2s ease;
|
||
flex-shrink: 0;
|
||
}
|
||
.page-kapcsolat .file-item .file-remove:hover {
|
||
color: var(--crit);
|
||
background: var(--crit-dim);
|
||
}
|
||
.page-kapcsolat .file-total-size {
|
||
font-size: 0.8rem;
|
||
color: var(--text-3);
|
||
margin-top: 8px;
|
||
text-align: right;
|
||
}
|
||
.page-kapcsolat .file-total-size.warning {
|
||
color: var(--warn);
|
||
}
|
||
.page-kapcsolat .file-total-size.error-text {
|
||
color: var(--crit);
|
||
}
|
||
.page-kapcsolat .submit-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
width: 100%;
|
||
background: var(--blue);
|
||
color: white;
|
||
padding: 16px 32px;
|
||
border: none;
|
||
border-radius: var(--radius);
|
||
font-family: inherit;
|
||
font-weight: 600;
|
||
font-size: 1.05rem;
|
||
cursor: pointer;
|
||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||
|
||
}
|
||
.page-kapcsolat .submit-button:hover:not(:disabled) {
|
||
|
||
|
||
}
|
||
.page-kapcsolat .submit-button:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
.page-kapcsolat .submit-button .spinner {
|
||
display: none;
|
||
width: 18px;
|
||
height: 18px;
|
||
border: 2px solid rgba(255,255,255,0.3);
|
||
border-top-color: white;
|
||
border-radius: 50%;
|
||
animation: spin 0.8s linear infinite;
|
||
}
|
||
.page-kapcsolat .submit-button.loading .spinner { display: block; }
|
||
.page-kapcsolat .submit-button.loading .btn-text { display: none; }
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
.page-kapcsolat .form-status {
|
||
display: none;
|
||
padding: 16px 20px;
|
||
border-radius: var(--radius);
|
||
font-size: 0.9rem;
|
||
margin-bottom: 24px;
|
||
line-height: 1.5;
|
||
}
|
||
.page-kapcsolat .form-status.success {
|
||
display: block;
|
||
background: var(--blue-dim);
|
||
border: 1px solid var(--blue);
|
||
color: var(--blue);
|
||
}
|
||
.page-kapcsolat .form-status.error-state {
|
||
display: block;
|
||
background: var(--crit-dim);
|
||
border: 1px solid var(--crit);
|
||
color: var(--crit);
|
||
}
|
||
.page-kapcsolat .contact-sidebar {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
position: sticky;
|
||
top: 120px;
|
||
}
|
||
.page-kapcsolat .sidebar-card {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 28px;
|
||
}
|
||
.page-kapcsolat .sidebar-card h3 {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
margin-bottom: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.page-kapcsolat .sidebar-card h3 .icon {
|
||
font-size: 1.3rem;
|
||
}
|
||
.page-kapcsolat .sidebar-card p {
|
||
color: var(--text-2);
|
||
font-size: 0.9rem;
|
||
line-height: 1.7;
|
||
margin-bottom: 12px;
|
||
}
|
||
.page-kapcsolat .sidebar-card p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.page-kapcsolat .sidebar-card a {
|
||
color: var(--blue-bright);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
transition: color 0.2s ease;
|
||
}
|
||
.page-kapcsolat .sidebar-card a:hover {
|
||
color: var(--text-1);
|
||
}
|
||
.page-kapcsolat .sidebar-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
}
|
||
.page-kapcsolat .sidebar-list li {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
padding: 8px 0;
|
||
color: var(--text-2);
|
||
font-size: 0.9rem;
|
||
line-height: 1.5;
|
||
}
|
||
.page-kapcsolat .sidebar-list li .li-icon {
|
||
flex-shrink: 0;
|
||
margin-top: 2px;
|
||
}
|
||
.page-kapcsolat .direct-email {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 14px 18px;
|
||
background: var(--bg-0);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
color: var(--text-1);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
font-size: 0.9rem;
|
||
transition: border-color 0.2s ease, background 0.2s ease;
|
||
}
|
||
.page-kapcsolat .direct-email:hover {
|
||
border-color: var(--blue);
|
||
background: var(--blue-dim);
|
||
}
|
||
.page-kapcsolat .checkbox-group {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.page-kapcsolat .checkbox-group input[type="checkbox"] {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-top: 2px;
|
||
accent-color: var(--blue);
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
}
|
||
.page-kapcsolat .checkbox-group label {
|
||
font-size: 0.85rem;
|
||
color: var(--text-2);
|
||
line-height: 1.5;
|
||
cursor: pointer;
|
||
}
|
||
.page-kapcsolat .checkbox-group label a {
|
||
color: var(--blue-bright);
|
||
text-decoration: none;
|
||
}
|
||
.page-kapcsolat .checkbox-group label a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
@media (max-width: 900px) {
|
||
.page-kapcsolat .contact-layout {
|
||
grid-template-columns: 1fr;
|
||
gap: 40px;
|
||
}
|
||
.page-kapcsolat .contact-sidebar {
|
||
position: static;
|
||
order: -1;
|
||
}
|
||
}
|
||
@media (max-width: 600px) {
|
||
.page-kapcsolat .contact-form-card { padding: 24px; }
|
||
.page-kapcsolat .form-row { grid-template-columns: 1fr; gap: 0; }
|
||
.page-kapcsolat .sidebar-card { padding: 20px; }
|
||
}
|
||
@media (max-width: 900px) {
|
||
body.menu-open {
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
|
||
/* ================= page: alkalmazasok ================= */
|
||
.page-alkalmazasok .disclaimer-banner {
|
||
background: var(--blue-dim);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 24px 32px;
|
||
margin: 0 auto 48px;
|
||
max-width: 760px;
|
||
text-align: left;
|
||
}
|
||
.page-alkalmazasok .disclaimer-banner h3 { font-size: 1rem; color: var(--blue-bright); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
|
||
.page-alkalmazasok .disclaimer-banner ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
|
||
.page-alkalmazasok .disclaimer-banner li { color: var(--text-2); font-size: 0.9rem; position: relative; padding-left: 24px; line-height: 1.5; }
|
||
.page-alkalmazasok .disclaimer-banner li::before { content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; color: var(--blue); font-weight: bold; position: absolute; left: 0; top: 0; }
|
||
.page-alkalmazasok .disclaimer-banner li strong { color: var(--text-1); }
|
||
.page-alkalmazasok .disclaimer-banner a { color: var(--blue-bright); }
|
||
.page-alkalmazasok .category-section { margin-bottom: 64px; }
|
||
.page-alkalmazasok .category-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
|
||
.page-alkalmazasok .category-icon { font-size: 1.8rem; }
|
||
.page-alkalmazasok .category-header h2 { font-size: 1.5rem; font-weight: 600; color: var(--text-1); }
|
||
.page-alkalmazasok .category-header .app-count { background: var(--bg-1); color: var(--text-2); padding: 4px 12px; border-radius: var(--radius); font-size: 0.8rem; font-weight: 500; }
|
||
.page-alkalmazasok .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
|
||
.page-alkalmazasok .app-card {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.page-alkalmazasok .app-card:hover { border-color: var(--blue); }
|
||
.page-alkalmazasok .app-card-header { display: flex; align-items: center; gap: 16px; padding: 20px; border-bottom: 1px solid var(--line); }
|
||
.page-alkalmazasok .app-logo { width: 48px; height: 48px; border-radius: var(--radius); object-fit: contain; background: var(--bg-1); padding: 6px; flex-shrink: 0; }
|
||
.page-alkalmazasok .app-title-area h3 { font-size: 1.1rem; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
|
||
.page-alkalmazasok .app-title-area .app-tagline { font-size: 0.8rem; color: var(--text-3); }
|
||
.page-alkalmazasok .app-card-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
|
||
.page-alkalmazasok .app-description { color: var(--text-2); font-size: 0.9rem; line-height: 1.6; margin-bottom: 16px; flex-grow: 1; }
|
||
.page-alkalmazasok .app-features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
|
||
.page-alkalmazasok .app-feature { background: var(--blue-dim); color: var(--blue-bright); padding: 4px 10px; border-radius: var(--radius); font-size: 0.75rem; font-weight: 500; }
|
||
.page-alkalmazasok .app-shot-link { display: block; }
|
||
.page-alkalmazasok .app-screenshot { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-1); cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease; }
|
||
.page-alkalmazasok .app-screenshot:hover { opacity: 0.9; transform: scale(1.02); }
|
||
/* --- The picture viewer (assets/gallery.js), on every page that declares a data-gallery set --- */
|
||
.lightbox-overlay {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(0, 0, 0, 0.95);
|
||
z-index: 1000;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
padding: 20px;
|
||
}
|
||
.lightbox-overlay.active { display: flex; }
|
||
.lightbox-close {
|
||
position: absolute;
|
||
top: 20px; right: 24px;
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-2);
|
||
font-size: 2rem;
|
||
cursor: pointer;
|
||
padding: 8px;
|
||
line-height: 1;
|
||
transition: color 0.2s ease;
|
||
z-index: 1002;
|
||
}
|
||
.lightbox-close:hover { color: var(--text-1); }
|
||
.lightbox-content {
|
||
position: relative;
|
||
max-width: 90vw;
|
||
max-height: 80vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.lightbox-image {
|
||
max-width: 100%;
|
||
max-height: 80vh;
|
||
object-fit: contain;
|
||
border-radius: var(--radius);
|
||
cursor: zoom-out;
|
||
}
|
||
.lightbox-nav {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
color: var(--text-1);
|
||
font-size: 1.5rem;
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
transition: all 0.2s ease;
|
||
z-index: 1001;
|
||
}
|
||
.lightbox-nav:hover { background: var(--blue); border-color: var(--blue); }
|
||
.lightbox-nav:disabled { opacity: 0.3; cursor: not-allowed; }
|
||
.lightbox-nav:disabled:hover { background: var(--bg-1); border-color: var(--line); }
|
||
.lightbox-prev { left: -60px; }
|
||
.lightbox-next { right: -60px; }
|
||
.lightbox-counter {
|
||
margin-top: 16px;
|
||
color: var(--text-2);
|
||
font-size: 0.9rem;
|
||
text-align: center;
|
||
}
|
||
.lightbox-dots {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-top: 12px;
|
||
justify-content: center;
|
||
}
|
||
.lightbox-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background: var(--line);
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: background 0.2s ease;
|
||
}
|
||
.lightbox-dot:hover { background: var(--text-3); }
|
||
.lightbox-dot.active { background: var(--blue-bright); }
|
||
@media (max-width: 768px) {
|
||
.lightbox-nav {
|
||
width: 40px;
|
||
height: 40px;
|
||
font-size: 1.2rem;
|
||
}
|
||
.lightbox-prev { left: 10px; }
|
||
.lightbox-next { right: 10px; }
|
||
.lightbox-content {
|
||
max-width: 95vw;
|
||
}
|
||
}
|
||
.page-alkalmazasok .app-card-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16px 20px;
|
||
border-top: 1px solid var(--line);
|
||
background: var(--bg-1);
|
||
}
|
||
.page-alkalmazasok .github-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: var(--text-2);
|
||
text-decoration: none;
|
||
font-size: 0.85rem;
|
||
font-weight: 500;
|
||
transition: color 0.2s ease;
|
||
}
|
||
.page-alkalmazasok .github-link:hover { color: var(--blue-bright); }
|
||
.page-alkalmazasok .github-link img { width: 18px; height: 18px; opacity: 0.7; }
|
||
.page-alkalmazasok .open-source-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: var(--blue);
|
||
font-size: 0.8rem;
|
||
font-weight: 500;
|
||
}
|
||
.page-alkalmazasok .open-source-badge img { width: 14px; height: 14px; }
|
||
.page-alkalmazasok .stats-section {
|
||
padding: 60px 0;
|
||
background: var(--bg-1);
|
||
border-top: 1px solid var(--line);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.page-alkalmazasok .stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: 32px;
|
||
text-align: center;
|
||
}
|
||
.page-alkalmazasok .stat-item h3 {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
color: var(--blue-bright);}
|
||
.page-alkalmazasok .stat-item p { color: var(--text-2); font-size: 0.95rem; }
|
||
@media (max-width: 768px) {
|
||
.page-alkalmazasok .disclaimer-banner { padding: 20px; }
|
||
.page-alkalmazasok .app-grid { grid-template-columns: 1fr; }
|
||
}
|
||
@media (max-width: 900px) {
|
||
body.menu-open {
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
|
||
/* ================= page: technologiak ================= */
|
||
.page-technologiak .toc-nav {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 24px 32px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.page-technologiak .toc-nav h3 {
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--text-3);
|
||
margin-bottom: 16px;
|
||
}
|
||
.page-technologiak .toc-links {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px 24px;
|
||
list-style: none;
|
||
}
|
||
.page-technologiak .toc-links a {
|
||
color: var(--blue-bright);
|
||
text-decoration: none;
|
||
font-size: 0.95rem;
|
||
font-weight: 500;
|
||
transition: color 0.2s ease;
|
||
}
|
||
.page-technologiak .toc-links a:hover { color: var(--text-1); }
|
||
.page-technologiak .info-card,
|
||
.page-teszteles .info-card {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 40px;
|
||
margin-bottom: 32px;
|
||
}
|
||
.page-technologiak .info-card:last-child,
|
||
.page-teszteles .info-card:last-child { margin-bottom: 0; }
|
||
.page-technologiak .info-card h3,
|
||
.page-teszteles .info-card h3 {
|
||
font-size: 1.4rem;
|
||
margin-bottom: 20px;
|
||
color: var(--text-1);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.page-technologiak .info-card h3 .icon,
|
||
.page-teszteles .info-card h3 .icon { font-size: 1.6rem; }
|
||
.page-technologiak .info-card p,
|
||
.page-teszteles .info-card p {
|
||
color: var(--text-2);
|
||
font-size: 1rem;
|
||
line-height: 1.8;
|
||
margin-bottom: 16px;
|
||
}
|
||
.page-technologiak .info-card p:last-child,
|
||
.page-teszteles .info-card p:last-child { margin-bottom: 0; }
|
||
.page-technologiak .highlight-box,
|
||
.page-teszteles .highlight-box {
|
||
background: var(--blue-dim);
|
||
border: 1px solid var(--blue);
|
||
border-radius: var(--radius);
|
||
padding: 20px 24px;
|
||
margin: 20px 0;
|
||
}
|
||
.page-technologiak .highlight-box p,
|
||
.page-teszteles .highlight-box p { color: var(--text-1); margin: 0; }
|
||
.page-technologiak .highlight-box strong,
|
||
.page-teszteles .highlight-box strong { color: var(--blue-bright); }
|
||
.page-technologiak .warning-box {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--warn);
|
||
border-radius: var(--radius);
|
||
padding: 20px 24px;
|
||
margin: 20px 0;
|
||
}
|
||
.page-technologiak .warning-box p { color: var(--text-1); margin: 0; }
|
||
.page-technologiak .feature-list {
|
||
list-style: none;
|
||
margin: 20px 0;
|
||
}
|
||
.page-technologiak .feature-list li {
|
||
color: var(--text-2);
|
||
font-size: 0.95rem;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
line-height: 1.6;
|
||
}
|
||
.page-technologiak .feature-list li::before {
|
||
content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
|
||
color: var(--blue);
|
||
font-weight: bold;
|
||
flex-shrink: 0;
|
||
margin-top: 2px;
|
||
}
|
||
.page-technologiak .feature-list.cons li::before {
|
||
content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
|
||
color: var(--warn);
|
||
}
|
||
.page-technologiak .comparison-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 24px;
|
||
margin-top: 32px;
|
||
}
|
||
.page-technologiak .comparison-card {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 32px;
|
||
transition: border-color 0.3s ease, transform 0.3s ease;
|
||
position: relative;
|
||
}
|
||
.page-technologiak .comparison-card:hover {
|
||
border-color: var(--blue);
|
||
|
||
}
|
||
.page-technologiak .comparison-card.recommended {
|
||
border-color: var(--blue-bright);
|
||
}
|
||
.page-technologiak .comparison-card.recommended::before {
|
||
content: 'Ajánlott';
|
||
position: absolute;
|
||
top: -12px;
|
||
left: 24px;
|
||
background: var(--blue);
|
||
color: white;
|
||
padding: 4px 12px;
|
||
border-radius: var(--radius);
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
}
|
||
.page-technologiak .comparison-card .card-icon { font-size: 2.5rem; margin-bottom: 16px; }
|
||
.page-technologiak .comparison-card h3 { font-size: 1.3rem; margin-bottom: 8px; color: var(--text-1); }
|
||
.page-technologiak .comparison-card .subtitle { font-size: 0.9rem; color: var(--blue-bright); margin-bottom: 16px; }
|
||
.page-technologiak .comparison-card p { color: var(--text-2); font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px; }
|
||
.page-technologiak .use-case-tag {
|
||
display: inline-block;
|
||
background: var(--blue-dim);
|
||
color: var(--blue-bright);
|
||
padding: 4px 10px;
|
||
border-radius: var(--radius);
|
||
font-size: 0.8rem;
|
||
font-weight: 500;
|
||
margin-right: 8px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.page-technologiak .hardware-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 24px;
|
||
}
|
||
.page-technologiak .hardware-card {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
transition: border-color 0.3s ease, transform 0.3s ease;
|
||
}
|
||
.page-technologiak .hardware-card:hover { border-color: var(--blue); }
|
||
.page-technologiak .hardware-card-header {
|
||
background: var(--blue-dim);
|
||
padding: 24px;
|
||
border-bottom: 1px solid var(--line);
|
||
text-align: center;
|
||
}
|
||
.page-technologiak .hardware-card-header .hw-icon { font-size: 3rem; margin-bottom: 12px; }
|
||
.page-technologiak .hardware-card-header h3 { font-size: 1.2rem; margin-bottom: 4px; }
|
||
.page-technologiak .hardware-card-header .hw-subtitle { font-size: 0.85rem; color: var(--text-3); }
|
||
.page-technologiak .hardware-card-body { padding: 24px; }
|
||
.page-technologiak .hardware-card-body p { color: var(--text-2); font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px; }
|
||
.page-technologiak .spec-list { list-style: none; margin: 16px 0; }
|
||
.page-technologiak .spec-list li {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid var(--line);
|
||
font-size: 0.9rem;
|
||
}
|
||
.page-technologiak .spec-list li:last-child { border-bottom: none; }
|
||
.page-technologiak .spec-list .spec-label { color: var(--text-3); }
|
||
.page-technologiak .spec-list .spec-value { color: var(--text-1); font-weight: 500; }
|
||
.page-technologiak .price-range {
|
||
text-align: center;
|
||
margin-top: 16px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.page-technologiak .price-range .label { font-size: 0.8rem; color: var(--text-3); margin-bottom: 4px; }
|
||
.page-technologiak .price-range .price { font-size: 1.3rem; font-weight: 700; color: var(--blue-bright); }
|
||
.page-technologiak .stack-diagram {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 40px;
|
||
margin: 32px 0;
|
||
}
|
||
.page-technologiak .stack-diagram h3 { text-align: center; font-size: 1.2rem; margin-bottom: 32px; color: var(--text-2); }
|
||
.page-technologiak .stack-layers {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
.page-technologiak .stack-layer { display: flex; align-items: center; gap: 16px; }
|
||
.page-technologiak .layer-label { width: 120px; font-size: 0.8rem; color: var(--text-3); text-align: right; flex-shrink: 0; }
|
||
.page-technologiak .layer-content {
|
||
flex: 1;
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 16px 20px;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.page-technologiak .layer-content:hover { border-color: var(--blue); transform: scale(1.02); }
|
||
.page-technologiak .layer-content.highlight { background: var(--blue-dim); border-color: var(--blue); }
|
||
.page-technologiak .layer-content .layer-name { font-size: 1rem; color: var(--text-1); margin-bottom: 4px; }
|
||
.page-technologiak .layer-content .layer-tech { font-size: 0.8rem; color: var(--text-3); }
|
||
.page-technologiak .network-flow {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
margin: 24px 0;
|
||
}
|
||
.page-technologiak .flow-node {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 16px 24px;
|
||
text-align: center;
|
||
min-width: 120px;
|
||
}
|
||
.page-technologiak .flow-node .node-icon { font-size: 1.5rem; margin-bottom: 8px; }
|
||
.page-technologiak .flow-node .node-label { font-size: 0.85rem; color: var(--text-1); font-weight: 500; }
|
||
.page-technologiak .flow-node .node-tech { font-size: 0.75rem; color: var(--text-3); }
|
||
.page-technologiak .flow-arrow { font-size: 1.2rem; color: var(--blue); }
|
||
@media (max-width: 900px) {
|
||
.page-technologiak .toc-links { flex-direction: column; gap: 8px; }
|
||
.page-technologiak .layer-label { width: 80px; font-size: 0.7rem; }
|
||
.page-technologiak .network-flow { flex-direction: column; }
|
||
.page-technologiak .flow-arrow { transform: rotate(90deg); }
|
||
}
|
||
@media (max-width: 600px) {
|
||
.page-technologiak .info-card,
|
||
.page-teszteles .info-card { padding: 24px; }
|
||
}
|
||
@media (max-width: 900px) {
|
||
body.menu-open {
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
|
||
/* ================= page: biztonsagimentes ================= */
|
||
.page-biztonsagimentes .info-card {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 40px;
|
||
margin-bottom: 32px;
|
||
}
|
||
.page-biztonsagimentes .info-card:last-child { margin-bottom: 0; }
|
||
.page-biztonsagimentes .info-card h3 {
|
||
font-size: 1.4rem;
|
||
margin-bottom: 20px;
|
||
color: var(--text-1);
|
||
}
|
||
.page-biztonsagimentes .info-card p {
|
||
color: var(--text-2);
|
||
font-size: 1rem;
|
||
line-height: 1.8;
|
||
margin-bottom: 16px;
|
||
}
|
||
.page-biztonsagimentes .info-card p:last-child { margin-bottom: 0; }
|
||
.page-biztonsagimentes .highlight-box {
|
||
background: var(--blue-dim);
|
||
border: 1px solid var(--blue);
|
||
border-radius: var(--radius);
|
||
padding: 20px 24px;
|
||
margin: 20px 0;
|
||
}
|
||
.page-biztonsagimentes .highlight-box p { color: var(--text-1); margin: 0; }
|
||
.page-biztonsagimentes .highlight-box strong { color: var(--blue-bright); }
|
||
.page-biztonsagimentes .backup-rule {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 32px;
|
||
align-items: start;
|
||
margin-bottom: 40px;
|
||
}
|
||
.page-biztonsagimentes .backup-rule:last-child { margin-bottom: 0; }
|
||
.page-biztonsagimentes .rule-number {
|
||
font-family: var(--font-data);
|
||
font-size: 3rem;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
min-width: 80px;
|
||
text-align: center;
|
||
color: var(--blue-bright);}
|
||
.page-biztonsagimentes .rule-content h3 { font-size: 1.3rem; margin-bottom: 12px; color: var(--text-1); }
|
||
.page-biztonsagimentes .rule-content p { color: var(--text-2); font-size: 1rem; line-height: 1.7; margin-bottom: 12px; }
|
||
.page-biztonsagimentes .rule-content p:last-child { margin-bottom: 0; }
|
||
.page-biztonsagimentes .example-box {
|
||
background: var(--bg-0);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 16px 20px;
|
||
margin-top: 16px;
|
||
}
|
||
.page-biztonsagimentes .example-box .label {
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--blue-bright);
|
||
margin-bottom: 8px;
|
||
}
|
||
.page-biztonsagimentes .example-box p { margin: 0; font-size: 0.95rem; }
|
||
.page-biztonsagimentes .methods-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 24px;
|
||
}
|
||
.page-biztonsagimentes .method-card {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 32px;
|
||
transition: border-color 0.3s ease, transform 0.3s ease;
|
||
}
|
||
.page-biztonsagimentes .method-card:hover { border-color: var(--blue); }
|
||
.page-biztonsagimentes .method-icon { font-size: 2.5rem; margin-bottom: 20px; }
|
||
.page-biztonsagimentes .method-card h3 { font-size: 1.2rem; margin-bottom: 12px; color: var(--text-1); }
|
||
.page-biztonsagimentes .method-card p { color: var(--text-2); font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px; }
|
||
.page-biztonsagimentes .method-pros { list-style: none; margin: 16px 0; }
|
||
.page-biztonsagimentes .method-pros li {
|
||
color: var(--text-2);
|
||
font-size: 0.9rem;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.page-biztonsagimentes .method-pros li::before {
|
||
content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
|
||
color: var(--blue);
|
||
font-weight: bold;
|
||
flex-shrink: 0;
|
||
}
|
||
.page-biztonsagimentes .method-cons li::before {
|
||
content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
|
||
color: var(--warn);
|
||
}
|
||
.page-biztonsagimentes .backup-diagram {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 40px;
|
||
text-align: center;
|
||
margin: 48px 0;
|
||
}
|
||
.page-biztonsagimentes .backup-diagram h3 { font-size: 1.2rem; margin-bottom: 32px; color: var(--text-2); }
|
||
.page-biztonsagimentes .diagram-visual {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 24px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.page-biztonsagimentes .diagram-node {
|
||
background: var(--bg-1);
|
||
border: 2px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 20px 28px;
|
||
text-align: center;
|
||
min-width: 140px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.page-biztonsagimentes .diagram-node:hover { border-color: var(--blue); transform: scale(1.05); }
|
||
.page-biztonsagimentes .diagram-node.primary { border-color: var(--blue-bright); background: var(--blue-dim); }
|
||
.page-biztonsagimentes .diagram-node .icon { font-size: 2rem; margin-bottom: 8px; }
|
||
.page-biztonsagimentes .diagram-node .label { font-size: 0.9rem; font-weight: 600; color: var(--text-1); }
|
||
.page-biztonsagimentes .diagram-node .sublabel { font-size: 0.75rem; color: var(--text-3); margin-top: 4px; }
|
||
.page-biztonsagimentes .diagram-arrow { font-size: 1.5rem; color: var(--blue); }
|
||
@media (max-width: 900px) {
|
||
.page-biztonsagimentes .backup-rule { grid-template-columns: 1fr; gap: 16px; text-align: center; }
|
||
.page-biztonsagimentes .rule-number { font-size: 2.5rem; }
|
||
.page-biztonsagimentes .diagram-visual { flex-direction: column; }
|
||
.page-biztonsagimentes .diagram-arrow { transform: rotate(90deg); }
|
||
}
|
||
@media (max-width: 600px) {
|
||
.page-biztonsagimentes .info-card { padding: 24px; }
|
||
}
|
||
@media (max-width: 900px) {
|
||
body.menu-open {
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
|
||
/* ================= page: gyik ================= */
|
||
.page-gyik .faq-toc {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 24px 32px;
|
||
margin-bottom: 60px;
|
||
}
|
||
.page-gyik .faq-toc h3 {
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--text-3);
|
||
margin-bottom: 16px;
|
||
}
|
||
.page-gyik .faq-toc-links {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
list-style: none;
|
||
}
|
||
.page-gyik .faq-toc-links a {
|
||
display: inline-block;
|
||
padding: 8px 16px;
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
color: var(--text-2);
|
||
text-decoration: none;
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.page-gyik .faq-toc-links a:hover {
|
||
border-color: var(--blue);
|
||
color: var(--blue-bright);
|
||
background: var(--blue-dim);
|
||
}
|
||
.page-gyik .faq-category {
|
||
margin-bottom: 64px;
|
||
}
|
||
.page-gyik .faq-category-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
padding-bottom: 16px;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.page-gyik .faq-category-icon {
|
||
font-size: 1.8rem;
|
||
}
|
||
.page-gyik .faq-category-header h2 {
|
||
font-size: 1.6rem;
|
||
font-weight: 700;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.page-gyik .faq-item {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
margin-bottom: 12px;
|
||
overflow: hidden;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
.page-gyik .faq-item:hover {
|
||
border-color: rgba(0,131,216,0.4);
|
||
}
|
||
.page-gyik .faq-question {
|
||
width: 100%;
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-1);
|
||
font-family: inherit;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
text-align: left;
|
||
padding: 20px 24px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 16px;
|
||
transition: background 0.2s ease;
|
||
}
|
||
.page-gyik .faq-question:hover {
|
||
background: var(--blue-dim);
|
||
}
|
||
.page-gyik .faq-chevron {
|
||
flex-shrink: 0;
|
||
width: 20px;
|
||
height: 20px;
|
||
color: var(--blue-bright);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.page-gyik .faq-item.open .faq-chevron {
|
||
transform: rotate(180deg);
|
||
}
|
||
.page-gyik .faq-answer {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: max-height 0.4s ease, padding 0.3s ease;
|
||
}
|
||
.page-gyik .faq-item.open .faq-answer {
|
||
max-height: 600px;
|
||
}
|
||
.page-gyik .faq-answer-inner {
|
||
padding: 0 24px 20px;
|
||
color: var(--text-2);
|
||
font-size: 0.95rem;
|
||
line-height: 1.7;
|
||
}
|
||
.page-gyik .faq-answer-inner p {
|
||
margin-bottom: 12px;
|
||
}
|
||
.page-gyik .faq-answer-inner p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.page-gyik .faq-answer-inner strong {
|
||
color: var(--text-1);
|
||
}
|
||
.page-gyik .faq-answer-inner a {
|
||
color: var(--blue-bright);
|
||
text-decoration: none;
|
||
}
|
||
.page-gyik .faq-answer-inner a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
@media (max-width: 900px) {
|
||
.page-gyik .faq-toc-links { flex-direction: column; gap: 8px; }
|
||
}
|
||
@media (max-width: 600px) {
|
||
.page-gyik .faq-question { padding: 16px 20px; font-size: 0.95rem; }
|
||
.page-gyik .faq-answer-inner { padding: 0 20px 16px; }
|
||
}
|
||
@media (max-width: 900px) {
|
||
body.menu-open {
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
|
||
/* ================= page: szolgaltatasok ================= */
|
||
.page-szolgaltatasok .draft-banner {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--warn);
|
||
border-radius: var(--radius);
|
||
padding: 20px 28px;
|
||
margin-bottom: 48px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
max-width: 700px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.page-szolgaltatasok .draft-banner .draft-icon { font-size: 1.5rem; flex-shrink: 0; }
|
||
.page-szolgaltatasok .draft-banner p { color: var(--text-2); font-size: 0.9rem; line-height: 1.5; }
|
||
.page-szolgaltatasok .draft-banner strong { color: var(--warn); }
|
||
.page-szolgaltatasok .pricing-note {
|
||
background: var(--blue-dim);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 24px 32px;
|
||
margin-bottom: 48px;
|
||
max-width: 800px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.page-szolgaltatasok .pricing-note p { color: var(--text-2); font-size: 0.95rem; line-height: 1.6; }
|
||
.page-szolgaltatasok .pricing-note strong { color: var(--text-1); }
|
||
.page-szolgaltatasok .service-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||
gap: 24px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.page-szolgaltatasok .service-card {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 28px;
|
||
transition: border-color 0.3s ease, transform 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.page-szolgaltatasok .service-card:hover { border-color: var(--blue); }
|
||
.page-szolgaltatasok .service-card-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
}
|
||
.page-szolgaltatasok .service-card-icon {
|
||
font-size: 2rem;
|
||
line-height: 1;
|
||
flex-shrink: 0;
|
||
}
|
||
.page-szolgaltatasok .service-card-badge {
|
||
font-size: 0.7rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
padding: 4px 10px;
|
||
border-radius: var(--radius);
|
||
flex-shrink: 0;
|
||
}
|
||
.page-szolgaltatasok .badge-onetime {
|
||
background: var(--blue-dim);
|
||
color: var(--blue);
|
||
border: 1px solid var(--blue-dim);
|
||
}
|
||
.page-szolgaltatasok .badge-monthly {
|
||
background: var(--blue-dim);
|
||
color: var(--blue-bright);
|
||
border: 1px solid rgba(0,131,216,0.3);
|
||
}
|
||
.page-szolgaltatasok .badge-ondemand {
|
||
background: var(--warn-dim);
|
||
color: var(--warn);
|
||
border: 1px solid var(--warn-dim);
|
||
}
|
||
.page-szolgaltatasok .badge-free {
|
||
background: var(--blue-dim);
|
||
color: var(--blue);
|
||
border: 1px solid var(--blue-dim);
|
||
}
|
||
.page-szolgaltatasok .service-card h3 {
|
||
font-size: 1.15rem;
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
color: var(--text-1);
|
||
}
|
||
.page-szolgaltatasok .service-card .description {
|
||
color: var(--text-2);
|
||
font-size: 0.9rem;
|
||
line-height: 1.6;
|
||
flex-grow: 1;
|
||
margin-bottom: 16px;
|
||
}
|
||
.page-szolgaltatasok .service-card .includes {
|
||
list-style: none;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
.page-szolgaltatasok .service-card .includes li {
|
||
color: var(--text-2);
|
||
font-size: 0.85rem;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
line-height: 1.4;
|
||
}
|
||
.page-szolgaltatasok .service-card .includes li::before {
|
||
content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
|
||
color: var(--blue);
|
||
font-weight: bold;
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
.page-szolgaltatasok .service-card .price-box {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 14px 18px;
|
||
margin-top: auto;
|
||
}
|
||
.page-szolgaltatasok .price-box .price-label {
|
||
font-size: 0.75rem;
|
||
color: var(--text-3);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
margin-bottom: 4px;
|
||
}
|
||
.page-szolgaltatasok .price-box .price-value {
|
||
font-family: var(--font-data);
|
||
font-size: 1.3rem;
|
||
font-weight: 600;
|
||
color: var(--blue-bright);
|
||
}
|
||
.page-szolgaltatasok .price-box .price-unit {
|
||
font-size: 0.8rem;
|
||
color: var(--text-2);
|
||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||
}
|
||
.page-szolgaltatasok .price-box .price-note {
|
||
font-size: 0.78rem;
|
||
color: var(--text-3);
|
||
margin-top: 4px;
|
||
line-height: 1.4;
|
||
}
|
||
.page-szolgaltatasok .package-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
margin-top: 48px;
|
||
}
|
||
.page-szolgaltatasok .package-card {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 32px 28px;
|
||
transition: border-color 0.3s ease, transform 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
.page-szolgaltatasok .package-card:hover { border-color: var(--blue); }
|
||
.page-szolgaltatasok .package-card.featured {
|
||
border-color: var(--blue);
|
||
|
||
}
|
||
.page-szolgaltatasok .package-card.featured::before {
|
||
content: 'Legnépszerűbb';
|
||
position: absolute;
|
||
top: -12px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--blue);
|
||
color: white;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
padding: 4px 16px;
|
||
border-radius: var(--radius);
|
||
white-space: nowrap;
|
||
}
|
||
.page-szolgaltatasok .package-card .package-icon {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 16px;
|
||
}
|
||
.page-szolgaltatasok .package-card h3 {
|
||
font-size: 1.4rem;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
}
|
||
.page-szolgaltatasok .package-card .package-tagline {
|
||
color: var(--text-2);
|
||
font-size: 0.9rem;
|
||
margin-bottom: 20px;
|
||
line-height: 1.5;
|
||
}
|
||
.page-szolgaltatasok .package-card .package-price {
|
||
font-family: var(--font-data);
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
color: var(--blue-bright);
|
||
margin-bottom: 4px;
|
||
}
|
||
.page-szolgaltatasok .package-card .package-price-note {
|
||
font-size: 0.8rem;
|
||
color: var(--text-3);
|
||
margin-bottom: 24px;
|
||
}
|
||
.page-szolgaltatasok .package-card .package-features {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
flex-grow: 1;
|
||
margin-bottom: 24px;
|
||
}
|
||
.page-szolgaltatasok .package-card .package-features li {
|
||
color: var(--text-2);
|
||
font-size: 0.88rem;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
line-height: 1.4;
|
||
}
|
||
.page-szolgaltatasok .package-card .package-features li::before {
|
||
content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
|
||
color: var(--blue);
|
||
font-weight: bold;
|
||
flex-shrink: 0;
|
||
}
|
||
.page-szolgaltatasok .package-card .package-features li.na {
|
||
color: var(--text-3);
|
||
}
|
||
.page-szolgaltatasok .package-card .package-features li.na::before {
|
||
content: '–';
|
||
color: var(--text-3);
|
||
}
|
||
.page-szolgaltatasok .package-cta {
|
||
display: block;
|
||
text-align: center;
|
||
padding: 12px 24px;
|
||
border-radius: var(--radius);
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
transition: all 0.2s ease;
|
||
margin-top: auto;
|
||
}
|
||
.page-szolgaltatasok .package-cta-secondary {
|
||
background: transparent;
|
||
color: var(--blue-bright);
|
||
border: 2px solid var(--blue);
|
||
}
|
||
.page-szolgaltatasok .package-cta-secondary:hover { background: var(--blue); color: white; }
|
||
.page-szolgaltatasok .package-cta-primary {
|
||
background: var(--blue);
|
||
color: white;
|
||
border: none;
|
||
|
||
}
|
||
.page-szolgaltatasok .package-cta-primary:hover { }
|
||
.page-szolgaltatasok .domain-section {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 48px;
|
||
align-items: center;
|
||
}
|
||
.page-szolgaltatasok .domain-text h2 {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.page-szolgaltatasok .domain-text p {
|
||
color: var(--text-2);
|
||
font-size: 1rem;
|
||
line-height: 1.7;
|
||
margin-bottom: 16px;
|
||
}
|
||
.page-szolgaltatasok .domain-visual {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
.page-szolgaltatasok .domain-example {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 20px 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
.page-szolgaltatasok .domain-example .domain-icon {
|
||
font-size: 1.5rem;
|
||
flex-shrink: 0;
|
||
}
|
||
.page-szolgaltatasok .domain-example .domain-url {
|
||
font-family: var(--font-data);
|
||
font-size: 0.95rem;
|
||
color: var(--blue-bright);
|
||
}
|
||
.page-szolgaltatasok .domain-example .domain-desc {
|
||
font-size: 0.82rem;
|
||
color: var(--text-3);
|
||
margin-top: 2px;
|
||
}
|
||
.page-szolgaltatasok .process-timeline {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
}
|
||
.page-szolgaltatasok .process-timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 24px;
|
||
top: 40px;
|
||
bottom: 40px;
|
||
width: 2px;
|
||
background: var(--line);
|
||
}
|
||
.page-szolgaltatasok .process-step {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 24px;
|
||
padding: 20px 0;
|
||
}
|
||
.page-szolgaltatasok .step-number {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
background: var(--bg-1);
|
||
border: 2px solid var(--blue);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: var(--font-data);
|
||
font-weight: 700;
|
||
font-size: 1rem;
|
||
color: var(--blue-bright);
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.page-szolgaltatasok .step-content h4 {
|
||
font-size: 1.05rem;
|
||
font-weight: 600;
|
||
margin-bottom: 6px;
|
||
color: var(--text-1);
|
||
}
|
||
.page-szolgaltatasok .step-content p {
|
||
color: var(--text-2);
|
||
font-size: 0.9rem;
|
||
line-height: 1.5;
|
||
}
|
||
.page-szolgaltatasok .cta-box {
|
||
background: var(--blue-dim);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: 48px;
|
||
}
|
||
.page-szolgaltatasok .cta-box h2 {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
}
|
||
.page-szolgaltatasok .cta-box p {
|
||
color: var(--text-2);
|
||
font-size: 1.05rem;
|
||
margin-bottom: 32px;
|
||
max-width: 500px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.page-szolgaltatasok .cta-buttons {
|
||
display: flex;
|
||
gap: 16px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.page-szolgaltatasok .package-grid { grid-template-columns: 1fr; }
|
||
.page-szolgaltatasok .domain-section { grid-template-columns: 1fr; gap: 32px; }
|
||
.page-szolgaltatasok .service-grid { grid-template-columns: 1fr; }
|
||
}
|
||
@media (max-width: 1024px) and (min-width: 769px) {
|
||
.page-szolgaltatasok .package-grid { grid-template-columns: 1fr 1fr; }
|
||
}
|
||
@media (max-width: 900px) {
|
||
body.menu-open {
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
/* --- Dashboard pictures (2026-10-08): real screenshots, two per row, one on a phone. A picture links to its
|
||
full-size file, which assets/gallery.js opens in the viewer (data-gallery="dashboard"). Hairline border, 2px
|
||
radius, no shadow. --- */
|
||
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 8px 0 24px; }
|
||
.dash-shot { margin: 0; }
|
||
.dash-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
|
||
.dash-shot a:hover img { border-color: var(--blue); }
|
||
.dash-shot figcaption { margin-top: 10px; color: var(--text-2); font-size: 0.95rem; line-height: 1.5; }
|
||
.dash-shot figcaption strong { color: var(--text-1); }
|
||
@media (max-width: 700px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
|
||
|
||
/* --- legal pages (adatkezeles, feltetelek): a readable prose column -------- */
|
||
.legal { max-width: 760px; }
|
||
.legal h2 { font-size: 1.45rem; font-weight: 700; margin: 40px 0 14px; letter-spacing: -0.01em; }
|
||
.legal h3 { font-size: 1.1rem; font-weight: 600; margin: 26px 0 10px; color: var(--text-1); }
|
||
.legal p { color: var(--text-2); line-height: 1.75; margin-bottom: 14px; }
|
||
.legal ul { margin: 0 0 16px 22px; }
|
||
.legal li { color: var(--text-2); line-height: 1.75; margin-bottom: 9px; }
|
||
.legal strong { color: var(--text-1); }
|
||
.legal code { font-size: 0.93em; color: var(--text-1); }
|
||
.legal a, .legal a:link, .legal a:visited { color: var(--blue-bright); text-decoration: none; }
|
||
|
||
/* Inline links in body copy, site-wide. There was no base `a` rule at all, so a link inside a
|
||
paragraph fell through to the browser default: blue, underlined, and a DIFFERENT colour once
|
||
visited. The legal pages were the only place this had been fixed, which is why `/gyik`,
|
||
`/technologiak`, `/biztonsagimentes` and `/teszteles` each showed a stray purple link.
|
||
Scoped to text containers on purpose: it must not touch the nav, the footer, `.cta-button`,
|
||
the contact links or the picture-gallery openers (which wrap an <img> and carry no text). */
|
||
.content-section p a:not(.cta-button),
|
||
.content-section li a:not(.cta-button),
|
||
.info-card a:not(.cta-button),
|
||
.highlight-box a:not(.cta-button),
|
||
.page-header p a:not(.cta-button) {
|
||
color: var(--blue-bright);
|
||
text-decoration: none;
|
||
border-bottom: 1px solid transparent;
|
||
transition: border-color 0.2s ease;
|
||
}
|
||
.content-section p a:not(.cta-button):visited,
|
||
.content-section li a:not(.cta-button):visited,
|
||
.info-card a:not(.cta-button):visited,
|
||
.highlight-box a:not(.cta-button):visited,
|
||
.page-header p a:not(.cta-button):visited { color: var(--blue-bright); }
|
||
.content-section p a:not(.cta-button):hover,
|
||
.content-section li a:not(.cta-button):hover,
|
||
.info-card a:not(.cta-button):hover,
|
||
.highlight-box a:not(.cta-button):hover,
|
||
.page-header p a:not(.cta-button):hover,
|
||
.content-section p a:not(.cta-button):focus-visible,
|
||
.content-section li a:not(.cta-button):focus-visible,
|
||
.info-card a:not(.cta-button):focus-visible,
|
||
.highlight-box a:not(.cta-button):focus-visible { border-bottom-color: var(--blue-bright); }
|
||
|
||
/* Lists inside an info-card. The card rules styled only h3 and p, so a <ul> fell back to the
|
||
browser default: full-strength black-on-dark bullets at the wrong indent. Mirrors `.legal`. */
|
||
.info-card ul { margin: 0 0 16px 22px; }
|
||
.info-card li { color: var(--text-2); line-height: 1.8; margin-bottom: 9px; }
|
||
.info-card li:last-child { margin-bottom: 0; }
|
||
.info-card ul:last-child { margin-bottom: 0; }
|
||
.info-card strong { color: var(--text-1); }
|
||
.info-card em { color: var(--text-2); }
|
||
|
||
/* `code` was styled only under `.legal`, so an inline code span elsewhere fell back to the
|
||
browser's default serif-ish monospace at full size. */
|
||
.info-card code,
|
||
.content-section p code {
|
||
font-family: var(--font-data);
|
||
font-size: 0.93em;
|
||
color: var(--text-1);
|
||
background: var(--bg-2);
|
||
border: 1px solid var(--line-soft);
|
||
border-radius: var(--radius);
|
||
padding: 1px 6px;
|
||
}
|
||
|
||
/* Justified body copy on the tester pages (operator, 2026-10-10). NOTE: no other page justifies
|
||
today — this is deliberately scoped so it can be rolled out site-wide in one edit, or dropped,
|
||
without touching any page's markup. Hungarian sets badly when justified without hyphenation,
|
||
so `hyphens` is on and the pages carry lang="hu"/lang="en" for the dictionary. */
|
||
.page-teszteles .info-card p,
|
||
.page-teszteles .info-card li,
|
||
.page-teszteles .highlight-box p {
|
||
text-align: justify;
|
||
hyphens: auto;
|
||
-webkit-hyphens: auto;
|
||
}
|
||
|
||
.legal a:hover, .legal a:focus-visible { text-decoration: underline; }
|
||
.legal-version { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); }
|
||
.legal-callout { padding: 16px; border: 1px solid var(--blue); border-radius: var(--radius); }
|
||
.nowrap { white-space: nowrap; }
|
||
|
||
/* ================= page: index — 2026-10-10 redesign =================
|
||
NEW classes only. Nothing above this block is modified, so index.html renders
|
||
exactly as before until it is switched over. Audit + rationale:
|
||
documentation/audits/redesign-2026-10-10/AUDIT.md
|
||
Dials: DESIGN_VARIANCE 6, MOTION_INTENSITY 3, VISUAL_DENSITY 4. Motion is CSS
|
||
hover/focus only; nothing animates on load, so there is nothing for
|
||
prefers-reduced-motion to undo beyond the global rule already in this file. */
|
||
|
||
/* --- section heads: left-aligned, no centred two-word-plus-blue-tail rhythm --- */
|
||
.page-index .sec-head { max-width: 46rem; margin-bottom: 44px; }
|
||
.page-index .sec-head h2 {
|
||
font-size: clamp(1.7rem, 3.2vw, 2.2rem); font-weight: 700;
|
||
letter-spacing: -0.02em; margin-bottom: 12px;
|
||
}
|
||
.page-index .sec-head p { color: var(--text-2); font-size: 1.05rem; max-width: 42rem; }
|
||
.page-index .sec-head.is-wide { max-width: none; }
|
||
|
||
/* --- lede (replaces .hero): content-sized, not a forced 100vh band --- */
|
||
.page-index .lede { padding: 128px 0 72px; }
|
||
.page-index .lede-grid {
|
||
display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center;
|
||
}
|
||
.page-index .lede-text h1 {
|
||
font-size: clamp(2.3rem, 4.6vw, 3.3rem); font-weight: 700; line-height: 1.1;
|
||
letter-spacing: -0.03em; margin-bottom: 20px;
|
||
}
|
||
.page-index .lede-text p { font-size: 1.15rem; color: var(--text-2); margin-bottom: 28px; max-width: 30rem; }
|
||
.page-index .lede-shot { margin: 0; }
|
||
.page-index .lede-shot img {
|
||
width: 100%; height: auto; display: block;
|
||
border: 1px solid var(--line); border-radius: var(--radius);
|
||
}
|
||
/* --text-3 measured 3.88:1 here, under WCAG AA. Captions carry real information,
|
||
so they take --text-2. */
|
||
.page-index .lede-shot figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--text-2); }
|
||
|
||
/* --- capabilities, grouped into three clusters instead of ten equal cards --- */
|
||
.page-index .caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 36px; }
|
||
.page-index .caps-group h3 {
|
||
font-size: 0.95rem; font-weight: 700; color: var(--text-1);
|
||
padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
|
||
}
|
||
.page-index .caps-list { list-style: none; display: grid; gap: 22px; }
|
||
.page-index .caps-item h4 {
|
||
display: flex; gap: 10px; align-items: flex-start;
|
||
font-size: 1.02rem; font-weight: 600; color: var(--text-1); margin-bottom: 6px;
|
||
}
|
||
.page-index .caps-item h4 svg { flex: 0 0 auto; margin-top: 3px; color: var(--blue-bright); }
|
||
.page-index .caps-item p { color: var(--text-2); font-size: 0.93rem; line-height: 1.65; }
|
||
|
||
/* --- who is behind it --- */
|
||
.page-index .who { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
|
||
.page-index .who-photo { margin: 0; }
|
||
.page-index .who-photo img {
|
||
width: 100%; height: auto; display: block;
|
||
border: 1px solid var(--line); border-radius: var(--radius);
|
||
}
|
||
.page-index .who-text h2 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); font-weight: 700; margin-bottom: 20px; letter-spacing: -0.02em; }
|
||
.page-index .who-text p { color: var(--text-2); font-size: 1.05rem; line-height: 1.75; margin-bottom: 16px; max-width: 38rem; }
|
||
.page-index .who-text p:last-child { margin-bottom: 0; }
|
||
.page-index .who-text strong { color: var(--text-1); font-weight: 600; }
|
||
|
||
/* --- the process, as a flow without number badges --- */
|
||
.page-index .flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
|
||
.page-index .flow-step { padding: 0 20px; border-left: 1px solid var(--line); }
|
||
.page-index .flow-step:first-child { padding-left: 0; border-left: 0; }
|
||
.page-index .flow-step h3 { font-size: 1.02rem; font-weight: 600; color: var(--text-1); margin-bottom: 8px; }
|
||
.page-index .flow-step p { color: var(--text-2); font-size: 0.9rem; line-height: 1.6; }
|
||
|
||
/* --- the comparison that replaces problem-grid + the second why-grid --- */
|
||
.page-index .vs { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
|
||
.page-index .vs-head, .page-index .vs-row { display: grid; grid-template-columns: 1fr 1fr; }
|
||
/* deliberately NOT uppercase + tracked: that is the eyebrow signature taste-skill
|
||
S4.7 rations, and Hungarian accented capitals read badly. */
|
||
.page-index .vs-head > div {
|
||
padding: 16px 24px; font-size: 0.92rem; font-weight: 700; background: var(--bg-2);
|
||
}
|
||
/* The cloud column is the quieter half, but --text-3 measured 3.14:1 (head) and
|
||
3.57:1 (rows) against these backgrounds - under WCAG AA. The two sides are told
|
||
apart by the accent and the bold lead on the right, not by dimming one side
|
||
below the readability floor. */
|
||
.page-index .vs-head > div:first-child { color: var(--text-2); }
|
||
.page-index .vs-head > div:last-child { color: var(--blue-bright); }
|
||
.page-index .vs-row { border-top: 1px solid var(--line-soft); }
|
||
.page-index .vs-row > div { padding: 20px 24px; font-size: 0.97rem; line-height: 1.6; }
|
||
.page-index .vs-row > div:first-child { color: var(--text-2); }
|
||
.page-index .vs-row > div:last-child { color: var(--text-2); border-left: 1px solid var(--line-soft); }
|
||
.page-index .vs-row strong { color: var(--text-1); font-weight: 600; }
|
||
|
||
/* --- the compact band that replaces the two tile walls --- */
|
||
.page-index .band { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
|
||
.page-index .band-item { border-left: 2px solid var(--blue); padding-left: 24px; }
|
||
.page-index .band-item h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; color: var(--text-1); }
|
||
.page-index .band-item p { color: var(--text-2); font-size: 0.95rem; line-height: 1.65; margin-bottom: 16px; }
|
||
.page-index .band-item strong { color: var(--blue-bright); font-weight: 600; }
|
||
|
||
/* --- closed test: two notes plus the limits, which get the weight --- */
|
||
.page-index .test-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
|
||
.page-index .test-note { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--bg-1); }
|
||
.page-index .test-note h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; color: var(--text-1); }
|
||
.page-index .test-note p { color: var(--text-2); font-size: 0.93rem; line-height: 1.65; }
|
||
.page-index .limits {
|
||
border: 1px solid var(--warn); border-radius: var(--radius);
|
||
background: var(--warn-dim); padding: 24px 28px;
|
||
}
|
||
.page-index .limits h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-1); margin-bottom: 12px; }
|
||
.page-index .limits p { color: var(--text-2); font-size: 0.95rem; line-height: 1.7; }
|
||
.page-index .limits strong { color: var(--text-1); font-weight: 600; }
|
||
|
||
/* --- the 3-2-1 figures, off the mono font (R6b: 13 characters were loading 31 KB) --- */
|
||
.page-index .rule-num {
|
||
font-family: var(--font-ui); font-size: 2rem; font-weight: 700;
|
||
min-width: 50px; color: var(--blue-bright);
|
||
}
|
||
|
||
/* --- one closing call to action --- */
|
||
.page-index .close-cta { text-align: center; }
|
||
.page-index .close-cta p { font-size: 1.05rem; color: var(--text-2); margin-bottom: 24px; }
|
||
.page-index .close-cta p strong { color: var(--text-1); font-weight: 600; }
|
||
|
||
@media (max-width: 900px) {
|
||
.page-index .lede { padding: 104px 0 56px; }
|
||
.page-index .lede-grid { grid-template-columns: 1fr; gap: 36px; }
|
||
.page-index .lede-text p { max-width: none; }
|
||
.page-index .caps { grid-template-columns: 1fr; gap: 36px; }
|
||
.page-index .who { grid-template-columns: 1fr; gap: 28px; }
|
||
.page-index .who-photo { max-width: 260px; }
|
||
.page-index .flow { grid-template-columns: 1fr; gap: 20px; }
|
||
.page-index .flow-step { padding: 0 0 0 20px; border-left: 1px solid var(--line); }
|
||
.page-index .flow-step:first-child { padding-left: 20px; border-left: 1px solid var(--line); }
|
||
.page-index .band { grid-template-columns: 1fr; }
|
||
.page-index .test-grid { grid-template-columns: 1fr; }
|
||
}
|
||
@media (max-width: 600px) {
|
||
.page-index .vs-head > div, .page-index .vs-row > div { padding: 14px 16px; font-size: 0.9rem; }
|
||
.page-index .limits { padding: 20px; }
|
||
}
|
||
.page-index .close-cta { text-align: center; margin-top: 40px; }
|