/*
Theme Name: Graphisoft Park
Theme URI: https://graphisoftpark.hu/
Author: Migrated from October CMS theme by Megoldás Most! Kft.
Description: WordPress recreation of the Graphisoft Park October CMS site. Bilingual HU/EN, Bootstrap 4 layout, custom CPTs for renters/articles/events/gallery/services/team/partners.
Version: 1.0.0
Text Domain: graphisoft
*/
@font-face {
font-family: 'Gelasio';
font-weight: 400;
src: url('assets/fonts/Gelasio/Gelasio-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Gelasio';
font-weight: 500;
src: url('assets/fonts/Gelasio/Gelasio-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'Gelasio';
font-weight: 600;
src: url('assets/fonts/Gelasio/Gelasio-SemiBold.ttf') format('truetype');
}
@font-face {
font-family: 'Gelasio';
font-weight: 700;
src: url('assets/fonts/Gelasio/Gelasio-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Gelasio';
font-style: italic;
font-weight: 400;
src: url('assets/fonts/Gelasio/Gelasio-Italic.ttf') format('truetype');
}
* { outline: none; }
.btn,
.form-control { box-shadow: none !important; }
body {
font-family: 'Gelasio', serif;
-webkit-font-smoothing: antialiased;
padding: 0;
margin: 0;
}
a.link { color: #7cb541; text-decoration: underline; font-size: 14px; }
a.anchor { display: block; position: relative; top: -62px; visibility: hidden; }
.green-text { color: #7cb541; }
.btn { border-radius: 0; }
.btn.btn-green, .btn.btn-green-filled { text-transform: uppercase; color: #7cb541; font-size: 14px; border: 1px solid #7cb541; }
.btn.btn-green-filled { background: #7cb541; color: #fff; }
.btn.btn-white { text-transform: uppercase; color: #fff; font-size: 14px; border: 1px solid #fff; }
.form-control { border-radius: 0; border: 1px solid #c5c5c5; font-size: 14px; }
.tgrey { color: #313942; }
img.fr-dib { margin: 5px auto; display: block; float: none; vertical-align: top; }
img.fr-dib.fr-fil { margin-left: 0; }
img.fr-dib.fr-fir { margin-right: 0; }
img.fr-dii { display: inline-block; float: none; vertical-align: bottom; margin-left: 20px; margin-right: 20px; max-width: calc(90%); }
img.fr-dii.fr-fil { float: left; margin: 20px 20px 20px 0; max-width: calc(95%); }
img.fr-dii.fr-fir { float: right; margin: 20px 0 20px 20px; max-width: calc(95%); }
.navbar-home { padding: 0; }
.navbar-home .navbar-brand { padding: 0; }
.navbar-home .nav-link { color: #fff; }
.navbar-main { background: #fff; min-height: 60px; padding: 0 10px 0 0; border-bottom: 1px solid #313942; transition: 500ms; opacity: 1; visibility: visible; }
.navbar-main.hidden { opacity: 0; visibility: hidden; }
/* No standalone background on .navbar-brand — the parent .navbar-main's
own background (white when scrolled, transparent on hero-top) shows
through, so the logo area's colour changes in perfect sync with the
menu items instead of ahead of them. */
.navbar-main .navbar-brand { padding: 10px; }
/* Two-logo swap driven by scroll state. Default (scrolled or non-home)
shows the color logo on the white brand plate. On the home hero (not
yet scrolled) the whole navbar goes transparent — we drop the brand's
white plate too and swap in the white logo so it stays legible over
the hero image. Both img tags live in header.php; only one paints. */
/* Single-logo approach: color-transparent.png shown as-is on the white
navbar; CSS filter turns every non-transparent pixel white when the
navbar is transparent (hero-top state on layout-home). Transitions
on `filter` sync with the .nav-link color transition (500ms both).
Height capped at 41px to match the legacy 197×41 logo footprint —
the source PNG is 2450×512 (retina-ready). */
.navbar-main .navbar-brand .gp-logo { display: block; height: 41px; width: auto; transition: filter 500ms; }
body.layout-home:not(.scrolled) .navbar-main:not(.over-grid) .navbar-brand .gp-logo { filter: brightness(0) invert(1); }
.navbar-main .dropdown-menu { margin: 0; }
.navbar-main .nav-link { color: #313942; font-size: 16px; text-transform: uppercase; transition: 500ms; }
.navbar-main img.icon, footer ul.menu img.icon { height: 20px; display: inline-block; }
footer ul.menu img.icon { margin-left: 5px; }
/* Match the Facebook PNG (fully white) with the inline LinkedIn +
Instagram SVGs — those use fill="currentColor" so they'd otherwise
inherit the footer's #5b5b5b muted grey and look dimmer than FB.
Explicit fill:#fff + matched 20px size aligns all three visually. */
footer ul.menu svg { fill: #fff; width: 20px; height: 20px; vertical-align: middle; margin-left: 5px; }
/* The Facebook icon PNG is white-on-transparent — fine on the dark footer
and on the home page's transparent navbar, but invisible against the
default white navbar background. Filter it dark in the navbar; the
home-page transparent rule below restores it to white. */
.navbar-main img.icon { filter: brightness(0); }
@media(min-width: 768px) {
.navbar .dropdown:hover>.dropdown-menu { display: block !important; }
}
body.layout-home:not(.scrolled) .navbar-main:not(.over-grid) { background: transparent; border-bottom: none; }
body.layout-home:not(.scrolled) .navbar-main:not(.over-grid) .nav-link { color: #fff; }
body.layout-home:not(.scrolled) .navbar-main:not(.over-grid) img.icon { filter: none; }
.navbar-main .nav-item.active .nav-link { text-decoration: underline; }
/* Menu-item hover matches the social-icon hover — same brand green.
Covers both the default (dark text on white bar) state and the
transparent-nav home state (white text over the grid). */
.navbar-main .nav-link:hover,
.navbar-main .nav-link:focus { color: #7cb541; }
body.layout-home:not(.scrolled) .navbar-main:not(.over-grid) .nav-link:hover,
body.layout-home:not(.scrolled) .navbar-main:not(.over-grid) .nav-link:focus { color: #7cb541; }
.navbar-toggler .line { display: block; width: 20px; height: 2px; border-radius: 1px; background: #000; }
.navbar-toggler .line:not(:last-child) { margin-bottom: 5px; }
.lang-select { padding-right: 40px; text-transform: uppercase; }
/* No margin-top: the .main wrapper starts at y=0 and the fixed
navbar overlays its top 62px. This matches prod — the hero image
extends up under the transparent/white navbar without a white gap
between them. On pages whose first section is text (rare), the
section's own padding-top handles the clearance. */
.main { margin-top: 0; }
/* Empty spacer section used at the top of text-first templates
(page-graphi-story.php, page-default-article.php) that don't have
a full hero image. Gives content 62px of vertical breathing room
so the first paragraph isn't hidden behind the fixed navbar.
Height matches navbar height (60-62px from .navbar-main min-height). */
section.headnoscroll { display: block; height: 62px; }
.layout-home section.section1 { height: 200vh; position: relative; }
.layout-home section.section1 .scroll-icon, section.header .scroll-icon { width: 60px; height: 60px; background-image: url('assets/images/icons/angle-down.png'); position: absolute; z-index: 10; top: calc(100vh - 100px); left: 50%; margin-left: -25px; background-size: 100%; animation: jump 1s alternate infinite; }
@keyframes jump { 0% { margin-top: 0; } 100% { margin-top: -25px; } }
.info-block { position: fixed; z-index: 1001; width: 216px; top: calc(100vh / 2); transform: translateY(-50%) translateX(-100%); background: #fff; padding: 23px; box-sizing: border-box; left: 0; transition: 250ms ease-in-out; color: #323941; font-size: 14px; border: 1px solid #313942; }
.info-block .controls { width: 52px; height: 26px; background-color: #313942; position: absolute; top: 0; left: 100%; cursor: pointer; background-image: url('assets/images/icons/arrow.png'); background-position: center; background-repeat: no-repeat; transition: 250ms; }
.info-block.open .controls { width: 26px; background-image: url('assets/images/icons/close.png'); }
.info-block.open { transform: translateY(-50%) translateX(0); }
.info-block h1, .info-block h2, .info-block h3, .info-block h4, .info-block h5, .info-block h6 { font-weight: normal; color: #323941; font-size: 24px; text-transform: uppercase; margin: 0 0 25px; }
.layout-home section.section1 .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.layout-home section.section1 .bg img { height: 100%; position: absolute; left: 50%; transform: translateX(-50%); }
.layout-home section.section1 .bg1 { height: 100%; }
.layout-home section.section1 .bg-child { position: absolute; top: 100vh; height: 100vh; left: 0; width: 100%; visibility: hidden; opacity: 0; transition: 1s; }
section.header .overlay, section.header .overlay-mobile, .layout-home section.section1 .bg-child .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.35; z-index: 1; }
section.header .overlay-mobile { display: none; }
.layout-home section.section1 .bg-child.visible { visibility: visible; opacity: 1; }
.layout-home section.section1 .text { position: absolute; left: 350px; top: 250px; color: #fff; width: 600px; max-width: 100%; }
.layout-home section.section1 .text h1 { font-size: 60px; margin-bottom: 20px; }
.layout-home section.section1 .text p { font-size: 25px; }
.layout-home section.section1 .grid { position: relative; top: 100vh; width: calc(100% - 1px); height: 100vh; display: table; border-collapse: collapse; z-index: 101; visibility: hidden; opacity: 0; transition: 1s; }
.layout-home section.section1 .grid.visible { visibility: visible; opacity: 1; }
.layout-home section.section1 .grid .row { margin: 0; }
/* 6-tile grid: 3 columns × 2 rows on desktop (was 4×2 back when the
grid had 8 tiles). 33.3333% width fits three tiles per row exactly;
50vh height keeps the whole grid filling the 100vh hero. Mobile
equivalent is set in the max-width: 991px media query below. */
.layout-home section.section1 .grid .cell { flex: 0 0 33.3333%; height: 50vh; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; position: relative; }
.layout-home section.section1 .grid .cell .label { text-transform: uppercase; position: absolute; bottom: 30px; left: 40px; visibility: visible; opacity: 1; transition: 1s; }
.layout-home section.section1 .grid .cell a { text-decoration: none; }
.layout-home section.section1 .grid .cell .hover { padding: 30px 40px; height: 100%; visibility: hidden; opacity: 0; transition: 1s; color: #fff; text-decoration: none !important; }
.layout-home section.section1 .grid .cell .hover.yellow { background-color: rgba(255, 198, 0, .9); }
.layout-home section.section1 .grid .cell .hover.brown { background-color: rgba(191, 143, 92, .9); }
.layout-home section.section1 .grid .cell .hover.green { background-color: rgba(144, 191, 92, .9); }
.layout-home section.section1 .grid .cell .hover h1 { font-size: 36px; font-weight: 400; margin: 0 0 30px; line-height: 42px; }
.layout-home section.section1 .grid .cell .hover p { font-size: 16px; }
.layout-home section.section1 .grid .cell .hover p a { color: #fff; text-decoration: underline; }
.layout-home section.section1 .grid .cell .hover .more { position: absolute; left: 40px; bottom: 30px; text-transform: uppercase; color: #fff; }
.layout-life .sub-header-h1 { font-size: 60px; }
.layout-home section.section2, .layout-life section.section1 { padding: 80px 0 70px; }
.layout-home section.section2 .block-title, .layout-life section.section1 .block-title { font-size: 40px; color: #313942; margin: 0 0 70px; }
/* Hol vagyunk info block — historically only lived on /hol-vagyunk under
.layout-where. The 2026-08 menu restructure moves this section onto
/kapcsolat (page-contact.php prepends it with id="hol-vagyunk"), and
the same block can appear anywhere else. Every selector below matches
either the historic .layout-where section.section1 OR any section that
carries id="hol-vagyunk", so the block styles consistently in both. */
.layout-where section.section1,
section#hol-vagyunk { background: #efefef; padding: 90px 0; }
.layout-where section.section1 .left,
section#hol-vagyunk .left { font-size: 15px; color: #313942; }
.layout-where section.section1 .left h1,
section#hol-vagyunk .left h1 { font-size: 40px; color: #7cb541; margin: 0 0 30px; text-transform: uppercase; }
.layout-where section.section1 .left h2,
section#hol-vagyunk .left h2 { font-size: 26px; color: #313942; margin-bottom: 20px; text-transform: uppercase; }
.layout-where section.section1 .left ul,
section#hol-vagyunk .left ul { list-style-type: none; padding: 0; margin: 0; margin-bottom: 20px; }
/* Icon + text rows. The icon used to be `float: left`, which meant text
only sat beside it while the text was shorter than the 30px icon — any
line past that wrapped back underneath, so the minibus entry (3 lines,
it has a
) spilled its last line under the icon. The client reported
exactly this in the 2026-09 review ("belóg az ikonok alá").
Taking the icon out of flow and padding the row instead gives the text a
real column that holds at any length. 82px = the 62px icon (all five are
uniformly 62x30) + the 20px gap it used to get from margin-right. */
.layout-where section.section1 .left ul li,
section#hol-vagyunk .left ul li {
position: relative;
padding-left: 82px;
min-height: 30px;
margin-bottom: 20px;
}
.layout-where section.section1 .left ul img,
section#hol-vagyunk .left ul img {
position: absolute;
left: 0;
top: 0;
float: none;
margin: 0;
}
.layout-where section.section1 .left strong,
section#hol-vagyunk .left strong { color: #7cb541; font-weight: 400; }
.layout-where section.section1 img,
section#hol-vagyunk img { max-width: 100%; }
.layout-renters section.section1 { padding: 30px; }
.layout-renters section.section1 .subp, .layout-park section.section1 .subp, .layout-school section.section1 .subp { font-size: 25px; padding: 40px 0; }
.layout-renters section.section1 .row > div { margin-bottom: 70px; }
.layout-renters section.section2 .search, .layout-where section.section2 .search { position: relative; }
.layout-renters section.section2 .search .list, .layout-where section.section2 .search .list { position: absolute; width: 100%; z-index: 10; overflow-y: auto; height: calc(100% - 39px); }
.layout-renters section.section2 .search.fixed .list, .layout-where section.section2 .search.fixed .list { display: block !important; }
.layout-renters section.section2 .search .list > div, .layout-where section.section2 .search .list > div { font-size: 15px; color: #313942; background: #e3e3e3; padding: 5px 17px; border-bottom: 1px solid #fff; cursor: pointer; }
.layout-renters section.section2 .search .list > div:hover, .layout-renters section.section2 .search .list > div.active, .layout-where section.section2 .search .list > div:hover, .layout-where section.section2 .search .list > div.active { background: #c2c2c2; }
.layout-renters section.section2 .companies .company span, .layout-where section.section2 .companies .company span { display: block; font-size: 16px; color: #000; margin-bottom: 6px; }
.layout-renters section.section2 .companies .company span.label, .layout-where section.section2 .companies .company span.label { display: inline-block; color: #7cb541; }
.layout-jobs section.section1 { padding: 80px 0; }
.layout-jobs section.section1 h1 { font-size: 60px; color: #313942; margin-bottom: 120px; }
/* Subtle white gap between the hero image and the first row of gallery
tiles — enough to keep the page from feeling cluttered on first load
without adding an aimless empty band. No heading — the hero already
introduces the page. */
.layout-gallery section.section1 { padding-top: 75px; }
.layout-gallery section.section1 .row.galleries { margin: 0 1px 1px 0; }
.layout-gallery section.section1 .row.galleries > div { padding: 0; border-top: 1px solid #fff; border-left: 1px solid #fff; }
.layout-school section.section1 { padding: 80px 0; }
.layout-investors section.section1 { padding: 70px 0; }
.layout-investors section.section1 .body { margin-bottom: 60px; color: #000; }
.layout-investors section.section1 .body h1 { font-size: 60px; color: #313942; margin: 0 0 20px; }
.layout-investors section.section1 .body h2 { font-size: 30px; color: #313942; margin: 0 0 35px; }
.layout-investors section.section1 .body h3 { font-size: 20px; color: #313942; margin: 0 0 25px; }
/* Bootstrap-collapse accordion styling — shared between the investor
tabs (/befektetoknek) and the /park press-section accordion. Same
visual language: unstyled card, transparent header, +/- indicator
in front of the label. Two selectors per rule so the same look works
in both places without duplicating the whole block. */
.layout-investors section.section1 .accordion,
.layout-park section.articles .accordion { margin-top: 60px; }
.layout-investors section.section1 .accordion .card,
.layout-park section.articles .accordion .card { border-radius: 0; }
.layout-investors section.section1 .accordion .card .card-header,
.layout-park section.articles .accordion .card .card-header { background: transparent; }
.layout-investors section.section1 .accordion .card .card-header .btn,
.layout-park section.articles .accordion .card .card-header .btn { font-size: 20px; color: #313942; text-transform: uppercase; text-decoration: none; }
.layout-investors section.section1 .accordion .card .card-header .btn .status,
.layout-park section.articles .accordion .card .card-header .btn .status { display: inline-block; font-size: 24px; width: 20px; text-align: center; }
.layout-investors section.section1 .accordion .card .card-header .btn.collapsed .status:before,
.layout-park section.articles .accordion .card .card-header .btn.collapsed .status:before { content: '+'; position: relative; display: inline-block; }
.layout-investors section.section1 .accordion .card .card-header .btn:not(.collapsed) .status:before,
.layout-park section.articles .accordion .card .card-header .btn:not(.collapsed) .status:before { content: '-'; position: relative; display: inline-block; }
.layout-investors .table-responsive table { min-width: 600px; }
/* Events carousel prev/next arrows — layout stays as before (2-col
alternating: text one side, images the other). Only the arrow
controls are new. Dark pill background so they stay visible over
varied event photos (many are light poster-style flyers). */
/* Height cap on the carousel images — event uploads range from tall
portrait A4 flyers to short landscape photos. Without a cap the
Balambér-style tall poster made the whole row 900+px, and the
text column beside it had to spread across that same height.
500px keeps portraits reasonable, `object-fit: contain` prevents
any cropping (flyers have text that must stay readable), and
`max-width: 100%` still lets landscape photos fill the column. */
section.events .gp-event__carousel .carousel-item { text-align: center; }
section.events .gp-event__carousel .carousel-item img {
max-height: 500px; max-width: 100%; width: auto; height: auto;
margin: 0 auto; display: inline-block; object-fit: contain;
}
/* Per-slide caption from the media library item's "Caption" field.
Always in the DOM (even for slides with no caption text) with a
min-height reserving one line — that way the section height stays
constant across slides and the page doesn't jump when the carousel
advances to a caption-less image. Kept subtle (grey / italic) so it
complements the event description in the adjacent column rather
than competing with it. */
section.events .gp-event__carousel .gp-event__slide-caption {
max-width: 90%; margin: 12px auto 0; color: #5b5b5b; font-size: 14px;
font-style: italic; line-height: 1.5; text-align: center;
min-height: 1.5em; /* reserves one line of vertical space when empty */
}
section.events .gp-event__carousel .carousel-control-prev,
section.events .gp-event__carousel .carousel-control-next { width: 60px; opacity: 1; }
section.events .gp-event__carousel .carousel-control-prev-icon,
section.events .gp-event__carousel .carousel-control-next-icon {
background-color: rgba(49, 57, 66, 0.6); border-radius: 50%;
width: 44px; height: 44px; background-size: 50% 50%; transition: background-color 200ms;
}
section.events .gp-event__carousel .carousel-control-prev:hover .carousel-control-prev-icon,
section.events .gp-event__carousel .carousel-control-next:hover .carousel-control-next-icon { background-color: #7cb541; }
/* Position indicators — small dot pager below the image. Inactive dots
are subtle grey, the active one is wider + brand-green so visitors
can tell at a glance where they are in the slideshow. Positioned
BELOW the carousel (default Bootstrap places them over the image
which would overlap the caption). */
section.events .gp-event__carousel .carousel-indicators {
position: static; margin: 16px 0 0; padding: 0;
display: flex; justify-content: center; gap: 6px;
}
section.events .gp-event__carousel .carousel-indicators li {
box-sizing: content-box; width: 8px; height: 8px; margin: 0;
background: #ccd0d4; border: 0; border-radius: 50%;
opacity: 1; transition: width 200ms, background-color 200ms;
text-indent: 0; cursor: pointer;
}
section.events .gp-event__carousel .carousel-indicators li.active {
width: 24px; background: #7cb541; border-radius: 4px;
}
.layout-life section.section2 { background-image: url('assets/images/client_care_bg.png'); background-position: center; background-size: cover; padding: 90px 0 80px; color: #fff; }
.layout-life section.section2 h1 { font-size: 60px; margin: 0 0 50px; }
.layout-life section.section2 p { width: 520px; max-width: 100%; margin: 0 0 40px; }
.layout-life section.section3 { padding: 100px 0 110px; }
.layout-life section.section3 h1 { color: #313942; margin: 0 0 80px; font-size: 60px; }
.layout-renters section.section2, .layout-life section.section4, .layout-where section.section2 { padding: 50px 0; }
/* Presentation-download button on /park — inline SVG icon + label with
a small gap. `inline-flex` keeps the whole thing on one line and
handles vertical alignment better than `text-align`. `currentColor`
on the SVG stroke lets the icon follow the button's text color, so
any :hover or theme override applies to the arrow too. */
.gp-download-btn { display: inline-flex; align-items: center; gap: 8px; }
.gp-download-btn__icon { flex-shrink: 0; }
/* Team-photo outro on /kapcsolat (page-contact.php's section2 — the
description paragraph + group shot rendered under the team-grid).
Needs bottom breathing room so the image doesn't butt against the
green footer band. */
.layout-contact section.section2 { padding: 60px 0 90px; }
.layout-contact section.section2 img { max-width: 100%; height: auto; }
.layout-renters section.section2 .left h1, .layout-life section.section4 .left h1, .layout-where section.section2 .left h1 { font-size: 40px; color: #313942; }
.layout-renters section.section2 .left p, .layout-life section.section4 .left p, .layout-where section.section2 .left p { font-size: 16px; color: #000; }
.layout-home section.section5, .layout-life section.section5 { padding: 80px 0 20px; }
.layout-home section.section5 h1, .layout-life section.section5 h1 { font-size: 40px; color: #313942; margin: 0 0 40px; }
.layout-home section.section5 .subp, .layout-life section.section5 .subp { color: #000; width: 540px; max-width: 100%; display: block; margin: 0 auto; margin-bottom: 90px; }
.layout-life section.section6 { padding: 20px 0 80px; }
/* Breathing room between the hero image and the first content box
(Küldetés) — without this, the h1 sits flush against the panoramic
photo which reads as cramped. Same treatment as .layout-home. */
.layout-park section.section2 { padding-top: 70px; }
.layout-park section.section2 .content .row:first-child { padding-top: 10px; }
/* Kortárs művészet (Contemporary art) — the sculpture carousel cycles
through images of very different aspect ratios (some tall busts, some
wide arches). Without a fixed frame the page jumps every time the
visitor clicks a new sculpture name. Solution:
- Give the carousel-item a fixed 4/3 aspect ratio (matches most
building/landscape photos elsewhere on /park so it looks native).
- object-fit: contain scales each image to fit inside without
cropping — portraits get white bars, landscapes fill edge-to-edge.
- Sculpture buttons on the left column stay put — no more jump. */
#statue-carousel .carousel-item { aspect-ratio: 4 / 3; background: #f5f5f5; }
#statue-carousel .carousel-item a,
#statue-carousel .carousel-item img { display: block; width: 100%; height: 100%; }
#statue-carousel .carousel-item img { object-fit: contain; }
.layout-park section.section1 { padding: 50px 0 10px; }
.layout-park section.section1 h1 { font-size: 60px; color: #313942; margin: 0 0 50px; }
.layout-park section.section1 .subp, .layout-renters section.section1 .subp, .layout-school section.section1 .subp { max-width: 1100px; display: block; margin: 0 auto; }
.layout-park .section3 { padding: 120px 0 90px; }
.layout-park .section3 .news-box .details strong { font-size: 20px; }
.layout-park .section3 h1 { font-size: 60px; color: #313942; margin: 0 0 50px; }
.layout-contact .section1 { padding: 80px 0; }
.layout-contact .section1 h1, .layout-contact .section3 h1 { margin: 0 0 50px; }
section.articles { padding: 120px 0 90px; }
section.articles h1 { margin-bottom: 70px; }
section.contact { background: #7cb541; padding: 40px 0; }
section.contact h2 { font-size: 22px; color: #1d2228; margin: 0 0 40px; text-transform: uppercase; }
section.contact ul.menu { color: #fff; margin: 0; list-style-type: none; padding: 0; text-transform: uppercase; }
section.contact ul.menu li { margin-bottom: 6px; }
section.contact ul.menu a { color: #fff; font-size: 16px; }
/* The band's four columns (template-parts/contact-section.php): each as wide
as its content, the free space split equally between them, so the gaps
match whatever width the language gives each column. When the row is
too short (992-1199px, English) only the inquiries paragraph gives way
and wraps; the menus and the address keep their width, so the gaps stay
equal at the 40px minimum. Below 992px the two menus share the first row
and the address and the inquiries text wrap underneath. */
section.contact .gp-footer-cols { display: flex; justify-content: space-between; column-gap: 40px; }
section.contact .gp-footer-cols > * { flex: 0 0 auto; }
section.contact .gp-footer-cols > .gp-footer-right { flex: 0 1 auto; min-width: 0; }
@media (max-width: 991px) {
section.contact .gp-footer-cols { flex-wrap: wrap; justify-content: flex-start; gap: 24px 30px; }
section.contact .gp-footer-cols > * { flex: 0 1 auto; min-width: 0; }
section.contact .gp-footer-cols > ul.menu { flex: 1 1 160px; }
}
/* Phones: the menus stack. Side by side they'd only fit on some phone
widths, and long labels ("THE GRAPHISOFT PARK") would break mid-name. */
@media (max-width: 575px) {
section.contact .gp-footer-cols > ul.menu { flex-basis: 100%; }
}
.layout-contact section.section1 ul, section.contact ul.contact { list-style-type: none; padding: 0; font-size: 16px; color: #fff; margin: 0; }
section.contact ul.contact a { text-decoration: underline; }
section.contact ul.contact img { display: inline-block; margin-right: 5px; margin-left: 0; }
section.contact p.office { font-size: 20px; text-transform: uppercase; color: #fff; font-weight: 600; }
.layout-contact section.section1 ul { color: #7cb541; }
.layout-contact section.section1 ul a, section.contact ul.contact a { color: #fff; }
section.contact a { color: #fff; }
.layout-contact section.section1 ul a { color: #7cb541; }
.layout-contact section.section1 ul strong, section.contact ul.contact strong { text-transform: uppercase; color: #1d2228; }
.layout-default section.body { padding: 70px 0; }
.layout-default section.body img { max-width: 100%; }
.layout-default section.body h1 { font-size: 60px; color: #313942; margin-bottom: 50px; }
.layout-default section.body h2, .layout-default section.body h3, .layout-default section.body h4, .layout-default section.body h5, .layout-default section.body h6 { font-size: 20px; font-weight: 700; }
.layout-default section.body p { font-size: 14px; color: #000; }
section.header { height: calc(100vh - 62px); background-position: center; background-size: cover; display: flex; align-items: center; background-attachment: fixed; background-color: #ccc; position: relative; }
/* Floating social-icon cluster at the top-left of the hero. Rounded
white pills so they stay legible against any hero background image.
Same top:80px on both hero variants — inner-page .header hero and
front-page .section1 hero — since neither has a top offset anymore
and both need to clear the 62px fixed navbar.
z-index 200 keeps us above the front page's .grid (z-index:101) and
the animated .bg-child layers, which otherwise cover us on scroll. */
/* Social icons in the navbar — sit inline with the language switcher
on the right end of the header. Each anchor is a small pill matching
the .lang-switcher visual weight. */
.navbar-main .nav-social {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: 8px;
padding: 0 6px;
}
.navbar-main .nav-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.06);
color: #313942;
/* 500ms matches the .nav-link + logo transitions so the whole nav
(background, menu text, logo, social pills, social icons inside)
cross-fades as a single visual unit when .scrolled toggles. */
transition: background 500ms, color 500ms;
}
.navbar-main .nav-social a:hover {
background: #7cb541;
color: #fff;
}
/* Glyph 20px inside a 30px pill (was 16 in 32) — client asked for a
bigger icon in a smaller frame, 2026-09 review. */
.navbar-main .nav-social img,
.navbar-main .nav-social svg { width: 20px; height: 20px; display: block; }
.navbar-main .nav-social img,
.navbar-main .nav-social svg { transition: filter 500ms, opacity 500ms; }
.navbar-main .nav-social img { filter: brightness(0); opacity: 0.75; }
.navbar-main .nav-social a:hover img { opacity: 1; filter: brightness(0) invert(1); }
/* Hero-top state on layout-home: nav is transparent, so social pills
need a pale-on-transparent look and the icons need to be white. */
body.layout-home:not(.scrolled) .navbar-main:not(.over-grid) .nav-social a {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
/* Hover over the home photo's sky: "inverz kék" (client, 2026-09 review) —
the white-on-blue icon flips to blue-on-white. The blue is the site's
#2E7E94, the same one on the development gallery name plates. */
body.layout-home:not(.scrolled) .navbar-main:not(.over-grid) .nav-social a:hover {
background: #fff;
color: #2E7E94;
}
body.layout-home:not(.scrolled) .navbar-main:not(.over-grid) .nav-social img,
body.layout-home:not(.scrolled) .navbar-main:not(.over-grid) .nav-social svg {
filter: brightness(0) invert(1);
opacity: 1;
}
/* Hover on the transparent-nav state turns the pill white. The icons must
drop their white-out filter here or they vanish into it — which is exactly
what the client reported in the 2026-09 review ("fehérre vált és nem
látszik az ikonból semmi"). Resetting the filter lets the SVGs fall back
to fill="currentColor", which the :hover rule above sets to the blue.
All three are SVGs now — Facebook used to be a white PNG, which no colour
rule could reach, so it stayed invisible on hover. */
body.layout-home:not(.scrolled) .navbar-main:not(.over-grid) .nav-social a:hover img,
body.layout-home:not(.scrolled) .navbar-main:not(.over-grid) .nav-social a:hover svg {
filter: none;
}
@media (max-width: 1199px) {
/* On the mobile collapsed menu, put the row on its own line with a
little top gap so it doesn't crowd the language switcher. */
.navbar-main .nav-social { margin: 8px 0 0; padding: 0; }
}
/* Legacy floating hero-social styling — kept as a no-op safety net in
case any page still emits a .hero-social element after the migration
to the navbar. Selectors resolve to nothing so nothing paints. */
section.header .hero-social,
section.section1 .hero-social {
position: absolute;
top: 80px;
left: 20px;
display: flex;
gap: 10px;
z-index: 200;
}
section.header .hero-social a,
section.section1 .hero-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.85);
color: #313942;
text-decoration: none;
transition: 200ms;
}
section.header .hero-social a:hover,
section.section1 .hero-social a:hover {
background: #fff;
color: #7cb541;
transform: translateY(-2px);
}
section.header .hero-social img,
section.header .hero-social svg,
section.section1 .hero-social img,
section.section1 .hero-social svg { width: 22px; height: 22px; display: block; }
section.header .hero-social img,
section.section1 .hero-social img { filter: brightness(0); opacity: 0.75; }
section.header .hero-social a:hover img,
section.section1 .hero-social a:hover img { opacity: 1; filter: none; }
@media (max-width: 768px) {
section.header .hero-social,
section.section1 .hero-social { top: 12px; left: 12px; gap: 8px; }
section.header .hero-social a,
section.section1 .hero-social a { width: 36px; height: 36px; border-radius: 8px; }
section.header .hero-social img,
section.header .hero-social svg,
section.section1 .hero-social img,
section.section1 .hero-social svg { width: 18px; height: 18px; }
}
section.header .bg-mobile { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-position: center; background-size: cover; }
section.header > .text { flex: 1; text-align: center; max-width: 1000px; margin: 0 auto; padding: 0 15px; position: relative; z-index: 2; }
section.header h1 { color: #fff; font-size: 60px; margin: 0; }
section.header h2 { color: #fff; font-size: 25px; margin: 20px 0 0; }
/* Hero → Text position = left / right half (hero-header.php). Computers:
the text takes that half of the photo, left-aligned, so the subject on
the other half stays clear. Phones: no room for halves — the text moves
to the top over a dark fade instead, leaving the lower part of the photo
uncovered. The fade sits above .bg-mobile and below the text (z 2). */
@media (min-width: 992px) {
section.header.text-pos-left > .text,
section.header.text-pos-right > .text { flex: 0 0 50%; max-width: 50%; margin: 0; padding: 0 3vw 0 6vw; text-align: left; }
section.header.text-pos-right > .text { margin-left: auto; padding: 0 6vw 0 3vw; }
}
@media (max-width: 991px) {
section.header.text-pos-left,
section.header.text-pos-right { align-items: flex-start; }
/* 62px = the fixed-top navbar the hero starts behind; h2's own 20px
top margin then gives the gap below it. */
section.header.text-pos-left > .text,
section.header.text-pos-right > .text { padding-top: 62px; }
section.header.text-pos-left::before,
section.header.text-pos-right::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.6) 35%, rgba(0, 0, 0, 0) 55%); z-index: 1; }
}
/* Narrow phones: a long intro (Investors: ~340 characters) would otherwise
run down over the middle of the photo. */
@media (max-width: 575px) {
section.header.text-pos-left h2,
section.header.text-pos-right h2 { font-size: 18px; }
}
.info-box { margin-bottom: 20px; font-size: 20px; color: #5b5b5b; text-align: center; }
.info-box .number { font-size: 30px; color: #7cb541; display: block; margin-bottom: 20px; }
.news-box { display: flex; margin-bottom: 20px; }
.news-box > div { flex: 1; }
.news-box .details { font-size: 16px; color: #000; padding-left: 25px; flex: 0 0 65%; }
.news-box .details strong { font-size: 14px; color: #313942; display: block; margin-bottom: 5px; }
/* Equal-height card layout: each .news-box2 stretches to fill its row's
tallest sibling, and the description is line-clamped so visually all
three cards in a row read the same length. Data is preserved — the
clamp is purely visual via overflow:hidden + -webkit-line-clamp. */
.news-box2 { margin-bottom: 30px; height: 100%; display: flex; flex-direction: column; }
.news-box2 .details { display: flex; flex-direction: column; height: 100%; }
.news-box2 h2 { color: #7cb541; font-size: 17px; text-transform: uppercase; font-weight: 400; margin-top: 18px; margin-bottom: 16px; line-height: 1.35; }
.news-box2 h2 a { color: #7cb541; transition: 250ms; text-decoration: none; }
.news-box2 h2 a:hover { color: #476927; }
.news-box2 .info { margin-bottom: 10px; font-size: 14px; }
.news-box2 .info .date { color: #313942; }
.news-box2 .info .medium { color: #7cb541; position: relative; }
.news-box2 .info .medium:before { content: ''; width: 4px; height: 4px; background-color: #313942; display: inline-block; border-radius: 50%; vertical-align: middle; margin-right: 5px; margin-left: 5px; }
.news-box2 .short-desc { font-size: 16px; margin-bottom: 16px; text-align: justify; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.news-box2 .short-desc p { text-align: justify; margin-bottom: 8px; }
.news-box2 .short-desc p:last-child { margin-bottom: 0; }
/* Normalise everything inside short-desc to one consistent look — the
October-migrated data has some descriptions wrapped in , some in
, some plain . Force all descendants to the same
weight, size and inherited colour so editors don't have to clean the
underlying HTML. */
.news-box2 .short-desc,
.news-box2 .short-desc * {
font-weight: 400 !important;
font-size: 16px !important;
line-height: 1.5 !important;
text-transform: none !important;
color: inherit !important;
font-style: normal !important;
}
.news-box2 .short-desc h1,
.news-box2 .short-desc h2,
.news-box2 .short-desc h3,
.news-box2 .short-desc h4,
.news-box2 .short-desc h5,
.news-box2 .short-desc h6 {
margin: 0 0 8px !important;
}
/* "Read original" link — surfaces the external URL as a visible
affordance below the description, so the user can see where the
card links to (in addition to the title being clickable). */
.news-box2 .read-original { margin-top: auto; font-size: 14px; }
.news-box2 .read-original a { color: #7cb541; text-decoration: none; }
.news-box2 .read-original a:hover { color: #476927; text-decoration: underline; }
/* Graphi-story page: intro text on top, then a tabbed book selector. */
.graphi-story-page .graphi-intro { max-width: 820px; margin: 0 auto 50px; text-align: justify; font-size: 16px; line-height: 1.6; }
.graphi-story-page .graphi-intro p { margin-bottom: 14px; }
.graphi-story-page .graphi-books { margin-top: 40px; }
.graphi-story-page .graphi-books__title { font-size: 26px; color: #313942; font-weight: 400; text-align: center; margin-bottom: 24px; }
.graphi-story-page .graphi-books__tabs { border-bottom: 1px solid #d4d4d4; justify-content: center; gap: 6px; }
.graphi-story-page .graphi-books__tabs .nav-item { margin-bottom: -1px; }
.graphi-story-page .graphi-books__tabs .nav-link { background: transparent; border: 1px solid transparent; border-bottom: none; color: #313942; font-size: 15px; padding: 10px 22px; cursor: pointer; border-radius: 4px 4px 0 0; transition: 200ms; }
.graphi-story-page .graphi-books__tabs .nav-link:hover { background: #f5f7f3; color: #7cb541; }
.graphi-story-page .graphi-books__tabs .nav-link.active { background: #fff; border-color: #d4d4d4 #d4d4d4 #fff; color: #7cb541; font-weight: 500; }
.graphi-story-page .graphi-books__content { padding-top: 20px; }
.graphi-story-page .graphi-books__placeholder { padding: 80px 20px; text-align: center; color: #999; background: #fafafa; border: 1px dashed #d4d4d4; border-radius: 4px; font-style: italic; }
.graphi-story-page .graphi-books__content iframe { display: block; width: 100%; }
/* Single-article body: justify the prose and tone the h1 down to match
the smaller card-title direction. */
.single-gp_article .body .container { text-align: justify; }
.single-gp_article .body .container p { text-align: justify; margin-bottom: 14px; }
.single-gp_article .body .container h1 { font-size: 26px; margin-top: 24px; margin-bottom: 18px; line-height: 1.3; }
.single-gp_article .body .container h2 { font-size: 20px; margin-top: 20px; margin-bottom: 14px; }
.renter-box { border-bottom: 1px solid #d4d4d4; height: 100%; position: relative; padding-bottom: 60px; }
.renter-box .image { height: 100px; margin-bottom: 20px; }
.renter-box .image img { max-width: 50%; max-height: 100%; }
.renter-box .details { color: #000; font-size: 14px; margin-bottom: 15px; }
.renter-box .bottom { position: absolute; bottom: 20px; left: 0; width: 100%; display: flex; align-items: center; }
.renter-box .bottom > div { flex: 1; }
.renter-box .details .name { font-size: 31px; color: #313942; display: block; margin-bottom: 20px; }
.renter-box .details .description { text-align: justify; }
.renter-box .building { font-size: 20px; color: #313942; line-height: 20px; }
.renter-box .website { color: #7cb541; display: block; font-size: 16px; line-height: 13px; }
.renter-box .website a { color: #7cb541; }
.renter-box .btn { padding: 7px 12px; }
.job-box { margin-bottom: 40px; height: 100%; }
.job-box .image { margin-bottom: 45px; height: 100px; display: flex; align-items: center; }
.job-box .image > div { flex: 1; height: 100%; }
.job-box .image > div > img { max-width: 50%; max-height: 100%; }
.category-box { background: #313942; color: #fff; padding-bottom: 66%; }
.category-box .text { position: absolute; text-align: center; width: 100%; top: 50%; transform: translateY(-50%); text-transform: uppercase; z-index: 2; }
.category-box .text .name { font-size: 24px; line-height: 32px; display: block; }
.category-box .text .count { font-size: 14px; color: #7cb541; display: block; margin-top: 15px; }
.category-box:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 48px 0 48px 48px; border-color: transparent transparent transparent #7cb541; position: absolute; left: 0; top: 50%; margin-top: -48px; }
.gallery-box { position: relative; cursor: pointer; background: #313942; height: 100%; overflow: hidden; padding-bottom: 66%; }
.gallery-box .bg { background-position: center; background-size: cover; transition: 250ms transform; position: absolute; left: 0; top: 0; right: 0; bottom: 0; transform: scale(1); }
.gallery-box:hover .bg { transform: scale(1.05); }
.gallery-box .caption { position: absolute; left: 20px; bottom: 20px; max-width: calc(100% - 40px); color: #fff; text-transform: uppercase; transition: 250ms; visibility: visible; opacity: 1; background-color: #7cb541; padding: 8px 15px; }
/* Top-left "Rendering / Látványterv" badge — visually pairs with the
green title caption (same colour + weight) but sits in the opposite
corner so editors and visitors can spot renderings at a glance. */
.gallery-box .rendering-badge { position: absolute; left: 20px; top: 20px; color: #fff; text-transform: uppercase; background-color: #7cb541; padding: 6px 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; z-index: 2; }
/* Development-opportunity tiles (client review 2026-09: "A megnevezés háttere
más színű, azt hiszem kéket beszéltünk meg"). Blue name plate so future
development areas don't read as existing buildings.
#2E7E94 is the logo's own light blue (#ADDFE8) darkened to the point where
the white caption text clears WCAG AA — the light original is unreadable
under white. Change this one value if the client names a different blue. */
.gallery-box.is-development .caption { background-color: #2E7E94; }
.gallery-box.is-development .rendering-badge { background-color: #2E7E94; }
/* Long names ("Északi fejlesztési terület", "Generator Building") wrap onto a
second line inside the plate; with nowrap they ran past the tile edge and
were clipped mid-word. The caption keeps the same 20px gap on the right as
on the left. A name that only just filled the tile before (Aquincum-Campus
at ~1200px wide) now breaks at its hyphen there; it was already losing its
right padding to the clip. At common desktop widths it's one line. */
.gallery-box .caption h1 { white-space: normal; line-height: 1.25; font-size: 18px; margin: 0; }
.gallery-box .caption .count { background: rgba(0, 0, 0, 0.5); display: inline-block; font-size: 14px; padding: 0 20px 0 0; }
.gallery-box .caption .count .icon { display: inline-block; background-color: #7cb541; background-image: url('assets/images/icons/gallery.png'); width: 40px; height: 40px; vertical-align: middle; background-position: center; background-repeat: no-repeat; margin-right: 20px; }
.gallery-box.has-desc:hover .caption { visibility: hidden; opacity: 0; bottom: -20px; }
.gallery-box .description { visibility: hidden; opacity: 0; position: absolute; left: 0; width: 100%; color: #ffffff; font-size: 14px; padding: 10px 20px; background: rgba(49, 57, 66, 0.8); bottom: -30px; transition: 250ms; }
.gallery-box.has-desc:hover .description { bottom: 0px; visibility: visible; opacity: 1; }
/* Szolgáltatások + Élet a Parkban intro blocks (page-life.php, added 2026-09).
Both are centred single-column copy set at a comfortable reading measure —
full-width paragraphs on a 1440px viewport are unreadable. */
.services-intro, .life-intro { padding: 60px 0 20px; }
.services-intro__text, .life-intro__text, .buildings-intro__text { max-width: 860px; margin: 0 auto; }
.services-intro__text p, .life-intro__text p, .buildings-intro__text p { font-size: 16px; line-height: 1.7; color: #313942; margin-bottom: 18px; }
/* The Épületek intro lives inside the galleries' section1 (which brings the
top padding); this is the gap down to the tiles. */
.buildings-intro { margin-bottom: 50px; }
.life-intro__subtitle { font-size: 26px; color: #7cb541; margin: 0 0 30px; text-transform: uppercase; }
/* Social row closing the Szolgáltatások intro — the client's copy ends by
pointing at the Facebook / LinkedIn / Instagram pages, so the icons sit
right under it. Same green pill idiom as the rest of the site. */
.services-intro__social { list-style: none; padding: 0; margin: 28px 0 0; display: flex; justify-content: center; gap: 14px; }
.services-intro__social li { display: inline-flex; }
.services-intro__social a {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 10px;
background: #7cb541; color: #fff; transition: background 250ms;
}
.services-intro__social a:hover { background: #476927; }
.services-intro__social img, .services-intro__social svg { width: 22px; height: 22px; display: block; }
.services-intro__social img { filter: brightness(0) invert(1); }
.contact-person-box { display: flex; }
.contact-person-box.inline { display: block; }
.contact-person-box > div { flex: 1; }
.contact-person-box .image { flex: 0 0 170px; }
.contact-person-box.inline .image { margin-bottom: 40px; }
.contact-person-box.inline .image img { display: block; margin: 0 auto; }
.contact-person-box .details { padding-left: 46px; }
.contact-person-box.inline .details { text-align: center; padding: 0; }
.contact-person-box .details .name { font-size: 18px; color: #313942; margin: 0 0 10px; text-transform: uppercase; }
.contact-person-box .details .title { margin-bottom: 10px; font-size: 14px; }
.contact-person-box .details .role { color: #7cb541; font-size: 16px; position: relative; margin-bottom: 40px; }
.contact-person-box .details .role:after { content: ''; width: 45px; height: 4px; background: #7cb541; position: absolute; bottom: -20px; left: 0; }
.contact-person-box.inline .details .role:after { left: 50%; margin-left: -22px; }
.contact-person-box .details .rest, .contact-person-box .details .rest a { color: #000; }
.camp-box { position: relative; padding-bottom: 35px; height: 100%; margin-bottom: 30px; }
.camp-box .btn { position: absolute; bottom: 30px; }
.camp-box .image { margin-bottom: 20px; }
.camp-box h2 { font-size: 26px; color: #313942; margin-bottom: 30px; }
.camp-box p { color: #000; }
.camp-box strong { color: #313942; }
.camp-box ul { list-style-type: none; margin: 0; padding-left: 10px; color: #7cb541; margin-bottom: 20px; }
.camp-box ul li { margin-bottom: 20px; }
.history-box { position: relative; margin-bottom: 60px; }
/* Cap every history-box image at 477×284 (5:3) — matches the size the
original 1998–2014 images already render at naturally. New images
have larger source files (up to 2500px wide) and were bursting out
of that visual box; capping the container to 477px width brings them
back in line, and object-fit: cover crops mismatched aspects so
heights stay uniform across the timeline. Alignment (left/right)
is preserved via margin — text-align on parent won't move a
block-level container. */
.history-box .image { max-width: 477px; aspect-ratio: 5 / 3; overflow: hidden; position: relative; }
.history-box.nth-1 .image { margin-left: auto; } /* right-align in nth-1 pairs */
.history-box .image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.history-box.nth-0 .image { text-align: left; }
.history-box.nth-1 .image { text-align: right; }
/* "Rendering / Látványterv" badge on Történet + Jövőbeli images. Same
green pill as the gallery tiles on /epuletek so the marker means the
same thing everywhere on the site.
The .details text card overlaps the image and swaps sides per row
(nth-0 right, nth-1 left), so the badge mirrors to the opposite edge
and never lands underneath it. */
.history-box .image .rendering-badge {
position: absolute; top: 12px; z-index: 2;
background-color: #7cb541; color: #fff;
text-transform: uppercase; font-size: 12px; font-weight: 700;
letter-spacing: 0.5px; padding: 5px 10px; line-height: 1;
}
.history-box.nth-0 .image .rendering-badge { left: 12px; }
.history-box.nth-1 .image .rendering-badge { right: 12px; }
.history-box .details { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 50%; background: #fff; padding: 15px 35px; color: #313942; line-height: 18px; }
.history-box.nth-0 .details { left: auto; right: 0; }
.history-box .details h2 { font-size: 31px; color: #7cb541; margin: 0 0 20px; }
.content .row { margin: 0; }
.content .row > div { padding: 0; margin-bottom: 80px; }
.content .row .order-lg-first { padding-right: 60px; }
.content .row .order-lg-last { padding-left: 60px; }
.content .row .details.order-lg-first { padding-left: 160px; }
.content .row .details.order-lg-last { padding-right: 160px; }
.content .details { color: #000; }
.content .details h1 { font-size: 60px; color: #313942; margin-bottom: 0; }
.content .details h3 { font-size: 30px; }
.content .details h3 em { color: #7cb541; }
.content .details .date { color: #7cb541; font-size: 16px; }
.content .details .text { margin-top: 50px; }
.content .details p { margin-bottom: 20px; }
.content .details ul.carind { list-style-type: none; padding: 0; margin: 0; margin-top: 60px; }
.content .details ul li { display: inline-block; text-transform: uppercase; font-size: 14px; color: #7cb541; padding: 10px 20px; border: 1px solid #7cb541; margin: 0 18px 18px 0; font-weight: 700; cursor: pointer; }
.content .details ul li.active { color: #fff; background: #7cb541; }
footer { background: #1d2228; color: #5b5b5b; font-size: 16px; padding: 30px 0; }
footer ul.menu { list-style-type: none; padding: 0; margin: 0; }
footer ul.menu li { display: inline-block; }
footer ul.menu a { color: #5b5b5b; }
/* Stop the browser from breaking `` labels in the contact-style
address blocks (`E-MAIL:`, `FAX:`, etc.). The hyphen in `E-MAIL` was
acting as a soft-break point and producing a stray `E-` on one line
with `MAIL: info@graphisoftpark.com` wrapping below.
Scopes:
- footer (footer-right contact block)
- .contact section (template-parts/contact-section.php — bottom of
many pages)
- .section1 .col-lg-3 ul (page-contact.php's left column) */
footer strong,
section.contact strong,
section.section1 .col-lg-3 ul strong { white-space: nowrap; }
/* 404 page card — centered, large broken-chain icon + heading, matches
the live site's "A lap nem található" error page aesthetic. */
.error-404-card { max-width: 600px; margin: 60px auto; }
.error-404-icon { font-size: 80px; color: #c5302a; }
.error-404-card h1 { color: #313942; text-transform: uppercase; }
/* Investor page intro card — gray background behind the yearly-results
heading + date + table. Scoped to the investor page template so the
shared `.section1 .body` selector doesn't accidentally style every
other page's intro paragraph. `!important` because cascading text-
formatting rules from the parent / WP core were silently winning when
the rule was first added (browsers showed white instead of gray). */
.layout-investors section.section1 > .container > .body {
background: #f4f4f4 !important;
padding: 40px 30px !important;
margin-bottom: 30px !important;
}
.leaflet-container { background: #e7e5e6; }
.leaflet-container a.leaflet-popup-close-button { outline: none; width: 36px; height: 36px; border: 2px solid #fff; background: #7cb541; font-size: 26px; color: #fff; border-radius: 50%; text-align: center; top: -12px; right: -12px; line-height: 29px; padding: 0; }
.leaflet-popup-content-wrapper { border-radius: 20px; }
.leaflet-popup-content { padding: 15px; font-size: 14px; color: #000; margin: 0; user-select: none; }
.leaflet-popup-content h1, #map .panel h1, .map-panel-mobile h1 { font-size: 16px; color: #7cb541; font-weight: 400; text-transform: uppercase; margin-bottom: 20px; }
.leaflet-popup-content h2, #map .panel h2, .map-panel-mobile h2 { font-size: 14px; color: #313942; text-transform: uppercase; font-weight: 400; margin-bottom: 20px; }
#map .panel { width: 300px; position: absolute; right: 0; z-index: 1000; background: #fff; top: 0; margin-top: 20px; border-radius: 20px 0 0 20px; padding: 20px; max-height: calc(100% - 40px); max-width: 100%; overflow-y: auto; font-size: 14px; color: #000; user-select: none; box-shadow: 0 0 15px rgba(50, 50, 50, 0.75); }
.map-panel-mobile { padding: 20px 0; display: none; }
@media(min-width: 768px) {
#map { padding-bottom: 66.01%; }
.map-fs { display: block !important; }
.show-on-map { display: none !important; }
}
@media(max-width: 767px) {
.map-fs { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000; display: none; }
.map-fs .close { position: absolute; top: 10px; right: 10px; background-image: url('assets/images/icons/close.png'); z-index: 1000; width: 25px; height: 25px; background-color: #000; background-repeat: no-repeat; background-position: center; border-radius: 5px; }
.map-fs #map { width: 100%; height: 100%; }
}
.company .icon { width: 20px; height: 20px; display: inline-block; margin-right: 15px; background-image: url('assets/images/icons/company_icons.png'); vertical-align: middle; }
.company .icon-building { background-position-y: 0px; }
.company .icon-address { background-position-y: -36px; }
.company .icon-phone { background-position-y: -72px; }
.company .icon-email { background-position-y: -108px; }
.company .icon-website { background-position-y: -144px; }
.h1b { font-size: 60px; }
.company-filter { display: flex; flex-direction: column; min-height: 340px; }
.company-filter .input-group { border: 1px solid #c5c5c5; margin-bottom: 20px; min-height: 44px; }
.company-filter .form-control { background: #7cb541; border: none; color: #fff; font-size: 16px; }
.company-filter .form-control::placeholder { color: #fff; }
.company-filter .input-group-text { border-color: #7cb541; border-radius: 0; background: #313942; padding: 0 10px; cursor: pointer; }
.company-filter .list { border: 1px solid #c5c5c5; overflow-y: auto; }
.company-filter .list > div:not(:last-child) { border-bottom: 1px solid #c5c5c5; }
.company-filter .list > div { padding: 15px 20px; color: #313942; font-size: 16px; cursor: pointer; display: flex; }
.company-filter .list > div:nth-child(even) { background: #efefef; }
.company-filter .list > div:hover, .company-filter .list > div.active { color: #fff; background: #7cb541; }
.company-filter .list .title { flex: 1; }
.company-filter .list a { align-self: center; color: inherit; display: none; font-weight: bold; }
@media(max-width: 767px) {
.company-filter .list > div.active a { display: block; }
}
.lg-outer .lg-video-cont { max-width: 100% !important; padding: 0 !important; height: 100%; }
.lg-outer .lg-video { padding: 0 !important; height: 100vh !important; overflow-y: auto; }
.lg-html-content { background: #332f2e; color: #fff; padding: 60px 80px 100px; text-align: left; white-space: initial; min-height: 100%; }
.lg-html-content * { line-height: initial; }
.lg-html-content p { text-align: justify; }
.carousel-control-prev, .carousel-control-next { background-size: 50%, 50%; background-image: none; background-color: #fff; height: 100%; }
.carousel-control-prev i { font-size: 55px; color: #000; opacity: 0.3; padding: 10px 0; }
.carousel-control-next i { font-size: 55px; color: #000; opacity: 0.3; padding: 10px 0; }
#services .card { border-radius: 0; border: 1px solid #c5c5c5; margin: 0; position: relative; display: inline-block; width: 100%; }
#services .card-header { background: none; border: none; background: transparent; border-radius: 0; padding: 0; width: 90%; display: inline-block; }
#services .card-body { padding: 0; }
#services .card-body ul { margin: 0; list-style-type: none; padding: 0; }
#services .card-body ul li { font-size: 16px; color: #313942; padding: 15px 50px; display: block; cursor: pointer; transition: 250ms; }
#services .card-body ul li.active { background: #313942; color: #fff; }
#services .card-body ul li:not(:last-child) { border-bottom: 1px solid #c5c5c5; }
#services .card-header .btn { font-size: 22px; color: #313942; text-transform: uppercase; width: 100%; text-align: left; line-height: 22px; padding: 17px 17px 18px 17px; cursor: pointer; position: relative; border: none; }
#services .card-header .btn .count { text-transform: none; }
#services .card-header .btn:not(.collapsed), #services .card-header .btn.active { color: #ffffff; background-color: #313942; }
#services .btn-box { width: 9%; height: 58px; background-color: #313942; display: inline-block; background-position: center; background-repeat: no-repeat; vertical-align: bottom; background-size: 70% auto; color: #fff; }
#services .card-header .btn:not(.collapsed):before, #services .btn-box.active { background-color: #7cb541; }
/* Service category icons. The `.card.` class on the wrapper picks the
matching PNG from assets/images/icons/map/. Categories without a dedicated
icon (e.g. packet_box) fall through to the bare dark box. */
#services .card.packet_box .btn-box,
#services .card.packet_box-en .btn-box { background-image: url('assets/images/icons/map/packet_box.svg'); }
#services .card.restaurant .btn-box { background-image: url('assets/images/icons/map/restaurant.png'); }
#services .card.coffee_shop .btn-box { background-image: url('assets/images/icons/map/coffee_shop.png'); }
#services .card.bus .btn-box { background-image: url('assets/images/icons/map/bus.png'); }
#services .card.ship_dock .btn-box { background-image: url('assets/images/icons/map/ship_dock.png'); }
#services .card.conference_room .btn-box,
#services .card.conference_room-2 .btn-box { background-image: url('assets/images/icons/map/conference_room.png'); }
#services .card.charger .btn-box { background-image: url('assets/images/icons/map/charger.png'); }
#services .card.car_wash .btn-box { background-image: url('assets/images/icons/map/car_wash.png'); }
#services .card.bike_shed .btn-box { background-image: url('assets/images/icons/map/bike_shed.png'); }
#services .card.bicycle_path .btn-box { background-image: url('assets/images/icons/map/bicycle_path.png'); }
#services .card.gourd_filler .btn-box { background-image: url('assets/images/icons/map/gourd_filler.png'); }
#services .card.free_library .btn-box,
#services .card.szabadido .btn-box,
#services .card.szabadido-en .btn-box { background-image: url('assets/images/icons/map/free_library.png'); }
#services .card.yoga_park .btn-box { background-image: url('assets/images/icons/map/yoga_park.png'); }
#services .card.health .btn-box { background-image: url('assets/images/icons/map/health.png'); }
#services .card.smoking_area .btn-box { background-image: url('assets/images/icons/map/smoking_area.png'); }
#services .card.grocery .btn-box { background-image: url('assets/images/icons/map/grocery.png'); }
#services .card.cosmetology .btn-box { background-image: url('assets/images/icons/map/cosmetology.png'); }
#services .card.choir .btn-box { background-image: url('assets/images/icons/map/choir.png'); }
#services .card.sport .btn-box { background-image: url('assets/images/icons/map/sport.png'); }
#services .card.laundry .btn-box,
#services .card.laundry-en .btn-box { background-image: url('assets/images/icons/map/laundry.svg'); }
#services .card.fountain .btn-box,
#services .card.fountain-en .btn-box { background-image: url('assets/images/icons/map/fountain.svg'); }
/* The taxonomy filter on EN categories adds a `-en` suffix to the class,
so EN cards also get the matching icon. */
#services .card.restaurant-en .btn-box { background-image: url('assets/images/icons/map/restaurant.png'); }
#services .card.coffee_shop-en .btn-box { background-image: url('assets/images/icons/map/coffee_shop.png'); }
#services .card.bus-en .btn-box { background-image: url('assets/images/icons/map/bus.png'); }
#services .card.ship_dock-en .btn-box { background-image: url('assets/images/icons/map/ship_dock.png'); }
#services .card.conference_room-en .btn-box,
#services .card.conference_room-2-en .btn-box { background-image: url('assets/images/icons/map/conference_room.png'); }
#services .card.charger-en .btn-box { background-image: url('assets/images/icons/map/charger.png'); }
#services .card.car_wash-en .btn-box { background-image: url('assets/images/icons/map/car_wash.png'); }
#services .card.bike_shed-en .btn-box { background-image: url('assets/images/icons/map/bike_shed.png'); }
#services .card.bicycle_path-en .btn-box { background-image: url('assets/images/icons/map/bicycle_path.png'); }
#services .card.gourd_filler-en .btn-box { background-image: url('assets/images/icons/map/gourd_filler.png'); }
#services .card.free_library-en .btn-box { background-image: url('assets/images/icons/map/free_library.png'); }
#services .card.yoga_park-en .btn-box { background-image: url('assets/images/icons/map/yoga_park.png'); }
#services .card.health-en .btn-box { background-image: url('assets/images/icons/map/health.png'); }
#services .card.smoking_area-en .btn-box { background-image: url('assets/images/icons/map/smoking_area.png'); }
#services .card.grocery-en .btn-box { background-image: url('assets/images/icons/map/grocery.png'); }
#services .card.cosmetology-en .btn-box { background-image: url('assets/images/icons/map/cosmetology.png'); }
#services .card.choir-en .btn-box { background-image: url('assets/images/icons/map/choir.png'); }
#services .card.sport-en .btn-box { background-image: url('assets/images/icons/map/sport.png'); }
img.grayscale { transition: 500ms filter; filter: grayscale(100%); }
@media(max-width: 1600px) {
.navbar-main .nav-link { font-size: 14px; }
.layout-home section.section1 .grid .cell .hover h1 { font-size: 24px; line-height: initial; }
.layout-home section.section1 .grid .cell .hover p { font-size: 14px; }
.info-box .number { font-size: 28px; }
.history-box .details { padding: 10px 20px; font-size: 14px; }
.content .row .details.order-lg-first { padding-left: 80px; }
.content .row .details.order-lg-last { padding-right: 80px; }
}
@media (min-width: 992px) {
.layout-home section.section1 .grid .cell:hover .hover { visibility: visible; opacity: 1; }
.layout-home section.section1 .grid .cell:hover .label { visibility: hidden; opacity: 0; }
}
@media(max-width: 991px) {
.navbar-main { padding: 0; }
.navbar-main .nav-link { padding: 4px 0; }
.navbar-collapse { padding: 10px; }
body.layout-home:not(.scrolled) .navbar-main:not(.over-grid) .navbar-collapse { background: rgba(0, 0, 0, .8); }
section.header h1 { font-size: 28px; }
section.header h2 { font-size: 20px; }
section.header .overlay { display: none; }
section.header .overlay-mobile { display: block; }
.content .row .details { padding: 0 20px !important; }
.history-box { margin-bottom: 20px; }
.history-box .image { text-align: center !important; }
.history-box .details { position: relative; width: 100%; transform: none; margin-top: 20px; }
.layout-life .sub-header-h1, .layout-investors section.section1 .body h1, .layout-park section.section1 h1, section.articles h1, .layout-renters section.section2 .left h1, .layout-life section.section4 .left h1, .layout-where section.section2 .left h1, .layout-contact .section1 h1, .layout-contact .section3 h1 { font-size: 35px; }
.h1b { font-size: 45px; }
.layout-home section.section1 .text { left: 0; width: 100%; padding: 10px; }
.layout-home section.section1 .text h1 { font-size: 30px; }
.layout-home section.section1 .text p { font-size: 16px; }
/* Mobile 6-tile grid: 2 cols × 3 rows. 33.3333vh height keeps the
stack at ~100vh total (matches the desktop coverage). */
.layout-home section.section1 .grid .cell { flex: 0 0 50%; height: 33.3333vh; }
.layout-home section.section1 .grid .cell .hover .more, .layout-home section.section1 .grid .cell .label { font-size: 12px; left: 20px; bottom: 20px; }
.layout-home section.section1 .grid .cell .hover { padding: 20px; }
.layout-home section.section1 .grid .cell .hover h1 { font-size: 20px; line-height: initial; }
.layout-home section.section1 .grid .cell .hover p { font-size: 11px; display: none; }
.layout-home section.section1 .grid .cell.hovered .hover { visibility: visible; opacity: 1; }
.layout-home section.section1 .grid .cell.hovered .label { visibility: hidden; opacity: 0; }
.layout-investors section.section1 .body img { max-width: 100%; }
.layout-investors section.section1 .accordion .card .card-header .btn,
.layout-park section.articles .accordion .card .card-header .btn { text-align: left; }
.content .details h1 { font-size: 30px; }
.content .row .order-lg-first, .content .row .order-lg-last { padding: 0; }
.renter-box .bottom { position: relative; bottom: 0; left: 0; display: block; }
.layout-park section.section1 .subp, .layout-renters section.section1 .subp, .layout-school section.section1 .subp { padding: 0 15px; font-size: 16px; }
.layout-renters section.section1 { padding-bottom: 0; }
.layout-renters section.section2 { padding-top: 0; }
#map .panel { display: none; }
.map-panel-mobile { display: block; }
section.header { background-image: none !important; }
section.header .bg-mobile { display: block; }
}
/* ==================================================================
Cookie consent — see inc/cookie-consent.php + assets/js/cookie-consent.js
==================================================================
Two visible components (both hidden until JS shows them):
1. Banner — bottom-fixed strip, first visit only
2. Modal — centered card, opened from banner or footer reopen link
Plus a persistent floating "Cookie beállítások" reopen link in the
bottom-left corner so visitors can change consent at any time.
And a `.gp-consent-embed` placeholder that stands in for third-party
iframes (Google Maps, FlippingBook) until the visitor opts in.
================================================================== */
.gp-cc-banner {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
background: #fff; border-top: 3px solid #7cb541;
box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
padding: 20px 24px; color: #313942;
font-family: inherit; font-size: 14px; line-height: 1.5;
}
.gp-cc-banner__inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.gp-cc-banner__text { flex: 1 1 400px; min-width: 300px; }
.gp-cc-banner__title { font-size: 18px; margin: 0 0 6px; color: #313942; }
.gp-cc-banner__text p { margin: 0; }
.gp-cc-banner__text a { color: #7cb541; text-decoration: underline; }
.gp-cc-banner__buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.gp-cc-btn {
display: inline-block; padding: 10px 18px; font-size: 14px;
font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
border: 1px solid transparent; border-radius: 0; cursor: pointer;
font-family: inherit; transition: background 150ms, color 150ms;
}
.gp-cc-btn--accept { background: #7cb541; color: #fff; }
.gp-cc-btn--accept:hover { background: #6ba135; }
.gp-cc-btn--reject { background: transparent; color: #313942; border-color: #313942; }
.gp-cc-btn--reject:hover { background: #313942; color: #fff; }
.gp-cc-btn--secondary { background: transparent; color: #5b5b5b; border-color: #ccd0d4; }
.gp-cc-btn--secondary:hover { background: #f6f7f7; color: #313942; }
.gp-cc-modal {
position: fixed; inset: 0; z-index: 10000;
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.gp-cc-modal__overlay { position: absolute; inset: 0; background: rgba(49, 57, 66, 0.55); }
.gp-cc-modal__dialog {
position: relative; background: #fff; max-width: 560px; width: 100%;
padding: 32px; color: #313942;
max-height: calc(100vh - 48px); overflow-y: auto;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.gp-cc-modal__title { font-size: 22px; margin: 0 0 8px; color: #313942; }
.gp-cc-modal__intro { font-size: 14px; color: #5b5b5b; margin: 0 0 24px; }
.gp-cc-category { border-top: 1px solid #e5e5e5; padding: 16px 0; }
.gp-cc-category:last-of-type { border-bottom: 1px solid #e5e5e5; }
.gp-cc-category__row { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.gp-cc-category__label { font-size: 16px; font-weight: 600; text-transform: uppercase; color: #313942; letter-spacing: 0.5px; }
.gp-cc-category__desc { font-size: 13px; color: #5b5b5b; margin: 6px 0 0; }
.gp-cc-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.gp-cc-toggle input { opacity: 0; width: 0; height: 0; }
.gp-cc-toggle__slider {
position: absolute; inset: 0; background: #ccd0d4; border-radius: 12px;
cursor: pointer; transition: background 150ms;
}
.gp-cc-toggle__slider::before {
content: ''; position: absolute; left: 3px; top: 3px;
width: 18px; height: 18px; background: #fff; border-radius: 50%;
transition: transform 150ms;
}
.gp-cc-toggle input:checked + .gp-cc-toggle__slider { background: #7cb541; }
.gp-cc-toggle input:checked + .gp-cc-toggle__slider::before { transform: translateX(20px); }
.gp-cc-toggle--locked .gp-cc-toggle__slider { opacity: 0.55; cursor: not-allowed; }
.gp-cc-modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
/* .gp-cc-reopen (the old floating bottom-left link) was retired
2026-08 — the reopen entry lives in the footer menu now, see
footer.php. Kept out of the stylesheet to keep the CSS clean. */
/* Placeholder rendered in place of a Google Maps / FlippingBook iframe
until the visitor consents. Same box size as the eventual iframe. */
.gp-consent-embed {
display: flex; align-items: center; justify-content: center;
background: #f6f7f7; border: 1px dashed #ccd0d4; color: #313942;
padding: 24px; text-align: center; box-sizing: border-box;
}
.gp-consent-embed__notice { max-width: 400px; }
.gp-consent-embed__title { font-weight: 700; text-transform: uppercase; font-size: 14px; margin: 0 0 8px; color: #7cb541; }
.gp-consent-embed__body { font-size: 13px; color: #5b5b5b; margin: 0 0 12px; line-height: 1.5; }
.gp-consent-embed iframe { max-width: 100%; }
@media (max-width: 640px) {
.gp-cc-banner { padding: 16px; }
.gp-cc-banner__buttons { flex-direction: column-reverse; width: 100%; }
.gp-cc-banner__buttons .gp-cc-btn { width: 100%; }
.gp-cc-modal__dialog { padding: 20px; }
.gp-cc-reopen { left: 8px; bottom: 8px; font-size: 11px; padding: 5px 10px; }
}