/* =========================================================================
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); }
/* -------------------------------------------------------------------------
5) Logókártya — fehér kártya a logó számára, árnyékkal
------------------------------------------------------------------------- */
.brand-logo-card{
background:var(--brand-paper);
border-radius:18px;
padding:6px 10px;
box-shadow:
0 20px 45px rgba(0,0,0,0.35),
0 2px 8px rgba(0,0,0,0.15);
display:flex;
align-items:center;
justify-content:center;
}
.brand-logo-card img{
display:block;
width:min(54vw, 560px);
height:auto;
}
@media (max-width:600px){
.brand-logo-card img{ width:82vw; }
}
/* -------------------------------------------------------------------------
6) Elválasztó vonal + felirat (pl. "Hamarosan" jellegű státuszjelzők)
------------------------------------------------------------------------- */
.brand-status{
display:flex;
align-items:center;
gap:14px;
}
.brand-status .brand-divider-line{
width:36px;
height:1px;
background-color:var(--brand-teal-light);
opacity:0.6;
}
.brand-status .brand-label{
font-size:15px;
letter-spacing:0.42em;
text-transform:uppercase;
color:var(--brand-fog);
font-weight:600;
white-space:nowrap;
}
.brand-status .brand-label b{
color:var(--brand-teal-light);
font-weight:700;
}
@media (max-width:600px){
.brand-status .brand-label{ font-size:12px; letter-spacing:0.3em; }
}
/* -------------------------------------------------------------------------
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;
padding-left:64px;
padding-right:70px;
}
@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:46px;
padding-right:46px;
}
.brand-footer .brand-theme-toggle{
left:10px;
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;
right:18px;
bottom:10px;
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
}
.brand-footer-links a{
display:inline-flex;
align-items:center;
justify-content:center;
width:43px;
height:43px;
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{
width:22px;
height:22px;
}
@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{
height:68px;
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 0.4s cubic-bezier(.65,0,.35,1);
}
.brand-side-menu-wrapper.open,
.brand-side-menu-wrapper:hover{
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;
padding:16px 33px;
/* 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;
gap:10px;
margin:0;
padding:0;
}
.brand-side-menu a{
display:inline-block;
color:var(--brand-fog);
font-weight:500;
font-size:14px;
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;
}
.brand-side-menu-expand{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
width:100%;
background:none;
border:none;
font-family:inherit;
color:var(--brand-fog);
font-weight:500;
font-size:14px;
letter-spacing:0.03em;
white-space:nowrap;
text-align:left;
cursor:pointer;
padding:4px 2px;
border-right:2px solid transparent;
padding-right:10px;
transition: color 0.2s ease, border-color 0.2s ease;
}
.brand-side-menu-expand:hover,
.brand-side-menu-expand:focus-visible{
color:var(--brand-teal-light);
border-right-color:var(--brand-teal-light);
outline:none;
}
.submenu-chevron{
flex-shrink:0;
width:13px;
height:13px;
transition: transform 0.3s 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 0.35s ease, margin-top 0.35s ease;
}
.brand-side-submenu.open{
max-height:160px;
margin-top:8px;
}
.brand-side-submenu a{
font-size:12.5px;
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);
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 0.4s cubic-bezier(.65,0,.35,1);
}
.brand-side-menu-wrapper.open .brand-side-menu-tab svg,
.brand-side-menu-wrapper:hover .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-expand{
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,
.brand-side-menu-wrapper:hover{
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:absolute;
left:18px;
top:50%;
transform:translateY(-50%);
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-status .brand-label{
color:var(--brand-icon-navy);
}
html.theme-light .brand-status .brand-label b{
color:var(--brand-teal);
}
html.theme-light .brand-status .brand-divider-line{
background-color:var(--brand-teal);
}
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);
}