/* Theme Name: ΔΙΟΙΚΕΙΝ – ΕΠΙΧΕΙΡΕΙΝ Theme URI: https://www.dioikein.gr/ Author: ΔΙΟΙΚΕΙΝ – ΕΠΙΧΕΙΡΕΙΝ Author URI: https://www.dioikein.gr/ Description: Σύγχρονο, δίγλωσσο (GR/EN) custom block theme (FSE). Art direction: Claude Design. RES NON VERBA. Requires at least: 6.8 Tested up to: 6.8 Requires PHP: 8.1 Version: 0.2.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: dioikein */ /* ========================================================================= ΔΙΟΙΚΕΙΝ – ΕΠΙΧΕΙΡΕΙΝ — art-direction stylesheet Tokens → base → chrome → sections. Maps 1:1 to theme.json + patterns. ========================================================================= */ /* ---- self-hosted fonts (Greek + Latin subsets, no Google CDN) ---- */ @font-face{font-family:"Roboto Slab";font-weight:400;font-style:normal;font-display:swap; src:url("assets/fonts/roboto-slab-greek-400.woff2") format("woff2"); unicode-range:U+0370-03FF,U+1F00-1FFF,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;} @font-face{font-family:"Roboto Slab";font-weight:400;font-style:normal;font-display:swap; src:url("assets/fonts/roboto-slab-latin-400.woff2") format("woff2");unicode-range:U+0000-024F,U+2000-206F,U+20AC;} @font-face{font-family:"Roboto Slab";font-weight:700;font-style:normal;font-display:swap; src:url("assets/fonts/roboto-slab-greek-700.woff2") format("woff2"); unicode-range:U+0370-03FF,U+1F00-1FFF,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;} @font-face{font-family:"Roboto Slab";font-weight:700;font-style:normal;font-display:swap; src:url("assets/fonts/roboto-slab-latin-700.woff2") format("woff2");unicode-range:U+0000-024F,U+2000-206F,U+20AC;} @font-face{font-family:"Roboto";font-weight:400;font-style:normal;font-display:swap; src:url("assets/fonts/roboto-greek-400.woff2") format("woff2"); unicode-range:U+0370-03FF,U+1F00-1FFF,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;} @font-face{font-family:"Roboto";font-weight:400;font-style:normal;font-display:swap; src:url("assets/fonts/roboto-latin-400.woff2") format("woff2");unicode-range:U+0000-024F,U+2000-206F,U+20AC;} @font-face{font-family:"Roboto";font-weight:700;font-style:normal;font-display:swap; src:url("assets/fonts/roboto-greek-700.woff2") format("woff2"); unicode-range:U+0370-03FF,U+1F00-1FFF,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;} @font-face{font-family:"Roboto";font-weight:700;font-style:normal;font-display:swap; src:url("assets/fonts/roboto-latin-700.woff2") format("woff2");unicode-range:U+0000-024F,U+2000-206F,U+20AC;} /* ---- tokens ---- */ :root{ --base:#ffffff; --contrast:#000000; --charcoal:#222427; --ink:#16181a; --gray-dark:#525455; --gray-mid:#7c7e80; --gray-light:#f6f5f2; --tint:#f3f1ec; --line:#e7e5df; --line-strong:#d8d5cc; --gold:#b89150; --gold-ink:#8a6c33; --gold-deep:#9a7838; --gold-soft:rgba(184,145,80,.12); --gold-line:rgba(184,145,80,.4); --font-head:"Roboto Slab",Georgia,"Times New Roman",serif; --font-body:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --wrap:1208px; --gutter:clamp(20px,5vw,64px); --sp:clamp(64px,8vw,128px); --r:3px; --r-lg:5px; --sh:0 1px 2px rgba(20,20,20,.04); --sh-md:0 14px 40px -18px rgba(20,20,20,.28); --sh-lg:0 34px 80px -30px rgba(20,20,20,.45); --ease:cubic-bezier(.22,.61,.36,1); } /* ---- reset / base ---- */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{font-family:var(--font-body);color:var(--ink);background:var(--base);line-height:1.65; font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} img{max-width:100%;display:block} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.08;letter-spacing:-.01em;color:var(--ink)} ::selection{background:var(--gold);color:#fff} :focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);width:100%} .section{padding-block:var(--sp)} .section--tint{background:var(--gray-light)} /* ---- reveal / motion ---- */ .reveal[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease) var(--rd,0ms),transform .8s var(--ease) var(--rd,0ms)} .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal[data-reveal]{opacity:1;transform:none;transition:none}} /* page transition */ .page-key{animation:pageIn .55s var(--ease) both} @keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.page-key{animation:none}} /* ---- eyebrow ---- */ .eyebrow{display:inline-block;font-family:var(--font-body);font-weight:700;font-size:.72rem; letter-spacing:.32em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:18px;white-space:nowrap} .eyebrow--light{color:#f4e8c8} .eyebrow--center{display:block;text-align:center} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--font-body);font-weight:700; font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;padding:16px 26px;border-radius:var(--r); position:relative;overflow:hidden;transition:.4s var(--ease);border:1.5px solid transparent;white-space:nowrap} .btn__icon{display:inline-flex;transition:transform .4s var(--ease)} .btn:hover .btn__icon{transform:translateX(4px)} .btn--primary{background:var(--ink);color:#fff} .btn--primary:hover{background:var(--gold-deep)} .btn--gold{background:var(--gold);color:#fff} .btn--gold:hover{background:#fff;color:var(--ink)} .btn--ghost{border-color:currentColor;color:var(--ink)} .btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .phero--cover .btn--ghost{color:#fff} .phero--cover .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff} .btn--text{padding:8px 0;color:var(--ink);letter-spacing:.1em} .btn--text .btn__label{position:relative;padding-bottom:3px;background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1.5px no-repeat;transition:background-size .4s var(--ease)} .btn--text:hover .btn__label{background-size:100% 1.5px} .btn--text:hover{color:var(--gold-ink)} .btn--block{width:100%;justify-content:center} /* ---- stamp mark + divider ---- */ .stampmark{display:inline-flex;flex:none} .stampmark svg text{font-family:var(--font-head)} .stampdiv{display:flex;align-items:center;gap:24px;max-width:var(--wrap);margin-inline:auto; padding-inline:var(--gutter);padding-block:8px} .stampdiv__line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line))} .stampdiv__line--r{background:linear-gradient(270deg,transparent,var(--gold-line))} .stampmark{color:var(--gold)} /* ===== HEADER ===== */ .site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid transparent;transition:.4s var(--ease)} .site-head.is-scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(0,0,0,.5)} .site-head__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:92px;transition:height .4s var(--ease)} .site-head.is-scrolled .site-head__in{height:72px} .brand{display:flex;align-items:center;gap:14px} .brand__mark{width:46px;height:46px;border-radius:50%;flex:none;transition:width .4s var(--ease),height .4s var(--ease)} .site-head.is-scrolled .brand__mark{width:40px;height:40px} .brand__name{display:flex;flex-direction:column;line-height:1;font-family:var(--font-head)} .brand__name strong{font-size:1.04rem;letter-spacing:.02em;color:var(--ink)} .brand__name em{font-style:normal;font-size:.66rem;letter-spacing:.34em;color:var(--gold-ink);font-family:var(--font-body);font-weight:700;margin-top:4px} .nav{display:flex;align-items:center;gap:6px} .nav__link{font-family:var(--font-head);font-weight:400;font-size:.94rem;padding:10px 14px;color:var(--charcoal); position:relative;transition:color .3s;white-space:nowrap} .nav__link::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:1.5px;background:var(--gold); transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)} .nav__link:hover{color:var(--ink)} .nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)} .nav__link.is-active{color:var(--ink)} .site-head__right{display:flex;align-items:center;gap:18px} .langsw{display:flex;align-items:center;gap:6px;font-family:var(--font-head);font-size:.82rem} .langsw__btn{color:var(--gray-mid);letter-spacing:.08em;padding:4px 2px;transition:color .3s} .langsw__btn.is-on{color:var(--ink);font-weight:700} .langsw__btn:hover{color:var(--gold-ink)} .langsw__sep{color:var(--line-strong)} .burger{display:none;color:var(--ink)} /* mobile nav */ .mobnav{position:fixed;inset:0;z-index:80;background:var(--ink);color:#fff;display:flex;flex-direction:column; animation:mobIn .4s var(--ease) both} @keyframes mobIn{from{opacity:0}to{opacity:1}} .mobnav__top{display:flex;align-items:center;justify-content:space-between;height:92px;flex:none} .mobnav__top .burger{display:flex;color:#fff} .mobnav__tag{font-family:var(--font-body);font-weight:700;font-size:.72rem;letter-spacing:.32em;color:var(--gold)} .mobnav__nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px} .mobnav__link{display:flex;align-items:baseline;gap:18px;font-family:var(--font-head);font-size:clamp(1.8rem,9vw,2.6rem); color:#fff;padding:10px 0;text-align:left;opacity:0;animation:mobLink .5s var(--ease) forwards;animation-delay:calc(var(--i)*60ms + .1s)} @keyframes mobLink{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}} .mobnav__link.is-active{color:var(--gold)} .mobnav__num{font-size:.8rem;font-family:var(--font-body);font-weight:700;color:var(--gold);letter-spacing:.1em} .mobnav__foot{flex:none;padding-block:32px;border-top:1px solid rgba(255,255,255,.12)} .mobnav__foot .langsw__btn{color:rgba(255,255,255,.6)} .mobnav__foot .langsw__btn.is-on{color:#fff} .mobnav__foot .langsw__sep{color:rgba(255,255,255,.3)} /* ===== HOME HERO ===== */ .hero{position:relative;min-height:min(88vh,820px);display:flex;align-items:center;overflow:hidden;color:#fff} .hero__bgw{position:absolute;inset:-8% 0;z-index:0} .hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;will-change:transform} .hero__overlay{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(13,13,14,.62),rgba(13,13,14,.46) 50%,rgba(13,13,14,.74))} .hero__content{position:relative;z-index:2;text-align:center;max-width:880px;padding-block:120px} .hero__eyebrow{animation:fadeUp .8s var(--ease) both .1s} .hero__title{font-size:clamp(2.6rem,6.4vw,5.2rem);color:#fff;letter-spacing:-.02em;animation:fadeUp .8s var(--ease) both .2s} .hero__sub{font-size:clamp(1.05rem,1.7vw,1.3rem);color:rgba(255,255,255,.86);max-width:680px;margin:26px auto 0; font-weight:400;animation:fadeUp .8s var(--ease) both .32s} .hero__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:40px;animation:fadeUp .8s var(--ease) both .44s} .hero__cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)} .hero__cta .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff} .hero__est{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;font-size:.7rem; letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700} @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.hero__eyebrow,.hero__title,.hero__sub,.hero__cta{animation:none}} /* ===== PHILOSOPHY BAND ===== */ .philo{position:relative;background:var(--ink);color:#fff;overflow:hidden} .philo__tint{position:absolute;inset:0;background:radial-gradient(120% 120% at 50% -20%,rgba(184,145,80,.16),transparent 60%)} .philo__in{position:relative;text-align:center;padding-block:clamp(72px,9vw,120px);display:flex;flex-direction:column;align-items:center;gap:28px} .philo__quote{font-family:var(--font-head);font-size:clamp(1.4rem,2.8vw,2.15rem);line-height:1.4;max-width:920px;color:#fff;text-wrap:balance} .philo__attr{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)} /* ===== FEATURE ROWS ===== */ .frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center; padding-block:clamp(40px,5vw,64px)} .frow--rev .frow__media{order:2} .frow__media{position:relative} .frow__num{position:absolute;top:-28px;left:-12px;z-index:2;font-family:var(--font-head);font-weight:700; font-size:clamp(3rem,7vw,5.5rem);color:var(--base);-webkit-text-stroke:1.5px var(--gold-line);line-height:1} .frow--rev .frow__num{left:auto;right:-12px} .frow__img{aspect-ratio:4/3.2;border-radius:var(--r-lg);background-size:cover;background-position:center;box-shadow:var(--sh-md)} .frow__title{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:18px} .frow__body{color:var(--gray-dark);font-size:1.075rem;max-width:46ch;margin-bottom:26px} /* ===== SECTION HEAD ===== */ .sec-head{text-align:center;max-width:680px;margin:0 auto clamp(40px,5vw,64px)} .sec-head--left{text-align:left;margin-inline:0} .sec-head__title{font-size:clamp(1.8rem,3.4vw,2.7rem)} .sec-head__sub{color:var(--gray-dark);margin-top:16px;font-size:1.08rem} .sec-cta{display:flex;justify-content:center;margin-top:clamp(40px,5vw,56px)} /* ===== SERVICE CARDS ===== */ /* .scards lands on the WP Query wrapper; the grid lives on .wp-block-post-template (see bridges below). */ .scards{display:block} .scard-w{display:flex} .scard{flex:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:14px; background:var(--base);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 30px 30px; position:relative;overflow:hidden;transition:.45s var(--ease)} .scard::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--gold); transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)} .scard:hover{border-color:var(--gold-line);box-shadow:var(--sh-lg);transform:translateY(-6px)} .scard:hover::before{transform:scaleX(1)} .scard__top{display:flex;align-items:center;justify-content:space-between;width:100%} .scard__icon{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:var(--gold-soft); color:var(--charcoal);padding:14px;transition:.45s var(--ease)} .scard:hover .scard__icon{background:var(--gold);color:#fff} .scard__num{font-family:var(--font-head);font-weight:700;font-size:1.5rem;color:var(--line-strong);transition:color .45s} .scard:hover .scard__num{color:var(--gold)} .scard__title{font-size:1.24rem;line-height:1.2} .scard__tag{color:var(--gray-dark);font-size:.98rem;flex:1} .scard__go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.78rem;letter-spacing:.12em; text-transform:uppercase;color:var(--gold-ink);margin-top:4px} .scard__go svg{transition:transform .4s var(--ease)} .scard:hover .scard__go svg{transform:translateX(5px)} /* ===== TEAM CARDS ===== */ .tcards{display:block} .tcard-w{display:flex} .tcard{flex:1;text-align:left;border-radius:var(--r-lg);overflow:hidden;background:var(--base); border:1px solid var(--line);transition:.45s var(--ease)} .tcard:hover{box-shadow:var(--sh-lg);transform:translateY(-6px);border-color:var(--gold-line)} .tcard__ph{display:block;aspect-ratio:4/4.4;overflow:hidden;background:var(--tint)} .tcard__ph img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(.15);transition:.6s var(--ease)} .tcard:hover .tcard__ph img{transform:scale(1.045);filter:none} .tcard__body{display:block;padding:24px 26px 28px} .tcard__role{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);font-weight:700} .tcard__name{font-size:1.4rem;margin-top:8px} .tcard__go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:700;font-size:.78rem; letter-spacing:.1em;text-transform:uppercase;color:var(--charcoal)} .tcard__go svg{transition:transform .4s var(--ease)} .tcard:hover .tcard__go svg{transform:translateX(5px)} /* ===== CTA BAND ===== */ .ctaband{position:relative;overflow:hidden;color:#fff;text-align:center} .ctaband__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05)} .ctaband__ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,14,.8),rgba(13,13,14,.88))} .ctaband__in{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;padding-block:clamp(72px,9vw,120px)} .ctaband__title{font-size:clamp(1.9rem,3.6vw,2.9rem);color:#fff} .ctaband__sub{color:rgba(255,255,255,.82);max-width:600px;font-size:1.08rem} .ctaband .stampmark{color:var(--gold)} /* ===== OFFICES ===== */ .offgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .offcard{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--base);transition:.4s var(--ease)} .offcard:hover{box-shadow:var(--sh-md);border-color:var(--gold-line)} .offcard__map{position:relative;height:170px;background:var(--charcoal);overflow:hidden} .offcard__mapgrid{position:absolute;inset:0;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:26px 26px} .offcard__map::after{content:"";position:absolute;left:-20%;top:55%;width:80%;height:3px;background:var(--gold);opacity:.5;transform:rotate(-12deg)} .offcard__pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-60%);color:var(--gold); background:#fff;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--sh-md)} .offcard__b{padding:22px 24px 26px} .offcard__role{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);font-weight:700} .offcard__city{font-size:1.3rem;margin:6px 0 8px} .offcard__addr{color:var(--gray-dark);font-size:.98rem} .offcard__link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:700;font-size:.8rem; letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)} .offcard__link svg{transition:transform .35s var(--ease)} .offcard__link:hover svg{transform:translate(3px,-3px)} /* ===== PAGE HERO ===== */ .phero{position:relative;background:var(--base)} .phero--cover{color:#fff;overflow:hidden;min-height:clamp(380px,52vh,560px);display:flex;align-items:flex-end} .phero__bgw{position:absolute;inset:-8% 0;z-index:0} .phero__bg{position:absolute;inset:0;background-size:cover;background-position:center;will-change:transform} .phero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(13,13,14,.32),rgba(13,13,14,.74))} .phero__in{position:relative;z-index:2;padding-block:clamp(48px,7vw,84px);max-width:880px} .phero:not(.phero--cover) .phero__in{padding-top:clamp(56px,8vw,96px);padding-bottom:0} .phero__title{font-size:clamp(2.1rem,4.6vw,3.7rem);letter-spacing:-.02em} .phero--cover .phero__title{color:#fff} .phero__lead{font-size:clamp(1.05rem,1.7vw,1.35rem);margin-top:20px;max-width:640px;line-height:1.55} .phero--cover .phero__lead{color:rgba(255,255,255,.9)} .phero:not(.phero--cover) .phero__lead{color:var(--gray-dark)} /* breadcrumb */ .crumb{display:flex;align-items:center;gap:10px;font-size:.82rem;margin-bottom:22px;color:inherit;flex-wrap:wrap} .crumb button{color:inherit;opacity:.7;transition:opacity .3s} .crumb button:hover{opacity:1;color:var(--gold)} .crumb__sep{opacity:.4} .crumb__cur{font-weight:700} .phero--cover .crumb{color:rgba(255,255,255,.85)} /* ===== SERVICE SINGLE ===== */ .svc-body__in{display:grid;grid-template-columns:300px 1fr;gap:clamp(40px,6vw,88px);align-items:start} .svc-aside__sticky{position:sticky;top:120px;display:flex;flex-direction:column;align-items:flex-start;gap:16px; padding:32px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--gray-light)} .svc-aside__icon{width:64px;height:64px;color:var(--charcoal);background:#fff;border-radius:50%;padding:15px;border:1px solid var(--gold-line)} .svc-aside__num{font-family:var(--font-head);font-weight:700;color:var(--gold);letter-spacing:.06em;font-size:1.1rem} .svc-aside__rule{width:40px;height:2px;background:var(--gold)} .svc-aside__help{color:var(--gray-dark);font-size:.96rem} .svc-intro__lead{font-family:var(--font-head);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.5;color:var(--ink)} .svc-ind{margin-top:clamp(40px,5vw,64px)} .svc-ind__h{display:flex;align-items:center;gap:12px;font-size:1.5rem;margin-bottom:28px} .svc-ind__h svg{color:var(--gold);background:var(--gold-soft);border-radius:50%;padding:6px;width:38px;height:38px;flex:none} .svc-ind__list{list-style:none;display:grid;gap:2px} .svc-ind__item{display:flex;gap:22px;align-items:baseline;padding:22px 4px;border-top:1px solid var(--line);transition:.35s var(--ease)} .svc-ind__item:last-child{border-bottom:1px solid var(--line)} .svc-ind__item:hover{padding-left:14px;background:linear-gradient(90deg,var(--gold-soft),transparent)} .svc-ind__n{font-family:var(--font-head);font-weight:700;color:var(--gold);font-size:1rem;flex:none;min-width:30px} .svc-ind__t{font-size:1.12rem;color:var(--ink)} /* ===== TEAM BIO ===== */ .bio__in{display:grid;grid-template-columns:380px 1fr;gap:clamp(40px,6vw,88px);align-items:start} .bio__port-sticky{position:sticky;top:118px} .bio__photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);background:var(--tint)} .bio__photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5} .bio__id{margin-top:-40px;margin-inline:22px;background:var(--base);border:1px solid var(--line);border-radius:var(--r-lg); padding:26px 28px;position:relative;z-index:2;box-shadow:var(--sh)} .bio__id-role{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);font-weight:700} .bio__id-name{font-size:1.5rem;margin:8px 0 14px} .bio__id-rule{width:46px;height:2px;background:var(--gold);margin-bottom:18px} .bio__id-link{display:flex;align-items:center;gap:10px;padding:8px 0;color:var(--charcoal);font-size:.96rem;transition:color .3s} .bio__id-link svg{color:var(--gold-ink);flex:none} .bio__id-link:hover{color:var(--gold-ink)} .bio__lead{font-family:var(--font-head);font-weight:400;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.5;margin-bottom:28px;color:var(--ink)} .bio__para{color:var(--gray-dark);font-size:1.08rem;margin-bottom:20px;max-width:62ch} .bio__sep{height:1px;background:var(--line);margin:clamp(32px,4vw,48px) 0} .bio__others-h{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);font-weight:700;margin-bottom:18px} .bio__others-g{display:flex;flex-direction:column;gap:12px} .bio__other{display:flex;align-items:center;gap:18px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg); background:var(--base);text-align:left;transition:.35s var(--ease)} .bio__other:hover{border-color:var(--gold-line);background:var(--gray-light)} .bio__other img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center top;flex:none} .bio__other span{flex:1;display:flex;flex-direction:column;gap:2px} .bio__other strong{font-family:var(--font-head);font-size:1.06rem} .bio__other em{font-style:normal;font-size:.84rem;color:var(--gray-dark)} .bio__other svg{color:var(--gold-ink);transition:transform .35s var(--ease)} .bio__other:hover svg{transform:translateX(5px)} /* ===== COMPANY ===== */ .comp__in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,80px);align-items:center} .comp__para{color:var(--gray-dark);font-size:1.08rem;margin-bottom:22px;max-width:58ch} .comp__para--lead{font-family:var(--font-head);font-weight:400;font-size:clamp(1.3rem,2.1vw,1.65rem);line-height:1.5;color:var(--ink)} .comp__img{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md)} .comp__img img{width:100%;aspect-ratio:4/4.4;object-fit:cover} .stats{background:var(--ink);color:#fff} .stats__in{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-block:clamp(48px,6vw,80px)} .stat{text-align:center;border-left:1px solid rgba(255,255,255,.12);padding-left:24px} .stat:first-child{border-left:0} .stat__v{display:block;font-family:var(--font-head);font-weight:700;font-size:clamp(2.4rem,4vw,3.4rem);color:var(--gold)} .stat__l{display:block;font-size:.9rem;color:rgba(255,255,255,.74);margin-top:8px;letter-spacing:.02em} .creed{text-align:center} .creed__in{display:flex;flex-direction:column;align-items:center;gap:24px} .creed__q{font-family:var(--font-head);font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.4;max-width:760px;text-wrap:balance} .creed__a{font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-ink);font-weight:700} /* ===== CONTACT ===== */ .contact__in{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,80px);align-items:start} .contact__lead{margin-bottom:28px} .contact__lead h2{font-size:clamp(1.6rem,2.6vw,2.1rem)} .contact__item{display:flex;align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);transition:.3s} .contact__item:hover:not(.contact__item--static){color:var(--gold-ink)} .contact__ico{width:50px;height:50px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--gold-soft);color:var(--charcoal)} .contact__item span:last-child{display:flex;flex-direction:column;gap:3px} .contact__item em{font-style:normal;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-mid);font-weight:700} .contact__item strong{font-family:var(--font-head);font-size:1.15rem;color:var(--ink)} .contact__form{background:var(--gray-light);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(28px,4vw,44px)} .cform{display:flex;flex-direction:column;gap:20px} .cform__row{display:grid;grid-template-columns:1fr 1fr;gap:20px} .cfield{display:flex;flex-direction:column;gap:8px} .cfield__l{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--charcoal)} .cfield input,.cfield textarea{font:inherit;font-size:1rem;padding:14px 16px;border:1.5px solid var(--line-strong); border-radius:var(--r);background:#fff;color:var(--ink);transition:.3s;resize:vertical} .cfield input:focus,.cfield textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)} .cfield.is-err input,.cfield.is-err textarea{border-color:#b3331f} .cfield__err{font-size:.82rem;color:#b3331f;font-weight:600} .cconsent{display:flex;align-items:flex-start;gap:12px;font-size:.92rem;color:var(--gray-dark);cursor:pointer} .cconsent input{margin-top:3px;width:18px;height:18px;accent-color:var(--gold-deep);flex:none} .cconsent.is-err{color:#b3331f} .cform__submit{margin-top:6px} .cform--done{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px 0} .cform__check{width:74px;height:74px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center} .cform--done h3{font-size:1.6rem} .cform--done p{color:var(--gray-dark);max-width:42ch;margin-bottom:8px} /* ===== GALLERY ===== */ .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;grid-auto-flow:dense} .gallery__cell--wide{grid-column:span 2} .gallery__btn{display:block;position:relative;width:100%;height:100%;border-radius:var(--r-lg);overflow:hidden;background:var(--tint)} .gallery__btn img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;transition:transform .6s var(--ease)} .gallery__cell--wide .gallery__btn img{aspect-ratio:2/1} .gallery__btn:hover img{transform:scale(1.06)} .gallery__cap{position:absolute;left:0;right:0;bottom:0;padding:28px 18px 14px;color:#fff;font-size:.92rem;font-weight:600; text-align:left;background:linear-gradient(transparent,rgba(13,13,14,.78));opacity:0;transition:opacity .4s} .gallery__btn:hover .gallery__cap{opacity:1} .lightbox{position:fixed;inset:0;z-index:90;background:rgba(13,13,14,.92);display:grid;place-items:center;padding:5vw; animation:mobIn .3s var(--ease) both} .lightbox__x{position:absolute;top:24px;right:24px;color:#fff;width:48px;height:48px;display:grid;place-items:center; border:1px solid rgba(255,255,255,.3);border-radius:50%} .lightbox__x:hover{background:rgba(255,255,255,.1)} .lightbox__fig{max-width:1000px;max-height:86vh} .lightbox__fig img{max-height:78vh;width:auto;border-radius:var(--r-lg);box-shadow:var(--sh-lg)} .lightbox__fig figcaption{color:rgba(255,255,255,.8);text-align:center;margin-top:16px;font-size:.94rem} /* ===== LEGAL ===== */ .legal__in{display:grid;grid-template-columns:240px 1fr;gap:clamp(40px,6vw,80px);align-items:start} .legal__toc-sticky{position:sticky;top:120px;display:flex;flex-direction:column;gap:4px} .legal__toc-h{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);font-weight:700;margin-bottom:10px} .legal__toc-link{padding:8px 0;color:var(--gray-dark);font-size:.95rem;border-left:2px solid var(--line);padding-left:14px;transition:.3s} .legal__toc-link:hover{color:var(--ink);border-color:var(--gold)} .legal__body{max-width:62ch} .legal__sec{margin-bottom:clamp(32px,4vw,48px);scroll-margin-top:120px} .legal__h{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:14px} .legal__p{color:var(--gray-dark);font-size:1.08rem} /* ===== FOOTER ===== */ .site-foot{background:var(--ink);color:rgba(255,255,255,.78)} .site-foot__in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-block:clamp(56px,7vw,88px)} .site-foot__name{display:flex;flex-direction:column;font-family:var(--font-head);color:#fff;line-height:1.1} .site-foot__name strong{font-size:1.4rem} .site-foot__name span{font-size:.9rem;letter-spacing:.04em;color:rgba(255,255,255,.6)} .site-foot__tag{display:inline-block;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:16px 0 18px;font-weight:700} .site-foot__desc{max-width:32ch;font-size:.98rem} .site-foot__col h3{font-family:var(--font-head);color:#fff;font-size:1rem;letter-spacing:.04em;margin-bottom:18px; position:relative;padding-bottom:12px} .site-foot__col h3::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--gold)} .site-foot__office{font-size:.94rem;margin-bottom:10px} .site-foot__office strong{color:#fff;font-weight:600} .site-foot__mail{color:var(--gold);display:inline-block;margin-top:4px;transition:.3s} .site-foot__mail:hover{color:#fff} .site-foot__links{display:flex;flex-direction:column;gap:8px;margin-top:18px} .site-foot__links button{text-align:left;color:rgba(255,255,255,.7);font-size:.94rem;transition:.3s;width:fit-content} .site-foot__links button:hover{color:var(--gold)} .site-foot__bar{border-top:1px solid rgba(255,255,255,.1)} .site-foot__bar-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:24px; font-size:.84rem;color:rgba(255,255,255,.5);flex-wrap:wrap} .site-foot__espa{height:34px;width:auto;border-radius:2px;opacity:.92;background:#fff;padding:3px} /* ===== RESPONSIVE ===== */ @media (max-width:1024px){ .svc-body__in{grid-template-columns:1fr} .svc-aside__sticky{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:20px;width:100%} .svc-aside__sticky .btn{margin-left:auto} .svc-aside__help{flex:1;min-width:160px} .bio__in{grid-template-columns:320px 1fr} .legal__in{grid-template-columns:200px 1fr} } @media (max-width:860px){ .nav{display:none} .langsw{display:none} .burger{display:flex} .frow,.frow--rev .frow__media{grid-template-columns:1fr;order:0} .frow__media{order:0!important} .scards,.scards--hub,.tcards,.tcards--page,.offgrid{grid-template-columns:1fr 1fr} .stats__in{grid-template-columns:1fr 1fr;gap:24px} .stat:nth-child(3){border-left:0} .comp__in,.contact__in,.bio__in,.legal__in{grid-template-columns:1fr} .bio__port-sticky,.svc-aside__sticky,.legal__toc-sticky{position:static} .bio__id{margin-inline:18px} .legal__toc{display:none} .gallery{grid-template-columns:repeat(2,1fr)} .gallery__cell--wide{grid-column:span 2} .site-foot__in{grid-template-columns:1fr 1fr;gap:36px} .site-foot__brand{grid-column:1/-1} } @media (max-width:520px){ body{font-size:16px} .scards,.scards--hub,.tcards,.tcards--page,.offgrid,.cform__row{grid-template-columns:1fr} .stats__in{grid-template-columns:1fr 1fr} .gallery{grid-template-columns:1fr} .gallery__cell--wide{grid-column:auto} .site-foot__in{grid-template-columns:1fr} .site-foot__bar-in{flex-direction:column;align-items:flex-start} .hero__cta{flex-direction:column} .hero__cta .btn{width:100%;justify-content:center} .frow__num{font-size:3rem;top:-20px} } /* ---- a11y additions (theme) ---- */ .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:#000;padding:12px 18px;border-radius:3px;font-weight:700} .skip-link:focus{left:12px;top:12px} .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap} /* ---- WP block bridges (map core blocks to the design) ---- */ /* whole-card stretched links */ .scard,.tcard,.offcard{position:relative} .scard .scard__title a::after,.tcard .tcard__name a::after,.tcard a.tcard__go::after{content:"";position:absolute;inset:0;z-index:1} .scard .scard__title a,.tcard .tcard__name a{text-decoration:none;color:inherit} .scard .scard__go,.scard .scard__num,.scard .svc-iconwrap{position:relative;z-index:2} .svc-iconwrap{display:block;width:100%;height:100%} /* service-icon block fills the circle */ .scard__icon .svc-iconwrap,.svc-aside__icon .svc-iconwrap{display:block;width:100%;height:100%} /* header: map core/navigation + site logo to .site-head design */ .site-head__in .wp-block-site-logo img{display:block} .site-head .wp-block-navigation{font-family:var(--font-head);font-weight:700;font-size:.86rem;letter-spacing:.04em} .site-head .wp-block-navigation a{color:var(--ink)} .site-head .wp-block-navigation a:hover{color:var(--gold-ink)} .dioikein-lang-switcher__list{display:flex;gap:.5rem;list-style:none;margin:0;padding:0;font-family:var(--font-head);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em} .dioikein-lang-switcher__list a{color:var(--gray-dark);text-decoration:none} .dioikein-lang-switcher__list .current-lang a{color:var(--ink)} .dioikein-lang-switcher__list li+li{border-left:1px solid var(--line);padding-left:.5rem} .burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;color:var(--ink)} @media (max-width:860px){.site-head .wp-block-navigation,.site-head .dioikein-lang-switcher{display:none}.burger{display:inline-flex}} .mobnav{display:none}.mobnav.is-open{display:flex} /* news (core/rss) styled as cards */ .news .wp-block-rss{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0;margin:0} .news .wp-block-rss__item{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:var(--base);transition:.4s var(--ease)} .news .wp-block-rss__item:hover{border-color:var(--gold-line);box-shadow:var(--sh-md)} .news .wp-block-rss__item a{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:1.05rem;line-height:1.3} .news .wp-block-rss__item-publish-date{display:block;margin-top:10px;font-size:.8rem;color:var(--gold-ink);letter-spacing:.06em} @media (max-width:860px){.news .wp-block-rss{grid-template-columns:1fr 1fr}} @media (max-width:520px){.news .wp-block-rss{grid-template-columns:1fr}} /* offices: real OSM iframe inside the map frame */ .offcard__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.2) contrast(1.05)} .offcard__map--live .offcard__mapgrid,.offcard__map--live::after,.offcard__map--live .offcard__pin{display:none} /* post-content prose inside service single uses the design ind-list automatically */ .svc-main .wp-block-post-content>p:first-child{font-family:var(--font-head);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.5;color:var(--ink);margin-bottom:28px} .svc-main .wp-block-post-content :is(ul,ol){list-style:none;display:grid;gap:0;margin:clamp(28px,4vw,44px) 0;padding:0;counter-reset:ind} .svc-main .wp-block-post-content :is(ul,ol) li{counter-increment:ind;padding:20px 4px 20px 46px;border-top:1px solid var(--line);font-size:1.1rem;color:var(--ink);position:relative;transition:.35s var(--ease)} .svc-main .wp-block-post-content :is(ul,ol) li:last-child{border-bottom:1px solid var(--line)} .svc-main .wp-block-post-content :is(ul,ol) li::before{content:counter(ind,decimal-leading-zero);position:absolute;left:4px;top:20px;font-family:var(--font-head);font-weight:700;color:var(--gold);font-size:.95rem} .svc-main .wp-block-post-content :is(ul,ol) li:hover{padding-left:56px;background:linear-gradient(90deg,var(--gold-soft),transparent)} /* ---- Query Loop grid bridges (the post-template