/* Theme Name: Tiny Dancers Theme URI: https://www.tinydancers.net.au Author: Tiny Dancers Description: A clean, photo-led theme for the Tiny Dancers registered pygmy goat stud. Pink and blue brand identity with a uniform, well-cropped image system. Version: 1.7.0 License: GPL-2.0-or-later Text Domain: tinydancers */ /* ============================================================ Design tokens ============================================================ */ :root { /* Brand sampled from the Tiny Dancers logo: magenta-pink + sky blue on white. */ --white: #ffffff; --pink: oklch(0.56 0.22 354); /* magenta brand (logo wordmark) */ --pink-600: oklch(0.48 0.21 354); /* hover / deeper */ --pink-cta: oklch(0.52 0.22 354); /* solid magenta that carries white text */ --sky: oklch(0.80 0.115 232); /* the logo sky blue (~#66ccff) */ --sky-deep: oklch(0.66 0.135 233); /* sky blue that still carries white text */ --sky-200: oklch(0.93 0.06 232); /* sky wash */ --blue: oklch(0.58 0.14 232); /* links — azure, same family as the sky */ --blue-700: oklch(0.56 0.145 232); /* headings — bright sky azure (not navy) */ --blue-link: oklch(0.50 0.15 232); /* small text/links — darker so it passes AA (>=4.5:1) */ --blue-900: oklch(0.31 0.085 234); /* dark azure for hero overlay (not navy) */ --ink: oklch(0.24 0.02 250); --footer-ink: oklch(0.27 0.06 245); /* dark text on the sky-blue footer */ --muted: oklch(0.47 0.02 250); --line: oklch(0.91 0.012 240); --blue-wash: oklch(0.965 0.03 232); --pink-wash: oklch(0.965 0.03 352); /* Type */ --font-display: "Mulish", ui-sans-serif, system-ui, sans-serif; --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif; --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem); --step-2: clamp(1.45rem, 1.32rem + 0.65vw, 1.85rem); --step-3: clamp(1.75rem, 1.5rem + 1.2vw, 2.55rem); --step-4: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem); --step-5: clamp(2.5rem, 1.7rem + 3.9vw, 4.4rem); /* Space + shape */ --gutter: clamp(1.1rem, 0.7rem + 1.6vw, 2rem); --container: 76rem; --container-prose: 42rem; --radius: 14px; --radius-sm: 9px; --radius-pill: 999px; --shadow: 0 6px 22px -12px oklch(0.30 0.075 256 / 0.45); --shadow-lg: 0 18px 50px -22px oklch(0.30 0.075 256 / 0.5); /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint-ish */ --dur: 0.45s; /* Z-scale (semantic, never 9999) */ --z-sticky: 100; --z-nav: 200; --z-overlay: 800; --z-lightbox: 900; } /* ============================================================ Reset / base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: var(--blue-700); text-wrap: balance; } h1 { font-size: var(--step-5); } h2 { font-size: var(--step-4); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } p { text-wrap: pretty; } a { color: var(--blue-link); text-decoration-color: var(--pink); text-underline-offset: 3px; } a:hover { color: var(--pink-600); } img, picture, video, svg { max-width: 100%; height: auto; display: block; } strong, b { font-weight: 700; } :focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; border-radius: 4px; } /* ============================================================ Layout primitives ============================================================ */ .container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; } .prose { width: min(100% - var(--gutter) * 2, var(--container-prose)); margin-inline: auto; } .section { padding-block: clamp(3rem, 2rem + 5vw, 6rem); } /* very subtle flat tints: soft because the contrast is low, not from a gradient */ .section--wash { background: oklch(0.984 0.013 232); } .section--pink-wash { background: oklch(0.982 0.016 352); } .stack > * + * { margin-top: 1.1em; } .eyebrow-skip { } .section-head { max-width: 40rem; margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem); } .section-head p { color: var(--muted); font-size: var(--step-1); margin-top: 0.6rem; } .lead { font-size: var(--step-1); color: var(--muted); } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); padding: 0.8em 1.4em; border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: transform var(--dur) var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--blue); color: var(--white); box-shadow: var(--shadow); } .btn--primary:hover { background: var(--blue-700); color: var(--white); box-shadow: var(--shadow-lg); } .btn--pink { background: var(--pink-cta); color: var(--white); box-shadow: var(--shadow); } .btn--pink:hover { background: var(--pink-600); color: var(--white); box-shadow: var(--shadow-lg); } .btn--ghost { background: transparent; color: var(--blue-700); border-color: var(--line); } .btn--ghost:hover { border-color: var(--blue); color: var(--blue-700); } /* ============================================================ Header / nav ============================================================ */ .site-header { position: sticky; top: 0; z-index: var(--z-nav); background: oklch(1 0 0 / 0.88); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 70px; } .brand { display: inline-flex; align-items: baseline; gap: 0.1rem; font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.03em; color: var(--blue-700); text-decoration: none; } .brand:hover { color: var(--blue-700); } .brand .dot { color: var(--pink); } .nav { display: flex; align-items: center; gap: clamp(0.8rem, 0.3rem + 1.4vw, 1.6rem); } .nav a { font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--ink); text-decoration: none; position: relative; padding-block: 0.4rem; } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .nav a:hover { color: var(--blue-700); } .nav a:hover::after, .nav .current-menu-item > a::after { transform: scaleX(1); } .nav-toggle { display: none; } /* Logo in header */ .brand img, .custom-logo { height: clamp(84px, 4.5rem + 4vw, 122px); width: auto; } .brand--img { padding-block: 6px; } /* Dropdown submenus (mirrors the original site's grouped menu) */ .nav .menu-item-has-children { position: relative; } .nav .menu-item-has-children > a { padding-right: 1.15rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23cc2086' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; } .nav .sub-menu { position: absolute; top: calc(100% + 8px); left: -0.6rem; min-width: 240px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 0.45rem; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; z-index: var(--z-nav); } .nav .menu-item-has-children:hover > .sub-menu, .nav .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .nav .sub-menu li { display: block; } .nav .sub-menu a { display: block; padding: 0.6rem 0.8rem; border-radius: 9px; font-size: 0.95rem; white-space: nowrap; background-image: none; padding-right: 0.8rem; } .nav .sub-menu a::after { display: none; } .nav .sub-menu a:hover { background: var(--pink-wash); color: var(--pink-600); } .nav { flex-wrap: wrap; } @media (min-width: 861px) { .nav { gap: clamp(0.6rem, 0.1rem + 1vw, 1.25rem); } .nav > a, .nav .menu-item > a { font-size: 0.96rem; } } @media (max-width: 860px) { .primary-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: 0 0 0 1rem; background: transparent; } .primary-nav .menu-item-has-children > a { background-image: none; } .primary-nav ul.sub-menu a { border-bottom: 1px solid var(--line); } } @media (max-width: 860px) { .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); cursor: pointer; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 20px; height: 2px; background: var(--ink); position: relative; transition: transform 0.3s var(--ease), opacity 0.3s; } .nav-toggle span::before { position: absolute; top: -6px; } .nav-toggle span::after { position: absolute; top: 6px; } .primary-nav { position: fixed; inset: 70px 0 auto 0; background: var(--white); flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--gutter) 1.5rem; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); transform: translateY(-120%); transition: transform 0.4s var(--ease); z-index: var(--z-nav); } .primary-nav.open { transform: translateY(0); } .primary-nav a { padding-block: 0.85rem; border-bottom: 1px solid var(--line); } .primary-nav .btn { margin-top: 0.9rem; justify-content: center; } } /* ============================================================ Uniform image system (the core fix: every photo cropped consistently) ============================================================ */ .media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--blue-wash); aspect-ratio: 4 / 3; } .media--square { aspect-ratio: 1 / 1; } .media--wide { aspect-ratio: 16 / 9; } .media--portrait { aspect-ratio: 3 / 4; } .media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* zoom-on-hover intentionally disabled: keep imagery calm and static */ /* Tidy ALL editor/content images into the same language, ignoring the editor's saved fixed widths so nothing renders tiny + stranded. */ .entry-content img { height: auto; border-radius: var(--radius-sm); } .entry-content figure { margin-block: 1.8rem; } .entry-content figcaption { text-align: center; color: var(--muted); font-size: var(--step--1); margin-top: 0.5rem; } /* default (un-aligned) content images: centered, natural size capped to the column, overriding the editor's saved inline pixel widths so nothing renders tiny + stranded */ .entry-content .wp-block-image { display: block; width: auto; max-width: 100%; text-align: center; margin-inline: auto; } .entry-content .wp-block-image img { width: auto !important; height: auto !important; max-width: 100%; max-height: 70vh; margin-inline: auto; border-radius: var(--radius-sm); } /* Author-resized images (Gutenberg "is-resized" with a saved pixel width) are an intentional choice — honour a sensible display size instead of inflating a tall portrait to 70vh, which balloons posts and leaves big voids. */ .entry-content .wp-block-image.is-resized { max-width: 100%; } .entry-content .wp-block-image.is-resized img { width: 100% !important; max-width: min(420px, 100%); height: auto !important; max-height: none; } /* honour explicit alignment when the editor set it */ .entry-content .aligncenter { margin-inline: auto; text-align: center; } .entry-content .alignleft { float: left; margin: 0.4rem 1.6rem 1rem 0; max-width: 46%; } .entry-content .alignright { float: right; margin: 0.4rem 0 1rem 1.6rem; max-width: 46%; } .entry-content .alignleft img, .entry-content .alignright img { max-width: 100%; } .entry-content .wp-block-gallery img { border-radius: var(--radius-sm); } .entry-content::after { content: ""; display: block; clear: both; } /* Force uniform tiles for galleries regardless of the originals' shapes */ .wp-block-gallery.is-layout-flex, .gallery { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; } .wp-block-gallery .wp-block-image, .gallery .gallery-item { margin: 0 !important; width: auto !important; } .wp-block-gallery .wp-block-image img, .gallery .gallery-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); cursor: zoom-in; } /* Project gallery grid */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(0.6rem, 0.3rem + 1vw, 1rem); } .gallery-grid .media { cursor: zoom-in; } .gallery-grid figcaption { font-size: var(--step--1); color: var(--muted); margin-top: 0.45rem; } /* ============================================================ Hero ============================================================ */ .hero { position: relative; isolation: isolate; min-height: clamp(420px, 68vh, 720px); display: grid; align-items: end; color: var(--white); overflow: hidden; } .hero__img { position: absolute; inset: 0; z-index: -2; } .hero__img img { width: 100%; height: 100%; object-fit: cover; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, oklch(0.30 0.075 256 / 0.15) 0%, oklch(0.30 0.075 256 / 0.78) 100%); } .hero__inner { padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem); max-width: 46rem; } .hero h1 { color: var(--white); font-size: var(--step-5); } .hero p { color: oklch(1 0 0 / 0.92); font-size: var(--step-1); margin-top: 1rem; max-width: 34rem; } .hero__cta { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.8rem; } .hero__badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); color: var(--white); background: oklch(1 0 0 / 0.16); border: 1px solid oklch(1 0 0 / 0.3); padding: 0.4rem 0.85rem; border-radius: var(--radius-pill); margin-bottom: 1.1rem; } .hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); } /* ============================================================ Feature / split blocks ============================================================ */ .split { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; } @media (min-width: 800px) { .split { grid-template-columns: 1.05fr 1fr; } .split--flip > :first-child { order: 2; } } .linklist { display: grid; gap: 0; } .linklist a { display: grid; grid-template-columns: 72px 1fr auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform 0.3s var(--ease); } .linklist a:hover { transform: translateX(0.4rem); color: var(--blue-700); } .linklist a:first-child { border-top: 1px solid var(--line); } .linklist .media { aspect-ratio: 1/1; border-radius: 10px; } .linklist h3 { font-size: var(--step-1); color: var(--ink); } .linklist .arrow { color: var(--pink); font-size: 1.4rem; transition: transform 0.3s var(--ease); } .linklist a:hover .arrow { transform: translateX(4px); } .care-icon { width: 64px; height: 64px; border-radius: 16px; background: var(--sky-200); color: var(--blue-700); display: grid; place-items: center; flex-shrink: 0; } .care-icon svg { width: 32px; height: 32px; } .linklist a:nth-child(even) .care-icon { background: var(--pink-wash); color: var(--pink-600); } /* News / from-the-farm post grid */ .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); } .news-card { display: flex; flex-direction: column; } .news-card__media { display: block; } .news-card__media .media { aspect-ratio: 16 / 10; border-radius: var(--radius); } .news-card__body { padding-top: 0.85rem; display: flex; flex-direction: column; gap: 0.3rem; } .news-card__date { font-family: var(--font-display); font-size: var(--step--1); font-weight: 700; color: var(--pink-600); } .news-card h3 { font-size: var(--step-1); line-height: 1.15; } .news-card h3 a { text-decoration: none; color: var(--blue-700); } .news-card:hover h3 a { color: var(--pink-600); } .news-card__ex { color: var(--muted); } .news-card__cta { font-family: var(--font-display); font-weight: 600; color: var(--blue-link); font-size: var(--step--1); margin-top: 0.2rem; } .news-card:hover .news-card__cta { color: var(--pink-600); } /* CTA band */ .band { background: var(--sky); color: var(--footer-ink); border-radius: clamp(16px, 1rem + 1vw, 28px); padding: clamp(2rem, 1.4rem + 3vw, 4rem); text-align: center; } .band h2 { color: var(--footer-ink); } .band p { color: oklch(0.27 0.06 245 / 0.85); max-width: 36rem; margin-inline: auto; margin-top: 0.8rem; } .band .btn { margin-top: 1.6rem; } .band .btn--primary { background: var(--pink-cta); color: var(--white); } .band .btn--primary:hover { background: var(--pink-600); color: var(--white); } /* ============================================================ Page / post content ============================================================ */ .page-hero { padding-top: clamp(2rem, 1.5rem + 3vw, 3.5rem); padding-bottom: clamp(1.25rem, 0.8rem + 1.5vw, 2rem); } .page-hero + .container { margin-top: clamp(0.75rem, 0.4rem + 1vw, 1.4rem); } .page-hero .kicker { font-family: var(--font-display); color: var(--pink-600); font-weight: 600; } .entry-content { font-size: var(--step-0); } /* Long, unbroken URLs (e.g. the QLD legislation links on the Legal guide) must wrap instead of forcing horizontal scroll on mobile. */ .entry-content, .entry-content p, .entry-content li, .entry-content a, .entry-content td { overflow-wrap: anywhere; word-break: break-word; } .entry-content { text-wrap: pretty; } .entry-content p { max-width: 68ch; } .entry-content > * + * { margin-top: 1.3rem; } /* --- Section headings: give each section real presence ------------------ */ .entry-content h2, .entry-content h3 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.12; color: var(--blue-700); text-wrap: balance; scroll-margin-top: 96px; } .entry-content h2 { font-size: var(--step-3); font-weight: 800; margin-top: 3rem; padding-top: 0.2rem; position: relative; } /* A short sky accent rule above each H2 — a quiet section marker, not an eyebrow. */ .entry-content h2::before { content: ""; display: block; width: 2.4rem; height: 4px; border-radius: 4px; background: var(--sky-deep); margin-bottom: 0.85rem; } .entry-content h3 { font-size: var(--step-2); font-weight: 700; margin-top: 2.4rem; color: var(--ink); display: flex; align-items: baseline; gap: 0.55rem; } /* Small pink goat-mark cue before sub-section H3s (via CSS mask of the symbol isn't available, so use a compact magenta diamond — calm, on-brand). */ .entry-content h3::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--pink-cta); transform: translateY(-0.12em) rotate(45deg); } .entry-content h2 + p, .entry-content h3 + p { margin-top: 0.9rem; } /* --- Lists: custom markers + breathing room ----------------------------- */ .entry-content ul, .entry-content ol { padding-left: 0; list-style: none; } .entry-content li { position: relative; padding-left: 1.7rem; } .entry-content li + li { margin-top: 0.55rem; } .entry-content ul > li::before { content: ""; position: absolute; left: 0.1rem; top: 0.62em; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--pink-cta); transform: rotate(45deg); } .entry-content ol { counter-reset: td-ol; } .entry-content ol > li { counter-increment: td-ol; } .entry-content ol > li::before { content: counter(td-ol); position: absolute; left: 0; top: 0.05em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--sky-200); color: var(--blue-link); font-family: var(--font-display); font-weight: 700; font-size: 0.74rem; display: grid; place-items: center; } /* keep nested lists tidy */ .entry-content li > ul, .entry-content li > ol { margin-top: 0.55rem; } /* --- Blockquote → TIP / callout card (no side-stripe) ------------------- */ .entry-content blockquote { position: relative; background: var(--sky-200); border: 1px solid transparent; border-radius: var(--radius); padding: 1.15rem 1.3rem 1.15rem 3.3rem; color: var(--footer-ink); font-style: normal; box-shadow: var(--shadow); margin-block: 2rem; } .entry-content blockquote::before { content: ""; position: absolute; left: 1.15rem; top: 1.15rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--sky-deep); -webkit-mask: no-repeat center / 0.95rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.2 1 2v.3h6v-.3c0-.8.4-1.5 1-2A7 7 0 0 0 12 2Z'/%3E%3Crect x='9' y='19' width='6' height='2' rx='1'/%3E%3Crect x='10' y='21.5' width='4' height='1.6' rx='.8'/%3E%3C/svg%3E"); mask: no-repeat center / 0.95rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.2 1 2v.3h6v-.3c0-.8.4-1.5 1-2A7 7 0 0 0 12 2Z'/%3E%3Crect x='9' y='19' width='6' height='2' rx='1'/%3E%3Crect x='10' y='21.5' width='4' height='1.6' rx='.8'/%3E%3C/svg%3E"); background-color: var(--white); } .entry-content blockquote p { max-width: none; } .entry-content blockquote p:first-child::before { content: "Tip"; display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--step--1); letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue-link); margin-bottom: 0.3rem; } .entry-content blockquote a { color: var(--blue-link); } .entry-content a { font-weight: 600; } /* --- Motif divider between major sections (subtle) --------------------- */ .entry-content hr { border: 0; height: 1px; background: var(--line); margin-block: 2.6rem; position: relative; overflow: visible; } .entry-content hr::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.55rem; height: 0.55rem; border-radius: 2px; background: var(--sky-deep); transform: translate(-50%, -50%) rotate(45deg); } /* ============================================================ Editorial woven photos (the_content filter) — wide figures spaced through the body so the eye never hits a long dry run of text. ============================================================ */ .ed-inline-photo.ed-inline-photo { /* raise specificity over generic .entry-content figure */ margin-block: 2.4rem; width: 100%; max-width: none; cursor: zoom-in; box-shadow: var(--shadow); } .entry-content .ed-inline-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; } /* Narrative pages: give the prose a touch more room so an occasional figure can sit beside the text (>=900px) without crowding the measure. */ @media (min-width: 900px) { .ed-narrative .ed-page-body .prose { width: min(100% - var(--gutter) * 2, 52rem); } .ed-inline-photo.ed-inline-photo--side { width: 42%; max-width: 22rem; aspect-ratio: 4 / 3; margin-block: 0.4rem; } .ed-inline-photo.ed-inline-photo--side-right { float: right; margin-left: 2rem; margin-bottom: 1.2rem; } .ed-inline-photo.ed-inline-photo--side-left { float: left; margin-right: 2rem; margin-bottom: 1.2rem; } /* a full-width inline figure must drop clear of any preceding side float instead of colliding with it */ .ed-narrative .entry-content .ed-inline-photo:not(.ed-inline-photo--side) { clear: both; } /* keep the section heading that follows from wrapping awkwardly around a float */ .ed-narrative .entry-content h2 { clear: both; } } /* ============================================================ Footer ============================================================ */ .site-footer { background: var(--sky); color: var(--footer-ink); padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); margin-top: 0; } .site-footer a { color: var(--footer-ink); text-decoration-color: var(--pink-cta); } .site-footer a:hover { color: var(--pink-600); } .site-footer p { color: var(--footer-ink); } .footer-grid { display: grid; gap: 2rem clamp(1.5rem, 1rem + 2vw, 3rem); grid-template-columns: 1fr; } @media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } } .site-footer .brand { color: var(--footer-ink); font-size: 1.5rem; } .site-footer h4 { color: var(--footer-ink); font-size: 0.95rem; text-transform: none; margin-bottom: 0.8rem; } .site-footer ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; } .footer-meta { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid oklch(0.27 0.06 245 / 0.22); font-size: var(--step--1); color: oklch(0.27 0.06 245 / 0.78); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; } /* ============================================================ Lightbox ============================================================ */ .lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: grid; place-items: center; padding: clamp(1rem, 3vw, 3rem); background: oklch(0.20 0.04 262 / 0.9); opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s; } .lightbox.open { opacity: 1; visibility: visible; } .lightbox img { max-width: min(100%, 1200px); max-height: 86vh; width: auto; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); } .lightbox__close { position: absolute; top: clamp(0.8rem, 2vw, 1.5rem); right: clamp(0.8rem, 2vw, 1.5rem); width: 48px; height: 48px; border-radius: 50%; border: none; background: oklch(1 0 0 / 0.15); color: var(--white); font-size: 1.5rem; cursor: pointer; transition: background 0.25s; } .lightbox__close:hover { background: var(--pink-cta); } @media (prefers-reduced-motion: reduce) { .lightbox, .media img, .nav a::after, .btn { transition: none; } } /* ============================================================ Entrance motion (enhances already-visible content) ============================================================ */ /* Entrance reveal intentionally disabled: content is static on load (no fade/scroll motion). */ .reveal { opacity: 1; transform: none; } /* ============================================================ Goats For Sale — listings (carsales-style) ============================================================ */ .listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: clamp(1rem, 0.6rem + 1.5vw, 1.6rem); } .listing-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); display: flex; flex-direction: column; transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease); } .listing-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); } .listing-card__media { position: relative; display: block; } .listing-card__media .media { aspect-ratio: 4 / 3; border-radius: 0; } .listing-card.is-sold .listing-card__media .media img { filter: grayscale(0.7) opacity(0.75); } .status-badge { position: absolute; top: 0.7rem; left: 0.7rem; font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); color: var(--white); background: var(--blue); padding: 0.25rem 0.7rem; border-radius: var(--radius-pill); } .status-badge.is-available, .is-available .status-badge { background: oklch(0.55 0.13 155); } /* green */ .status-badge.is-on-hold, .is-on-hold .status-badge { background: oklch(0.62 0.15 60); } /* amber */ .status-badge.is-sold, .is-sold .status-badge { background: var(--muted); } .status-badge.is-enquire-for-price { background: var(--blue); } .listing-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; } .listing-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .listing-card__top h3 { font-size: var(--step-1); color: var(--blue-700); } .listing-card__top h3 a { text-decoration: none; color: inherit; } .price { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--pink-600); white-space: nowrap; } .price--poa, .price--sold { font-size: var(--step-0); color: var(--muted); font-weight: 600; } .spec-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; } .spec-chips li { font-size: var(--step--1); color: var(--ink); background: var(--blue-wash); border-radius: var(--radius-pill); padding: 0.2rem 0.65rem; } .listing-card__cta { margin-top: auto; font-family: var(--font-display); font-weight: 600; color: var(--blue-link); text-decoration: none; } .listing-card:hover .listing-card__cta { color: var(--pink-600); } /* Single listing */ .listing-layout { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3rem); align-items: start; } @media (min-width: 880px) { .listing-layout { grid-template-columns: 1.25fr 1fr; } } .listing-gallery .media--wide { aspect-ratio: 4 / 3; } .thumb-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 0.6rem; margin-top: 0.6rem; } .thumb-row .media { cursor: zoom-in; } .listing-detail__head h1 { font-size: var(--step-4); } .listing-detail__price { display: flex; align-items: center; gap: 0.8rem; margin: 0.6rem 0 1.2rem; } .listing-detail__price .price { font-size: var(--step-3); } .spec-table { display: grid; gap: 0; margin: 0 0 1.5rem; border-top: 1px solid var(--line); } .spec-table > div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); } .spec-table dt { color: var(--muted); margin: 0; } .spec-table dd { margin: 0; font-weight: 600; } .listing-desc { margin-bottom: 1.5rem; } /* Enquiry form */ .enquire { background: var(--blue-wash); border-radius: var(--radius); padding: clamp(1.2rem, 0.8rem + 1.5vw, 1.8rem); } .enquire h2 { font-size: var(--step-2); margin-bottom: 0.9rem; } .enquire-form { display: grid; gap: 0.8rem; } .enquire-form label { display: grid; gap: 0.3rem; font-weight: 600; font-size: var(--step--1); color: var(--ink); } .enquire-form input, .enquire-form textarea { font: inherit; font-weight: 400; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); } .enquire-form input:focus, .enquire-form textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-wash); } .field-row { display: grid; gap: 0.8rem; } @media (min-width: 460px) { .field-row { grid-template-columns: 1fr 1fr; } } .enquire-form button { justify-self: start; margin-top: 0.3rem; } .notice--ok { background: oklch(0.95 0.05 155); color: oklch(0.35 0.1 155); border-radius: var(--radius-sm); padding: 0.8rem 1rem; font-weight: 600; } /* ============================================================ Mautic embedded forms (contact + waiting list) — the external embed ships near-invisible light-blue-on-white; restyle to brand. ============================================================ */ .entry-content .mauticform-innerform { max-width: var(--container-prose); } .mauticform-label, .mauticform-row label { color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: var(--step--1); margin-bottom: 0.3rem; display: block; } .mauticform-innerform h2, .mauticform-innerform h3 { color: var(--blue-700); text-align: left; font-family: var(--font-display); } .mauticform-row { margin-bottom: 0.9rem; } .mauticform-input, .mauticform-textarea, .mauticform-selectbox { font: inherit; padding: 0.7rem 0.8rem; border: 1px solid var(--line) !important; border-radius: var(--radius-sm) !important; background: var(--white); color: var(--ink); width: 100%; max-width: 100%; } .mauticform-input:focus, .mauticform-textarea:focus, .mauticform-selectbox:focus { outline: none; border-color: var(--pink) !important; box-shadow: 0 0 0 3px var(--pink-wash); } .mauticform-button, .mauticform-button.btn-default, button.mauticform-button { background: var(--pink-cta) !important; color: var(--white) !important; border: none !important; font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); padding: 0.8em 1.6em; border-radius: var(--radius-pill); cursor: pointer; transition: background 0.25s var(--ease); } .mauticform-button:hover { background: var(--pink-600) !important; } .mauticform-errormsg, .mauticform-required { color: var(--pink-600); } .mauticform-message { color: var(--ink); } /* Utilities */ .muted { color: var(--muted); } .center { text-align: center; } .mt-0 { margin-top: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--blue); color: #fff; padding: 0.7rem 1rem; z-index: var(--z-lightbox); border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* ============================================================ Header v2 — two-tier (logo + utility on top, nav row below) ============================================================ */ .site-header { position: sticky; top: 0; z-index: var(--z-nav); background: var(--white); border-bottom: 1px solid var(--line); } .site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 138px; padding-block: 8px; } .site-header__utility { display: flex; align-items: center; gap: clamp(0.6rem, 0.3rem + 1vw, 1.2rem); } .header-phone { font-family: var(--font-display); font-weight: 600; color: var(--blue-700); text-decoration: none; white-space: nowrap; } .header-phone:hover { color: var(--pink-600); } .site-nav { border-top: 1px solid var(--line); background: var(--white); } /* kill list bullets / default list chrome on the menu */ .site-nav .nav, .site-nav .nav ul.sub-menu { list-style: none; margin: 0; padding-left: 0; } .site-nav .nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(0.3rem, 0rem + 1vw, 1.1rem); padding: 0.3rem 0; } .site-nav .nav li, .site-nav .nav .menu-item { list-style: none; margin: 0; } .site-nav .nav .menu-item > a { display: inline-block; font-family: var(--font-display); font-weight: 500; font-size: 0.97rem; color: var(--ink); text-decoration: none; padding: 0.5rem 0.25rem; } .site-nav .nav .menu-item > a:hover { color: var(--blue-700); } /* parent items need room for the dropdown chevron so it doesn't overlap text */ .site-nav .nav .menu-item-has-children > a { padding-right: 1.35rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23cc2086' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.15rem center; } /* submenu links: keep comfortable left/right padding inside the dropdown panel */ .site-nav .nav .sub-menu a { display: block; width: 100%; padding: 0.55rem 0.95rem; background-image: none; } .site-nav .nav .sub-menu li { width: 100%; } .site-nav .nav .sub-menu { padding: 0.5rem; } .primary-nav__cta { display: none; } @media (min-width: 861px) { .nav-toggle { display: none; } } @media (max-width: 860px) { .site-header__utility .btn--pink, .header-phone { display: none; } .site-header__bar { min-height: 84px; } .brand img, .custom-logo { height: 58px; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); cursor: pointer; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 20px; height: 2px; background: var(--ink); position: relative; transition: transform 0.3s var(--ease); } .nav-toggle span::before { position: absolute; top: -6px; } .nav-toggle span::after { position: absolute; top: 6px; } .site-nav { border-top: none; } .site-nav > .container { padding: 0; width: 100%; } .site-nav .nav.primary-nav { position: fixed; top: 84px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); padding: 0.5rem var(--gutter) 1.5rem; box-shadow: var(--shadow); border-bottom: 1px solid var(--line); transform: translateY(-135%); transition: transform 0.4s var(--ease); max-height: calc(100dvh - 84px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .site-nav .nav.primary-nav.open { transform: translateY(0); } .site-nav .nav .menu-item > a { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--line); } .primary-nav__cta { display: inline-flex; margin-top: 0.9rem; justify-content: center; } } /* ============================================================ Editorial homepage — "Editorial Elegance" + refined goat motif. Magazine-grade asymmetric collage, lots of air, big tight Mulish display type, one drenched-magenta fold with a faint goat watermark. Reuses brand tokens; adds nothing off-palette. ============================================================ */ /* Goat motif mark (used sparingly: wordmark, section starts, bullets, watermark, hover) */ .gm { display: inline-block; width: 1em; height: 1.24em; color: var(--pink); fill: currentColor; vertical-align: middle; } .gm--ink { color: var(--pink-600); } .gm--sky { color: var(--sky-deep); } /* Generic arrow nudge shared by editorial CTAs */ .arr { display: inline-block; transition: transform 0.25s var(--ease); } .btn:hover .arr, a:hover > .arr { transform: translateX(3px); } /* A dark-on-photo button + on-pink ghost button (kept to brand) */ .btn--on-dark { background: var(--white); color: var(--ink); border-color: var(--white); } .btn--on-dark:hover { background: var(--white); color: var(--pink-600); box-shadow: var(--shadow-lg); } .btn--on-pink { background: var(--white); color: var(--pink-600); border-color: var(--white); } .btn--on-pink:hover { background: var(--white); color: var(--pink-600); box-shadow: 0 14px 30px -14px oklch(0.30 0.12 354 / 0.7); } /* Shared editorial section eyebrow (refined; small motif mark, no 01/02 markers) */ .ed-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); letter-spacing: 0.02em; color: var(--pink-600); margin-bottom: 1.1rem; } .ed-eyebrow .gm { width: 0.95rem; height: 1.18rem; } .ed-eyebrow--light { color: oklch(1 0 0 / 0.92); } .ed-eyebrow--light .gm { color: oklch(1 0 0 / 0.92); } .ed-eyebrow--sky { color: var(--blue-link); } .ac { color: var(--pink); } .ac-sky { color: var(--blue-700); } /* ---------- HERO ---------- */ .ed-hero { position: relative; isolation: isolate; min-height: clamp(540px, 80vh, 840px); display: grid; align-items: end; color: var(--white); overflow: hidden; background: var(--ink); } .ed-hero__media { position: absolute; inset: 0; z-index: -2; } .ed-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; } .ed-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, oklch(0.24 0.02 250 / 0.42) 0%, oklch(0.24 0.02 250 / 0) 30%), linear-gradient(28deg, oklch(0.24 0.02 250 / 0.82) 6%, oklch(0.24 0.02 250 / 0.32) 48%, oklch(0.24 0.02 250 / 0) 72%); } .ed-hero__inner { width: 100%; padding-block: clamp(2.5rem, 6vh, 5rem); } .ed-hero__mark { position: absolute; top: clamp(1.5rem, 5vh, 3rem); right: var(--gutter); z-index: 1; opacity: 0.9; } .ed-hero__mark .gm { width: 52px; height: 64px; color: var(--sky); } .ed-kicker { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); margin-bottom: 1.1rem; } .ed-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sky); } .ed-hero h1 { color: var(--white); font-size: clamp(2.5rem, 1.6rem + 4.4vw, 5.4rem); line-height: 0.98; letter-spacing: -0.04em; max-width: 17ch; font-weight: 800; } .ed-hero h1 .ac { color: var(--sky); } .ed-lede { color: oklch(1 0 0 / 0.92); font-size: var(--step-1); max-width: 46ch; margin-top: 1.3rem; line-height: 1.5; } .ed-hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.9rem; } @media (max-width: 640px) { .ed-hero__mark { display: none; } } /* ---------- INTRO / ABOUT ---------- */ .ed-intro { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); } .ed-intro__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 1rem + 4vw, 4.5rem); align-items: start; } @media (min-width: 860px) { .ed-intro__grid { grid-template-columns: 1.05fr 0.95fr; } } .ed-intro h2 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; max-width: 18ch; color: var(--blue-700); } .ed-intro__body { color: var(--ink); font-size: var(--step-1); line-height: 1.55; } .ed-intro__body > p { color: var(--muted); } .ed-checklist { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 0.75rem; } .ed-checklist li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--step-0); color: var(--ink); } .ed-checklist .gm { width: 1rem; height: 1.24rem; flex: none; margin-top: 0.2rem; color: var(--pink); } /* ---------- MEET THE HERD — asymmetric overlapping collage ---------- */ .ed-meet { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3.5rem, 2rem + 5vw, 7rem); } .ed-meet__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(1.8rem, 1rem + 3vw, 3.2rem); } .ed-meet__head h2 { font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem); font-weight: 800; letter-spacing: -0.035em; max-width: 14ch; color: var(--blue-700); } .ed-meet__head h2 em { font-style: italic; color: var(--pink); } .ed-meet__head p { color: var(--muted); max-width: 34ch; } .ed-collage { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(58px, 7vw, 96px); gap: clamp(0.9rem, 0.5rem + 1vw, 1.5rem); } .ed-ph { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--blue-wash); margin: 0; cursor: zoom-in; } .ed-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); } .ed-ph:hover img { transform: scale(1.04); } .ed-collage .p1 { grid-column: 1 / 6; grid-row: 1 / 7; } .ed-collage .p2 { grid-column: 6 / 10; grid-row: 1 / 5; } .ed-collage .p3 { grid-column: 10 / 13; grid-row: 1 / 6; } .ed-collage .p4 { grid-column: 6 / 9; grid-row: 5 / 9; z-index: 2; margin-top: -1.4rem; margin-left: 1.2rem; box-shadow: 0 24px 50px -24px oklch(0.24 0.02 250 / 0.45); } .ed-collage .p5 { grid-column: 9 / 13; grid-row: 6 / 9; } .ed-collage .p6 { grid-column: 1 / 6; grid-row: 7 / 10; } .ed-collage__chip { grid-column: 5 / 7; grid-row: 6 / 8; align-self: center; justify-self: center; z-index: 3; background: var(--sky); border-radius: 50%; width: clamp(70px, 9vw, 118px); height: clamp(70px, 9vw, 118px); display: grid; place-items: center; box-shadow: 0 20px 40px -16px oklch(0.66 0.135 233 / 0.6); } .ed-collage__chip .gm { width: 52%; height: 62%; color: var(--white); } @media (max-width: 820px) { .ed-collage { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(50px, 12vw, 96px); } .ed-collage .p1 { grid-column: 1 / 7; grid-row: 1 / 5; } .ed-collage .p2 { grid-column: 1 / 4; grid-row: 5 / 8; } .ed-collage .p3 { grid-column: 4 / 7; grid-row: 5 / 8; } .ed-collage .p4 { grid-column: 1 / 4; grid-row: 8 / 13; margin: 0; box-shadow: 0 18px 36px -20px oklch(0.24 0.02 250 / 0.45); } .ed-collage .p5 { grid-column: 4 / 7; grid-row: 8 / 11; } .ed-collage .p6 { grid-column: 4 / 7; grid-row: 11 / 13; } .ed-collage__chip { display: none; } } /* ---------- GOATS FOR SALE — one drenched-magenta fold, faint goat watermark ---------- */ .ed-sale { background: var(--pink-cta); color: var(--white); padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); position: relative; overflow: hidden; } .ed-sale__mark { position: absolute; right: -4%; top: -8%; pointer-events: none; z-index: 0; } .ed-sale__mark .gm { width: min(42vw, 520px); height: min(50vw, 620px); color: var(--white); opacity: 0.1; } .ed-sale .container { position: relative; z-index: 1; } .ed-sale__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(1.8rem, 1rem + 3vw, 2.8rem); } .ed-sale__head h2 { font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem); font-weight: 800; letter-spacing: -0.035em; color: var(--white); } .ed-sale__head p { max-width: 34ch; color: oklch(1 0 0 / 0.9); } .ed-sale__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.1rem, 0.6rem + 1.6vw, 1.8rem); } @media (min-width: 720px) { .ed-sale__grid { grid-template-columns: repeat(3, 1fr); } } .ed-lot { background: var(--white); color: var(--ink); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 60px -30px oklch(0.30 0.12 354 / 0.55); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .ed-lot:hover { transform: translateY(-4px); box-shadow: 0 36px 60px -28px oklch(0.30 0.12 354 / 0.6); } .ed-lot__media { position: relative; display: block; } .ed-lot__media .media { aspect-ratio: 16 / 11; border-radius: 0; } .ed-lot.is-sold .ed-lot__media .media img { filter: grayscale(0.7) opacity(0.78); } .ed-lot__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; } .ed-lot__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .ed-lot__top h3 { font-size: var(--step-2); font-weight: 800; letter-spacing: -0.02em; color: var(--blue-700); } .ed-lot__top h3 a { text-decoration: none; color: inherit; } .ed-lot__cta { margin-top: auto; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--blue-link); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; } .ed-lot__cta .arr { color: var(--pink); } .ed-lot:hover .ed-lot__cta { color: var(--pink-600); } .ed-sale__empty { color: oklch(1 0 0 / 0.92); font-size: var(--step-1); max-width: 44ch; } .ed-sale__more { margin-top: clamp(1.8rem, 1rem + 2vw, 2.6rem); } /* ---------- CARING — motif-bulleted link list ---------- */ .ed-care { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); } .ed-care__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.8rem, 1rem + 3vw, 4rem); align-items: start; } @media (min-width: 900px) { .ed-care__grid { grid-template-columns: 0.85fr 1.15fr; } } .ed-care h2 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); font-weight: 800; letter-spacing: -0.03em; max-width: 16ch; color: var(--blue-700); } .ed-care__sub { color: var(--muted); margin-top: 1.1rem; max-width: 36ch; } .ed-carelist { display: grid; gap: 0; } .ed-carelist a { display: grid; grid-template-columns: auto 1fr auto; gap: 1.1rem; align-items: center; padding: 1.3rem 0.4rem; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: background 0.25s var(--ease), padding-inline 0.25s var(--ease); } .ed-carelist a:first-child { border-top: 1px solid var(--line); } .ed-carelist a:hover { background: var(--pink-wash); padding-inline: 1rem 0.8rem; } .ed-carelist h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.015em; color: var(--ink); } .ed-carelist .muted { display: block; font-size: 0.92rem; line-height: 1.45; margin-top: 0.2rem; } .ed-carelist .gm--bullet { width: 1.3rem; height: 1.6rem; color: var(--sky-deep); flex: none; transition: transform 0.3s var(--ease); } .ed-carelist a:hover .gm--bullet { transform: translateY(-2px) rotate(-6deg); color: var(--pink); } .ed-carelist .arr { color: var(--pink); font-size: 1.3rem; } /* ---------- WAITING LIST CTA — dark card ---------- */ .ed-join { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); } .ed-join__card { position: relative; border-radius: 24px; overflow: hidden; background: var(--ink); color: var(--white); display: grid; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 820px) { .ed-join__card { grid-template-columns: 1.1fr 0.9fr; } } .ed-join__text { padding: clamp(2rem, 1.4rem + 3vw, 4.2rem); display: flex; flex-direction: column; justify-content: center; } .ed-join__text h2 { color: var(--white); font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; max-width: 16ch; } .ed-join__text > p { color: oklch(1 0 0 / 0.84); margin: 1.1rem 0 1.9rem; max-width: 42ch; } .ed-join__text .btn { align-self: flex-start; } .ed-join__phone { margin-top: 1.6rem; font-size: 0.92rem; color: oklch(1 0 0 / 0.72); } .ed-join__phone b { color: var(--white); font-weight: 700; } .ed-join__media { position: relative; min-height: 240px; } .ed-join__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ed-join__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, oklch(0.24 0.02 250 / 0) 34%); } @media (max-width: 819px) { .ed-join__media { order: -1; min-height: 240px; } .ed-join__media::after { background: linear-gradient(0deg, var(--ink) 0%, oklch(0.24 0.02 250 / 0) 55%); } } /* Header wordmark goat mark (refined, by the logo) */ .site-header__brand { display: inline-flex; align-items: center; gap: 0.55rem; } .brand-mark { display: inline-flex; width: 26px; height: 32px; color: var(--sky-deep); flex: none; } .brand-mark .gm { width: 100%; height: 100%; color: inherit; } .brand--foot { display: inline-flex; align-items: center; gap: 0.5rem; } .brand-mark--foot { width: 22px; height: 27px; color: var(--footer-ink); } @media (max-width: 640px) { .site-header__brand .brand-mark { display: none; } } /* Inner-page heros: align to the editorial language with a little more air and a refined motif accent on the kicker (CSS-only, no markup/logic change). */ .page-hero { padding-top: clamp(2.5rem, 1.5rem + 3.5vw, 4rem); } .page-hero .kicker { display: inline-flex; align-items: center; gap: 0.5rem; letter-spacing: 0.02em; } .page-hero .kicker::before { content: ""; width: 0.95rem; height: 1.18rem; flex: none; background-color: var(--sky-deep); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 124'%3E%3Cpath d='M69.26 120.94 62.78 120.3 61 118.52 69.42 105.96 71.36 94.37 61.97 86.96 55.99 76.49 31.07 68.12 29.29 69.89 34.79 74.4 35.11 76.65 38.03 79.55 38.03 85.99 35.6 88.73 33.98 88.73 29.13 82.94 30.26 89.22 26.21 93.56 23.46 92.44 17.96 74.72 14.72 68.28 14.72 61.52 16.67 56.04 13.43 42.19 13.43 36.72 11.97 35.27 5.5 34.62 1.13 32.21 1.13 26.41 4.37 21.58 5.02 17.07 6.96 15.46 5.99 9.02 8.41 5.96 11.97 6.6 14.56 10.47 20.39 11.76 31.72 10.47 31.88 11.92 25.89 15.3 24.43 17.71 34.95 31.4 39.48 32.37 47.57 36.88 57.61 38.17 66.02 41.71 77.18 50.57 83.82 59.75 83.98 48.31 87.06 46.54 91.42 51.21 94.01 60.23 93.37 66.35 89.32 70.37 83.5 72.31 77.51 79.23 80.1 85.35 85.28 90.18 85.28 93.72 76.21 112.73 75.24 117.24 72.17 117.72z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 124'%3E%3Cpath d='M69.26 120.94 62.78 120.3 61 118.52 69.42 105.96 71.36 94.37 61.97 86.96 55.99 76.49 31.07 68.12 29.29 69.89 34.79 74.4 35.11 76.65 38.03 79.55 38.03 85.99 35.6 88.73 33.98 88.73 29.13 82.94 30.26 89.22 26.21 93.56 23.46 92.44 17.96 74.72 14.72 68.28 14.72 61.52 16.67 56.04 13.43 42.19 13.43 36.72 11.97 35.27 5.5 34.62 1.13 32.21 1.13 26.41 4.37 21.58 5.02 17.07 6.96 15.46 5.99 9.02 8.41 5.96 11.97 6.6 14.56 10.47 20.39 11.76 31.72 10.47 31.88 11.92 25.89 15.3 24.43 17.71 34.95 31.4 39.48 32.37 47.57 36.88 57.61 38.17 66.02 41.71 77.18 50.57 83.82 59.75 83.98 48.31 87.06 46.54 91.42 51.21 94.01 60.23 93.37 66.35 89.32 70.37 83.5 72.31 77.51 79.23 80.1 85.35 85.28 90.18 85.28 93.72 76.21 112.73 75.24 117.24 72.17 117.72z'/%3E%3C/svg%3E") no-repeat center / contain; } @media (prefers-reduced-motion: reduce) { .ed-ph img, .arr, .gm--bullet, .ed-lot { transition: none !important; } } /* ============================================================ Editorial INNER pages — page.php / single.php / archives / 404 Carries the homepage language across the rest of the site: big tight Mulish titles, a single restrained motif kicker, sky/pink accent, generous air, well-set prose, a closing magenta CTA fold. Reuses brand tokens only. ============================================================ */ /* ---------- Photographic page hero (full-bleed, bottom-left title) ---------- */ .ed-pagehero { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end; min-height: clamp(340px, 44vh, 540px); color: var(--white); background: var(--ink); } .ed-pagehero__media { position: absolute; inset: 0; z-index: -2; } .ed-pagehero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; } /* Dark, bottom-weighted scrim so white text clears 4.5:1 over the photo. */ .ed-pagehero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, oklch(0.31 0.085 234 / 0) 30%, oklch(0.31 0.085 234 / 0.30) 58%, oklch(0.31 0.085 234 / 0.86) 100%), linear-gradient(180deg, oklch(0.18 0.03 250 / 0.30) 0%, oklch(0.18 0.03 250 / 0) 34%); } .ed-pagehero__inner { width: 100%; padding-block: clamp(1.9rem, 1.2rem + 3vw, 3.4rem); } .ed-pagehero__kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); margin-bottom: 0.9rem; text-shadow: 0 1px 10px oklch(0.18 0.03 250 / 0.5); } .ed-pagehero__kicker .gm { width: 0.95rem; height: 1.18rem; color: var(--sky); flex: none; } .ed-pagehero__kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sky); flex: none; } .ed-pagehero h1 { color: var(--white); font-size: clamp(2.1rem, 1.4rem + 3.4vw, 4.2rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; max-width: 20ch; text-wrap: balance; text-shadow: 0 2px 18px oklch(0.18 0.03 250 / 0.55); } .ed-pagehero h1 .ac { color: var(--sky); } .ed-pagehero__meta { font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); color: oklch(1 0 0 / 0.92); margin-top: 0.9rem; letter-spacing: 0.03em; text-shadow: 0 1px 10px oklch(0.18 0.03 250 / 0.5); } .ed-pagehero__lede { font-size: var(--step-1); color: oklch(1 0 0 / 0.94); line-height: 1.5; max-width: 50ch; margin-top: 1rem; text-shadow: 0 1px 12px oklch(0.18 0.03 250 / 0.5); } .ed-pagehero__note { font-size: var(--step--1); color: oklch(1 0 0 / 0.86); max-width: 56ch; margin-top: 0.8rem; text-shadow: 0 1px 10px oklch(0.18 0.03 250 / 0.5); } /* Brand fallback hero — no featured image: sky→deep gradient + faint goat watermark. */ .ed-pagehero--brand { background: linear-gradient(135deg, var(--sky) 0%, var(--sky-deep) 55%, var(--blue-900) 130%); } .ed-pagehero--brand::after { background: linear-gradient(180deg, oklch(0.18 0.03 250 / 0) 40%, oklch(0.18 0.03 250 / 0.34) 100%); } .ed-pagehero__watermark { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .ed-pagehero__watermark .gm { position: absolute; right: clamp(-1rem, -2vw, 1rem); bottom: -8%; width: clamp(150px, 22vw, 280px); height: auto; aspect-ratio: 100 / 124; color: oklch(1 0 0 / 0.12); transform: rotate(-6deg); } .ed-pagehero--brand h1, .ed-pagehero--brand .ed-pagehero__lede, .ed-pagehero--brand .ed-pagehero__note, .ed-pagehero--brand .ed-pagehero__meta { text-shadow: 0 2px 16px oklch(0.30 0.075 234 / 0.4); } .ed-pagehero--brand .ed-pagehero h1 .ac, .ed-pagehero--brand h1 .ac { color: var(--white); } @media (max-width: 600px) { .ed-pagehero { min-height: clamp(300px, 56vh, 420px); } .ed-pagehero__inner { padding-block: clamp(1.6rem, 1rem + 3vw, 2.4rem); } } /* Back-compat aliases (any stray markup): keep legacy kicker/lede readable */ .ed-page-kicker { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); letter-spacing: 0.04em; color: var(--pink-600); margin-bottom: 1rem; } .ed-page-kicker .gm { width: 0.95rem; height: 1.18rem; color: var(--sky-deep); flex: none; } .ed-page-lede { font-size: var(--step-1); color: var(--muted); line-height: 1.5; max-width: 52ch; margin-top: 1.1rem; } /* Well-set prose body */ .ed-page-body { padding-block: clamp(2.2rem, 1.4rem + 3vw, 4rem); } .ed-page-body .entry-content > :first-child { margin-top: 0; } .ed-page-body--form { padding-top: clamp(1.6rem, 1rem + 2vw, 2.6rem); } .ed-page-back { margin-top: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); } .arr--back { display: inline-block; transition: transform 0.25s var(--ease); } .btn:hover .arr--back { transform: translateX(-3px); } /* Closing magenta CTA fold (content pages) */ .ed-page-cta { background: var(--pink-cta); color: var(--white); padding-block: clamp(2.8rem, 1.8rem + 4vw, 5rem); } .ed-page-cta__inner { display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 1rem + 2vw, 2.5rem); align-items: center; } @media (min-width: 820px) { .ed-page-cta__inner { grid-template-columns: 1.2fr 0.8fr; } } .ed-page-cta h2 { color: var(--white); font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; max-width: 18ch; } .ed-page-cta__sub { color: oklch(1 0 0 / 0.9); margin-top: 0.9rem; max-width: 42ch; } .ed-page-cta__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; } @media (min-width: 820px) { .ed-page-cta__actions { justify-content: flex-end; } } .btn--on-pink-ghost { background: transparent; color: var(--white); border-color: oklch(1 0 0 / 0.55); } .btn--on-pink-ghost:hover { background: oklch(1 0 0 / 0.12); color: var(--white); border-color: var(--white); } /* Listing/brand hero note sits a touch tighter */ .ed-pagehero--listing h1 { max-width: 20ch; } /* Single goat listing — elevate the back-link + heading; logic untouched */ .ed-listing-back { font-family: var(--font-display); font-weight: 600; margin-bottom: clamp(1rem, 0.7rem + 1vw, 1.6rem); } .ed-listing-back a { color: var(--blue-link); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; } .ed-listing-back a:hover { color: var(--pink-600); } .ed-listing-single .listing-detail__head h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; } .ed-listing-single .enquire { border: 1px solid var(--line); } .ed-listing-single .enquire h2 { font-weight: 800; letter-spacing: -0.02em; } /* 404 — friendly, on-brand (branded photographic-style hero) */ .ed-404 { display: grid; place-items: center; text-align: center; min-height: clamp(420px, 64vh, 640px); padding-block: clamp(3rem, 2rem + 5vw, 6rem); } .ed-404 .ed-pagehero__inner { width: 100%; } .ed-404__inner { max-width: 46rem; margin-inline: auto; } .ed-404 .ed-pagehero__kicker { justify-content: center; } .ed-404 h1 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; margin-inline: auto; } .ed-404 .ed-pagehero__lede { margin-inline: auto; } .ed-404__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 1.8rem; } .ed-404 .btn--ghost { background: oklch(1 0 0 / 0.1); color: var(--white); border-color: oklch(1 0 0 / 0.55); } .ed-404 .btn--ghost:hover { background: oklch(1 0 0 / 0.18); color: var(--white); border-color: var(--white); } /* ============================================================ A) CARE-GUIDE LAYOUT — two-column "field guide" Wide banner, sticky aside (contents + help card), more-guides row. Structurally distinct from the narrative read below. ============================================================ */ /* The two-column body */ .ed-guide-body { padding-block: clamp(2rem, 1.4rem + 3vw, 3.6rem); } .ed-guide-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 1rem + 3vw, 3rem); } .ed-guide-main { width: 100%; max-width: 660px; margin-inline: 0; } .ed-guide-main > .entry-content, .ed-guide-main.entry-content > :first-child { margin-top: 0; } @media (min-width: 900px) { .ed-guide-grid { grid-template-columns: minmax(0, 1fr) 272px; align-items: start; } } /* Sticky aside */ .ed-guide-aside { position: relative; } .ed-guide-aside__sticky { display: grid; gap: 1rem; } @media (min-width: 900px) { .ed-guide-aside__sticky { position: sticky; top: 96px; } } /* Shared card chrome */ .ed-guide-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.4rem); box-shadow: var(--shadow); } /* Contents card / list */ .ed-guide-toc__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue-link); margin-bottom: 0.7rem; } .ed-guide-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .ed-guide-toc li { counter-increment: toc; margin: 0; } .ed-guide-toc li + li { border-top: 1px solid var(--line); } .ed-guide-toc a { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.5rem 0; font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; line-height: 1.3; color: var(--ink); text-decoration: none; } .ed-guide-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; font-size: 0.78rem; font-weight: 700; color: var(--sky-deep); min-width: 1.6em; } .ed-guide-toc a:hover { color: var(--pink-600); } .ed-guide-toc a:hover::before { color: var(--pink-600); } /* H3 sub-sections sit a touch in and lighter than H2 anchors */ .ed-guide-toc__lvl-h3 a { padding-left: 0.6rem; color: var(--muted); font-weight: 500; } .ed-guide-toc__lvl-h3 a:hover { color: var(--pink-600); } /* The inline (mobile) contents box only shows in single-column mode */ .ed-guide-toc--inline { background: var(--sky-200); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1.6rem; } @media (min-width: 900px) { .ed-guide-toc--inline { display: none; } } /* Below the breakpoint the inline box carries the contents, so the aside copy is hidden to avoid a duplicate "On this page" list. */ @media (max-width: 899.98px) { .ed-guide-aside .ed-guide-toc { display: none; } } /* "Need a hand?" help card */ .ed-guide-help { background: var(--sky-200); border-color: transparent; } .ed-guide-help__title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); letter-spacing: -0.02em; color: var(--blue-700); margin-bottom: 0.4rem; } .ed-guide-help__text { font-size: 0.95rem; color: var(--footer-ink); margin-bottom: 0.9rem; } .ed-guide-help__phone { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--blue-link); text-decoration: none; margin-bottom: 0.9rem; } .ed-guide-help__phone:hover { color: var(--pink-600); } .ed-guide-help__btn { width: 100%; justify-content: center; } /* "More care guides" row */ .ed-guide-more { padding-block: clamp(2.2rem, 1.6rem + 3vw, 4rem); background: oklch(0.984 0.013 232); border-top: 1px solid var(--line); } .ed-guide-more .ed-eyebrow { margin-bottom: 1.2rem; } .ed-guide-more__grid { display: grid; grid-template-columns: 1fr; gap: 0.7rem; } @media (min-width: 560px) { .ed-guide-more__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .ed-guide-more__grid { grid-template-columns: 1fr 1fr 1fr; } } .ed-guide-more__item { display: flex; align-items: center; gap: 0.85rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1rem; text-decoration: none; color: var(--ink); transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease); } .ed-guide-more__item:hover { border-color: var(--sky-deep); box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); } .ed-guide-more__icon { flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--sky-200); color: var(--blue-700); display: grid; place-items: center; } .ed-guide-more__icon svg { width: 24px; height: 24px; } .ed-guide-more__label { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; line-height: 1.25; flex: 1 1 auto; } .ed-guide-more__item .arr { color: var(--pink-600); flex: none; } /* offset anchor jumps so the sticky header / nav doesn't cover the heading */ .ed-guide-main h2, .ed-guide-main h3 { scroll-margin-top: 96px; } /* ============================================================ B) NARRATIVE LAYOUT — emphasised lead paragraph ============================================================ */ /* gentle lead paragraph only: no drop-cap, no title-like first letter */ .ed-narrative .entry-content > p:first-of-type { font-size: clamp(1.1rem, 1.02rem + 0.45vw, 1.3rem); line-height: 1.55; color: var(--ink); margin-bottom: 1.3em; } /* ============================================================ H) CARE GUIDES INDEX — the "Caring for your goats" hub page. Photographic hero + a tidy responsive grid of guide cards. ============================================================ */ .ed-careindex__body { padding-block: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); } .ed-careindex__intro { max-width: 46rem; margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); } .ed-careindex__intro h2 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; max-width: 18ch; color: var(--blue-700); } .ed-careindex__sub { color: var(--muted); margin-top: 1rem; max-width: 56ch; font-size: var(--step-1); } .ed-careindex__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: clamp(0.9rem, 0.6rem + 1vw, 1.4rem); } .ed-careindex__card { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease); } .ed-careindex__card:hover { border-color: var(--sky-deep); box-shadow: var(--shadow-lg); transform: translateY(-3px); color: var(--ink); } .ed-careindex__icon { flex: none; width: 56px; height: 56px; border-radius: 14px; background: var(--sky-200); color: var(--blue-700); display: grid; place-items: center; } .ed-careindex__icon svg { width: 30px; height: 30px; } .ed-careindex__card:nth-child(even) .ed-careindex__icon { background: var(--pink-wash); color: var(--pink-600); } .ed-careindex__text { display: grid; gap: 0.3rem; min-width: 0; } .ed-careindex__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.015em; color: var(--blue-700); } .ed-careindex__excerpt { color: var(--muted); font-size: 0.95rem; line-height: 1.45; } .ed-careindex__arr { color: var(--pink-600); font-size: 1.3rem; align-self: center; flex: none; } .ed-careindex__card:hover .ed-careindex__arr { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .ed-careindex__card, .ed-careindex__arr { transition: none !important; } } /* ============================================================ Mautic embedded forms — polish. The marketing.smartible.com.au embed injects its own