/* ========================================================================= KP theme — component styles. Tokens live in theme.json; this file only adds layout and component behaviour the block editor cannot express. Brand rules: flat colour, no radius, no shadows, lime once per section. ========================================================================= */ :root { --kp-header-h: 88px; --kp-ease: cubic-bezier(.2, .6, .2, 1); } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { height: auto; } *:focus-visible { outline: 2px solid var(--wp--preset--color--lime); outline-offset: 3px; } /* Labels: small caps eyebrow used above headings ------------------------ */ .kp-label { font-size: var(--wp--preset--font-size--label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 1rem; } .kp-label::before { content: ""; display: inline-block; width: 1.5rem; height: 2px; background: var(--wp--preset--color--lime); vertical-align: middle; margin-right: 0.75rem; } .has-navy-background-color .kp-label { color: var(--wp--preset--color--offwhite); } /* Sections ------------------------------------------------------------- */ .kp-section { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--70); } .kp-section--tight { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); } .has-navy-background-color { color: var(--wp--preset--color--offwhite); } .has-navy-background-color a { color: inherit; } .has-navy-background-color .kp-muted, .has-navy-background-color .wp-block-post-date { color: rgba(241, 238, 231, 0.65); } .kp-muted { color: var(--wp--preset--color--grey); } .kp-max-narrow > *, .kp-article > * { max-width: 760px; } .kp-max-text > * { max-width: 640px; } /* Header --------------------------------------------------------------- */ .kp-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; padding: 1rem var(--wp--preset--spacing--30); color: var(--wp--preset--color--offwhite); background: var(--wp--preset--color--navy); } .kp-header__inner > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } .kp-header .wp-block-navigation, .kp-header .wp-block-navigation__container { align-items: center; } .kp-header__inner { width: 100%; max-width: var(--wp--style--global--wide-size); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .kp-logo { display: inline-flex; line-height: 0; text-decoration: none; } .kp-logo img { width: clamp(150px, 14vw, 190px); height: auto; } .wp-block-site-logo img { max-height: 60px; width: auto; } .kp-nav { align-items: center; gap: 0.5rem 2rem; } .kp-nav .wp-block-navigation-item__content { padding: 0.25rem 0; } .kp-nav .current-menu-item > a { text-decoration: underline; text-underline-offset: 0.35em; } .kp-nav .kp-nav-cta > a { background: var(--wp--preset--color--lime); color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.85rem 1.4rem; border-radius: 5px; text-decoration: none; transition: background-color .2s, color .2s; } .kp-nav .kp-nav-cta > a:hover { background: var(--wp--preset--color--offwhite); text-decoration: none; } .kp-nav .wp-block-navigation__responsive-container-open, .kp-nav .wp-block-navigation__responsive-container-close { color: currentColor; } .kp-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--offwhite); padding: var(--kp-header-h) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); } .kp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.25rem; } .kp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--heading-3); font-weight: 300; } .kp-nav .wp-block-navigation__responsive-container.is-menu-open .kp-nav-cta > a { display: inline-block; margin-top: 1rem; font-size: var(--wp--preset--font-size--label); } /* Hero ----------------------------------------------------------------- */ .kp-hero .wp-block-cover__inner-container { width: 100% !important; max-width: var(--wp--style--global--content-size); margin: 0 auto !important; padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); } .kp-hero--home .wp-block-cover__inner-container { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--70); } .kp-hero.wp-block-cover { padding-left: var(--wp--style--root--padding-left, 1.5rem); padding-right: var(--wp--style--root--padding-right, 1.5rem); } .kp-hero .wp-block-cover__inner-container.has-global-padding { padding-left: 0 !important; padding-right: 0 !important; } .kp-hero--home { min-height: 80vh; } .kp-hero--page { min-height: 450px; } .kp-hero--post { min-height: 450px; display: grid; align-content: end; padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); } .kp-hero--post > * { width: 100%; max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } .kp-hero h1, .kp-hero .wp-block-post-title, .kp-hero .wp-block-query-title { margin-bottom: 1.25rem; text-wrap: balance; } .kp-hero .kp-hero__text { font-size: var(--wp--preset--font-size--lead); font-weight: 300; } .kp-hero .wp-block-buttons { margin-top: 2rem; } .kp-hero .wp-block-post-terms { margin-bottom: 1rem; } .kp-hero .wp-block-post-terms a { text-decoration: none; } /* Cards & grids -------------------------------------------------------- */ .kp-grid { display: grid; gap: 2.5rem 2rem; } .kp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kp-card { display: flex; flex-direction: column; gap: 1rem; } .kp-card .wp-block-image, .kp-card .wp-block-post-featured-image { margin: 0; } .kp-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .kp-card--portrait img { aspect-ratio: 4 / 5; } .kp-card--wide img { aspect-ratio: 16 / 9; } .kp-card h3, .kp-card .wp-block-post-title { margin: 0.5rem 0 0; font-size: var(--wp--preset--font-size--heading-3); font-weight: 700; } .kp-card .wp-block-post-title a { text-decoration: none; } .kp-card .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 0.25em; } .kp-card p { margin: 0; } .kp-card .wp-block-post-excerpt__excerpt { margin: 0; } .kp-card .wp-block-post-excerpt__more-text { margin-top: 0.75rem; } .kp-card .kp-card__role { color: var(--wp--preset--color--grey); font-size: var(--wp--preset--font-size--small); } .kp-card .wp-block-buttons { margin-top: auto; padding-top: 0.5rem; } /* Text link with lime rule (used for "View profile", "Learn more") */ .kp-link { font-size: var(--wp--preset--font-size--label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; } a.kp-link, .kp-link > a { display: inline-block; color: inherit; text-decoration: none; padding-bottom: 0.4rem; border-bottom: 2px solid var(--wp--preset--color--lime); transition: border-color .2s; } a.kp-link:hover, .kp-link > a:hover { border-color: currentColor; text-decoration: none; } /* Practice tiles */ .kp-tile { border-top: 2px solid var(--wp--preset--color--navy); padding: 1.25rem 0 1.5rem; transition: border-color .2s; } .kp-tile:hover { border-top-color: var(--wp--preset--color--lime); } .kp-tile .wp-block-post-title { font-size: var(--wp--preset--font-size--lead); font-weight: 700; margin: 0 0 0.5rem; } .kp-tile .wp-block-post-title a { text-decoration: none; } .kp-tile .wp-block-post-excerpt__excerpt { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--grey); margin: 0; } .kp-tiles.wp-block-post-template { gap: 1.25rem; } /* Stats */ .kp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; text-align: left; } .kp-stat__figure { font-size: var(--wp--preset--font-size--stat); font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--wp--preset--color--lime); margin: 0 0 0.75rem; } .kp-stat__label { margin: 0; font-size: var(--wp--preset--font-size--small); opacity: 0.85; } /* Testimonials */ .kp-quote { border-left: 3px solid var(--wp--preset--color--lime); padding-left: 1.5rem; margin: 0; } .kp-quote p { font-size: var(--wp--preset--font-size--lead); font-weight: 300; line-height: 1.45; margin: 0 0 1rem; } .kp-quote cite { font-style: normal; font-size: var(--wp--preset--font-size--label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--grey); } /* Awards */ .kp-award { border-top: 1px solid var(--wp--preset--color--khaki); padding-top: 1.25rem; } .kp-award h3 { margin: 0 0 0.25rem; font-size: var(--wp--preset--font-size--lead); font-weight: 700; } .kp-award p { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--grey); } /* Media + text split */ .kp-split .wp-block-media-text__media img { width: 100%; aspect-ratio: 6 / 7; object-fit: cover; } .kp-split .wp-block-media-text__content { padding: 0 0 0 clamp(1.5rem, 5vw, 5rem); } .kp-split.has-media-on-the-right .wp-block-media-text__content { padding: 0 clamp(1.5rem, 5vw, 5rem) 0 0; } /* Lawyer profile */ .kp-profile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; } .kp-profile .wp-block-post-featured-image { margin: 0; } .kp-profile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .kp-profile__role { font-size: var(--wp--preset--font-size--lead); color: var(--wp--preset--color--grey); margin: 0 0 1.5rem; } .kp-profile__contact p { margin: 0 0 0.25rem; } .kp-profile__contact a { text-decoration: none; } .kp-profile__contact a:hover { text-decoration: underline; } .kp-meta-row { margin-top: 2rem; } .kp-meta-row h3 { font-size: var(--wp--preset--font-size--label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.5rem; color: var(--wp--preset--color--grey); } .kp-meta-row p { margin: 0; } /* Insights */ .kp-filter { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; padding-bottom: 1.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--wp--preset--color--khaki); } .kp-filter a { text-decoration: none; font-size: var(--wp--preset--font-size--label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .kp-filter a:hover, .kp-filter a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.35em; text-decoration-color: var(--wp--preset--color--lime); text-decoration-thickness: 2px; } .kp-post-meta { display: flex; gap: 1rem; align-items: baseline; margin-bottom: 0.5rem; } .kp-post-meta .wp-block-post-terms a { text-decoration: none; } .wp-block-query-pagination { margin-top: 3rem; font-size: var(--wp--preset--font-size--label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .wp-block-query-pagination a { text-decoration: none; } .wp-block-query-pagination-numbers .current { border-bottom: 2px solid var(--wp--preset--color--lime); } .kp-article .wp-block-post-content > * + * { margin-top: 1.25rem; } .kp-article .wp-block-post-content h2 { font-size: var(--wp--preset--font-size--heading-3); font-weight: 700; margin-top: 2.5rem; } .kp-article .wp-block-post-featured-image { margin-bottom: 2.5rem; } .kp-article .wp-block-post-featured-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; } /* Arabic (kp_lang = ar): right-to-left, Rubik, every size 2px below its English equivalent. */ .lang-ar, [data-kp-lang="ar"] { direction: rtl; text-align: right; font-family: var(--wp--preset--font-family--rubik); line-height: 1.7; font-size: calc(var(--wp--preset--font-size--body) - 2px); } [data-kp-lang="ar"] h2 { font-size: calc(var(--wp--preset--font-size--heading-2) - 2px); } [data-kp-lang="ar"] h3 { font-size: calc(var(--wp--preset--font-size--heading-3) - 2px); } [data-kp-lang="ar"] h4 { font-size: calc(var(--wp--preset--font-size--lead) - 2px); } .wp-block-post-title[data-kp-lang="ar"] { line-height: 1.35; font-weight: 700; } .kp-hero .wp-block-post-title[data-kp-lang="ar"] { font-size: calc(var(--wp--preset--font-size--heading-1) - 2px); } .kp-cards .wp-block-post-title[data-kp-lang="ar"] { font-size: calc(var(--wp--preset--font-size--heading-3) - 2px); } .kp-cards .wp-block-post-excerpt[data-kp-lang="ar"] { font-size: calc(var(--wp--preset--font-size--body) - 2px); } .lang-ar .wp-block-post-date, .lang-ar .wp-block-post-terms { direction: ltr; font-family: var(--wp--preset--font-family--public-sans); font-size: var(--wp--preset--font-size--small); } /* Forms (Contact Form 7) ---------------------------------------------- */ .kp-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .wpcf7 label { display: block; font-size: var(--wp--preset--font-size--label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.25rem; } .wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 0.5rem; } .wpcf7 input:not([type="submit"]), .wpcf7 textarea { width: 100%; font: inherit; font-size: var(--wp--preset--font-size--body); letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--navy); background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--khaki); border-radius: 0; padding: 0.85rem 1rem; transition: border-color .2s; } .wpcf7 input:not([type="submit"]):focus, .wpcf7 textarea:focus { border-color: var(--wp--preset--color--navy); outline: none; } .wpcf7 textarea { min-height: 160px; resize: vertical; } .wpcf7 input[type="submit"] { cursor: pointer; font-size: var(--wp--preset--font-size--label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--navy); background: var(--wp--preset--color--lime); border: 2px solid var(--wp--preset--color--lime); border-radius: 5px; padding: 1rem 1.75rem; transition: background-color .2s, color .2s, border-color .2s; } .wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--lime); border-color: var(--wp--preset--color--navy); } .wpcf7 .wpcf7-not-valid-tip { font-size: var(--wp--preset--font-size--small); letter-spacing: 0; text-transform: none; font-weight: 400; color: #a1332b; margin-top: 0.35rem; } .wpcf7 .wpcf7-response-output { border: 1px solid var(--wp--preset--color--navy) !important; border-radius: 0; margin: 1.5rem 0 0 !important; padding: 1rem !important; font-size: var(--wp--preset--font-size--small); } .wpcf7 .wpcf7-spinner { display: none; } /* Map */ .kp-map { margin: 0; line-height: 0; } .kp-map iframe { width: 100%; height: 420px; border: 0; display: block; filter: grayscale(1) contrast(1.05); } /* Footer --------------------------------------------------------------- */ .kp-footer { color: var(--wp--preset--color--offwhite); font-size: var(--wp--preset--font-size--small); font-weight: 500; } .kp-footer p, .kp-footer li, .kp-footer address { font-size: var(--wp--preset--font-size--small); } .kp-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 3rem 2rem; padding-bottom: var(--wp--preset--spacing--50); border-bottom: 1px solid rgba(241, 238, 231, 0.18); } .kp-footer .kp-logo img { width: 210px; } .kp-footer__descriptor { margin: 1.25rem 0 0; font-size: var(--wp--preset--font-size--label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--lime); } .kp-footer h4 { font-size: var(--wp--preset--font-size--label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 1rem; color: rgba(241, 238, 231, 0.6); } .kp-footer ul { list-style: none; margin: 0; padding: 0; } .kp-footer li { margin: 0 0 0.6rem; } .kp-footer a { text-decoration: none; } .kp-footer a:hover { text-decoration: underline; text-underline-offset: 0.3em; } .kp-footer address { font-style: normal; } .kp-footer address p { margin: 0 0 0.6rem; } .kp-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-top: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); color: rgba(241, 238, 231, 0.65); } .kp-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1.5rem; } .kp-footer__bottom li { margin: 0; } /* Editor notes: visible to logged-in editors only (hidden for visitors in PHP). */ .kp-editor-note { background: #fff6cc; border-left: 3px solid #d9a400; padding: 0.75rem 1rem; font-size: var(--wp--preset--font-size--small); } /* Responsive ----------------------------------------------------------- */ @media (max-width: 1024px) { .kp-grid--4, .kp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kp-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 781px) { :root { --kp-header-h: 72px; } .kp-grid--3, .kp-grid--2, .kp-tiles, .kp-form-row { grid-template-columns: 1fr; } .kp-tiles { gap: 0.75rem; } .kp-profile { grid-template-columns: 1fr; } .kp-profile img { max-width: 360px; } .kp-split .wp-block-media-text__content, .kp-split.has-media-on-the-right .wp-block-media-text__content { padding: 1.5rem 0 0; } .kp-hero--home { min-height: 70vh; } .kp-logo img { width: 160px; } } @media (max-width: 600px) { .kp-stats, .kp-footer__grid { grid-template-columns: 1fr; } .kp-footer__bottom { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .kp-header, .kp-tile, .kp-link { transition: none; } } /* Query-loop item mapping (post-template renders