/* Theme Name: GDC Theme URI: https://example.com/ Author: Your Organization Author URI: https://example.com/ Description: A government department WordPress theme inspired by the layout of official Maharashtra directorate portals — accessibility toolbar, emblem header, mega-menu navigation, hero slider, notice board, key persons grid, service cards, schemes & policy link lists, photo gallery, and a footer with visitor statistics. Fully editable via the WordPress Customizer, Menus, and Widgets. Version: 1.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: gdc Tags: government, accessibility-ready, custom-menu, featured-images, translation-ready */ /* ========================================================================== 0. Custom properties ========================================================================== */ :root{ --navy: #22317a; --navy-dark: #141d52; --navy-light: #3a4bb0; --saffron: #f5a300; --saffron-dark:#c98200; --green: #0aa87c; --bg: #f4f6fd; --card-bg: #ffffff; --text: #151b2c; --text-muted: #5a6478; --border: #dde2f2; --radius: 10px; --shadow: 0 6px 22px rgba(34,49,122,.16); --font-base: 'Noto Sans', 'Noto Sans Devanagari', 'Segoe UI', Arial, sans-serif; } /* High-contrast mode toggle target */ body.contrast-mode{ --navy: #000000; --navy-dark: #000000; --navy-light: #1a1a1a; --saffron: #ffcc00; --saffron-dark:#e6b800; --bg: #ffffff; --card-bg: #ffffff; --text: #000000; --text-muted: #000000; --border: #000000; } /* ========================================================================== 1. Reset & base ========================================================================== */ *, *::before, *::after{ box-sizing:border-box; } body{ margin:0; font-family:var(--font-base); color:var(--text); background:var(--bg); line-height:1.6; font-size:1rem; } img{ max-width:100%; height:auto; display:block; } a{ color:var(--navy); text-decoration:none; } a:hover{ color:#a06b00; text-decoration:underline; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4{ margin:0 0 .6em; color:var(--navy); font-weight:700; } .container{ max-width:1200px; margin:0 auto; padding:0 20px; } .skip-link{ position:absolute; left:-9999px; top:auto; background:var(--navy); color:#fff; padding:10px 16px; z-index:10000; } .skip-link:focus{ left:10px; top:10px; } /* WCAG 2.4.7 — visible keyboard focus indicator on every interactive element */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{ outline:3px solid var(--saffron); outline-offset:2px; border-radius:2px; } body.contrast-mode a:focus-visible, body.contrast-mode button:focus-visible{ outline-color:#ffcc00; } /* Font-size scaling classes applied to by JS */ html.font-sm{ font-size:14px; } html.font-md{ font-size:16px; } html.font-lg{ font-size:19px; } /* ========================================================================== 2. Top utility bar ========================================================================== */ .top-bar{ background:var(--navy-dark); color:#d9e6f7; font-size:.82rem; } .top-bar .container{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:6px; padding-bottom:6px; } .top-bar a{ color:#d9e6f7; } .top-bar__left{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .top-bar__right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .font-controls{ display:flex; align-items:center; gap:4px; } .font-controls button{ background:transparent; border:1px solid #4a5bc4; color:#d9e6f7; border-radius:3px; width:26px; height:26px; cursor:pointer; font-size:.85rem; } .font-controls button:hover{ background:var(--saffron); border-color:var(--saffron); color:#fff; } .contrast-toggle{ background:transparent; border:1px solid #4a5bc4; color:#d9e6f7; border-radius:3px; padding:2px 10px; cursor:pointer; font-size:.8rem; } .contrast-toggle:hover{ background:var(--saffron); border-color:var(--saffron); } .social-links{ display:flex; gap:10px; } .social-links a{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#1a2560; font-size:.75rem; } .lang-switch a{ font-weight:600; border:1px solid #4a5bc4; padding:2px 10px; border-radius:3px; } /* ========================================================================== 3. Masthead: emblem, title, partner logos ========================================================================== */ .masthead{ background:#fff; border-bottom:4px solid var(--saffron); border-image:linear-gradient(90deg, var(--saffron) 0%, var(--saffron) 33%, #ffffff 33%, #ffffff 66%, var(--green) 66%, var(--green) 100%) 1; } /* Reusable tricolor divider (same saffron / white / green band used above the primary navigation) for separating sections on the front page. */ .section-separator{ height:4px; background:linear-gradient(90deg, var(--saffron) 0%, var(--saffron) 33%, #ffffff 33%, #ffffff 66%, var(--green) 66%, var(--green) 100%); } .masthead .container{ display:flex; align-items:center; gap:20px; padding-top:16px; padding-bottom:16px; flex-wrap:wrap; } .masthead__emblem{ flex:0 0 auto; width:64px; } .masthead__title{ flex:1 1 320px; } .masthead__title h1{ font-size:1.4rem; margin:0; line-height:1.3; } .masthead__title span{ display:block; font-size:1rem; color:var(--text-muted); font-weight:500; } .masthead__partners{ display:flex; align-items:center; gap:18px; flex:0 0 auto; } .masthead__partners a{ display:block; } .masthead__partners img{ height:56px; width:auto; } /* ========================================================================== 4. Primary navigation (mega menu) ========================================================================== */ .nav-wrap{ background:linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); position:relative; z-index:50; } .nav-wrap .container{ display:flex; align-items:center; justify-content:space-between; } .menu-toggle{ display:none; background:none; border:0; color:#fff; font-size:1.4rem; padding:14px 4px; cursor:pointer; } .primary-menu{ display:flex; flex-wrap:wrap; flex:1 1 auto; min-width:0; } .primary-menu > li{ position:relative; } .primary-menu > li > a{ display:block; color:#fff; padding:14px 16px; font-weight:600; font-size:.92rem; border-right:1px solid rgba(255,255,255,.12); white-space:nowrap; } .primary-menu > li:last-child > a{ border-right:0; } .primary-menu > li > a:hover, .primary-menu > li.current-menu-item > a{ background:var(--saffron); color:#fff; text-decoration:none; } .primary-menu li.menu-item-has-children > a::after{ content:"▾"; margin-left:6px; font-size:.7em; } /* dropdown */ .primary-menu ul.sub-menu{ display:none; position:absolute; top:100%; left:0; min-width:240px; background:#fff; box-shadow:var(--shadow); border-top:3px solid var(--saffron); z-index:60; } .primary-menu li:hover > ul.sub-menu{ display:block; } .primary-menu ul.sub-menu li{ position:relative; } .primary-menu ul.sub-menu a{ display:block; padding:10px 16px; color:var(--text); font-size:.88rem; border-bottom:1px solid var(--border); } .primary-menu ul.sub-menu a:hover{ background:var(--bg); color:var(--navy); text-decoration:none; } .primary-menu ul.sub-menu ul.sub-menu{ top:0; left:100%; } /* Visually hidden but available to screen readers (WCAG best practice) */ .screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Header search toggle + expandable box */ .site-search-toggle{ background:none; border:0; color:#fff; cursor:pointer; padding:14px 16px; display:flex; align-items:center; margin-left:auto; flex:0 0 auto; } .site-search-toggle .gdc-icon{ color:#fff; } .site-search-toggle:hover{ background:var(--saffron); } .site-search-box{ background:#fff; border-top:3px solid var(--saffron); box-shadow:var(--shadow); } .site-search-box .container{ display:flex; align-items:center; gap:10px; padding-top:14px; padding-bottom:14px; } .site-search-box .search-form{ flex:1 1 auto; display:flex; } .search-form__input{ flex:1 1 auto; border:1px solid var(--border); border-right:0; border-radius:4px 0 0 4px; padding:10px 14px; font-size:.95rem; font-family:inherit; } .search-form__submit{ background:var(--navy); color:#fff; border:0; border-radius:0 4px 4px 0; padding:0 16px; display:flex; align-items:center; cursor:pointer; } .search-form__submit:hover{ background:var(--navy-dark); } .site-search-box__close{ background:none; border:0; color:var(--text-muted); cursor:pointer; padding:8px; flex:0 0 auto; } .site-search-box__close:hover{ color:var(--saffron-dark); } /* ========================================================================== 5. Hero slider ========================================================================== */ .hero-slider{ position:relative; background:#000; overflow:hidden; } .hero-slider__track{ display:flex; transition:transform .5s ease; } .hero-slider__slide{ position:relative; flex:0 0 100%; } .hero-slider__slide img{ width:100%; height:420px; object-fit:cover; opacity:.92; } .hero-slider__caption{ position:absolute; left:0; right:0; bottom:0; padding:16px 40px; background:linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0)); color:#fff; font-size:1.05rem; } .hero-slider__nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4); border:0; color:#fff; font-size:1.6rem; width:42px; height:42px; cursor:pointer; border-radius:50%; } .hero-slider__nav:hover{ background:var(--saffron); } .hero-slider__nav--prev{ left:14px; } .hero-slider__nav--next{ right:14px; } .hero-slider__dots{ position:absolute; bottom:10px; right:20px; display:flex; gap:6px; } .hero-slider__dots button{ width:10px; height:10px; border-radius:50%; border:1px solid #fff; background:transparent; cursor:pointer; } .hero-slider__dots button.is-active{ background:var(--saffron); border-color:var(--saffron); } @media (max-width:640px){ .hero-slider__slide img{ height:220px; } } /* ========================================================================== 6. Section shells / headings ========================================================================== */ .section{ padding:40px 0; } .section--tint{ background:#fff; } .section__heading{ display:flex; align-items:center; gap:12px; margin-bottom:22px; } .section__heading h2{ display:flex; align-items:center; gap:10px; font-size:1.35rem; margin:0; padding-bottom:6px; border-bottom:3px solid var(--saffron); } .notice-board__head, .link-list-box__head{ display:flex; align-items:center; gap:8px; } .gdc-icon{ display:inline-flex; color:var(--saffron); flex:0 0 auto; } .notice-board__head .gdc-icon, .link-list-box__head .gdc-icon{ color:#fff; } .btn .gdc-icon{ color:#fff; vertical-align:middle; } .footer-info-row__item .gdc-icon{ color:var(--saffron); vertical-align:middle; } /* ------------------------------------------------------------------------- Dean Message — square photo (no circular crop) with text wrapping naturally around it, matching the Key Persons image treatment. ---------------------------------------------------------------------- */ .dean-message{ overflow:hidden; } /* clearfix: contains the floated photo */ .dean-message__photo-wrap{ float:left; width:200px; margin:4px 24px 18px 0; background:var(--card-bg); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); overflow:hidden; position:relative; text-align:center; } .dean-message__photo-wrap::before{ content:""; display:block; width:100%; height:4px; background:linear-gradient(90deg, var(--navy), var(--saffron)); } .dean-message__photo-frame{ width:calc(100% - 20px); aspect-ratio:1/1; overflow:hidden; border-radius:6px; margin:10px auto 10px; box-shadow:0 2px 6px rgba(11,61,103,.15); } .dean-message__photo{ width:100%; height:100%; object-fit:cover; display:block; } .dean-message__name{ text-align:center; font-weight:600; font-size:.82rem; color:var(--navy); margin:0 10px 6px; position:relative; padding-bottom:6px; line-height:1.25; } .dean-message__name::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:24px; height:2px; background:var(--saffron); border-radius:2px; } .dean-message__designation{ display:inline-block; text-align:center; font-size:.6rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--navy); background:var(--bg); padding:3px 9px; border-radius:999px; margin:0 10px 14px; } .dean-message__text{ text-align:justify; text-justify:inter-word; line-height:1.75; margin:0; } @media (max-width:640px){ .dean-message__photo-wrap{ float:none; width:200px; margin:0 auto 16px; } .dean-message__text{ text-align:left; } } /* ========================================================================== 7. Notice board + key persons (two-column layout) ========================================================================== */ .info-columns{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; } @media (max-width:900px){ .info-columns{ grid-template-columns:1fr; } } .notice-board{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; } .notice-board__head{ background:var(--navy); color:#fff; padding:12px 18px; font-weight:700; } .tag-new{ background:var(--saffron); color:#fff; font-size:.65rem; font-weight:700; padding:1px 6px; border-radius:3px; white-space:nowrap; margin-left:6px; } /* ---- Notice Board tabs (dynamic, admin-managed) ---- */ .nb-tabs{ display:flex; flex-wrap:wrap; gap:2px; padding:14px 18px 0; border-bottom:1px solid var(--border); } .nb-tab{ background:none; border:0; border-bottom:3px solid transparent; padding:10px 16px; font-size:.9rem; font-weight:600; color:var(--text-muted); cursor:pointer; white-space:nowrap; } .nb-tab:hover{ color:var(--navy); background:var(--bg); } .nb-tab.is-active{ color:var(--navy); border-bottom-color:var(--saffron); } .nb-panel{ padding:6px 0 18px; } .nb-items li{ border-bottom:1px solid var(--border); } .nb-item{ display:flex; gap:14px; padding:14px 18px; align-items:flex-start; position:relative; border-left:3px solid transparent; transition:background-color .2s ease, border-left-color .2s ease, transform .2s ease, box-shadow .2s ease; } .nb-item:hover{ background:var(--bg); border-left-color:var(--saffron); transform:translateX(3px); box-shadow:0 2px 10px rgba(11,61,103,.08); } /* Date badge — full date (day, month name, year), horizontal inline pill */ .nb-item__date-badge{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; padding:6px 14px; border-radius:999px; white-space:nowrap; background:var(--navy); color:#fff; font-size:.75rem; font-weight:600; transition:background .2s ease, transform .2s ease; } .nb-item:hover .nb-item__date-badge{ background:var(--saffron); transform:scale(1.03); } .nb-item__icon{ flex:0 0 auto; color:var(--saffron); margin-top:2px; transition:transform .2s ease; } .nb-item:hover .nb-item__icon{ transform:scale(1.15); } .nb-item__body{ flex:1 1 auto; min-width:0; } .nb-item__body a, .nb-item__body > span{ font-size:.92rem; font-weight:600; color:var(--navy); } .nb-item__body a:hover{ text-decoration:underline; } .nb-item__desc{ font-size:.82rem; color:var(--text-muted); margin:4px 0 0; } .nb-item__date{ display:block; font-size:.75rem; color:var(--text-muted); margin-top:4px; } .nb-item--empty{ padding:18px; color:var(--text-muted); font-size:.9rem; } /* Interactive "NEW" badge — a slow, subtle pulse to catch the eye without being distracting */ .tag-new--pulse{ animation:gdc-badge-pulse 2.2s ease-in-out infinite; } @keyframes gdc-badge-pulse{ 0%, 100% { box-shadow:0 0 0 0 rgba(255,122,0,.55); } 50% { box-shadow:0 0 0 5px rgba(255,122,0,0); } } @media (prefers-reduced-motion: reduce){ .tag-new--pulse{ animation:none; } } .nb-pagination{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; padding:14px 18px 4px; } .nb-pagination[hidden]{ display:none; } .nb-pagination button{ display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 8px; border:1px solid var(--border); border-radius:4px; font-size:.85rem; color:var(--navy); background:#fff; cursor:pointer; font-family:inherit; transition:background .2s ease, transform .15s ease; } .nb-pagination button:hover:not(:disabled){ background:var(--bg); transform:translateY(-1px); } .nb-pagination button.is-active{ background:var(--saffron); border-color:var(--saffron); color:#fff; font-weight:700; } .nb-pagination button:disabled{ opacity:.4; cursor:not-allowed; } @media (max-width:640px){ .nb-tabs{ padding:10px 12px 0; } .nb-tab{ padding:8px 12px; font-size:.82rem; } .nb-item{ padding:12px; gap:10px; flex-wrap:wrap; } .nb-item__date-badge{ font-size:.68rem; padding:4px 10px; order:3; flex-basis:100%; margin-top:6px; } } .notice-board__pagination{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; padding:14px 18px; border-top:1px solid var(--border); } .notice-board__pagination a{ display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 8px; border:1px solid var(--border); border-radius:4px; font-size:.85rem; color:var(--navy); } .notice-board__pagination a:hover{ background:var(--bg); text-decoration:none; } .notice-board__pagination a.is-active{ background:var(--saffron); border-color:var(--saffron); color:#fff; font-weight:700; } @media (max-width:480px){ .notice-board__pagination a{ min-width:28px; height:28px; font-size:.78rem; } } /* ========================================================================== 8. Service cards ========================================================================== */ .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } @media (max-width:800px){ .services-grid{ grid-template-columns:1fr; } } .service-card{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:26px 22px; box-shadow:var(--shadow); text-align:center; transition:transform .2s ease, box-shadow .2s ease; } .service-card:hover{ transform:translateY(-4px); box-shadow:0 8px 22px rgba(11,61,103,.15); } .service-card__icon{ width:56px; height:56px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; background:var(--bg); border-radius:50%; font-size:1.6rem; } .service-card h3{ font-size:1.05rem; } .service-card p{ color:var(--text-muted); font-size:.9rem; } .btn{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; background:var(--navy); color:#fff; padding:8px 18px; border-radius:4px; font-size:.85rem; font-weight:600; border:2px solid transparent; } .btn:hover{ background:var(--navy-dark); color:#fff; text-decoration:none; border-color:var(--saffron); } /* ========================================================================== 9. About + Events split section ========================================================================== */ .about-events{ display:grid; grid-template-columns:1.3fr .9fr; gap:34px; align-items:start; } @media (max-width:900px){ .about-events{ grid-template-columns:1fr; } } .about-events p{ color:var(--text); } /* Full Event Section styling (cards, scrolling, pagination, appearance variables driven by Theme Options → Event Section) lives in assets/css/custom.css, section "Event Section". */ /* ========================================================================== 10. Link lists (Schemes / Policies / Important Links) ========================================================================== */ .link-columns{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } @media (max-width:800px){ .link-columns{ grid-template-columns:1fr; } } .link-list-box{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); } .link-list-box__head{ background:var(--navy); color:#fff; padding:12px 18px; border-radius:var(--radius) var(--radius) 0 0; font-weight:700; font-size:.95rem; } .link-list-box ul li a{ display:block; padding:10px 18px; font-size:.85rem; border-bottom:1px solid var(--border); position:relative; padding-left:30px; } .link-list-box ul li a::before{ content:"›"; position:absolute; left:14px; color:var(--saffron); font-weight:700; } .link-list-box ul li a:hover{ background:var(--bg); text-decoration:none; } /* ========================================================================== 11. Photo gallery strip ========================================================================== */ .gallery-strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; } @media (max-width:900px){ .gallery-strip{ grid-template-columns:repeat(3,1fr); } } @media (max-width:480px){ .gallery-strip{ grid-template-columns:repeat(2,1fr); } } .gallery-strip__item{ display:block; overflow:hidden; border-radius:4px; padding:0; border:0; background:none; cursor:pointer; aspect-ratio:1/1; width:100%; } .gallery-strip__item[hidden]{ display:none; } .gallery-strip__item img{ height:100%; width:100%; object-fit:cover; display:block; transition:transform .3s ease; } .gallery-strip__item:hover img{ transform:scale(1.08); } .gallery-strip__more-wrap{ text-align:center; margin:22px 0 0; } #gdc-gallery-readmore .gdc-icon{ transition:transform .25s ease; } #gdc-gallery-readmore.is-expanded .gdc-icon{ transform:rotate(90deg); } /* ------------------------------------------------------------------------- Photo Gallery Lightbox ---------------------------------------------------------------------- */ body.gdc-lightbox-open{ overflow:hidden; } .gdc-lightbox-overlay{ position:fixed; inset:0; z-index:10000; background:rgba(4,14,26,.92); display:flex; align-items:center; justify-content:center; padding:20px; animation:gdc-extlink-fade-in .2s ease; } .gdc-lightbox-overlay[hidden]{ display:none; } .gdc-lightbox{ position:relative; width:100%; height:100%; max-width:1100px; max-height:90vh; display:flex; flex-direction:column; align-items:center; justify-content:center; animation:gdc-lightbox-zoom-in .25s ease; } @keyframes gdc-lightbox-zoom-in{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } } .gdc-lightbox__stage{ flex:1 1 auto; width:100%; display:flex; align-items:center; justify-content:center; min-height:0; overflow:hidden; } .gdc-lightbox__image{ max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.5); } .gdc-lightbox__close{ position:absolute; top:-4px; right:-4px; z-index:2; background:rgba(255,255,255,.12); border:0; color:#fff; border-radius:50%; width:42px; height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .gdc-lightbox__close:hover{ background:var(--saffron); } .gdc-lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; background:rgba(255,255,255,.12); border:0; color:#fff; border-radius:50%; width:52px; height:52px; font-size:2rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; } .gdc-lightbox__nav:hover{ background:var(--saffron); } .gdc-lightbox__nav:disabled{ opacity:.3; cursor:not-allowed; } .gdc-lightbox__nav--prev{ left:-6px; } .gdc-lightbox__nav--next{ right:-6px; } .gdc-lightbox__footer{ flex:0 0 auto; text-align:center; padding:14px 60px 0; max-width:100%; } .gdc-lightbox__caption{ color:#fff; font-size:.95rem; margin:0 0 4px; } .gdc-lightbox__counter{ color:rgba(255,255,255,.7); font-size:.8rem; margin:0; } @media (max-width:640px){ .gdc-lightbox-overlay{ padding:10px; } .gdc-lightbox__nav{ width:42px; height:42px; font-size:1.5rem; } .gdc-lightbox__nav--prev{ left:2px; } .gdc-lightbox__nav--next{ right:2px; } .gdc-lightbox__close{ top:6px; right:6px; width:36px; height:36px; } .gdc-lightbox__footer{ padding:10px 12px 0; } } /* ========================================================================== 12. Footer ========================================================================== */ .site-footer{ background:var(--navy-dark); color:#d3e0f2; margin-top:20px; } /* Footer columns: left = menu, middle = address, right = Google Map */ .footer-columns{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px; padding:28px 0; border-bottom:1px solid #24316f; } .footer-column__heading{ font-size:1rem; font-weight:700; color:#fff; margin:0 0 12px; padding-bottom:8px; border-bottom:2px solid var(--saffron); display:inline-block; } .footer-column--menu-vertical .footer-links{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:0; border-bottom:0; font-size:.9rem; } .footer-column--menu-horizontal .footer-links{ display:flex; flex-wrap:wrap; gap:18px; padding:0; border-bottom:0; font-size:.9rem; } .footer-address{ font-style:normal; line-height:1.7; font-size:.9rem; } .footer-address, .footer-address *{ color:#d3e0f2 !important; background:transparent !important; } .footer-address p{ margin:0 0 6px; } .footer-address a, .footer-address a:visited{ color:#d3e0f2 !important; } .footer-address a:hover{ color:var(--saffron) !important; } .footer-map{ border-radius:6px; overflow:hidden; line-height:0; } .footer-map iframe{ display:block; width:100%; } @media (max-width:900px){ .footer-columns{ grid-template-columns:1fr 1fr; } .footer-column--map{ grid-column:1 / -1; } } @media (max-width:600px){ .footer-columns{ grid-template-columns:1fr; gap:24px; } } .footer-links{ display:flex; flex-wrap:wrap; gap:18px; padding:18px 0; border-bottom:1px solid #24316f; font-size:.85rem; } .footer-links a{ color:#d3e0f2; } .footer-links a:hover{ color:var(--saffron); } .footer-info-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; padding:16px 0; border-top:1px solid #24316f; font-size:.85rem; text-align:center; } .footer-info-row strong{ color:#fff; font-weight:600; } .footer-info-row__sep{ color:var(--saffron); font-weight:700; opacity:.8; } @media (max-width:600px){ .footer-info-row{ flex-direction:column; gap:6px; } .footer-info-row__sep{ display:none; } } .footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:16px 0; border-top:1px solid #24316f; font-size:.8rem; align-items:center; } .footer-badges{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; } .footer-badges img{ height:38px; width:auto; background:#fff; padding:3px; border-radius:3px; } /* ========================================================================== 13. Generic page/post content (page.php, single.php) ========================================================================== */ .page-content{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:30px; } .page-content h1{ font-size:1.6rem; border-bottom:2px solid var(--saffron); padding-bottom:10px; } .breadcrumbs{ font-size:.8rem; color:var(--text-muted); margin-bottom:16px; } .breadcrumbs a{ color:var(--text-muted); } /* ========================================================================== 14. Responsive nav (mobile) ========================================================================== */ @media (max-width:960px){ .menu-toggle{ display:block; margin-left:auto; } .primary-menu{ display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--navy-dark); width:100%; } .primary-menu.is-open{ display:flex; } .primary-menu > li > a{ border-right:0; border-bottom:1px solid rgba(255,255,255,.1); } .primary-menu ul.sub-menu{ position:static; box-shadow:none; border-top:0; } .primary-menu ul.sub-menu ul.sub-menu{ left:0; } .masthead__emblem{ width:44px; } .masthead__title{ flex:1 1 0; min-width:0; } .masthead__title h1{ font-size:1.05rem; } .masthead__title span{ font-size:.8rem; } .masthead__partners{ width:100%; justify-content:center; flex-wrap:nowrap; gap:14px; margin-top:6px; overflow-x:auto; } .masthead__partners img{ height:32px; width:auto; flex:0 0 auto; } } @media (max-width:480px){ .masthead__emblem{ width:36px; } .masthead__title h1{ font-size:.95rem; } .masthead__title span{ font-size:.72rem; } .masthead__partners{ gap:10px; } .masthead__partners img{ height:26px; } }