admin
02be8ea7f0
gates / gates (push) Successful in 6m12s
A page-by-page review of the live site (1440px and 390px) found six defects and
two editorial questions. The operator answered three questions; the answers and
the evidence are in REPORT-review-2026-10-12.md.
Fixed:
- The contact form showed its consent error before any submit, on both pages:
#privacyError sits outside any .form-group and the hide rule was scoped to
.form-group. Scoped to the page. Checked: load (none) -> submit unticked
(shown) -> tick (gone), with no message sent.
- The consent checkbox is the site's own control now: 24px box, keyboard focus
ring, and a second <label for="privacy"> at 44x44 round it for touch.
- The contact page promised a reply within 24 hours while /feltetelek 1.1 §4
promises no reply time. Now 1-2 days usually, and no promise during the test.
- sitemap.xml was missing /szolgaltatasok and /en/services: 18 -> 20 URLs.
- The pre-shell mobile-menu script still ran on 20 pages and logged
"[mobile-menu] Missing elements" on every one. Removed.
- The sidebar's tester button was btn-outline while the hero's was btn-primary.
- The home page's "Mit tud a doboz ma?" was three bare links; each card now
carries 2-3 of the services page's own items, word for word.
- A plain Facebook link in the footer of all 22 pages. No script, widget or
pixel: the only external hosts any page refers to are still felhom.eu and
stats.felhom.eu.
Voice (operator ruling: "I" everywhere a person speaks): contact, tester and FAQ
pages in both languages, and the home and services pages that repeat the same
promises. An inclusive "we" (you and I, talking) stays plural, and the legal
texts are untouched. Each FAQ answer exists twice (JSON-LD + visible) and gate 18
holds them equal - it caught the five answers whose markup split the sentence.
Hero clip rebuilt: Immich first, so the poster is a wall of real photographs;
the Jellyfin scene starts after the demo's library wall (eleven pieces of poster
art whose licence cannot be quoted from a first-party source); 1.3s of blank
screen cut from the OnlyOffice scene. The film that plays, Caminandes 3:
Llamigos, is CC BY per Blender's own video platform ("licence": {"id": 1,
"label": "Attribution"}) - NOT public domain as website/CHANGELOG.md said
yesterday. That sentence is corrected in place and the film is credited under
the hero caption.
New gate 24: sitemap.xml lists every public page once, with its twin's hreflang
pair, and lists nothing else. Decoy: site/sitemap-missing-page, the exact shape
the reviewer found by hand.
site.css ?v=30; hero clip and poster ?v=2.
2660 lines
112 KiB
CSS
2660 lines
112 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 ---
|
||
SCOPED 2026-10-12: this is the OLD chrome's top bar, and as a bare element selector it was
|
||
still reaching <nav class="sidebar">. `.sidebar` declares neither padding, nor top/left/right,
|
||
nor z-index, nor backdrop-filter - so all of those leaked in, and the 20px of padding showed as
|
||
dead space under the language globe (operator, 2026-10-12). Gate 22 could not see it: it
|
||
compares selectors present in BOTH stylesheets, and `nav` is not a selector shell.css uses. */
|
||
body:not(.shell) 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;
|
||
}
|
||
body:not(.shell) 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; }
|
||
body:not(.shell) .logo-mark { height: 54px; width: auto; }
|
||
body:not(.shell) .logo-word { height: 25px; width: auto; }
|
||
@media (max-width: 600px) { .logo-mark { height: 44px; } body:not(.shell) .logo-word { height: 21px; } }
|
||
body:not(.shell) .nav-links { display: flex; gap: 32px; list-style: none; }
|
||
body:not(.shell) .nav-links a {
|
||
color: var(--text-2);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
font-size: 0.95rem;
|
||
transition: color 0.2s ease;
|
||
}
|
||
body:not(.shell) .nav-links a:hover, body:not(.shell) .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; }
|
||
body:not(.shell) .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; }
|
||
body:not(.shell) .nav-links .lang-globe-item:hover { color: var(--blue-bright); }
|
||
body:not(.shell) .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 --- */
|
||
/* R-930 (2026-10-11, operator's choice of the three offered): white on --blue measures
|
||
4.01:1, under WCAG AA's 4.5:1 floor for body text. At >=18.66px AND >=700 weight the
|
||
label is "large text", where the floor is 3:1 and 4.01 passes. 1.2rem = 19.2px.
|
||
Chosen over darkening --blue, which is shared with the hub and controller UIs.
|
||
Horizontal padding trimmed 32->26px so the longest label ("Jelentkezem tesztelonek")
|
||
still fits on ONE line at 390px; measured, not assumed. */
|
||
.cta-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: var(--blue);
|
||
color: #fff;
|
||
padding: 15px 26px;
|
||
border: 1px solid var(--blue);
|
||
border-radius: var(--radius);
|
||
text-decoration: none;
|
||
font-weight: 700;
|
||
font-size: 1.2rem;
|
||
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;
|
||
}
|
||
body:not(.shell) .hamburger.is-active .hamburger-line:nth-child(1) { transform: translateY(9px) rotate(45deg); }
|
||
body:not(.shell) .hamburger.is-active .hamburger-line:nth-child(2) { opacity: 0; }
|
||
body:not(.shell) .hamburger.is-active .hamburger-line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
|
||
body:not(.shell) .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;
|
||
}
|
||
body:not(.shell) .mobile-overlay.is-visible { opacity: 1; }
|
||
|
||
@media (max-width: 900px) {
|
||
.hamburger { display: block; }
|
||
body:not(.shell) .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;
|
||
}
|
||
body:not(.shell) .nav-links.is-open { right: 0; }
|
||
body:not(.shell) .nav-links li { border-bottom: 1px solid var(--line-soft); }
|
||
body:not(.shell) .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; }
|
||
body:not(.shell) .nav-links .lang-globe-menu li { border-bottom: none; }
|
||
body:not(.shell) .nav-links .lang-globe-item { padding: 10px 0 10px 12px; font-size: 1.05rem; }
|
||
body:not(.shell) .mobile-overlay { display: block; pointer-events: none; }
|
||
body:not(.shell) .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) {
|
||
body:not(.shell) nav { position: static; }
|
||
body:not(.shell) nav .container { flex-wrap: wrap; row-gap: 12px; }
|
||
body:not(.shell) .hamburger { display: none; }
|
||
body:not(.shell) .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;
|
||
}
|
||
body:not(.shell) .nav-links li { border-bottom: none; }
|
||
body:not(.shell) .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);
|
||
|
||
}
|
||
/* The consent error sits OUTSIDE any .form-group (it belongs to the whole checkbox row),
|
||
so a hide rule scoped to .form-group never reached it and it was on screen from the first
|
||
paint - the reviewer saw it on the live page, 2026-10-12. Scoped to the page instead. */
|
||
.page-kapcsolat .error-message {
|
||
color: var(--crit);
|
||
font-size: 0.8rem;
|
||
margin-top: 6px;
|
||
display: none;
|
||
}
|
||
.page-kapcsolat .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;
|
||
}
|
||
/* The consent box was the browser's own 18px control. It is now the site's: a 24px box that
|
||
takes the design system's border and blue, a focus ring that is visible from the keyboard,
|
||
and - because a 24px box is below every touch guideline - a second <label for="privacy">
|
||
wrapped round it, 44x44, pulled back into place with negative margins so the layout does not
|
||
move. A label toggles the control it names, so the whole 44px square is tappable; the text
|
||
label beside it still works too. */
|
||
.page-kapcsolat .cb-hit {
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
width: 44px; height: 44px; margin: -10px -10px -10px -10px;
|
||
flex-shrink: 0; cursor: pointer;
|
||
}
|
||
.page-kapcsolat .checkbox-group input[type="checkbox"] {
|
||
appearance: none; -webkit-appearance: none;
|
||
width: 24px;
|
||
height: 24px;
|
||
margin: 0;
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
background: var(--bg-1);
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
}
|
||
.page-kapcsolat .checkbox-group input[type="checkbox"]:hover {
|
||
border-color: var(--blue);
|
||
}
|
||
.page-kapcsolat .checkbox-group input[type="checkbox"]:checked {
|
||
background-color: var(--blue);
|
||
border-color: var(--blue);
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
.page-kapcsolat .checkbox-group input[type="checkbox"]:focus-visible {
|
||
outline: 2px solid var(--blue-bright);
|
||
outline-offset: 2px;
|
||
}
|
||
.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.
|
||
UNSCOPED 2026-10-12: the block moved off the home page to /szolgaltatasok and
|
||
/en/services, which share a body class with each other and not with the home. --- */
|
||
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 36px; }
|
||
.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);
|
||
}
|
||
.caps-list { list-style: none; display: grid; gap: 22px; }
|
||
.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;
|
||
}
|
||
.caps-item h4 svg { flex: 0 0 auto; margin-top: 3px; color: var(--blue-bright); }
|
||
.caps-item p { color: var(--text-2); font-size: 0.93rem; line-height: 1.65; }
|
||
|
||
/* --- who is behind it: SHARED, not page-scoped. It lives on /kapcsolat and
|
||
/en/contact, and on the home page only as the compact .who-mini row below. */
|
||
.who { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
|
||
.who-photo { margin: 0; }
|
||
.who-photo img {
|
||
width: 100%; height: auto; display: block;
|
||
border: 1px solid var(--line); border-radius: var(--radius);
|
||
}
|
||
.who-text h2 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); font-weight: 700; margin-bottom: 20px; letter-spacing: -0.02em; }
|
||
.who-text p { color: var(--text-2); font-size: 1.05rem; line-height: 1.75; margin-bottom: 16px; max-width: 38rem; }
|
||
.who-text p:last-child { margin-bottom: 0; }
|
||
.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; }
|
||
.caps { grid-template-columns: 1fr; gap: 36px; }
|
||
.who { grid-template-columns: 1fr; gap: 28px; }
|
||
.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; }
|
||
|
||
/* --- the compact trace on the home page: a face and one line at the point where
|
||
someone decides to write, linking to the full block on the contact page. The
|
||
audit's R-11 ("nobody is behind it") is what this keeps fixed. --- */
|
||
/* flex, NOT inline-flex: .close-cta is text-align:center, so an inline-flex row
|
||
flowed onto the same line as the button instead of sitting under it. */
|
||
.page-index .who-mini {
|
||
display: flex; align-items: center; gap: 16px; text-align: left;
|
||
max-width: 34rem; margin: 36px auto 0;
|
||
padding-top: 28px; border-top: 1px solid var(--line);
|
||
}
|
||
.page-index .who-mini img {
|
||
width: 56px; height: 70px; display: block; flex: 0 0 auto;
|
||
border: 1px solid var(--line); border-radius: var(--radius);
|
||
}
|
||
.page-index .who-mini p { margin: 0; font-size: 0.95rem; color: var(--text-2); max-width: 30rem; }
|
||
.page-index .who-mini strong { color: var(--text-1); font-weight: 600; }
|
||
.page-index .who-mini a { color: var(--blue-bright); text-decoration: none; white-space: nowrap; }
|
||
.page-index .who-mini a:hover, .page-index .who-mini a:focus-visible { text-decoration: underline; }
|
||
@media (max-width: 600px) {
|
||
.page-index .who-mini { flex-direction: column; text-align: center; gap: 12px; }
|
||
.page-index .who-mini p { text-align: center; }
|
||
}
|
||
|
||
|
||
/* ================= M3 shell pages - 2026-10-11 =================
|
||
Additions only, all new class names. These are the WEBSITE's own additions to the
|
||
controller's shell (assets/shell.css, which stays a pure copy): the wordmark under
|
||
the sidebar logo, the tester button in the sidebar, the hero row, and the sample
|
||
badge. Nothing here exists in the controller, so nothing here has to keep in step
|
||
with it. See documentation/design/design-system.md "Shell". */
|
||
|
||
/* --- the website's own additions to the sidebar --- */
|
||
.sidebar-logo-link { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||
.sidebar-word { height: 16px; width: auto; display: block; }
|
||
.sidebar-cta { width: 100%; justify-content: center; margin-bottom: 1rem; }
|
||
|
||
/* --- every invented value on a page wears this --- */
|
||
.sample {
|
||
font-family: var(--font-data); font-size: .68rem; text-transform: uppercase;
|
||
letter-spacing: .04em; color: var(--warn);
|
||
border: 1px solid var(--warn); background: var(--warn-dim);
|
||
padding: .05rem .3rem; border-radius: var(--radius); white-space: nowrap;
|
||
}
|
||
|
||
/* --- section rhythm inside the shell's content column --- */
|
||
.shell-section { margin-bottom: 3.5rem; }
|
||
.shell-section:last-child { margin-bottom: 1rem; }
|
||
/* --- the home page's sections ran into one another --------------------------
|
||
One long column of headings and cards with nothing but air between the
|
||
sections: the operator read it as one block (2026-10-12). A hairline in the
|
||
design system's own --line, with equal air above and below it, so the rule
|
||
sits centred in the gap instead of hugging the heading under it. The first
|
||
one also separates the hero from the page. Only the home page: every other
|
||
page is a single run of one kind of thing. */
|
||
.shell.page-index .shell-section { margin-bottom: 2.75rem; padding-top: 2.75rem; border-top: 1px solid var(--line); }
|
||
.shell .sec-head { max-width: 46rem; margin-bottom: 1.75rem; }
|
||
.shell .sec-head h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: .4rem; }
|
||
.shell .sec-head p { color: var(--text-2); font-size: 1rem; }
|
||
|
||
/* --- the hero row: copy on the left, the dashboard window on the right --- */
|
||
.hero-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.5rem; align-items: center; margin-bottom: 3.5rem; }
|
||
.hero-copy h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; margin-bottom: .75rem; }
|
||
.hero-copy p { color: var(--text-2); font-size: 1.05rem; margin-bottom: 1.5rem; max-width: 34ch; }
|
||
.hero-logo { display: flex; justify-content: center; }
|
||
.hero-logo img { max-width: 340px; width: 100%; height: auto; }
|
||
.launch-grid--mini { grid-template-columns: repeat(4, 1fr); gap: .9rem; }
|
||
|
||
@media (max-width: 900px) {
|
||
.hero-row { grid-template-columns: 1fr; gap: 1.75rem; }
|
||
.hero-copy p { max-width: none; }
|
||
.launch-grid--mini { grid-template-columns: repeat(4, 1fr); }
|
||
}
|
||
@media (max-width: 600px) {
|
||
.launch-grid--mini { grid-template-columns: repeat(3, 1fr); }
|
||
.shell-section { margin-bottom: 2.5rem; }
|
||
}
|
||
|
||
/* --- the six declarations that leak into the shell, neutralised ---------------
|
||
shell.css loads after site.css, but "later wins" is per PROPERTY, not per rule.
|
||
Where site.css declares something the controller's rule does not, the website's
|
||
value survives inside the shell. Measured 2026-10-11: exactly six such
|
||
declarations across three selectors. They are reset HERE, in the website's own
|
||
file, so shell.css stays a verbatim copy.
|
||
.nav-links display:flex + gap:32px -> the sidebar menu rendered as a
|
||
horizontal row spilling across the content column
|
||
.lang-globe-menu top + right -> fought the controller's
|
||
bottom/left, so the globe opened the wrong way. The
|
||
controller's own rule then CENTRES the menu on the
|
||
button (left: 50% + translateX(-50%)); on the website
|
||
the globe sits at the far left of the sidebar footer,
|
||
so half the menu fell off the left edge of the window
|
||
and its labels were cut (operator, 2026-10-12). It is
|
||
anchored to the button's left edge here and opens
|
||
rightwards, into the sidebar it belongs to.
|
||
.page-header padding + text-align -> the website's centred subpage
|
||
header fought the controller's left-aligned flex row */
|
||
.shell .sidebar .nav-links { display: block; gap: 0; }
|
||
.shell .sidebar .lang-globe-menu { top: auto; right: auto; left: 0; transform: none; }
|
||
.shell .page-header { padding: 0 0 1.25rem; text-align: left; }
|
||
/* one heading on a shell page: .page-header carries the h1 (today's indexed headline),
|
||
and the hero row below it is the lede sentence plus the button. */
|
||
.shell .page-header h1 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; }
|
||
.hero-lede { color: var(--text-1); font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.55; margin-bottom: 1.5rem; max-width: 40ch; }
|
||
|
||
/* --- WCAG AA on the copied buttons and labels (measured 2026-10-11) -----------
|
||
Two rules copied from the controller fail AA at the website's sizes:
|
||
.btn-primary white on --blue = 4.01:1 at 13.6px/600, floor 4.5
|
||
.nav-group-label --text-3 on --bg-1 = 3.14:1, floor 4.5
|
||
This is R-930 arriving a second time: fixing .cta-button on the website did not
|
||
fix the CONTROLLER's button, and the shell imports the controller's button.
|
||
Same remedy the operator chose for R-930: >=18.66px at >=700 makes the label
|
||
"large text", where the floor is 3:1 and 4.01 clears it, without touching
|
||
--blue (shared with the hub and controller UIs).
|
||
The sidebar's own call to action stays an OUTLINE button instead - blue text on
|
||
transparent passes comfortably, and a 19.2px filled button does not fit a 240px
|
||
sidebar without wrapping. Measured both ways.
|
||
The controller has the same two defects on its own surface; filed, not fixed
|
||
here (that repo is read-only this session). */
|
||
.shell .btn-primary { font-size: 1.2rem; font-weight: 700; }
|
||
.shell .nav-group-label { color: var(--text-2); }
|
||
/* 224px, not 240: when the Alkalmazasok group is open the sidebar gains a 16px scrollbar,
|
||
and at .95rem the Hungarian label wrapped to two lines there. Measured, then sized. */
|
||
.shell .sidebar-cta { font-size: .86rem; font-weight: 600; padding-left: .6rem; padding-right: .6rem; }
|
||
|
||
/* --- long unbreakable strings must not make a phone scroll sideways ----------
|
||
Measured 2026-10-11 at 390px, on the LIVE pages (so this is a pre-existing
|
||
defect, not something the shell introduced):
|
||
/letoltes scrollWidth 609 - a 64-character SHA-256 inside <code>
|
||
/adatkezeles scrollWidth 478 - a long facebook.com legal URL as link text
|
||
`anywhere` only changes where the line BREAKS; selecting and copying still
|
||
yields the whole unbroken string. The legal pages' words are untouched. */
|
||
code { overflow-wrap: anywhere; }
|
||
.page-adatkezeles a, .page-feltetelek a { overflow-wrap: anywhere; }
|
||
|
||
/* ============================================================================
|
||
Operator's tweaks, 2026-10-12 (reported from his own screens)
|
||
============================================================================ */
|
||
|
||
/* --- 1. the sidebar logo: less air, and the wordmark at the logo's own ratio ---
|
||
Measured on assets/logo.png (645x408), which is the original lockup:
|
||
the mark occupies x 76..568 (492 wide), the wordmark x 8..639 (631 wide) -
|
||
so in the real logo the TEXT IS WIDER THAN THE MARK, by 1.28x. The shell
|
||
shipped a 140px mark over a 16px-tall wordmark, which is 94px wide: 0.67x,
|
||
less than half the intended size. 112px mark + 25px wordmark keeps 1.29x and
|
||
fits the 192px of sidebar inside its padding. The header also lost 28px of
|
||
vertical padding. */
|
||
.shell .sidebar-header { padding: 1rem 1.5rem .9rem; }
|
||
.shell .sidebar-logo { width: 112px; margin: 0 auto .4rem; }
|
||
.shell .sidebar-word { height: 25px; }
|
||
|
||
/* --- 2. scrollbars: the page's own, not the platform default ---------------
|
||
The VIEWPORT's scrollbar is painted from <html>: a `body.shell ::-webkit-...`
|
||
rule only reaches scrollers INSIDE the page (the sidebar, the drawer), which
|
||
is why the first attempt left the big one on the right untouched. Firefox
|
||
takes the two standard properties, Chrome and Safari the pseudo-elements, and
|
||
neither inherits - so both are declared, for both scopes. */
|
||
html { scrollbar-width: thin; scrollbar-color: var(--line) var(--bg-1); }
|
||
.shell .sidebar, .shell .content { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
|
||
html::-webkit-scrollbar, .shell ::-webkit-scrollbar { width: 11px; height: 11px; }
|
||
html::-webkit-scrollbar-track { background: var(--bg-1); }
|
||
.shell ::-webkit-scrollbar-track { background: transparent; }
|
||
html::-webkit-scrollbar-thumb, .shell ::-webkit-scrollbar-thumb {
|
||
background: var(--line); border-radius: var(--radius);
|
||
border: 2px solid transparent; background-clip: content-box;
|
||
}
|
||
html::-webkit-scrollbar-thumb:hover, .shell ::-webkit-scrollbar-thumb:hover {
|
||
background: var(--text-3); background-clip: content-box;
|
||
}
|
||
html::-webkit-scrollbar-corner, .shell ::-webkit-scrollbar-corner { background: transparent; }
|
||
|
||
/* --- 3. the home headline, back to where and what it was on the old site ----
|
||
Before M3 the home had a two-column hero: headline, one sentence and the
|
||
button on the left, the picture on the right, at clamp(2.5rem, 5vw, 3.5rem)
|
||
with the second line in --blue-bright. M3 moved it into .page-header, which
|
||
is the INNER pages' heading (2.1rem, above the content column) - so the
|
||
headline shrank and the badge ended up beside it. It is back in the hero
|
||
column, and only the home page has it. */
|
||
.shell.page-index .hero-copy h1 {
|
||
font-size: clamp(2.1rem, 4.4vw, 3.2rem);
|
||
font-weight: 700; line-height: 1.1; letter-spacing: -.03em;
|
||
margin-bottom: .6rem;
|
||
}
|
||
.shell.page-index .hero-copy .domain-badge { display: inline-block; margin-bottom: 1.1rem; }
|
||
.shell.page-index .hero-copy .hero-lede { max-width: 38ch; }
|
||
|
||
/* --- 6. the lede above a section box ---------------------------------------
|
||
.page-lede exists in the markup of 16 pages and had NO rule at all, so it
|
||
rendered as a bare paragraph the full width of the content column, hard
|
||
against the box beneath it. It now shares the box's 760px measure and sits
|
||
over its centre. */
|
||
.shell .page-lede {
|
||
max-width: 760px; margin: 0 auto 28px; text-align: center;
|
||
font-size: 1.05rem; line-height: 1.6; color: var(--text-2);
|
||
}
|
||
@media (max-width: 700px) {
|
||
.shell .page-lede { text-align: left; }
|
||
}
|
||
|
||
/* --- the home's pointer to /szolgaltatasok: the three group names, nothing invented --- */
|
||
/* The teaser was three bare links: the home page's biggest section said nothing
|
||
about what the box does (operator's reviewer, 2026-10-12). Each card now names
|
||
the service page's own items under its title - the card is the box, the link is
|
||
the title inside it, so the points sit in the same frame. */
|
||
.shell .caps-teaser {
|
||
list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
|
||
gap: 14px; margin-bottom: 1.5rem;
|
||
}
|
||
.shell .caps-teaser > li {
|
||
padding: .85rem 1rem; border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
transition: border-color .2s ease;
|
||
}
|
||
.shell .caps-teaser > li:hover { border-color: var(--blue); }
|
||
.shell .caps-teaser a {
|
||
display: block; color: var(--text-1); text-decoration: none;
|
||
font-weight: 600; font-size: .95rem; line-height: 1.35;
|
||
transition: color .2s ease;
|
||
}
|
||
.shell .caps-teaser a:hover { color: var(--blue-bright); }
|
||
.shell .caps-teaser ul { list-style: none; margin: .5rem 0 0; padding: 0; }
|
||
.shell .caps-teaser ul li {
|
||
position: relative; padding-left: .9rem;
|
||
color: var(--text-2); font-size: .88rem; line-height: 1.55;
|
||
}
|
||
.shell .caps-teaser ul li::before {
|
||
content: ""; position: absolute; left: 0; top: .62em;
|
||
width: 5px; height: 5px; border-radius: var(--radius); background: var(--blue);
|
||
}
|
||
@media (max-width: 760px) {
|
||
.shell .caps-teaser { grid-template-columns: 1fr; gap: 10px; }
|
||
}
|
||
|
||
/* --- the hero's picture: a laptop whose SCREEN is a clip of real apps --------
|
||
The frame is the operator's own supplied render with the screen cut to
|
||
transparency (hero-laptop-frame.webp); behind it sits hero-clip.mp4/.webm,
|
||
six apps recorded by the operator, assembled by scripts/make_hero_clip.py.
|
||
What a visitor sees is real software, not a drawing of it.
|
||
NO autoplay attribute on purpose: the page's own script starts the clip when
|
||
it scrolls into view and never starts it under prefers-reduced-motion, so a
|
||
visitor who asked for less movement is left with the poster frame.
|
||
The still composite (dashboard-laptop-<lang>.webp) is kept but no longer
|
||
referenced - it is the fallback if the clip is ever pulled. */
|
||
.hero-shot { margin: 0; }
|
||
.hero-laptop { position: relative; max-width: 620px; margin-inline: auto; }
|
||
.hero-shot img {
|
||
display: block; width: 100%; height: auto;
|
||
position: relative; z-index: 2; pointer-events: none;
|
||
}
|
||
/* The hole in the frame, measured off its alpha channel: the clip is rendered to
|
||
exactly this shape (904x556, 1.626:1) by make_hero_clip.py, so object-fit has
|
||
nothing to crop. z-index keeps the bezel, the glare and the keyboard in FRONT. */
|
||
.hero-screen {
|
||
position: absolute; z-index: 1; display: block;
|
||
left: 11.041%; top: 12.345%; width: 79.817%; height: 64.305%;
|
||
object-fit: cover; background: var(--bg-2, #101826); border: 0;
|
||
}
|
||
.hero-shot figcaption {
|
||
margin-top: .4rem; text-align: center;
|
||
font-size: .85rem; color: var(--text-2);
|
||
}
|
||
/* CC BY asks for the title, the author and the licence where it is reasonable to
|
||
give them, so the one film that plays inside the clip is credited under the
|
||
caption rather than in a file nobody opens. */
|
||
.hero-credit { display: block; margin-top: .15rem; font-size: .78rem; color: var(--text-3); }
|
||
.hero-credit a { color: inherit; text-decoration: underline; }
|
||
.hero-credit a:hover { color: var(--blue-bright); }
|
||
@media (max-width: 900px) {
|
||
.hero-laptop { max-width: 520px; }
|
||
}
|
||
|
||
/* --- an anchored target must not land under the sticky phone top bar -------- */
|
||
.shell [id] { scroll-margin-top: 1rem; }
|
||
@media (max-width: 768px) {
|
||
.shell [id] { scroll-margin-top: 4.25rem; }
|
||
}
|
||
|
||
/* The services page's lede heads three columns of its own, not a centred box: left there. */
|
||
.page-szolgaltatasok .page-lede { text-align: left; margin-left: 0; max-width: 52ch; }
|
||
|
||
/* --- the comparison table and the pair of cards under it were touching --------
|
||
`.vs` ends on its own border and `.band` begins with a 2px blue rule, so with
|
||
no space between them they read as one block (operator, 2026-10-12). */
|
||
.page-index .band { margin-top: 2rem; }
|
||
|
||
/* --- the language globe sat in a 16+20px well -------------------------------
|
||
The 20px was the leak above; this trims the footer's own padding so the globe
|
||
has the same air as the menu items over it (operator, 2026-10-12). */
|
||
.shell .sidebar-footer { padding: .55rem 1.5rem .5rem; }
|