/** * InsurePro - main stylesheet * * Mobile-first. Everything larger than a phone lives in responsive.css. * All colors, fonts and sizes read from CSS custom properties that are * generated from the Customizer (see insurepro_get_customizer_css()), so the * whole theme re-skins without touching this file. * * TABLE OF CONTENTS * 1. Custom properties & reset * 2. Base elements * 3. Layout helpers * 4. Buttons & pills * 5. Forms & notices * 6. Header & navigation * 7. Hero * 8. Sections (categories, stats, testimonials, newsletter) * 9. Post cards, lists & single posts * 10. Author box, share, related, pagination * 11. Comments * 12. Sidebar & widgets * 13. Page templates (landing, contact, 404) * 14. Footer * 15. Animations & utilities * * @package InsurePro * @since 1.0.0 */ /*-------------------------------------------------------------- 1. Custom properties & reset --------------------------------------------------------------*/ :root { /* Fallbacks. The Customizer overrides these inline in . */ --ip-primary: #1a5276; --ip-primary-dark: #154360; --ip-primary-light: #1f6690; --ip-primary-rgb: 26, 82, 118; --ip-secondary: #2ecc71; --ip-secondary-dark: #27ae60; --ip-secondary-rgb: 46, 204, 113; --ip-accent: #f39c12; --ip-accent-dark: #d68910; --ip-accent-rgb: 243, 156, 18; --ip-bg: #f8f9fa; --ip-bg-alt: #eef0f2; --ip-text: #2c3e50; --ip-text-rgb: 44, 62, 80; --ip-muted: #6b7f92; --ip-border: #dfe4e8; --ip-white: #ffffff; --ip-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ip-font-heading: "Playfair Display", Georgia, "Times New Roman", serif; --ip-font-size: 17px; --ip-scale: 1.25; /* Spacing scale */ --ip-space-xs: 0.5rem; --ip-space-sm: 0.875rem; --ip-space-md: 1.5rem; --ip-space-lg: 2.5rem; --ip-space-xl: 4rem; --ip-space-2xl: 6rem; /* Radii and shadows */ --ip-radius-sm: 6px; --ip-radius: 12px; --ip-radius-lg: 20px; --ip-radius-pill: 999px; --ip-shadow-sm: 0 1px 2px rgba(var(--ip-text-rgb), 0.06), 0 2px 8px rgba(var(--ip-text-rgb), 0.05); --ip-shadow: 0 4px 12px rgba(var(--ip-text-rgb), 0.08), 0 12px 32px rgba(var(--ip-text-rgb), 0.06); --ip-shadow-lg: 0 12px 28px rgba(var(--ip-text-rgb), 0.12), 0 24px 60px rgba(var(--ip-text-rgb), 0.08); /* Motion */ --ip-ease: cubic-bezier(0.4, 0, 0.2, 1); --ip-speed: 240ms; /* Layout */ --ip-container: 1200px; --ip-content: 760px; --ip-header-h: 68px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Keep anchor targets clear of the sticky header. */ scroll-padding-top: calc(var(--ip-header-h) + 1rem); } body { margin: 0; background-color: var(--ip-bg); color: var(--ip-text); font-family: var(--ip-font-body); font-size: var(--ip-font-size); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Lock scrolling while the mobile menu drawer is open. */ body.menu-open { overflow: hidden; } /*-------------------------------------------------------------- 2. Base elements --------------------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--ip-space-sm); font-family: var(--ip-font-heading); font-weight: 700; line-height: 1.22; letter-spacing: -0.015em; color: var(--ip-primary); overflow-wrap: break-word; } /* * The type scale is derived from --ip-scale so the Customizer slider changes * the rhythm of every heading at once. h4 sits one step above the body size. */ h4 { font-size: calc(1rem * var(--ip-scale)); } h3 { font-size: calc(1rem * var(--ip-scale) * var(--ip-scale)); } h2 { font-size: calc(1rem * var(--ip-scale) * var(--ip-scale) * var(--ip-scale)); } h1 { font-size: calc(1rem * var(--ip-scale) * var(--ip-scale) * var(--ip-scale) * 1.1); } h5 { font-size: 1rem; } h6 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; } p { margin: 0 0 var(--ip-space-md); } a { color: var(--ip-primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--ip-speed) var(--ip-ease); } a:hover, a:focus { color: var(--ip-accent-dark); } /* One consistent, high-contrast focus ring across the whole theme. */ :focus-visible { outline: 3px solid var(--ip-accent); outline-offset: 2px; border-radius: 3px; } img, picture, svg, video { max-width: 100%; height: auto; display: block; } ul, ol { padding-left: 1.35rem; } blockquote { margin: var(--ip-space-lg) 0; padding: var(--ip-space-md) var(--ip-space-md) var(--ip-space-md) var(--ip-space-lg); border-left: 4px solid var(--ip-accent); background: var(--ip-white); border-radius: 0 var(--ip-radius) var(--ip-radius) 0; font-family: var(--ip-font-heading); font-size: 1.12em; font-style: italic; color: var(--ip-primary); box-shadow: var(--ip-shadow-sm); } blockquote p:last-child { margin-bottom: 0; } code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; } code { padding: 0.15em 0.4em; background: var(--ip-bg-alt); border-radius: var(--ip-radius-sm); } pre { padding: var(--ip-space-md); overflow-x: auto; background: var(--ip-primary); color: #eaf2f8; border-radius: var(--ip-radius); line-height: 1.6; } pre code { background: none; padding: 0; color: inherit; } hr { border: 0; height: 1px; background: var(--ip-border); margin: var(--ip-space-lg) 0; } table { width: 100%; border-collapse: collapse; margin-bottom: var(--ip-space-md); font-size: 0.95em; } th, td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--ip-border); text-align: left; } th { background: var(--ip-bg-alt); font-weight: 600; color: var(--ip-primary); } /* Tables must scroll rather than force the page sideways. */ .entry-content table { display: block; overflow-x: auto; white-space: nowrap; } /*-------------------------------------------------------------- 3. Layout helpers --------------------------------------------------------------*/ .site { display: flex; flex-direction: column; min-height: 100vh; } .site-content { flex: 1 0 auto; padding-bottom: var(--ip-space-xl); } .container { width: 100%; max-width: var(--ip-container); margin-inline: auto; padding-inline: 1.15rem; } /* Two-column layout: single column on mobile, split in responsive.css. */ .layout { display: grid; grid-template-columns: 1fr; gap: var(--ip-space-xl); padding-top: var(--ip-space-lg); } .site-main { min-width: 0; /* Lets grid children shrink instead of overflowing. */ } .section { padding-block: var(--ip-space-xl); } .section--categories, .section--testimonials { background: var(--ip-white); } .section__header { margin-bottom: var(--ip-space-lg); } .section__header--center { text-align: center; max-width: 620px; margin-inline: auto; } .section__header--split { display: flex; flex-direction: column; gap: var(--ip-space-md); } .section__eyebrow, .page-eyebrow, .newsletter__title + .newsletter__text { margin: 0 0 0.35rem; } .section__eyebrow, .page-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ip-secondary-dark); } .section-title, .page-title { margin-bottom: var(--ip-space-xs); } .section__lead, .page-subtitle { color: var(--ip-muted); font-size: 1.05rem; margin-bottom: 0; } .page-header { margin-bottom: var(--ip-space-lg); padding-bottom: var(--ip-space-md); border-bottom: 1px solid var(--ip-border); } .archive-count { margin: var(--ip-space-sm) 0 0; font-size: 0.9rem; color: var(--ip-muted); } /* Breadcrumbs */ .breadcrumbs { padding-top: var(--ip-space-md); font-size: 0.85rem; color: var(--ip-muted); } .breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; } .breadcrumbs__item + .breadcrumbs__item::before { content: "/"; margin-right: 0.35rem; color: var(--ip-border); } .breadcrumbs__item a { text-decoration: none; color: var(--ip-muted); } .breadcrumbs__item a:hover { color: var(--ip-primary); text-decoration: underline; } .breadcrumbs__item [aria-current="page"] { color: var(--ip-text); font-weight: 500; } /*-------------------------------------------------------------- 4. Buttons & pills --------------------------------------------------------------*/ .btn, button, input[type="submit"], .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.72rem 1.4rem; border: 2px solid transparent; border-radius: var(--ip-radius-pill); font-family: var(--ip-font-body); font-size: 0.95rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform var(--ip-speed) var(--ip-ease), box-shadow var(--ip-speed) var(--ip-ease), background-color var(--ip-speed) var(--ip-ease), color var(--ip-speed) var(--ip-ease), border-color var(--ip-speed) var(--ip-ease); } .btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: var(--ip-shadow); } .btn:active { transform: translateY(0); } .btn--primary, input[type="submit"], .wp-block-button__link { background: var(--ip-primary); color: var(--ip-white); } .btn--primary:hover, .btn--primary:focus-visible { background: var(--ip-primary-dark); color: var(--ip-white); } .btn--accent { background: var(--ip-accent); color: #3d2c00; } .btn--accent:hover, .btn--accent:focus-visible { background: var(--ip-accent-dark); color: #2e2100; } .btn--secondary { background: var(--ip-secondary); color: #06331a; } .btn--secondary:hover, .btn--secondary:focus-visible { background: var(--ip-secondary-dark); } .btn--ghost { background: transparent; border-color: currentColor; color: var(--ip-primary); } .btn--ghost:hover, .btn--ghost:focus-visible { background: var(--ip-primary); border-color: var(--ip-primary); color: var(--ip-white); } .btn--lg { padding: 0.95rem 1.85rem; font-size: 1.02rem; } .btn--block { display: flex; width: 100%; } /* Category and tag pills */ .entry-categories, .entry-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: var(--ip-space-sm); } .cat-pill { display: inline-block; padding: 0.25rem 0.75rem; background: rgba(var(--ip-primary-rgb), 0.08); border-radius: var(--ip-radius-pill); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--ip-primary); transition: background-color var(--ip-speed) var(--ip-ease), color var(--ip-speed) var(--ip-ease); } .cat-pill:hover, .cat-pill:focus-visible { background: var(--ip-primary); color: var(--ip-white); } .tag-pill { font-size: 0.85rem; color: var(--ip-muted); text-decoration: none; } .tag-pill:hover { color: var(--ip-accent-dark); text-decoration: underline; } .entry-tags__label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--ip-text); } /*-------------------------------------------------------------- 5. Forms & notices --------------------------------------------------------------*/ input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], select, textarea { width: 100%; padding: 0.72rem 0.95rem; background: var(--ip-white); border: 1.5px solid var(--ip-border); border-radius: var(--ip-radius-sm); font-family: inherit; font-size: 0.98rem; color: var(--ip-text); transition: border-color var(--ip-speed) var(--ip-ease), box-shadow var(--ip-speed) var(--ip-ease); } input:focus, select:focus, textarea:focus { border-color: var(--ip-primary); box-shadow: 0 0 0 4px rgba(var(--ip-primary-rgb), 0.12); outline: none; } textarea { resize: vertical; min-height: 120px; } .ip-field { margin-bottom: var(--ip-space-sm); } .ip-field label { display: block; margin-bottom: 0.3rem; font-size: 0.88rem; font-weight: 600; color: var(--ip-text); } .ip-field--consent label, .newsletter-form__consent label { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 400; font-size: 0.85rem; color: var(--ip-muted); line-height: 1.5; } .ip-field--consent input[type="checkbox"], .newsletter-form__consent input[type="checkbox"] { width: auto; margin-top: 0.25rem; flex-shrink: 0; accent-color: var(--ip-primary); } .required { color: #c0392b; } /* The honeypot must be invisible to humans but reachable by bots. */ .ip-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Inline form feedback */ .ip-form-message { margin: var(--ip-space-xs) 0 0; padding: 0; font-size: 0.88rem; font-weight: 500; min-height: 1px; } .ip-form-message.is-success { color: var(--ip-secondary-dark); } .ip-form-message.is-error { color: #c0392b; } .is-submitting { opacity: 0.65; pointer-events: none; } /* Redirect-based notice shown above the content */ .ip-notice { display: flex; align-items: center; gap: 0.6rem; max-width: var(--ip-container); margin: var(--ip-space-md) auto 0; padding: 0.85rem 1.15rem; border-radius: var(--ip-radius); font-size: 0.92rem; font-weight: 500; } .ip-notice--success { background: rgba(var(--ip-secondary-rgb), 0.14); color: var(--ip-secondary-dark); border: 1px solid rgba(var(--ip-secondary-rgb), 0.35); } .ip-notice--error { background: rgba(192, 57, 43, 0.1); color: #96281b; border: 1px solid rgba(192, 57, 43, 0.28); } /* Search form */ .search-form { display: flex; gap: 0.5rem; } .search-form .search-field { flex: 1; } .search-form .search-submit { flex-shrink: 0; padding-inline: 1.1rem; background: var(--ip-primary); color: var(--ip-white); border-radius: var(--ip-radius-sm); } .search-form .search-submit:hover { background: var(--ip-primary-dark); } /*-------------------------------------------------------------- 6. Header & navigation --------------------------------------------------------------*/ .topbar { background: var(--ip-primary-dark); color: rgba(255, 255, 255, 0.85); font-size: 0.82rem; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ip-space-md); min-height: 40px; } .topbar__phone { display: inline-flex; align-items: center; gap: 0.4rem; color: inherit; text-decoration: none; font-weight: 600; } .topbar__phone:hover { color: var(--ip-accent); } .social-menu { display: flex; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } .social-menu a { color: rgba(255, 255, 255, 0.8); text-decoration: none; } .social-menu a:hover { color: var(--ip-accent); } .site-header { position: relative; z-index: 100; background: var(--ip-white); border-bottom: 1px solid var(--ip-border); transition: box-shadow var(--ip-speed) var(--ip-ease); } /* Applied by main.js once the page scrolls past the header. */ .has-sticky-header .site-header.is-stuck { position: fixed; top: 0; left: 0; right: 0; box-shadow: var(--ip-shadow); animation: ipSlideDown var(--ip-speed) var(--ip-ease); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ip-space-sm); min-height: var(--ip-header-h); } .site-branding { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .custom-logo-link { display: block; line-height: 0; } .custom-logo { max-height: 48px; width: auto; } .site-title { margin: 0; font-size: 1.32rem; line-height: 1.1; letter-spacing: -0.02em; } .site-title a { text-decoration: none; color: var(--ip-primary); } .site-description { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--ip-muted); line-height: 1.3; } /* Hamburger */ .menu-toggle { order: 3; padding: 0.5rem; background: transparent; border: 0; color: var(--ip-primary); } .menu-toggle__icon { display: block; width: 24px; height: 16px; position: relative; } .menu-toggle__icon span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--ip-speed) var(--ip-ease), opacity var(--ip-speed) var(--ip-ease); } .menu-toggle__icon span:nth-child(1) { top: 0; } .menu-toggle__icon span:nth-child(2) { top: 7px; } .menu-toggle__icon span:nth-child(3) { top: 14px; } .menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile drawer */ .main-navigation { position: fixed; inset: 0 0 0 auto; width: min(88vw, 340px); padding: calc(var(--ip-header-h) + 1.5rem) 1.25rem 2rem; background: var(--ip-white); box-shadow: var(--ip-shadow-lg); transform: translateX(100%); transition: transform var(--ip-speed) var(--ip-ease); overflow-y: auto; z-index: 120; visibility: hidden; } .main-navigation.is-open { transform: translateX(0); visibility: visible; } .nav-menu { margin: 0; padding: 0; list-style: none; } .nav-menu li { position: relative; border-bottom: 1px solid var(--ip-border); } .nav-menu a { display: block; padding: 0.85rem 2.5rem 0.85rem 0; font-weight: 600; font-size: 0.98rem; color: var(--ip-text); text-decoration: none; } .nav-menu a:hover, .nav-menu .current-menu-item > a, .nav-menu .current_page_item > a { color: var(--ip-primary); } .nav-menu .sub-menu { display: none; margin: 0 0 0.5rem; padding-left: 1rem; list-style: none; } .nav-menu .sub-menu.is-open { display: block; } .nav-menu .sub-menu li { border-bottom: 0; } .nav-menu .sub-menu a { padding-block: 0.55rem; font-weight: 500; font-size: 0.92rem; color: var(--ip-muted); } .submenu-toggle { position: absolute; top: 0.5rem; right: 0; padding: 0.45rem; background: transparent; border: 0; color: var(--ip-muted); transition: transform var(--ip-speed) var(--ip-ease); } .submenu-toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--ip-primary); } .menu-item--cta > a { display: inline-flex !important; margin-top: 0.75rem; padding: 0.6rem 1.25rem !important; background: var(--ip-accent); border-radius: var(--ip-radius-pill); color: #3d2c00 !important; } /* Backdrop behind the open drawer, injected by navigation.js. */ .nav-backdrop { position: fixed; inset: 0; background: rgba(var(--ip-text-rgb), 0.5); opacity: 0; visibility: hidden; transition: opacity var(--ip-speed) var(--ip-ease), visibility var(--ip-speed) var(--ip-ease); z-index: 110; } .nav-backdrop.is-visible { opacity: 1; visibility: visible; } .site-header__actions { display: flex; align-items: center; gap: 0.4rem; order: 2; } .search-toggle { padding: 0.5rem; background: transparent; border: 0; color: var(--ip-primary); border-radius: var(--ip-radius-pill); } .search-toggle:hover { background: var(--ip-bg-alt); } /* The desktop CTA and mobile CTA swap visibility in responsive.css. */ .header-cta { display: none; } .header-cta--mobile { display: flex; margin-top: var(--ip-space-md); } .header-search { padding-block: var(--ip-space-sm); background: var(--ip-bg-alt); border-top: 1px solid var(--ip-border); } .header-search[hidden] { display: none; } /* Skip link sits above everything once focused. */ .skip-link:focus { z-index: 200; } /*-------------------------------------------------------------- 7. Hero --------------------------------------------------------------*/ .hero { position: relative; padding-block: var(--ip-space-xl); background: radial-gradient(1000px 500px at 15% -10%, rgba(var(--ip-secondary-rgb), 0.16), transparent 60%), linear-gradient(160deg, var(--ip-primary) 0%, var(--ip-primary-dark) 100%); color: var(--ip-white); overflow: hidden; } /* Subtle diagonal texture so the flat gradient does not look empty. */ .hero::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 14px ); pointer-events: none; } .hero__inner { position: relative; z-index: 1; display: grid; gap: var(--ip-space-lg); } .hero__eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 var(--ip-space-sm); padding: 0.35rem 0.9rem; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--ip-radius-pill); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #d6f5e3; } .hero__title { margin: 0 0 var(--ip-space-sm); color: var(--ip-white); font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.08; } .hero__text { max-width: 52ch; margin-bottom: var(--ip-space-md); color: rgba(255, 255, 255, 0.82); font-size: 1.06rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: var(--ip-space-md); } .hero__actions .btn--ghost { color: var(--ip-white); } .hero__actions .btn--ghost:hover, .hero__actions .btn--ghost:focus-visible { background: var(--ip-white); border-color: var(--ip-white); color: var(--ip-primary); } .hero__points { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.92rem; color: rgba(255, 255, 255, 0.8); } .hero__points li { display: flex; align-items: center; gap: 0.5rem; } .hero__points svg { color: var(--ip-secondary); flex-shrink: 0; } .hero__media { position: relative; } .hero__img { width: 100%; border-radius: var(--ip-radius-lg); box-shadow: var(--ip-shadow-lg); } .hero__badge { position: absolute; left: 1rem; bottom: -1rem; display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.1rem; background: var(--ip-white); border-radius: var(--ip-radius); box-shadow: var(--ip-shadow-lg); color: var(--ip-text); } .hero__badge svg { color: var(--ip-accent); } .hero__badge strong { display: block; font-size: 0.9rem; color: var(--ip-primary); } .hero__badge span { font-size: 0.75rem; color: var(--ip-muted); } /*-------------------------------------------------------------- 8. Sections --------------------------------------------------------------*/ /* Insurance category cards */ .cat-grid { display: grid; grid-template-columns: 1fr; gap: var(--ip-space-md); } .cat-card { display: block; padding: var(--ip-space-md); background: var(--ip-bg); border: 1px solid var(--ip-border); border-radius: var(--ip-radius); text-decoration: none; color: inherit; transition: transform var(--ip-speed) var(--ip-ease), box-shadow var(--ip-speed) var(--ip-ease), border-color var(--ip-speed) var(--ip-ease); } .cat-card:hover, .cat-card:focus-visible { transform: translateY(-4px); border-color: transparent; box-shadow: var(--ip-shadow); } .cat-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: var(--ip-space-sm); background: rgba(var(--ip-primary-rgb), 0.09); border-radius: var(--ip-radius); color: var(--ip-primary); transition: background-color var(--ip-speed) var(--ip-ease), color var(--ip-speed) var(--ip-ease); } .cat-card:hover .cat-card__icon { background: var(--ip-primary); color: var(--ip-white); } /* Each cover type gets its own accent so the four cards read apart. */ .cat-card--auto:hover .cat-card__icon { background: var(--ip-primary); } .cat-card--health:hover .cat-card__icon { background: #c0392b; } .cat-card--life:hover .cat-card__icon { background: var(--ip-secondary-dark); } .cat-card--home:hover .cat-card__icon { background: var(--ip-accent-dark); } .cat-card__title { margin-bottom: 0.4rem; font-size: 1.18rem; } .cat-card__desc { margin-bottom: var(--ip-space-sm); font-size: 0.92rem; color: var(--ip-muted); } .cat-card__link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 700; color: var(--ip-primary); } .cat-card__link svg { transition: transform var(--ip-speed) var(--ip-ease); } .cat-card:hover .cat-card__link svg { transform: translateX(4px); } .cat-card--sm { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.1rem; background: var(--ip-white); } .cat-card--sm .cat-card__icon { width: 40px; height: 40px; margin: 0; } .cat-card__title { font-family: var(--ip-font-heading); color: var(--ip-primary); } /* Statistics */ .section--stats { background: var(--ip-primary); color: var(--ip-white); } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ip-space-md); text-align: center; } .stat__number { display: block; font-family: var(--ip-font-heading); font-size: clamp(1.9rem, 7vw, 2.9rem); font-weight: 800; line-height: 1; color: var(--ip-accent); font-variant-numeric: tabular-nums; } .stat__label { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.78); } .trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ip-space-md); margin: var(--ip-space-lg) 0 0; padding: var(--ip-space-md) 0 0; border-top: 1px solid rgba(255, 255, 255, 0.16); list-style: none; font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); } .trust-badges li { display: flex; align-items: center; gap: 0.45rem; } .trust-badges svg { color: var(--ip-secondary); } /* Testimonials */ .testimonials { position: relative; max-width: 720px; margin-inline: auto; } .testimonial { display: none; margin: 0; padding: var(--ip-space-lg) var(--ip-space-md); background: var(--ip-bg); border-radius: var(--ip-radius-lg); text-align: center; box-shadow: var(--ip-shadow-sm); animation: ipFadeIn 400ms var(--ip-ease); } .testimonial.is-active { display: block; } .testimonial__stars { display: flex; justify-content: center; gap: 0.15rem; margin-bottom: var(--ip-space-sm); color: var(--ip-accent); } .testimonial__stars svg { fill: currentColor; } .testimonial__quote { margin: 0 0 var(--ip-space-md); padding: 0; border: 0; background: none; box-shadow: none; font-family: var(--ip-font-heading); font-size: 1.16rem; font-style: normal; line-height: 1.6; color: var(--ip-text); } .testimonial__quote svg { margin-inline: auto; margin-bottom: 0.6rem; color: rgba(var(--ip-primary-rgb), 0.22); } .testimonial__quote p { margin: 0; } .testimonial__name { display: block; font-weight: 700; color: var(--ip-primary); } .testimonial__role { display: block; font-size: 0.85rem; color: var(--ip-muted); } .testimonials__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--ip-space-md); } .testimonials__dot { width: 10px; height: 10px; padding: 0; background: var(--ip-border); border: 0; border-radius: 50%; transition: background-color var(--ip-speed) var(--ip-ease), transform var(--ip-speed) var(--ip-ease); } .testimonials__dot.is-active { background: var(--ip-primary); transform: scale(1.3); } /* Newsletter */ .section--newsletter { padding-bottom: var(--ip-space-2xl); } .newsletter { display: grid; gap: var(--ip-space-md); padding: var(--ip-space-lg) var(--ip-space-md); background: linear-gradient(135deg, var(--ip-primary) 0%, var(--ip-primary-light) 100%); border-radius: var(--ip-radius-lg); color: var(--ip-white); box-shadow: var(--ip-shadow); } .newsletter__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: var(--ip-space-sm); background: rgba(255, 255, 255, 0.14); border-radius: var(--ip-radius); color: var(--ip-accent); } .newsletter__title { margin-bottom: 0.4rem; color: var(--ip-white); } .newsletter__text { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.96rem; } .newsletter-form__row { display: flex; flex-direction: column; gap: 0.6rem; } .newsletter-form__input { border-color: transparent; } .newsletter-form__consent { margin: 0.7rem 0 0; } .newsletter .newsletter-form__consent label { color: rgba(255, 255, 255, 0.75); } .newsletter .ip-form-message.is-success { color: #b8f3d1; } .newsletter .ip-form-message.is-error { color: #ffd0c9; } /*-------------------------------------------------------------- 9. Post cards, lists & single posts --------------------------------------------------------------*/ .post-grid { display: grid; grid-template-columns: 1fr; gap: var(--ip-space-md); } .post-list { display: flex; flex-direction: column; gap: var(--ip-space-lg); } /* Card */ .entry--card { display: flex; flex-direction: column; background: var(--ip-white); border: 1px solid var(--ip-border); border-radius: var(--ip-radius); overflow: hidden; transition: transform var(--ip-speed) var(--ip-ease), box-shadow var(--ip-speed) var(--ip-ease); } .entry--card:hover { transform: translateY(-4px); box-shadow: var(--ip-shadow); } .entry--card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ip-bg-alt); } .entry--card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ip-ease); } .entry--card:hover .entry--card__img { transform: scale(1.05); } .entry--card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(var(--ip-primary-rgb), 0.25); } .entry--card__body { display: flex; flex-direction: column; flex: 1; padding: var(--ip-space-md); } .entry--card__title { margin-bottom: 0.5rem; font-size: 1.1rem; line-height: 1.32; } .entry--card__title a { color: inherit; text-decoration: none; } .entry--card__title a:hover { color: var(--ip-accent-dark); } .entry--card__excerpt { flex: 1; margin-bottom: var(--ip-space-sm); font-size: 0.92rem; color: var(--ip-muted); } .entry--card__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: var(--ip-space-sm); border-top: 1px solid var(--ip-border); font-size: 0.78rem; color: var(--ip-muted); } .entry--card__author { display: flex; align-items: center; gap: 0.45rem; min-width: 0; } .entry--card__avatar { border-radius: 50%; flex-shrink: 0; } /* List entry */ .entry--list { display: grid; gap: var(--ip-space-sm); padding-bottom: var(--ip-space-lg); border-bottom: 1px solid var(--ip-border); } .entry--list:last-child { border-bottom: 0; } .entry--list .post-thumbnail { display: block; border-radius: var(--ip-radius); overflow: hidden; aspect-ratio: 16 / 9; } .entry--list .post-thumbnail__img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ip-ease); } .entry--list:hover .post-thumbnail__img { transform: scale(1.04); } .entry-title { line-height: 1.25; } .entry--list .entry-title { font-size: 1.42rem; margin-bottom: 0.4rem; } .entry-title a { color: inherit; text-decoration: none; } .entry-title a:hover, .entry-title a:focus-visible { color: var(--ip-accent-dark); } .entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-bottom: var(--ip-space-sm); font-size: 0.82rem; color: var(--ip-muted); } .entry-meta > span { display: inline-flex; align-items: center; gap: 0.3rem; } .entry-meta a { color: inherit; text-decoration: none; font-weight: 600; } .entry-meta a:hover { color: var(--ip-primary); text-decoration: underline; } .entry-summary { color: var(--ip-muted); font-size: 0.98rem; } .entry-summary p:last-child { margin-bottom: 0.6rem; } .entry__more { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 700; text-decoration: none; } .entry__more svg { transition: transform var(--ip-speed) var(--ip-ease); } .entry__more:hover svg { transform: translateX(4px); } /* Single post */ .entry--single, .entry--page, .entry--full { background: var(--ip-white); border-radius: var(--ip-radius-lg); padding: var(--ip-space-md); box-shadow: var(--ip-shadow-sm); } .entry-header--single { margin-bottom: var(--ip-space-md); } .entry-header--single .entry-title { font-size: clamp(1.75rem, 5.5vw, 2.6rem); margin-bottom: var(--ip-space-sm); } .entry-standfirst { font-size: 1.1rem; color: var(--ip-muted); line-height: 1.6; } .entry--single .post-thumbnail { margin: 0 0 var(--ip-space-md); border-radius: var(--ip-radius); overflow: hidden; } .post-thumbnail__caption { margin-top: 0.5rem; font-size: 0.82rem; color: var(--ip-muted); text-align: center; } .entry-content { max-width: var(--ip-content); } .entry-content > * + * { margin-top: var(--ip-space-md); } .entry-content h2 { margin-top: var(--ip-space-lg); padding-top: var(--ip-space-xs); } .entry-content h3 { margin-top: var(--ip-space-md); } .entry-content ul, .entry-content ol { padding-left: 1.5rem; } .entry-content li + li { margin-top: 0.4rem; } .entry-content img { border-radius: var(--ip-radius); } .entry-content--wide, .entry-content--front, .entry-content--landing, .entry-content--contact { max-width: none; } .entry-footer { margin-top: var(--ip-space-lg); padding-top: var(--ip-space-md); border-top: 1px solid var(--ip-border); } .page-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: var(--ip-space-md); font-weight: 600; font-size: 0.9rem; } .page-links a, .page-links__item { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding-inline: 0.4rem; border: 1px solid var(--ip-border); border-radius: var(--ip-radius-sm); text-decoration: none; } .page-links > .page-links__item { background: var(--ip-primary); border-color: var(--ip-primary); color: var(--ip-white); } .edit-link a { font-size: 0.82rem; font-weight: 600; } /*-------------------------------------------------------------- 10. Author box, share, related, pagination --------------------------------------------------------------*/ .author-box { display: grid; gap: var(--ip-space-md); margin-top: var(--ip-space-lg); padding: var(--ip-space-md); background: var(--ip-white); border: 1px solid var(--ip-border); border-left: 4px solid var(--ip-accent); border-radius: var(--ip-radius); } .author-box__img { border-radius: 50%; box-shadow: var(--ip-shadow-sm); } .author-box__eyebrow { margin: 0 0 0.15rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ip-secondary-dark); } .author-box__name { margin-bottom: 0.4rem; font-size: 1.2rem; } .author-box__name a { text-decoration: none; color: inherit; } .author-box__bio { margin-bottom: 0.6rem; font-size: 0.92rem; color: var(--ip-muted); } .author-box__links { display: flex; flex-wrap: wrap; gap: var(--ip-space-md); margin: 0; font-size: 0.85rem; font-weight: 600; } .author-box__links a { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; } /* Share buttons */ .share-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ip-space-sm); margin-top: var(--ip-space-md); } .share-buttons__label { font-size: 0.85rem; font-weight: 700; color: var(--ip-text); } .share-buttons__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .share-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: var(--ip-bg-alt); border: 0; border-radius: 50%; color: var(--ip-primary); transition: transform var(--ip-speed) var(--ip-ease), background-color var(--ip-speed) var(--ip-ease), color var(--ip-speed) var(--ip-ease); } .share-btn:hover, .share-btn:focus-visible { transform: translateY(-3px); color: var(--ip-white); } .share-btn--facebook:hover { background: #1877f2; } .share-btn--twitter:hover { background: #000000; } .share-btn--linkedin:hover { background: #0a66c2; } .share-btn--whatsapp:hover { background: #25d366; } .share-btn--mail:hover { background: var(--ip-primary); } .share-btn--copy:hover { background: var(--ip-accent); color: #3d2c00; } .share-btn.is-copied { background: var(--ip-secondary); color: #06331a; } /* Related posts */ .related-posts { margin-top: var(--ip-space-xl); } .related-posts__title { margin-bottom: var(--ip-space-md); } /* Post navigation */ .post-navigation { display: grid; gap: var(--ip-space-sm); margin-top: var(--ip-space-lg); } .post-navigation .nav-links { display: grid; gap: var(--ip-space-sm); } .post-navigation a { display: block; padding: var(--ip-space-sm) var(--ip-space-md); background: var(--ip-white); border: 1px solid var(--ip-border); border-radius: var(--ip-radius); text-decoration: none; transition: border-color var(--ip-speed) var(--ip-ease), box-shadow var(--ip-speed) var(--ip-ease); } .post-navigation a:hover { border-color: var(--ip-primary); box-shadow: var(--ip-shadow-sm); } .post-navigation .nav-subtitle { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ip-muted); } .post-navigation .nav-title { display: block; margin-top: 0.2rem; font-family: var(--ip-font-heading); font-weight: 700; color: var(--ip-primary); } .post-navigation .nav-next { text-align: right; } /* Pagination */ .pagination { margin-top: var(--ip-space-lg); } .pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; } .pagination .page-numbers { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 42px; height: 42px; padding-inline: 0.75rem; justify-content: center; background: var(--ip-white); border: 1px solid var(--ip-border); border-radius: var(--ip-radius-sm); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: background-color var(--ip-speed) var(--ip-ease), color var(--ip-speed) var(--ip-ease); } .pagination .page-numbers:hover { background: var(--ip-bg-alt); } .pagination .page-numbers.current { background: var(--ip-primary); border-color: var(--ip-primary); color: var(--ip-white); } .pagination .prev svg { transform: rotate(90deg); } .pagination .next svg { transform: rotate(-90deg); } /*-------------------------------------------------------------- 11. Comments --------------------------------------------------------------*/ .comments-area { margin-top: var(--ip-space-xl); padding: var(--ip-space-md); background: var(--ip-white); border-radius: var(--ip-radius-lg); box-shadow: var(--ip-shadow-sm); } .comments-title, .comment-reply-title { margin-bottom: var(--ip-space-md); font-size: 1.3rem; } .comment-list { margin: 0 0 var(--ip-space-lg); padding: 0; list-style: none; } .comment-list .children { margin-top: var(--ip-space-md); padding-left: var(--ip-space-md); border-left: 2px solid var(--ip-border); list-style: none; } .comment-body { position: relative; margin-bottom: var(--ip-space-md); padding: var(--ip-space-sm) var(--ip-space-md); background: var(--ip-bg); border-radius: var(--ip-radius); } .comment-author { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; font-weight: 700; color: var(--ip-primary); } .comment-author img { border-radius: 50%; } .comment-metadata { margin-bottom: 0.6rem; font-size: 0.78rem; color: var(--ip-muted); } .comment-metadata a { color: inherit; text-decoration: none; } .reply a { display: inline-block; font-size: 0.8rem; font-weight: 700; text-decoration: none; } .comment-form { display: grid; gap: var(--ip-space-xs); } .comment-form label { display: block; margin-bottom: 0.3rem; font-size: 0.88rem; font-weight: 600; } .comment-notes { font-size: 0.85rem; color: var(--ip-muted); } .no-comments { font-size: 0.9rem; color: var(--ip-muted); } /*-------------------------------------------------------------- 12. Sidebar & widgets --------------------------------------------------------------*/ .sidebar__inner { display: flex; flex-direction: column; gap: var(--ip-space-md); } .widget { padding: var(--ip-space-md); background: var(--ip-white); border: 1px solid var(--ip-border); border-radius: var(--ip-radius); } .widget-title { margin-bottom: var(--ip-space-sm); padding-bottom: 0.5rem; border-bottom: 2px solid var(--ip-accent); font-size: 1.02rem; letter-spacing: 0.01em; } .widget ul { margin: 0; padding: 0; list-style: none; } .widget li + li { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--ip-border); } .widget a { text-decoration: none; } .widget a:hover { text-decoration: underline; } /* Recent posts widget */ .ip-recent-posts__item { display: flex; gap: 0.75rem; align-items: flex-start; } .ip-recent-posts__thumb { flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--ip-radius-sm); overflow: hidden; } .ip-recent-posts__thumb img { width: 100%; height: 100%; object-fit: cover; } .ip-recent-posts__title { display: block; font-family: var(--ip-font-heading); font-size: 0.95rem; font-weight: 700; line-height: 1.35; color: var(--ip-primary); } .ip-recent-posts__meta { display: block; margin-top: 0.2rem; font-size: 0.76rem; color: var(--ip-muted); } /* Categories widget */ .ip-cat-list__link { display: flex; align-items: center; gap: 0.65rem; padding: 0.35rem 0; color: var(--ip-text); font-weight: 500; font-size: 0.94rem; } .ip-cat-list__link:hover { color: var(--ip-primary); text-decoration: none; } .ip-cat-list__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; background: rgba(var(--ip-primary-rgb), 0.08); border-radius: var(--ip-radius-sm); color: var(--ip-primary); transition: background-color var(--ip-speed) var(--ip-ease), color var(--ip-speed) var(--ip-ease); } .ip-cat-list__link:hover .ip-cat-list__icon { background: var(--ip-primary); color: var(--ip-white); } .ip-cat-list__name { flex: 1; min-width: 0; } .ip-cat-list__count { flex-shrink: 0; padding: 0.1rem 0.5rem; background: var(--ip-bg-alt); border-radius: var(--ip-radius-pill); font-size: 0.74rem; font-weight: 700; color: var(--ip-muted); } /* Quote widget */ .widget_insurepro_quote { background: linear-gradient(160deg, var(--ip-primary) 0%, var(--ip-primary-dark) 100%); border-color: transparent; color: var(--ip-white); } .widget_insurepro_quote .widget-title { color: var(--ip-white); border-bottom-color: var(--ip-accent); } .ip-quote__intro { margin-bottom: var(--ip-space-sm); font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); } .widget_insurepro_quote .ip-field label { color: rgba(255, 255, 255, 0.9); } .widget_insurepro_quote input, .widget_insurepro_quote select, .widget_insurepro_quote textarea { border-color: transparent; } .ip-quote__privacy { display: flex; align-items: center; gap: 0.4rem; margin: 0.6rem 0 0; font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); } .ip-quote__privacy svg { flex-shrink: 0; color: var(--ip-secondary); } .widget_insurepro_quote .ip-form-message.is-success { color: #b8f3d1; } .widget_insurepro_quote .ip-form-message.is-error { color: #ffd0c9; } /* Core widgets */ .widget_categories li, .widget_archive li, .widget_pages li, .widget_meta li, .widget_nav_menu li { display: flex; justify-content: space-between; gap: 0.5rem; } .wp-calendar-table { font-size: 0.85rem; } .tagcloud { display: flex; flex-wrap: wrap; gap: 0.4rem; } .tagcloud a { padding: 0.25rem 0.7rem; background: var(--ip-bg-alt); border-radius: var(--ip-radius-pill); font-size: 0.8rem !important; color: var(--ip-text); } .tagcloud a:hover { background: var(--ip-primary); color: var(--ip-white); text-decoration: none; } /*-------------------------------------------------------------- 13. Page templates (landing, contact, 404) --------------------------------------------------------------*/ /* Landing page strips the chrome down to the offer. */ .is-landing .topbar, .is-landing .breadcrumbs, .is-landing .site-footer__widgets, .is-landing .search-toggle { display: none; } .landing__hero { padding-block: var(--ip-space-xl); background: radial-gradient(800px 400px at 90% 0%, rgba(var(--ip-accent-rgb), 0.14), transparent 60%), linear-gradient(160deg, var(--ip-primary) 0%, var(--ip-primary-dark) 100%); color: var(--ip-white); } .landing__hero-inner { display: grid; gap: var(--ip-space-lg); } .landing__eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: var(--ip-space-sm); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ip-secondary); } .landing__title { margin-bottom: var(--ip-space-sm); color: var(--ip-white); font-size: clamp(2rem, 6.5vw, 3.1rem); line-height: 1.1; } .landing__lead { max-width: 50ch; color: rgba(255, 255, 255, 0.82); font-size: 1.05rem; } .landing__points { display: grid; gap: 0.6rem; margin: 0 0 var(--ip-space-md); padding: 0; list-style: none; font-size: 0.95rem; color: rgba(255, 255, 255, 0.88); } .landing__points li { display: flex; align-items: center; gap: 0.55rem; } .landing__points svg { color: var(--ip-secondary); flex-shrink: 0; } .landing__phone { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.8); } .landing__phone a { color: var(--ip-accent); font-weight: 700; text-decoration: none; } .landing__card { padding: var(--ip-space-md); background: var(--ip-white); border-radius: var(--ip-radius-lg); box-shadow: var(--ip-shadow-lg); color: var(--ip-text); } .landing__card-title { margin-bottom: var(--ip-space-sm); font-size: 1.25rem; } /* The quote widget renders plainly inside the landing card. */ .landing__widget .widget_insurepro_quote, .landing__widget { padding: 0; background: none; border: 0; color: inherit; } .landing__widget .ip-field label { color: var(--ip-text); } .landing__widget .ip-quote__privacy { color: var(--ip-muted); } .landing__content, .landing__proof { padding-block: var(--ip-space-xl); } .landing__proof { background: var(--ip-white); } .landing__proof-grid { display: grid; gap: var(--ip-space-md); } .landing__quote { margin: 0; padding: var(--ip-space-md); background: var(--ip-bg); border-radius: var(--ip-radius); } .landing__quote blockquote { margin: 0.5rem 0; padding: 0; border: 0; background: none; box-shadow: none; font-size: 0.98rem; font-style: normal; color: var(--ip-text); } .landing__quote figcaption strong { display: block; color: var(--ip-primary); font-size: 0.9rem; } .landing__quote figcaption span { font-size: 0.8rem; color: var(--ip-muted); } /* Contact page */ .contact-grid { display: grid; gap: var(--ip-space-lg); margin-top: var(--ip-space-lg); } .contact-details { padding: var(--ip-space-md); background: var(--ip-primary); border-radius: var(--ip-radius-lg); color: var(--ip-white); align-self: start; } .contact-details__title { margin-bottom: var(--ip-space-md); color: var(--ip-white); font-size: 1.2rem; } .contact-details__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ip-space-md); } .contact-details__item { display: flex; gap: 0.75rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.85); } .contact-details__item strong { display: block; margin-bottom: 0.15rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ip-accent); } .contact-details__item a { color: var(--ip-white); text-decoration: none; } .contact-details__item a:hover { text-decoration: underline; } .contact-details__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; background: rgba(255, 255, 255, 0.12); border-radius: var(--ip-radius-sm); color: var(--ip-white); } .contact-details__note { display: flex; gap: 0.6rem; margin-top: var(--ip-space-md); padding-top: var(--ip-space-md); border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); } .contact-details__note svg { flex-shrink: 0; color: var(--ip-secondary); } .contact-details__note p { margin: 0; } .contact-form-wrap { padding: var(--ip-space-md); background: var(--ip-white); border-radius: var(--ip-radius-lg); box-shadow: var(--ip-shadow-sm); } .contact-form__title { margin-bottom: var(--ip-space-md); font-size: 1.2rem; } .contact-form__row { display: grid; gap: var(--ip-space-sm); } .contact-map { margin-top: var(--ip-space-lg); border-radius: var(--ip-radius-lg); overflow: hidden; box-shadow: var(--ip-shadow-sm); line-height: 0; } /* 404 */ .error-404 { padding-block: var(--ip-space-xl); text-align: center; } .error-404__art { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: var(--ip-space-md); color: rgba(var(--ip-primary-rgb), 0.2); } .error-404__code { font-family: var(--ip-font-heading); font-size: clamp(3.5rem, 16vw, 7rem); font-weight: 800; line-height: 1; color: rgba(var(--ip-primary-rgb), 0.15); } .error-404 .page-header { border-bottom: 0; margin-bottom: var(--ip-space-md); } .error-404__search { max-width: 460px; margin: 0 auto var(--ip-space-lg); } .error-404__cards { display: grid; gap: 0.6rem; max-width: 620px; margin: 0 auto var(--ip-space-xl); text-align: left; } .error-404__recent { text-align: left; margin-bottom: var(--ip-space-lg); } .error-404__recent .section-title { text-align: center; margin-bottom: var(--ip-space-md); } /* No results */ .no-results { padding: var(--ip-space-lg) 0; } .no-results__topics { margin-top: var(--ip-space-lg); } .no-results__subtitle { font-size: 1.05rem; margin-bottom: var(--ip-space-sm); } .no-results__list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; } /*-------------------------------------------------------------- 14. Footer --------------------------------------------------------------*/ .site-footer { flex-shrink: 0; background: var(--ip-primary-dark); color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; } .site-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; } .site-footer a:hover { color: var(--ip-accent); text-decoration: underline; } .site-footer__main { padding-block: var(--ip-space-xl); } .site-footer__grid { display: grid; gap: var(--ip-space-lg); } .site-footer__title { margin: 0 0 var(--ip-space-sm); font-family: var(--ip-font-heading); font-size: 1.25rem; font-weight: 700; } .site-footer__title a { color: var(--ip-white); text-decoration: none; } .site-footer .custom-logo { margin-bottom: var(--ip-space-sm); filter: brightness(0) invert(1); opacity: 0.92; } .site-footer__text { max-width: 42ch; font-size: 0.9rem; line-height: 1.65; } .site-footer__contact { display: grid; gap: 0.6rem; margin: var(--ip-space-md) 0 0; padding: 0; list-style: none; font-size: 0.88rem; } .site-footer__contact li { display: flex; align-items: flex-start; gap: 0.55rem; } .site-footer__contact svg { flex-shrink: 0; margin-top: 0.2rem; color: var(--ip-secondary); } .site-footer__widgets { display: grid; gap: var(--ip-space-lg); } .site-footer .widget { padding: 0; background: none; border: 0; } .site-footer .widget-title { margin-bottom: var(--ip-space-sm); padding-bottom: 0.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.95rem; color: var(--ip-white); } .site-footer .widget li + li { border-top-color: rgba(255, 255, 255, 0.08); } .site-footer .ip-cat-list__icon { background: rgba(255, 255, 255, 0.1); color: var(--ip-white); } .site-footer .ip-cat-list__link, .site-footer .ip-recent-posts__title { color: rgba(255, 255, 255, 0.85); } .site-footer .ip-cat-list__count { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.8); } .site-info { padding-block: var(--ip-space-md); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.82rem; } .site-info__inner { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; } .site-info p { margin: 0; } .footer-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.1rem; margin: 0; padding: 0; list-style: none; } .site-info__credit { color: rgba(255, 255, 255, 0.55); } /* Back to top */ .back-to-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; width: 44px; height: 44px; padding: 0; background: var(--ip-primary); border: 0; border-radius: 50%; color: var(--ip-white); box-shadow: var(--ip-shadow); opacity: 0; transform: translateY(10px); transition: opacity var(--ip-speed) var(--ip-ease), transform var(--ip-speed) var(--ip-ease); } .back-to-top svg { transform: rotate(180deg); margin-inline: auto; } .back-to-top[hidden] { display: none; } .back-to-top.is-visible { opacity: 1; transform: translateY(0); } .back-to-top:hover { background: var(--ip-accent); color: #3d2c00; } /*-------------------------------------------------------------- 15. Animations & utilities --------------------------------------------------------------*/ @keyframes ipFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes ipSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* Elements revealed on scroll by main.js. */ .ip-reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ip-ease), transform 600ms var(--ip-ease); will-change: opacity, transform; } .ip-reveal.is-visible { opacity: 1; transform: translateY(0); } .ip-icon { flex-shrink: 0; } .text-center { text-align: center; } /* Honour the visitor's motion preference. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .ip-reveal { opacity: 1; transform: none; } } /* Print: drop the chrome, keep the article. */ @media print { .topbar, .site-header, .site-footer, .sidebar, .share-buttons, .related-posts, .post-navigation, .comments-area, .back-to-top, .breadcrumbs { display: none !important; } body { background: #fff; color: #000; font-size: 12pt; } .entry--single { box-shadow: none; padding: 0; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; } }