/* =========================================================================
DominoDomain.hu — Arculati stíluslap (brand.css)
-------------------------------------------------------------------------
Ez a fájl az oldal egységes arculati elemeit (színek, betűtípus,
újrafelhasználható elemek) tartalmazza, hogy a későbbi aloldalakon,
landing page-eken is konzisztensen felhasználhatók legyenek.
Használat:
Előfeltétel a -ben (Google Font betöltése):
========================================================================= */
/* -------------------------------------------------------------------------
1) Arculati színpaletta és alapváltozók
------------------------------------------------------------------------- */
:root{
/* Márkaszínek — a logóból pixel-pontosan lekérdezve */
--brand-navy-deep: #0b1f33; /* háttér — legsötétebb árnyalat */
--brand-navy: #0f3054; /* háttér — középső árnyalat */
--brand-slate: #3b4a5e; /* háttér — legvilágosabb árnyalat */
--brand-icon-navy: #14324d; /* a logó sötét "D" ikonjának színe */
--brand-teal: #1e9e8c; /* a logó teal "D" ikonjának / szövegének színe */
--brand-teal-light: #6fd6bd; /* teal kiemelő / hover árnyalat */
--brand-silver: #c0c0c0; /* ezüst — másodlagos szöveg sötét háttéren */
--brand-blue-silver:#7f9fc2; /* kékes-ezüst — piktogram hátterek árnyalata */
--brand-fog: #c9d2dc; /* halvány szürkéskék — másodlagos szöveg */
--brand-paper: #ffffff; /* fehér — kártyák, logó alap */
/* Tipográfia */
--brand-font: 'Poppins', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
/* Fejléc háttere — a menü háttere mindig ezt követi */
--brand-header-bg-dark: rgba(11,31,51,0.7);
--brand-header-bg-light: rgba(255,255,255,0.7);
}
/* -------------------------------------------------------------------------
2) Alap beállítások
------------------------------------------------------------------------- */
.brand-root, body.brand-root{
font-family: var(--brand-font);
}
/* -------------------------------------------------------------------------
3) Háttér — sötétkék-szürke gradiens + halvány hálórajzolat
------------------------------------------------------------------------- */
.brand-bg{
background:
radial-gradient(circle at 15% 20%, rgba(34,166,138,0.10), transparent 45%),
radial-gradient(circle at 85% 80%, rgba(34,166,138,0.08), transparent 50%),
linear-gradient(160deg, var(--brand-navy-deep) 0%, var(--brand-navy) 55%, var(--brand-slate) 100%);
}
/* Rögzített, teljes képernyős háttérréteg — nem görgethető, mindig fixen a
viewport mögött marad. Használat:
a body elején, önálló elemként. */
.brand-bg-layer{
position:fixed;
inset:0;
z-index:-2;
}
/* Halvány hálórajzolat overlay, a logó "hálózat" motívumára utalva.
Helyezd egy fix pozíciós elemre a háttér fölé. */
.brand-grid-overlay{
position:fixed;
inset:0;
z-index:-1;
background-image:
linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
background-size:64px 64px;
pointer-events:none;
}
/* -------------------------------------------------------------------------
4) Szövegszín segédosztályok
------------------------------------------------------------------------- */
.brand-text-navy{ color:var(--brand-icon-navy); }
.brand-text-teal{ color:var(--brand-teal); }
.brand-text-teal-light{ color:var(--brand-teal-light); }
.brand-text-silver{ color:var(--brand-silver); }
.brand-text-fog{ color:var(--brand-fog); }
/* -------------------------------------------------------------------------
5b) Reszponzív méretezési rétegek — négy, EGYMÁST KIZÁRÓ tartomány:
monitor (min-width:1200px) / laptop (901–1199px) / tablet (601–900px) /
telefon (max-width:600px).
Azért ebben a formában, mert ha átfedő (pl. csak max-width alapú)
tartományokat használnánk, a CSS cascade a fájlon belüli SORRENDTŐL
függne, ami könnyen hibás, nehezen karbantartható eredményhez vezetne.
Mivel a négy tartomány kölcsönösen kizárja egymást, egy adott
képernyőméreten mindig pontosan egy blokk szabályai érvényesülnek,
a fájlon belüli elhelyezkedéstől függetlenül.
------------------------------------------------------------------------- */
/* --- Monitor (≥1200px) --- */
@media (min-width:1200px){
.brand-navbar .navbar-brand img{
height:76px;
}
.brand-side-menu{
padding:18px 38px;
}
.brand-side-menu a,
.brand-side-menu-link-inline{
font-size:15px;
}
.brand-side-submenu a{
font-size:13.5px;
}
.brand-footer-links{
right:22px;
gap:10px;
}
.brand-footer-links a{
width:48px;
height:48px;
}
.brand-footer-links a svg{
width:25px;
height:25px;
}
.brand-footer .brand-footer-text{
padding-left:110px;
padding-right:80px;
}
}
/* --- Laptop / Notebook (901–1199px) --- */
@media (min-width:901px) and (max-width:1199px){
.brand-navbar .navbar-brand img{
height:68px;
}
.brand-side-menu{
padding:16px 33px;
}
.brand-side-menu a,
.brand-side-menu-link-inline{
font-size:14px;
}
.brand-side-submenu a{
font-size:12.5px;
}
.brand-footer-links{
right:18px;
gap:8px;
}
.brand-footer-links a{
width:43px;
height:43px;
}
.brand-footer-links a svg{
width:22px;
height:22px;
}
.brand-footer .brand-footer-text{
padding-left:104px;
padding-right:70px;
}
}
/* --- Tablet (601–900px) --- */
@media (min-width:601px) and (max-width:900px){
.brand-navbar .navbar-brand img{
height:56px;
}
.brand-side-menu{
padding:14px 28px;
}
.brand-side-menu a,
.brand-side-menu-link-inline{
font-size:13px;
}
.brand-side-submenu a{
font-size:12px;
}
.brand-footer-links{
right:14px;
gap:6px;
}
.brand-footer-links a{
width:34px;
height:34px;
}
.brand-footer-links a svg{
width:17px;
height:17px;
}
.brand-footer .brand-footer-text{
padding-left:96px;
padding-right:56px;
}
}
/* --- Mobil (≤600px) — a méretek a lentebbi, elem-specifikus szakaszokban
(5, 6, 7, 8, 9b) találhatók a saját @media (max-width:600px) blokkjukban,
a navbar logó mobil mérete pedig itt: --- */
@media (max-width:600px){
.brand-navbar .navbar-brand img{
height:46px;
}
}
/* -------------------------------------------------------------------------
7) Lábléc
------------------------------------------------------------------------- */
.brand-footer{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:5;
font-size:12px;
font-weight:500;
letter-spacing:0.08em;
color:var(--brand-silver);
}
.brand-footer .brand-footer-text{
display:inline-block;
vertical-align:middle;
}
@media (max-width:600px){
.brand-footer{
font-size:10px;
letter-spacing:0.02em;
line-height:1.6;
padding-left:0;
padding-right:0;
}
.brand-footer .brand-footer-text{
padding-left:88px;
padding-right:46px;
}
.brand-footer .brand-theme-toggle{
width:28px;
height:28px;
}
.brand-footer .brand-theme-toggle svg{
width:15px;
height:15px;
}
}
/* -------------------------------------------------------------------------
8) Lábléc jobb oldali piktogramjai (Webmail / ISPConfig / phpMyAdmin / Support)
------------------------------------------------------------------------- */
.brand-footer-links{
position:absolute;
bottom:10px;
display:flex;
flex-direction:column;
align-items:center;
}
.brand-footer-links a{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:50%;
border:1px solid rgba(127,159,194,0.4);
background-color:rgba(127,159,194,0.2);
color:var(--brand-teal-light);
text-decoration:none;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.brand-footer-links a:hover,
.brand-footer-links a:focus-visible{
background-color:rgba(127,159,194,0.35);
transform:translateY(-1px);
}
.brand-footer-links a:focus-visible{
outline:none;
box-shadow: 0 0 0 0.2rem rgba(30,158,140,0.4);
}
.brand-footer-links a svg{
display:block;
}
@media (max-width:600px){
.brand-footer-links{
right:8px;
gap:4px;
}
.brand-footer-links a{
width:24px;
height:24px;
}
.brand-footer-links a svg{
width:12px;
height:12px;
}
}
html.theme-light .brand-footer-links a{
border-color:rgba(74,102,128,0.35);
background-color:rgba(74,102,128,0.12);
color:var(--brand-teal);
}
html.theme-light .brand-footer-links a:hover,
html.theme-light .brand-footer-links a:focus-visible{
background-color:rgba(74,102,128,0.2);
}
/* -------------------------------------------------------------------------
9) Fejléc / navbar — átlátszó, sötétített sáv (csak a logó)
------------------------------------------------------------------------- */
.brand-navbar{
background-color:var(--brand-header-bg-dark);
backdrop-filter:blur(3px);
-webkit-backdrop-filter:blur(3px);
border-bottom:1px solid rgba(255,255,255,0.08);
padding-top:12px;
padding-bottom:12px;
}
.brand-navbar .navbar-brand img{
width:auto;
}
.brand-navbar-logo-chip{
display:inline-flex;
align-items:center;
background-color:var(--brand-paper);
border-radius:8px;
padding:5px 9px;
line-height:0;
}
/* -------------------------------------------------------------------------
9b) Főmenü — rejtett, kihúzható "fiók" a jobb oldalon. Alapból csak a kis
nyíl (fül) látszik a képernyő szélén; kattintásra kicsúszik a menü,
mintha egy fiókból húznánk ki egy mappát.
------------------------------------------------------------------------- */
.brand-side-menu-wrapper{
position:fixed;
/* A függőleges közép nem a teljes ablakra, hanem a fejléc ÉS a lábléc
közötti szabad területre vonatkozik, így a menü sosem csúszhat egyikük
mögé/alá sem. */
top:calc(50% + (var(--navbar-height, 92px) - var(--footer-height, 210px)) / 2);
right:0;
z-index:6;
display:flex;
align-items:stretch;
transform:translateY(-50%) translateX(calc(100% - 38px));
transition: transform 1.64s cubic-bezier(.22,.61,.36,1);
}
.brand-side-menu-wrapper.open{
transform:translateY(-50%) translateX(0);
}
.brand-side-menu{
display:flex;
align-items:center;
background-color:var(--brand-header-bg-dark);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border-radius:14px 0 0 14px;
/* Sosem lehet magasabb, mint a fejléc és a lábléc között rendelkezésre
álló szabad hely */
max-height:calc(100vh - var(--navbar-height, 92px) - var(--footer-height, 210px) - 24px);
overflow-y:auto;
scrollbar-width:thin;
scrollbar-color:var(--brand-teal) transparent;
box-shadow:
-14px 0 30px rgba(0,0,0,0.35),
0 2px 8px rgba(0,0,0,0.15);
}
.brand-side-menu::-webkit-scrollbar{
width:5px;
}
.brand-side-menu::-webkit-scrollbar-thumb{
background-color:var(--brand-teal);
border-radius:4px;
}
.brand-side-menu ul{
list-style:none;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:10px;
margin:0;
padding:0;
}
.brand-side-menu a{
display:inline-block;
color:var(--brand-fog);
font-weight:500;
letter-spacing:0.03em;
white-space:nowrap;
text-decoration:none;
padding:4px 2px;
border-right:2px solid transparent;
padding-right:10px;
transition: color 0.2s ease, border-color 0.2s ease;
}
.brand-side-menu a:hover,
.brand-side-menu a:focus-visible{
color:var(--brand-teal-light);
border-right-color:var(--brand-teal-light);
outline:none;
}
/* Lenyíló almenü (accordion) — pl. a "Hosting" pont alatt, ugyanabban az
oszlopban nyílik lefelé, minden méretnél egyformán működik */
.brand-side-menu-parent{
display:flex;
flex-direction:column;
}
/* Lenyíló almenüs sor: a szöveg (link, saját oldalra mutat) + a nyíl
(külön gomb, csak az almenüt nyitja/csukja) egy sorban */
.brand-side-menu-expand-row{
display:flex;
align-items:center;
justify-content:flex-start;
gap:10px;
}
.brand-side-menu-link-inline{
display:inline-block;
color:var(--brand-fog);
font-weight:500;
letter-spacing:0.03em;
white-space:nowrap;
text-decoration:none;
padding:4px 2px;
border-right:2px solid transparent;
padding-right:6px;
transition: color 0.2s ease, border-color 0.2s ease;
}
.brand-side-menu-link-inline:hover,
.brand-side-menu-link-inline:focus-visible{
color:var(--brand-teal-light);
border-right-color:var(--brand-teal-light);
outline:none;
}
.brand-side-menu-expand{
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
background:none;
border:none;
color:var(--brand-fog);
cursor:pointer;
padding:6px;
transition: color 0.2s ease;
}
.brand-side-menu-expand:hover,
.brand-side-menu-expand:focus-visible{
color:var(--brand-teal-light);
outline:none;
}
.submenu-chevron{
flex-shrink:0;
width:13px;
height:13px;
transition: transform 1.09s ease;
}
.brand-side-menu-expand[aria-expanded="true"] .submenu-chevron{
transform:rotate(90deg);
}
.brand-side-submenu{
list-style:none;
margin:0;
padding:0;
max-height:0;
overflow:hidden;
display:flex;
flex-direction:column;
gap:8px;
transition: max-height 1.31s ease, margin-top 1.31s ease;
}
.brand-side-submenu.open{
max-height:160px;
margin-top:8px;
}
/* Az almenü egérrel ráhúzva IS megnyílik, nem csak a nyílra kattintva —
így a teljes "Hosting"/"Cloud" sor fölé húzva előnézetként kinyílik. */
.brand-side-menu-parent:hover .brand-side-submenu{
max-height:160px;
margin-top:8px;
}
.brand-side-menu-parent:hover .brand-side-menu-expand .submenu-chevron{
transform:rotate(90deg);
}
.brand-side-submenu a{
padding-left:14px;
color:var(--brand-fog);
opacity:0.9;
}
html.theme-light .brand-side-menu-expand{
color:var(--brand-icon-navy);
}
html.theme-light .brand-side-menu-expand:hover,
html.theme-light .brand-side-menu-expand:focus-visible{
color:var(--brand-teal);
}
html.theme-light .brand-side-menu-link-inline{
color:var(--brand-icon-navy);
}
html.theme-light .brand-side-menu-link-inline:hover,
html.theme-light .brand-side-menu-link-inline:focus-visible{
color:var(--brand-teal);
border-right-color:var(--brand-teal);
}
html.theme-light .brand-side-submenu a{
color:var(--brand-icon-navy);
}
/* A kis "fül" — a menü bal oldalán, mindig látható, erre kattintva/ráhúzva
húzható ki a menü */
.brand-side-menu-tab{
flex:0 0 38px;
width:38px;
display:flex;
align-items:center;
justify-content:center;
background-color:var(--brand-teal);
border:none;
border-radius:10px 0 0 10px;
color:var(--brand-paper);
cursor:pointer;
box-shadow:
-8px 0 20px rgba(0,0,0,0.3),
0 2px 8px rgba(0,0,0,0.15);
transition: background-color 0.2s ease;
z-index:1;
}
.brand-side-menu-tab:hover{
background-color:var(--brand-teal-light);
}
.brand-side-menu-tab:focus-visible{
outline:none;
box-shadow: 0 0 0 0.2rem rgba(30,158,140,0.5);
}
.brand-side-menu-tab svg{
width:18px;
height:18px;
transition: transform 1.64s cubic-bezier(.22,.61,.36,1);
}
.brand-side-menu-wrapper.open .brand-side-menu-tab svg{
transform:rotate(180deg);
}
@media (max-width:600px){
.brand-side-menu{
padding:12px 23px;
}
.brand-side-menu a{
font-size:12.5px;
}
.brand-side-menu-link-inline{
font-size:12.5px;
}
.brand-side-submenu a{
font-size:11.5px;
}
.brand-side-menu ul{
gap:8px;
}
.brand-side-menu-tab{
flex-basis:32px;
width:32px;
}
.brand-side-menu-tab svg{
width:15px;
height:15px;
}
.brand-side-menu-wrapper{
transform:translateY(-50%) translateX(calc(100% - 32px));
}
.brand-side-menu-wrapper.open{
transform:translateY(-50%) translateX(0);
}
}
html.theme-light .brand-side-menu{
background-color:var(--brand-header-bg-light);
}
html.theme-light .brand-side-menu a{
color:var(--brand-icon-navy);
}
html.theme-light .brand-side-menu a:hover,
html.theme-light .brand-side-menu a:focus-visible{
color:var(--brand-teal);
border-right-color:var(--brand-teal);
}
/* -------------------------------------------------------------------------
10) Gomb / kiemelő elem (későbbi aloldalakhoz)
------------------------------------------------------------------------- */
.brand-btn{
display:inline-block;
font-family: var(--brand-font);
font-weight:600;
letter-spacing:0.04em;
color:var(--brand-paper);
background-color:var(--brand-teal);
border:none;
border-radius:10px;
padding:12px 28px;
text-decoration:none;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.brand-btn:hover{
background-color:var(--brand-teal-light);
color:var(--brand-navy-deep);
transform:translateY(-1px);
}
.brand-btn-outline{
background-color:transparent;
border:1.5px solid var(--brand-teal-light);
color:var(--brand-teal-light);
}
.brand-btn-outline:hover{
background-color:var(--brand-teal-light);
color:var(--brand-navy-deep);
}
/* -------------------------------------------------------------------------
11) Világos / sötét mód váltó piktogram (lábléc, bal sarok)
------------------------------------------------------------------------- */
.brand-theme-toggle{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
padding:0;
border:1px solid rgba(255,255,255,0.25);
border-radius:50%;
background-color:rgba(255,255,255,0.06);
color:var(--brand-teal-light);
cursor:pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.brand-theme-toggle:hover{
background-color:rgba(255,255,255,0.14);
transform:translateY(-50%) scale(1.05);
}
.brand-theme-toggle:focus-visible{
outline:none;
box-shadow: 0 0 0 0.2rem rgba(30,158,140,0.4);
}
.brand-theme-toggle svg{
width:18px;
height:18px;
display:block;
}
.brand-theme-toggle .icon-moon{
display:none;
}
/* -------------------------------------------------------------------------
12) Világos mód (html.theme-light) — felülírt színek
------------------------------------------------------------------------- */
html.theme-light .brand-bg{
background:
radial-gradient(circle at 15% 20%, rgba(30,158,140,0.08), transparent 45%),
radial-gradient(circle at 85% 80%, rgba(30,158,140,0.07), transparent 50%),
linear-gradient(160deg, #f5f8fa 0%, #eef2f5 55%, #e2e7ec 100%);
}
html.theme-light .brand-grid-overlay{
background-image:
linear-gradient(rgba(11,31,51,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(11,31,51,0.05) 1px, transparent 1px);
}
html.theme-light .brand-navbar{
background-color:var(--brand-header-bg-light);
border-bottom:1px solid rgba(11,31,51,0.08);
}
html.theme-light .brand-footer{
color:var(--brand-icon-navy);
}
html.theme-light .brand-theme-toggle{
border-color:rgba(11,31,51,0.2);
background-color:rgba(11,31,51,0.05);
color:var(--brand-teal);
}
html.theme-light .brand-theme-toggle:hover{
background-color:rgba(11,31,51,0.1);
}
html.theme-light .brand-theme-toggle .icon-sun{
display:none;
}
html.theme-light .brand-theme-toggle .icon-moon{
display:block;
}
/* -------------------------------------------------------------------------
13) Egérrel ráhúzáskor megjelenő tooltip — kékes-ezüst háttér
------------------------------------------------------------------------- */
.tooltip .tooltip-inner{
background-color:var(--brand-blue-silver);
color:var(--brand-navy-deep);
font-family: var(--brand-font);
font-weight:500;
font-size:12.5px;
letter-spacing:0.02em;
padding:6px 10px;
border-radius:6px;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before{
border-top-color:var(--brand-blue-silver);
}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before{
border-bottom-color:var(--brand-blue-silver);
}
.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before{
border-left-color:var(--brand-blue-silver);
}
.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before{
border-right-color:var(--brand-blue-silver);
}
/* -------------------------------------------------------------------------
14) Univerzális alap-reset (minden oldalon biztonságos, görgethető oldalak
esetén IS — a "Hamarosan" landing oldal saját, extra inline stílusban
kapja az overflow:hidden + teljes képernyős, nem görgethető viselkedést)
------------------------------------------------------------------------- */
html, body{
margin:0;
padding:0;
}
/* -------------------------------------------------------------------------
15) Tartalom-oldalak (Hosting, VPS, ÁSZF stb.) — görgethető, normál
dokumentum-elrendezésű aloldalak közös burkolója és tipográfiája
------------------------------------------------------------------------- */
.page-content{
position:relative;
z-index:1;
min-height:100vh;
box-sizing:border-box;
max-width:880px;
margin:0 auto;
padding-top:calc(var(--navbar-height, 92px) + 48px);
padding-bottom:48px;
padding-left:28px;
padding-right:56px;
color:var(--brand-fog);
}
.page-content h1{
color:var(--brand-paper);
font-weight:700;
font-size:clamp(28px, 4vw, 40px);
margin-bottom:8px;
}
.page-content .page-eyebrow{
display:inline-block;
color:var(--brand-teal-light);
font-weight:600;
font-size:13px;
letter-spacing:0.2em;
text-transform:uppercase;
margin-bottom:14px;
}
.page-content .page-lead{
font-size:17px;
line-height:1.7;
color:var(--brand-fog);
margin-bottom:28px;
text-align:justify;
}
.page-content h2{
color:var(--brand-paper);
font-weight:600;
font-size:19px;
margin-top:32px;
margin-bottom:10px;
}
.page-content h2.section-title{
font-size:26px;
font-weight:700;
margin-top:48px;
margin-bottom:16px;
padding-bottom:10px;
border-bottom:1px solid rgba(255,255,255,0.12);
}
.page-content p{
font-size:15px;
line-height:1.75;
color:var(--brand-fog);
margin-bottom:16px;
text-align:justify;
}
.page-content ul.page-list{
list-style:none;
margin:0 0 20px 0;
padding:0;
}
.page-content ul.page-list.page-list-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
gap:2px 24px;
}
.page-content ul.page-list.page-list-grid li{
margin-bottom:0;
}
@media (max-width:600px){
.page-content ul.page-list.page-list-grid{
grid-template-columns:1fr;
}
}
.page-content ul.page-list li{
position:relative;
padding-left:24px;
margin-bottom:10px;
font-size:15px;
line-height:1.6;
color:var(--brand-fog);
}
.page-content ul.page-list li::before{
content:"";
position:absolute;
left:0;
top:9px;
width:8px;
height:8px;
border-radius:50%;
background-color:var(--brand-teal);
}
.page-content .page-card{
background-color:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
border-radius:14px;
padding:22px 26px;
margin-top:28px;
}
/* Ha egy kártya első eleme egy címsor, annak ne legyen felesleges saját
felső margója — enélkül a kártya paddingja fölé "beszorulna" egy extra
üres sáv a cím fölött */
.page-content .page-card > h2:first-child,
.page-content .page-card > h3:first-child{
margin-top:0;
}
.page-content .page-placeholder-note{
display:inline-flex;
align-items:center;
gap:8px;
font-size:13px;
color:var(--brand-teal-light);
background-color:rgba(30,158,140,0.1);
border:1px solid rgba(30,158,140,0.3);
border-radius:8px;
padding:8px 14px;
margin-top:24px;
}
@media (max-width:600px){
.page-content{
padding-left:18px;
padding-right:52px;
padding-top:calc(var(--navbar-height, 70px) + 32px);
padding-bottom:32px;
}
.page-content .page-lead{
font-size:15px;
}
}
html.theme-light .page-content{
color:var(--brand-icon-navy);
}
html.theme-light .page-content h1,
html.theme-light .page-content h2{
color:var(--brand-icon-navy);
}
html.theme-light .page-content h2.section-title{
border-bottom-color:rgba(11,31,51,0.15);
}
html.theme-light .page-content .page-lead,
html.theme-light .page-content p,
html.theme-light .page-content ul.page-list li{
color:#3b4a5e;
}
html.theme-light .page-content .page-card{
background-color:rgba(11,31,51,0.04);
border-color:rgba(11,31,51,0.1);
}
/* -------------------------------------------------------------------------
16) Kezdőlap — szolgáltatás-kártyák rácsa + CTA kártya
------------------------------------------------------------------------- */
.home-service-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
gap:16px;
margin-top:8px;
}
.home-service-card{
display:block;
position:relative;
text-align:center;
background:
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(135deg, rgba(30,158,140,0.3) 0%, rgba(11,31,51,0.85) 55%, rgba(15,48,84,0.9) 100%);
background-size:26px 26px, 26px 26px, 100% 100%;
border:1px solid rgba(111,214,189,0.3);
box-shadow: 0 0 0 1px rgba(30,158,140,0.1), 0 10px 24px rgba(0,0,0,0.28);
border-radius:16px;
padding:20px 22px;
overflow:hidden;
text-decoration:none;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
/* Normál, kis méretű ikon a kártya tetején (NEM a package-jump-icon nagy,
halvány háttér-vízjele — az egy teljesen más elrendezéshez készült) */
.home-service-icon{
position:relative;
z-index:1;
display:block;
width:28px;
height:28px;
margin:0 auto 12px;
color:var(--brand-teal-light);
}
html.theme-light .home-service-icon{
color:var(--brand-teal);
}
.home-service-card:hover,
.home-service-card:focus-visible{
border-color:rgba(111,214,189,0.6);
box-shadow: 0 0 0 1px rgba(30,158,140,0.2), 0 14px 30px rgba(0,0,0,0.32);
transform:translateY(-2px);
outline:none;
}
.home-service-card h2{
margin:0 0 8px 0;
font-size:18px;
color:var(--brand-paper);
}
.home-service-card p{
margin:0;
font-size:14px;
line-height:1.6;
text-align:center;
color:var(--brand-fog);
}
.home-cta-card{
text-align:left;
}
.home-cta-card .brand-btn{
margin-top:10px;
}
html.theme-light .home-service-card{
background:
linear-gradient(rgba(11,31,51,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(11,31,51,0.05) 1px, transparent 1px),
linear-gradient(135deg, rgba(30,158,140,0.12) 0%, rgba(255,255,255,0.9) 55%, rgba(240,244,247,0.95) 100%);
background-size:26px 26px, 26px 26px, 100% 100%;
border-color:rgba(30,158,140,0.3);
box-shadow: 0 0 0 1px rgba(30,158,140,0.08), 0 8px 20px rgba(11,31,51,0.1);
}
html.theme-light .home-service-card:hover,
html.theme-light .home-service-card:focus-visible{
border-color:rgba(30,158,140,0.6);
box-shadow: 0 0 0 1px rgba(30,158,140,0.15), 0 12px 26px rgba(11,31,51,0.15);
}
html.theme-light .home-service-card h2{
color:var(--brand-icon-navy);
}
html.theme-light .home-service-card p{
color:#3b4a5e;
}
/* -------------------------------------------------------------------------
17) Csomag-specifikáció táblázat (Hosting/Cloud csomagok limitjei)
------------------------------------------------------------------------- */
.page-content h3.spec-group-title{
font-size:13px;
font-weight:600;
letter-spacing:0.06em;
text-transform:uppercase;
color:var(--brand-teal-light);
margin:22px 0 8px;
}
.page-content h3.spec-group-title:first-of-type{
margin-top:4px;
}
.page-content .spec-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
gap:2px 28px;
margin-bottom:10px;
}
.page-content .spec-item{
display:flex;
flex-direction:column;
gap:2px;
padding:6px 0;
border-bottom:1px solid rgba(255,255,255,0.08);
font-size:13.5px;
}
.page-content .spec-item .spec-label{
font-size:11.5px;
text-transform:uppercase;
letter-spacing:0.04em;
opacity:0.75;
color:var(--brand-fog);
}
.page-content .spec-item .spec-value{
color:var(--brand-paper);
font-weight:500;
white-space:normal;
overflow-wrap:break-word;
}
.page-content .package-name{
color:var(--brand-teal-light);
}
html.theme-light .page-content h3.spec-group-title{
color:var(--brand-teal);
}
html.theme-light .page-content .spec-item{
border-bottom-color:rgba(11,31,51,0.1);
}
html.theme-light .page-content .spec-item .spec-label{
color:#3b4a5e;
}
html.theme-light .page-content .spec-item .spec-value{
color:var(--brand-icon-navy);
}
html.theme-light .page-content .package-name{
color:var(--brand-teal);
}
@media (max-width:600px){
.page-content .spec-grid{
grid-template-columns:1fr;
}
.page-content .spec-item{
font-size:13px;
}
}
/* -------------------------------------------------------------------------
18) Lenyitható csomag-kártya (natív /, JS nélkül működik)
------------------------------------------------------------------------- */
.page-content details.package-card{
background-color:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
border-radius:14px;
padding:0;
margin-top:28px;
overflow:hidden;
}
.page-content details.package-card summary{
list-style:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:22px 26px;
user-select:none;
}
.page-content details.package-card summary::-webkit-details-marker{
display:none;
}
.page-content details.package-card summary .package-summary-text{
display:flex;
flex-direction:column;
gap:4px;
}
.page-content details.package-card summary .package-name{
font-size:18px;
font-weight:700;
}
.page-content details.package-card summary .package-desc{
font-size:14px;
color:var(--brand-fog);
font-weight:400;
margin:0;
}
.page-content details.package-card summary .package-chevron{
flex-shrink:0;
width:20px;
height:20px;
color:var(--brand-teal-light);
transition: transform 0.3s ease;
}
.page-content details.package-card[open] summary .package-chevron{
transform:rotate(90deg);
}
.page-content details.package-card .package-body{
padding:0 26px 24px;
border-top:1px solid rgba(255,255,255,0.1);
padding-top:18px;
}
.page-content details.package-card .package-body p{
margin-top:0;
}
@media (max-width:600px){
.page-content details.package-card summary{
padding:18px 18px;
}
.page-content details.package-card .package-body{
padding:0 18px 18px;
padding-top:16px;
}
.page-content details.package-card summary .package-name{
font-size:16px;
}
}
html.theme-light .page-content details.package-card{
background-color:rgba(11,31,51,0.04);
border-color:rgba(11,31,51,0.1);
}
html.theme-light .page-content details.package-card summary .package-desc{
color:#3b4a5e;
}
html.theme-light .page-content details.package-card .package-body{
border-top-color:rgba(11,31,51,0.1);
}
html.theme-light .page-content details.package-card summary .package-chevron{
color:var(--brand-teal);
}
/* -------------------------------------------------------------------------
19) Beágyazott, kisebb lenyitható alkártya (pl. Kiegészítő csomagok egy
csomag-kártyán belül)
------------------------------------------------------------------------- */
.page-content details.package-subcard{
background-color:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.1);
border-radius:10px;
margin-top:18px;
overflow:hidden;
}
.page-content details.package-subcard summary{
list-style:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 18px;
user-select:none;
}
.page-content details.package-subcard summary::-webkit-details-marker{
display:none;
}
.page-content details.package-subcard .package-chevron{
width:16px;
height:16px;
}
.page-content details.package-subcard[open] summary .package-chevron{
transform:rotate(90deg);
}
.page-content details.package-subcard .package-body{
padding:0 18px 16px;
border-top:1px solid rgba(255,255,255,0.1);
padding-top:14px;
}
.page-content details.package-subcard .package-body .page-list{
margin-bottom:0;
}
html.theme-light .page-content details.package-subcard{
background-color:rgba(11,31,51,0.03);
border-color:rgba(11,31,51,0.1);
}
html.theme-light .page-content details.package-subcard .package-body{
border-top-color:rgba(11,31,51,0.1);
}
/* -------------------------------------------------------------------------
20) Csomag-doboz piktogramok (Csomagok rács, ugrás a részletekhez)
------------------------------------------------------------------------- */
.package-jump-grid{
display:grid;
grid-template-columns:repeat(5, 1fr);
gap:12px;
margin-bottom:20px;
}
.package-jump-card{
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
min-height:96px;
padding:16px 10px;
}
.package-jump-icon{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:72px;
height:72px;
color:var(--brand-teal-light);
opacity:0.16;
z-index:0;
pointer-events:none;
}
.package-jump-card h2{
position:relative;
z-index:1;
margin:0;
font-size:15px;
}
@media (max-width:900px){
.package-jump-grid{
grid-template-columns:repeat(5, 1fr);
gap:8px;
}
.package-jump-card{
min-height:80px;
padding:12px 6px;
}
.package-jump-icon{
width:56px;
height:56px;
}
.package-jump-card h2{
font-size:12.5px;
}
}
@media (max-width:600px){
.package-jump-grid{
grid-template-columns:repeat(5, 1fr);
gap:5px;
}
.package-jump-card{
min-height:64px;
padding:8px 3px;
}
.package-jump-icon{
width:40px;
height:40px;
opacity:0.2;
}
.package-jump-card h2{
font-size:10px;
line-height:1.2;
}
}
html.theme-light .package-jump-icon{
color:var(--brand-teal);
opacity:0.14;
}
/* -------------------------------------------------------------------------
21) "Vissza a lap tetejére" gomb — minden oldalon, a body jobb alsó
sarkában lebeg, a lábléc (szöveg + piktogramok) tényleges magassága
fölött, hogy sose fedjék egymást.
------------------------------------------------------------------------- */
.brand-scroll-top{
position:fixed;
right:18px;
bottom:calc(var(--footer-height, 210px) + 16px);
z-index:7;
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background-color:rgba(127,159,194,0.2);
border:1px solid rgba(111,214,189,0.35);
color:var(--brand-teal-light);
cursor:pointer;
opacity:0;
visibility:hidden;
transform:translateY(8px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background-color 0.2s ease;
box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.brand-scroll-top.visible{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.brand-scroll-top:hover{
background-color:rgba(127,159,194,0.35);
}
.brand-scroll-top:focus-visible{
outline:none;
box-shadow: 0 0 0 0.2rem rgba(30,158,140,0.4);
}
.brand-scroll-top svg{
width:18px;
height:18px;
}
@media (max-width:600px){
.brand-scroll-top{
right:10px;
width:36px;
height:36px;
}
.brand-scroll-top svg{
width:16px;
height:16px;
}
}
html.theme-light .brand-scroll-top{
background-color:rgba(74,102,128,0.12);
border-color:rgba(30,158,140,0.35);
color:var(--brand-teal);
}
html.theme-light .brand-scroll-top:hover{
background-color:rgba(74,102,128,0.2);
}
/* -------------------------------------------------------------------------
22) Device-simulation konténer — a lábléc nézet-váltója ennek a
konténernek a szélességét módosítja, hogy a TELJES oldal (fejléc, menü,
tartalom, lábléc) valóban átméreteződjön, ne csak egy előnézet nyíljon.
A transform (akár "none"-nal egyenértékű translateZ(0)) új keretező
kontextust ("containing block") ad minden position:fixed elemnek, így
azok is a konténerhez, nem a böngésző-ablakhoz igazodnak.
------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
23) Nézet-váltó piktogramok (Monitor / Laptop / Tablet / Telefon) — a
meglévő lábléc-piktogramokkal (Webmail/ISPConfig/phpMyAdmin/Support)
megegyező stílusban, a téma-váltó gomb FÖLÖTT, csak ráhúzáskor látható
------------------------------------------------------------------------- */
.brand-device-switch{
position:absolute;
left:18px;
top:50%;
transform:translateY(-50%);
}
.brand-device-switch-options{
position:absolute;
bottom:calc(100% + 10px);
left:0;
width:34px;
height:34px;
}
/* Ugyanaz a "kékes-ezüst" kör-piktogram stílus, mint a lábléc jobb oldali
Webmail/ISPConfig/phpMyAdmin/Support ikonjainál. Alapból mind a 4 gomb
pontosan egymásra lapolva helyezkedik el (position:absolute), és csak a
JELENLEGI NÉZETNEK MEGFELELŐ (.active) gomb látszik — ráhúzásra mind a
négy láthatóvá válik és felfelé "legyezőként" szétnyílik. */
.brand-device-btn{
position:absolute;
top:0;
left:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:50%;
border:1px solid rgba(127,159,194,0.4);
background-color:rgba(127,159,194,0.2);
color:var(--brand-teal-light);
cursor:pointer;
opacity:0;
transform:translateY(0) scale(0.85);
pointer-events:none;
transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.brand-device-btn.active{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
}
.brand-device-switch:hover .brand-device-btn,
.brand-device-switch:focus-within .brand-device-btn{
opacity:1;
pointer-events:auto;
}
.brand-device-switch:hover .brand-device-btn:nth-child(1),
.brand-device-switch:focus-within .brand-device-btn:nth-child(1){ transform:translateY(0) scale(1); }
.brand-device-switch:hover .brand-device-btn:nth-child(2),
.brand-device-switch:focus-within .brand-device-btn:nth-child(2){ transform:translateY(-42px) scale(1); }
.brand-device-switch:hover .brand-device-btn:nth-child(3),
.brand-device-switch:focus-within .brand-device-btn:nth-child(3){ transform:translateY(-84px) scale(1); }
.brand-device-switch:hover .brand-device-btn:nth-child(4),
.brand-device-switch:focus-within .brand-device-btn:nth-child(4){ transform:translateY(-126px) scale(1); }
.brand-device-btn:hover,
.brand-device-btn:focus-visible{
background-color:rgba(127,159,194,0.35);
outline:none;
}
.brand-device-btn.active{
background-color:var(--brand-teal);
border-color:var(--brand-teal);
color:var(--brand-paper);
}
.brand-device-btn svg{
width:16px;
height:16px;
}
@media (max-width:600px){
.brand-device-switch{
left:10px;
}
.brand-device-switch-options{
width:28px;
height:28px;
}
.brand-device-btn{
width:28px;
height:28px;
}
.brand-device-btn svg{
width:14px;
height:14px;
}
.brand-device-switch:hover .brand-device-btn:nth-child(2),
.brand-device-switch:focus-within .brand-device-btn:nth-child(2){ transform:translateY(-34px) scale(1); }
.brand-device-switch:hover .brand-device-btn:nth-child(3),
.brand-device-switch:focus-within .brand-device-btn:nth-child(3){ transform:translateY(-68px) scale(1); }
.brand-device-switch:hover .brand-device-btn:nth-child(4),
.brand-device-switch:focus-within .brand-device-btn:nth-child(4){ transform:translateY(-102px) scale(1); }
}
html.theme-light .brand-device-btn{
border-color:rgba(74,102,128,0.35);
background-color:rgba(74,102,128,0.12);
color:var(--brand-teal);
}
html.theme-light .brand-device-btn:hover,
html.theme-light .brand-device-btn:focus-visible{
background-color:rgba(74,102,128,0.2);
}
html.theme-light .brand-device-btn.active{
background-color:var(--brand-teal);
border-color:var(--brand-teal);
color:var(--brand-paper);
}
/* -------------------------------------------------------------------------
24) Előnézeti ablak (modal + iframe) — a nézet-váltó ide nyit előnézetet,
a VALÓDI oldal fejléce/lábléce/menüje ettől függetlenül, változatlanul
marad rögzítve a saját ablakában.
------------------------------------------------------------------------- */
.brand-preview-overlay{
position:fixed;
inset:0;
z-index:2000;
display:none;
flex-direction:column;
background-color:rgba(5,12,20,0.92);
backdrop-filter:blur(4px);
}
.brand-preview-overlay.open{
display:flex;
}
.brand-preview-toolbar{
flex-shrink:0;
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 20px;
background-color:rgba(11,31,51,0.9);
border-bottom:1px solid rgba(111,214,189,0.25);
}
.brand-preview-label{
color:var(--brand-teal-light);
font-weight:600;
font-size:14px;
letter-spacing:0.03em;
}
.brand-preview-close{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.25);
background-color:rgba(255,255,255,0.06);
color:var(--brand-fog);
cursor:pointer;
transition: background-color 0.2s ease;
}
.brand-preview-close:hover{
background-color:rgba(248,113,113,0.2);
color:#f87171;
}
.brand-preview-close svg{
width:16px;
height:16px;
}
.brand-preview-scroll{
flex:1;
overflow:auto;
display:flex;
justify-content:center;
padding:24px;
}
.brand-preview-frame{
flex-shrink:0;
height:100%;
min-height:600px;
border:2px solid rgba(111,214,189,0.3);
border-radius:10px;
background-color:#fff;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
/* -------------------------------------------------------------------------
25) Dokumentum-letöltő kártyák (pl. Hosting > Dokumentumok)
------------------------------------------------------------------------- */
.document-card{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:12px;
}
.document-card-icon{
width:30px;
height:30px;
color:var(--brand-teal-light);
flex-shrink:0;
}
.document-card h2{
margin:0;
font-size:16px;
line-height:1.4;
}
html.theme-light .document-card-icon{
color:var(--brand-teal);
}
@media (max-width:600px){
.document-card-icon{
width:26px;
height:26px;
}
.document-card h2{
font-size:14.5px;
}
}
/* -------------------------------------------------------------------------
26) Nyomtatás — a site saját "kerete" (fejléc, oldalmenü, lábléc, gombok,
háttér) sosem jelenjen meg nyomtatáskor / PDF-mentéskor, csak a tényleges
oldaltartalom (pl. a domain igénylőlap összegzése)
------------------------------------------------------------------------- */
@media print{
.brand-navbar,
.brand-side-menu-wrapper,
.brand-footer,
.brand-sitemap,
.brand-scroll-top,
.brand-bg-layer,
.brand-grid-overlay,
.brand-preview-overlay{
display:none !important;
}
.page-content{
padding-top:0 !important;
padding-bottom:0 !important;
}
body{
background:#fff;
}
}
/* -------------------------------------------------------------------------
27) Kezdőlap — kiemelt domain-kereső sáv
------------------------------------------------------------------------- */
.home-domain-cta{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
text-decoration:none;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.home-domain-cta:hover,
.home-domain-cta:focus-visible{
border-color:rgba(111,214,189,0.6);
box-shadow: 0 0 0 1px rgba(30,158,140,0.2), 0 14px 30px rgba(0,0,0,0.32);
transform:translateY(-2px);
outline:none;
}
.home-domain-cta-eyebrow{
display:block;
color:var(--brand-teal-light);
font-size:12px;
font-weight:600;
letter-spacing:0.12em;
text-transform:uppercase;
margin-bottom:6px;
}
.home-domain-cta h2{
margin:0 0 6px;
font-size:20px;
}
.home-domain-cta p{
margin:0;
font-size:14px;
color:var(--brand-fog);
}
.home-domain-cta-arrow{
flex-shrink:0;
width:44px;
height:44px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background-color:rgba(30,158,140,0.15);
color:var(--brand-teal-light);
transition: background-color 0.2s ease, transform 0.2s ease;
}
.home-domain-cta-arrow svg{
width:20px;
height:20px;
}
.home-domain-cta:hover .home-domain-cta-arrow{
background-color:var(--brand-teal);
color:var(--brand-paper);
transform:translateX(4px);
}
.home-benefit-card p{
margin-bottom:0;
}
@media (max-width:600px){
.home-domain-cta{
flex-direction:column;
align-items:flex-start;
gap:14px;
}
}
html.theme-light .home-domain-cta-arrow{
background-color:rgba(30,158,140,0.12);
color:var(--brand-teal);
}
html.theme-light .home-domain-cta:hover .home-domain-cta-arrow{
background-color:var(--brand-teal);
color:#fff;
}
/* -------------------------------------------------------------------------
28) Professzionális oldaltérkép-lábléc — normál (nem rögzített) tartalom,
a rögzített, vékony utility-sáv FÖLÖTT jelenik meg, azzal együtt görgethető.
------------------------------------------------------------------------- */
.brand-sitemap{
position:relative;
z-index:1;
border-top:1px solid rgba(255,255,255,0.1);
background-color:rgba(5,14,24,0.6);
padding:44px 28px calc(var(--footer-height, 210px) + 32px);
}
.brand-sitemap-inner{
max-width:1100px;
margin:0 auto;
display:grid;
grid-template-columns:1.3fr 1fr 1fr 1fr;
gap:36px;
}
.brand-sitemap-col h3{
font-size:13px;
font-weight:600;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--brand-teal-light);
margin:0 0 14px;
}
.brand-sitemap-col ul{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:9px;
}
.brand-sitemap-col ul li a{
color:var(--brand-fog);
text-decoration:none;
font-size:14px;
transition: color 0.2s ease;
}
.brand-sitemap-col ul li a:hover{
color:var(--brand-teal-light);
text-decoration:underline;
}
.brand-sitemap-logo{
height:36px;
width:auto;
margin-bottom:12px;
}
.brand-sitemap-company{
color:var(--brand-paper);
font-weight:700;
font-size:16px;
margin:0 0 12px;
}
.brand-sitemap-contact{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:8px;
}
.brand-sitemap-contact li{
font-size:14px;
color:var(--brand-fog);
}
.brand-sitemap-contact li a{
color:var(--brand-fog);
text-decoration:none;
}
.brand-sitemap-contact li a:hover{
color:var(--brand-teal-light);
text-decoration:underline;
}
@media (min-width:601px) and (max-width:900px){
.brand-sitemap-inner{
grid-template-columns:1fr 1fr;
gap:28px;
}
}
@media (max-width:600px){
.brand-sitemap{
padding:32px 20px calc(var(--footer-height, 210px) + 24px);
}
.brand-sitemap-inner{
grid-template-columns:1fr;
gap:28px;
}
}
html.theme-light .brand-sitemap{
border-top-color:rgba(11,31,51,0.12);
background-color:rgba(240,244,247,0.6);
}
html.theme-light .brand-sitemap-col h3{
color:var(--brand-teal);
}
html.theme-light .brand-sitemap-company{
color:var(--brand-icon-navy);
}
html.theme-light .brand-sitemap-col ul li a,
html.theme-light .brand-sitemap-contact li,
html.theme-light .brand-sitemap-contact li a{
color:#3b4a5e;
}
html.theme-light .brand-sitemap-col ul li a:hover,
html.theme-light .brand-sitemap-contact li a:hover{
color:var(--brand-teal);
}
/* -------------------------------------------------------------------------
29) Hibaoldalak (404 / 403 / 500) — nagy, kiemelt hibakód-szám
------------------------------------------------------------------------- */
.error-code-number{
font-size:clamp(64px, 12vw, 130px);
font-weight:800;
line-height:1;
margin:0 0 8px;
background:linear-gradient(135deg, var(--brand-teal-light) 0%, var(--brand-blue-silver) 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
letter-spacing:-0.02em;
}
@media (max-width:600px){
.error-code-number{
font-size:clamp(48px, 18vw, 80px);
}
}
/* -------------------------------------------------------------------------
30) ÁSZF (és hasonló jogi szövegek) formázása a lenyitható dobozokon belül
------------------------------------------------------------------------- */
.package-body .aszf-full-text h3{
font-size:15px;
font-weight:700;
color:var(--brand-teal-light);
margin:26px 0 10px;
}
.package-body .aszf-full-text h3:first-of-type{
margin-top:0;
}
.package-body .aszf-full-text p{
font-size:13.5px;
line-height:1.65;
margin-bottom:10px;
text-align:justify;
}
.package-body .aszf-full-text ul.page-list li{
font-size:13.5px;
}
table.aszf-table{
width:100%;
border-collapse:collapse;
margin:8px 0 18px;
font-size:13px;
}
table.aszf-table tr{
border-bottom:1px solid rgba(255,255,255,0.08);
}
table.aszf-table tr:last-child{
border-bottom:none;
}
table.aszf-table td{
padding:8px 6px;
vertical-align:top;
color:var(--brand-fog);
}
table.aszf-table td:first-child{
width:38%;
font-weight:600;
color:var(--brand-paper);
}
html.theme-light table.aszf-table tr{
border-bottom-color:rgba(11,31,51,0.1);
}
html.theme-light table.aszf-table td:first-child{
color:var(--brand-icon-navy);
}
html.theme-light .package-body .aszf-full-text h3{
color:var(--brand-teal);
}
@media (max-width:600px){
table.aszf-table td:first-child{
width:44%;
}
table.aszf-table,
.package-body .aszf-full-text p,
.package-body .aszf-full-text ul.page-list li{
font-size:12.5px;
}
}
/* -------------------------------------------------------------------------
31) Forráskód-doboz (pl. "Eredeti forráskód megtekintése" dobozokban)
------------------------------------------------------------------------- */
.code-box{
background-color:rgba(0,0,0,0.35);
border:1px solid rgba(255,255,255,0.12);
border-radius:10px;
padding:16px;
overflow-x:auto;
max-height:520px;
overflow-y:auto;
}
.code-box code{
font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size:12.5px;
line-height:1.6;
color:#d4d4d4;
white-space:pre;
}
html.theme-light .code-box{
background-color:#1e1e1e;
}
@media (max-width:600px){
.code-box{
padding:12px;
max-height:400px;
}
.code-box code{
font-size:11px;
}
}