/* ============================================================ homehogs marketing shopfront — the whole design system. ONE global (non-scoped) stylesheet, linked from MarketingLayout so it only loads on the shopfront. Global on purpose: the reveal engine gates on a class the script adds to (js-on / mk-motion), which scoped CSS cannot target, and the brand-graphics kit is shared byte-for-byte across home, features and about. Everything is mk- prefixed so nothing here can reach the app. THE TWO SWITCHES, and nothing else: html.js-on marketing.js is present. The ONLY thing this turns on is the start-hidden state for [data-reveal]. The reveal itself runs for everyone, reduced motion included, so under js-on the page is never dead: elements fade in as they scroll into view. html.mk-motion js-on AND the visitor allows motion. This is the ONLY switch for richer movement: reveal translate/scale, parallax drift, the scattered story chips, and the pinned horizontal features. Without it those degrade to static / normal-scroll, still fully readable. With no JS at all neither class lands: every [data-reveal] is visible, nothing is pinned, nothing is transformed. That static form is the SEO surface. Type scale is deliberately modest. No single line ever fills the viewport. ============================================================ */ /* ---- Page shell ------------------------------------------------------- */ .mk-page { position: relative; /* overflow-x clip so a drifting blob or a pinned track can never widen the document; the horizontal feature track contains its own overflow too. */ overflow-x: clip; } .mk-section { position: relative; z-index: 1; max-width: 68rem; margin: 0 auto; padding: var(--hc-space-8) var(--hc-space-4); box-sizing: border-box; width: 100%; } /* The accent gradient on a heading's last word (components wrap it in .mk-grad). */ .mk-grad { background: linear-gradient(100deg, var(--hc-accent), var(--hc-highlight)); -webkit-background-clip: text; background-clip: text; color: transparent; } .mk-section-head { max-width: 44rem; margin: 0 auto var(--hc-space-6); text-align: center; } .mk-section-head h2 { margin: 0 0 var(--hc-space-3); /* Same scale as the story intro, so every major home heading carries the same weight and the hierarchy reads as one system. */ font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--hc-text); } .mk-section-intro { margin: 0; font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--hc-text-muted); line-height: var(--hc-line-height); } /* ====================================================================== REVEAL ENGINE (works for EVERYONE, including reduced motion) ====================================================================== */ /* js-on: start hidden, fade in on .is-in. Opacity only, so reduced-motion visitors still get the reveal, just without movement. Stagger via --i. */ html.js-on [data-reveal] { opacity: 0; transition: opacity 0.6s ease; transition-delay: calc(var(--i, 0) * 70ms); } html.js-on [data-reveal].is-in { opacity: 1; } /* mk-motion: add the translate (and optional slight scale) on top. */ html.mk-motion [data-reveal] { transform: translateY(24px) scale(var(--reveal-scale, 1)); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms); } html.mk-motion [data-reveal].is-in { transform: none; } /* ====================================================================== BRAND GRAPHICS KIT: blobs, floating motifs, wave dividers ====================================================================== */ /* Soft colour blobs sit behind the content, low opacity, decorative. JS sets --mk-drift (px) on each when motion is allowed for a gentle parallax; without it they simply rest. */ .mk-blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .mk-blob { position: absolute; border-radius: 50%; filter: blur(36px); opacity: 0.5; transform: translateY(var(--mk-drift, 0px)); } /* Only hold a compositor layer for the blobs when they actually drift. */ html.mk-motion .mk-blob { will-change: transform; } .mk-blob--blossom { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--hc-blossom) 55%, transparent), transparent 70%); } .mk-blob--sunshine { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--hc-sunshine) 55%, transparent), transparent 70%); } @media (prefers-color-scheme: dark) { .mk-blob { opacity: 0.35; } } /* Floating motif chips (house, key, paper, bill, warranty, spark). Calm CSS bob, disabled under reduced motion. Sized by the container that places them. */ .mk-motif { display: inline-flex; align-items: center; justify-content: center; color: var(--hc-accent); } .mk-motif svg { width: 100%; height: 100%; display: block; overflow: visible; } .mk-float { animation: mk-bob 4.5s ease-in-out infinite; } .mk-float--slow { animation-duration: 6s; } .mk-float--delay { animation-delay: -1.6s; } .mk-float--delay2 { animation-delay: -3s; } @keyframes mk-bob { 0%, 100% { transform: translateY(0) rotate(var(--mk-tilt, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--mk-tilt, 0deg)); } } /* Wave / hill divider between sections so they flow rather than hard-stack. */ .mk-divider { position: relative; z-index: 1; display: block; width: 100%; height: clamp(40px, 6vw, 80px); margin: 0; color: var(--hc-surface); pointer-events: none; } .mk-divider svg { display: block; width: 100%; height: 100%; } .mk-divider--sunken { color: var(--hc-surface-sunken); } .mk-divider--soft { color: var(--hc-accent-soft); } .mk-divider--bg { color: var(--hc-bg); } .mk-divider--flip { transform: scaleY(-1); } /* When a divider caps the BOTTOM of a coloured section, its own strip carries that colour so the plain section below appears to rise up through it. */ .mk-divider--from-sunken { background: var(--hc-surface-sunken); } /* ====================================================================== HERO ====================================================================== */ .mk-hero { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; padding: var(--hc-space-8) var(--hc-space-4) var(--hc-space-7); box-sizing: border-box; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: var(--hc-space-7); } /* Desktop: the opening view owns the whole first screen, copy and scene centred in it (the subtraction is the sticky topbar's two rows). Mobile keeps its natural height, which reads better on small screens. */ @media (min-width: 960px) { .mk-hero { min-height: calc(100vh - 8.5rem); align-content: center; justify-content: center; } } .mk-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hc-space-4); } .mk-hero-eyebrow { display: inline-flex; align-items: center; gap: var(--hc-space-2); margin: 0; padding: 0.3em 0.85em; border-radius: var(--hc-radius-full); background: var(--hc-accent-soft); color: var(--hc-accent); font-size: var(--hc-font-size-sm); font-weight: 600; } .mk-hero-headline { margin: 0; font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--hc-text); } .mk-hero-sub { margin: 0; max-width: 34rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--hc-text-muted); line-height: var(--hc-line-height); } .mk-hero-actions { display: flex; gap: var(--hc-space-3); flex-wrap: wrap; } /* Oversized-but-sensible primary on the hero and CTA. */ .mk-btn-lg { font-size: var(--hc-font-size-lg); padding: var(--hc-space-3) var(--hc-space-5); min-height: 46px; } /* ---- The friendly brand scene (pig + house + bobbing motifs) ---- */ .mk-hero-scene { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 30rem; margin: 0 auto; justify-self: center; } /* A soft stage disc behind the scene. */ .mk-hero-scene::before { content: ""; position: absolute; inset: 8% 6% 4%; border-radius: 50%; background: radial-gradient(60% 60% at 50% 55%, color-mix(in srgb, var(--hc-blossom) 20%, transparent), color-mix(in srgb, var(--hc-sunshine) 10%, transparent) 60%, transparent 72%); } .mk-scene-house { position: absolute; left: 6%; bottom: 6%; width: 52%; color: var(--hc-accent); filter: drop-shadow(0 8px 18px rgba(22, 35, 58, 0.12)); } .mk-scene-pig { position: absolute; right: 2%; bottom: 2%; width: 58%; filter: drop-shadow(0 10px 20px rgba(22, 35, 58, 0.14)); } .mk-scene-motif { position: absolute; width: 20%; filter: drop-shadow(0 6px 12px rgba(22, 35, 58, 0.12)); } .mk-scene-motif--bill { top: 4%; left: 30%; --mk-tilt: -6deg; } .mk-scene-motif--warranty { top: 20%; right: 4%; width: 22%; --mk-tilt: 7deg; } .mk-scene-motif--key { top: 46%; left: 2%; width: 17%; --mk-tilt: -10deg; } /* ====================================================================== STORY: everything a home scatters, gathered Chips are a tidy readable group by default (the settled state). Under mk-motion they START scattered (per-chip transform) and settle on reveal. ====================================================================== */ /* ---------------------------------------------------------------------- HOME STORY: full-screen pinned phrase parade ---------------------------------------------------------------------- */ .mk-parade { position: relative; z-index: 1; } /* Default (no JS / reduced motion): a plain, centred, readable stack. No pin, no absolute slides, everything visible. This is the SEO and reduced-motion form: heading and intro first, the lines in order, the resolve last. */ .mk-parade-pin { max-width: 52rem; margin: 0 auto; padding: var(--hc-space-8) var(--hc-space-4); } .mk-parade-sticky { display: flex; flex-direction: column; align-items: center; gap: var(--hc-space-6); text-align: center; } .mk-parade-slide { margin: 0; width: 100%; } .mk-parade-intro h2 { margin: 0 0 var(--hc-space-4); font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--hc-text); } .mk-parade-intro p { margin: 0 auto; max-width: 42rem; font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--hc-text-muted); line-height: var(--hc-line-height); } .mk-parade-phrase { margin: 0; font-size: clamp(1.5rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--hc-text); text-align: center; } .mk-parade-phrase-line { display: flex; align-items: center; justify-content: center; gap: var(--hc-space-3); margin: 0; } .mk-parade-phrase i { color: var(--hc-accent); font-size: 0.85em; } /* The price of losing that scrap: small, quiet, and pointed. */ .mk-parade-cost { margin: var(--hc-space-3) 0 0; font-size: clamp(0.95rem, 1.6vw, 1.2rem); font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--hc-accent); } .mk-parade-cost--resolve { color: var(--hc-text-muted); font-weight: 500; } .mk-parade-final { display: flex; flex-direction: column; align-items: center; gap: var(--hc-space-4); } .mk-parade-hog { width: clamp(12rem, 26vw, 18rem); filter: drop-shadow(0 10px 20px rgba(22, 35, 58, 0.14)); } .mk-parade-resolve { margin: 0; font-size: clamp(1.6rem, 4.5vw, 3rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; } /* Pinned, full-screen form: motion only. The section grows tall (roughly one viewport of scroll per slide), the sticky wrapper pins for its length, and marketing.js fades/scales/drifts each slide through centre-screen as you scroll. The last slide holds because the reading position never passes it. */ html.mk-motion .mk-parade-pin { height: calc(var(--mk-slides, 7) * 80vh); max-width: none; margin: 0; padding: 0; } html.mk-motion .mk-parade-sticky { position: sticky; top: 0; height: 100vh; display: block; overflow: hidden; } /* A soft focal glow so the centred line has presence against the page. */ html.mk-motion .mk-parade-sticky::before { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 40% at 50% 46%, var(--hc-accent-soft), transparent 72%); pointer-events: none; } html.mk-motion .mk-parade-slide { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--hc-space-6) var(--hc-space-5); box-sizing: border-box; opacity: 0; will-change: opacity, transform; } /* The phrases get a touch more room to breathe when they own the whole screen. */ html.mk-motion .mk-parade-phrase { font-size: clamp(1.75rem, 5vw, 3.25rem); } html.mk-motion .mk-parade-resolve { font-size: clamp(1.9rem, 5.5vw, 3.5rem); } /* ====================================================================== FEATURES showcase: pinned horizontal scroll (motion) / scroll row (else) ====================================================================== */ .mk-showcase { position: relative; z-index: 1; /* Generous top breathing room so the heading clears the wave above it instead of crowding it. */ padding-top: clamp(3.5rem, 8vw, 6.5rem); } .mk-showcase .mk-section-head { padding: 0 var(--hc-space-4); } /* Default (no JS / reduced motion): a normal horizontally scrollable row with snap. Contained overflow, so it can never widen the page. */ .mk-showcase-viewport { margin-top: var(--hc-space-6); padding: var(--hc-space-2) var(--hc-space-4) var(--hc-space-6); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .mk-showcase-track { display: flex; gap: var(--hc-space-4); width: max-content; padding-bottom: var(--hc-space-2); } .mk-panel { scroll-snap-align: center; flex: 0 0 auto; width: min(20rem, 78vw); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--hc-space-3); padding: var(--hc-space-6); background: var(--hc-surface); border: 1px solid var(--hc-border-subtle); border-radius: var(--hc-radius-lg); box-shadow: var(--hc-shadow-sm); } .mk-panel-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--hc-radius); background: var(--hc-accent-soft); color: var(--hc-accent); font-size: 1.5rem; } .mk-panel h3 { margin: 0; font-size: var(--hc-font-size-xl); color: var(--hc-text); } .mk-panel p { margin: 0; color: var(--hc-text-muted); font-size: var(--hc-font-size-base); line-height: var(--hc-line-height); } /* Roomier panels on desktop so the showcase feels substantial, not cramped. */ @media (min-width: 960px) { .mk-panel { width: 25rem; padding: var(--hc-space-7); gap: var(--hc-space-4); } .mk-panel-icon { width: 3.5rem; height: 3.5rem; font-size: 1.75rem; } .mk-panel h3 { font-size: 1.5rem; } } .mk-showcase-hint { display: block; text-align: center; margin-top: var(--hc-space-2); font-size: var(--hc-font-size-sm); color: var(--hc-text-muted); } /* Pinned form: motion only. The section grows tall, the sticky wrapper pins for its length, and JS slides the track sideways as you scroll down it. */ html.mk-motion .mk-showcase-pin { height: calc(100vh + var(--mk-hspan, 0px)); } html.mk-motion .mk-showcase-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } html.mk-motion .mk-showcase-viewport { overflow: hidden; padding-top: var(--hc-space-4); padding-bottom: var(--hc-space-4); margin-top: 0; } html.mk-motion .mk-showcase-track { transform: translate3d(var(--mk-tx, 0px), 0, 0); will-change: transform; /* Generous, symmetric side room: the right padding is part of the track's width, so the travel distance includes it and the animation only stops once the last card rests with this margin after it, matching the space the first card starts with. */ padding-inline: clamp(3rem, 6vw, 6rem); } /* The scroll hint only makes sense in the scrollable form. */ html.mk-motion .mk-showcase-hint--scroll { display: none; } .mk-showcase-hint--pin { display: none; } html.mk-motion .mk-showcase-hint--pin { display: block; } /* ====================================================================== AUDIENCE: light, lively cards ====================================================================== */ .mk-audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--hc-space-4); margin-top: var(--hc-space-2); } .mk-aud { position: relative; display: flex; flex-direction: column; gap: var(--hc-space-3); padding: var(--hc-space-6); background: var(--hc-surface); border: 1px solid var(--hc-border-subtle); border-radius: var(--hc-radius-lg); box-shadow: var(--hc-shadow-sm); overflow: hidden; } .mk-aud-head { display: flex; align-items: center; gap: var(--hc-space-3); } .mk-aud-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: var(--hc-radius); background: var(--hc-accent-soft); color: var(--hc-accent); font-size: 1.25rem; flex: 0 0 auto; } .mk-aud h3 { margin: 0; font-size: var(--hc-font-size-xl); color: var(--hc-text); } .mk-aud > p { margin: 0; color: var(--hc-text-muted); line-height: var(--hc-line-height); } .mk-aud ul { margin: 0; padding-inline-start: var(--hc-space-5); display: flex; flex-direction: column; gap: var(--hc-space-2); font-size: var(--hc-font-size-base); line-height: var(--hc-line-height); } .mk-aud li::marker { color: var(--hc-accent); } /* A faint icon in the corner of each card, echoing the audience. */ .mk-aud-motif { position: absolute; right: -0.4rem; bottom: -0.8rem; font-size: 4.5rem; line-height: 1; color: var(--hc-accent); opacity: 0.08; pointer-events: none; } /* ====================================================================== CTA BAND ====================================================================== */ .mk-cta { position: relative; overflow: hidden; text-align: center; /* Full-bleed pink band: no width cap, no rounded card edges, so the colour runs the whole width and the wave above flows straight into it. The flex column centres every child, homehog included. */ max-width: none; /* Overlap the wave divider above by 1px so no hairline shows at the join. */ margin: -1px 0 0; padding: var(--hc-space-7) var(--hc-space-5); /* A roomy band with the whole group dead-centre vertically, so the space above the hog and below the button reads as equal. */ min-height: clamp(26rem, 62vh, 40rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--hc-space-4); background: var(--hc-accent-soft); border: none; border-radius: 0; box-sizing: border-box; } /* Glow that swells on entry (JS sets --mk-glow when motion allowed). */ .mk-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* Centred low and kept clear of the top edge so the band's top row stays flat accent-soft, matching the wave divider above it (no colour line at the join). */ background: radial-gradient(46% 44% at 50% 62%, color-mix(in srgb, var(--hc-accent) 30%, transparent), transparent 72%); opacity: var(--mk-glow, 0); transform: scale(calc(0.7 + var(--mk-glow, 0) * 0.5)); transition: opacity 0.25s linear; } .mk-cta > * { position: relative; z-index: 1; } .mk-cta-hog { width: clamp(13rem, 30vw, 20rem); /* Belt to the flex centring: the hog block sits dead centre of the band. */ margin-inline: auto; filter: drop-shadow(0 8px 16px rgba(22, 35, 58, 0.14)); } /* The homehog SVG has no intrinsic size, so left alone it overflows its wrapper (and drifts off-centre). Pin it to the box so it fills the wrapper exactly. */ .mk-cta-hog .hc-pig, .mk-parade-hog .hc-pig, .mk-scene-pig .hc-pig { width: 100%; /* The app pins .hc-pig to a fixed 200px height; the marketing pig is sized by width instead, so the wrapper must grow to the (square) svg or the pig overflows below its box and lands on the text underneath it. */ height: auto; } .mk-cta-hog svg, .mk-parade-hog svg, .mk-scene-pig svg { display: block; width: 100%; height: auto; } /* Its tail pads the right side, so the drawn content sits ~1.3% right of centre; nudge the artwork left by that much so it reads centred above the heading. */ .mk-cta-hog svg, .mk-parade-hog svg { transform: translateX(-1.3%); } /* CROP THE BOX TO THE PIG. The svg is a 300x300 square but the drawn pig only occupies roughly y 87-268 of it, so left alone the box carries a third of its height as invisible air and shoves the heading below it. The wrapper becomes the artwork's own aspect (300 wide by ~180 of drawn pig) and clips; the pig inside is pulled up by the blank top band. Percentage margins resolve against width, and the svg is square, so -29% of width removes 29% of the svg's height: the blank sky above the ears. */ .mk-cta-hog, .mk-parade-hog { aspect-ratio: 300 / 180; overflow: hidden; } .mk-cta-hog .hc-pig, .mk-parade-hog .hc-pig { margin-top: -29%; } /* pig.js ages the pig from the member's level and scales a level-1 baby right down, which would leave the marketing hog tiny inside its cropped box. These hogs are decorative brand characters, not the member's own pig, so pin them at full drawn size regardless of what the script sets inline. */ .mk-cta-hog [data-p$="Age"], .mk-parade-hog [data-p$="Age"], .mk-scene-pig [data-p$="Age"] { transform: none !important; } .mk-cta h2 { margin: 0; font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--hc-text); } .mk-cta p { margin: 0; max-width: 40rem; font-size: var(--hc-font-size-lg); color: var(--hc-text-muted); line-height: var(--hc-line-height); } /* ====================================================================== FEATURES PAGE: alternating reveal rows ====================================================================== */ .mk-features .mk-intro { position: relative; z-index: 1; text-align: center; max-width: 46rem; margin: 0 auto; padding: var(--hc-space-8) var(--hc-space-4) var(--hc-space-6); } .mk-features .mk-intro h1 { margin: 0 0 var(--hc-space-3); font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--hc-text); } .mk-features .mk-intro p { margin: 0; font-size: var(--hc-font-size-lg); color: var(--hc-text-muted); line-height: var(--hc-line-height); } .mk-areas { position: relative; z-index: 1; max-width: 64rem; margin: 0 auto; padding: var(--hc-space-4) var(--hc-space-4) var(--hc-space-8); display: flex; flex-direction: column; gap: var(--hc-space-7); } .mk-area { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hc-space-6); align-items: center; } .mk-area:nth-of-type(even) .mk-area-copy { order: 2; } .mk-area-head { display: flex; align-items: center; gap: var(--hc-space-3); margin-bottom: var(--hc-space-3); flex-wrap: wrap; } .mk-area-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: var(--hc-radius); background: var(--hc-accent-soft); color: var(--hc-accent); font-size: 1.35rem; flex: 0 0 auto; } .mk-area-head h2 { margin: 0; font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; color: var(--hc-text); } .mk-tag { font-size: var(--hc-font-size-xs); font-weight: 700; color: var(--hc-on-highlight); background: var(--hc-highlight-soft); border: 1px solid color-mix(in srgb, var(--hc-sunshine) 40%, transparent); border-radius: var(--hc-radius-full); padding: 0.2em 0.7em; } .mk-area-copy > p { margin: 0 0 var(--hc-space-3); color: var(--hc-text-muted); line-height: var(--hc-line-height); } .mk-area-copy ul { margin: 0; padding-inline-start: var(--hc-space-5); display: flex; flex-direction: column; gap: var(--hc-space-2); font-size: var(--hc-font-size-base); line-height: var(--hc-line-height); } .mk-area-copy li::marker { color: var(--hc-accent); } /* The art side: a soft tile carrying a big motif, instead of a flat box. */ .mk-area-art { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--hc-surface-sunken); border: 1px solid var(--hc-border-subtle); border-radius: var(--hc-radius-lg); overflow: hidden; } /* A real app capture, framed as a small browser window: title bar with three dots, then the screenshot. All shots share the same 16:10 capture ratio, so the cards line up identically down the page. */ .mk-area-shot { margin: 0; border: 1px solid var(--hc-border-subtle); border-radius: var(--hc-radius-lg); overflow: hidden; background: var(--hc-surface); box-shadow: var(--hc-shadow-md, 0 12px 32px rgba(22, 35, 58, 0.12)); } .mk-area-shot-bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--hc-surface-sunken); border-bottom: 1px solid var(--hc-border-subtle); } .mk-area-shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--hc-accent) 45%, var(--hc-border-subtle)); } .mk-area-shot img { display: block; width: 100%; height: auto; } .mk-area-art::before { content: ""; position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--hc-blossom) 16%, transparent), transparent 70%); } .mk-area-art .mk-motif { position: relative; width: 42%; color: var(--hc-accent); filter: drop-shadow(0 8px 16px rgba(22, 35, 58, 0.12)); } /* The feature's own icon, shown large on the art tile. */ .mk-area-art > i { position: relative; font-size: clamp(3rem, 8vw, 5rem); color: var(--hc-accent); filter: drop-shadow(0 8px 16px rgba(22, 35, 58, 0.12)); } /* A faint brand motif tucked in the corner of the art tile. */ .mk-area-art .mk-motif--corner { position: absolute; right: 8%; bottom: 8%; width: 22%; opacity: 0.35; filter: none; } /* Alternating slide-in for the areas (motion only). */ html.mk-motion .mk-area[data-reveal] { --reveal-scale: 1; } html.mk-motion .mk-area:nth-of-type(odd)[data-reveal] { transform: translateX(-40px); } html.mk-motion .mk-area:nth-of-type(even)[data-reveal] { transform: translateX(40px); } html.mk-motion .mk-area[data-reveal].is-in { transform: none; } /* ====================================================================== ABOUT PAGE: reading column with reveals and a homehog ====================================================================== */ .mk-about-wrap { position: relative; z-index: 1; max-width: 44rem; margin: 0 auto; padding: var(--hc-space-8) var(--hc-space-4); display: flex; flex-direction: column; gap: var(--hc-space-6); color: var(--hc-text); } .mk-about-intro { text-align: center; } .mk-about-hog { width: clamp(6rem, 16vw, 9rem); margin: 0 auto var(--hc-space-4); filter: drop-shadow(0 8px 16px rgba(22, 35, 58, 0.12)); } .mk-about-intro h1 { margin: 0 0 var(--hc-space-3); font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; } .mk-about-intro p { margin: 0; font-size: var(--hc-font-size-lg); color: var(--hc-text-muted); line-height: var(--hc-line-height); } .mk-about-section { position: relative; padding-left: var(--hc-space-5); } /* A small brand rule marking each belief. */ .mk-about-section::before { content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 4px; border-radius: var(--hc-radius-full); background: linear-gradient(var(--hc-accent), var(--hc-highlight)); } .mk-about-section h2 { margin: 0 0 var(--hc-space-3); font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; } .mk-about-section p { margin: 0 0 var(--hc-space-3); color: var(--hc-text-muted); line-height: var(--hc-line-height); } .mk-about-section p:last-child { margin-bottom: 0; } /* ====================================================================== RESPONSIVE ====================================================================== */ @media (max-width: 959px) { .mk-hero { grid-template-columns: 1fr; text-align: center; gap: var(--hc-space-5); } .mk-hero-copy { align-items: center; } .mk-hero-actions { justify-content: center; } .mk-hero-scene { max-width: 22rem; order: -1; } } @media (max-width: 639px) { .mk-audience-grid { grid-template-columns: 1fr; } .mk-area { grid-template-columns: 1fr; gap: var(--hc-space-4); } .mk-area:nth-of-type(even) .mk-area-copy { order: 0; } .mk-section { padding: var(--hc-space-7) var(--hc-space-4); } /* On mobile the parade lines read better with the icon stacked above the centred text, rather than inline where a long line crowds the icon. */ .mk-parade-phrase { flex-direction: column; text-align: center; gap: var(--hc-space-2); } } /* ====================================================================== REDUCED MOTION belt. The script never adds mk-motion here, so the motion rules above already do not apply. This refuses any residual movement and stops the decorative bob and blob drift. ====================================================================== */ @media (prefers-reduced-motion: reduce) { .mk-float { animation: none !important; } .mk-blob { transform: none !important; } html.js-on [data-reveal] { transition: opacity 0.4s ease !important; transform: none !important; } }