/** * core.css — Agora design system: tokens, utilities, global header/footer chrome. * * Loaded on every page (see includes/enqueue.php). Route-specific styles live in * their own bundles (home.css, plp.css, …). Everything is namespaced `gp-` and * scoped to the new chrome so it does not bleed into WoodMart-built content. * * @package woodmart-child */ /* ============================================================ * * 1. Design tokens * ============================================================ */ :root { /* Brand — ink / sea / sun / paper (extracted from the new logo) */ --gp-ink: #13293d; --gp-ink-soft: #2a3f52; --gp-sea: #0052a0; --gp-sea-deep: #003d7a; --gp-sea-soft: #1a6ec4; --gp-sun: #e8b33c; --gp-sun-deep: #c68f1d; --gp-paper: #fbf7ef; --gp-paper-warm: #f3ead8; --gp-line: #dbd2bd; --gp-cream: #f5efe2; /* Semantic surfaces (re-mapped by the dark variant below) */ --gp-bg: var(--gp-paper); --gp-surface: #ffffff; --gp-text: var(--gp-ink); --gp-text-soft: var(--gp-ink-soft); --gp-border: var(--gp-line); --gp-accent: var(--gp-sea); /* Type families */ --gp-serif: "Playfair Display", Georgia, serif; --gp-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --gp-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale */ --gp-h1: clamp(48px, 5.5vw, 84px); --gp-h2: clamp(36px, 4vw, 56px); --gp-h3: clamp(24px, 2.6vw, 36px); --gp-eyebrow: 11px; --gp-body: 15px; --gp-small: 13px; /* Spacing / radius / motion */ --gp-container-width: 1600px; --gp-pad-x: 28px; --gp-radius: 999px; --gp-ease: cubic-bezier(.4, 0, .2, 1); --gp-z-nav: 1000; --gp-z-drawer: 1100; } /* Dark variant — ready for a future toggle (add data-gp-theme="dark" on ). */ [data-gp-theme="dark"] { --gp-bg: var(--gp-ink); --gp-surface: var(--gp-ink-soft); --gp-text: var(--gp-cream); --gp-text-soft: #b9c2cc; --gp-border: rgba(245, 239, 226, .18); --gp-accent: var(--gp-sun); } /* ============================================================ * * 2. Utility classes (button / pill / eyebrow / section heading) * ============================================================ */ .gp-eyebrow { font-family: var(--gp-mono); font-size: var(--gp-eyebrow); letter-spacing: .22em; text-transform: uppercase; color: var(--gp-accent); display: inline-flex; align-items: center; gap: 10px; } .gp-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; display: inline-block; } .gp-eyebrow--plain::before { display: none; } .gp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--gp-sans); font-size: 14px; font-weight: 500; line-height: 1; padding: 14px 22px; border-radius: var(--gp-radius); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .18s var(--gp-ease), color .18s var(--gp-ease), border-color .18s var(--gp-ease); } .gp-btn--ink { background: var(--gp-ink); color: #fff; } .gp-btn--ink:hover { background: var(--gp-sea-deep); color: #fff; } .gp-btn--sea { background: var(--gp-sea); color: #fff; } .gp-btn--sea:hover { background: var(--gp-sea-deep); color: #fff; } .gp-btn--sun { background: var(--gp-sun); color: var(--gp-ink); } .gp-btn--sun:hover { background: var(--gp-sun-deep); color: var(--gp-ink); } .gp-btn--outline { background: transparent; color: var(--gp-ink); border-color: var(--gp-ink); } .gp-btn--outline:hover { background: var(--gp-ink); color: #fff; } .gp-btn--light { background: #fff; color: var(--gp-ink); } /* Loading state: swap the button label for a spinner (PLP card + PDP add-to-cart) */ .gp-btn.is-loading { position: relative; color: transparent; pointer-events: none; } .gp-btn.is-loading svg { opacity: 0; } .gp-btn.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: gp-btn-spin .6s linear infinite; } @keyframes gp-btn-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .gp-btn.is-loading::after { animation-duration: 1.4s; } } .gp-section-head { text-align: center; margin-bottom: 40px; } .gp-section-head .gp-eyebrow { justify-content: center; margin-bottom: 16px; } .gp-section-head h2 { font-family: var(--gp-serif); font-weight: 400; font-size: var(--gp-h2); line-height: 1.04; letter-spacing: -.02em; color: var(--gp-text); margin: 0; } .gp-section-head h2 em { font-style: italic; color: var(--gp-accent); } /* Accessibility helpers */ .gp-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .gp-icon { display: inline-block; vertical-align: middle; flex: none; } /* ============================================================ * * 3. Global header — utility bar + main + nav * ============================================================ */ .gp-site-header { font-family: var(--gp-sans); position: relative; z-index: var(--gp-z-nav); } /* 3a. Utility bar */ .gp-utility { background: var(--gp-ink); color: var(--gp-cream); font-size: 11px; letter-spacing: .03em; padding: 8px var(--gp-pad-x); display: flex; align-items: center; gap: 16px; } .gp-utility__trust { display: flex; align-items: center; gap: 16px; } .gp-utility__trust span::before { content: "\2726"; margin-right: 7px; color: var(--gp-sun); } .gp-utility__spacer { flex: 1; } .gp-utility__help { color: var(--gp-cream); opacity: .7; text-decoration: none; } .gp-utility__help:hover { opacity: 1; } .gp-utility .gp-lang { display: inline-flex; align-items: center; gap: 8px; } .gp-utility .gp-lang a { color: var(--gp-cream); text-decoration: none; opacity: .5; font-size: 11px; } .gp-utility .gp-lang a.gp-lang--active { opacity: 1; font-weight: 600; } .gp-utility .gp-lang__sep { opacity: .3; } /* 3b. Main header */ .gp-header { background: var(--gp-paper); border-bottom: 1px solid var(--gp-line); padding: 20px var(--gp-pad-x); display: flex; align-items: center; gap: 28px; } .gp-header__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; } .gp-header__logo { width: 52px; height: 52px; object-fit: contain; display: block; } .gp-header__wordmark { font-family: var(--gp-serif); font-style: italic; font-size: 24px; line-height: 1; letter-spacing: -.01em; color: var(--gp-ink); } .gp-header__estd { font-family: var(--gp-mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--gp-ink-soft); font-style: normal; margin-top: 3px; display: block; } /* 3c. Search */ .gp-search { flex: 1; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--gp-line); border-radius: var(--gp-radius); padding: 0 16px; color: var(--gp-ink-soft); margin: 0; } .gp-search:focus-within { border-color: var(--gp-sea-soft); } .gp-search__input { flex: 1; min-width: 0; border: none !important; background: transparent; font: inherit; font-size: 13px; color: var(--gp-ink); outline: none; } .gp-search__input::placeholder { color: #9c9280; opacity: 1; } .gp-search__submit { background: none; border: 0; padding: 0; margin: 0; color: var(--gp-ink-soft); cursor: pointer; line-height: 0; } .gp-search__submit:hover { color: var(--gp-sea); } /* 3d. Header action icons */ .gp-header__actions { display: flex; align-items: center; gap: 18px; color: var(--gp-ink); flex: none; } .gp-header__action { color: var(--gp-ink); position: relative; display: inline-flex; line-height: 0; text-decoration: none; } .gp-header__action:hover { color: var(--gp-sea); } .gp-badge { position: absolute; top: -6px; right: -8px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--gp-sun); color: var(--gp-ink); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } .gp-badge--empty { display: none; } /* 3e. Hamburger (mobile only) */ button.gp-burger { display: none; background: none; border: 0; color: var(--gp-ink); cursor: pointer; line-height: 0; padding: 4px; } /* 3f. Primary nav */ .gp-nav { background: var(--gp-paper); border-bottom: 1px solid var(--gp-line); padding: 0 var(--gp-pad-x); } .gp-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; flex-wrap: wrap; } .gp-nav__list > li { margin-bottom: 0; } .gp-nav__list a { display: block; padding: 14px 0; font-size: 13px; color: var(--gp-ink); text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s var(--gp-ease), border-color .15s var(--gp-ease); } .gp-nav__list a:hover { color: var(--gp-sea); } .gp-nav__list .current-menu-item > a, .gp-nav__list .current_page_item > a, .gp-nav__list .current-product_cat-ancestor > a, .gp-nav__list a[aria-current="page"], .gp-nav__list a.gp-nav--active { color: var(--gp-sea); font-weight: 600; border-bottom-color: var(--gp-sea); } /* ============================================================ * * 4. Mobile slide-out nav * ============================================================ */ .gp-mnav { position: fixed; inset: 0; z-index: var(--gp-z-drawer); visibility: hidden; } .gp-mnav[hidden] { display: none; } .gp-mnav__overlay { position: absolute; inset: 0; background: rgba(19, 41, 61, .45); opacity: 0; transition: opacity .25s var(--gp-ease); } .gp-mnav__panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(86vw, 380px); background: var(--gp-paper); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .28s var(--gp-ease); overflow-y: auto; -webkit-overflow-scrolling: touch; } .gp-mnav.is-open { visibility: visible; } .gp-mnav.is-open .gp-mnav__overlay { opacity: 1; } .gp-mnav.is-open .gp-mnav__panel { transform: translateX(0); } .gp-mnav__head { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gp-pad-x); border-bottom: 1px solid var(--gp-line); } .gp-mnav__close { background: none; border: 0; color: var(--gp-ink); cursor: pointer; font-size: 26px; line-height: 1; } /* Reset the header's `flex: 1` (which grows vertically in the column-flex drawer, ballooning the pill into a circle) back to intrinsic height. */ .gp-mnav__search { margin: 16px var(--gp-pad-x); flex: 0 0 auto; } .gp-mnav__list { list-style: none; margin: 0; padding: 8px 0 24px; } .gp-mnav__item { border-bottom: 1px solid var(--gp-line); } .gp-mnav__list .gp-mnav__item > a, .gp-mnav__list .gp-mnav__acc-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; padding: 15px var(--gp-pad-x); font-family: var(--gp-sans); font-size: 15px; font-weight: 400; line-height: 1.2; text-transform: none; letter-spacing: normal; color: var(--gp-ink); text-decoration: none; background: none; border: 0; border-radius: 0; cursor: pointer; text-align: left; } .gp-mnav__list .gp-mnav__item > a:hover, .gp-mnav__list .gp-mnav__acc-toggle:hover { color: var(--gp-sea); } .gp-mnav__list .gp-mnav__item.is-open > .gp-mnav__acc-toggle { color: var(--gp-sea); font-weight: 600; } .gp-mnav__acc-ind { color: var(--gp-sea); font-size: 18px; line-height: 1; flex-shrink: 0; transition: transform .2s var(--gp-ease); } .gp-mnav__item.is-open .gp-mnav__acc-ind { transform: rotate(45deg); } .gp-mnav__acc-panel { display: none; padding: 0 var(--gp-pad-x) 16px; } .gp-mnav__item.is-open .gp-mnav__acc-panel { display: block; } .gp-mnav__sublist { list-style: none; margin: 0; padding: 0; } .gp-mnav__sub { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: var(--gp-ink-soft); font-size: 13.5px; text-decoration: none; } .gp-mnav__sub:hover { color: var(--gp-sea); } .gp-mnav__all { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--gp-sea); text-decoration: none; } .gp-mnav__all:hover { text-decoration: underline; } /* ============================================================ * * 4b. Desktop mega-menu panel + shared subcategory thumbs * ============================================================ */ .gp-nav { position: relative; } .gp-nav__link { position: relative; } .gp-nav__arrow { display: inline-flex; margin-left: 4px; opacity: .5; transform: rotate(90deg); transition: transform .18s var(--gp-ease), opacity .18s var(--gp-ease); } .gp-has-mega:hover > .gp-nav__link .gp-nav__arrow, .gp-has-mega:focus-within > .gp-nav__link .gp-nav__arrow { transform: rotate(-90deg); opacity: .9; } .gp-has-mega:hover > .gp-nav__link, .gp-has-mega:focus-within > .gp-nav__link { color: var(--gp-sea); border-bottom-color: var(--gp-sea); } .gp-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--gp-line); box-shadow: 0 20px 40px rgba(19, 41, 61, .10); z-index: var(--gp-z-nav); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity .18s var(--gp-ease), transform .18s var(--gp-ease), visibility .18s; } .gp-has-mega:hover > .gp-mega, .gp-has-mega:focus-within > .gp-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .gp-mega__inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; max-width: 1040px; padding: 32px var(--gp-pad-x); align-items: start; } .gp-mega__title { font-family: var(--gp-serif); font-style: italic; font-size: 20px; color: var(--gp-ink); margin: 0 0 18px; } .gp-mega__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; } .gp-mega__sub-item { .gp-mega__sub { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--gp-ink); font-size: 14px; text-decoration: none; } .gp-mega__sub:hover { color: var(--gp-sea); } } .gp-mega__all { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--gp-sea); text-decoration: none; } .gp-mega__all:hover { text-decoration: underline; } .gp-mega__thumb, .gp-mnav__thumb { width: 34px; height: 34px; border-radius: 6px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--gp-paper-warm); background: color-mix(in srgb, var(--cat-color, var(--gp-sea)) 15%, #fff); color: var(--cat-color, var(--gp-sea)); } .gp-mnav__thumb { width: 28px; height: 28px; border-radius: 5px; } .gp-mega__thumb-img, .gp-mnav__thumb img { width: 100%; height: 100%; object-fit: cover; } .gp-mega__thumb-icon, .gp-mnav__thumb .gp-mega__thumb-icon { display: flex; } a.gp-mega__feature { display: block; background: var(--gp-paper-warm); border-radius: 8px; padding: 20px; color: var(--gp-ink); text-decoration: none; } .gp-mega__feature-media { display: block; aspect-ratio: 1; background: #fff; border-radius: 6px; overflow: hidden; margin-bottom: 12px; } .gp-mega__feature-img { width: 100%; height: 100%; object-fit: contain; } .gp-mega__feature-eyebrow { display: block; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--gp-ink-soft); margin-bottom: 6px; } .gp-mega__feature-name { display: block; font-family: var(--gp-serif); font-size: 16px; } .gp-mega__feature-sub { display: block; font-size: 12px; color: var(--gp-ink-soft); margin-top: 2px; } .gp-mega__feature-price { display: block; font-size: 14px; font-weight: 600; margin-top: 8px; color: var(--gp-ink);} .gp-mega__feature-price { .amount { color: var(--gp-ink); font-weight: 600;} } @media (prefers-reduced-motion: reduce) { .gp-mega, .gp-nav__arrow, .gp-mnav__acc-ind { transition: none; } } /* ============================================================ * * 5. Global footer * ============================================================ */ /* The footer is served through WoodMart's native footer (Theme Settings → Footer → HTML Block), which nests it in `.wd-footer > .container.main-footer`. Neutralize that wrapper so `.gp-footer` renders full-bleed, as designed. */ .wd-footer { background: none; padding: 0; border: 0; } .wd-footer .main-footer.container { max-width: none; width: 100%; margin: 0; padding: 0; } .gp-footer { background: var(--gp-ink); color: var(--gp-cream); font-family: var(--gp-sans); padding: 56px var(--gp-pad-x) 24px; } .gp-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(245, 239, 226, .15); } .gp-footer__brand { display: flex; align-items: center; gap: 12px; } .gp-footer__logo { width: 52px; height: 52px; object-fit: contain; } .gp-footer__wordmark { font-family: var(--gp-serif); font-style: italic; font-size: 28px; color: var(--gp-cream); } .gp-footer__about { font-size: 13px; opacity: .7; line-height: 1.5; margin: 14px 0 0;} .gp-footer__col-title { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; opacity: .7; margin-bottom: 14px; } .gp-footer__links { list-style: none; margin: 0; padding: 0; } .gp-footer__links li { margin-bottom: 8px; } .gp-footer__links a { font-size: 13px; color: var(--gp-cream); opacity: .88; text-decoration: none; } .gp-footer__links a:hover { opacity: 1; color: var(--gp-sun); } /* Newsletter (first column) */ .gp-newsletter { margin-top: 16px; } .gp-newsletter .gp-newsletter__row { display: flex; } .gp-newsletter input[type="email"] { flex: 1; min-width: 0; background: transparent; border: 1px solid rgba(245, 239, 226, .25); border-right: 0; color: var(--gp-cream); padding: 10px 14px; font: inherit; font-size: 13px; outline: none; } .gp-newsletter input[type="email"]::placeholder { color: rgba(245, 239, 226, .5); } .gp-newsletter button { background: var(--gp-sun); color: var(--gp-ink); border: 0; padding: 0 18px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .gp-newsletter button:hover { background: var(--gp-sun-deep); } /* Mailchimp for WP default-form compatibility (inline email + submit). The plugin nests the actual fields one level deeper than .mc4wp-form-fields (…-fields > .row > .col/.col-auto), so the row itself is what needs to flex. */ .gp-newsletter .mc4wp-form-fields .row { display: flex; flex-wrap: nowrap; align-items: stretch; margin: 0; } .gp-newsletter .mc4wp-form-fields .row > .col, .gp-newsletter .mc4wp-form-fields .row > .col-auto { padding: 0; } .gp-newsletter .mc4wp-form-fields .row > .col { flex: 1; min-width: 0; } .gp-newsletter .mc4wp-form-fields .row > .col-auto { flex: 0 0 auto; } .gp-newsletter .mc4wp-form p { margin: 0; } /* Hide plain field labels (e.g. an "Email Address" label some form layouts render above the input), but keep labels that wrap a checkbox/radio — those carry the visible consent text and must stay clickable/readable. */ .gp-newsletter .mc4wp-form label:not(:has(input[type="checkbox"], input[type="radio"])) { display: none; } .gp-newsletter .mc4wp-form-fields > div + div { margin-top: 10px; } .gp-newsletter .mc4wp-form label:has(input[type="checkbox"], input[type="radio"]) { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; line-height: 1.4; color: rgba(245, 239, 226, .65); cursor: pointer; } .gp-newsletter .mc4wp-form label input[type="checkbox"], .gp-newsletter .mc4wp-form label input[type="radio"] { flex-shrink: 0; margin-top: 2px; } .gp-newsletter .mc4wp-form label a { color: rgba(245, 239, 226, .85); text-decoration: underline; } .gp-newsletter .mc4wp-form label a:hover { color: var(--gp-sun); } .gp-newsletter .mc4wp-form input[type="submit"] { background: var(--gp-sun); color: var(--gp-ink); border: 0; padding: 0 18px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; height: 100%; } .gp-newsletter .mc4wp-form input[type="submit"]:hover { background: var(--gp-sun-deep); } .gp-newsletter .mc4wp-response { margin-top: 10px; } .gp-newsletter .mc4wp-response:empty { margin-top: 0; } .gp-newsletter .mc4wp-alert { font-size: 12px; line-height: 1.4; padding: 8px 12px; border-radius: 4px; background: rgba(245, 239, 226, .1); border: 1px solid rgba(245, 239, 226, .2); } .gp-newsletter .mc4wp-alert p { margin: 0; } .gp-newsletter .mc4wp-error { background: rgba(217, 83, 79, .15); border-color: rgba(217, 83, 79, .4); color: #f3b4b2; } .gp-newsletter .mc4wp-success { background: rgba(92, 184, 92, .15); border-color: rgba(92, 184, 92, .4); color: #a8dba8; } /* Payment chips */ .gp-pay { display: flex; gap: 8px; flex-wrap: wrap; } .gp-pay span { font-size: 10px; padding: 5px 9px; letter-spacing: .08em; border: 1px solid rgba(245, 239, 226, .25); border-radius: 3px; } .gp-footer__bottom { padding-top: 18px; display: flex; justify-content: space-between; gap: 16px; font-size: 11px; opacity: .6; flex-wrap: wrap; } .gp-footer__bottom a { color: var(--gp-cream); text-decoration: none; } .gp-footer__bottom a:hover { color: var(--gp-sun); } /* ============================================================ * * 6. Responsive * ============================================================ */ @media (max-width: 1024px) { .gp-footer__grid { grid-template-columns: 1fr 1fr 1fr; } .gp-footer__brand-cell { grid-column: 1 / -1; } } @media (max-width: 880px) { .gp-nav { display: none; } button.gp-burger { display: inline-flex; } .gp-header { gap: 16px; } .gp-utility__trust span:nth-child(n+2) { display: none; } } @media (max-width: 600px) { :root { --gp-pad-x: 18px; } .gp-header__wordmark { font-size: 20px; } .gp-header__actions { gap: 14px; } .gp-footer__grid { grid-template-columns: 1fr 1fr; } .gp-utility__help { display: none; } } /* ============================================================ * * 7. Layout utilities (used across all route bundles) * ============================================================ */ .gp-container { max-width: var(--gp-container-width); margin-inline: auto; padding-inline: clamp(16px, 4vw, 60px); } /* ============================================================ * * 8. Page-title banner (global) — Agora recolour of WoodMart's * .wd-page-title. WoodMart sets a dark bg + light text via an * inline customizer rule at 0,1,0 specificity; the `.page-title` * qualifier here (0,2,0+) wins regardless of load order, so no * !important is needed. Applies on every page that shows the banner. * ============================================================ */ .wd-page-title.page-title { background-color: var(--gp-cream); border-bottom: 1px solid var(--gp-line); color: var(--gp-ink-soft); } .wd-page-title.page-title .wd-page-title-bg { background-color: transparent; background-image: none; } .wd-page-title.page-title .entry-title, .wd-page-title.page-title.color-scheme-light .entry-title { font-family: var(--gp-serif); font-weight: 400; letter-spacing: -.012em; color: var(--gp-ink); } .wd-page-title.page-title .wd-breadcrumbs, .wd-page-title.page-title.color-scheme-light .wd-breadcrumbs { font-family: var(--gp-sans); color: var(--gp-ink-soft); } .wd-page-title.page-title .wd-breadcrumbs a { color: var(--gp-sea); text-decoration: none; } .wd-page-title.page-title .wd-breadcrumbs a:hover { color: var(--gp-sea-deep); text-decoration: underline; } .wd-page-title.page-title .wd-breadcrumbs .wd-delimiter { color: var(--gp-line); } .wd-page-title.page-title .wd-breadcrumbs .wd-last { color: var(--gp-ink); }