/* ============================================================ seemant.org — site.css All design tokens live here as CSS custom properties. Mirrors the Divi theme settings from et_divi (aa_options). ============================================================ */ /* ── Self-hosted fonts ────────────────────────────────────── */ /* Preload strategy (add in layout ): EVERY page: abeezee-400-n, nunito-sans-400-n, average-sans-400-n, open-sans-400-n HOMEPAGE only: share-tech-400-n, lora-400-n, oswald-400-n Archivo and Nunito (plain) appear only in Google Fonts @font-face declarations — never in actual font-family rules — so they are deliberately NOT self-hosted. */ /* ABeeZee — headings (preload every page) */ @font-face { font-family: 'ABeeZee'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/abeezee-400-n.woff2') format('woff2'); } @font-face { font-family: 'ABeeZee'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/abeezee-400-i.woff2') format('woff2'); } /* Nunito Sans — body (preload every page) */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/nunito-sans-300-n.woff2') format('woff2'); } @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/nunito-sans-400-n.woff2') format('woff2'); } @font-face { font-family: 'Nunito Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/nunito-sans-400-i.woff2') format('woff2'); } @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/nunito-sans-600-n.woff2') format('woff2'); } @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/nunito-sans-700-n.woff2') format('woff2'); } /* Average Sans — primary navigation (preload every page) */ @font-face { font-family: 'Average Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/average-sans-400-n.woff2') format('woff2'); } /* Share Tech — hero decorative large text (preload homepage only) */ @font-face { font-family: 'Share Tech'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/share-tech-400-n.woff2') format('woff2'); } /* Open Sans — buttons, inline content (preload every page) */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/open-sans-300-n.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/open-sans-400-n.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/open-sans-400-i.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/open-sans-600-n.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/open-sans-700-n.woff2') format('woff2'); } /* Lora — story/blog serif body (preload homepage only; load on post pages) */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lora-400-n.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/lora-400-i.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/lora-500-n.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/lora-600-n.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: italic; font-weight: 600; font-display: swap; src: url('/fonts/lora-600-i.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/lora-700-n.woff2') format('woff2'); } /* Oswald — uppercase labels (preload homepage only) */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/oswald-300-n.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/oswald-400-n.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/oswald-500-n.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/oswald-600-n.woff2') format('woff2'); } /* ── Design tokens ────────────────────────────────────────── */ :root { /* Colors */ --color-accent: #0083e8; --color-accent-alt: #2ea3f2; --color-link: #2c8ae8; --color-link-hover: #1a6aba; --color-text: #161616; --color-heading: #1c1c1c; --color-bg: #ffffff; /* Header */ --color-header-bg: #ffffff; /* Footer */ --color-footer-bg: rgba(10, 10, 43, 0.94); --color-footer-text: #b2b2b2; --color-footer-heading: #ffffff; --color-footer-link: #b2b2b2; --color-footer-link-hover: #ffffff; --color-footer-bar-bg: rgba(0, 0, 0, 0.56); /* Buttons */ --color-btn-bg: #02489a; --color-btn-bg-hover: #3980f9; --color-btn-text: #ffffff; /* Font families */ --font-body: 'Nunito Sans', Helvetica, Arial, Lucida, sans-serif; --font-heading: 'ABeeZee', Helvetica, Arial, Lucida, sans-serif; --font-nav: 'Average Sans', Helvetica, Arial, Lucida, sans-serif; --font-hero: 'Share Tech', Helvetica, Arial, Lucida, sans-serif; --font-content: 'Open Sans', Helvetica, Arial, Lucida, sans-serif; --font-serif: 'Lora', Georgia, 'Times New Roman', serif; --font-label: 'Oswald', Helvetica, Arial, Lucida, sans-serif; /* Font sizes */ --font-size-base: 16px; --font-size-nav: 16px; --font-size-widget-header: 20px; --font-size-small: 14px; --font-size-btn: 15px; /* Line heights */ --line-height-base: 1.7em; --line-height-tight: 1.2em; --line-height-mid: 1.5em; /* Letter spacing */ --letter-spacing-nav: -1px; --letter-spacing-btn: 5px; --letter-spacing-label: 3px; /* Layout */ --header-height: 92px; --header-height-fixed: 40px; --content-max-width: 1080px; --content-width-pct: 80%; --row-padding: 2% 0; --section-padding: 54px 0; --footer-padding-top: 60px; /* Border radius */ --radius-btn: 100px; --radius-card: 4px; } /* ── Reset / base ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--font-size-base); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; padding: 0; font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-text); background-color: var(--color-bg); } img, video { max-width: 100%; height: auto; display: block; } a { color: var(--color-link); text-decoration: none; } a:hover { color: var(--color-link-hover); } /* ── Typography ───────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-heading); line-height: var(--line-height-tight); margin-top: 0; margin-bottom: 0.5em; font-weight: 400; } p { margin-top: 0; margin-bottom: 1em; } /* ── Layout helpers ───────────────────────────────────────── */ .container { width: var(--content-width-pct); max-width: var(--content-max-width); margin-inline: auto; position: relative; } .clearfix::after { content: ''; display: block; clear: both; visibility: hidden; height: 0; } /* ── Header ───────────────────────────────────────────────── */ #main-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background-color: var(--color-header-bg); height: var(--header-height); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); transition: height 0.2s ease, box-shadow 0.2s ease; } #main-header.et-fixed-header { height: var(--header-height-fixed); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .et_menu_container { display: flex; align-items: center; height: 100%; } .logo_container { display: flex; align-items: center; flex-shrink: 0; } .logo_container a { display: flex; align-items: center; } #logo { height: var(--header-height); width: auto; max-height: 100%; transition: height 0.2s ease; } #main-header.et-fixed-header #logo { height: var(--header-height-fixed); } /* ── Primary navigation ───────────────────────────────────── */ #et-top-navigation { display: flex; align-items: center; margin-left: auto; height: 100%; } #top-menu-nav { height: 100%; } #top-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; height: 100%; } #top-menu > .menu-item > a { font-family: var(--font-nav); font-size: var(--font-size-nav); font-weight: 700; letter-spacing: var(--letter-spacing-nav); color: var(--color-text); padding: 0 18px; height: 100%; display: flex; align-items: center; transition: color 0.2s ease; } #top-menu > .menu-item > a:hover, #top-menu > .menu-item.current-menu-item > a { color: var(--color-accent); } /* Dropdown */ #top-menu .sub-menu { position: absolute; top: 100%; left: 0; list-style: none; margin: 0; padding: 0; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); min-width: 200px; z-index: 100; display: none; } #top-menu .menu-item-has-children { position: relative; } #top-menu .menu-item-has-children:hover > .sub-menu { display: block; } #top-menu .sub-menu .menu-item a { font-family: var(--font-nav); font-size: var(--font-size-small); font-weight: 700; letter-spacing: var(--letter-spacing-nav); color: var(--color-text); padding: 10px 20px; display: block; transition: color 0.2s ease, background 0.2s ease; } #top-menu .sub-menu .menu-item a:hover { color: var(--color-accent); background: #f5f5f5; } /* Search and mobile nav hidden per Divi custom CSS */ #et_top_search { display: none !important; } #et_mobile_nav_menu { display: none; } /* ── Page body offset for fixed header ────────────────────── */ #page-container { padding-top: var(--header-height); } /* ── Buttons ──────────────────────────────────────────────── */ .btn, .et_pb_button { display: inline-block; font-family: var(--font-content); font-size: var(--font-size-btn); font-weight: 700; text-transform: uppercase; letter-spacing: var(--letter-spacing-btn); color: var(--color-btn-text); background-color: var(--color-btn-bg); border: none; border-radius: var(--radius-btn); padding: 16px 32px; cursor: pointer; transition: background-color 0.3s ease, border-radius 0.3s ease; text-decoration: none; } .btn:hover, .et_pb_button:hover { background-color: var(--color-btn-bg-hover); color: var(--color-btn-text); } /* ── Footer ───────────────────────────────────────────────── */ #main-footer { background-color: var(--color-footer-bg); color: var(--color-footer-text); } .footer-widgets { padding: var(--footer-padding-top) 0 40px; } .footer-widgets h4 { font-family: var(--font-body); font-size: var(--font-size-widget-header); font-weight: 700; color: var(--color-footer-heading); text-transform: none; margin-bottom: 1em; letter-spacing: 0; } .footer-widgets p, .footer-widgets address { font-size: var(--font-size-base); line-height: var(--line-height-mid); color: var(--color-footer-text); font-style: normal; } .footer-widgets a { color: var(--color-footer-link); transition: color 0.2s ease; } .footer-widgets a:hover { color: var(--color-footer-link-hover); } /* Footer quick-nav menu */ #footer_menu .menu-item a, #footer_menu .menu-item { color: #fff !important; } /* Footer bottom bar */ .footer-bottom { background-color: var(--color-footer-bar-bg); padding: 14px 0; font-size: var(--font-size-small); color: var(--color-footer-text); } .footer-bottom a { color: var(--color-footer-text); } .footer-bottom .footer-social { display: flex; justify-content: flex-end; gap: 12px; list-style: none; margin: 0; padding: 0; } /* ── Mobile nav drawer ────────────────────────────────────── */ .mobile_menu_bar { background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--color-text); padding: 8px; } .mobile-nav-drawer { background: #fff; border-top: 1px solid #eee; padding: 1rem 0; } .mobile-nav-drawer ul { list-style: none; margin: 0; padding: 0; } .mobile-nav-drawer li a { display: block; padding: 10px 5%; font-family: var(--font-nav); font-weight: 700; color: var(--color-text); border-bottom: 1px solid #f0f0f0; } .mobile-nav-drawer li ul { padding-left: 1.5rem; } /* ── Page hero banner ─────────────────────────────────────── */ .page-hero { position: relative; min-height: 300px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; } .page-hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .page-hero-content { position: relative; z-index: 1; color: #fff; padding: 3rem 5%; } .page-hero-content h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 0.5rem; } .post-date { font-size: 0.9rem; opacity: 0.85; } /* ── Page content area ────────────────────────────────────── */ .page-content-wrap { padding: 60px 0 80px; } .page-body, .post-body { font-family: var(--font-content); font-size: 1rem; line-height: 1.8; color: #333; max-width: 860px; margin: 0 auto; } .page-body img, .post-body img { border-radius: var(--radius-card); margin: 1.5rem 0; max-width: 100%; } .page-body h2, .post-body h2 { font-size: 1.6rem; margin-top: 2rem; } .page-body h3, .post-body h3 { font-size: 1.3rem; margin-top: 1.5rem; } /* ── Blog grid ────────────────────────────────────────────── */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; } .blog-card { border: 1px solid #e8e8e8; border-radius: var(--radius-card); overflow: hidden; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.06); transition: box-shadow 0.2s; } .blog-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); } .blog-card-img-link img { width: 100%; height: 200px; object-fit: cover; display: block; margin: 0; } .blog-card-body { padding: 1.2rem; } .blog-card-title { font-size: 1.1rem; margin-bottom: 0.5rem; } .blog-card-title a { color: var(--color-heading); } .blog-card-title a:hover { color: var(--color-accent); } .blog-card-date { display: block; font-size: 0.82rem; color: #888; margin-bottom: 0.5rem; } .post-categories { margin-bottom: 1.5rem; } .cat-badge { display: inline-block; background: var(--color-accent); color: #fff; font-size: 0.78rem; padding: 3px 10px; border-radius: 100px; margin-right: 6px; } .post-nav { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #eee; } .btn--small { font-size: 12px; padding: 10px 20px; letter-spacing: 3px; } .btn--outline { background: transparent; border: 2px solid var(--color-btn-bg); color: var(--color-btn-bg); } .btn--outline:hover { background: var(--color-btn-bg); color: #fff; } /* ── Contact form ─────────────────────────────────────────── */ .contact-form { max-width: 620px; margin: 2rem 0; } .form-group { margin-bottom: 1.4rem; } .form-group label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.92rem; } .form-group input, .form-group textarea { width: 100%; padding: 10px 14px; border: 1px solid #ccc; border-radius: 4px; font-family: var(--font-content); font-size: 1rem; transition: border-color 0.2s; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--color-accent); } .form-success { background: #e6f4ea; border: 1px solid #4caf50; border-radius: 4px; padding: 1rem 1.2rem; color: #2e7d32; margin-bottom: 1.5rem; } .form-error { background: #fdecea; border: 1px solid #f44336; border-radius: 4px; padding: 1rem 1.2rem; color: #c62828; margin-bottom: 1.5rem; } /* ── Footer nav list ──────────────────────────────────────── */ #footer_menu ul { list-style: none; margin: 0; padding: 0; } #footer_menu ul li { margin-bottom: 0.5em; } #footer_menu ul li a { color: var(--color-footer-link); } #footer_menu ul li a:hover { color: var(--color-footer-link-hover); } /* ── Footer grid ──────────────────────────────────────────── */ .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } /* ── Homepage section base ────────────────────────────────── */ .hs { padding: 70px 0; } .hs h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 1.2rem; } .section-eyebrow { font-family: var(--font-label); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 3px; color: var(--color-accent); margin-bottom: 0.5rem; font-weight: 600; } /* ── Person / Team grid ──────────────────────────────────── */ .person-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; } .person-card { text-align: center; } .person-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; display: block; } .person-card h3 { font-size: 1.125rem; font-weight: 700; color: var(--color-heading); margin: 14px 0 4px; line-height: 1.3; } .person-card h4 { font-size: 0.8rem; font-weight: 600; color: var(--color-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.08em; margin: 0; } /* ── Utility ──────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 980px) { :root { --header-height: 66px; } #et-top-navigation #top-menu-nav { display: none; } #et_mobile_nav_menu { display: block; margin-left: auto; } .container { width: 92%; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .person-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { :root { --font-size-base: 15px; } .blog-grid { grid-template-columns: 1fr; } .person-grid { grid-template-columns: 1fr; } }