/* ========================================================= TutiMaganTanar - MODERN SKIN LAYER (2026) Only active when is present ========================================================= */ /* ---- Design tokens (scoped) ---- */ body.modernskin{ --bg: #f7eaba; --surface: #ffffff; --surface-2: rgba(255,255,255,.70); --text: #1f1f1f; --muted: #5a5a5a; --border: rgba(0,0,0,.10); --border-2: rgba(0,0,0,.14); --brand: #f7e091; --brand-2: #f7d763; --accent: #ad1111; --shadow: 0 8px 22px rgba(0,0,0,.10); --shadow-2: 0 3px 10px rgba(0,0,0,.08); --radius: 14px; --radius-sm: 10px; } /* ---- Base typography & layout ---- */ body.modernskin, body.modernskin html{ background: var(--bg); color: var(--text); } body.modernskin{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif; line-height: 1.55; letter-spacing: 0.1px; text-rendering: optimizeLegibility; } body.modernskin a{ color: #1f1f1f; text-decoration-thickness: 1px; text-underline-offset: 2px; } body.modernskin a:hover{ text-decoration: underline; } /* ---- Reduce "old-school" hard lines globally ---- */ body.modernskin section div.content, body.modernskin div.panel, body.modernskin div.fotanar_box, body.modernskin div.vid3, body.modernskin #slide_body, body.modernskin div#popmenu, body.modernskin table{ border-color: var(--border) !important; } /* ---- Header: modern bar, subtle shadow, better spacing ---- */ body.modernskin header{ border: 0 !important; } body.modernskin header div.content{ background: rgba(255,255,255,.85) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-2); padding: 10px 12px !important; } body.modernskin header h1, body.modernskin header h2{ color: var(--text); } body.modernskin header h2 span, body.modernskin header h1 span{ color: var(--muted); } /* Make fixed header feel less "2010" */ @media (min-width: 768px){ body.modernskin header div.content{ padding: 14px 16px !important; } body.modernskin header h1, body.modernskin header h2{ text-shadow: none !important; letter-spacing: 0.3px !important; } } /* ---- Navigation: pill links ---- */ body.modernskin nav{ background: transparent !important; border-top: 0 !important; } body.modernskin nav a { box-shadow: none !important; text-shadow: none !important; border-radius: 999px; font-size: 1.15rem; padding: 10px 14px !important; line-height: 1 !important; display: inline-flex !important; align-items: center; justify-content: center; margin: 8px 6px 10px 0 !important; border: 1px solid rgba(0,0,0,.20); transition: transform .12s ease, background .12s ease, box-shadow .12s ease; } body.modernskin #btn_belep, body.modernskin #btn_kilep{ background: rgba(31,31,31,.90) !important; box-shadow: none !important; text-shadow: none !important; border-radius: 999px; padding: 10px 14px !important; line-height: 1 !important; display: inline-flex !important; align-items: center; justify-content: center; margin: 8px 6px 10px 0 !important; border: 1px solid rgba(0,0,0,.20); transition: transform .12s ease, background .12s ease, box-shadow .12s ease; } body.modernskin nav a:hover, body.modernskin #btn_belep:hover, body.modernskin #btn_kilep:hover{ background: rgba(31,31,31,1) !important; color: #fff !important; transform: translateY(-1px); text-decoration: none !important; box-shadow: 0 6px 16px rgba(0,0,0,.14); } @media (max-width: 768px){ body.modernskin #btn_belep{ display: none !important; } } /* Active / CTA nav item (nth-child(4) in your current CSS) */ body.modernskin nav > a:nth-child(4){ background: var(--brand) !important; color: #1b1b1b !important; border: 1px solid rgba(0,0,0,.12) !important; font-weight: 800 !important; } /* ---- Main spacing under fixed header (reduce CLS) ---- */ body.modernskin #main{ padding-top: 65px; /* mobile default */ } @media (min-width: 768px){ body.modernskin #main{ padding-top: 140px; } } /* If you already use padding-top on article/aside at >=1366px, keep it. */ @media (min-width: 1366px){ body.modernskin aside, body.modernskin article{ padding-top: 40px; } } /* ---- Sections: card layout, consistent padding, modern shadow ---- */ body.modernskin section div.content{ background: rgba(255,255,255,.80) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-2); padding: 18px 16px !important; } body.modernskin section.sectartalom div.content{ padding: 22px 18px !important; } body.modernskin section div.content.kiemelt{ background: rgba(195,195,195,.92) !important; } body.modernskin section div.content.akcios{ background: rgba(255,255,255,.95) !important; } /* Headings */ body.modernskin section h1, body.modernskin section h2{ color: #1f1f1f; letter-spacing: 0.2px; } body.modernskin section h1{ font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.25; margin: 0.25em 0 0.6em !important; } body.modernskin section h2{ font-size: clamp(1.15rem, 1.7vw, 1.4rem); margin: 0.8em 0 0.6em !important; } body.modernskin section h3{ color: var(--muted); font-style: normal !important; margin-bottom: 1.2em !important; } /* Lists */ body.modernskin section ul, body.modernskin section ol{ padding-left: 1.15rem; } body.modernskin section ul li, body.modernskin section ol li{ margin: .35rem 0; } /* ---- Inputs & buttons: modern forms ---- */ body.modernskin .input, body.modernskin form textarea, body.modernskin select.input{ border: 1px solid var(--border-2) !important; background: #fff !important; border-radius: 12px !important; height: 44px !important; line-height: 44px !important; padding: 0 12px !important; box-shadow: 0 1px 0 rgba(0,0,0,.04); transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease; } body.modernskin form textarea{ height: auto !important; line-height: 1.5 !important; padding: 12px !important; } body.modernskin .input:focus, body.modernskin form textarea:focus, body.modernskin select.input:focus{ border-color: rgba(0,0,0,.28) !important; box-shadow: 0 0 0 4px rgba(247,224,145,.55); } /* Buttons */ body.modernskin form input[type="submit"], body.modernskin form input[type="button"], body.modernskin form button, body.modernskin .button{ height: 44px !important; padding: 0 14px !important; border-radius: 12px !important; border: 1px solid rgba(0,0,0,.16) !important; background: #1f1f1f !important; color: #fff !important; font-weight: 700; letter-spacing: 0.2px; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease; } body.modernskin form input[type="submit"]:hover, body.modernskin form input[type="button"]:hover, body.modernskin form button:hover, body.modernskin .button:hover{ transform: translateY(-1px); box-shadow: 0 10px 18px rgba(0,0,0,.16); opacity: .96; } /* Red button */ body.modernskin a.piros_gomb{ background: var(--accent) !important; border-color: rgba(0,0,0,.14) !important; box-shadow: 0 10px 18px rgba(173,17,17,.18); color: #fff!important; } body.modernskin a.piros_gomb:hover{ filter: brightness(1.05); } /* CTA on homepage */ body.modernskin a.nyitolap_cta{ border: 1px solid rgba(0,0,0,.14) !important; background: rgba(255,255,255,.92) !important; box-shadow: var(--shadow-2); transition: transform .12s ease, box-shadow .12s ease; } body.modernskin a.nyitolap_cta:hover{ transform: translateY(-1px); box-shadow: 0 10px 18px rgba(0,0,0,.14); text-decoration: none !important; } /* ---- Popmenu: modern sheet ---- */ body.modernskin div#popmenu{ background: rgba(255,255,255,.92) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-2); } body.modernskin div#popmenu ul li{ border-bottom: 1px solid var(--border) !important; } body.modernskin div#popmenu ul li a{ font-weight: 700; } /* ---- Slide ---- */ body.modernskin #slide_body{ border: 1px solid var(--border) !important; border-radius: var(--radius) !important; overflow: hidden; background: rgba(31,31,31,.92) !important; box-shadow: var(--shadow); } body.modernskin #slide_body div.slide_list{ box-shadow: none !important; } body.modernskin #slide_body div.slide-teacher, body.modernskin #slide_body div.slide-tuti{ border: 1px solid rgba(255,255,255,.16) !important; box-shadow: none !important; border-radius: var(--radius-sm); background: rgba(0,0,0,.20) !important; } body.modernskin #slide_body p.slide-name a{ color: var(--brand) !important; } /* ---- Featured teacher boxes ---- */ body.modernskin div.fotanar_box{ border: 1px solid var(--border) !important; background: rgba(255,255,255,.92) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-2); padding: 14px 12px !important; } @media (max-width: 640px){ body.rewrite.modernskin .tlistimg img, body.rewrite.modernskin .fotanar_box img{ height: 70% !important; width: auto !important; max-width: 90px !important; } body.rewrite.modernskin div.tlistimg{ padding: 10px 10px 0 10px !important; width: 90px !important; vertical-align: top; } } /* Images */ body.modernskin div.imgcont img, body.modernskin div.tlistimg img, body.modernskin #slide_body div.slide-img img{ border-radius: 12px; box-shadow: 0 8px 18px rgba(0,0,0,.12); } /* Subject pills */ body.modernskin .kiemelt_tanar_tantargyak span{ border: 1px solid rgba(0,0,0,.10) !important; background: rgba(247,224,145,.55) !important; } /* Panels */ body.modernskin div.panel{ background: rgba(255,255,255,.75) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-2); } body.modernskin div.panel h2{ margin-bottom: .4em; } /* Tables */ body.modernskin table{ border-radius: 12px; overflow: hidden; } /* HR */ body.modernskin hr{ border-top: 1px solid var(--border) !important; } /* Accessibility */ @media (prefers-reduced-motion: reduce){ body.modernskin *{ transition: none !important; } } /* ================================ QUICKLINKS - card grid ================================ */ body.modernskin ul.quicklinks{ display: grid !important; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10px !important; margin: 12px 0 6px !important; padding: 0 !important; } @media (min-width: 640px){ body.modernskin ul.quicklinks{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px){ body.modernskin ul.quicklinks{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.modernskin ul.quicklinks li{ list-style: none !important; margin: 0 !important; padding: 0 !important; } body.modernskin ul.quicklinks li{ display: block !important; text-decoration: none !important; color: var(--text) !important; background: rgba(255,255,255,.92) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; padding: 12px 12px !important; box-shadow: var(--shadow-2); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; min-height: 44px; } body.modernskin ul.quicklinks li a:hover{ transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(0,0,0,.18) !important; } body.modernskin ul.quicklinks li a:active{ transform: translateY(-1px); } /* ================================ FOTANAR BOX - subtle 3D hover ================================ */ body.modernskin #main, body.modernskin article, body.modernskin section{ perspective: 900px; } body.modernskin div.fotanar_box{ transform-style: preserve-3d; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; will-change: transform; } body.modernskin div.fotanar_box:hover img{ transform: translateZ(10px); transition: transform .16s ease; } @media (prefers-reduced-motion: reduce){ body.modernskin div.fotanar_box, body.modernskin div.fotanar_box:hover, body.modernskin div.fotanar_box img{ transform: none !important; transition: none !important; } } /* ================================ SLIDER - show only one slide ================================ */ body.modernskin #slide_body .slide_list > *{ display: none !important; } body.modernskin #slide_body .slide_list > *:first-child{ display: block !important; } body.modernskin #slide_body .slide_list > *.active{ display: block !important; } body.modernskin #slide_body .slide_list > .slide-teacher.active, body.modernskin #slide_body .slide_list > .slide-tuti.active{ display: block !important; } /* ================================ Mini CTA button (kiemelt tanár link) ================================ */ body.rewrite.modernskin a.kiemelt_tanar_adatlaplink, body.rewrite.modernskin .kiemelt_tanar_adatlaplink a{ display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px; font-size: 12px; line-height: 1; font-weight: 700; letter-spacing: .2px; text-decoration: none !important; background: #ad1111; color: #fff !important; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 6px 14px rgba(0,0,0,.12); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; white-space: nowrap; } body.rewrite.modernskin a.kiemelt_tanar_adatlaplink:hover, body.rewrite.modernskin .kiemelt_tanar_adatlaplink a:hover, body.rewrite.modernskin a.kiemelt_tanar_adatlaplink:focus-visible, body.rewrite.modernskin .kiemelt_tanar_adatlaplink a:focus-visible{ transform: translateY(-1px) scale(1.02); filter: brightness(1.02); box-shadow: 0 10px 22px rgba(0,0,0,.16); outline: none; } body.rewrite.modernskin a.kiemelt_tanar_adatlaplink:active, body.rewrite.modernskin .kiemelt_tanar_adatlaplink a:active{ transform: translateY(0) scale(0.99); box-shadow: 0 4px 10px rgba(0,0,0,.12); } body.rewrite.modernskin a.kiemelt_tanar_adatlaplink img, body.rewrite.modernskin .kiemelt_tanar_adatlaplink a img{ max-height: 14px; width: auto; margin-right: 6px; } /* Laptop special (as you had) */ @media (min-width: 1024px) and (max-width: 1366px) and (max-height: 800px){ body.rewrite.modernskin #main{ padding-top: 185px !important; } body.rewrite.modernskin .fotanar_box{ height: auto !important; min-height: clamp(240px, 26vw, 350px) !important; overflow: visible !important; } body.rewrite.modernskin .fotanar_box{ display: flow-root !important; } } div.tlistbox { display: table!important; margin-bottom: 1rem!important; border-radius: 1rem; box-shadow: 0 10px 22px rgba(0,0,0,.16); } .tlist .ar a { box-shadow: none !important; text-shadow: none !important; border-radius: 999px; background: rgba(0, 0, 0, .70); color: #fff; font-size: 1rem; padding: 5px 10px !important; line-height: 1 !important; display: inline-flex !important; align-items: center; justify-content: center; margin: 8px 6px 10px 0 !important; border: 1px solid rgba(0, 0, 0, .20); transition: transform .12s ease, background .12s ease, box-shadow .12s ease; } /* ================================ Home search form - balance (modernskin) Works for p/div rows AND table-based forms ================================ */ /* 1) Center + constrain the form width inside the highlighted box */ body.modernskin #search dt{ display: none!important; } body.modernskin #search dl { width: 100%; margin: 0; display: flex; gap: 1rem; } body.modernskin #search dd { width: 100%; margin: 0; padding: 5px 0; }