/* =========================================================================
Általános arculati stíluslap (brand-design-system.css)
-------------------------------------------------------------------------
Ez a fájl a DominoDomain.hu brand.css-éből lett leszűrve: csak az
oldal-független, MINDEN új weboldalon újrafelhasználható elemeket
tartalmazza (színpaletta, tipográfia, alap komponensek). A projekt-
specifikus részeket (oldalsó kihúzható menü, csomag-táblázatok,
domain-kereső sáv, oldaltérkép-lábléc, nyomtatási keret, eszköz-
nézet-váltó előnézet stb.) szándékosan nem tartalmazza — ezeket
projektenként érdemes egyedileg megírni, vagy szükség esetén az
eredeti brand.css-ből átemelni.
Használat új projektben:
Előfeltétel a -ben (Google Font betöltése):
Sötét/világos mód: a elemre kell rátenni a "theme-light"
osztályt világos módban (pl. JS-ből, egy tárolt felhasználói
beállítás alapján). Alapértelmezésben sötét mód aktív.
========================================================================= */
/* -------------------------------------------------------------------------
1) Arculati színpaletta és alapváltozók
------------------------------------------------------------------------- */
:root{
/* Márkaszínek */
--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; /* sötétkék márkaszín (pl. logó) */
--brand-teal: #1e9e8c; /* elsődleges kiemelő szín */
--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áttér árnyalata */
--brand-fog: #c9d2dc; /* halvány szürkéskék — másodlagos szöveg */
--brand-paper: #ffffff; /* fehér — kártyák, logó alap */
/* Visszajelző színek (kiegészítés — hibaüzenetek, sikeres/figyelmeztető
állapotok jelzésére, minden új oldalon hasznos) */
--brand-success: #2fbf71;
--brand-warning: #e0a72e;
--brand-danger: #e0553f;
/* Tipográfia */
--brand-font: 'Poppins', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
/* Fejléc háttere — a navbar/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);
/* Elrendezési alapértékek — projektenként felülírhatók a :root-on */
--brand-radius: 12px;
--brand-container-max: 1100px;
}
/* -------------------------------------------------------------------------
2) Univerzális alap-reset
------------------------------------------------------------------------- */
*, *::before, *::after{
box-sizing:border-box;
}
html, body{
margin:0;
padding:0;
}
body.brand-root{
font-family: var(--brand-font);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
/* -------------------------------------------------------------------------
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ő.
Használat: a body elején. */
.brand-bg-layer{
position:fixed;
inset:0;
z-index:-2;
}
/* Halvány hálórajzolat overlay 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;
}
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);
}
/* -------------------------------------------------------------------------
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) Tipográfia — alap szövegstílusok
------------------------------------------------------------------------- */
.brand-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;
}
.brand-lead{
font-size:17px;
line-height:1.7;
color:var(--brand-fog);
}
html.theme-light .brand-lead{
color:#3b4a5e;
}
/* -------------------------------------------------------------------------
6) Konténer — tartalmi szélesség-korlátozás minden aloldalhoz
------------------------------------------------------------------------- */
.brand-container{
position:relative;
z-index:1;
max-width:var(--brand-container-max);
margin:0 auto;
padding-left:28px;
padding-right:28px;
}
@media (max-width:600px){
.brand-container{
padding-left:18px;
padding-right:18px;
}
}
/* -------------------------------------------------------------------------
7) Gombok
------------------------------------------------------------------------- */
.brand-btn{
display:inline-block;
font-family: var(--brand-font);
font-weight:600;
font-size:15px;
letter-spacing:0.04em;
color:var(--brand-paper);
background-color:var(--brand-teal);
border:none;
border-radius:10px;
padding:12px 28px;
text-decoration:none;
cursor:pointer;
transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.brand-btn:hover{
background-color:var(--brand-teal-light);
color:var(--brand-navy-deep);
transform:translateY(-1px);
}
.brand-btn:focus-visible{
outline:none;
box-shadow: 0 0 0 0.2rem rgba(30,158,140,0.4);
}
.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);
}
.brand-btn-navy{
background-color:var(--brand-icon-navy);
color:var(--brand-paper);
}
.brand-btn-navy:hover{
background-color:var(--brand-navy);
color:var(--brand-paper);
}
/* -------------------------------------------------------------------------
8) Kártyák
------------------------------------------------------------------------- */
.brand-card{
background-color:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
border-radius:var(--brand-radius);
padding:22px 26px;
}
.brand-card > h2:first-child,
.brand-card > h3:first-child{
margin-top:0;
}
html.theme-light .brand-card{
background-color:rgba(11,31,51,0.04);
border-color:rgba(11,31,51,0.1);
}
/* Kiemelt megjegyzés-doboz (pl. "hamarosan", info-üzenet) */
.brand-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;
}
/* -------------------------------------------------------------------------
9) Jelvények / státuszcímkék (kiegészítés)
------------------------------------------------------------------------- */
.brand-badge{
display:inline-flex;
align-items:center;
gap:6px;
font-size:12px;
font-weight:600;
letter-spacing:0.04em;
text-transform:uppercase;
border-radius:999px;
padding:4px 12px;
background-color:rgba(30,158,140,0.15);
color:var(--brand-teal-light);
}
.brand-badge-success{ background-color:rgba(47,191,113,0.15); color:var(--brand-success); }
.brand-badge-warning{ background-color:rgba(224,167,46,0.15); color:var(--brand-warning); }
.brand-badge-danger{ background-color:rgba(224,85,63,0.15); color:var(--brand-danger); }
/* -------------------------------------------------------------------------
10) Fejléc / navbar
------------------------------------------------------------------------- */
.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;
height:56px;
}
.brand-navbar-logo-chip{
display:inline-flex;
align-items:center;
background-color:var(--brand-paper);
border-radius:8px;
padding:5px 9px;
line-height:0;
}
.brand-nav-links{
list-style:none;
display:flex;
align-items:center;
gap:24px;
margin:0;
padding:0;
}
.brand-nav-links a{
color:var(--brand-fog);
font-weight:500;
font-size:14px;
letter-spacing:0.03em;
text-decoration:none;
transition: color 0.2s ease;
}
.brand-nav-links a:hover,
.brand-nav-links a:focus-visible{
color:var(--brand-teal-light);
outline:none;
}
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-nav-links a{
color:var(--brand-icon-navy);
}
html.theme-light .brand-nav-links a:hover,
html.theme-light .brand-nav-links a:focus-visible{
color:var(--brand-teal);
}
@media (max-width:600px){
.brand-navbar .navbar-brand img{
height:44px;
}
}
/* -------------------------------------------------------------------------
11) Lábléc (egyszerű, nem rögzített változat — az oldal alján fut ki)
------------------------------------------------------------------------- */
.brand-footer{
font-size:12px;
font-weight:500;
letter-spacing:0.08em;
color:var(--brand-silver);
padding:20px 28px;
}
html.theme-light .brand-footer{
color:var(--brand-icon-navy);
}
.brand-footer-links{
display:flex;
align-items:center;
gap:10px;
}
.brand-footer-links a{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
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 svg{
width:18px;
height:18px;
display:block;
}
.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);
}
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{
background-color:rgba(74,102,128,0.2);
}
/* -------------------------------------------------------------------------
12) Világos / sötét mód váltó piktogram
------------------------------------------------------------------------- */
.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);
}
.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;
}
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 (Bootstrap-kompatibilis)
------------------------------------------------------------------------- */
.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) "Vissza a lap tetejére" gomb
------------------------------------------------------------------------- */
.brand-scroll-top{
position:fixed;
right:18px;
bottom:18px;
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;
}
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);
}
@media (max-width:600px){
.brand-scroll-top{
right:10px;
bottom:10px;
width:36px;
height:36px;
}
.brand-scroll-top svg{
width:16px;
height:16px;
}
}
/* -------------------------------------------------------------------------
15) Űrlapelemek (kiegészítés — a legtöbb új oldalon szükséges)
------------------------------------------------------------------------- */
.brand-input,
.brand-textarea,
.brand-select{
display:block;
width:100%;
font-family: var(--brand-font);
font-size:14.5px;
color:var(--brand-paper);
background-color:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.18);
border-radius:8px;
padding:10px 14px;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.brand-input::placeholder,
.brand-textarea::placeholder{
color:var(--brand-fog);
opacity:0.6;
}
.brand-input:focus,
.brand-textarea:focus,
.brand-select:focus{
outline:none;
border-color:var(--brand-teal-light);
background-color:rgba(255,255,255,0.1);
}
.brand-label{
display:block;
font-size:13px;
font-weight:600;
letter-spacing:0.03em;
color:var(--brand-fog);
margin-bottom:6px;
}
html.theme-light .brand-input,
html.theme-light .brand-textarea,
html.theme-light .brand-select{
color:var(--brand-icon-navy);
background-color:rgba(11,31,51,0.03);
border-color:rgba(11,31,51,0.15);
}
html.theme-light .brand-label{
color:var(--brand-icon-navy);
}
/* -------------------------------------------------------------------------
16) Kód-doboz (pl. "forráskód megtekintése" dobozokhoz)
------------------------------------------------------------------------- */
.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;
}
/* -------------------------------------------------------------------------
17) 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);
}
}