/* ---- primitives -------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;} /* Zero the UA default body margin — without this every full-bleed section (Navbar/Hero/CTA/Footer) is inset ~8px on each side, exposing the page tint as "spacing" beside the hero image. */ html,body{margin:0;} img{max-width:100%;} .ak-root{ margin:0; font-family:var(--site-font-body);color:var(--site-fg); background:var(--site-bg);background:var(--site-page-bg); line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } .ak-section{padding:clamp(2.25rem,4.5vw,3.5rem) var(--site-space-4);} .ak-container{width:100%;max-width:var(--site-maxw,1200px);margin:0 auto;} /* full-bleed alternating bands (applied to the section wrapper by the renderer) */ .ak-band--surface{background:var(--site-surface);} .ak-band--tint{background:var(--site-bg);background:var(--site-section-tint);} .ak-wrap--sticky{position:sticky;top:0;z-index:50;} /* ---- per-section style overrides (props.style) ------------------------- */ /* The renderer applies these to EVERY section's .ak-section-wrap, so any section can be restyled. Semantic values map to tokens; custom hex/named colours win. Navbar/Footer paint their own background, so they are re-coloured too. */ .ak-section-wrap[data-bg="surface"],.ak-section-wrap[data-bg="surface"] :is(.ak-navbar,.ak-footer){background:var(--site-surface);} .ak-section-wrap[data-bg="muted"],.ak-section-wrap[data-bg="muted"] :is(.ak-navbar,.ak-footer){background:var(--site-surface-muted);} .ak-section-wrap[data-bg="primary"],.ak-section-wrap[data-bg="primary"] :is(.ak-navbar,.ak-footer){background:var(--site-primary);} .ak-section-wrap[data-bg="dark"],.ak-section-wrap[data-bg="dark"] :is(.ak-navbar,.ak-footer){background:var(--site-surface-dark);} /* On brand/dark bands, light text for contrast. */ .ak-section-wrap[data-bg="primary"] :is(.ak-heading,h1,h2,h3,.ak-lead,p,li,a),.ak-section-wrap[data-bg="dark"] :is(.ak-heading,h1,h2,h3,.ak-lead,p,li,a){color:var(--site-on-dark);} /* Explicit tone overrides. */ .ak-section-wrap[data-title-tone="muted"] :is(.ak-heading,h1,h2,h3){color:var(--site-muted);} .ak-section-wrap[data-title-tone="inverted"] :is(.ak-heading,h1,h2,h3){color:var(--site-on-dark);} .ak-section-wrap[data-title-tone="accent"] :is(.ak-heading,h1,h2,h3){color:var(--site-accent);} .ak-section-wrap[data-title-tone="primary"] :is(.ak-heading,h1,h2,h3){color:var(--site-primary);} .ak-section-wrap[data-body-tone="muted"] :is(.ak-lead,p){color:var(--site-muted);} .ak-section-wrap[data-body-tone="inverted"] :is(.ak-lead,p){color:var(--site-on-dark);} .ak-section-wrap[data-body-tone="accent"] :is(.ak-lead,p){color:var(--site-accent);} .ak-section-wrap[data-body-tone="primary"] :is(.ak-lead,p){color:var(--site-primary);} /* Custom hex/named colours (inline --sec-* vars from the renderer) — win. */ .ak-section-wrap[data-custom-bg],.ak-section-wrap[data-custom-bg] :is(.ak-navbar,.ak-footer){background:var(--sec-bg)!important;} .ak-section-wrap[data-custom-title] :is(.ak-heading,h1,h2,h3){color:var(--sec-title)!important;} .ak-section-wrap[data-custom-body] :is(.ak-lead,p,li){color:var(--sec-body)!important;} .ak-section-wrap[data-custom-btn] :is(.ak-btn,button){background:var(--sec-btn)!important;border-color:var(--sec-btn)!important;} /* Alignment + density (best-effort on the wrapper). */ .ak-section-wrap[data-align="center"]{text-align:center;} .ak-section-wrap[data-density="compact"]{padding-block:0;} .ak-section-wrap[data-density="spacious"]{padding-block:clamp(.75rem,1.5vw,1.25rem);} /* ...EXCEPT where the section paints a full-bleed background scene. The wrap carries the band colour and the scene lives INSIDE the section, so this padding left a strip of the band showing above and below the artwork — a dark bar top and bottom that reads as a broken section rather than as rhythm. The scene has to meet its neighbours flush. "has()" is already used elsewhere in this file, so this needs no new markup. */ .ak-section-wrap[data-density="spacious"]:has(> [data-bg-art]){padding-block:0;} /* Screen-reader-only text: present for assistive tech and SEO, invisible and zero-size on screen. position:absolute is what makes it contribute no width, so a flex parent's gap leaves no phantom space beside it. */ .ak-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* ---- typography -------------------------------------------------------- */ .ak-eyebrow{ display:inline-flex;align-items:center;gap:.5rem; font-size:.78rem;letter-spacing:.12em;text-transform:uppercase; color:var(--site-primary);font-weight:700;margin:0 0 var(--site-space-3); } .ak-eyebrow::before{content:"";width:1.6rem;height:2px;border-radius:2px;background:var(--site-accent);} .ak-heading{ font-family:var(--site-font-heading);color:var(--site-heading);line-height:1.12; margin:0 0 var(--site-space-3);font-weight:800;letter-spacing:-.02em;text-wrap:balance; } .ak-h1{font-size:clamp(2.1rem,6vw,3.4rem);} /* Optional two-line headline (the Hero titleAccent prop). Both halves are block-level so the accent always starts its own line; neither rule matches a headline that has no accent line, so untouched sites render exactly as before. */ .ak-h1__line,.ak-h1__accent{display:block;} .ak-h1__accent{color:var(--site-accent);} .ak-h2{font-size:clamp(1.65rem,3.6vw,2.4rem);} .ak-lead{color:var(--site-muted);font-size:clamp(1rem,1.4vw,1.15rem);margin:0 0 var(--site-space-5);max-width:60ch;line-height:1.7;} /* ---- buttons ----------------------------------------------------------- */ .ak-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.85rem 1.5rem;border-radius:var(--site-radius-full); font-family:var(--site-font-body);font-weight:600;font-size:.98rem;line-height:1; text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap; transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease; } .ak-btn:focus-visible{outline:none;box-shadow:var(--site-focus-ring);} .ak-btn--primary{background:var(--site-primary);color:var(--site-primary-contrast);box-shadow:var(--site-shadow-sm);} .ak-btn--primary:hover{background:var(--site-primary-hover);} .ak-btn--accent{background:var(--site-accent);color:var(--site-accent-contrast);box-shadow:var(--site-shadow-sm);} .ak-btn--accent:hover{filter:brightness(.95);} .ak-btn--ghost{background:transparent;color:var(--site-primary);border-color:var(--site-border);} .ak-btn--ghost:hover{background:var(--site-primary-soft);border-color:var(--site-primary-light);} .ak-btn:hover{transform:translateY(-2px);box-shadow:var(--site-shadow-md);} .ak-btn:active{transform:translateY(0);} /* ---- motion: scroll reveal --------------------------------------------- */ /* * TWO MECHANISMS, each used for what it is actually good at. * * TIME-BASED (reveal) A block fades and rises over a fixed duration once it * has scrolled into a comfortable reading position. The * islands bundle's IntersectionObserver adds .ak-pre * (the hidden state) and later .is-revealed. * SCROLL-DRIVEN Hero parallax, the receding hero copy and the reading * (parallax/progress) progress bar. These are SUPPOSED to track the scrollbar * frame-by-frame, so animation-timeline is exactly right * and costs no main-thread work. * * WHY REVEAL IS NOT SCROLL-DRIVEN — this was tried and it felt broken. * A scroll timeline SCRUBS: progress is the scroll position, not elapsed time. * With animation-range in the "entry" range, the range's LENGTH is the element's * own height, so a ~60px FAQ row finished its whole animation within 60px of * scrolling — while it was still at the very bottom edge of the screen. By the * time a reader had scrolled it somewhere readable it had long since finished, * and the per-item stagger (a few percent of 60px ≈ 4px) was invisible. Reveal * has to be time-based to be seen at all. * * The tier scales INTENSITY, never presence. Tier 1 ships no client bundle at * all, so it uses the zero-JS scroll-driven reveal below: subtle by design, and * its "already finished" behaviour is unnoticeable at a 10px rise. * * Reveal targets are CONTENT BLOCKS (cards, columns, media wrappers) — never a * full-height section. * * Stagger uses --i. Components set it from the array index; the observer then * REBASES it against the first item of the same container to reveal, so a * cascade starts at zero wherever the reader entered the page instead of making * item 9 wait for nine slots that already animated offscreen — while items after * it keep their real spacing at any scroll speed. */ [data-reveal]{opacity:1;transform:none;} /* MOTION TOKENS — composed from two INDEPENDENT inputs, never one overwriting * the other. * * --ak-base-* the PRESET's character: how the motion feels. * --ak-tier-* the TIER's intensity multiplier: how much of it there is. * * Both used to be written straight to --ak-rise/--ak-dur/--ak-stagger. That is * one attribute selector each, both matching , so they had IDENTICAL * specificity and the preset block — which comes later in this sheet — silently * won every time. Since generation always assigns a preset (never "classic"), * the effect was that tier 1, 2 and 3 animated identically on every generated * site, and "modern-utility" at tier 3 moved LESS than "classic" at tier 1. * * Splitting the inputs makes the two compose instead of collide. Declaration * order stops mattering: a var() resolves against the element's own computed * value, so the preset's --ak-base-* further down this file is picked up by the * calc() here regardless of which rule was parsed first. * * THE BASE IS THE TIER-2 FIGURE, so tier 2 is a 1x multiplier straight through * and the other two read as "half of it" and "a bit more than it". * * These numbers came down by roughly half. The old base ran 1.3s over 28px with * a 135ms step and a 260ms lead, and presets pushed that to 1.55s / 200ms — so a * five-line section head spent 260 + 4x200 = ~1.06s before its last line even * STARTED, and each line then took another 1.55s. Content that arrives that * slowly does not read as "arriving"; it reads as drifting, and a reader * scrolling at any normal pace is past it before it settles. * * The lead is now 0. It existed to put a beat between "the section is on screen" * and "it starts moving", but the observer no longer fires the moment an edge * appears — it waits for the block to be 12% visible AND 80px past the fold, so * that beat is already spent in the trigger. Paying for it twice was most of * why the reveal felt late. * * tier 1 20px / 553ms / 60ms subtle, but a real stagger * tier 2 40px / 700ms / 80ms the reference cadence * tier 3 56px / 763ms / 88ms crisper, not slower — tier 3 buys MORE * motion (parallax, recede, counters), never * longer motion. */ :root{--ak-base-rise:40px;--ak-base-dur:700ms;--ak-base-stagger:80ms;--ak-base-lead:0ms;} /* HOW LONG EVERY ENTRANCE TAKES, as one dial. * * Each preset sets its own --ak-base-dur (Clean Conversion is brisk at 660ms, * Editorial Premium stately at 740ms) and each tier scales it again, so slowing * the page down by editing those would mean six edits and would flatten the * differences between them. This multiplies the result instead: every preset * and tier gets the same proportional slowdown and keeps its own character. * * Applied to the duration and the lead-in, NOT to the stagger: the gap between * items is what makes a row read as a cascade, and stretching it as well would * turn a four-card row into something the reader waits out. Longer overlapping * entrances is exactly the "slower" that was asked for. */ :root{--ak-motion-scale:1.35;} /* --ak-scale-from is how far a card shrinks before settling: gentle at tier 1 so the "calm" tier never pops, deeper at tier 3 where the movement is the point. It lives in the SAME block as the multipliers rather than a second rule with an identical selector — one selector, one place to read a tier. */ [data-motion-tier="1"]{--ak-tier-rise:.5;--ak-tier-dur:.79;--ak-tier-stagger:.75;--ak-scale-from:.97;} [data-motion-tier="2"]{--ak-tier-rise:1;--ak-tier-dur:1;--ak-tier-stagger:1;--ak-scale-from:.94;} [data-motion-tier="3"]{--ak-tier-rise:1.4;--ak-tier-dur:1.09;--ak-tier-stagger:1.1;--ak-scale-from:.92;} [data-motion-tier]{ --ak-rise:calc(var(--ak-base-rise,40px) * var(--ak-tier-rise,1)); --ak-dur:calc(var(--ak-base-dur,700ms) * var(--ak-tier-dur,1) * var(--ak-motion-scale,1)); --ak-stagger:calc(var(--ak-base-stagger,80ms) * var(--ak-tier-stagger,1)); --ak-lead:calc(var(--ak-base-lead,0ms) * var(--ak-tier-dur,1) * var(--ak-motion-scale,1)); } /* THE REVEAL CURVE. * * A strong expo-out: ~80% of the distance is covered in the first third of the * duration, then it settles. That launch-and-settle shape is what reads as * "designed" — the previous curve, cubic-bezier(.22,.61,.36,1), is a mild * ease-out that moves at a near-constant rate and lands flat, which is why the * old reveal felt like a generic fade no matter how long it ran. * * ONE curve for both properties. Opacity used to run on plain "ease" while the * transform ran on its own bezier, so the fade and the movement finished on * different schedules and the element appeared to arrive twice. * * A preset may override --ak-ease; nothing does today, and a preset that wants * a different character should reach for the base tokens first. */ :root{--ak-ease:cubic-bezier(.16,1,.3,1);} /* ONE keyframe for every entrance direction. * * There used to be two — ak-reveal (rise) and ak-reveal-media (zoom) — and a * hard-coded :is(.ak-hero__media,.ak-about__media,...) selector in this file * decided which an element got. That list was the single source of truth for * something the COMPONENT knows, so it went stale silently: a new media wrapper * got a rise, and .ak-hero__media sat in the list for a wrapper that carries no * data-reveal at all. Components now state the intent (data-motion) and this * keyframe reads it out of three custom properties. * * IT ANIMATES "translate" AND "scale", NOT THE "transform" SHORTHAND — the same * fix, for the same reason, as ak-hero-parallax below: these are independent * properties, so a card's :hover transform composes with the entrance instead * of one clobbering the other. */ @keyframes ak-reveal{ from{opacity:0;translate:var(--ak-mx,0px) var(--ak-my,0px);scale:var(--ak-mscale,1);} to{opacity:1;translate:0 0;scale:1;} } /* Hero entrance is transform-ONLY on purpose: an element at opacity 0 does not count as painted, so fading the headline would delay LCP. Sliding it does not. */ @keyframes ak-hero-in{from{translate:0 14px;}to{translate:0 0;}} /* The navbar drops in rather than rising: it lives at the top of the page, so arriving from above is the only direction that reads as the bar settling into place instead of scrolling up out of the content. */ @keyframes ak-navbar-in{from{opacity:0;translate:0 -100%;}to{opacity:1;translate:0 0;}} /* PARALLAX ANIMATES "translate", NOT "transform" — and that is the fix, not a style choice. Both of these used the transform SHORTHAND, and so did the hero photo's hover zoom. An animation outranks a normal declaration in the cascade, so at tier 3 the running parallax simply won and ".ak-hero--overlay:hover .ak-hero__bg" was dead: tiers 1 and 2 got the hover zoom, the paid tier lost it. "translate" and "scale" are INDEPENDENT properties. The parallax drives translate, the hover drives scale, and the browser composes them (individual properties resolve translate -> rotate -> scale, then any "transform"). No wrapper element, no DOM change, and nothing can clobber the other. */ @keyframes ak-hero-parallax{from{translate:0 -3%;}to{translate:0 7%;}} @keyframes ak-hero-recede{to{opacity:.35;translate:0 -8%;}} @keyframes ak-progress{from{transform:scaleX(0);}to{transform:scaleX(1);}} /* ── Time-based reveal (tier 2/3) ───────────────────────────────────────── */ /* .ak-pre is applied by the observer, and ONLY to elements that were still below the fold when it ran. Anything already on screen is left untouched at the visible base state, which removes both the flash-of-hidden and any risk of the LCP element starting at opacity 0. THE REVEAL IS AN ANIMATION, NOT A TRANSITION — and that is load-bearing. It used to be a transition, with transition-delay carrying the stagger. The problem is that "transition" is a property a PRESET also legitimately wants, for hover: frosted-glass sets transition:transform .35s,box-shadow .35s,background-color .35s on .ak-card, .ak-quote and .ak-faq details. That selector ([data-design-preset="x"] .ak-card) and this one ([data-reveal].ak-pre) have IDENTICAL specificity (0,2,0), and the preset block sits later in this sheet, so it won — silently replacing the reveal's transition and, because transition is a shorthand, resetting transition-delay to 0. On that preset product cards, testimonials and FAQ rows had no stagger at all and snapped from opacity 0 to 1 with no fade. Measured, not theorised. "animation" is a separate property, so the two no longer compete: the reveal owns animation, presets keep transition for hover, and neither can clobber the other. Raising this rule's specificity instead would have "fixed" it by destroying those hover transitions, since .ak-pre is never removed. */ /* ── Entrance variants ────────────────────────────────────────────────────── * Three properties describe every entrance, and the component picks them by * name with data-motion. Defaults live on the target itself so an element that * somehow has no variant still gets the plain rise rather than nothing. * * --ak-mx horizontal offset to start from * --ak-my vertical offset to start from * --ak-mscale scale to start from */ [data-reveal]{--ak-mx:0px;--ak-my:var(--ak-rise,40px);--ak-mscale:1;} /* Cards and quote grids settle out of a slight shrink instead of sliding. */ [data-reveal][data-motion="scale"]{--ak-my:0px;--ak-mscale:var(--ak-scale-from,.94);} /* Decorative media settles out of a slight ZOOM — the one variant that starts ABOVE 1. Product-card images are deliberately excluded from this: product photography must never move under a shopper. The class list is a COMPATIBILITY FALLBACK for kit 0.3.0 only, scoped to elements with no data-motion of their own so it can never fight the attribute. It exists so that if a component is missed in the migration its media keeps the entrance it has today instead of silently switching to a rise. Delete it once the preset x tier matrix has run clean; the unit test in sections.test.tsx asserts all three carry the attribute. */ [data-reveal][data-motion="media"], :is(.ak-about__media,.ak-gallery__item,.ak-flex__imagetext-media)[data-reveal]:not([data-motion]){ --ak-my:0px;--ak-mscale:1.045; } /* Directional entrances are a TIER 2+ effect: they are the loudest variant, and tier 1's brief is "subtle". Tier 1 simply never matches these, so its two-column sections fall through to the default rise — one contract, no per-tier markup, and nothing to keep in sync. */ [data-motion-tier="2"] [data-reveal][data-motion="left"], [data-motion-tier="3"] [data-reveal][data-motion="left"]{ --ak-mx:calc(-1 * var(--ak-rise,40px));--ak-my:0px; } [data-motion-tier="2"] [data-reveal][data-motion="right"], [data-motion-tier="3"] [data-reveal][data-motion="right"]{ --ak-mx:var(--ak-rise,40px);--ak-my:0px; } /* The hidden state. Uses the same three properties as the keyframe, and the same independent translate/scale rather than the transform shorthand, so a preset's hover transform is never clobbered while an element waits its turn. */ [data-reveal].ak-pre{ opacity:0; translate:var(--ak-mx,0px) var(--ak-my,0px); scale:var(--ak-mscale,1); } /* The "both" fill is what holds the hidden state through the stagger delay and the settled state after — without it an item would flash visible before its turn, which is the whole point of a stagger. */ [data-reveal].ak-pre.is-revealed{ animation:ak-reveal var(--ak-dur,700ms) var(--ak-ease,ease) calc(var(--ak-lead,0ms) + var(--i,0) * var(--ak-stagger,0ms)) both; } /* ── Scroll-driven: only where scrubbing is the point ───────────────────── */ /* * OPT-IN FLAGS, declared OUTSIDE the @supports block on purpose. * * Everything scroll-driven lives behind the animation-timeline support gate * below with no fallback, so on an engine without it a tier-3 site silently rendered * as tier 2: no parallax, no receding hero, no progress bar. The paid tier * bought nothing there. * * The JavaScript fallback (initScrollDriven, motion/index.ts) fills that in, but * it must not re-derive WHICH elements should scroll-drive — that decision is * full of context only CSS knows: the tier, the preset, the viewport, whether * this hero is the framed variant. So CSS states the decision as a custom * property and the fallback just reads it. Same pattern as "--ak-masonry" and * "--ak-shader-color". * * 1 = drive this element. 0 (or unset) = leave it alone. */ [data-motion-tier="3"] .ak-hero__bg:is(img,video){--ak-parallax:1;} [data-motion-tier="3"] .ak-hero__content{--ak-recede:1;} [data-motion-tier="2"] .ak-navbar__progress, [data-motion-tier="3"] .ak-navbar__progress{--ak-progress:1;} /* Stat numbers count up to themselves (tier 2+). The COMPONENT says which elements can count, with data-counter; this only says whether the tier runs them. Keyed to the attribute and never to a component class, so a new section gets counters by asking for them rather than by someone remembering to extend a selector in here. */ [data-motion-tier="2"] [data-counter], [data-motion-tier="3"] [data-counter]{--ak-counters:1;} /* Preset exemptions, mirrored onto the flags so the JS fallback honours them too. Clearing only the "animation" inside @supports would have fixed the native path and left the fallback free to reintroduce the exact defect. */ @media (min-width:880px){ [data-motion-tier="3"][data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) .ak-hero__bg{--ak-parallax:0;} } /* Presets that hide the bar entirely have nothing to drive. */ [data-design-preset="expedition"] .ak-navbar__progress, [data-design-preset="warm-local"] .ak-navbar__progress, [data-design-preset="frosted-glass"] .ak-navbar__progress{--ak-progress:0;} /* The tier-1 CSS-only reveal that used to live at the top of the @supports block below is GONE, and its absence is the point. It existed because tier 1 shipped no JavaScript, so it drove the reveal from a scroll timeline instead. A scroll timeline SCRUBS: its progress is scroll position, so animation-delay does not apply to it at all. Tier 1 therefore could not stagger — every element in a section moved on exactly the same schedule, which is most of why a tier-1 site read as "it all appears at once". Tier 1 now loads the same observer as tiers 2 and 3 (see needsClient in render.cjs) and gets a real, time-based, staggered reveal; the tier scales how much motion there is, never whether the stagger exists. Scroll timelines remain below for the effects that genuinely ARE scrubbed — parallax, the receding hero, the reading-progress bar. */ @supports (animation-timeline: view()){ /* T3 hero: the photo drifts slower than the page and the copy recedes as the reader scrolls past. Keyed to the ROOT scroller so they track the page. */ /* Scoped to img/video: a YouTube/Vimeo iframe centres itself with a "transform", and it is sized to overflow the band already — drifting it serves nothing and risks exposing an edge. */ [data-motion-tier="3"] .ak-hero__bg:is(img,video){ animation:ak-hero-parallax linear both; animation-timeline:scroll(root); animation-range:0 100vh; } [data-motion-tier="3"] .ak-hero__content{ animation:ak-hero-recede linear both; animation-timeline:scroll(root); animation-range:0 90vh; } /* EXCEPTION — modern-utility's framed desktop hero. Every other preset keeps .ak-hero__bg as a full-bleed layer behind the copy, where a drifting, 12%-oversized photo is exactly the intent. At >=1024px this preset instead makes it a NORMAL grid item in column two (see the :has() block further down), and parallax on a laid-out image is not a background effect any more: the translate walks it out of vertical alignment with the text column beside it and the scale pushes it past its own cell. The tier-3 signal here is the reading-progress bar, which this preset keeps and even restyles. Scoped to the same width and the same :has() shape as the layout it protects, so the mobile hero — still full-bleed — keeps its parallax. */ @media (min-width:880px){ [data-motion-tier="3"][data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) .ak-hero__bg{ animation:none; } } /* Reading-progress bar under the navbar (T2+). Zero JS, zero scroll listener. */ [data-motion-tier="2"] .ak-navbar__progress, [data-motion-tier="3"] .ak-navbar__progress{ animation:ak-progress linear both; animation-timeline:scroll(root); } } /* Hero copy entrance — load-triggered (the hero is already in view, so a scroll timeline would resolve it instantly, and the scroll observer skips it for the same reason). Transform-only; see above. EVERY TIER, not just 2 and 3. This was gated to the paid tiers, so a tier-1 hero — the first thing every visitor sees on the most common tier — had no entrance whatsoever while the sections below it moved. The tier still scales the distance and the step through --ak-rise/--ak-stagger. */ .ak-hero__content > [data-hero-in]{ animation:ak-hero-in var(--ak-dur,700ms) cubic-bezier(.22,.61,.36,1) both; animation-delay:calc(var(--i,0) * var(--ak-stagger,0ms)); } /* Navbar entrance — load-triggered for the same reason as the hero copy: it is above the fold on every page, so there is no scroll event to wait for. It drops from above (see ak-navbar-in) and runs SHORTER than the body reveal: the bar carries the brand and the primary nav, so it should be settled before the reader starts reading, not still arriving. */ .ak-navbar[data-navbar-in]{ animation:ak-navbar-in calc(var(--ak-dur,700ms) * .85) var(--ak-ease,ease) both; } .ak-navbar__progress{ position:absolute;left:0;right:0;bottom:-1px;height:2px;transform:scaleX(0); transform-origin:0 50%;background:var(--site-primary);pointer-events:none; } /* ── Anchor navigation ────────────────────────────────────────────────────── * Two things every in-page nav link needs, and neither was here. * * scroll-behavior: a navbar link used to JUMP. Nothing in this sheet asked for * smooth scrolling except the reduced-motion reset that turns it back off, so * the reset was guarding a behaviour that never existed. * * scroll-margin-top: the navbar is position:sticky, so an anchor scrolls its * target flush to the viewport top and the sticky bar then covers the heading. * The offset is the bar's own height plus a breathing gap. --ak-nav-h/--ak-nav-gap * are declared by the presets with a fixed-height navbar and inherit down to the * section; the fallbacks cover the presets that size the bar from its content. * * :where() keeps the specificity at the [id] alone, so a preset can still * override the offset with a plain class selector. */ html{scroll-behavior:smooth;} :where(.ak-section,.ak-hero,.ak-navbar,.ak-footer)[id]{ scroll-margin-top:calc(var(--ak-nav-h,68px) + var(--ak-nav-gap,0px) + 1rem); } /* EVERY "show it anyway" GUARD BELOW MUST RESET translate AND scale, NOT JUST transform. The hidden state moved off the transform shorthand onto the independent translate/scale properties (so hover transforms compose with the entrance instead of fighting it). "transform:none" does not touch either of them, so a guard that only resets transform now un-hides an element and leaves it sitting 40px low, or shrunk to .94 — visible, but in the wrong place. Resetting all three is what keeps these guards honest. */ /* The editor sets data-ak-editing on while a section is selected: a half-revealed block is miserable to edit, and the preview must show the real content, not a mid-animation frame. */ [data-ak-editing] [data-reveal], [data-ak-editing] [data-reveal].ak-pre, [data-ak-editing] .ak-hero__content > [data-hero-in], [data-ak-editing] .ak-navbar[data-navbar-in]{ animation:none!important;opacity:1!important; transform:none!important;translate:none!important;scale:none!important; } @media (prefers-reduced-motion: reduce){ /* Covers BOTH mechanisms. opacity MUST be !important here: .ak-pre sets opacity:0 at a higher specificity, so a plain opacity:1 would lose and a reader who turns reduced-motion on AFTER load would be left staring at permanently invisible blocks. */ [data-reveal],[data-reveal].ak-pre,.ak-hero__content > [data-hero-in], .ak-navbar[data-navbar-in], .ak-hero__bg,.ak-hero__content,.ak-navbar__progress{ animation:none!important;opacity:1!important;transition:none!important; transform:none!important;translate:none!important;scale:none!important; } .ak-btn:hover,.ak-card:hover{transform:none;} *{scroll-behavior:auto!important;} } @media print{ /* A reveal that never fired must not blank the page on paper. */ [data-reveal],.ak-hero__content > [data-hero-in],.ak-navbar[data-navbar-in]{ animation:none!important;opacity:1!important; transform:none!important;translate:none!important;scale:none!important; } .ak-navbar__progress{display:none;} } /* ---- navbar ------------------------------------------------------------ */ .ak-navbar{ /* Positioned so the reading-progress bar and the mobile drawer both resolve against the navbar itself. Geometrically identical to the sticky wrapper they used to resolve against, so the drawer is unaffected. */ position:relative; display:flex;align-items:center;justify-content:space-between;gap:var(--site-space-4); padding:1.15rem clamp(1rem,4vw,2rem); background:var(--site-surface); background:color-mix(in srgb, var(--site-surface) 82%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid transparent;transition:box-shadow .25s ease,background-color .25s ease,border-color .25s ease; } .ak-navbar.is-scrolled{ background:var(--site-surface); background:color-mix(in srgb, var(--site-surface) 94%, transparent); border-bottom-color:var(--site-border);box-shadow:var(--site-shadow-sm); } .ak-navbar__brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--site-font-heading); font-weight:800;font-size:1.2rem;letter-spacing:-.01em;color:var(--site-fg);text-decoration:none;} /* Height-constrained, never forced into a square: width:auto + object-fit:contain with no aspect-ratio lets the mark keep its own proportions, and the generated PNG is already cropped to its bounding box. No border-radius — a radius reads as a rounded card behind the mark, which is exactly the boxed look a transparent logo is meant to avoid. */ .ak-navbar__brand img{height:clamp(40px,5vw,52px);width:auto;max-width:240px;object-fit:contain;display:block;} /* ---- A GENERATED LOCKUP (symbol + wordmark in one image) ---------------- */ /* Sized separately from a customer's own mark, and only ever ADDITIVE: the attribute is absent on every uploaded and CRM logo, so those headers keep the rule above byte-for-byte. Two differences that matter. A lockup is wide — around 4:1 — so the 240px cap above would shrink it until the wordmark was unreadable; it gets a width cap that scales with the viewport instead. And it is sized by HEIGHT with width:auto (inherited), so the composed proportions are never stretched. 'min()' against the viewport is what keeps a long business name from pushing the links off a phone. */ .ak-navbar__brand[data-logo-kind="lockup"] img{ height:clamp(38px,4.4vw,54px); max-width:min(56vw,360px); } @media (max-width:640px){ .ak-navbar__brand[data-logo-kind="lockup"] img{ height:clamp(32px,8vw,40px);max-width:min(52vw,240px); } } /* ---- WHICH INK: the bar decides ------------------------------------------- A generated lockup ships in two inks, dark type and light type, and the header shows whichever its own bar can carry. That choice cannot be made where the image is written — a preset paints its own navbar, and two of them paint it differently over a hero or once scrolled — so both are in the DOM and this is where the decision lives. Paper is the default, so the dark-ink one shows and the light-ink one is hidden. A preset flips the pair only where its bar is genuinely dark. The rules below are the complete list; every other preset paints a light bar (expedition #f3f4f1, clean-conversion #f2f7fd, warm-local cream, modern-utility white-when-scrolled, frosted-glass glass on a light page). */ /* Every selector here carries '.ak-navbar__brand img' — NOT the modifier alone. The base rule above is '.ak-navbar__brand img{...display:block}' at (0,1,1), and a bare '.ak-navbar__logo--on-dark' is (0,1,0): it loses, and BOTH inks render. Caught in a screenshot, not by a rule that looked right. */ .ak-navbar__brand img.ak-navbar__logo--on-dark{display:none;} /* editorial-premium: the bar is ink at rest AND scrolled. */ [data-design-preset="editorial-premium"] .ak-navbar__brand img.ak-navbar__logo--on-light{display:none;} [data-design-preset="editorial-premium"] .ak-navbar__brand img.ak-navbar__logo--on-dark{display:block;} /* expedition: paper normally, but NO BAR AT ALL over a full-bleed hero before any scroll — the logo is then sitting on the photograph. Same guard and same selector as the rule that turns its brand text white, so the two can never disagree. */ @supports selector(:has(*)){ [data-design-preset="expedition"] .ak-wrap--sticky:has(+ .ak-section-wrap .ak-hero--overlay) .ak-navbar:not(.is-scrolled) img.ak-navbar__logo--on-light{ display:none; } [data-design-preset="expedition"] .ak-wrap--sticky:has(+ .ak-section-wrap .ak-hero--overlay) .ak-navbar:not(.is-scrolled) img.ak-navbar__logo--on-dark{ display:block; } } /* WORDMARK — the brand name when there is no logo image. Not navbar text with a bigger font: a deliberate text logo. It follows --site-font-wordmark (the preset's own brand face, or a dedicated one the site picked, otherwise the heading font), so changing the site typography restyles it automatically. The five knobs below are the whole vocabulary of a wordmark identity — face, weight, tracking, case, slant — and every preset sets them to something of its own further down. They are custom properties rather than per-preset overrides of the rule so that ONE declaration per preset also reaches the footer's brand name, and so a preset's identity reads as a single block. No gradients, shadows or decoration: a wordmark is type, not an effect. --ak-wordmark-slant must be "italic" or "normal" — NOT "oblique ". The catalogue ships upright files only, so any slant has to be synthesised, and Blink only synthesises for the "italic" keyword: an explicit "oblique 10deg" against a face whose @font-face says font-style:normal is silently ignored and renders bolt upright. Declaring an oblique RANGE on the face makes it worse, not better — the face then claims to cover the angle, so nothing is synthesised and even "italic" comes out upright. Measured in Chromium against these exact woff2 files; the same reason the kit's other slanted type (editorial-premium's pull quotes) uses the keyword too. The trade is that the angle is the engine's (~14deg), not ours. The FALLBACKS below are not neutral placeholders — they are the "classic" preset's own wordmark identity, because classic is by definition the unscoped stylesheet and may carry no scoped rules of its own. It is a large, heavy, tightly-tracked slanted caps mark in the condensed display face. Every other preset replaces all five knobs on its own scope. */ .ak-navbar__wordmark{font-family:var(--site-font-wordmark,var(--site-font-heading)); font-size:var(--ak-wordmark-size,clamp(1.15rem,2.5vw,2.4rem)); font-weight:var(--ak-wordmark-weight,700); font-style:var(--ak-wordmark-slant,italic); letter-spacing:var(--ak-wordmark-tracking,.01em); text-transform:var(--ak-wordmark-case,uppercase); line-height:1;white-space:nowrap;color:var(--site-heading); font-feature-settings:"kern" 1,"liga" 1;-webkit-font-smoothing:antialiased;} .ak-navbar__check{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;} .ak-navbar__nav{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem);} .ak-navbar__links{display:flex;list-style:none;margin:0;padding:0;gap:clamp(1rem,2.2vw,1.9rem);} .ak-navbar__links a{color:var(--site-fg-soft);text-decoration:none;font-weight:500;font-size:.98rem;position:relative;padding:.25rem 0;transition:color .18s ease;} .ak-navbar__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;border-radius:2px;background:var(--site-primary);transition:right .22s ease;} .ak-navbar__links a:hover{color:var(--site-primary);} .ak-navbar__links a:hover::after{right:0;} /* Scroll-spy ACTIVE state (JS sets aria-current on the in-view section's link): the same underline + brand colour as hover, but PERSISTENT so the current section is always visible in the nav. */ .ak-navbar__links a[aria-current="true"]{color:var(--site-primary);font-weight:600;} .ak-navbar__links a[aria-current="true"]::after{right:0;} .ak-navbar__cta{padding:.65rem 1.25rem;font-size:.92rem;} .ak-navbar__toggle{display:none;align-items:center;justify-content:center;background:none;border:1px solid var(--site-border); border-radius:var(--site-radius-md);padding:.5rem;cursor:pointer;color:var(--site-fg);width:44px;height:44px;} .ak-navbar__toggle .ak-i-close{display:none;} .ak-navbar__check:focus-visible ~ .ak-navbar__toggle{box-shadow:var(--site-focus-ring);} /* ---- hero -------------------------------------------------------------- */ .ak-hero{position:relative;display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;grid-template-columns:1fr; padding:clamp(3rem,7vw,6rem) clamp(1rem,4vw,2rem); background:var(--site-primary-soft);overflow:hidden;} .ak-hero__content{max-width:640px;position:relative;z-index:2;} .ak-hero__media{position:relative;overflow:hidden;border-radius:var(--site-radius-xl);box-shadow:var(--site-shadow-lg);} .ak-hero__media img,.ak-hero__media video,.ak-hero__media iframe{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:center; border-radius:var(--site-radius-xl);display:block;border:0; transition:transform .5s cubic-bezier(.22,.61,.36,1);} .ak-hero__media:hover img,.ak-hero__media:hover video{transform:scale(1.03);} .ak-hero__actions{display:flex;flex-wrap:wrap;gap:var(--site-space-3);margin-top:var(--site-space-2);} .ak-hero--overlay{grid-template-columns:1fr;min-height:100vh;min-height:100svh;align-items:center; color:#fff;background-color:var(--site-primary-strong);} /* Full-bleed hero photo layer (real , z0). object-fit:cover; zooms gently on hover — the same motion as the About/Gallery images. .ak-hero{overflow:hidden} clips the zoom. */ .ak-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; z-index:0;display:block;border:0; /* "scale", not "transform": the hover zoom has to stay on a property the tier-3 parallax animation does not touch, or the animation outranks it and the zoom silently dies at tier 3. See @keyframes ak-hero-parallax. */ transition:scale .6s cubic-bezier(.22,.61,.36,1);} /* A background-video iframe (YouTube/Vimeo) can't object-fit; scale it up so it always covers the hero without letterboxing. */ iframe.ak-hero__bg{width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh; left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;} .ak-hero--overlay:hover img.ak-hero__bg,.ak-hero--overlay:hover video.ak-hero__bg{scale:1.045;} /* Tier 3 keeps a standing overscan so the parallax drift never exposes an edge; hover then multiplies it rather than replacing it. Declared OUTSIDE the @supports block below so the JavaScript fallback inherits the same geometry. */ [data-motion-tier="3"] .ak-hero__bg:is(img,video){scale:1.12;} [data-motion-tier="3"] .ak-hero--overlay:hover :is(img,video).ak-hero__bg{scale:1.17;} /* Overlay scrim (z1, above the photo). A LIGHT directional dark on the text side that fades to FULLY CLEAR on the right, so the photo stays crisp and HD (no dull full-image wash), PLUS a brand bottom scrim matching About/Gallery. Text sits at z2; a text-shadow adds legibility over the lighter areas. Tier-scaled. */ .ak-hero--overlay::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;} [data-motion-tier="1"] .ak-hero--overlay::before{ background:linear-gradient(90deg, rgba(8,10,18,.64) 0%, rgba(8,10,18,.34) 44%, rgba(8,10,18,0) 74%);} [data-motion-tier="2"] .ak-hero--overlay::before{ background:linear-gradient(90deg, rgba(8,10,18,.6) 0%, rgba(8,10,18,.3) 44%, rgba(8,10,18,0) 74%), linear-gradient(to top, rgba(var(--site-primary-rgb),.34) 0%, rgba(var(--site-primary-rgb),.12) 24%, rgba(var(--site-primary-rgb),0) 52%);} [data-motion-tier="3"] .ak-hero--overlay::before{ background:linear-gradient(90deg, rgba(8,10,18,.62) 0%, rgba(8,10,18,.32) 44%, rgba(8,10,18,0) 74%), linear-gradient(to top, rgba(var(--site-primary-rgb),.5) 0%, rgba(var(--site-primary-rgb),.2) 24%, rgba(var(--site-primary-rgb),0) 52%);} .ak-hero--overlay .ak-heading,.ak-hero--overlay .ak-lead{color:#fff;} .ak-hero--overlay .ak-heading{text-shadow:0 2px 20px rgba(0,0,0,.4);} .ak-hero--overlay .ak-lead{color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.34);} .ak-hero--overlay .ak-eyebrow{color:#fff;background:rgba(255,255,255,.16);padding:.4rem .8rem;border-radius:var(--site-radius-full);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);} .ak-hero--overlay .ak-eyebrow::before{display:none;} /* Ghost secondary CTA must stay legible on the dark hero photo. */ .ak-hero--overlay .ak-btn--ghost{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.1);} .ak-hero--overlay .ak-btn--ghost:hover{background:rgba(255,255,255,.18);border-color:#fff;} /* ---- section head (shared) --------------------------------------------- */ .ak-section__head{max-width:60ch;margin-bottom:var(--site-space-5);} /* ---- product / activity grid ------------------------------------------- */ .ak-product-grid__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,2.5vw,1.75rem);margin-top:var(--site-space-6);list-style:none;padding:0;} /* Section header carrying a "View all" action: title block left, button right, pinned to the section title's baseline. Stacks on narrow screens. */ .ak-product-grid__head{max-width:none;display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap;} .ak-product-grid__headtext{max-width:60ch;} .ak-product-grid__viewall{flex:none;gap:.6rem;} .ak-product-grid__count{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 .45rem;border-radius:999px;background:var(--site-primary-soft);color:var(--site-primary);font-size:.8125rem;font-weight:700;} .ak-card{background:var(--site-surface);border:1px solid var(--site-border);border-radius:var(--site-radius-lg); overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--site-shadow-sm); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;} .ak-card:hover{transform:translateY(-4px);box-shadow:var(--site-shadow-lg);border-color:var(--site-primary-light);} .ak-card__media{position:relative;overflow:hidden;} .ak-card__media img,.ak-card>img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s ease;} .ak-card:hover .ak-card__media img{transform:scale(1.04);} .ak-card__badge{position:absolute;top:.75rem;left:.75rem;background:color-mix(in srgb,var(--site-surface) 90%,transparent); color:var(--site-primary);font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase; padding:.32rem .7rem;border-radius:var(--site-radius-full);box-shadow:var(--site-shadow-sm);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);} .ak-card__body{padding:var(--site-space-5);display:flex;flex-direction:column;gap:.6rem;flex:1;} .ak-card__title{font-family:var(--site-font-heading);font-weight:700;font-size:1.15rem;margin:0;letter-spacing:-.01em;line-height:1.3;} .ak-card__desc{color:var(--site-muted);font-size:.94rem;margin:0;line-height:1.6;} .ak-card__metarow{display:flex;flex-wrap:wrap;gap:.35rem .9rem;color:var(--site-muted);font-size:.85rem;margin:.1rem 0 .2rem;} .ak-card__metarow span{display:inline-flex;align-items:center;gap:.35rem;} .ak-card__meta{color:var(--site-muted);font-size:.88rem;margin:0;} /* Layout-neutral by construction: display:contents means the price row and the button are laid out by .ak-card__body exactly as they were before this wrapper existed, so no preset that predates it can drift. */ .ak-card__foot{display:contents;} .ak-card__footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:auto;padding-top:.4rem;} .ak-card__price{color:var(--site-fg);font-weight:800;font-family:var(--site-font-heading);font-size:1.05rem;} .ak-card__price small{color:var(--site-muted);font-weight:500;font-size:.78rem;} .ak-card__avail{font-size:.74rem;font-weight:700;padding:.28rem .6rem;border-radius:var(--site-radius-full); color:#14733a;background:#e7f7ec;} .ak-card__avail--out{color:#8a1c1c;background:#fbeaea;} .ak-card .ak-btn{width:100%;margin-top:.4rem;} /* ---- booking widget ---------------------------------------------------- */ .ak-booking{background:var(--site-surface);border:1px solid var(--site-border);border-radius:var(--site-radius-lg); padding:clamp(1.5rem,3vw,2rem);max-width:520px;margin-inline:auto;box-shadow:var(--site-shadow-md);} .ak-booking .ak-eyebrow{margin-bottom:.4rem;} .ak-booking__price{font-family:var(--site-font-heading);font-size:2rem;font-weight:800;color:var(--site-fg);margin:.2rem 0 var(--site-space-5);letter-spacing:-.02em;} .ak-booking__price small{font-size:.85rem;font-weight:500;color:var(--site-muted);margin-left:.5rem;} .ak-field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:var(--site-space-4);} .ak-field label{font-weight:600;font-size:.88rem;color:var(--site-fg-soft);} .ak-field select,.ak-field input,.ak-contact textarea{padding:.8rem .9rem;border:1px solid var(--site-border); border-radius:var(--site-radius-md);font:inherit;background:var(--site-surface);color:var(--site-fg);width:100%; transition:border-color .16s ease,box-shadow .16s ease;} .ak-field select:focus,.ak-field input:focus,.ak-contact textarea:focus{outline:none;border-color:var(--site-primary);box-shadow:var(--site-focus-ring);} .ak-booking__options{list-style:none;margin:0 0 var(--site-space-4);padding:0;display:flex;flex-direction:column;gap:.6rem;} .ak-booking__options label{display:flex;align-items:center;gap:.6rem;font-size:.95rem;} .ak-booking__result{border-radius:var(--site-radius-md);padding:var(--site-space-4);background:#e7f7ec;color:#14512a;} .ak-booking__result h3{margin:0 0 .3rem;} .ak-booking__soldout,.ak-booking__error{color:#8a1c1c;font-weight:600;font-size:.9rem;} .ak-booking__hint{color:var(--site-primary);font-weight:600;font-size:.9rem;} /* ---- booking: pill controls + attendee circles ------------------------ */ .ak-pills{display:flex;flex-wrap:wrap;gap:.55rem;} .ak-pill{border:1.5px solid var(--site-border);background:var(--site-surface);color:var(--site-fg); padding:.6rem 1.1rem;border-radius:var(--site-radius-full);font:inherit;font-size:.9rem;font-weight:600; cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease;} .ak-pill:hover{border-color:var(--site-fg);} .ak-pill[aria-pressed="true"]{background:var(--site-fg);border-color:var(--site-fg);color:var(--site-surface);} .ak-pill:focus-visible{outline:none;box-shadow:var(--site-focus-ring);} .ak-nums{display:flex;flex-wrap:wrap;gap:.55rem;} .ak-num{width:2.9rem;height:2.9rem;border-radius:var(--site-radius-full);border:1.5px solid var(--site-border); background:var(--site-surface);color:var(--site-fg);font:inherit;font-weight:700;cursor:pointer; font-variant-numeric:tabular-nums;transition:border-color .15s ease,background .15s ease,color .15s ease;} .ak-num:hover{border-color:var(--site-fg);} .ak-num[aria-pressed="true"]{background:var(--site-fg);border-color:var(--site-fg);color:var(--site-surface);} .ak-num:focus-visible{outline:none;box-shadow:var(--site-focus-ring);} /* ---- booking: image + form modal (progressive enhancement) ------------ */ .ak-book-trigger{display:flex;justify-content:center;margin:var(--site-space-4) 0;} .ak-book{max-width:1180px;margin-inline:auto;} .ak-book__backdrop{display:none;} .ak-book__dialog{display:grid;grid-template-columns:.82fr 1.18fr;background:var(--site-surface); border:1px solid var(--site-border);border-radius:var(--site-radius-xl);overflow:hidden;box-shadow:var(--site-shadow-lg);} .ak-book__dialog--noimg{grid-template-columns:1fr;} /* The three-step sheet: no picture rail, so the dialog is a single column and the two step columns live inside the body where they can be told to stack. */ .ak-book__dialog--steps{grid-template-columns:1fr;} .ak-book__media{position:relative;overflow:hidden;background:var(--site-section-tint);min-height:16rem;} .ak-book__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;} .ak-book__form{display:flex;flex-direction:column;min-height:0;} .ak-book__head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem; padding:clamp(1.1rem,2.4vw,1.5rem);border-bottom:1px solid var(--site-border);} .ak-book__head .ak-eyebrow{margin-bottom:.35rem;} .ak-book__head .ak-h2{font-size:clamp(1.25rem,2.6vw,1.6rem);margin:0;} .ak-book__head .ak-booking__price{font-size:1.5rem;margin:.4rem 0 0;} .ak-book__close{flex:none;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:var(--site-radius-full); border:1px solid var(--site-border);background:var(--site-surface);color:var(--site-fg);font-size:1rem;line-height:1; cursor:pointer;transition:background .15s ease,color .15s ease;} .ak-book__close:hover{background:var(--site-fg);color:var(--site-surface);border-color:var(--site-fg);} .ak-book__close:focus-visible{outline:none;box-shadow:var(--site-focus-ring);} .ak-book:not(.ak-book--modal) .ak-book__close{display:none;} .ak-book__body{padding:clamp(1.1rem,2.4vw,1.5rem);display:flex;flex-direction:column;gap:var(--site-space-4);} .ak-book__body .ak-field{margin-bottom:0;} .ak-book--modal:not(.ak-book--open){display:none;} .ak-book--modal.ak-book--open{position:fixed;inset:0;z-index:1000;max-width:none;margin:0;display:flex; align-items:center;justify-content:center;padding:clamp(.75rem,3vw,2.5rem);} /* MODAL ENTRANCE. The booking dialog is the most consequential thing on the site and it used to SNAP into place: display:none -> display:flex with nothing in between. It has no scroll reveal because it is not a section the reader scrolls past — the right animation for a dialog is an entrance on open, which is this. Runs on the tier tokens like everything else, so it is quick on a calm site and softer on a rich one. "both" holds the start state through the first frame, which is what stops a flash of the fully-placed dialog. */ @keyframes ak-book-fade{from{opacity:0;}to{opacity:1;}} @keyframes ak-book-in{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}} .ak-book--modal.ak-book--open .ak-book__backdrop{ animation:ak-book-fade var(--ak-dur,.45s) var(--ak-ease,ease) both; } .ak-book--modal.ak-book--open .ak-book__dialog{ animation:ak-book-in var(--ak-dur,.45s) var(--ak-ease,ease) both; } /* A dialog that animates in is decoration; a dialog that appears is not. Under reduced motion it simply is there. */ @media (prefers-reduced-motion:reduce){ .ak-book--modal.ak-book--open :is(.ak-book__backdrop,.ak-book__dialog){ animation:none!important;opacity:1!important;transform:none!important; } } .ak-book--modal .ak-book__backdrop{display:block;position:absolute;inset:0;border:0;padding:0;cursor:pointer; background:rgba(20,16,10,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);} /* Definite height so the right column is bounded and the form body can scroll. */ .ak-book--modal .ak-book__dialog{position:relative;width:min(960px,100%);height:min(700px,92vh); grid-template-rows:minmax(0,1fr);} /* Three steps need room the two-column sheet never did: at 960px the calendar and the departures sat on top of each other and the summary fell below the fold on every laptop. */ .ak-book--modal .ak-book__dialog--steps{width:min(1180px,100%);height:min(860px,94vh);} .ak-book--modal .ak-book__media{min-height:0;} .ak-book--modal .ak-book__form{min-height:0;overflow:hidden;} .ak-book--modal .ak-book__body{overflow-y:auto;flex:1 1 auto;min-height:0;} /* ---- booking: the three-step sheet ------------------------------------- */ /* ──────────────────────────────────────────────────────────────────────────── THREE GROUNDS, AND A SQUARE EDGE. The sheet is the darkest (or lightest) plane, a panel is lifted off it, and every control is sunk BACK into the panel. That is what makes a calendar read as a calendar rather than as more panel with lines on it, and it is the one thing a flat set of bordered boxes cannot do. The two tints do it without either value knowing the preset: - a panel adds the sheet's own INK -> lighter on a dark sheet, darker on a pale one; - a control adds the PAGE ground -> the exact opposite, in both. Nothing here is rounded. Radius is the kit's per-preset language everywhere else, and it stays that way everywhere else — but a booking sheet is a dense instrument panel of chips, day cells and departure tiles, and at 2.4rem tall a rounded tile spends a quarter of its edge on the curve. ──────────────────────────────────────────────────────────────────────────── */ .ak-book__dialog--steps{ /* THE SHEET'S OWN GROUND, named so the two tints can be built from it. It must mirror whatever the dialog is actually painted with — the first version reached for --site-page-bg instead, which on expedition is the PALE page behind a DARK dialog: the calendar and every departure tile came out light grey on an ink sheet. A preset that repaints the dialog therefore repaints this with it; 'steps.test.tsx' fails the ones that forget. */ --ak-bk-ground:var(--site-surface); /* currentColor, NOT --site-fg. The sheet's ink is whatever the dialog itself is set in — expedition paints an ink-dark dialog and sets it to #fff, while --site-fg stays the dark ink of the PALE page behind it. Every border built from --site-border therefore came out bright white on that sheet, and the panel tint built from --site-fg was invisible. currentColor resolves at the element that uses it, so both follow the dialog in every preset. */ --ak-bk-line:color-mix(in srgb,currentColor 16%,transparent); --ak-bk-panel:color-mix(in srgb,currentColor 5%,transparent); --ak-bk-inset:color-mix(in srgb,var(--ak-bk-ground) 88%,transparent); --ak-bk-mono:ui-monospace,SFMono-Regular,Menlo,monospace; border-radius:0; } .ak-book__dialog--steps .ak-book__head .ak-h2{text-transform:uppercase;letter-spacing:.005em;} .ak-book__intro{font-size:.86rem;margin:.5rem 0 0;max-width:56ch;} .ak-book__steps{display:grid;grid-template-columns:1.45fr 1fr;gap:var(--site-space-4); align-items:start;} .ak-book__col{display:flex;flex-direction:column;gap:var(--site-space-4);min-width:0;} .ak-book__panel{border:1px solid var(--ak-bk-line);border-radius:0; padding:clamp(.85rem,1.8vw,1.05rem);display:flex;flex-direction:column;gap:var(--site-space-3); background:var(--ak-bk-panel);min-width:0;} .ak-book__stephead{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;} .ak-book__stepno{flex:none;display:grid;place-items:center;width:1.35rem;height:1.35rem; border-radius:var(--site-radius-full);background:var(--site-primary); color:var(--site-primary-contrast,#fff);font-family:var(--site-font-heading); font-size:.7rem;font-weight:800;} .ak-book__steptitle{font-family:var(--site-font-heading);font-size:.85rem;font-weight:700; letter-spacing:.02em;text-transform:uppercase;margin:0;} /* Every secondary line on the sheet is set in the mono face: a figure a reader is checking (a price, a time, a seat count, a date) is easier to check when the digits line up, and it separates the sheet's readings from its labels without a second colour. */ .ak-book__stepnote{margin-left:auto;font-family:var(--ak-bk-mono);font-size:.62rem; letter-spacing:.06em;text-transform:uppercase;color:var(--site-muted);} .ak-book__note{display:flex;align-items:flex-start;gap:.4rem;font-size:.7rem;line-height:1.5; color:var(--site-muted);margin:.15rem 0 0;} .ak-book__icon{width:.9rem;height:.9rem;flex:none;} /* ---- booking skeleton -------------------------------------------------- */ /* Shown while the sheet waits for its live product. It borrows the sheet's own grid classes, so only the blocks themselves are described here. */ /* currentColor, for the same reason --ak-bk-line and --ak-bk-panel use it (see the sheet's token block above): the dialog's ink is whatever the DIALOG is set in, and a preset that paints an ink-dark sheet sets it to #fff while --site-fg stays the dark ink of the pale page behind it. Built from --site-fg, these blocks vanished on a dark sheet; hardcoding white instead would have made them vanish on a light one. currentColor resolves at the element, so one rule is correct on every preset with no override. */ .ak-skel{display:block;border-radius:var(--site-radius-sm); background:color-mix(in srgb,currentColor 13%,transparent); background-image:linear-gradient(90deg, transparent 0%, color-mix(in srgb,currentColor 9%,transparent) 45%, color-mix(in srgb,currentColor 9%,transparent) 55%, transparent 100%); background-size:220% 100%;background-repeat:no-repeat; animation:ak-skel-sweep 1.35s ease-in-out infinite;} .ak-skel--round{border-radius:var(--site-radius-full);} @keyframes ak-skel-sweep{ 0%{background-position:120% 0;} 100%{background-position:-120% 0;} } /* The sweep is decoration; the placeholder must still read as "not ready" when motion is off, so the blocks stay and only the movement goes. */ @media (prefers-reduced-motion:reduce){ .ak-skel{animation:none;background-image:none;} } .ak-book__steps--skel .ak-book__panel{gap:var(--site-space-3);display:flex;flex-direction:column;} .ak-book__skelctrl{display:flex;flex-direction:column;gap:.5rem;} .ak-book__skelpills{display:flex;flex-wrap:wrap;gap:.4rem;} .ak-book__skelnums{display:flex;gap:.4rem;} .ak-book__skelfield{display:flex;flex-direction:column;gap:.45rem;} .ak-book__skelsum{display:flex;flex-direction:column;gap:.55rem;} .ak-book__skelsumrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;} .ak-book__skeltotal{padding-top:.7rem;border-top:1px solid var(--ak-bk-line);} .ak-book__assure{display:flex;align-items:center;gap:.5rem;font-size:.74rem;color:var(--site-muted); border:1px solid var(--ak-bk-line);border-radius:0;padding:.65rem .8rem;margin:0;} .ak-book__where{margin:0;font-family:var(--ak-bk-mono);font-size:.78rem;font-weight:600;} /* The stand-in for a calendar that would have had nothing on it. Set at the sheet's own scale: the shared notice style is sized for a full-width band. */ .ak-book__empty{font-size:.82rem;line-height:1.6;margin:0;padding:.85rem; border:1px solid var(--ak-bk-line);background:var(--ak-bk-inset);} /* Step 1 — the tours. */ .ak-tourpick{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr; gap:.5rem;} .ak-tourcard{width:100%;height:100%;display:flex;flex-direction:column;gap:.35rem;text-align:left; border:1px solid var(--ak-bk-line);background:var(--ak-bk-inset);color:inherit; border-radius:0;padding:.6rem .7rem;font:inherit;cursor:pointer; transition:border-color .18s ease,background .18s ease;} .ak-tourcard:hover{border-color:var(--site-primary);} .ak-tourcard:focus-visible{outline:none;box-shadow:var(--site-focus-ring);} /* The chosen tour takes a brand edge and a brand tint, never a brand FILL: the card carries a price and two facts, and reversing it out makes all three harder to read than the three beside it. */ .ak-tourcard[aria-pressed="true"]{border-color:var(--site-primary); background:color-mix(in srgb,var(--site-primary) 12%,var(--ak-bk-inset));} .ak-tourcard__top{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;} .ak-tourcard__kind{font-family:var(--ak-bk-mono);font-size:.6rem;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--site-muted);} .ak-tourcard__price{font-family:var(--ak-bk-mono);font-size:.76rem;font-weight:700; color:var(--site-primary);} .ak-tourcard__name{font-family:var(--site-font-heading);font-size:.8rem;font-weight:700; line-height:1.3;letter-spacing:.015em;text-transform:uppercase;} /* A hairline above the facts, so the two readings sit on the card's own footer rather than floating under the name. */ .ak-tourcard__facts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:auto;padding-top:.4rem; border-top:1px solid var(--ak-bk-line);} .ak-tourcard__fact{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--ak-bk-mono); font-size:.62rem;color:var(--site-muted);} /* Step 2 — when. */ .ak-book__when{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--site-space-4); align-items:start;} .ak-book__whenside{display:flex;flex-direction:column;gap:var(--site-space-3);min-width:0;} .ak-cal{border:1px solid var(--ak-bk-line);border-radius:0;padding:.55rem;color:inherit; background:var(--ak-bk-inset);} .ak-cal__head{display:flex;align-items:center;justify-content:space-between;gap:.4rem; margin-bottom:.45rem;} .ak-cal__month{font-family:var(--site-font-heading);font-size:.8rem;font-weight:700;} .ak-cal__nav{width:1.5rem;height:1.5rem;display:grid;place-items:center;border-radius:0; border:1px solid var(--ak-bk-line);background:transparent;color:inherit; font:inherit;font-size:.9rem;line-height:1;cursor:pointer;} .ak-cal__nav:hover{border-color:var(--site-primary);color:var(--site-primary);} .ak-cal__nav:focus-visible{outline:none;box-shadow:var(--site-focus-ring);} .ak-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;} .ak-cal__dow{display:grid;place-items:center;font-family:var(--ak-bk-mono);font-size:.58rem; font-weight:600;letter-spacing:.04em;color:var(--site-muted);padding-bottom:.25rem;} .ak-cal__day{aspect-ratio:1;display:grid;place-items:center;border:0;background:transparent; color:inherit;font-family:var(--ak-bk-mono);font-size:.7rem;border-radius:0; cursor:pointer;transition:background .15s ease,color .15s ease;} .ak-cal__day:hover:not(:disabled){background:color-mix(in srgb,var(--site-primary) 16%,transparent);} .ak-cal__day:focus-visible{outline:none;box-shadow:var(--site-focus-ring);} /* Disabled, not hidden: a visitor can see that the tour does not run that day rather than wondering why the click did nothing. */ .ak-cal__day:disabled{color:var(--site-muted);opacity:.38;cursor:default;} .ak-cal__day[data-outside]{opacity:.3;} .ak-cal__day[aria-pressed="true"]{background:var(--site-primary); color:var(--site-primary-contrast,#fff);font-weight:700;} .ak-slots{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;} .ak-slot{display:flex;flex-direction:column;gap:.1rem;text-align:left;border:1px solid var(--ak-bk-line); background:var(--ak-bk-inset);color:inherit;border-radius:0; padding:.45rem .55rem;font:inherit;cursor:pointer;transition:border-color .18s ease,background .18s ease;} .ak-slot:hover:not(:disabled){border-color:var(--site-primary);} .ak-slot:focus-visible{outline:none;box-shadow:var(--site-focus-ring);} .ak-slot:disabled{opacity:.45;cursor:default;} .ak-slot__time{font-family:var(--ak-bk-mono);font-size:.72rem;font-weight:700;} .ak-slot__state{font-family:var(--ak-bk-mono);font-size:.58rem;letter-spacing:.04em; color:var(--site-muted);} .ak-slot[data-tone="low"] .ak-slot__state{color:var(--site-accent,var(--site-primary));} .ak-slot[aria-pressed="true"]{border-color:var(--site-primary); background:var(--site-primary);color:var(--site-primary-contrast,#fff);} .ak-slot[aria-pressed="true"] .ak-slot__state{color:inherit;opacity:.85;} /* Every control in the sheet is square, including the ones the rest of the kit rounds: the chips, the rider counters and the fields. */ .ak-book__dialog--steps :is(.ak-pill,.ak-num,.ak-field select,.ak-field input,.ak-book__body textarea,.ak-book__submit){ border-radius:0;} .ak-book__dialog--steps :is(.ak-pill,.ak-num){border-color:var(--ak-bk-line);border-width:1px; background:var(--ak-bk-inset);} .ak-book__dialog--steps .ak-num{width:2.1rem;height:2.1rem;font-family:var(--ak-bk-mono); font-size:.76rem;} .ak-book__dialog--steps .ak-pill{padding:.42rem .8rem;font-size:.76rem;} .ak-book__dialog--steps :is(.ak-field select,.ak-field input,.ak-book__body textarea){ background:var(--ak-bk-inset);font-size:.8rem;} .ak-book__dialog--steps .ak-field label{font-size:.72rem;} /* Step 3 — the read-back. */ .ak-booksum{margin:.2rem 0 0;padding:.7rem 0 0;border-top:1px solid var(--ak-bk-line); display:flex;flex-direction:column;gap:.35rem;font-family:var(--ak-bk-mono);} .ak-booksum__row{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem; font-size:.68rem;} .ak-booksum__row dt{color:var(--site-muted);flex:none;} .ak-booksum__row dd{margin:0;text-align:right;font-weight:700;min-width:0;} .ak-book__total{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem; flex-wrap:wrap;font-family:var(--ak-bk-mono);font-size:1rem;margin:.2rem 0 0;padding-top:.6rem; border-top:1px solid var(--ak-bk-line);color:var(--site-primary);} .ak-book__total small{font-size:.6rem;} /* Inherit, not --site-fg: the same trap as the borders. On expedition's ink-dark sheet the page's ink is black, and the label vanished. */ .ak-book__totallabel{font-family:var(--site-font-heading);font-size:.7rem;font-weight:800; letter-spacing:.09em;text-transform:uppercase;color:inherit;margin-right:auto;} .ak-book__submit{width:100%;justify-content:center;text-transform:uppercase;letter-spacing:.09em; font-size:.76rem;} .ak-book__submit:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;} .ak-book__body textarea{width:100%;font:inherit;resize:vertical;} @media (max-width:1024px){ .ak-book__steps{grid-template-columns:1fr;} .ak-tourpick{grid-template-columns:1fr 1fr;} } @media (max-width:640px){ .ak-book__when{grid-template-columns:1fr;} .ak-tourpick,.ak-slots{grid-template-columns:1fr;} .ak-book__dialog{grid-template-columns:1fr;} .ak-book__media{min-height:9rem;max-height:11rem;} .ak-book--modal.ak-book--open{padding:0;align-items:stretch;} .ak-book--modal .ak-book__dialog{width:100%;height:100dvh;border-radius:0;grid-template-rows:auto minmax(0,1fr);} .ak-book--modal .ak-book__media{min-height:9rem;max-height:11rem;} } /* ---- product detail ---------------------------------------------------- */ /* The section owns the band, so it can bleed to the viewport edge while the container keeps its own gutters. Content is lifted above it. */ .ak-product-detail-sec{position:relative;overflow:hidden;} .ak-product-detail-sec > .ak-container{position:relative;z-index:1;} /* The panel the photo is laid on: bleeds off the left edge, rounded where it meets the page. The isolation keeps the veil's blend inside the band. */ /* WHITE ground on purpose, not the brand colour: the tint below is a MULTIPLY layer, and multiplying against white returns the overlay colour exactly. That is what makes the band fall back to a clean flat primary panel when the art is missing, instead of primary multiplied by itself into near-black. */ /* Width is measured from the CONTENT, not the viewport. The container is capped at --site-maxw and centred, so a plain percentage of the full-bleed section made the band shrink away from the photo as the screen grew: at 1920 it reached ~56px into the content instead of the ~250 it reaches at 1100, and the panel read as a detached stripe down the far edge. Gutter + a fixed share of the container keeps the overlap identical at every width. */ .ak-product-detail__band{position:absolute;z-index:0;left:0;top:0;bottom:0; width:calc(max(0px, (100% - var(--site-maxw)) / 2) + min(100%, var(--site-maxw)) * .26); background:#fff;isolation:isolate;overflow:hidden;} /* The ridge art itself, unmodified on disk — darkened only in the compositor so the tint has something dark to work against while the ridges stay readable. */ .ak-product-detail__band::before{content:"";position:absolute;inset:0; background-image:var(--site-decor-ridge,none);background-size:cover;background-position:52% top; filter:brightness(.65) contrast(1.08);} /* The tint. MULTIPLY means every pixel is scaled by the brand colour, so the photo keeps its own light and shade while the whole panel takes the tenant's hue — one static image that re-tints itself for every theme and preset, with no per-tenant asset and nothing to regenerate when a palette changes. */ .ak-product-detail__band::after{content:"";position:absolute;inset:0; background:var(--site-primary);mix-blend-mode:multiply;} .ak-product-detail{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,3.4vw,3rem);align-items:center;} /* The photo sits on an offset brand plate and is lapped by the summit mark, so the column needs its own stacking context and room for both to overhang. */ /* Left padding is the summit mark's overhang, nothing more — the photo should run as close to the container edge as the mark allows, so it stays the biggest thing in the column instead of floating inside it. */ .ak-product-detail__media{position:relative;isolation:isolate; padding:clamp(.75rem,1.4vw,1.25rem) 0 clamp(1rem,1.9vw,1.6rem) clamp(1.2rem,2.4vw,2.2rem);} /* 6/5 rather than 4/3: a taller frame shows more of the trail and fills the band it sits on, which a wide letterbox left looking stranded. */ .ak-product-detail__media img{position:relative;z-index:1;width:100%;aspect-ratio:6/5;object-fit:cover; border-radius:var(--site-radius-lg);display:block;box-shadow:var(--site-shadow-lg);} .ak-product-detail__mark{position:absolute;z-index:2;left:0;bottom:0;width:clamp(4rem,8vw,5.6rem);height:clamp(4rem,8vw,5.6rem); display:grid;place-items:center;border-radius:var(--site-radius-lg);background:var(--site-primary-strong);color:#fff;box-shadow:var(--site-shadow-md);} .ak-product-detail__mark svg{width:58%;height:58%;display:block;} /* Breadcrumb out of the tour. Sits above the kicker so it reads as navigation rather than as part of the product copy, and keeps a 44px touch target. */ .ak-product-detail__back{display:inline-flex;align-items:center;gap:.45rem; margin:0 0 .9rem;min-height:44px;font-family:var(--site-font-body);font-size:.9rem;font-weight:600; color:var(--site-muted);text-decoration:none;transition:color .18s ease,gap .18s ease;} .ak-product-detail__back svg{width:1.05rem;height:1.05rem;flex:none;} .ak-product-detail__back:hover{color:var(--site-primary);gap:.7rem;} .ak-product-detail__back:focus-visible{outline:none;box-shadow:var(--site-focus-ring);border-radius:var(--site-radius-sm);} /* A rule leading the eyebrow, matching the section's kicker treatment. */ .ak-product-detail__eyebrow{display:flex;align-items:center;gap:.6rem;} .ak-product-detail__eyebrow::before{content:"";flex:none;width:1.6rem;height:2px;border-radius:2px;background:currentColor;} .ak-product-detail__title{margin-bottom:.35rem;} .ak-product-detail__price{font-family:var(--site-font-heading);font-size:clamp(1.5rem,2.6vw,1.9rem);font-weight:800;color:var(--site-primary);margin:.2rem 0 var(--site-space-3);} .ak-product-detail__desc{margin-bottom:var(--site-space-4);} .ak-product-detail__features{list-style:none;padding:0;margin:var(--site-space-4) 0;display:flex;flex-direction:column;gap:.45rem;} /* Each fact is its own tinted row: a chip carries the glyph, the text sits on a surface band. Rows stay full-width so a long line wraps under its own text rather than under the icon. */ .ak-product-detail__features li{display:flex;align-items:center;gap:.75rem;padding:.5rem .8rem; border-radius:var(--site-radius-md);background:var(--site-surface-muted);color:var(--site-fg-soft);} .ak-product-detail__ficon{flex:none;width:1.75rem;height:1.75rem;display:grid;place-items:center;border-radius:var(--site-radius-full); background:color-mix(in srgb, var(--site-primary) 14%, var(--site-surface));color:var(--site-primary);} .ak-product-detail__ficon svg{width:1.15rem;height:1.15rem;display:block;} .ak-product-detail__ftext{min-width:0;font-size:.9rem;line-height:1.4;} .ak-product-detail__cta{width:100%;border-radius:var(--site-radius-md);background:var(--site-primary-strong); color:#fff;white-space:normal;padding-top:1rem;padding-bottom:1rem;} .ak-product-detail__cta:hover{background:var(--site-primary);} .ak-product-detail__cta svg{flex:none;width:1.15rem;height:1.15rem;} /* ---- gallery ----------------------------------------------------------- */ /* Auto-fit so each photo is LARGE: it fills at least ~clamp(340→420px) and grows to share the row. In a narrow pane (editor preview) this collapses to a single full-width image instead of two cramped squares; on a wide page it lays out 2–3 big tiles. min(100%,…) guards against overflow on very small screens. */ .ak-gallery__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(1rem,2vw,1.5rem);margin-top:var(--site-space-6);} /* Each image lives in a figure so the decorative grade overlay can attach. A 4:3 landscape frame reads bigger and more editorial than a small square. */ .ak-gallery__item{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:var(--site-radius-lg); box-shadow:var(--site-shadow-sm);margin:0;display:block;transition:box-shadow .3s ease;} .ak-gallery__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;} .ak-gallery__item:hover{box-shadow:var(--site-shadow-md);} .ak-gallery__item:hover img{transform:scale(1.02);} /* Back-compat: a bare (older gallery markup) keeps its own styling. */ .ak-gallery__grid>img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--site-radius-lg);display:block; transition:transform .4s ease,box-shadow .3s ease;box-shadow:var(--site-shadow-sm);} .ak-gallery__grid>img:hover{transform:scale(1.02);box-shadow:var(--site-shadow-md);} /* ---- decorative image grade (tier-scaled BOTTOM scrim) ----------------- */ /* Applied to hero/about/gallery decorative media ONLY. Product-card images (.ak-card__media) are deliberately never graded, so product photos stay true. The photo itself is left a TRUE image — there is NO full-image recolour. A single brand-tinted gradient rises from the BOTTOM edge and fades to fully transparent before the half-way line, so the top of every photo stays clean and real (the "graded" look reads as depth, not a colour wash). Intensity is keyed off the site tier (body[data-motion-tier]): Basic = neutral shade, Refined = light brand, Premium = stronger brand — a Basic site can never render the premium brand grade. pointer-events:none keeps the editor's click-to-select working. */ .ak-hero__media,.ak-about__media,.ak-gallery__item{isolation:isolate;} .ak-hero__media::before,.ak-about__media::before,.ak-gallery__item::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1;} .ak-hero__media::before,.ak-about__media::before{border-radius:var(--site-radius-xl);} .ak-gallery__item::before{border-radius:var(--site-radius-lg);} /* T1 Basic — neutral charcoal bottom shade only, NO brand hue. */ [data-motion-tier="1"] .ak-hero__media::before, [data-motion-tier="1"] .ak-about__media::before, [data-motion-tier="1"] .ak-gallery__item::before{ background:linear-gradient(to top, rgba(15,18,26,.34) 0%, rgba(15,18,26,.12) 22%, rgba(15,18,26,0) 46%);} /* T2 Refined — a LIGHT brand bottom scrim (bottom-only, top stays clean). */ [data-motion-tier="2"] .ak-hero__media::before, [data-motion-tier="2"] .ak-about__media::before, [data-motion-tier="2"] .ak-gallery__item::before{ background:linear-gradient(to top, rgba(var(--site-primary-rgb),.52) 0%, rgba(var(--site-primary-rgb),.22) 22%, rgba(var(--site-primary-rgb),0) 50%);} /* T3 Premium — a STRONGER brand bottom scrim (still bottom-only; --site-image-scrim fades out by ~52%, so the upper half of the photo is untouched). */ [data-motion-tier="3"] .ak-hero__media::before, [data-motion-tier="3"] .ak-about__media::before, [data-motion-tier="3"] .ak-gallery__item::before{ background:var(--site-image-scrim);} /* Placeholder guard — while an image is still a grey placeholder awaiting AI enrichment (data-placeholder on the media wrapper / overlay hero section), it gets NO brand scrim: a shaded grey placeholder reads as a solid colour block. The attribute drops the instant the real photo lands, so the scrim returns automatically — no re-render logic needed. */ .ak-hero__media[data-placeholder]::before, .ak-about__media[data-placeholder]::before, .ak-gallery__item[data-placeholder]::before{display:none;} /* Opt-out — the site asked for clean, untinted photos (theme.imageScrim:"off"). Written AFTER every tier rule and matched on an ancestor attribute, so it beats all three on specificity without !important and without each tier needing its own :not() guard. display:none rather than a transparent background so the layer costs nothing to paint. The tint is the only thing removed: the ::before still carries nothing else, and hero OVERLAY scrims (.ak-hero--overlay::before) are a separate legibility layer behind text and are deliberately untouched — text over a photo needs its backing whatever the decorative setting says. */ /* THE ONE PRESET THAT OVERRIDES THE IMAGE TREATMENT. The rule above this block is that a preset changes the ARRANGEMENT of the photos, never their treatment — the brand scrim is deliberately identical everywhere. "modern-utility" is the exception, because its whole identity is uninterrupted photography on warm paper: a strong brand wash across the bottom of every photo is the single loudest thing on an otherwise quiet page, and at tier 3 it renders as a heavy colour block rather than a shade. It keeps a scrim — a photo still needs to sit down onto the page — but a light warm-neutral one instead of a saturated brand one. Declared BEFORE the opt-out below so a site that turns the scrim off entirely still wins, exactly like every tier rule (asserted in image-scrim.test.ts). */ [data-design-preset="modern-utility"] .ak-hero__media::before, [data-design-preset="modern-utility"] .ak-about__media::before, [data-design-preset="modern-utility"] .ak-gallery__item::before{ background:linear-gradient(to top, rgba(27,28,24,.22) 0%, rgba(27,28,24,.07) 20%, rgba(27,28,24,0) 42%); } [data-image-scrim="off"] .ak-hero__media::before, [data-image-scrim="off"] .ak-about__media::before, [data-image-scrim="off"] .ak-gallery__item::before{display:none;} /* ---- testimonials ------------------------------------------------------ */ .ak-testimonials__summary{display:flex;align-items:center;gap:.6rem;margin:0 0 var(--site-space-5);font-weight:600;color:var(--site-fg-soft);} .ak-testimonials__summary .ak-stars{color:#fbbf24;letter-spacing:.1em;} .ak-testimonials__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,2.5vw,1.75rem);margin-top:var(--site-space-5);} .ak-quote{background:var(--site-surface);border:1px solid var(--site-border);border-radius:var(--site-radius-lg); padding:clamp(1.25rem,2.6vw,1.6rem);display:flex;flex-direction:column;gap:.85rem;box-shadow:var(--site-shadow-sm);} .ak-quote__head{display:flex;align-items:center;gap:.75rem;} .ak-quote__avatar{width:44px;height:44px;border-radius:var(--site-radius-full);object-fit:cover;flex:none;display:block;} .ak-quote__avatar--initials{display:inline-flex;align-items:center;justify-content:center; background:var(--site-fg);color:#fff;font-family:var(--site-font-heading);font-weight:700;font-size:1.05rem;line-height:1;} .ak-quote__meta{display:flex;flex-direction:column;min-width:0;} .ak-quote__name{font-weight:700;color:var(--site-fg);line-height:1.2;} .ak-quote__date{color:var(--site-muted);font-size:.82rem;margin-top:.15rem;} .ak-quote__rating{display:flex;align-items:center;gap:.45rem;} .ak-quote__rating .ak-stars{color:#fbbf24;letter-spacing:.08em;font-size:1.05rem;line-height:1;} .ak-quote__verified{display:block;flex:none;} .ak-quote__text{margin:0;color:var(--site-fg-soft);line-height:1.6;font-size:.96rem;} .ak-quote__posted{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--site-muted);margin-top:.1rem;} .ak-quote__source{color:var(--site-fg-soft);font-weight:700;} /* ---- The head's extra copy: subtitle, signature, closing line ----------- */ .ak-testimonials__sub{margin:.65rem 0 0;max-width:52ch; /* The author's own line breaks decide the shape of a two-line intro — the same contract the How it works footnotes follow. */ white-space:pre-line;} /* In FLOW by default. Only a preset that has designed a place for it lifts it out; a floated aside in a layout that was not built for one just collides with the heading. */ .ak-testimonials__flourish{margin:0 0 .35rem;text-align:right; font-family:var(--site-font-wordmark,var(--site-font-heading)); font-style:italic;font-size:1.05rem;line-height:1.3;color:var(--site-muted);} .ak-testimonials__footnote{margin:var(--site-space-5) 0 0;text-align:center; font-family:var(--site-font-body);font-size:.62rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--site-muted);} /* ---- faq --------------------------------------------------------------- */ .ak-faq__list{margin-top:var(--site-space-6);display:flex;flex-direction:column;gap:.75rem;max-width:820px;} .ak-faq details{background:var(--site-surface);border:1px solid var(--site-border);border-radius:var(--site-radius-md); padding:1.1rem 1.25rem;transition:border-color .2s ease,box-shadow .2s ease;} .ak-faq details[open]{border-color:var(--site-primary-light);box-shadow:var(--site-shadow-sm);} .ak-faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--site-fg);} .ak-faq summary::-webkit-details-marker{display:none;} .ak-faq summary::after{content:"+";color:var(--site-primary);font-weight:700;font-size:1.4rem;line-height:1;transition:transform .2s ease;} .ak-faq details[open] summary::after{content:"\2212";} .ak-faq p{margin:.9rem 0 0;color:var(--site-muted);line-height:1.7;} .ak-faq details[open] p{animation:ak-fade-in .3s ease;} @keyframes ak-fade-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}} /* ---- about ------------------------------------------------------------- */ .ak-about{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:center;} /* overflow:hidden CLIPS the hover zoom to the rounded frame — without it the scaled photo escapes past the scrim at the bottom edge. Shadow lives on the wrapper (not the img) so it isn't clipped away by overflow:hidden. */ .ak-about__media{position:relative;overflow:hidden;border-radius:var(--site-radius-xl);box-shadow:var(--site-shadow-lg);} .ak-about__media img,.ak-about__media video,.ak-about__media iframe{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--site-radius-xl);display:block;border:0; transition:transform .5s cubic-bezier(.22,.61,.36,1);} .ak-about__media:hover img,.ak-about__media:hover video{transform:scale(1.03);} .ak-about__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--site-space-4);margin-top:var(--site-space-5);} .ak-about__stat{padding:1rem 1.1rem;background:var(--site-primary-soft);border-radius:var(--site-radius-md);} .ak-about__stat b{display:block;font-family:var(--site-font-heading);font-size:1.7rem;color:var(--site-primary);letter-spacing:-.02em;} .ak-about__stat span{color:var(--site-muted);font-size:.85rem;} /* ---- cta --------------------------------------------------------------- */ .ak-cta{position:relative;overflow:hidden;color:var(--site-primary-contrast);border-radius:var(--site-radius-xl); padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem);text-align:center;box-shadow:var(--site-shadow-lg); background:var(--site-primary); background:linear-gradient(135deg,var(--site-primary),var(--site-primary-strong));} .ak-cta .ak-heading{color:var(--site-primary-contrast);} .ak-cta .ak-lead{color:color-mix(in srgb,var(--site-primary-contrast) 88%,transparent);margin-left:auto;margin-right:auto;} .ak-cta__actions{display:flex;gap:var(--site-space-3);justify-content:center;flex-wrap:wrap;margin-top:var(--site-space-2);} .ak-cta .ak-btn--accent{box-shadow:var(--site-shadow-md);} .ak-cta .ak-btn--ghost{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);} .ak-cta .ak-btn--ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;} /* Soft light bloom behind the headline. Decorative and pointer-transparent so it can never swallow a click on the buttons stacked above it. */ .ak-cta__glow{position:absolute;inset:-40% 20% auto;height:70%;pointer-events:none;z-index:0; background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--site-accent) 22%,transparent),transparent 68%);} /* Animated backdrop canvas (theme opt-in, see sections/common sectionBackdrop). Sits in the same decorative layer as the glow, under .ak-cta__inner's z-index 1, so headline and buttons keep their stacking and their clicks. It ships EMPTY: with no client bundle, no WebGL or scripts off it paints nothing and the band is exactly the band it was. Width/height are the element's own — the drawing buffer is sized from clientWidth/Height in JS. */ .ak-shader{position:absolute;inset:0;width:100%;height:100%;display:block; pointer-events:none;z-index:0;border-radius:inherit;} /* The CTA band is already painted in the primary, so brand-coloured lines would be invisible on it — the contrast ink is what reads there. The footer keeps the brand hue (its ground is neutral), so it needs no override. */ .ak-cta .ak-shader{--ak-shader-color:var(--site-primary-contrast);} .ak-footer{position:relative;overflow:hidden;} .ak-footer > .ak-container{position:relative;z-index:1;} /* ── Decorative line motif ─────────────────────────────────────────────────── * * The static-SVG sibling of the shader above: same decorative layer, same * z-index 0, but inline SVG with CSS-only motion, so it costs no JavaScript and * works on every motion tier. A section opts in with "pattern" (see * sections/common sectionPatterns); the markup decides precedence, so a CTA or * footer running the shader never emits a motif at all. * * COLOUR. Two custom properties rather than a fixed value, because "subtle" and * "visible" are different numbers on different grounds. A mid-tone brand hue at * 5% on white is invisible; the same 5% of contrast ink on the primary-filled * CTA is plenty. So each ground names its own ink AND its own weight, and the * motif lands at roughly equal perceived strength everywhere. This is the same * technique --ak-shader-color already uses, extended with an opacity. * * The default tracks --site-primary, so the motif follows the tenant's brand * colour with no per-tenant work. */ .ak-motif{position:absolute;inset:0;width:100%;height:100%; pointer-events:none;z-index:0;overflow:hidden;border-radius:inherit; /* A DARK shade of the brand (p800), not the mid-tone p600, for the same reason --site-heading uses p800: a pale brand colour at this opacity is invisible on a light ground, and the pale-brand sites are exactly the ones whose whole page is already low-contrast. Taking the dark end of the tenant's own scale keeps the motif on-brand for every hue while making it legible for the light ones. */ color:var(--ak-motif-color,var(--site-primary-strong)); opacity:var(--ak-motif-opacity,.1); /* Amplitude and speed multipliers; the tier blocks below are the only things that change them, so every motif declares its keyframes exactly once. */ --mo-amp:1;--mo-speed:1;} .ak-motif svg{display:block;width:100%;height:100%;stroke-width:1.25;} /* Hairlines regardless of how far "slice" scales the 1200x600 field up. Set on the SHAPES, not the svg: stroke-width inherits, vector-effect does not. */ .ak-motif :is(path,line,circle){vector-effect:non-scaling-stroke;} /* Content must clear the layer. ".ak-section" is not positioned by default, and only the sections that actually carry a motif get a containing block — an unconditional "position:relative" on every band would change stacking for sections that never asked for one. */ .ak-section[data-motif]{position:relative;overflow:hidden;} .ak-section[data-motif] > .ak-container{position:relative;z-index:1;} .ak-cta[data-motif]{position:relative;} /* Ground-specific ink + weight. Brand hue on a light band; contrast ink on the primary band and anything dark, where brand-on-brand would vanish. */ [data-bg="primary"] .ak-motif, .ak-cta .ak-motif{--ak-motif-color:var(--site-primary-contrast);--ak-motif-opacity:.07;} [data-bg="dark"] .ak-motif{--ak-motif-color:var(--site-on-dark);--ak-motif-opacity:.13;} /* INHERIT the footer's own ink rather than naming a colour. Every preset's footer already decides its text colour — near-white on the dark footers, dark ink on frosted-glass's light glass panel — so hardcoding the on-dark token drew light lines on a light ground and the motif vanished on that one preset. "color:inherit" overrides the token for this ground only; the opacity, the animation and every other preset are untouched. */ .ak-footer .ak-motif{color:inherit;--ak-motif-opacity:.08;} /* Presets that already carry a busy surface get a lighter motif rather than a different one, so the change stays additive to their existing look. */ [data-design-preset="frosted-glass"] .ak-motif{--ak-motif-opacity:.06;} [data-design-preset="editorial-premium"] .ak-motif{--ak-motif-opacity:.07;} /* MOTION. * * Only the layers transform — path geometry never morphs and no stroke is * ever drawn on, so each layer is a compositor transform rather than a repaint * of the whole background. * * The durations within a motif are deliberately co-prime-ish (37/43/53, 23/31/41, * 47/37/29): layers that share a factor visibly resync on their common period, * which is what makes ambient motion read as a mechanical loop. Negative delays * start every layer mid-cycle so nothing lines up at load either. * * Tier scaling multiplies the shared amplitude/speed properties. Tier 1 is the * kit's "no motion library" tier, so the motif is slow and small there rather * than absent; true stillness is the reduced-motion case at the end. */ /* Distances are VIEWBOX UNITS, not percentages. * * Percentages here resolved against each 's OWN bounding box, and those * boxes are wide and flat — a contour layer measures ~1216x276, so ".6%" of it * was 1.7 units of vertical travel. The motif animated correctly and moved * about a pixel a second, which reads as completely static. The boxes also * differ per layer, so the layers drifted by different amounts and the parallax * they were supposed to create never existed. * * The viewBox is a fixed 1200x600 field, so a unit is a predictable fraction of * the band whatever the layer's own extent is: ~30u of travel is ~2.5% of the * width, which is visible as movement without ever becoming a thing you watch. */ @keyframes ak-motif-driftA{ 0%,100%{transform:translate3d(0,0,0) scale(1);} 50%{transform:translate3d(calc(30px * var(--mo-amp)),calc(-20px * var(--mo-amp)),0) scale(calc(1 + .018 * var(--mo-amp)));} } @keyframes ak-motif-driftB{ 0%,100%{transform:translate3d(0,0,0) scale(1);} 50%{transform:translate3d(calc(-26px * var(--mo-amp)),calc(17px * var(--mo-amp)),0) scale(calc(1 + .014 * var(--mo-amp)));} } @keyframes ak-motif-driftC{ 0%,100%{transform:translate3d(0,0,0);} 50%{transform:translate3d(calc(19px * var(--mo-amp)),calc(24px * var(--mo-amp)),0);} } /* Horizontal-only, and exactly -50%: each wave path repeats its shape at its half-way point, so the second copy lands where the first began and the loop has no seam. The amplitude multiplier deliberately does NOT apply here — anything other than -50% would reintroduce the snap. */ @keyframes ak-motif-flow{ from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);} } /* Lateral parallax for the ridges; amplitude differs per layer via --mo-shift. */ @keyframes ak-motif-parallax{ 0%,100%{transform:translate3d(calc(-1 * var(--mo-shift,20px) * var(--mo-amp)),0,0);} 50%{transform:translate3d(calc(var(--mo-shift,20px) * var(--mo-amp)),0,0);} } /* Node breathing. Scale is applied about each circle's own centre. */ @keyframes ak-motif-pulse{ 0%,100%{opacity:.45;} 50%{opacity:1;} } .ak-motif [data-motif] > g{ will-change:transform; transform-box:view-box;transform-origin:center; } /* topo — very slow multi-directional drift on diverging diagonals. */ [data-motif="topo"] .ak-motif__l1{animation:ak-motif-driftA calc(29s * var(--mo-speed)) ease-in-out infinite;animation-delay:-11s;} [data-motif="topo"] .ak-motif__l2{animation:ak-motif-driftB calc(34s * var(--mo-speed)) ease-in-out infinite;animation-delay:-27s;} [data-motif="topo"] .ak-motif__l3{animation:ak-motif-driftC calc(41s * var(--mo-speed)) ease-in-out infinite;animation-delay:-5s;} /* waves — layered horizontal movement, each band at its own speed. */ [data-motif="waves"] .ak-motif__l1{animation:ak-motif-flow calc(41s * var(--mo-speed)) linear infinite;} [data-motif="waves"] .ak-motif__l2{animation:ak-motif-flow calc(31s * var(--mo-speed)) linear infinite;animation-delay:-9s;} [data-motif="waves"] .ak-motif__l3{animation:ak-motif-flow calc(23s * var(--mo-speed)) linear infinite;animation-delay:-14s;} /* ridge — the far range barely moves, the near one leads. */ [data-motif="ridge"] .ak-motif__l1{--mo-shift:11px;animation:ak-motif-parallax calc(38s * var(--mo-speed)) ease-in-out infinite;animation-delay:-19s;} [data-motif="ridge"] .ak-motif__l2{--mo-shift:24px;animation:ak-motif-parallax calc(31s * var(--mo-speed)) ease-in-out infinite;animation-delay:-7s;} [data-motif="ridge"] .ak-motif__l3{--mo-shift:42px;animation:ak-motif-parallax calc(23s * var(--mo-speed)) ease-in-out infinite;animation-delay:-23s;} /* grid — lattice micro-drift plus nodes breathing as a travelling wave. The --n on each circle is its diagonal index, so the pulse sweeps the field instead of every node blinking together. */ [data-motif="grid"] .ak-motif__l1{animation:ak-motif-driftC calc(31s * var(--mo-speed)) ease-in-out infinite;animation-delay:-13s;} [data-motif="grid"] .ak-motif__nodes circle{ transform-box:fill-box;transform-origin:center; animation:ak-motif-pulse calc(19s * var(--mo-speed)) ease-in-out infinite; animation-delay:calc(var(--n,0) * -2.4s);} /* Tier 1 is "no motion library", not "static": slower and smaller, still alive. */ [data-motion-tier="1"] .ak-motif{--mo-amp:.7;--mo-speed:1.25;} /* Tier 3 is the expressive tier, but this is still a background — the ceiling is a larger drift, never a faster or more legible one. */ [data-motion-tier="3"] .ak-motif{--mo-amp:1.5;--mo-speed:.78;} /* Mobile: fewer layers and less travel, so a narrow column does not fill with line work. Dropping whole layers also removes their animations outright. */ @media (max-width:640px){ .ak-motif{--mo-amp:.6;} /* Drop the MIDDLE ridge, not the top one: the three ranges are spread down the band, so removing the first left a narrow column bottom-heavy with an empty top half. Dropping the middle keeps the near and far ranges and the spread reads the same, just sparser. */ [data-motif="topo"] .ak-motif__l3, [data-motif="waves"] .ak-motif__l2, [data-motif="ridge"] .ak-motif__l2{display:none;} } /* The motif carries no information, so reduced motion means genuinely still — not slower. The lines stay; only the movement goes. "will-change" is released with it: with nothing animating, holding a compositor layer per group is pure memory cost for a still image. */ @media (prefers-reduced-motion:reduce){ .ak-motif *{animation:none !important;will-change:auto !important;} } /* * SectionBackgroundArt — a bolder, FILLED decorative scene (see * sections/common sectionBackgroundArts). Shares the .ak-motif layer slot * conceptually (never both at once — each section's own markup decides which * of pattern/backdrop/backgroundArt wins) but is its own element and its own * pair of custom properties, because a filled scene needs a LOWER opacity than * a line motif to read as calm rather than busy at the same visual weight. */ .ak-bgart{position:absolute;inset:0;width:100%;height:100%; pointer-events:none;z-index:0;overflow:hidden;border-radius:inherit; /* FULL strength, not a wash. The depth in this kind of background comes from several tones stacked back to front; painting the whole scene at ~8% of one hue is what made it read as faint line work instead of as artwork. */ opacity:var(--ak-bgart-opacity,1); /* Darkest -> lightest, taken from the tenant's own primary scale so every scene is recoloured by the brand colour with no per-tenant work. */ --ak-bgart-c1:var(--site-primary-900); --ak-bgart-c2:var(--site-primary-800); --ak-bgart-c3:var(--site-primary-700); --ak-bgart-c4:var(--site-primary-600); /* The one light-ground scene: a pale field with vivid brand/accent blobs. */ --ak-bgart-blob1:var(--site-primary-500); --ak-bgart-blob2:var(--site-accent-500); --ak-bgart-blob3:var(--site-primary-400);} .ak-bgart svg{display:block;width:100%;height:100%;} /* blob is the light-ground design of the set — a pale base with the vivid shapes over it, rather than the deep base the other four are built on. */ .ak-bgart svg[data-bg-art="blob"]{--ak-bgart-c1:var(--site-primary-50);} /* Content must clear the layer — same rule as .ak-motif, extended to this attribute so a section using ONLY backgroundArt (no pattern) still gets a containing block and a stacking context for its real content. */ .ak-section[data-bg-art]{position:relative;overflow:hidden;} .ak-section[data-bg-art] > .ak-container{position:relative;z-index:1;} .ak-cta[data-bg-art]{position:relative;} /* Legibility is NOT handled here. * * A section carrying a dark scene needs light copy — but inverting colours from * this selector would also repaint the text inside the light CARDS these bands * contain (a Testimonials quote card is white; white-on-white erases it). The * kit already owns a fully-covered dark band: style.background "dark", which * the renderer reflects as .ak-section-wrap[data-bg="dark"] and every preset * styles correctly, cards included. So the composition pass puts an art section * on the band its scene wants (see ART_GROUND / applyBackgroundArt) and this * file adds no foreground rules of its own. */ /* Presets that already carry a busy surface take the art slightly softened rather than a different one, so the change stays additive to their look. */ [data-design-preset="frosted-glass"] .ak-bgart{--ak-bgart-opacity:.92;} [data-design-preset="editorial-premium"] .ak-bgart{--ak-bgart-opacity:.95;} /* MOTION. Reuses the line-motif's own keyframes (ak-motif-driftA/B/C) rather than declaring new ones — the scene only needs the same gentle drift at a slower speed, and this way there is exactly one set of drift keyframes to maintain for the whole kit. The layers are the SHAPES, never the base rect: drifting the ground would pull the painted field away from the band's edge and show the page behind. */ .ak-bgart :is(.ak-bgart__l1,.ak-bgart__l2,.ak-bgart__l3){ will-change:transform;transform-box:view-box;transform-origin:center;} .ak-bgart__l1{animation:ak-motif-driftA 46s ease-in-out infinite;animation-delay:-15s;} .ak-bgart__l2{animation:ak-motif-driftB 52s ease-in-out infinite;animation-delay:-33s;} .ak-bgart__l3{animation:ak-motif-driftC 58s ease-in-out infinite;animation-delay:-8s;} /* No information is carried, so reduced motion means genuinely still. */ @media (prefers-reduced-motion:reduce){ .ak-bgart *{animation:none !important;will-change:auto !important;} } .ak-cta__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;} .ak-cta__badge{display:inline-flex;align-items:center;gap:.55rem;align-self:center;margin:0 0 var(--site-space-3); padding:.4rem .95rem .4rem .8rem;border-radius:999px;border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.1);color:color-mix(in srgb,var(--site-primary-contrast) 92%,transparent); font-family:var(--site-font-heading);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;} .ak-cta__badge-dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--site-accent);flex:0 0 auto; box-shadow:0 0 0 0 color-mix(in srgb,var(--site-accent) 70%,transparent);animation:ak-cta-pulse 2.4s ease-out infinite;} @keyframes ak-cta-pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--site-accent) 60%,transparent);} 70%{box-shadow:0 0 0 .5rem transparent;} 100%{box-shadow:0 0 0 0 transparent;}} .ak-cta__lead{max-width:44ch;} .ak-cta__primary{display:inline-flex;align-items:center;gap:.5rem;} .ak-cta__arrow{transition:transform var(--site-dur-2,.18s) ease;} .ak-cta__primary:hover .ak-cta__arrow{transform:translateX(.25rem);} .ak-cta__assurances{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:clamp(1.4rem,3vw,1.9rem) 0 0;width:100%; border-top:1px solid rgba(255,255,255,.16); display:grid;grid-template-columns:1fr;gap:clamp(.9rem,2vw,1.6rem) clamp(1.5rem,4vw,3rem);} .ak-cta__assurance{display:flex;align-items:center;gap:.7rem;justify-content:center;text-align:left; color:color-mix(in srgb,var(--site-primary-contrast) 86%,transparent);font-size:.92rem;line-height:1.4;} .ak-cta__assurance-icon{display:inline-grid;place-items:center;flex:0 0 auto;width:1.65rem;height:1.65rem;color:var(--site-accent);} .ak-cta__assurance-icon svg{width:1.15rem;height:1.15rem;} @media (min-width:48rem){ .ak-cta__assurances{grid-auto-flow:column;grid-template-columns:repeat(auto-fit,minmax(0,1fr));} } /* The pulse is decoration, not information — drop it for reduced-motion users. */ @media (prefers-reduced-motion:reduce){ .ak-cta__badge-dot{animation:none;} .ak-cta__arrow,.ak-cta__primary:hover .ak-cta__arrow{transition:none;transform:none;} } /* ---- How it works (steps) ------------------------------------------------ */ /* * A numbered process band: eyebrow, heading, a row of step cards, then the * actions. The card is a fixed-shape tile rather than a content-sized one — * "min-height" plus a footer pinned with "margin-top:auto" — so a four-step row * stays a rectangle whether one step's copy runs two lines or five. That even * shape is the whole look; letting the cards size to their text turns the row * into a ragged staircase. */ .ak-hiw{position:relative;overflow:hidden;} .ak-hiw > .ak-container{position:relative;z-index:1;} /* ---- The band's optional photograph -------------------------------------- */ /* Its own layer under the motif and the copy. The scrim is NOT optional: a process explained over a landscape is only a design while the type stays readable, and a photograph's brightness is not something the tenant picks — they pick the picture. Two stops rather than one flat wash, so the head keeps more of the sky and the cards sit on the darker half. */ .ak-hiw__photo{position:absolute;inset:0;z-index:0;overflow:hidden;} .ak-hiw__photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;} .ak-hiw__photo::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(9,14,12,.72),rgba(9,14,12,.9));} /* With a photograph the band's copy must be light whatever the preset's own ink is — the ground is now a photograph, not a paper tint. */ .ak-hiw[data-hiw-photo] :is(.ak-hiw__title,.ak-heading){color:#f3f6f4;} .ak-hiw[data-hiw-photo] .ak-hiw__eyebrow{color:var(--site-accent,var(--site-primary-light,#8fd6ae));} .ak-hiw[data-hiw-photo] .ak-hiw__lead{color:rgba(243,246,244,.74);} .ak-hiw[data-hiw-photo] .ak-hiw__card{ background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1); } .ak-hiw[data-hiw-photo] .ak-hiw__card-title{color:#f3f6f4;} .ak-hiw[data-hiw-photo] .ak-hiw__card-body{color:rgba(243,246,244,.7);} .ak-hiw[data-hiw-photo] :is(.ak-hiw__step,.ak-hiw__phase){color:rgba(243,246,244,.6);} .ak-hiw[data-hiw-photo] :is(.ak-hiw__icon,.ak-hiw__step){border-color:rgba(255,255,255,.2);color:rgba(243,246,244,.85);} .ak-hiw[data-hiw-photo] .ak-hiw__card-foot{border-top-color:rgba(255,255,255,.12);} .ak-hiw[data-hiw-photo] .ak-motif{--ak-motif-color:#ffffff;--ak-motif-opacity:.1;} /* ---- The two closing footnotes ------------------------------------------ */ .ak-hiw__footnotes{display:flex;justify-content:space-between;align-items:flex-start; gap:var(--site-space-5);margin-top:clamp(2.25rem,5vw,4rem);} .ak-hiw__footnote{margin:0;font-family:var(--site-font-body);font-size:.6rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase;line-height:1.9;color:var(--site-muted); /* The stacked three-word form is written with real newlines. */ white-space:pre-line;} .ak-hiw__footnote::after{content:"";display:block;width:1.75rem;height:1px;margin-top:.7rem; background:currentColor;opacity:.45;} .ak-hiw__footnote--end{text-align:right;} .ak-hiw__footnote--end::after{margin-left:auto;} .ak-hiw[data-hiw-photo] .ak-hiw__footnote{color:rgba(243,246,244,.52);} .ak-hiw__head{text-align:center;max-width:46rem;margin:0 auto clamp(2.25rem,4.5vw,3.5rem);} .ak-hiw__eyebrow{display:inline-flex;align-items:center;gap:.6rem;justify-content:center;} .ak-hiw__eyebrow-dot{width:.45rem;height:.45rem;border-radius:999px;background:currentColor;flex:none;} .ak-hiw__eyebrow-rule{width:2.25rem;height:1px;background:currentColor;opacity:.5;flex:none;} .ak-hiw__title{margin:0 0 var(--site-space-3);} .ak-hiw__lead{margin:0;} .ak-hiw__grid{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:1fr; gap:clamp(1rem,2vw,1.5rem); } .ak-hiw__card{ position:relative;display:flex;flex-direction:column; /* The fixed shape. Both halves matter: min-height sets the tile, and the footer's auto margin holds the baseline at the bottom of it. */ min-height:17.5rem; padding:clamp(1.15rem,2vw,1.5rem); border:1px solid var(--site-border); border-radius:var(--site-radius-lg); background:var(--site-surface); /* Border colour and shadow are transitioned, never "all": a blanket transition would also animate the reveal's transform and fight it. */ transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease; } /* Hover: the card lifts slightly and takes the BRAND colour on its edge, with the phase dot lighting up to match. Keyboard focus gets the same treatment, so the affordance is not mouse-only. */ .ak-hiw__card:hover, .ak-hiw__card:focus-within{ transform:translateY(-6px); border-color:var(--site-primary); box-shadow:var(--site-shadow-lg); } .ak-hiw__card:hover .ak-hiw__phase-dot, .ak-hiw__card:focus-within .ak-hiw__phase-dot{background:var(--site-primary);opacity:1;} .ak-hiw__card:hover .ak-hiw__icon, .ak-hiw__card:focus-within .ak-hiw__icon{border-color:var(--site-primary);color:var(--site-primary);} .ak-hiw__card-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:clamp(1.5rem,3vw,2.25rem);} .ak-hiw__step{ display:inline-flex;align-items:center; padding:.3rem .6rem;border-radius:var(--site-radius-sm,6px); border:1px solid var(--site-border); background:color-mix(in srgb,var(--site-fg) 4%,transparent); font-family:var(--site-font-body);font-size:.7rem;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--site-fg-soft); } .ak-hiw__icon{ display:inline-grid;place-items:center;flex:none; width:2.25rem;height:2.25rem;border-radius:var(--site-radius-md,10px); border:1px solid var(--site-border);color:var(--site-fg-soft); transition:color .28s ease,border-color .28s ease; } .ak-hiw__icon svg{width:1.15rem;height:1.15rem;} .ak-hiw__card-title{ margin:0 0 .5rem;font-family:var(--site-font-heading); font-size:1.12rem;font-weight:700;letter-spacing:-.01em;line-height:1.3; color:var(--site-heading); } .ak-hiw__card-body{margin:0;color:var(--site-muted);font-size:.94rem;line-height:1.6;} .ak-hiw__card-foot{ /* Pins the rule + phase label to the bottom of the tile whatever the copy length, which is what keeps the four baselines aligned across the row. */ margin-top:auto;padding-top:clamp(1rem,2vw,1.4rem); display:flex;align-items:center;justify-content:space-between;gap:.75rem; border-top:1px solid var(--site-border); } .ak-hiw__phase{ font-family:var(--site-font-body);font-size:.68rem;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--site-muted); } .ak-hiw__phase-dot{ width:.4rem;height:.4rem;border-radius:999px;flex:none; background:var(--site-muted);opacity:.55;transition:background-color .28s ease,opacity .28s ease; } .ak-hiw__actions{ display:flex;flex-wrap:wrap;gap:var(--site-space-3); justify-content:center;margin-top:clamp(2rem,4vw,3rem); } .ak-hiw__cta{display:inline-flex;align-items:center;gap:.5rem;} .ak-hiw__arrow{transition:transform .22s ease;} .ak-hiw__cta:hover .ak-hiw__arrow{transform:translateX(3px);} /* Decoration only — a card that cannot move must still change state. */ @media (prefers-reduced-motion:reduce){ .ak-hiw__card,.ak-hiw__arrow{transition:border-color .28s ease,box-shadow .28s ease;} .ak-hiw__card:hover,.ak-hiw__card:focus-within{transform:none;} .ak-hiw__cta:hover .ak-hiw__arrow{transform:none;} } /* ---- How it works: per-preset ------------------------------------------- */ /* Each preset restates the CARD SURFACE and the step chip in its own language. The geometry (fixed tile, pinned footer, brand edge on hover) is shared — a preset changes how the band feels, not how the process is laid out. */ /* Expedition: dark, high-contrast, technical. Chips read like trail markers. */ [data-design-preset="expedition"] .ak-hiw{background:var(--ak-band-bg,#12161c);} /* The band is near-black, so the motif's default brand ink (a DARK shade of the primary) sat at a luminance gap of ~0.18 against it and the cliff lines read as absent. Same problem the footer has, same answer: light ink on a dark ground. Slightly higher opacity too — a hairline needs more of it to register on black than on paper. */ [data-design-preset="expedition"] .ak-hiw .ak-motif{ --ak-motif-color:var(--site-on-dark);--ak-motif-opacity:.14; } [data-design-preset="expedition"] .ak-hiw__card{ background:color-mix(in srgb,#fff 5%,transparent); border-color:color-mix(in srgb,#fff 12%,transparent); } [data-design-preset="expedition"] .ak-hiw__card-title{color:#fff;} [data-design-preset="expedition"] .ak-hiw__card-body{color:color-mix(in srgb,#fff 68%,transparent);} [data-design-preset="expedition"] .ak-hiw__step, [data-design-preset="expedition"] .ak-hiw__icon{ border-color:color-mix(in srgb,#fff 16%,transparent); background:transparent;color:color-mix(in srgb,#fff 74%,transparent); } [data-design-preset="expedition"] .ak-hiw__card-foot{border-top-color:color-mix(in srgb,#fff 12%,transparent);} [data-design-preset="expedition"] .ak-hiw__card:hover{border-color:var(--site-accent);} [data-design-preset="expedition"] .ak-hiw__card:hover .ak-hiw__phase-dot{background:var(--site-accent);} [data-design-preset="expedition"] .ak-hiw__card:hover .ak-hiw__icon{border-color:var(--site-accent);color:var(--site-accent);} /* Clean conversion: flat white tiles, hairline rules, no elevation at rest. */ [data-design-preset="clean-conversion"] .ak-hiw__card{ background:#fff;border-color:var(--site-border);box-shadow:0 1px 2px rgba(16,24,40,.06); } [data-design-preset="clean-conversion"] .ak-hiw__card:hover{ box-shadow:0 14px 28px -18px rgba(16,24,40,.45);border-color:var(--site-primary); } [data-design-preset="clean-conversion"] .ak-hiw__step{background:var(--site-primary-soft);color:var(--site-primary);border-color:transparent;} /* Editorial premium: the process as a lit scene. ──────────────────────────────────────────────────────────────────────────── This band is the one place in the preset that goes DARK. It is a plate: a photograph under a heavy scrim, contour lines over it, a centred masthead, and four panels joined by a dashed rule that reads as a route. Two rules hold it together and both are load-bearing: 1. THE NUMERAL IS A CSS COUNTER off the section's own
    , so the sequence lives in the markup and the figure is only its typographic expression. Nothing here needs a schema field, an editor control or a step index. 2. THE DASHED RULE IS ONE LINE for the whole row, drawn by the grid and MASKED by the icon discs, which carry an opaque fill for exactly that reason. Four half-lines per card cannot meet across a grid gap. The photograph is optional and can be switched off (backgroundMode: plain). Everything below still holds without it — the scene falls back to the ink ground, which is why the colours are written against a dark constant rather than sampled from the picture. */ [data-design-preset="editorial-premium"] .ak-hiw{ --ak-hiw-ink:#0b1310; --ak-hiw-line:rgba(255,255,255,.14); --ak-hiw-copy:#f2f5f2; /* Read by BOTH the panels and the route line. Written once so the line can never drift off the discs when the padding or the gap is tuned. */ --ak-hiw-pad:clamp(1.25rem,2.2vw,1.75rem); --ak-hiw-gap:clamp(1rem,2vw,1.6rem); --ak-hiw-disc:3.15rem; background:var(--ak-hiw-ink); padding-block:clamp(3.25rem,6vw,5.5rem); } /* A touch warmer than the flat scrim, and a vignette so the corners fall away from the masthead. */ [data-design-preset="editorial-premium"] .ak-hiw__photo::after{ background: radial-gradient(120% 90% at 50% 12%,rgba(11,19,16,.5),rgba(11,19,16,.92) 72%), linear-gradient(180deg,rgba(11,19,16,.7),rgba(11,19,16,.93)); } [data-design-preset="editorial-premium"] .ak-hiw .ak-motif{ --ak-motif-color:var(--ak-hiw-copy);--ak-motif-opacity:.09; } /* ---- Masthead ---- */ [data-design-preset="editorial-premium"] .ak-hiw__head{ text-align:center;max-width:52rem;margin-inline:auto; margin-bottom:clamp(2.25rem,4.5vw,3.5rem); } [data-design-preset="editorial-premium"] .ak-hiw__eyebrow{ justify-content:center;gap:.9rem; color:var(--site-accent,#8fd6ae); font-size:.66rem;letter-spacing:.28em;font-weight:600; } /* The dot becomes the LEFT rule: the masthead wants a rule either side, and restyling the element that is already there beats adding markup for it. */ [data-design-preset="editorial-premium"] .ak-hiw__eyebrow-dot{ width:2.25rem;height:1px;border-radius:0;background:currentColor;opacity:.5; } [data-design-preset="editorial-premium"] .ak-hiw__eyebrow-rule{width:2.25rem;opacity:.5;} /* '.ak-eyebrow' draws a dash of its own in ::before. With the dot restyled into a rule that is TWO marks on the left and one on the right — the masthead wants one each side. */ [data-design-preset="editorial-premium"] .ak-hiw__eyebrow::before{display:none;} [data-design-preset="editorial-premium"] .ak-hiw__title{ font-family:var(--site-font-wordmark,var(--site-font-heading)); font-weight:400;letter-spacing:-.01em;line-height:1.06; font-size:clamp(2.1rem,4.6vw,3.5rem); color:var(--ak-hiw-copy);margin-bottom:1rem; } [data-design-preset="editorial-premium"] .ak-hiw__lead{ font-family:var(--site-font-body);font-size:.72rem;font-weight:500; letter-spacing:.24em;text-transform:uppercase;line-height:1.8; color:rgba(242,245,242,.62);max-width:40rem;margin-inline:auto; } /* ---- The row of panels ---- */ [data-design-preset="editorial-premium"] .ak-hiw__grid{ counter-reset:ak-hiw-step; position:relative; column-gap:var(--ak-hiw-gap); row-gap:clamp(1.25rem,2.5vw,1.75rem); } [data-design-preset="editorial-premium"] .ak-hiw__card{ counter-increment:ak-hiw-step; position:relative; background:rgba(255,255,255,.035); border:1px solid var(--ak-hiw-line);border-radius:10px; padding:var(--ak-hiw-pad); min-height:0;box-shadow:none; } [data-design-preset="editorial-premium"] .ak-hiw__card:hover, [data-design-preset="editorial-premium"] .ak-hiw__card:focus-within{ transform:none;box-shadow:none; background:rgba(255,255,255,.06); border-color:color-mix(in srgb,var(--site-accent,#8fd6ae) 42%,transparent); } /* The numeral. In FLOW here, not absolute: it opens the panel, so it takes part in the stack instead of floating over it. */ [data-design-preset="editorial-premium"] .ak-hiw__card::before{ content:counter(ak-hiw-step,decimal-leading-zero); position:static;display:block; font-family:var(--site-font-wordmark,var(--site-font-heading)); font-style:italic;font-weight:400; font-size:clamp(2.1rem,3.2vw,2.7rem);line-height:1;letter-spacing:-.02em; color:color-mix(in srgb,var(--site-accent,#8fd6ae) 62%,transparent); margin-bottom:clamp(.9rem,1.8vw,1.3rem); transition:color .34s ease; } [data-design-preset="editorial-premium"] .ak-hiw__card:hover::before, [data-design-preset="editorial-premium"] .ak-hiw__card:focus-within::before{ color:var(--site-accent,#8fd6ae); } /* The tick from the previous design has no rule to sit on now. */ [data-design-preset="editorial-premium"] .ak-hiw__card::after{content:none;} [data-design-preset="editorial-premium"] .ak-hiw__card-top{ display:block;margin-bottom:clamp(1rem,2vw,1.4rem); } /* The auto "STEP 01" label restated the numeral above it in words. */ [data-design-preset="editorial-premium"] .ak-hiw__step{display:none;} [data-design-preset="editorial-premium"] .ak-hiw__icon{ position:relative;z-index:2; width:var(--ak-hiw-disc);height:var(--ak-hiw-disc);border-radius:999px; border:1px solid var(--ak-hiw-line); /* OPAQUE on purpose: this disc is what breaks the dashed rule into segments between the panels. A transparent disc and the line runs straight through the icon. */ background:#0d1714; color:var(--ak-hiw-copy); } [data-design-preset="editorial-premium"] .ak-hiw__icon svg{width:1.3rem;height:1.3rem;} [data-design-preset="editorial-premium"] .ak-hiw__card:hover .ak-hiw__icon, [data-design-preset="editorial-premium"] .ak-hiw__card:focus-within .ak-hiw__icon{ border-color:color-mix(in srgb,var(--site-accent,#8fd6ae) 55%,transparent); color:var(--site-accent,#8fd6ae); } [data-design-preset="editorial-premium"] .ak-hiw__card-title{ font-family:var(--site-font-wordmark,var(--site-font-heading)); font-weight:400;letter-spacing:-.005em; font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.2; color:var(--ak-hiw-copy);margin-bottom:.6rem; } [data-design-preset="editorial-premium"] .ak-hiw__card-body{ font-size:.92rem;line-height:1.7;color:rgba(242,245,242,.66);max-width:30ch; } [data-design-preset="editorial-premium"] .ak-hiw__card-foot{display:none;} /* ---- The route: one dashed rule across the icon discs ---- */ /* Only where the steps are a SINGLE ROW. At two columns the line would run between a card and the one below it, joining nothing. The offset is the panel's own padding plus the numeral block plus half a disc — the same clamps the rules above use, so the three stay in step. */ @media (min-width:1024px){ [data-design-preset="editorial-premium"] .ak-hiw__grid:is([data-count="2"],[data-count="3"],[data-count="4"])::before{ content:"";position:absolute;z-index:1; /* Both ends land on a DISC CENTRE, not on the grid's edge: a route that runs off the last waypoint into the margin is not a route. The left end is one card's padding plus half a disc; the right end is that same offset measured back from the far edge, which needs the column width — hence the per-count rules below. */ left:calc(var(--ak-hiw-pad) + var(--ak-hiw-disc) / 2); top:calc( var(--ak-hiw-pad) + clamp(2.1rem,3.2vw,2.7rem) + clamp(.9rem,1.8vw,1.3rem) + var(--ak-hiw-disc) / 2 ); border-top:1px dashed color-mix(in srgb,var(--site-accent,#8fd6ae) 48%,transparent); pointer-events:none; } [data-design-preset="editorial-premium"] .ak-hiw__grid[data-count="2"]::before{ right:calc((100% - var(--ak-hiw-gap)) / 2 - var(--ak-hiw-pad) - var(--ak-hiw-disc) / 2); } [data-design-preset="editorial-premium"] .ak-hiw__grid[data-count="3"]::before{ right:calc((100% - 2 * var(--ak-hiw-gap)) / 3 - var(--ak-hiw-pad) - var(--ak-hiw-disc) / 2); } [data-design-preset="editorial-premium"] .ak-hiw__grid[data-count="4"]::before{ right:calc((100% - 3 * var(--ak-hiw-gap)) / 4 - var(--ak-hiw-pad) - var(--ak-hiw-disc) / 2); } } /* ---- Buttons and footnotes on the dark plate ---- */ [data-design-preset="editorial-premium"] .ak-hiw__actions{justify-content:center;} [data-design-preset="editorial-premium"] .ak-hiw .ak-btn--ghost{ color:var(--ak-hiw-copy);border-color:rgba(255,255,255,.3);background:transparent; } [data-design-preset="editorial-premium"] .ak-hiw .ak-btn--ghost:hover{ border-color:var(--ak-hiw-copy);background:rgba(255,255,255,.06); } [data-design-preset="editorial-premium"] .ak-hiw__footnotes{ align-items:flex-end;margin-top:clamp(2.5rem,5.5vw,4.5rem); /* The route drawing sits between the panels and these lines. */ padding-top:clamp(2.5rem,6vw,5rem); position:relative; } /* The dashed route with its two waypoints and a summit, as one drawing. An inline SVG would put decoration in the markup of every preset; a background image keeps it here, where only this preset pays for it. */ [data-design-preset="editorial-premium"] .ak-hiw__footnotes::before{ content:"";position:absolute;left:10%;right:10%;top:.75rem;height:4.75rem; /* preserveAspectRatio='none' + a 100% 100% size: the drawing STRETCHES to the strip. With the default (meet) its 600x70 ratio was taller than the strip at this width, so the summit was clipped off the top and the curve sat wrong — a decorative line is exactly the thing that may stretch. */ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 70' preserveAspectRatio='none' fill='none' stroke='%238fd6ae' stroke-width='1.4'%3E%3Cpath d='M12 54 C120 54 160 20 250 32 C330 43 370 62 440 46 C478 37 500 30 520 22' stroke-dasharray='5 7' opacity='.55' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='12' cy='54' r='3.2' opacity='.75' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='250' cy='32' r='3.2' opacity='.75' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M508 32 L524 15 L540 32' opacity='.8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center bottom;background-size:100% 100%; pointer-events:none; } [data-design-preset="editorial-premium"] .ak-hiw__footnote{ color:rgba(242,245,242,.5);letter-spacing:.22em;font-size:.58rem; } @media (max-width:1023px){ /* No room for the drawing, and the footnotes stack. */ [data-design-preset="editorial-premium"] .ak-hiw__footnotes{ /* align-items:flex-end is right for a ROW (it seats both blocks on one baseline). Once the axis turns vertical it means "push both to the right edge", which stacked them against the margin. */ flex-direction:column;align-items:flex-start;gap:1.5rem;padding-top:2rem; } [data-design-preset="editorial-premium"] .ak-hiw__footnotes::before{display:none;} [data-design-preset="editorial-premium"] .ak-hiw__footnote--end{text-align:left;} [data-design-preset="editorial-premium"] .ak-hiw__footnote--end::after{margin-left:0;} } @media (prefers-reduced-motion:reduce){ [data-design-preset="editorial-premium"] .ak-hiw__card, [data-design-preset="editorial-premium"] .ak-hiw__card::before{transition:none;} } /* Warm local: soft rounded cards on a cream ground, friendly rather than technical. */ [data-design-preset="warm-local"] .ak-hiw__card{ background:var(--ak-paper,#fffaf3); border-color:color-mix(in srgb,var(--site-primary) 16%,var(--site-border)); border-radius:var(--site-radius-xl); } [data-design-preset="warm-local"] .ak-hiw__step{ background:color-mix(in srgb,var(--site-primary) 12%,transparent); color:var(--site-primary-strong);border-color:transparent;border-radius:999px; } [data-design-preset="warm-local"] .ak-hiw__icon{border-radius:999px;} /* Modern utility: square corners, mono step labels, hairline grid. */ [data-design-preset="modern-utility"] .ak-hiw__card{ border-radius:6px;background:var(--ak-paper,#fff);border-color:var(--ak-hairline,#dfe5e9); } [data-design-preset="modern-utility"] .ak-hiw__step, [data-design-preset="modern-utility"] .ak-hiw__phase{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em; } [data-design-preset="modern-utility"] .ak-hiw__step{border-radius:4px;} [data-design-preset="modern-utility"] .ak-hiw__icon{border-radius:4px;} [data-design-preset="modern-utility"] .ak-hiw__card-foot{border-top-color:var(--ak-hairline,#dfe5e9);} /* Frosted glass: translucent tiles that pick up the band behind them. */ [data-design-preset="frosted-glass"] .ak-hiw__card{ background:var(--ak-card-bg,rgba(255,255,255,.55)); border-color:color-mix(in srgb,var(--site-primary) 14%,transparent); -webkit-backdrop-filter:var(--ak-card-blur,blur(10px));backdrop-filter:var(--ak-card-blur,blur(10px)); } [data-design-preset="frosted-glass"] .ak-hiw__card:hover{background:var(--ak-card-hover-bg,rgba(255,255,255,.72));} [data-design-preset="frosted-glass"] .ak-hiw__step{ background:var(--ak-chip-bg,rgba(255,255,255,.6));border-color:transparent;color:var(--site-primary-strong); } /* ---- contact ----------------------------------------------------------- */ .ak-contact-section{position:relative;overflow:hidden;background:radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--site-accent) 16%,transparent),transparent 28rem),linear-gradient(135deg,color-mix(in srgb,var(--site-primary-soft) 48%,var(--site-page-bg)),var(--site-page-bg) 64%);} /* ONE card, not two. The intro and the form used to be separate panels — a dark gradient slab beside a light surface — which read as two unrelated boxes with two different colours. They are now two HALVES of a single surface: the card owns the background, border, radius and shadow, and the children own only their padding. A hairline between them is the whole separation. */ .ak-contact{display:grid;grid-template-columns:1fr;gap:0;align-items:stretch; background:var(--site-surface);border:1px solid var(--site-border); border-radius:var(--site-radius-xl);box-shadow:var(--site-shadow-lg);overflow:hidden;} .ak-contact__intro{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:100%;padding:clamp(1.75rem,4vw,3rem);color:var(--site-fg); /* A whisper of the brand so the information half still reads as its own column, without becoming a second card. */ background:color-mix(in srgb,var(--site-primary) 5%,transparent);} .ak-contact__intro::before,.ak-contact__intro::after{content:none;} .ak-contact__intro .ak-eyebrow{color:var(--site-primary);opacity:1;} .ak-contact__intro .ak-heading{color:var(--site-heading);max-width:12ch;font-size:clamp(2rem,4vw,3.45rem);line-height:1.02;} .ak-contact__intro .ak-lead{color:var(--site-muted);max-width:40ch;} .ak-contact__prompt{display:flex;align-items:flex-start;gap:.75rem;margin:clamp(1.5rem,3vw,2.3rem) 0;padding-top:1.15rem;border-top:1px solid var(--site-border);max-width:33rem;} .ak-contact__prompt p{margin:0;color:var(--site-fg-soft);font-size:.98rem;line-height:1.6;} .ak-contact__prompt-mark{display:inline-grid;place-items:center;flex:0 0 auto;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--site-accent);color:var(--site-accent-contrast);font-size:1.1rem;font-weight:800;box-shadow:0 8px 20px -10px #000;} .ak-contact__list{list-style:none;padding:0;margin:auto 0 0;display:grid;gap:.75rem;} .ak-contact__detail{display:flex;align-items:flex-start;gap:.8rem;padding:.85rem .9rem;border:1px solid var(--site-border);border-radius:var(--site-radius-md);background:var(--site-surface);transition:background .2s ease,transform .2s ease,border-color .2s ease;} .ak-contact__detail:hover{background:color-mix(in srgb,var(--site-primary) 6%,var(--site-surface));border-color:var(--site-primary-light);transform:translateX(5px);} .ak-contact__icon{display:inline-grid;place-items:center;flex:0 0 auto;width:2.3rem;height:2.3rem;border-radius:.7rem;background:var(--site-accent);color:var(--site-accent-contrast);} .ak-contact__icon svg{width:1.2rem;height:1.2rem;} .ak-contact__detail>span:last-child{display:flex;flex-direction:column;gap:.12rem;min-width:0;} .ak-contact__label{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--site-muted);} .ak-contact__detail :is(a,.ak-contact__address){color:var(--site-fg);font-size:.95rem;line-height:1.45;overflow-wrap:anywhere;} .ak-contact__detail a{text-decoration:none;font-weight:650;} .ak-contact__detail a:hover{text-decoration:underline;text-underline-offset:3px;} .ak-contact form{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--site-space-4);align-self:stretch;justify-content:center;background:transparent;border:0;border-radius:0;padding:clamp(1.5rem,3.5vw,3rem);box-shadow:none;} .ak-contact form::before{content:none;} .ak-contact__form-head{padding-bottom:1.1rem;border-bottom:1px solid var(--site-border);} .ak-contact__form-kicker{margin:0 0 .45rem;color:var(--site-primary);font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;} .ak-contact__form-head h3{margin:0;color:var(--site-fg);font-family:var(--site-font-heading);font-size:clamp(1.45rem,2.5vw,1.9rem);letter-spacing:-.025em;line-height:1.15;} .ak-contact__form-head p:last-child{margin:.55rem 0 0;color:var(--site-muted);line-height:1.55;} .ak-contact__form-fields{display:grid;grid-template-columns:1fr;gap:0 var(--site-space-3);} .ak-contact .ak-field{margin-bottom:var(--site-space-4);} .ak-contact .ak-field input,.ak-contact textarea{background:color-mix(in srgb,var(--site-surface) 92%,var(--site-primary-soft));} .ak-contact textarea{min-height:145px;resize:vertical;} .ak-contact__status{margin:-.25rem 0 0;padding:.75rem .9rem;border-radius:var(--site-radius-md);font-size:.9rem;font-weight:600;} .ak-contact__status--success{color:#14512a;background:#e7f7ec;} .ak-contact__submit-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:-.25rem;} .ak-contact form .ak-btn{display:inline-flex;align-items:center;gap:.7rem;align-self:flex-start;box-shadow:0 14px 24px -16px var(--site-primary-strong);} .ak-contact form .ak-btn span{font-size:1.15em;line-height:1;transition:transform .18s ease;} .ak-contact form .ak-btn:hover span{transform:translateX(3px);} .ak-contact__privacy{color:var(--site-muted);font-size:.8rem;line-height:1.4;} /* ---- rich text --------------------------------------------------------- */ .ak-richtext{max-width:72ch;margin:0 auto;} .ak-richtext h2{font-family:var(--site-font-heading);letter-spacing:-.01em;margin:var(--site-space-5) 0 var(--site-space-3);} .ak-richtext p{margin:0 0 var(--site-space-4);color:var(--site-fg-soft);line-height:1.75;} .ak-richtext a{color:var(--site-primary);} .ak-richtext ul,.ak-richtext ol{padding-left:var(--site-space-5);margin:0 0 var(--site-space-4);color:var(--site-fg-soft);} .ak-richtext li{margin:0 0 .4rem;} /* ---- flex section (bounded fallback blocks) ---------------------------- */ /* Every value below is a var(--site-*) token, so an AI-composed FlexSection inherits the tenant theme exactly like a curated section. */ .ak-flex__head{max-width:70ch;margin:0 auto var(--site-space-6);text-align:center;} .ak-flex__head .ak-lead{color:var(--site-muted);margin:.6rem 0 0;} .ak-flex__blocks{display:flex;flex-direction:column;gap:var(--site-space-6);} .ak-flex__para{color:var(--site-fg-soft);line-height:1.75;margin:0;max-width:72ch;} .ak-flex__list{padding-left:var(--site-space-5);margin:0;color:var(--site-fg-soft);max-width:72ch;} .ak-flex__list li{margin:0 0 .4rem;} /* cards */ .ak-flex__cards{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2vw,1.5rem);} .ak-flex__card{background:var(--site-surface);border:1px solid var(--site-border);border-radius:var(--site-radius-lg); overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--site-shadow-sm); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;} .ak-flex__card:hover{transform:translateY(-4px);box-shadow:var(--site-shadow-lg);border-color:var(--site-primary-light);} .ak-flex__card-media{position:relative;overflow:hidden;} .ak-flex__card-media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s ease;} .ak-flex__card:hover .ak-flex__card-media img{transform:scale(1.04);} .ak-flex__card-body{padding:var(--site-space-5);display:flex;flex-direction:column;gap:.5rem;flex:1;} .ak-flex__card-body h4{font-family:var(--site-font-heading);font-weight:700;font-size:1.1rem;margin:0;letter-spacing:-.01em;line-height:1.3;} .ak-flex__card-body p{color:var(--site-muted);font-size:.94rem;margin:0;line-height:1.6;} .ak-flex__card-sub{color:var(--site-primary)!important;font-weight:600;font-size:.88rem!important;} .ak-flex__badge{align-self:flex-start;background:var(--site-primary-soft);color:var(--site-primary); font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase; padding:.28rem .65rem;border-radius:var(--site-radius-full);} /* Team cards intentionally use the same complete card treatment as every other card: a full-width contextual image, then role and description. This avoids detached circular portraits and gives each generated profile a clear visual container. */ /* steps: CSS counter — a numbered process needs no photo, so no image slot is enumerated for this variant (see image-enrichment.service.ts). */ .ak-flex__cards[data-variant="steps"]{counter-reset:ak-step;} .ak-flex__cards[data-variant="steps"] .ak-flex__card{counter-increment:ak-step;position:relative;padding-top:var(--site-space-5);} .ak-flex__cards[data-variant="steps"] .ak-flex__card::before{content:counter(ak-step); position:absolute;top:var(--site-space-4);left:var(--site-space-5); width:2.25rem;height:2.25rem;display:inline-flex;align-items:center;justify-content:center; border-radius:var(--site-radius-full);background:var(--site-primary);color:var(--site-on-primary,#fff); font-family:var(--site-font-heading);font-weight:800;font-size:1rem;} .ak-flex__cards[data-variant="steps"] .ak-flex__card-body{padding-top:calc(var(--site-space-5) + 2rem);} /* stats */ .ak-flex__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--site-space-4);} .ak-flex__stat{padding:1rem 1.1rem;background:var(--site-primary-soft);border-radius:var(--site-radius-md);text-align:center;} .ak-flex__stat b{display:block;font-family:var(--site-font-heading);font-size:1.75rem;font-weight:800;color:var(--site-primary);letter-spacing:-.02em;} .ak-flex__stat span{color:var(--site-fg-soft);font-size:.9rem;} /* image + text */ .ak-flex__imagetext{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,3vw,2.5rem);align-items:center;} .ak-flex__imagetext-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--site-radius-lg);display:block;box-shadow:var(--site-shadow-md);} .ak-flex__imagetext-body p{color:var(--site-fg-soft);line-height:1.75;margin:.6rem 0 var(--site-space-4);} /* buttons + logos */ .ak-flex__buttons{display:flex;flex-wrap:wrap;gap:.75rem;} .ak-flex__logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.25rem,4vw,3rem);} .ak-flex__logo img{height:clamp(1.75rem,4vw,2.5rem);width:auto;object-fit:contain;opacity:.7; filter:grayscale(1);transition:opacity .2s ease,filter .2s ease;} .ak-flex__logo img:hover{opacity:1;filter:grayscale(0);} /* ---- footer ------------------------------------------------------------ */ .ak-footer{background:var(--site-footer-bg);color:var(--site-on-dark);padding:clamp(3.5rem,7vw,5.75rem) clamp(1rem,4vw,2rem) clamp(1.5rem,3vw,2.25rem);} .ak-footer__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,3.5rem);align-items:start;} .ak-footer__brand{max-width:30rem;} .ak-footer h3{margin:0 0 var(--site-space-3);color:#fff;} /* The footer prints the same brand name as the header, so it wears the same wordmark identity — one logo appearing twice on the page, not a logo and a heading. It reads the same knobs the navbar wordmark does. Two things are deliberately NOT taken from them: size, which stays the footer's own because a wordmark is a voice and not a fixed measure; and colour, because this sits on the dark footer band where a preset's brand-derived ink would go near-black. As in the navbar rule, the fallbacks here are "classic"'s own identity — the same caps/slant it wears in the header — because classic can hold no scoped rules. Keep the two sets in step. */ .ak-footer__brand-name{display:flex;align-items:center;gap:.55rem; font-family:var(--site-font-wordmark,var(--site-font-heading)); font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.15; font-weight:var(--ak-wordmark-weight,700); font-style:var(--ak-wordmark-slant,italic); letter-spacing:var(--ak-wordmark-tracking,.01em); text-transform:var(--ak-wordmark-case,uppercase);} .ak-footer__brand-name::before{content:"";width:.65rem;height:.65rem;border-radius:999px;background:var(--site-accent);box-shadow:0 0 0 4px rgba(var(--site-primary-rgb),.08);flex:0 0 auto;} .ak-footer__column-title{font-family:var(--site-font-body);font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--site-accent)!important;} .ak-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;} .ak-footer a{color:var(--site-on-dark);text-decoration:none;transition:opacity .16s ease,color .16s ease,transform .16s ease;opacity:.8;} .ak-footer a:hover{opacity:1;color:#fff;} .ak-footer a:focus-visible{outline:2px solid var(--site-accent);outline-offset:4px;border-radius:2px;} .ak-footer__tagline{margin:0;color:var(--site-on-dark);opacity:.76;line-height:1.65;max-width:25rem;} /* ── Footer updates sign-up ───────────────────────────────────────────────── A self-contained card in the footer's column row, so it lands to the RIGHT of the link lists on desktop and drops to a full-width block on mobile. It is painted as a panel rather than bare fields because the footer ground is dark and a naked input on it reads as a rendering fault. Colours come from the on-dark tokens the rest of the footer already uses, so it re-themes with the site and needs no per-preset work. */ .ak-footer__signup{ display:flex;flex-direction:column;align-items:stretch;gap:.7rem; color:inherit; padding:clamp(1.1rem,2.2vw,1.5rem); border-radius:var(--site-radius-lg,14px); border:1px solid color-mix(in srgb,currentColor 20%,transparent); background:color-mix(in srgb,currentColor 7%,transparent); min-width:0; } .ak-footer__signup-title{ margin:0;font-family:var(--site-font-heading);font-size:1.02rem;font-weight:700; letter-spacing:-.01em;color:inherit; } .ak-footer__signup-body{ margin:0;color:inherit;opacity:.75;font-size:.88rem;line-height:1.55; } .ak-footer__signup-input{ width:100%;min-width:0;box-sizing:border-box; padding:.7rem .85rem;font:inherit;font-size:.92rem; border-radius:var(--site-radius-md,10px); border:1px solid color-mix(in srgb,currentColor 30%,transparent); background:color-mix(in srgb,currentColor 8%,transparent); color:inherit; } .ak-footer__signup-input::placeholder{color:color-mix(in srgb,currentColor 58%,transparent);} .ak-footer__signup-input:focus{ outline:none;border-color:var(--site-primary-light); box-shadow:0 0 0 3px color-mix(in srgb,var(--site-primary) 30%,transparent); } .ak-footer__signup-btn{ width:100%;justify-content:center;gap:.5rem; } .ak-footer__signup-icon{width:1.05em;height:1.05em;flex:none;} .ak-footer__signup-note{ margin:0;color:inherit;opacity:.6;font-size:.76rem;line-height:1.45; } .ak-footer__contact{font-style:normal;margin:var(--site-space-4) 0 0;display:flex;flex-direction:column;gap:.85rem;} /* Icon + value on one row. A span for the address (not a link) and an for email/phone, styled the same so the block reads as one list either way. */ .ak-footer__contact-row{display:flex;align-items:center;gap:.7rem;color:var(--site-on-dark);opacity:.85;text-decoration:none;} a.ak-footer__contact-row:hover{opacity:1;color:#fff;} .ak-footer__contact-icon{display:inline-grid;place-items:center;flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:.6rem; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;} .ak-footer__contact-icon svg{width:1.05rem;height:1.05rem;} .ak-footer__contact :is(a,span){color:var(--site-on-dark);opacity:.88;font-size:.94rem;line-height:1.5;} .ak-footer__contact a{opacity:.88;} .ak-footer__contact-links{margin-top:.7rem!important;} .ak-footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--site-space-4);margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.25rem,2vw,1.75rem);border-top:1px solid rgba(255,255,255,.16); color:var(--site-on-dark);opacity:.66;font-size:.82rem;} /* ======================================================================== */ /* Tablet >= 768px */ /* ======================================================================== */ @media (min-width:768px){ .ak-navbar__links{font-size:1rem;} .ak-hero{grid-template-columns:1.05fr .95fr;padding:clamp(4rem,7vw,6rem) clamp(2rem,5vw,3rem);} .ak-hero--overlay{grid-template-columns:1fr;} .ak-product-grid__grid{grid-template-columns:repeat(2,1fr);} /* Brand column LEFT, link columns ranged beside it — the reference layout — from tablet up rather than only at 1024px. The old rule spanned the brand across every column, which stacked the links underneath it and is what made the footer read as one long single column at preview widths. */ /* ONE ROW. repeat(auto-fit,...) sized the link columns first and then had no room left for the sign-up card, which dropped to a second row underneath — a footer in two bands rather than one. Auto-flow places brand, every link column and the card on a single track instead, whatever the column count. */ .ak-footer__cols{ grid-template-columns:minmax(12rem,1.1fr); grid-auto-flow:column;grid-auto-columns:minmax(6.5rem,auto); } .ak-footer__brand{grid-column:auto;} /* Two tracks wide: at one track the input and its button wrap onto three lines each and the card reads as a broken column. */ .ak-footer__signup{grid-column:auto;min-width:15rem;} .ak-product-detail{grid-template-columns:1.28fr 1fr;} /* Gallery columns are governed by the base auto-fit rule (big, even tiles that adapt) — no forced column count, so photos never shrink on wide screens. */ .ak-testimonials__grid{grid-template-columns:repeat(2,1fr);} .ak-hiw__grid{grid-template-columns:repeat(2,1fr);} .ak-about{grid-template-columns:1fr 1fr;} .ak-contact{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);} .ak-contact__intro{border-right:1px solid var(--site-border);} .ak-contact__form-fields{grid-template-columns:repeat(2,minmax(0,1fr));} .ak-contact__message-field{grid-column:1 / -1;} /* Flex cards: 2-up by default, honouring an explicit column count when set. */ .ak-flex__cards{grid-template-columns:repeat(2,1fr);} .ak-flex__stats{grid-template-columns:repeat(4,1fr);} .ak-flex__imagetext{grid-template-columns:1fr 1fr;} .ak-flex__imagetext[data-side="right"] .ak-flex__imagetext-media{order:2;} } /* ======================================================================== */ /* Laptop >= 1024px */ /* ======================================================================== */ @media (min-width:1024px){ /* Wide screens should still read as one composed page. The navbar and split hero use the same centred frame as .ak-container-backed sections, so the hero copy does not cling to the viewport edge while the offerings/about sections sit neatly under the header. Overlay heroes stay full-bleed. */ .ak-navbar{ padding-inline:max(clamp(1rem,4vw,2rem),calc((100vw - var(--site-maxw,1200px)) / 2)); } .ak-hero:not(.ak-hero--overlay){ padding-inline:max(clamp(2rem,5vw,3rem),calc((100vw - var(--site-maxw,1200px)) / 2)); } .ak-product-grid__grid{grid-template-columns:repeat(3,1fr);} .ak-hiw__grid{grid-template-columns:repeat(4,1fr);} .ak-hiw__grid[data-count="2"]{grid-template-columns:repeat(2,1fr);} .ak-hiw__grid[data-count="3"]{grid-template-columns:repeat(3,1fr);} .ak-hiw__grid[data-count="5"], .ak-hiw__grid[data-count="6"]{grid-template-columns:repeat(3,1fr);} .ak-footer__cols{ grid-template-columns:minmax(16rem,1.3fr); grid-auto-flow:column;grid-auto-columns:minmax(7rem,auto); } .ak-footer__brand{grid-column:auto;} /* No span: spanning two tracks is what pushed it onto its own row once the link columns had taken the width. It earns its size from min-width. */ .ak-footer__signup{grid-column:auto;min-width:17rem;} /* Default 3-up; an explicit columns value on the block wins. */ .ak-flex__cards{grid-template-columns:repeat(3,1fr);} .ak-flex__cards[data-columns="2"]{grid-template-columns:repeat(2,1fr);} .ak-flex__cards[data-columns="3"]{grid-template-columns:repeat(3,1fr);} .ak-flex__cards[data-columns="4"]{grid-template-columns:repeat(4,1fr);} } /* ======================================================================== */ /* Mobile drawer (< 768px): zero-JS checkbox-hack menu */ /* ======================================================================== */ @media (max-width:767.98px){ .ak-navbar__toggle{display:inline-flex;} .ak-navbar__nav{ position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:.35rem; background:var(--site-surface);border-bottom:1px solid var(--site-border);box-shadow:var(--site-shadow-md); padding:.75rem clamp(1rem,4vw,2rem) 1.25rem; opacity:0;transform:translateY(-8px);pointer-events:none;max-height:0;overflow:hidden; transition:opacity .24s ease,transform .24s ease; } .ak-navbar__links{flex-direction:column;align-items:stretch;gap:0;} .ak-navbar__links li{border-bottom:1px solid var(--site-border);} .ak-navbar__links a{display:block;padding:.85rem .25rem;} .ak-navbar__links a::after{display:none;} .ak-navbar__cta{margin-top:.6rem;width:100%;} .ak-navbar__check:checked ~ .ak-navbar__nav{opacity:1;transform:none;pointer-events:auto;max-height:80vh;overflow:auto;} .ak-navbar__check:checked ~ .ak-navbar__toggle .ak-i-menu{display:none;} .ak-navbar__check:checked ~ .ak-navbar__toggle .ak-i-close{display:inline;} } /* ======================================================================== */ /* Desktop >= 1440px */ /* ======================================================================== */ @media (min-width:1440px){ /* Wide screens get more INLINE room, not a taller trough: this rule used to re-raise the block padding to 6vw (86px a side at 1440), which undid the base rhythm on exactly the screens where the gaps were already worst. */ .ak-section{padding:clamp(2.5rem,3.2vw,4rem) var(--site-space-6);} .ak-testimonials__grid{grid-template-columns:repeat(3,1fr);} } /* ======================================================================== */ /* Preset motion + image treatment */ /* ======================================================================== */ /* Motion is expressed ONLY through the BASE tokens the reveal system composes with the tier multiplier (see "motion tokens" at the top of this sheet), so each preset gets its own character without adding a single new animation. These are --ak-base-*, NOT --ak-rise/--ak-dur/--ak-stagger: writing the final tokens here would overwrite the tier instead of scaling with it, which is the bug this split fixed. The preset decides how the motion feels; the tier decides how much of it there is. The reduced-motion block above disables all of it with !important regardless. */ /* RESCALED into the new envelope, keeping the ORDER these presets sat in rather than their old absolute values. They used to run 1.05s-1.55s with a 100-200ms step, which is where most of the "everything drifts" feeling came from: editorial-premium alone spent 200ms per line, so a four-line head took 600ms just to start its last line and another 1.55s to finish it. The spread between presets is what carries their character, not the absolute duration, so the spread is preserved and the scale is not. */ [data-design-preset="expedition"]{--ak-base-rise:44px;--ak-base-dur:720ms;--ak-base-stagger:84ms;} [data-design-preset="clean-conversion"]{--ak-base-rise:36px;--ak-base-dur:660ms;--ak-base-stagger:76ms;} [data-design-preset="editorial-premium"]{--ak-base-rise:42px;--ak-base-dur:740ms;--ak-base-stagger:88ms;} [data-design-preset="warm-local"]{--ak-base-rise:40px;--ak-base-dur:710ms;--ak-base-stagger:82ms;} /* Hover response, matched to the same character. */ [data-design-preset="expedition"] .ak-card:hover{transform:translateY(-6px);} [data-design-preset="expedition"] .ak-card:hover .ak-card__media img{transform:scale(1.06);} [data-design-preset="clean-conversion"] .ak-card:hover{transform:translateY(-2px);} [data-design-preset="clean-conversion"] .ak-card:hover .ak-card__media img{transform:scale(1.02);} /* Editorial deliberately does not lift or zoom: the photography is the subject, and a moving crop under a full-bleed portrait cheapens it. */ [data-design-preset="editorial-premium"] .ak-card:hover .ak-card__media img{transform:none;} [data-design-preset="editorial-premium"] :is(.ak-gallery__item,.ak-about__media):hover img{transform:scale(1.015);} [data-design-preset="editorial-premium"] :is(.ak-gallery__item,.ak-about__media) img{transition-duration:.9s;} [data-design-preset="warm-local"] .ak-card:hover{transform:translateY(-4px);} /* Image grade: presets deliberately do NOT override it. The tier-scaled, BRAND-TINTED bottom scrim above (--site-image-scrim / the tier rules) is what ties a photo to the tenant's colour, and it is the same in every preset — a preset changes the arrangement of the photos, never their treatment. */ /* ---- Expedition visual preset ----------------------------------------- */ /* Presentation only: business facts, catalog content and all booking links continue to come from the normal, tenant-scoped rendering pipeline. */ [data-design-preset="expedition"]{ --site-maxw:1280px; --site-radius-md:12px; --site-radius-lg:20px; --site-radius-xl:30px; --site-page-bg:color-mix(in srgb,var(--site-primary) 3%,#f8f8f5); --site-section-tint:color-mix(in srgb,var(--site-primary) 8%,#f4f4ef); /* Floating-navbar geometry. BOTH values are declared only here, and the negative pull below is derived from them — so the pill's real height and the amount the hero moves up can never drift apart. */ --ak-nav-h:80px; --ak-nav-gap:16px; } /* ONE COLOUR, AND IT IS THE OPERATOR'S OWN. Expedition used to paint its controls with --site-accent, so a tenant who picked orange as their brand got orange headings and a GREEN call to action: the loudest element on the page was the one colour they never chose. Remapping the accent to the primary at the preset root fixes every control at once — buttons, the nav CTA, badges, the figures band, prices, the eyebrow chip — and, unlike editing forty rules, it cannot drift: no rule inside this preset can reach a colour the operator did not pick. The one place the raw primary is still wrong is a dark band, where a deep brand hue disappears into near-black; those rules lift it toward white instead (see --ak-brand-lift below). */ [data-design-preset="expedition"]{ --site-accent:var(--site-primary); --site-accent-contrast:var(--site-primary-contrast); /* The brand, legible on a near-black band for ANY hue. */ --ak-brand-lift:color-mix(in srgb,var(--site-primary) 82%,#fff); /* THE PRESET'S FOUR GROUNDS, fixed rather than derived. Expedition is a dark-and-paper page: the exact bands are part of the visual language, not a tint of whatever brand hue the operator picked, so they are stated here as literals and every section below refers to one of them. Only the CONTROLS on these grounds follow the brand (see the accent remap above). band-dark tours, contact, footer band-deep the figures strip band-paper about, gallery, FAQ card-dark a tour card nav-paper the bar once it is solid */ --ak-band-dark:#12161c; --ak-band-deep:#0a0d11; --ak-band-paper:#f4f4f1; --ak-card-dark:#1e2228; /* A grey hairline, not a white wash: the card sits only a few steps above the band behind it, so the edge is what separates them. It turns brand on hover (the whole card is the hit target, so the border is the affordance). Named --ak-card-hairline, NOT --ak-card-edge: Frosted Glass already owns that name at its own root, and two presets meaning different things by one token is how the next person here gets caught out. */ --ak-card-hairline:#3d434b; --ak-nav-paper:#f3f4f1; } /* Sporty means square-ish, not pill: the controls take a small radius and keep it everywhere, so the nav CTA, the hero pair and the card button read as one family. */ [data-design-preset="expedition"] :is(.ak-btn,.ak-navbar__cta){border-radius:6px;} /* -- full-width navbar ----------------------------------------------------- The bar spans the page rather than floating as an inset pill. Over a full-bleed hero it paints nothing at all and wears light type; everywhere else — a /products page, or this page once it scrolls — it is a solid light bar with dark type. The transparent state is gated on the hero actually being there, so light-on-light is not reachable. */ [data-design-preset="expedition"] .ak-section-wrap.ak-wrap--sticky{ background:transparent; padding:0; } /* The pull-up is gated on :has() so it only happens when the NEXT section is actually a full-bleed overlay hero. On a page that starts with a normal section (e.g. /products) nothing moves, and browsers without :has() simply get a conventional non-overlapping navbar — never content hidden under it. */ @supports selector(:has(*)){ [data-design-preset="expedition"] .ak-wrap--sticky:has(+ .ak-section-wrap .ak-hero--overlay){ margin-bottom:calc(-1 * var(--ak-nav-h)); } } /* DEFAULT STATE = solid light bar. Written this way round on purpose: a page that does not open with a hero (or a browser without :has()) can then never render white type on a white ground. */ [data-design-preset="expedition"] .ak-navbar{ height:var(--ak-nav-h); max-width:none;margin-inline:0; padding:0 clamp(1rem,4vw,2.5rem); border:0;border-bottom:1px solid rgba(9,13,18,.08); border-radius:0; background:var(--ak-nav-paper); box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none; } [data-design-preset="expedition"] .ak-navbar.is-scrolled{ background:color-mix(in srgb,var(--ak-nav-paper) 97%,transparent); border-bottom-color:rgba(9,13,18,.1); box-shadow:0 10px 26px -20px rgba(8,12,18,.55); -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px); } /* OVER A FULL-BLEED HERO, BEFORE ANY SCROLL: no bar at all. */ @supports selector(:has(*)){ [data-design-preset="expedition"] .ak-wrap--sticky:has(+ .ak-section-wrap .ak-hero--overlay) .ak-navbar:not(.is-scrolled){ background:transparent;border-bottom-color:transparent;box-shadow:none; } [data-design-preset="expedition"] .ak-wrap--sticky:has(+ .ak-section-wrap .ak-hero--overlay) .ak-navbar:not(.is-scrolled) :is(.ak-navbar__brand,.ak-navbar__wordmark){ color:#fff; } [data-design-preset="expedition"] .ak-wrap--sticky:has(+ .ak-section-wrap .ak-hero--overlay) .ak-navbar:not(.is-scrolled) .ak-navbar__links a{ color:rgba(255,255,255,.94); } [data-design-preset="expedition"] .ak-wrap--sticky:has(+ .ak-section-wrap .ak-hero--overlay) .ak-navbar:not(.is-scrolled) .ak-navbar__toggle{ color:#fff;border-color:rgba(255,255,255,.45); } } /* The reading-progress bar is anchored flush to a full-width navbar's bottom edge. Inside a floating pill it renders as a stray underline under the logo, so the pill presets drop it — it is a decorative indicator, not content. */ [data-design-preset="expedition"] .ak-navbar__progress, [data-design-preset="warm-local"] .ak-navbar__progress{display:none;} [data-design-preset="expedition"] .ak-navbar__brand{color:var(--site-primary-strong);letter-spacing:-.02em;font-size:1.12rem;} /* WORDMARK IDENTITY — SPORTY. Oswald is the catalogue's one condensed face; caps, heavy, and forward-leaning turns it into the mark on a race bib or a kit sponsor board. The slant is the whole point of the identity, so the tracking pulls back from the old .09em: letters that lean need less air between them, and open-tracked slanted caps read as a stretched heading rather than a logo. Size, weight, case and slant are the SHARED treatment every preset now wears (see the base rule); only the face and the tracking are this preset's own. */ [data-design-preset="expedition"]{ --ak-wordmark-weight:700;--ak-wordmark-case:uppercase; --ak-wordmark-tracking:.02em;--ak-wordmark-slant:italic; --ak-wordmark-size:clamp(1.15rem,2.5vw,2.4rem);} [data-design-preset="expedition"] .ak-navbar__wordmark{color:var(--site-primary-strong);} [data-design-preset="expedition"] .ak-navbar__brand img{height:clamp(30px,3.2vw,40px);} /* The lockup carries type inside the image, so it cannot go as small as a bare mark and stay readable. */ [data-design-preset="expedition"] .ak-navbar__brand[data-logo-kind="lockup"] img{ height:clamp(34px,3.8vw,48px);max-width:min(56vw,340px); } [data-design-preset="expedition"] .ak-navbar__links a{ color:var(--site-fg);font-weight:700;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase; } [data-design-preset="expedition"] .ak-navbar__links a:hover, [data-design-preset="expedition"] .ak-navbar__links a[aria-current="true"]{color:var(--site-accent);} [data-design-preset="expedition"] .ak-navbar__links a::after{background:var(--site-accent);} [data-design-preset="expedition"] .ak-navbar__cta{ background:var(--site-accent);color:var(--site-accent-contrast);border-color:transparent; font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:.75rem 1.2rem; } [data-design-preset="expedition"] .ak-navbar__toggle{color:var(--site-fg);border-color:rgba(9,13,18,.16);} /* -- immersive, centred hero ----------------------------------------------- */ [data-design-preset="expedition"] .ak-hero--overlay{ min-height:100vh;min-height:100svh; padding:calc(var(--ak-nav-h) + var(--ak-nav-gap) + clamp(2.5rem,7vw,5rem)) clamp(1.25rem,6vw,4rem) clamp(5rem,8vw,6.5rem); text-align:center; } /* An even, top-to-bottom wash instead of the side gradient: the subject stays centred and readable, and the photo keeps its contrast. */ [data-design-preset="expedition"] .ak-hero--overlay::before{ background: radial-gradient(115% 85% at 50% 44%,rgba(8,12,16,.46) 0%,rgba(8,12,16,.2) 58%,rgba(8,12,16,0) 100%), linear-gradient(180deg,rgba(8,12,16,.5) 0%,rgba(8,12,16,.24) 32%,rgba(8,12,16,.36) 68%,rgba(8,12,16,.66) 100%); } /* Scroll cue (decorative, aria-hidden by being a pseudo-element). */ [data-design-preset="expedition"] .ak-hero--overlay::after{ content:"";position:absolute;left:50%;bottom:clamp(1.5rem,3vw,2.4rem);z-index:2; width:13px;height:13px;margin-left:-7px; border-right:2px solid rgba(255,255,255,.85);border-bottom:2px solid rgba(255,255,255,.85); transform:rotate(45deg);pointer-events:none; animation:ak-exp-scrollcue 2.4s ease-in-out infinite; } @keyframes ak-exp-scrollcue{ 0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5;} 50%{transform:rotate(45deg) translate(4px,4px);opacity:1;} } @media (prefers-reduced-motion:reduce){ [data-design-preset="expedition"] .ak-hero--overlay::after{animation:none;opacity:.7;} } [data-design-preset="expedition"] .ak-hero--overlay .ak-hero__content{max-width:920px;margin-inline:auto;} [data-design-preset="expedition"] .ak-hero--overlay .ak-eyebrow{ background:var(--site-accent);color:var(--site-accent-contrast); border-radius:var(--site-radius-full);padding:.5rem 1.05rem; font-size:.7rem;font-weight:800;letter-spacing:.18em; -webkit-backdrop-filter:none;backdrop-filter:none; } [data-design-preset="expedition"] .ak-hero--overlay .ak-h1{ margin-inline:auto;max-width:16ch; font-size:clamp(2.9rem,8.4vw,6.6rem);line-height:.9;letter-spacing:-.035em;font-weight:900; text-transform:uppercase;text-shadow:0 6px 34px rgba(0,0,0,.45); } [data-design-preset="expedition"] .ak-hero--overlay .ak-lead{ margin-inline:auto;max-width:46ch;font-size:clamp(1.02rem,1.6vw,1.22rem); text-shadow:0 2px 18px rgba(0,0,0,.55); } [data-design-preset="expedition"] .ak-hero--overlay .ak-hero__actions{ justify-content:center;gap:clamp(.7rem,1.6vw,1rem);margin-top:clamp(1.3rem,3vw,2rem); } [data-design-preset="expedition"] .ak-hero--overlay .ak-btn{ font-weight:800;font-size:.86rem;letter-spacing:.07em;text-transform:uppercase;padding:1.1rem 1.85rem; } /* The pair is SOLID BRAND + OUTLINE. The outline used to be a blurred white wash, which over a bright photo turned into a second filled button and the two competed; a hairline keeps one primary action on the page. */ [data-design-preset="expedition"] .ak-hero--overlay .ak-btn--ghost{ background:transparent;border-color:rgba(255,255,255,.6);color:#fff; -webkit-backdrop-filter:none;backdrop-filter:none; } [data-design-preset="expedition"] .ak-hero--overlay .ak-btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;} /* The tours sit on the same near-black band as the rest of the preset, so a dark card is a card ON something rather than a slab floating on cream. */ [data-design-preset="expedition"] [data-ak-section-type="ProductGrid"]{background:var(--ak-band-dark);} [data-design-preset="expedition"] [data-ak-section-type="ProductGrid"] .ak-section{background:transparent;} [data-design-preset="expedition"] [data-ak-section-type="ProductGrid"] :is(.ak-heading,.ak-lead){color:var(--site-on-dark);} [data-design-preset="expedition"] [data-ak-section-type="ProductGrid"] .ak-eyebrow{color:var(--ak-brand-lift);} [data-design-preset="expedition"] .ak-product-grid__grid{gap:clamp(1rem,2.3vw,1.7rem);} [data-design-preset="expedition"] .ak-card{ background:var(--ak-card-dark);border:1px solid var(--ak-card-hairline);border-radius:6px; box-shadow:0 16px 34px -20px rgba(0,0,0,.62); } [data-design-preset="expedition"] .ak-card:hover{border-color:var(--site-primary);box-shadow:0 24px 42px -22px rgba(0,0,0,.75);} [data-design-preset="expedition"] .ak-card__media img{aspect-ratio:16/10;} [data-design-preset="expedition"] .ak-card__title{ color:#fff;text-transform:uppercase;letter-spacing:.01em;font-weight:600;font-size:1.05rem; } [data-design-preset="expedition"] :is(.ak-card__desc,.ak-card__metarow,.ak-card__meta,.ak-card__price small){color:rgba(255,255,255,.7);} [data-design-preset="expedition"] .ak-card__badge{ background:var(--site-primary);color:var(--site-primary-contrast); border-radius:3px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;font-size:.66rem; } /* Price and CTA share ONE row. .ak-card__foot is display:contents in the base sheet precisely so a preset can give it a real display and get the row with no markup of its own. */ [data-design-preset="expedition"] .ak-card__foot{ display:flex;align-items:center;justify-content:space-between;gap:1rem; margin-top:auto;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.12); } [data-design-preset="expedition"] .ak-card__footer{margin-top:0;padding-top:0;} [data-design-preset="expedition"] .ak-card__price{color:var(--site-primary);font-size:1.1rem;} [data-design-preset="expedition"] .ak-card__foot .ak-btn{ width:auto;flex:0 0 auto;padding:.7rem 1.4rem;font-size:.8rem; } [data-design-preset="expedition"] .ak-card .ak-btn--primary{background:var(--site-primary);color:var(--site-primary-contrast);} /* THE PAPER BAND. About, gallery and FAQ are the reading half of the page, so they share one light ground and let the dark bands either side of them do the shouting. About used to be dark here; its light-type and inverted stat overrides went with it, because on paper they were white on white — the general light-ground stat rules further down now apply to it unchanged. */ [data-design-preset="expedition"] :is([data-ak-section-type="About"],[data-ak-section-type="Gallery"],[data-ak-section-type="FAQ"]){background:var(--ak-band-paper);} [data-design-preset="expedition"] :is([data-ak-section-type="About"],[data-ak-section-type="Gallery"],[data-ak-section-type="FAQ"]) .ak-section{background:transparent;} /* THE CTA WEARS THE DESIGN'S GROUND, NOT THE BRAND HUE. It used to blend 72% of the tenant's primary into the band, so the loudest block on the page changed colour with every brand — a red operator got a red CTA, a green one a green CTA, and neither matched the near-black the rest of the preset is built from. The band is now the same --ak-band-dark as the tours and contact sections; the BRAND still shows, on the button, the badge and the assurance ticks, which is where an action colour belongs. */ [data-design-preset="expedition"] .ak-cta{ background:var(--ak-band-dark); border-radius:var(--site-radius-xl); } /* Same reason as Editorial's band: this gradient is mixed toward near-black, not toward the brand, so the text must be explicitly light. Left on the --site-primary-contrast token it goes near-black for any light brand. */ [data-design-preset="expedition"] .ak-cta, [data-design-preset="expedition"] .ak-cta :is(.ak-heading,h1,h2,h3){color:#fff;} [data-design-preset="expedition"] .ak-cta .ak-lead{color:rgba(255,255,255,.84);} [data-design-preset="expedition"] .ak-cta__badge{color:#fff;border-color:rgba(255,255,255,.3);} [data-design-preset="expedition"] .ak-cta__assurance{color:rgba(255,255,255,.82);} [data-design-preset="expedition"] .ak-gallery__item{border-radius:var(--site-radius-lg);} @media (min-width:1024px){ /* The tours grid stays THREE EQUAL CARDS. It used to promote the first product to a full-width horizontal card, which made the row a hierarchy the operator never asked for: whichever product happened to be first became the hero of the section, and a catalogue reordered in the editor silently re-crowned a different one. Equal cards also match the rest of the preset, where nothing is bigger than anything else without a reason. */ [data-design-preset="expedition"] .ak-product-grid__grid{align-items:stretch;} [data-design-preset="expedition"] .ak-gallery__item:only-child{grid-column:1 / -1;} } @media (max-width:767.98px){ [data-design-preset="expedition"]{--ak-nav-h:70px;--ak-nav-gap:12px;} /* The bar is full-width again, so the drawer sits flush beneath it as a band rather than floating as a card off an inset pill. */ [data-design-preset="expedition"] .ak-navbar__nav{ top:100%;border-radius:0; border:0;border-bottom:1px solid rgba(9,13,18,.1); background:rgba(255,255,255,.98); padding:.6rem 1rem 1rem; } [data-design-preset="expedition"] .ak-navbar__links a{font-size:.92rem;} /* The OPEN DRAWER paints its own light card while the bar above it is still transparent over the hero — so its links must drop back to dark type or they would be white on white. Same selector prefix as the transparent-state rule plus the drawer, so it outranks it without !important. */ @supports selector(:has(*)){ [data-design-preset="expedition"] .ak-wrap--sticky:has(+ .ak-section-wrap .ak-hero--overlay) .ak-navbar:not(.is-scrolled) .ak-navbar__nav .ak-navbar__links a{ color:var(--site-fg); } } [data-design-preset="expedition"] .ak-hero--overlay{ min-height:100vh;min-height:100svh; padding-bottom:clamp(4rem,14vw,5.5rem); } [data-design-preset="expedition"] .ak-hero--overlay .ak-h1{font-size:clamp(2.6rem,12.5vw,4.2rem);max-width:14ch;} [data-design-preset="expedition"] .ak-hero--overlay .ak-hero__actions .ak-btn{flex:1 1 auto;} } /* ---- Clean Conversion visual preset ------------------------------------ */ /* The universal default: bright, calm, decision-first. Nothing here darkens the page or shrinks the reading size — the goal is "compare and book quickly". */ [data-design-preset="clean-conversion"]{ --site-maxw:1180px; --site-radius-md:10px; --site-radius-lg:14px; --site-radius-xl:18px; /* WHITE, ONE TINT, ONE NAVY. The preset had four near-whites in play — a #fbfbfc page, a brand-mixed band, a #f3f5f8 tint, and --site-surface-muted, which was never overridden and so resolved from the tenant's NEUTRAL scale to a cool #eef1f5. Four off-whites within a few RGB steps do not read as a system; they read as inconsistency, and the cool one reads as a different design entirely. The page is white. A FEW bands take the blue tint — the figures strip and the gallery, plus anything the generator marks "muted" — and the navbar and footer are stated outright. Nothing resolves through a neutral scale. */ /* ONE ACTION COLOUR, AND IT IS THE BRAND. The hero's primary button is .ak-btn--accent in every preset, so on a blue design it came out in the tenant's ACCENT — a green button leading a blue page, while the navbar CTA and every card button beside it were blue. No rule in this preset reaches for the accent deliberately; remapping it at the root fixes the hero button and guarantees nothing else can drift to a second action colour either. */ --site-accent:var(--site-primary); --site-accent-contrast:var(--site-primary-contrast); --ak-white:#ffffff; --ak-tint:#e9f0fb; /* the occasional band */ --ak-nav:#f2f7fd; /* the bar at rest */ --ak-nav-scrolled:#e6effc; /* and once the page moves */ --ak-navy:#0e2033; /* the close: footer and CTA */ --site-page-bg:var(--ak-white); --site-bg:var(--ak-white); --site-section-tint:var(--ak-tint); --site-surface-muted:var(--ak-tint); } /* MOST SECTIONS ARE CLEAN WHITE. The renderer stripes content sections surface/tint by index and the generator may mark them through style.background; both routes land on white here, so the page reads as one bright sheet rather than a ladder of grey-blues. */ [data-design-preset="clean-conversion"] :is(.ak-band--surface,.ak-band--tint), [data-design-preset="clean-conversion"] .ak-section-wrap:is([data-bg="surface"],[data-bg="muted"],[data-bg="default"]){ background:var(--ak-white); } /* THE EXCEPTIONS, and there are exactly TWO. The tint is spent on the figures strip and the gallery — a numbers row and a wall of photographs both want a ground to sit against, and two stops is enough to give a long page a rhythm. Everything else stays white, including a section the generator marked "muted": letting that map to the tint put four of seven sections on it, which is not "a few". The choice is made HERE, by section type, so it is the same on every site rather than depending on what the model happened to write. */ [data-design-preset="clean-conversion"] .ak-section-wrap:is([data-ak-section-type="Stats"],[data-ak-section-type="Gallery"]){ background:var(--ak-tint); } /* "Put ONE section on a dark band" must be this design's navy, not the cool near-black the neutral scale would hand it. */ [data-design-preset="clean-conversion"] .ak-section-wrap[data-bg="dark"]{ background:var(--ak-navy); } [data-design-preset="clean-conversion"] .ak-btn{border-radius:10px;font-weight:700;} /* The scroll state has to be READABLE, not merely present. Both states used to be a flat #fff separated by a -14px-spread shadow, which composites to almost nothing: the bar looked identical whether the page was at the top or halfway down, so it read as broken rather than as restrained. The resting state now sits slightly back — a hairline and no elevation — and the scrolled state comes forward with a real shadow and a brand-tinted rule under it, so the transition is legible while the preset stays white and clean. */ [data-design-preset="clean-conversion"] .ak-navbar{ background:var(--ak-nav); border-bottom:1px solid color-mix(in srgb,var(--site-primary) 22%,var(--site-border)); -webkit-backdrop-filter:none;backdrop-filter:none; box-shadow:none; } [data-design-preset="clean-conversion"] .ak-navbar.is-scrolled{ background:var(--ak-nav-scrolled); border-bottom-color:color-mix(in srgb,var(--site-primary) 48%,var(--site-border)); box-shadow:0 10px 24px -12px rgba(16,24,40,.28),0 2px 6px -2px rgba(16,24,40,.10); } [data-design-preset="clean-conversion"] .ak-navbar__cta{background:var(--site-primary);color:var(--site-primary-contrast);border-color:transparent;} /* WORDMARK IDENTITY — BIG SLANTED CAPS, matching classic. The running type stays the plain professional grotesk this preset is built on; only the LOGO takes a voice — Oswald, set large in tightly-tracked caps with a strong forward lean, so the brand reads as a mark rather than as the first word of the navigation. Colour is deliberately left to the base rule's --site-heading (a near-black with a trace of the brand hue) rather than --site-primary-strong: at this size a saturated brand colour stops being a logo and becomes a banner. */ [data-design-preset="clean-conversion"]{ --ak-wordmark-weight:700;--ak-wordmark-case:uppercase; --ak-wordmark-tracking:.01em;--ak-wordmark-slant:italic; --ak-wordmark-size:clamp(1.15rem,2.5vw,2.4rem);} /* The scrim clears the RIGHT of the photo and turns the left into a readable light panel — dark text on the photo, no separate card element needed. */ [data-design-preset="clean-conversion"] .ak-hero--overlay{ min-height:clamp(30rem,68vh,44rem); padding:clamp(3rem,6vw,5rem) clamp(1.25rem,5vw,3.5rem); color:var(--site-fg); } /* A CLEAN PANEL, NOT A HAZE. The scrim used to open at 82% white and thin out across 76% of the hero, so the copy sat on a translucent milk: the photograph's detail — bikes, trees, gravel — showed straight through the letterforms at 18-34%, which reads as blurred, low-contrast type on a washed-out picture. Neither half worked; the text was hard to read AND the photo looked foggy. The wash now sits at 95% under the copy — high enough that the type reads as type on white, low enough that the photograph is still faintly there rather than cut away — and it falls off smoothly to nothing by 74%. A first attempt used FLAT #fff to 40%, which fixed the contrast and introduced a worse problem: a hard white block with a visible vertical edge where the picture suddenly began. The point is a veil, not a panel. */ [data-design-preset="clean-conversion"] .ak-hero--overlay::before{ background:linear-gradient(96deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 14%, rgba(255,255,255,.55) 25%, rgba(255,255,255,0) 35%); } [data-design-preset="clean-conversion"] .ak-hero--overlay .ak-hero__content{max-width:560px;} [data-design-preset="clean-conversion"] .ak-hero--overlay :is(.ak-heading,.ak-h1){color:var(--site-heading);text-shadow:none;} [data-design-preset="clean-conversion"] .ak-hero--overlay .ak-h1{font-size:clamp(2.15rem,4.6vw,3.4rem);line-height:1.06;letter-spacing:-.025em;} [data-design-preset="clean-conversion"] .ak-hero--overlay .ak-h1__accent{color:var(--site-primary);} [data-design-preset="clean-conversion"] .ak-hero--overlay .ak-lead{color:var(--site-fg-soft);text-shadow:none;} [data-design-preset="clean-conversion"] .ak-hero--overlay .ak-eyebrow{ background:var(--site-primary-soft);color:var(--site-primary); -webkit-backdrop-filter:none;backdrop-filter:none; } [data-design-preset="clean-conversion"] .ak-hero--overlay .ak-btn--ghost{background:#fff;color:var(--site-primary);border-color:var(--site-border);} [data-design-preset="clean-conversion"] .ak-hero--overlay .ak-btn--ghost:hover{background:var(--site-primary-soft);border-color:var(--site-primary-light);} [data-design-preset="clean-conversion"] .ak-card{ background:#fff;border-color:var(--site-border);box-shadow:0 1px 2px rgba(16,24,40,.06); } [data-design-preset="clean-conversion"] .ak-card:hover{box-shadow:0 14px 28px -18px rgba(16,24,40,.45);} [data-design-preset="clean-conversion"] .ak-card__media img{aspect-ratio:3/2;} [data-design-preset="clean-conversion"] .ak-card__price{font-weight:800;} /* ---- Editorial Premium visual preset ----------------------------------- */ /* Restrained, magazine-like: serif display type, hairline chrome, big quiet images. Uses the system serif stack — no webfont is fetched. */ [data-design-preset="editorial-premium"]{ --site-maxw:1240px; --site-radius-sm:2px; --site-radius-md:2px; --site-radius-lg:3px; --site-radius-xl:4px; --site-radius-full:3px; --ak-paper:#faf9f7; /* Three darks, each with a job: the bar sits above the page, the panels are the dark sections cut into it, and the ink is the footer the page ends on. They step down deliberately -- naming them stops the next edit from inventing a fourth near-black by hand. */ --ak-bar:#1e1c1a; --ak-panel:#100f0d; --ak-ink:#0d0b0a; /* One light for type on all three. */ --ak-on-dark:#f6f4ef; /* The figures wear the brand, but a deep brand disappears into the panel, so it is lifted toward the paper first -- the same trick Expedition uses. */ --ak-brand-lift:color-mix(in srgb,var(--site-accent) 74%,#f6f4ef); --site-page-bg:var(--ak-paper); /* ONE ground, not a stack of near-identical off-whites. This preset was painting FIVE: the page paper, a #f1eee9 tint, a #f5f1e8 contact band, and -- worse -- var(--site-surface) and var(--site-surface-muted) straight from the tenant neutral scale, which is cool grey and has nothing to do with this warm paper. Sections landed on whichever one the renderer happened to stripe them with, so the page read as faint mismatched bands rather than a continuous sheet. Same fault, and the same fix, as warm-local. */ --site-section-tint:var(--ak-paper); /* NO --site-font-heading here. There used to be a system serif stack ("Iowan Old Style", Palatino, ...) on this line, and because this block lands on it beat the :root value the renderer emits from the font catalogue for every descendant. The effect: this preset declared its heading face in PRESET_TYPOGRAPHY, the editor told the user which two faces the design uses, the renderer downloaded that .woff2 on every page load -- and then the headings rendered in whatever serif the reader's OS happened to have. A preset styles; it does not pick the typeface behind the catalogue's back. */ --ak-nav-h:90px; } [data-design-preset="editorial-premium"] .ak-section{padding-block:clamp(2.5rem,4.2vw,3.75rem);} /* The renderer stripes every non-full-bleed section with ak-band--surface or ak-band--tint, and a tenant can additionally ask for data-bg surface/muted. Left alone those resolve off the neutral scale. Pinned here so every band on the page is the same sheet of paper. */ [data-design-preset="editorial-premium"] :is(.ak-band--surface,.ak-band--tint), [data-design-preset="editorial-premium"] .ak-section-wrap:is([data-bg="surface"],[data-bg="muted"],[data-bg="default"]){ background:var(--ak-paper); } /* "Put ONE section on a dark band" stays available -- it just uses this preset's own ink rather than the neutral scale's cool near-black. */ [data-design-preset="editorial-premium"] .ak-section-wrap[data-bg="dark"]{ background:var(--ak-ink); } /* NO GAP BETWEEN SECTIONS. The wrap carries the band colour and the section inside carries its own, so any padding on the WRAP shows as a strip of page between them -- which is what put a pale band between the dark contact section and the dark footer. It was invisible while every section was paper on paper; the moment sections started painting themselves it became a seam. The section's own padding already provides the rhythm. */ [data-design-preset="editorial-premium"] .ak-section-wrap[data-density="spacious"]{ padding-block:0; } [data-design-preset="editorial-premium"] .ak-heading{font-weight:500;letter-spacing:-.015em;} [data-design-preset="editorial-premium"] .ak-section-wrap.ak-wrap--sticky{background:transparent;} /* Same :has() gate as Expedition: the nav only lifts over a full-bleed hero, so a page that starts with an ordinary section is never overlapped. */ @supports selector(:has(*)){ [data-design-preset="editorial-premium"] .ak-wrap--sticky:has(+ .ak-section-wrap .ak-hero--overlay){ margin-bottom:calc(-1 * var(--ak-nav-h)); /* Dark enough at the top that the white nav text keeps contrast even before the JS is-scrolled state lands (or if scripts never run at all). */ background:linear-gradient(180deg,rgba(10,9,8,.62) 0%,rgba(10,9,8,.2) 68%,rgba(10,9,8,0) 100%); } } /* The bar is FULL-BLEED and its CONTENT is what gets centred, via a padding that grows with the viewport. It used to be the other way round — a max-width on the navbar itself — and the scrolled background then painted only that centred box, leaving a dark slab floating mid-page on any viewport wider than the cap. It looked right in the editor purely because that preview pane is narrower than the cap, so the editor and the published site never matched. */ [data-design-preset="editorial-premium"] .ak-navbar{ height:var(--ak-nav-h); padding-inline:max(clamp(1rem,4vw,2rem),calc((100% - 1240px) / 2)); background:var(--ak-bar);border-bottom:0;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none; } [data-design-preset="editorial-premium"] .ak-navbar.is-scrolled{ background:var(--ak-bar);border-bottom:0;box-shadow:none; -webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px); } /* Flush with the bar's edge instead of the base -1px, which read as a stray line hanging under a solid bar. */ [data-design-preset="editorial-premium"] .ak-navbar__progress{bottom:0;background:var(--site-accent);} [data-design-preset="editorial-premium"] :is(.ak-navbar__brand,.ak-navbar__links a,.ak-navbar__toggle){color:#fff;} /* WORDMARK IDENTITY — REFINED HIGH-CONTRAST SERIF. DM Serif Display, not the face the headings use: a masthead should be a voice apart from the running copy, and DM's sharper thick/thin and vertical stress is the more engraved of the two. It ships one weight (400) — correct for a display serif, where extra weight only muddies the hairlines — so the presence comes from SIZE and a whisper of tracking instead. Colour is INHERITED from the brand anchor above: this preset's bar is a fixed dark band, so a brand-derived colour would go near-black on it. WEIGHT CAVEAT: the face is a single-weight (400) design, so the shared 700 is reached by SYNTHETIC bold — the engine smears the glyphs rather than drawing a real bold cut, which on a high-contrast serif thickens the hairlines it is prized for. Serif caps also need more air than the sans presets, hence the widest tracking of the five. */ [data-design-preset="editorial-premium"]{ --ak-wordmark-weight:700;--ak-wordmark-case:uppercase; --ak-wordmark-tracking:.035em;--ak-wordmark-slant:italic; --ak-wordmark-size:clamp(1.15rem,2.5vw,2.4rem);} [data-design-preset="editorial-premium"] .ak-navbar__wordmark{color:inherit;} [data-design-preset="editorial-premium"] .ak-navbar__toggle{border-color:rgba(255,255,255,.4);} [data-design-preset="editorial-premium"] .ak-navbar__links a{ font-size:.76rem;letter-spacing:.19em;text-transform:uppercase;font-weight:600; } [data-design-preset="editorial-premium"] .ak-navbar__links a:hover, [data-design-preset="editorial-premium"] .ak-navbar__links a[aria-current="true"]{color:var(--site-accent);} [data-design-preset="editorial-premium"] .ak-navbar__cta{ background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55); font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600; } [data-design-preset="editorial-premium"] .ak-hero--overlay{ min-height:100vh;min-height:100svh;align-items:end; padding:calc(var(--ak-nav-h) + 4rem) clamp(1.5rem,6vw,4.5rem) clamp(4rem,8vw,6rem); } [data-design-preset="editorial-premium"] .ak-hero--overlay::before{ background:linear-gradient(180deg,rgba(12,11,9,.4) 0%,rgba(12,11,9,.08) 30%,rgba(12,11,9,.58) 100%); } [data-design-preset="editorial-premium"] .ak-hero--overlay .ak-hero__content{max-width:840px;} [data-design-preset="editorial-premium"] .ak-hero--overlay .ak-h1{ font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:1.02;letter-spacing:-.015em;font-weight:500; text-shadow:0 4px 30px rgba(0,0,0,.35); } [data-design-preset="editorial-premium"] .ak-hero--overlay .ak-h1__accent{font-style:italic;} [data-design-preset="editorial-premium"] .ak-hero--overlay .ak-eyebrow{ background:transparent;padding:0;border-radius:0; font-size:.7rem;letter-spacing:.28em;font-weight:600; -webkit-backdrop-filter:none;backdrop-filter:none; } [data-design-preset="editorial-premium"] .ak-hero--overlay .ak-eyebrow::before{display:inline-block;background:rgba(255,255,255,.75);} [data-design-preset="editorial-premium"] .ak-hero--overlay .ak-btn{ border-radius:2px;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:1.05rem 1.9rem; } [data-design-preset="editorial-premium"] .ak-hero--overlay .ak-btn--ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;} [data-design-preset="editorial-premium"] .ak-card{background:transparent;border:0;border-radius:0;box-shadow:none;} [data-design-preset="editorial-premium"] .ak-card:hover{box-shadow:none;transform:none;} [data-design-preset="editorial-premium"] .ak-card__media img{aspect-ratio:4/5;border-radius:0;} [data-design-preset="editorial-premium"] .ak-card__title{font-weight:500;letter-spacing:-.01em;} [data-design-preset="editorial-premium"] .ak-gallery__item{border-radius:0;} /* ---- Warm Local visual preset ------------------------------------------ */ /* Approachable and human: cream page, generous rounding, soft shadows. Reads as a neighbourhood business rather than a corporate booking funnel. */ [data-design-preset="warm-local"]{ --site-maxw:1140px; --site-radius-md:16px; --site-radius-lg:24px; --site-radius-xl:32px; --ak-nav-h:78px; --ak-nav-gap:14px; /* TWO GROUNDS, AND ONLY TWO. The preset had drifted to five: the paper page (#fdf8f1), a lifted band (#fffdf9), a deeper tint (#f7ece0), a contact band of its own (#fff5e9), and — worst — --site-surface-muted, which was never overridden and so came from the tenant's NEUTRAL scale: a cool #eef1f5. A section the generator marked "muted" therefore rendered blue-grey in the middle of a cream page. Five near-identical off-whites do not read as a system; they read as dirt. So the whole preset now paints from two creams a shade apart, white for panels that sit ON them, and one brown to close. Every semantic band value the editor or the generator can write is mapped onto those below — nothing is left to resolve through a neutral scale this design never chose. */ --ak-cream:#fdf8f1; /* the paper: the page and EVERY content band */ --ak-brown:#2a1b0f; /* the close: CTA and footer */ --site-page-bg:var(--ak-cream); --site-bg:var(--ak-cream); --site-section-tint:var(--ak-cream); --site-surface-muted:var(--ak-cream); } [data-design-preset="warm-local"] .ak-btn{font-weight:700;} /* NO STRIPE AT ALL — one continuous sheet of paper. The renderer alternates content sections surface/tint by index, and this preset used to answer with two creams a shade apart (#fffdf9 / #fdf8f1). Seven RGB steps is too little to read as a designed band and too much to disappear: what it actually produced was a hard horizontal seam across the page at every section boundary, which looks like a rendering fault rather than a rhythm. So the paper runs unbroken and the SEPARATION COMES FROM THE CARDS — white, rounded, shadowed panels sitting on it, which is what this design is made of anyway. Both stripe classes and every [data-bg] the generator can write are pinned to the one cream, so no route can reintroduce an edge. */ [data-design-preset="warm-local"] :is(.ak-band--surface,.ak-band--tint), [data-design-preset="warm-local"] .ak-section-wrap:is([data-bg="surface"],[data-bg="muted"],[data-bg="default"]){ background:var(--ak-cream); } /* "Put ONE section on a dark band" is real emphasis the generator is told to use — it just must not reach for the cool near-black the neutral scale would give it. This preset's dark is its brown. */ [data-design-preset="warm-local"] .ak-section-wrap[data-bg="dark"]{ background:var(--ak-brown); } /* The alternating stripe has to stay ON the paper. --site-surface is white, so an untouched surface band cut a hard white block across the middle of the page and undid the ground the whole preset rests on. Both stripes are now paper, one a shade lifted from the other. */ [data-design-preset="modern-utility"] .ak-band--surface{ background:color-mix(in srgb,var(--ak-paper) 62%,#fff); } [data-design-preset="modern-utility"] .ak-band--tint{background:var(--ak-paper);} [data-design-preset="warm-local"] .ak-section-wrap.ak-wrap--sticky{ background:transparent;padding:var(--ak-nav-gap) clamp(.75rem,3vw,1.5rem) 0; } @supports selector(:has(*)){ [data-design-preset="warm-local"] .ak-wrap--sticky:has(+ .ak-section-wrap .ak-hero--overlay){ margin-bottom:calc(-1 * (var(--ak-nav-h) + var(--ak-nav-gap))); } } [data-design-preset="warm-local"] .ak-navbar{ height:var(--ak-nav-h);max-width:min(1140px,100%);margin-inline:auto; padding:0 .75rem 0 1.1rem;border-radius:var(--site-radius-lg); background:rgba(253,248,241,.95);border:1px solid rgba(120,80,40,.16); box-shadow:0 10px 26px -18px rgba(90,60,30,.55); } [data-design-preset="warm-local"] .ak-navbar.is-scrolled{background:#fdf8f1;box-shadow:0 14px 30px -20px rgba(90,60,30,.6);} [data-design-preset="warm-local"] .ak-navbar__cta{background:var(--site-primary);color:var(--site-primary-contrast);border-color:transparent;} /* WORDMARK IDENTITY — HANDCRAFTED. Fraunces rather than the Lora used for headings: Lora is a book face, evenly drawn and impersonal at logo size, while Fraunces' soft terminals and slightly irregular curves read as lettered by hand — which is the whole promise of a warm local business. It now wears the shared caps/slant treatment like every other preset, so the warmth has to come from the FACE alone rather than from the casing — which is exactly why the face is still Fraunces and not a grotesk. Its softer, wider caps want a little more tracking than the condensed sans presets. */ [data-design-preset="warm-local"]{ --ak-wordmark-weight:700;--ak-wordmark-case:uppercase; --ak-wordmark-tracking:.03em;--ak-wordmark-slant:italic; --ak-wordmark-size:clamp(1.15rem,2.5vw,2.4rem);} [data-design-preset="warm-local"] .ak-navbar__wordmark{color:var(--site-primary-strong);} /* The hero is an inset, rounded photo card tucked under the floating nav. */ [data-design-preset="warm-local"] .ak-hero--overlay{ min-height:100vh;min-height:100svh; margin-inline:clamp(.75rem,3vw,1.5rem); border-radius:var(--site-radius-xl); padding:calc(var(--ak-nav-h) + var(--ak-nav-gap) + clamp(2rem,5vw,3.5rem)) clamp(1.5rem,5vw,3.5rem) clamp(3rem,6vw,4.5rem); } [data-design-preset="warm-local"] .ak-hero--overlay::before{ background:linear-gradient(100deg,rgba(58,34,14,.76) 0%,rgba(58,34,14,.46) 46%,rgba(58,34,14,.08) 82%); } [data-design-preset="warm-local"] .ak-hero--overlay .ak-hero__content{max-width:620px;} [data-design-preset="warm-local"] .ak-hero--overlay .ak-h1{font-size:clamp(2.3rem,5.4vw,3.9rem);line-height:1.06;letter-spacing:-.02em;} [data-design-preset="warm-local"] .ak-hero--overlay .ak-eyebrow{background:rgba(255,255,255,.94);color:var(--site-primary-strong);} [data-design-preset="warm-local"] .ak-card{ background:#fff;border-color:rgba(120,80,40,.16);border-radius:var(--site-radius-lg); box-shadow:0 14px 30px -22px rgba(90,60,30,.6); } [data-design-preset="warm-local"] .ak-card__media img{aspect-ratio:4/3;} [data-design-preset="warm-local"] .ak-card__badge{background:var(--site-accent);color:var(--site-accent-contrast);} @media (max-width:767.98px){ [data-design-preset="warm-local"]{--ak-nav-h:68px;--ak-nav-gap:10px;} [data-design-preset="warm-local"] .ak-navbar__nav{ top:calc(100% + .5rem);border-radius:var(--site-radius-md); border:1px solid rgba(120,80,40,.16);background:#fdf8f1; } [data-design-preset="warm-local"] .ak-hero--overlay{min-height:100vh;min-height:100svh;} } /* ======================================================================== */ /* Preset section styling — every remaining section, per preset */ /* ======================================================================== */ /* Everything below is presentation only. No selector here changes what data a section shows: prices, availability, product copy and booking targets all still come from the tenant-scoped render pipeline. */ /* ---- Expedition: sections ---------------------------------------------- */ [data-design-preset="expedition"] .ak-heading{letter-spacing:-.03em;font-weight:850;} [data-design-preset="expedition"] .ak-eyebrow{letter-spacing:.16em;font-weight:800;} [data-design-preset="expedition"] .ak-product-grid__viewall{ border-color:var(--site-accent);color:var(--site-accent);background:transparent; text-transform:uppercase;letter-spacing:.07em;font-size:.8rem;font-weight:800; } [data-design-preset="expedition"] .ak-product-grid__viewall:hover{background:var(--site-accent);color:var(--site-accent-contrast);} [data-design-preset="expedition"] .ak-product-grid__count{background:var(--site-accent);color:var(--site-accent-contrast);} [data-design-preset="expedition"] .ak-card__avail{background:rgba(52,199,120,.16);color:#5ee89b;} [data-design-preset="expedition"] .ak-card__avail--out{background:rgba(255,90,54,.18);color:#ff9a80;} /* Booking: a dark control panel so the money moment matches the cards. The color declaration is load-bearing and was missing. This is the ONLY preset that darkens the dialog, and it used to colour the text element by element — the label, the eyebrow, the price, the h2. Everything else inherited --site-fg, the INK of the pale page, which on this panel is invisible. That was survivable while the sheet was six labelled fields; the three-step sheet adds step titles, a calendar, departure times and a summary, and all of them came out black on black. Setting the inherited colour here fixes those and cannot break the explicit rules below, which still win. */ [data-design-preset="expedition"] :is(.ak-booking,.ak-book__dialog){ background:var(--site-surface-dark);border-color:rgba(255,255,255,.12); color:#fff; box-shadow:0 20px 44px -24px rgba(0,0,0,.7); } [data-design-preset="expedition"] .ak-book__dialog--steps{--ak-bk-ground:var(--site-surface-dark);} [data-design-preset="expedition"] :is(.ak-booking,.ak-book__dialog,.ak-contact form) :is(label,.ak-booking__options label,legend){color:rgba(255,255,255,.78);} /* A deep brand hue disappears into a dark panel, so the eyebrow wears the lifted brand rather than the raw one (it used to reach for the accent, which is now the primary itself). */ [data-design-preset="expedition"] :is(.ak-booking,.ak-book__dialog,.ak-contact form) .ak-eyebrow{color:var(--ak-brand-lift);} [data-design-preset="expedition"] .ak-booking__price{color:#fff;} [data-design-preset="expedition"] .ak-booking__price small{color:rgba(255,255,255,.6);} [data-design-preset="expedition"] .ak-book__head{border-bottom-color:rgba(255,255,255,.12);} [data-design-preset="expedition"] .ak-book__head .ak-h2{color:#fff;} [data-design-preset="expedition"] :is(.ak-field select,.ak-field input,.ak-contact textarea){ background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff; } [data-design-preset="expedition"] :is(.ak-pill,.ak-num,.ak-book__close){ background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff; } [data-design-preset="expedition"] :is(.ak-pill,.ak-num)[aria-pressed="true"]{ background:var(--site-accent);border-color:var(--site-accent);color:var(--site-accent-contrast); } [data-design-preset="expedition"] .ak-booking__hint{color:var(--site-accent);} [data-design-preset="expedition"] .ak-product-detail__price{color:var(--site-accent);font-size:1.75rem;} [data-design-preset="expedition"] .ak-product-detail__ficon{background:rgba(255,90,54,.16);color:var(--site-accent);} [data-design-preset="expedition"] .ak-quote{ background:var(--site-surface-dark);border-color:transparent;border-radius:var(--site-radius-lg); box-shadow:0 16px 34px -22px rgba(0,0,0,.6); } [data-design-preset="expedition"] :is(.ak-quote__name,.ak-quote__source){color:#fff;} [data-design-preset="expedition"] .ak-quote__text{color:rgba(255,255,255,.82);} [data-design-preset="expedition"] :is(.ak-quote__date,.ak-quote__posted){color:rgba(255,255,255,.55);} [data-design-preset="expedition"] .ak-testimonials__summary{color:var(--site-fg);font-weight:800;} /* FAQ stays light so the page still breathes; the open row gets an accent spine. */ [data-design-preset="expedition"] .ak-faq details{border-left:3px solid transparent;} [data-design-preset="expedition"] .ak-faq details[open]{border-left-color:var(--site-accent);border-color:var(--site-border);border-left-color:var(--site-accent);} [data-design-preset="expedition"] .ak-faq summary::after{color:var(--site-accent);} [data-design-preset="expedition"] .ak-cta .ak-btn--accent{background:var(--site-accent);color:var(--site-accent-contrast);} [data-design-preset="expedition"] .ak-flex__card{ background:var(--site-surface-dark);border-color:transparent;border-radius:var(--site-radius-lg); box-shadow:0 16px 34px -20px rgba(0,0,0,.62); } [data-design-preset="expedition"] .ak-flex__card-body h4{color:#fff;} [data-design-preset="expedition"] .ak-flex__card-body p{color:rgba(255,255,255,.7);} [data-design-preset="expedition"] .ak-flex__card-sub{color:var(--site-accent)!important;} [data-design-preset="expedition"] .ak-flex__badge{background:var(--site-accent);color:var(--site-accent-contrast);} [data-design-preset="expedition"] .ak-flex__cards[data-variant="steps"] .ak-flex__card::before{background:var(--site-accent);color:var(--site-accent-contrast);} [data-design-preset="expedition"] :is(.ak-flex__stat,.ak-about__stat){background:rgba(9,13,18,.06);} [data-design-preset="expedition"] :is(.ak-flex__stat b,.ak-about__stat b){color:var(--site-accent);} /* Long-form reading: a stronger opening paragraph and accent-marked lists give the copy the same energy as the rest of the preset. */ [data-design-preset="expedition"] .ak-richtext{max-width:68ch;} [data-design-preset="expedition"] .ak-richtext h2{font-weight:850;letter-spacing:-.025em;} [data-design-preset="expedition"] .ak-richtext>p:first-of-type{font-size:1.14rem;line-height:1.72;color:var(--site-fg);} [data-design-preset="expedition"] .ak-richtext a{color:var(--site-accent);text-underline-offset:3px;} [data-design-preset="expedition"] .ak-richtext :is(ul,ol) li::marker{color:var(--site-accent);font-weight:800;} [data-design-preset="expedition"] .ak-testimonials__summary{ display:inline-flex;align-items:center;gap:.55rem; background:var(--site-surface-dark);color:#fff;font-weight:800; padding:.5rem .95rem;border-radius:var(--site-radius-full); } [data-design-preset="expedition"] .ak-footer{background:var(--ak-band-deep);} [data-design-preset="expedition"] .ak-footer__column-title{letter-spacing:.16em;} /* ---- Clean Conversion: sections ---------------------------------------- */ [data-design-preset="clean-conversion"] .ak-heading{letter-spacing:-.02em;} [data-design-preset="clean-conversion"] .ak-product-grid__viewall{border-color:var(--site-border);color:var(--site-primary);background:#fff;} [data-design-preset="clean-conversion"] .ak-card__badge{background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.12);} /* Price and CTA share ONE row, so the card ends on a line the eye reads across rather than a stacked block. The base sheet leaves .ak-card__foot as display:contents precisely so a preset can give it a real display and get the row with no markup of its own; the hairline moves up to it, because the rule now belongs to the whole row and not just the price. */ [data-design-preset="clean-conversion"] .ak-card__foot{ display:flex;align-items:center;justify-content:space-between;gap:1rem; border-top:1px solid var(--site-border);margin-top:auto;padding-top:.85rem; } [data-design-preset="clean-conversion"] .ak-card__footer{border-top:0;margin-top:0;padding-top:0;} [data-design-preset="clean-conversion"] .ak-card__foot .ak-btn{ width:auto;flex:0 0 auto;padding:.7rem 1.35rem; } /* The booking panel is the loudest object on the page for this preset. */ [data-design-preset="clean-conversion"] .ak-booking{ background:#fff;border:1px solid var(--site-border);border-top:3px solid var(--site-primary); border-radius:12px;box-shadow:0 18px 40px -24px rgba(16,24,40,.45); } [data-design-preset="clean-conversion"] :is(.ak-field select,.ak-field input,.ak-contact textarea){border-radius:8px;background:#fff;} [data-design-preset="clean-conversion"] :is(.ak-pill,.ak-num){border-radius:8px;background:#fff;} [data-design-preset="clean-conversion"] :is(.ak-pill,.ak-num)[aria-pressed="true"]{background:var(--site-primary);border-color:var(--site-primary);color:var(--site-primary-contrast);} [data-design-preset="clean-conversion"] .ak-book__dialog{border-radius:14px;} [data-design-preset="clean-conversion"] .ak-product-detail__media img{border-radius:14px;box-shadow:0 18px 40px -26px rgba(16,24,40,.45);} [data-design-preset="clean-conversion"] .ak-quote{background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.06);} [data-design-preset="clean-conversion"] .ak-gallery__item{border-radius:12px;} [data-design-preset="clean-conversion"] .ak-faq details{border-radius:10px;background:#fff;} [data-design-preset="clean-conversion"] .ak-faq details[open]{border-color:var(--site-primary);box-shadow:0 1px 2px rgba(16,24,40,.06);} [data-design-preset="clean-conversion"] .ak-about__media img{border-radius:14px;} [data-design-preset="clean-conversion"] .ak-about__stat{border-radius:10px;} /* Flat brand band rather than a gradient — quieter, and the button reads first. */ /* Was a flat slab of --site-primary. Now the preset's own deep navy — the same ground its footer uses — so the band belongs to the design rather than to whatever hue the operator picked. Text is stated explicitly because --site-primary-contrast was computed to read on the BRAND, and on a pale brand it resolves to dark ink, which on navy would be unreadable. */ [data-design-preset="clean-conversion"] .ak-cta{ background:var(--ak-navy);border-radius:16px;box-shadow:none; color:#fff; } [data-design-preset="clean-conversion"] .ak-cta :is(.ak-heading,h1,h2,h3){color:#fff;} [data-design-preset="clean-conversion"] .ak-cta :is(.ak-lead,.ak-cta__lead){color:rgba(255,255,255,.84);} [data-design-preset="clean-conversion"] .ak-cta__badge{color:#fff;border-color:rgba(255,255,255,.34);} [data-design-preset="clean-conversion"] .ak-cta__assurance{color:rgba(255,255,255,.82);} [data-design-preset="clean-conversion"] .ak-cta .ak-btn--primary{background:var(--site-primary);color:var(--site-primary-contrast);} [data-design-preset="clean-conversion"] .ak-cta .ak-btn--accent{background:#fff;color:var(--site-primary);} [data-design-preset="clean-conversion"] .ak-contact{background:#fff;} [data-design-preset="clean-conversion"] .ak-flex__card{background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.06);} [data-design-preset="clean-conversion"] :is(.ak-flex__stat,.ak-about__stat){background:#eef2f7;} /* Long-form reading: comfortable measure and clear hierarchy, nothing decorative — this preset optimises for scanning and deciding. */ [data-design-preset="clean-conversion"] .ak-richtext{max-width:70ch;} [data-design-preset="clean-conversion"] .ak-richtext h2{font-size:1.5rem;letter-spacing:-.02em;} [data-design-preset="clean-conversion"] .ak-richtext p{font-size:1.02rem;line-height:1.78;} [data-design-preset="clean-conversion"] .ak-richtext a{color:var(--site-primary);text-underline-offset:3px;} [data-design-preset="clean-conversion"] .ak-richtext :is(ul,ol) li{margin-bottom:.55rem;} /* A trust chip: the rating is a real CRM value, so it is given a container the eye lands on rather than being lost as plain text. */ [data-design-preset="clean-conversion"] .ak-testimonials__summary{ display:inline-flex;align-items:center;gap:.55rem; background:#fff;border:1px solid var(--site-border);border-radius:10px; padding:.5rem .85rem;color:var(--site-fg);font-weight:700; box-shadow:0 1px 2px rgba(16,24,40,.06); } [data-design-preset="clean-conversion"] .ak-footer{background:var(--ak-navy);} /* ---- Editorial Premium: sections --------------------------------------- */ /* Chrome is removed rather than restyled: hairlines instead of borders, no shadows, portrait crops, and type doing the structural work. */ [data-design-preset="editorial-premium"] .ak-section__head{max-width:52ch;} [data-design-preset="editorial-premium"] .ak-eyebrow{letter-spacing:.26em;font-size:.68rem;font-weight:600;} [data-design-preset="editorial-premium"] .ak-h2{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:500;} [data-design-preset="editorial-premium"] .ak-product-grid__head{border-bottom:1px solid var(--site-border);padding-bottom:1.25rem;} [data-design-preset="editorial-premium"] .ak-product-grid__viewall{ background:transparent;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:.2rem 0; color:var(--site-fg);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:600; } [data-design-preset="editorial-premium"] .ak-product-grid__viewall:hover{background:transparent;color:var(--site-accent);} [data-design-preset="editorial-premium"] .ak-product-grid__count{background:transparent;color:var(--site-muted);} [data-design-preset="editorial-premium"] .ak-card__body{padding:1.1rem 0 0;} [data-design-preset="editorial-premium"] .ak-card__badge{ background:rgba(250,249,247,.92);color:var(--site-fg);box-shadow:none;border-radius:0; letter-spacing:.16em;font-weight:600; } [data-design-preset="editorial-premium"] .ak-card__footer{border-top:1px solid var(--site-border);padding-top:.9rem;} [data-design-preset="editorial-premium"] .ak-card__price{font-weight:500;} [data-design-preset="editorial-premium"] .ak-card .ak-btn{ background:transparent;color:var(--site-fg);border:1px solid var(--site-fg); text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:600; } [data-design-preset="editorial-premium"] .ak-card .ak-btn:hover{background:var(--site-fg);color:var(--site-page-bg);} [data-design-preset="editorial-premium"] :is(.ak-booking,.ak-quote,.ak-faq details){ border-radius:0;box-shadow:none;background:transparent;border-color:var(--site-border); } /* The booking dialog must stay OPAQUE — in modal mode it floats over the page, so a transparent panel would let the page bleed through the form. */ [data-design-preset="editorial-premium"] .ak-book__dialog{ border-radius:0;box-shadow:none;background:var(--site-page-bg);border-color:var(--site-border); } [data-design-preset="editorial-premium"] .ak-book__dialog--steps{--ak-bk-ground:var(--site-page-bg);} [data-design-preset="editorial-premium"] :is(.ak-field select,.ak-field input,.ak-contact textarea){ border-radius:0;background:transparent;border-width:0 0 1px;padding-inline:0; } [data-design-preset="editorial-premium"] :is(.ak-pill,.ak-num){border-radius:0;background:transparent;border-width:1px;} [data-design-preset="editorial-premium"] :is(.ak-pill,.ak-num)[aria-pressed="true"]{background:var(--site-fg);border-color:var(--site-fg);color:var(--site-page-bg);} [data-design-preset="editorial-premium"] .ak-booking__price{font-weight:500;} [data-design-preset="editorial-premium"] .ak-product-detail__media img{border-radius:0;box-shadow:none;aspect-ratio:4/5;} [data-design-preset="editorial-premium"] .ak-product-detail__price{font-weight:500;color:var(--site-fg);} /* A quote is a pull-quote here: serif, italic, and hung off a hairline. */ [data-design-preset="editorial-premium"] .ak-quote{border-width:0 0 0 1px;padding:.2rem 0 .2rem 1.6rem;} [data-design-preset="editorial-premium"] .ak-quote__text{font-family:var(--site-font-heading);font-style:italic;font-size:1.18rem;line-height:1.55;color:var(--site-fg);} [data-design-preset="editorial-premium"] .ak-quote__avatar{border-radius:0;} [data-design-preset="editorial-premium"] .ak-faq details{border-width:0 0 1px;border-radius:0;padding:1.2rem 0;} [data-design-preset="editorial-premium"] .ak-faq details[open]{box-shadow:none;border-color:var(--site-border);} [data-design-preset="editorial-premium"] .ak-faq summary{font-family:var(--site-font-heading);font-weight:500;font-size:1.08rem;} [data-design-preset="editorial-premium"] .ak-faq summary::after{color:var(--site-fg);font-weight:400;} [data-design-preset="editorial-premium"] .ak-about__media img{border-radius:0;aspect-ratio:4/5;} [data-design-preset="editorial-premium"] .ak-about__media{border-radius:0;box-shadow:none;} [data-design-preset="editorial-premium"] .ak-about__stat{background:transparent;border-top:1px solid var(--site-border);border-radius:0;padding:1rem 0 0;} [data-design-preset="editorial-premium"] .ak-about__stat b{font-weight:500;color:var(--site-fg);} [data-design-preset="editorial-premium"] .ak-cta{ background:var(--ak-panel);border-radius:0;box-shadow:none;padding-block:clamp(3.5rem,8vw,6rem); } [data-design-preset="editorial-premium"] .ak-cta .ak-btn--accent{background:#fff;color:var(--ak-ink);border-radius:2px;} /* This CTA paints a FIXED near-black band, so its text cannot come from the --site-primary-contrast token: that is the readable colour for a swatch of the BRAND, and for a light brand (orange, yellow, mint) it resolves to near black — black type on a black band. The band is not brand-coloured, so the text colour must not be brand-derived either. */ [data-design-preset="editorial-premium"] .ak-cta, [data-design-preset="editorial-premium"] .ak-cta :is(.ak-heading,h1,h2,h3){color:#f6f4ef;} [data-design-preset="editorial-premium"] .ak-cta .ak-lead{color:rgba(246,244,239,.82);} /* Same reasoning for the badge/assurance row — brand-derived contrast would go near-black on this fixed dark band. */ [data-design-preset="editorial-premium"] .ak-cta__badge{color:#f6f4ef;border-color:rgba(246,244,239,.3);border-radius:2px;} [data-design-preset="editorial-premium"] .ak-cta__assurance{color:rgba(246,244,239,.8);} [data-design-preset="editorial-premium"] .ak-cta__assurances{border-top-color:rgba(246,244,239,.18);} [data-design-preset="editorial-premium"] .ak-flex__card{background:transparent;border:0;border-radius:0;box-shadow:none;} [data-design-preset="editorial-premium"] .ak-flex__card:hover{transform:none;box-shadow:none;} [data-design-preset="editorial-premium"] .ak-flex__card-media img{aspect-ratio:4/5;} [data-design-preset="editorial-premium"] .ak-flex__card-body{padding:1rem 0 0;} [data-design-preset="editorial-premium"] :is(.ak-flex__stat,.ak-flex__badge){background:transparent;border-radius:0;} [data-design-preset="editorial-premium"] .ak-flex__stat{border-top:1px solid var(--site-border);padding:1rem 0 0;text-align:left;} [data-design-preset="editorial-premium"] .ak-flex__stat b{font-weight:500;color:var(--site-fg);} [data-design-preset="editorial-premium"] .ak-flex__badge{border:1px solid var(--site-border);color:var(--site-fg);letter-spacing:.16em;font-weight:600;} [data-design-preset="editorial-premium"] .ak-richtext{max-width:64ch;} [data-design-preset="editorial-premium"] .ak-richtext p{font-size:1.06rem;line-height:1.8;} [data-design-preset="editorial-premium"] .ak-richtext h2{font-weight:500;font-size:1.75rem;margin-top:var(--site-space-6);} /* Magazine opener: the lead paragraph is set larger in the display serif, which is the preset's whole idea — type carrying the hierarchy, not boxes. */ [data-design-preset="editorial-premium"] .ak-richtext>p:first-of-type{ font-family:var(--site-font-heading);font-size:1.32rem;line-height:1.62;color:var(--site-fg); } [data-design-preset="editorial-premium"] .ak-richtext a{color:var(--site-fg);text-decoration-thickness:1px;text-underline-offset:4px;} [data-design-preset="editorial-premium"] .ak-richtext :is(ul,ol) li::marker{color:var(--site-muted);} [data-design-preset="editorial-premium"] .ak-testimonials__summary{ border-top:1px solid var(--site-border);padding-top:.9rem; font-family:var(--site-font-heading);font-weight:500;font-size:1.05rem;color:var(--site-fg); } [data-design-preset="editorial-premium"] .ak-footer{background:var(--ak-ink);} [data-design-preset="editorial-premium"] .ak-footer__brand-name::before{border-radius:0;} [data-design-preset="editorial-premium"] .ak-footer__column-title{letter-spacing:.2em;} /* ---- Warm Local: sections ---------------------------------------------- */ [data-design-preset="warm-local"] .ak-product-grid__viewall{background:#fff;border-color:rgba(120,80,40,.2);color:var(--site-primary);} [data-design-preset="warm-local"] .ak-product-grid__count{background:rgba(120,80,40,.1);color:var(--site-primary-strong);} [data-design-preset="warm-local"] .ak-card__badge{background:#fff;color:var(--site-primary-strong);box-shadow:0 4px 12px -6px rgba(90,60,30,.5);} [data-design-preset="warm-local"] .ak-book__dialog--steps{--ak-bk-ground:#fff;} [data-design-preset="warm-local"] :is(.ak-booking,.ak-book__dialog,.ak-quote){ background:#fff;border-color:rgba(120,80,40,.16);border-radius:var(--site-radius-lg); box-shadow:0 16px 34px -24px rgba(90,60,30,.55); } [data-design-preset="warm-local"] :is(.ak-field select,.ak-field input,.ak-contact textarea){ background:#fffdfa;border-color:rgba(120,80,40,.2);border-radius:12px; } [data-design-preset="warm-local"] :is(.ak-pill,.ak-num){background:#fffdfa;border-color:rgba(120,80,40,.22);} [data-design-preset="warm-local"] :is(.ak-pill,.ak-num)[aria-pressed="true"]{background:var(--site-primary);border-color:var(--site-primary);color:var(--site-primary-contrast);} [data-design-preset="warm-local"] .ak-product-detail__media img{border-radius:var(--site-radius-xl);} [data-design-preset="warm-local"] .ak-gallery__item{border-radius:var(--site-radius-lg);} [data-design-preset="warm-local"] .ak-faq details{background:#fff;border-color:rgba(120,80,40,.16);border-radius:var(--site-radius-md);} [data-design-preset="warm-local"] .ak-faq details[open]{border-color:var(--site-primary-light);} [data-design-preset="warm-local"] .ak-about__media img,[data-design-preset="warm-local"] .ak-about__media{border-radius:var(--site-radius-xl);} [data-design-preset="warm-local"] :is(.ak-about__stat,.ak-flex__stat){background:#fff;border:1px solid rgba(120,80,40,.14);border-radius:var(--site-radius-md);} /* Same correction as the other two: the band was a gradient of the tenant's brand, so it changed colour per operator. It now uses the preset's own warm near-black — the ground its footer already sits on — and states its text colours, because --site-primary-contrast was computed for the brand slab this replaces. */ [data-design-preset="warm-local"] .ak-cta{ border-radius:var(--site-radius-xl); background:var(--ak-brown); color:#fff; } [data-design-preset="warm-local"] .ak-cta :is(.ak-heading,h1,h2,h3){color:#fff;} [data-design-preset="warm-local"] .ak-cta :is(.ak-lead,.ak-cta__lead){color:rgba(255,255,255,.84);} [data-design-preset="warm-local"] .ak-cta__badge{color:#fff;border-color:rgba(255,255,255,.32);} [data-design-preset="warm-local"] .ak-cta__assurance{color:rgba(255,255,255,.82);} [data-design-preset="warm-local"] .ak-cta .ak-btn--primary{background:var(--site-primary);color:var(--site-primary-contrast);} [data-design-preset="warm-local"] .ak-flex__card{background:#fff;border-color:rgba(120,80,40,.16);border-radius:var(--site-radius-lg);box-shadow:0 14px 30px -24px rgba(90,60,30,.55);} [data-design-preset="warm-local"] .ak-flex__badge{background:rgba(120,80,40,.1);color:var(--site-primary-strong);} /* Long-form reading: a slightly larger, softer setting — this preset is meant to read like a person talking, not a brochure. */ [data-design-preset="warm-local"] .ak-richtext{max-width:66ch;} [data-design-preset="warm-local"] .ak-richtext h2{letter-spacing:-.015em;} [data-design-preset="warm-local"] .ak-richtext p{font-size:1.04rem;line-height:1.82;} [data-design-preset="warm-local"] .ak-richtext>p:first-of-type{color:var(--site-fg);} [data-design-preset="warm-local"] .ak-richtext a{color:var(--site-primary-strong);text-underline-offset:3px;} [data-design-preset="warm-local"] .ak-richtext :is(ul,ol) li::marker{color:var(--site-primary);} [data-design-preset="warm-local"] .ak-testimonials__summary{ display:inline-flex;align-items:center;gap:.55rem; background:#fff;border:1px solid rgba(120,80,40,.16);border-radius:var(--site-radius-md); padding:.55rem .95rem;color:var(--site-primary-strong);font-weight:700; box-shadow:0 10px 22px -18px rgba(90,60,30,.55); } [data-design-preset="warm-local"] .ak-footer{background:var(--ak-brown);} /* ======================================================================== */ /* Gallery layouts — one per preset */ /* ======================================================================== */ /* Four genuinely different arrangements of the SAME markup and the same component. Nothing here changes the photos themselves: the brand-tinted bottom grade, the placeholder guard and the hover zoom are shared and live with the base rules. Below 768px every layout collapses to the base single column, so no variant can cost a phone layout. Each pattern is built to tile cleanly for ANY number of photos — a tenant may upload 1 or 30, and a layout that only looks right at multiples of three is a layout that breaks in production. */ @media (min-width:768px){ /* -- Clean Conversion: UNIFORM GRID ----------------------------------- */ /* Equal tiles, equal crop. Nothing competes for attention, so the eye can sweep the wall and get back to choosing a date. auto-fit (not repeat(3,…)) is what makes one photo run full width and two split the row instead of stranding a tile beside empty cells. */ [data-design-preset="clean-conversion"] .ak-gallery__grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:clamp(1rem,1.8vw,1.5rem); } [data-design-preset="clean-conversion"] .ak-gallery__item{aspect-ratio:4/3;} /* -- Editorial Premium: ASYMMETRIC ------------------------------------ */ /* A magazine spread: a wide landscape paired with an upright portrait, the pairing flipping down the page. Two per row, 7 + 5 of a 12-column grid, so EVERY row sums to exactly 12 — a 3-step rhythm looks richer on paper but cannot tile 12 columns once the photo count is not a multiple of three. */ /* Height comes from FIXED row tracks, never from an aspect ratio. Ratios were the obvious approach and the wrong one: two tiles of different ratios in one row resolve to different heights, the row grows to the taller of them, and the shorter tile leaves a block of empty page under it. With fixed tracks both tiles span the same number of rows, so they are the same height by construction and every gutter is the single gap value. */ [data-design-preset="editorial-premium"] .ak-gallery__grid{ grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:clamp(90px,9.8vw,150px); gap:clamp(1rem,1.6vw,1.4rem); } [data-design-preset="editorial-premium"] .ak-gallery__item{ aspect-ratio:auto;grid-row:span 4; } [data-design-preset="editorial-premium"] .ak-gallery__item:nth-child(4n+1), [data-design-preset="editorial-premium"] .ak-gallery__item:nth-child(4n+4){grid-column:span 7;} [data-design-preset="editorial-premium"] .ak-gallery__item:nth-child(4n+2), [data-design-preset="editorial-premium"] .ak-gallery__item:nth-child(4n+3){grid-column:span 5;} /* An unpaired trailing photo runs full width rather than stranding a gap. */ [data-design-preset="editorial-premium"] .ak-gallery__item:last-child:nth-child(odd){grid-column:1 / -1;grid-row:span 3;} /* -- Editorial Premium, ASYMMETRIC variant ---------------------------- */ /* The alternative arrangement: a tall band of two unequal tiles over a shorter band of three. Selected per site via theme.galleryLayout — the Gallery component, its schema and both registry mirrors are untouched. The cycle is 5 photos over 12 columns: 8+4 = 12, then 3+3+6 = 12, so each cycle is two complete bands with no leftover columns. */ [data-design-preset="editorial-premium"][data-gallery-layout="asymmetric"] .ak-gallery__item:nth-child(5n+1){grid-column:span 8;grid-row:span 4;} [data-design-preset="editorial-premium"][data-gallery-layout="asymmetric"] .ak-gallery__item:nth-child(5n+2){grid-column:span 4;grid-row:span 4;} [data-design-preset="editorial-premium"][data-gallery-layout="asymmetric"] .ak-gallery__item:nth-child(5n+3){grid-column:span 3;grid-row:span 3;} [data-design-preset="editorial-premium"][data-gallery-layout="asymmetric"] .ak-gallery__item:nth-child(5n+4){grid-column:span 3;grid-row:span 3;} [data-design-preset="editorial-premium"][data-gallery-layout="asymmetric"] .ak-gallery__item:nth-child(5n+5){grid-column:span 6;grid-row:span 3;} [data-design-preset="editorial-premium"][data-gallery-layout="asymmetric"] .ak-gallery__item:last-child:nth-child(5n+1){grid-column:1 / -1;grid-row:span 3;} /* -- Expedition: BENTO / MOSAIC --------------------------------------- */ /* A wide "hero" tile leads each pair of rows, with square tiles around it — the energetic, editorial-poster feel the preset is after. The cycle is 6 photos over a 4-column grid: 2+1+1 then 1+1+2 = two complete rows, so the mosaic re-aligns every six photos and 9 photos (the count you tested) fills three whole rows. */ /* Row height is FIXED (grid-auto-rows) and every tile spans row tracks rather than carrying its own aspect ratio. Aspect ratios were the obvious way to do this and the wrong one: a wide tile and a square tile in the same row resolve to different heights, and a wide tile left alone at the end of the list has no sibling to take its height from and collapses to zero. Fixed tracks give every tile a definite height at any photo count. */ [data-design-preset="expedition"] .ak-gallery__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:clamp(105px,10.6vw,155px); gap:clamp(.75rem,1.4vw,1.15rem); } [data-design-preset="expedition"] .ak-gallery__item{ grid-column:span 1;grid-row:span 2;aspect-ratio:auto; } [data-design-preset="expedition"] .ak-gallery__item:nth-child(6n+1), [data-design-preset="expedition"] .ak-gallery__item:nth-child(6n+6){grid-column:span 2;} /* A single photo gets a banner rather than a lone square in a 4-wide row. */ [data-design-preset="expedition"] .ak-gallery__item:only-child{grid-column:1 / -1;grid-row:span 3;} /* -- Warm Local: MASONRY ---------------------------------------------- */ /* The grid, the tracks and the gaps are CSS; WHERE each photo goes is not. A balanced wall means every photo lands in whichever column is currently shortest, which is a running calculation over the photos already placed — multi-column balances by its own rules, dense auto-flow fills whichever column frees up first, and an nth-child height pattern only comes out level when the photo count happens to be a multiple of the pattern. So the kit's initMasonry (islands bundle) computes the placement and writes explicit grid coordinates back. The --ak-masonry custom property below is the opt-in flag it reads, which is why no preset name appears in that module. WITHOUT JavaScript these rules alone render a plain even grid of the same photos — correct, just not staggered. */ [data-design-preset="warm-local"] .ak-gallery__grid{ --ak-masonry:1; /* The masonry track, PUBLISHED but not applied. initMasonry reads it and sets grid-auto-rows itself once it has spans to go with it. Applying it here was the bug: a ~19px auto-row with no span on any item meant every photo sat in a 19px track and rendered 273px tall, so the whole wall overflowed and landed on top of the next section. The comment below always claimed this degraded to a plain even grid; it did not. */ --ak-masonry-track:clamp(14px,1.5vw,22px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto; grid-auto-flow:row; gap:clamp(1rem,1.8vw,1.5rem); } /* The no-JS height. initMasonry replaces it with a row span per photo. */ [data-design-preset="warm-local"] .ak-gallery__item{aspect-ratio:4/3;} } @media (min-width:1024px){ [data-design-preset="warm-local"] .ak-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr));} } /* ======================================================================== */ /* Preset layout variants (>= 1024px only) */ /* ======================================================================== */ /* Below 1024px every preset shares the base single/two-column stacking, so a variant can never cost a phone layout. Each block re-arranges EXISTING markup — no preset adds, removes or duplicates a component. */ @media (min-width:1024px){ /* -- Clean Conversion: scan fast, act sooner -------------------------- */ /* Contact: the form comes FIRST in the reading order's visual column, so the action is not parked behind the address block. Source order is untouched, so keyboard and screen-reader order still follow the markup. */ [data-design-preset="clean-conversion"] .ak-contact{grid-template-columns:1.05fr .95fr;} [data-design-preset="clean-conversion"] .ak-contact__form{order:-1;} /* Equal card heights make three prices genuinely comparable at a glance. */ [data-design-preset="clean-conversion"] .ak-product-grid__grid{align-items:stretch;} /* -- Editorial Premium: magazine scale -------------------------------- */ /* Two large portraits per row instead of three: the photograph is the story, and at 3-up a 4:5 crop is too small to carry one. */ [data-design-preset="editorial-premium"] .ak-product-grid__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,4vw,3.5rem); } /* A wider media column, and the photograph leads. */ [data-design-preset="editorial-premium"] .ak-about{grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,5vw,4.5rem);} [data-design-preset="editorial-premium"] .ak-about__media{order:-1;} [data-design-preset="editorial-premium"] .ak-about__stats{grid-template-columns:repeat(3,1fr);} /* -- Warm Local: relaxed, hand-arranged ------------------------------- */ /* Text first, photo second — the person talks to you before showing you the place. */ [data-design-preset="warm-local"] .ak-about{grid-template-columns:.95fr 1.05fr;} [data-design-preset="warm-local"] .ak-flex__cards{grid-template-columns:repeat(3,minmax(0,1fr));} } /* ---- Modern Utility visual preset --------------------------------------- */ /* Calm, editorial, unhurried — a considered brochure rather than a booking console. The page sits on warm paper instead of white, the display type is a serif, and the action is a single dark pill that repeats everywhere. Everything is quiet so the photography and the headline carry the page. The near-black action is kept from this preset's earlier form, and for the same reason: one dark control everywhere is predictable, and it leaves the brand colour free to own headings, links and accents. What changed is the GROUND it sits on and the voice of the type. */ [data-design-preset="modern-utility"]{ /* A generous but not cinematic measure. Wider than 1120px so a catalog grid is not stranded on the left of a full-width header. */ --site-maxw:1280px; --site-radius-sm:6px; --site-radius-md:12px; --site-radius-lg:18px; --site-radius-xl:26px; /* WARM PAPER, not white. The whole character of this preset now rests on it: a cream ground makes a serif headline read as printed rather than as a screenshot, and it is what stops the large areas of empty space from looking unfinished. Mixed toward the brand by a few percent so a tenant with a strong hue gets paper that belongs to them, not a fixed beige. */ --site-page-bg:color-mix(in srgb,var(--site-primary) 3%,#f6f3ec); --site-section-tint:color-mix(in srgb,var(--site-primary) 5%,#efebe1); --ak-paper:var(--site-page-bg); /* The raised surface: cards, media wells and the image frame. Slightly deeper than the page so a card reads without needing a border. */ --ak-tint:color-mix(in srgb,var(--site-primary) 6%,#eae5d9); --ak-nav-h:84px; /* Near-black, warmed toward the brand so it never looks like a system button. Deeper than the old value because it now sits on cream, not white. */ --ak-ink:color-mix(in srgb,var(--site-primary) 10%,#1b1c18); /* Hairlines are warm too — a cool grey border on cream reads as dirty. */ --ak-hairline:color-mix(in srgb,var(--site-primary) 6%,#ddd7c8); /* Unhurried motion to match: a little further than the tightest presets, still brisk. Rescaled with the rest of the sheet — see the preset motion block for why the old second-plus durations went. BASE tokens: the tier scales these (see "motion tokens" at the top). */ --ak-base-rise:38px;--ak-base-dur:680ms;--ak-base-stagger:78ms; } /* The paper reaches the whole document, not just the section bands — otherwise the area below a short page falls back to white and the ground breaks. */ [data-design-preset="modern-utility"]{background:var(--ak-paper);} [data-design-preset="modern-utility"] .ak-section{padding-block:clamp(2.25rem,4.5vw,3.5rem);} /* DISPLAY TYPE. A serif at a reading weight, NOT a heavy sans — the previous 800-weight, -.025em geometric heading is the single thing that made this preset read as an app screen. Fraunces is variable, so 400 here is a real cut rather than a synthesised thin, and the tight leading is what lets a two-line hero headline hold together as one shape. */ [data-design-preset="modern-utility"] .ak-heading{ font-weight:400;letter-spacing:-.015em;line-height:1.08;color:var(--ak-ink); } [data-design-preset="modern-utility"] .ak-h2{ font-size:clamp(1.75rem,3.4vw,2.6rem); } [data-design-preset="modern-utility"] .ak-lead{ font-size:.98rem;line-height:1.7;color:color-mix(in srgb,var(--ak-ink) 62%,transparent); } /* THE ACCENT LINE. The headline's second half is set in italic at the same size, so a two-part title reads as one sentence that changes voice rather than as a heading plus a subheading. The catalogue ships upright files only, so this is a synthesised oblique — the keyword is required, since Blink will not synthesise for "oblique " (same constraint as the wordmark). */ [data-design-preset="modern-utility"] .ak-h1__accent{ font-style:italic;color:var(--ak-ink); } /* EYEBROW as a pill with a leading dot. It is a small badge above the headline, not a line of tracked-out caps floating in space — on a large cream field the bare caps had nothing to sit against. */ [data-design-preset="modern-utility"] .ak-eyebrow{ display:inline-flex;align-items:center;gap:.5rem; padding:.42rem .85rem .42rem .7rem; border-radius:var(--site-radius-full,999px); border:1px solid var(--ak-hairline); background:color-mix(in srgb,var(--ak-paper) 60%,#fff); font-size:.66rem;letter-spacing:.14em;font-weight:600; color:color-mix(in srgb,var(--ak-ink) 74%,transparent); margin-bottom:var(--site-space-4); } [data-design-preset="modern-utility"] .ak-eyebrow::before{ content:"";width:.36rem;height:.36rem;border-radius:50%; background:var(--site-primary);flex:0 0 auto; } /* Buttons: one dark control, everywhere. */ [data-design-preset="modern-utility"] .ak-btn{ /* A full pill, not an 8px control. On cream with serif type a square-ish button reads as chrome borrowed from an admin panel. */ border-radius:var(--site-radius-full,999px); font-weight:600;font-size:.86rem;letter-spacing:.01em; padding:.82rem 1.5rem;box-shadow:none; } [data-design-preset="modern-utility"] .ak-btn:hover{transform:none;box-shadow:none;} [data-design-preset="modern-utility"] :is(.ak-btn--primary,.ak-btn--accent){ background:var(--ak-ink);color:#fff;border-color:transparent; } [data-design-preset="modern-utility"] :is(.ak-btn--primary,.ak-btn--accent):hover{ background:color-mix(in srgb,var(--ak-ink) 85%,#000);filter:none; } [data-design-preset="modern-utility"] .ak-btn--ghost{ background:#fff;color:var(--ak-ink);border-color:var(--ak-hairline); } [data-design-preset="modern-utility"] .ak-btn--ghost:hover{background:#f6f7f9;border-color:var(--ak-ink);} /* Navbar: a thin utility bar. */ /* The bar sits ON the paper with no rule under it: a border there would cut the page in two and break the printed feel. It only gains an edge once scrolled, where it is doing real work separating the bar from content moving beneath. */ [data-design-preset="modern-utility"] .ak-navbar{ height:var(--ak-nav-h);background:transparent;border-bottom:1px solid transparent; -webkit-backdrop-filter:none;backdrop-filter:none; } [data-design-preset="modern-utility"] .ak-navbar.is-scrolled{ background:color-mix(in srgb,var(--ak-paper) 88%,transparent); border-bottom-color:var(--ak-hairline);box-shadow:none; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } [data-design-preset="modern-utility"] .ak-navbar__brand{ font-size:1.05rem;letter-spacing:0;text-transform:none;font-weight:600; color:var(--ak-ink);gap:.6rem; } /* A round mark, the way an avatar or a stamp reads — squared logos fight the pill vocabulary the rest of the preset uses. */ [data-design-preset="modern-utility"] .ak-navbar__brand img{ height:34px;width:34px;border-radius:50%;object-fit:cover; background:var(--ak-tint); } [data-design-preset="modern-utility"] .ak-navbar__links a{ font-size:.9rem;font-weight:500; color:color-mix(in srgb,var(--ak-ink) 70%,transparent); } [data-design-preset="modern-utility"] .ak-navbar__links a:hover, [data-design-preset="modern-utility"] .ak-navbar__links a[aria-current="true"]{color:var(--ak-ink);} [data-design-preset="modern-utility"] .ak-navbar__links a::after{background:var(--ak-ink);} [data-design-preset="modern-utility"] .ak-navbar__cta{ background:var(--ak-ink);color:#fff;border-color:transparent; padding:.6rem 1.2rem;font-size:.82rem; } /* WORDMARK IDENTITY — QUIET / SET, NOT SHOUTED. The only mark in the set that is NOT large slanted caps. This preset's page is a serif headline on paper, and a heavy caps logo above it competes with the one thing that is supposed to be loud. So the mark is the brand name set the way it would be written: sentence case, a reading weight, upright, at roughly nav-link scale, in the same Fraunces as the headline. The identity here is the PAGE, and the logo defers to it. */ [data-design-preset="modern-utility"]{ --ak-wordmark-weight:600;--ak-wordmark-case:none; --ak-wordmark-tracking:-.01em;--ak-wordmark-slant:normal; --ak-wordmark-size:clamp(1.05rem,1.8vw,1.35rem);} [data-design-preset="modern-utility"] .ak-navbar__wordmark{color:var(--ak-ink);} [data-design-preset="modern-utility"] .ak-navbar__progress{background:var(--ak-ink);} [data-design-preset="modern-utility"] .ak-navbar__toggle{border-color:var(--ak-hairline);color:var(--ak-ink);} /* STAT ROW. Open figures on the paper, not chips in tinted boxes: three large numerals with a hairline above and a tiny tracked label under each. The base style puts every stat in a filled rounded box, which on cream reads as three more cards competing with the real ones. */ [data-design-preset="modern-utility"] .ak-about__stats{ /* Sized to the CONTENT, not to a fixed column count: a site with three facts gets three across and one with four gets four, instead of a hard 3-track grid orphaning the fourth on a row of its own. */ grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr)); gap:clamp(1rem,3vw,2.25rem); margin-top:var(--site-space-6); } [data-design-preset="modern-utility"] .ak-about__stat{ background:none;border-radius:0;padding:0; border-top:1px solid var(--ak-hairline);padding-top:.85rem; } [data-design-preset="modern-utility"] .ak-about__stat b{ font-family:var(--site-font-heading); font-size:clamp(1.6rem,3vw,2.15rem);font-weight:400; letter-spacing:-.02em;line-height:1.1;color:var(--ak-ink); } [data-design-preset="modern-utility"] .ak-about__stat span{ display:block;margin-top:.3rem; font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600; color:color-mix(in srgb,var(--ak-ink) 52%,transparent); } /* Hero: the split layout is the one this preset is built around — headline and action on the left, the photo as a soft rounded plate on the right. */ [data-design-preset="modern-utility"] .ak-hero{ background:var(--ak-paper); padding-block:clamp(3rem,7vw,6rem); gap:clamp(2rem,5vw,4.5rem); } [data-design-preset="modern-utility"] .ak-hero__content{max-width:38rem;} /* The headline is the page. Big, serif, tight, and allowed to run to two or three lines — the measure is capped in ch so it breaks at a deliberate place instead of wherever the viewport happens to end. */ [data-design-preset="modern-utility"] .ak-hero .ak-h1{ font-size:clamp(2.5rem,5.4vw,4rem); line-height:1.02;letter-spacing:-.03em;font-weight:400; max-width:17ch; } [data-design-preset="modern-utility"] .ak-hero .ak-lead{ max-width:38ch;margin-top:var(--site-space-4); color:color-mix(in srgb,var(--ak-ink) 60%,transparent); } [data-design-preset="modern-utility"] .ak-hero__actions{margin-top:var(--site-space-5);} /* A soft, deeply-rounded plate. The tint fills it while a photo is still loading (or is a placeholder), so the composition holds either way. */ /* The plate is CAPPED, not just proportioned. A 4:5 ratio on a column this wide resolves to something over 900px tall, which pushes the headline into the middle of the page and leaves a screen of empty paper above it. Bounding the height and letting the photo cover keeps the portrait crop at any column width while the hero stays one screenful. */ [data-design-preset="modern-utility"] .ak-hero__media{ border-radius:var(--site-radius-xl);border:0;overflow:hidden; background:var(--ak-tint); /* HEIGHT is the fixed dimension and width follows the ratio. Capping height while width stayed at 100% of the column turned the portrait plate into a landscape one — the ratio was being satisfied by whichever axis was free, and that was the wrong one. Ranged against the column so it still shrinks rather than overflowing on a narrow screen. */ height:min(66vh,560px); aspect-ratio:4/5; width:auto;max-width:100%; /* A grid item STRETCHES by default, so width:auto still resolved to the full column and the aspect-ratio had no free axis to satisfy — the plate came out landscape. justify-self removes the stretch, letting the ratio size the width from the fixed height, and parks it at the outer edge. */ justify-self:end; box-shadow:0 24px 60px -34px color-mix(in srgb,var(--ak-ink) 55%,transparent); } /* Below the split breakpoint the plate is the full width of the column again; a fixed height there would crop it to a letterbox. */ @media (max-width:879px){ [data-design-preset="modern-utility"] .ak-hero__media{ height:auto;width:100%;aspect-ratio:4/3;justify-self:stretch; } } [data-design-preset="modern-utility"] .ak-hero__media img, [data-design-preset="modern-utility"] .ak-hero__media video, [data-design-preset="modern-utility"] .ak-hero__media iframe{ aspect-ratio:auto;width:100%;height:100%;object-fit:cover; border-radius:var(--site-radius-xl); } /* The overlay hero still has to read as this preset if a site turns it on: a light panel on the left, dark type, same dark action. */ [data-design-preset="modern-utility"] .ak-hero--overlay{ min-height:clamp(27rem,62vh,40rem);color:var(--site-fg); } [data-design-preset="modern-utility"] .ak-hero--overlay::before{ background:linear-gradient(96deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 38%,rgba(255,255,255,.3) 66%,rgba(255,255,255,0) 90%); } [data-design-preset="modern-utility"] .ak-hero--overlay :is(.ak-heading,.ak-h1){color:var(--ak-ink);text-shadow:none;} [data-design-preset="modern-utility"] .ak-hero--overlay .ak-lead{ color:color-mix(in srgb,var(--ak-ink) 62%,transparent);text-shadow:none; } [data-design-preset="modern-utility"] .ak-hero--overlay .ak-eyebrow{ background:#f6f7f9;color:var(--site-primary);-webkit-backdrop-filter:none;backdrop-filter:none; } [data-design-preset="modern-utility"] .ak-hero--overlay .ak-btn--ghost{background:#fff;color:var(--ak-ink);border-color:var(--ak-hairline);} /* Product grid: a compact row of comparable options. Price and action sit on the same line, which is the whole point of the layout. */ [data-design-preset="modern-utility"] .ak-product-grid__head{border-bottom:1px solid var(--ak-hairline);padding-bottom:1rem;} [data-design-preset="modern-utility"] .ak-product-grid__viewall{ background:transparent;border:0;color:var(--ak-ink);padding:.2rem 0;font-size:.88rem;font-weight:700; } [data-design-preset="modern-utility"] .ak-product-grid__viewall:hover{background:transparent;text-decoration:underline;} [data-design-preset="modern-utility"] .ak-product-grid__count{background:#f0f2f5;color:var(--site-fg-soft);} [data-design-preset="modern-utility"] .ak-product-grid__grid{gap:clamp(.9rem,1.8vw,1.35rem);align-items:stretch;} /* Cards are UNBOXED. On paper, a bordered white rectangle reads as a dialog pasted onto the page; the photo and its caption are enough to group the item. Only the image keeps a surface, and it gets the tint so a slow or placeholder photo still holds the grid's shape. */ [data-design-preset="modern-utility"] .ak-card{ background:none;border:0;border-radius:0;box-shadow:none; } [data-design-preset="modern-utility"] .ak-card:hover{transform:none;box-shadow:none;border-color:transparent;} [data-design-preset="modern-utility"] .ak-card__media{ padding:0;border-radius:var(--site-radius-lg);overflow:hidden;background:var(--ak-tint); } [data-design-preset="modern-utility"] .ak-card__media img{aspect-ratio:4/3;border-radius:var(--site-radius-lg);} /* The one motion a card gets: the crop breathes, the card itself stays put. */ [data-design-preset="modern-utility"] .ak-card:hover .ak-card__media img{transform:scale(1.03);} [data-design-preset="modern-utility"] .ak-card__body{padding:.95rem .15rem 0;gap:.35rem;} [data-design-preset="modern-utility"] .ak-card__title{ font-family:var(--site-font-heading);font-size:1.18rem;font-weight:400; letter-spacing:-.01em;color:var(--ak-ink); } [data-design-preset="modern-utility"] :is(.ak-card__desc,.ak-card__metarow,.ak-card__meta){font-size:.84rem;} /* Price and action on ONE line, which is the signature of this card. The button is a SIBLING of the footer in the markup, not a child, so the footer is dissolved with display:contents and the body itself becomes the row container: the text children each take a full line, and the price and button share the last one. No markup changes, and the card keeps its own DOM order. */ [data-design-preset="modern-utility"] .ak-card__body{ /* flex-direction MUST be reset: the base card body is a flex COLUMN, and a wrapping column wraps into extra columns — the card overflowed sideways. */ display:flex;flex-direction:row;flex-wrap:wrap; align-items:center;align-content:flex-start;row-gap:.3rem;column-gap:.75rem; } [data-design-preset="modern-utility"] :is(.ak-card__title,.ak-card__desc,.ak-card__meta,.ak-card__metarow){ flex:0 0 100%; } [data-design-preset="modern-utility"] .ak-card__footer{display:contents;} /* The rule above the price row is a flex ITEM, not a border: a border on the price would stop where the price stops, leaving a half-drawn line beside the button. A container pseudo-element is a real flex item, and the order property slots it between the copy and the price row without touching the markup. */ [data-design-preset="modern-utility"] .ak-card__body::after{ content:"";flex:0 0 100%;height:1px;background:var(--ak-hairline);order:1;margin-top:.75rem; } [data-design-preset="modern-utility"] .ak-card__price{flex:1 1 auto;order:2;margin-top:.7rem;} [data-design-preset="modern-utility"] .ak-card .ak-btn{flex:0 0 auto;order:2;margin-top:.7rem;} [data-design-preset="modern-utility"] .ak-card__price{font-size:.95rem;font-weight:800;} [data-design-preset="modern-utility"] .ak-card__badge{background:#fff;color:var(--ak-ink);border:1px solid var(--ak-hairline);box-shadow:none;} /* The card action is a small dark button beside the price, not a full-width bar. */ [data-design-preset="modern-utility"] .ak-card .ak-btn{ width:auto;padding:.55rem 1rem;font-size:.84rem; } [data-design-preset="modern-utility"] .ak-card__avail{background:#eef7f1;color:#1a6b3d;} /* THE 1-UP / 2-UP SPECIAL CASES ARE GONE, and their absence is deliberate. This block used to give a grid of one product a large split "hero listing" and a grid of two products a side-by-side comparison, via :has(> .ak-card:only-child) and :has(> .ak-card:nth-child(2):last-child). Both were written for the warm-paper layer, before this preset became a uniform catalogue LIST where every product is one full-width row. They did not simply become redundant — they actively won. :has() takes the specificity of its argument, so those selectors outrank the plain ".ak-product-grid__grid" rule in the layer below however far down the sheet it sits. A shop with exactly two products therefore rendered them in two narrow columns while a shop with three rendered clean full-width rows: the layout changed shape based on how many things were for sale. One row per product, at every count. */ /* Booking: a form panel, bordered rather than floated. */ [data-design-preset="modern-utility"] :is(.ak-booking,.ak-book__dialog){ background:#fff;border:1px solid var(--ak-hairline);border-radius:var(--site-radius-lg);box-shadow:none; } [data-design-preset="modern-utility"] .ak-book__dialog--steps{--ak-bk-ground:#fff;} [data-design-preset="modern-utility"] :is(.ak-field select,.ak-field input,.ak-contact textarea){ border-radius:8px;border-color:var(--ak-hairline);background:#fff; } [data-design-preset="modern-utility"] :is(.ak-pill,.ak-num){border-radius:8px;background:#fff;border-color:var(--ak-hairline);} [data-design-preset="modern-utility"] :is(.ak-pill,.ak-num)[aria-pressed="true"]{background:var(--ak-ink);border-color:var(--ak-ink);color:#fff;} [data-design-preset="modern-utility"] .ak-booking__price{font-size:1.7rem;} [data-design-preset="modern-utility"] .ak-book__head{border-bottom-color:var(--ak-hairline);} [data-design-preset="modern-utility"] .ak-book__close{border-color:var(--ak-hairline);} /* Product detail, gallery, reviews, FAQ — same bordered, compact language. */ [data-design-preset="modern-utility"] .ak-product-detail__media img{border-radius:var(--site-radius-lg);box-shadow:none;border:1px solid var(--ak-hairline);} [data-design-preset="modern-utility"] .ak-product-detail__price{color:var(--ak-ink);font-size:1.35rem;} [data-design-preset="modern-utility"] .ak-product-detail__ficon{background:#f0f2f5;color:var(--ak-ink);} [data-design-preset="modern-utility"] .ak-gallery__item{border-radius:var(--site-radius-md);box-shadow:none;} /* The grade overlay is a separate layer, so it needs the tile's radius too — otherwise the collage's corners are only consistent because overflow clips them. Every tile in the wall carries the SAME radius whatever its size. */ [data-design-preset="modern-utility"] .ak-gallery__item::before{border-radius:inherit;} [data-design-preset="modern-utility"] .ak-quote{ background:#fff;border:1px solid var(--ak-hairline);border-radius:var(--site-radius-lg);box-shadow:none;padding:1.1rem 1.2rem; } [data-design-preset="modern-utility"] .ak-quote__text{font-size:.92rem;} [data-design-preset="modern-utility"] .ak-testimonials__summary{ display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--ak-hairline); border-radius:8px;padding:.45rem .8rem;font-size:.9rem;font-weight:700;color:var(--site-fg); } [data-design-preset="modern-utility"] .ak-faq__list{gap:.5rem;} [data-design-preset="modern-utility"] .ak-faq details{ background:#fff;border:1px solid var(--ak-hairline);border-radius:var(--site-radius-md);padding:.9rem 1.1rem; } [data-design-preset="modern-utility"] .ak-faq details[open]{border-color:var(--ak-ink);box-shadow:none;} [data-design-preset="modern-utility"] .ak-faq summary{font-size:.95rem;} [data-design-preset="modern-utility"] .ak-faq summary::after{color:var(--ak-ink);} /* About + FlexSection: facts set OPEN on the paper — a figure with a rule above it and a tracked label under — not boxed. Four white cards in a 2x2 grid read as a dashboard, which is the look this preset moved away from. */ [data-design-preset="modern-utility"] .ak-about__media img, [data-design-preset="modern-utility"] .ak-about__media{ border-radius:var(--site-radius-xl);box-shadow:none;background:var(--ak-tint); } [data-design-preset="modern-utility"] :is(.ak-about__stat,.ak-flex__stat){ background:none;border:0;border-radius:0;padding:0;text-align:left; border-top:1px solid var(--ak-hairline);padding-top:.85rem; } [data-design-preset="modern-utility"] .ak-flex__stat b{ font-family:var(--site-font-heading);font-weight:400;letter-spacing:-.02em;color:var(--ak-ink); } [data-design-preset="modern-utility"] .ak-flex__stat span{ font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600; color:color-mix(in srgb,var(--ak-ink) 52%,transparent); } [data-design-preset="modern-utility"] :is(.ak-about__stat b,.ak-flex__stat b){font-size:1.35rem;color:var(--ak-ink);} [data-design-preset="modern-utility"] :is(.ak-about__stat span,.ak-flex__stat span){font-size:.8rem;} [data-design-preset="modern-utility"] .ak-flex__card{ background:#fff;border:1px solid var(--ak-hairline);border-radius:var(--site-radius-lg);box-shadow:none; } [data-design-preset="modern-utility"] .ak-flex__card:hover{transform:none;box-shadow:none;border-color:var(--ak-ink);} [data-design-preset="modern-utility"] .ak-flex__badge{background:#f0f2f5;color:var(--ak-ink);border-radius:6px;} [data-design-preset="modern-utility"] .ak-flex__cards[data-variant="steps"] .ak-flex__card::before{background:var(--ak-ink);color:#fff;} [data-design-preset="modern-utility"] .ak-richtext{max-width:68ch;} [data-design-preset="modern-utility"] .ak-richtext p{font-size:.98rem;line-height:1.75;} [data-design-preset="modern-utility"] .ak-richtext a{color:var(--ak-ink);text-underline-offset:3px;} /* CTA: a dark band. Its text is set explicitly — the background is NOT the brand colour, so --site-primary-contrast (the readable colour for a brand swatch, which goes near-black for a light brand) would be the wrong source. */ [data-design-preset="modern-utility"] .ak-cta{ background:var(--ak-ink);border-radius:var(--site-radius-lg);box-shadow:none; padding-block:clamp(2.25rem,5vw,3.5rem); } [data-design-preset="modern-utility"] .ak-cta, [data-design-preset="modern-utility"] .ak-cta :is(.ak-heading,h1,h2,h3){color:#fff;} [data-design-preset="modern-utility"] .ak-cta .ak-lead{color:rgba(255,255,255,.82);} [data-design-preset="modern-utility"] .ak-cta__badge{color:#fff;border-color:rgba(255,255,255,.28);border-radius:4px;} [data-design-preset="modern-utility"] .ak-cta__assurance{color:rgba(255,255,255,.8);} [data-design-preset="modern-utility"] .ak-cta .ak-btn--accent{background:#fff;color:var(--ak-ink);} [data-design-preset="modern-utility"] .ak-cta .ak-btn--ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff;} [data-design-preset="modern-utility"] .ak-contact__list a{color:var(--ak-ink);} [data-design-preset="modern-utility"] .ak-footer{background:#0f1317;} [data-design-preset="modern-utility"] .ak-footer__column-title{letter-spacing:.1em;} /* ---- Contact: preset-specific art direction ---------------------------- */ /* The component stays exactly the same: a visitor always sees the same contact paths and form. What changes here is the visual language, so a theme choice has an immediately noticeable effect on this conversion moment. */ /* ONE SURFACE. The section painted #081116, the card painted --site-surface-dark on top of it, and the information column painted a third white-3% wash on top of THAT — three near-black rectangles inside each other, read as a dark box sitting in a slightly different dark box. The band now carries the colour and the card is transparent, so the section is a single field with one hairline splitting the two halves. */ [data-design-preset="expedition"] .ak-contact-section{background:var(--ak-band-dark);} [data-design-preset="expedition"] .ak-contact{border-radius:10px;} [data-design-preset="expedition"] .ak-contact__detail{border-radius:6px;} [data-design-preset="expedition"] .ak-contact__icon,[data-design-preset="expedition"] .ak-contact__prompt-mark{background:var(--site-accent);} [data-design-preset="expedition"] .ak-contact__form-head{border-color:rgba(255,255,255,.16);} [data-design-preset="expedition"] .ak-contact__form-head h3{color:#fff;} [data-design-preset="expedition"] .ak-contact__form-head p:last-child,[data-design-preset="expedition"] .ak-contact__privacy{color:rgba(255,255,255,.68);} [data-design-preset="clean-conversion"] .ak-contact-section{background:#f2f7ff;} [data-design-preset="clean-conversion"] .ak-contact{border-radius:16px;box-shadow:0 22px 44px -26px rgba(27,73,132,.28);} [data-design-preset="clean-conversion"] .ak-contact__intro .ak-heading{font-size:clamp(2rem,3.7vw,3rem);} [data-design-preset="editorial-premium"] .ak-contact-section{background:var(--ak-panel);} /* A section painted dark by hand does NOT get the [data-bg="dark"] foreground rules -- those key off the wrapper attribute, not off the colour. So every piece of type in here is re-stated, or it stays near-black on near-black. Nothing brand-derived either: --site-primary-contrast is the readable colour for a swatch of the BRAND, and for a light brand it resolves to near black. */ [data-design-preset="editorial-premium"] .ak-contact__intro{ color:var(--ak-on-dark);border-right-color:rgba(246,244,239,.14); } [data-design-preset="editorial-premium"] .ak-contact__intro .ak-heading{color:var(--ak-on-dark);} [data-design-preset="editorial-premium"] .ak-contact__intro .ak-lead, [data-design-preset="editorial-premium"] .ak-contact__prompt p{color:rgba(246,244,239,.8);} [data-design-preset="editorial-premium"] .ak-contact__prompt{border-top-color:rgba(246,244,239,.2);} [data-design-preset="editorial-premium"] .ak-contact__label{color:rgba(246,244,239,.6);} [data-design-preset="editorial-premium"] .ak-contact__detail :is(a,.ak-contact__address){color:var(--ak-on-dark);} [data-design-preset="editorial-premium"] .ak-contact__form-head{border-color:rgba(246,244,239,.16);} [data-design-preset="editorial-premium"] .ak-contact__form-head p:last-child, [data-design-preset="editorial-premium"] .ak-contact__privacy{color:rgba(246,244,239,.66);} [data-design-preset="editorial-premium"] .ak-contact form :is(label,legend){color:rgba(246,244,239,.78);} [data-design-preset="editorial-premium"] .ak-contact :is(.ak-field input,.ak-field select,textarea){ background:rgba(246,244,239,.06);border-color:rgba(246,244,239,.2);color:var(--ak-on-dark); } [data-design-preset="editorial-premium"] .ak-contact{border-radius:0;box-shadow:none;} [data-design-preset="editorial-premium"] .ak-contact__intro .ak-heading{font-size:clamp(2.45rem,5vw,4.4rem);font-weight:500;} [data-design-preset="editorial-premium"] .ak-contact__detail{border-radius:0;background:transparent;border-width:1px 0 0;border-top-color:rgba(246,244,239,.16);} [data-design-preset="editorial-premium"] .ak-contact__icon{ border-radius:0;background:transparent; /* --site-primary-strong is a DARKENED brand, which is exactly the wrong direction on a near-black panel. */ border:1px solid rgba(246,244,239,.3); color:var(--ak-on-dark); } [data-design-preset="editorial-premium"] .ak-contact__form-head h3{font-weight:500;color:var(--ak-on-dark);} [data-design-preset="warm-local"] .ak-contact-section{background:var(--ak-cream);} [data-design-preset="warm-local"] .ak-contact{box-shadow:0 24px 45px -28px rgba(96,51,28,.35);} [data-design-preset="warm-local"] .ak-contact__detail{background:rgba(255,255,255,.1);} [data-design-preset="warm-local"] .ak-contact__icon,[data-design-preset="warm-local"] .ak-contact__prompt-mark{ background:color-mix(in srgb,var(--site-primary) 34%,#fff3e2); color:var(--site-primary-strong); } [data-design-preset="modern-utility"] .ak-contact-section{background:#f0f3f6;} [data-design-preset="modern-utility"] .ak-contact{border-radius:var(--site-radius-lg);box-shadow:none;} [data-design-preset="modern-utility"] .ak-contact__intro .ak-eyebrow{color:var(--site-accent);} [data-design-preset="modern-utility"] .ak-contact__detail{border-radius:8px;} [data-design-preset="modern-utility"] .ak-contact__icon,[data-design-preset="modern-utility"] .ak-contact__prompt-mark{border-radius:7px;background:var(--site-accent);color:var(--ak-ink);} [data-design-preset="modern-utility"] .ak-contact__form-kicker{color:var(--ak-ink);} [data-design-preset="modern-utility"] .ak-contact form .ak-btn{background:var(--ak-ink);border-color:var(--ak-ink);color:#fff;box-shadow:none;} @media (min-width:768px){ /* Gallery is laid out in its own block at the end of this preset — see "Modern Utility: editorial collage gallery". */ [data-design-preset="modern-utility"] .ak-about__stats{grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));} } @media (min-width:880px){ /* Split only. An overlay hero has no second column — the photo is behind the copy — and a two-column track would strand the text in half the width. */ /* The headline is the subject, so its column is no longer the narrower of the two — the photo supports it rather than out-weighing it. */ [data-design-preset="modern-utility"] .ak-hero:not(.ak-hero--overlay){ grid-template-columns:minmax(0,38rem) auto;justify-content:center; } [data-design-preset="modern-utility"] .ak-flex__stats{grid-template-columns:repeat(4,1fr);} } @media (max-width:767.98px){ /* Phone: everything stacks, the card action goes full width because a thumb needs a target, and the hero photo sits under the copy. */ [data-design-preset="modern-utility"] .ak-card .ak-btn{width:100%;} [data-design-preset="modern-utility"] .ak-card__footer{flex-direction:column;align-items:stretch;gap:.5rem;} [data-design-preset="modern-utility"] .ak-hero__content{max-width:none;} [data-design-preset="modern-utility"] .ak-navbar__nav{background:#fff;border-bottom-color:var(--ak-hairline);} [data-design-preset="modern-utility"] .ak-navbar__links li{border-bottom-color:var(--ak-hairline);} } /* ---- Modern Utility: the split hero works for BOTH hero modes ------------ */ /* The preset's signature is copy beside the photo. That layout used to need overlay:false, so a site whose Hero has overlay ON — which is what the generator produces — fell back to a full-bleed photo with a wash over it and read as an ordinary template. An overlay hero's photo is a real layer, not a CSS background, so it can simply be re-placed as a card on the right. Same markup, same prop, same component: the layout no longer depends on how the Hero was authored. */ @media (min-width:880px){ [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg){ --ak-hero-pad:clamp(2.5rem,5vw,4.5rem); --ak-frame-gutter:max(clamp(1.25rem,4vw,2rem),calc((100vw - var(--site-maxw,1280px)) / 2)); display:grid; /* Both tracks sized to their CONTENT, then the pair centred. A 1fr copy track is wider than the copy that sits in it, and the leftover opened a band of empty paper between the text and the plate. minmax(0,...) still lets the copy column shrink below its cap on a narrow screen, so nothing overflows at the low end of the range. */ grid-template-columns:minmax(0,38rem) auto; justify-content:center; column-gap:clamp(2rem,5vw,4rem); /* Sized by its CONTENT, not the viewport. This preset's hero is a framed plate beside the copy rather than a full-bleed band; forcing it to 100vh stranded both columns in the middle of an empty screen. */ min-height:0; padding:var(--ak-hero-pad) var(--ak-frame-gutter); align-items:center; background:var(--ak-paper); } [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) .ak-hero__content{ grid-column:1; grid-row:1; max-width:30rem; } [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) .ak-hero__bg:is(img,video){ position:relative; inset:auto; grid-column:2; grid-row:1; /* HEIGHT is the fixed dimension; the ratio derives the width from it. width:100% + max-height left the ratio no free axis, so the portrait plate resolved to a landscape one. justify-self removes the grid item's default stretch, which was doing the same thing from the other side. */ height:min(66vh,560px); aspect-ratio:4/5; width:auto; max-width:100%; justify-self:end; object-fit:cover; border-radius:var(--site-radius-xl); border:0; background:var(--ak-tint); box-shadow:0 24px 60px -34px color-mix(in srgb,var(--ak-ink) 55%,transparent); } /* The copy is beside the photo now, not on it — a scrim would only grey the page. Gated on the photo actually being an img/video: a YouTube/Vimeo iframe cannot be re-placed this way and keeps the full-bleed treatment. */ [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg)::before{ background:none; } } /* ---- Modern Utility: editorial collage gallery --------------------------- */ /* A photo WALL, not a row of equal cards. Two bands, repeating every 7 photos: band A [ 1 featured, wide ][ 2 upright ] band B [ 3 featured, tall ][ 4 ][ 5 ] [ 6 ][ 7 ] Band B is the point of the design: a large photo with a 2x2 CLUSTER of small ones locked beside it. That vertical interlock is what makes it read as a collage rather than as stacked rows of tiles, and it is the one thing a plain band-per-row grid cannot produce. The cycle repeats for as long as the gallery is, so the wall is driven by however many photos it holds — no supported count, and nothing is ever repeated to pad a row. Same markup, same schema, same data: this block only re-places the tiles the Gallery component already renders. WHY THE CLUSTER SITS ON THE RIGHT CSS places items in DOM order and its cursor only ever moves FORWARD. A cluster on the LEFT would have to be laid before the tall photo beside it, and the cursor could then never come back up to fill the tall photo's rows — the wall would open a hole every cycle. Leading with the tall photo lets the four small ones fall into the two rows it leaves, which tiles exactly. (A dense auto-flow would force the mirror image, at the price of letting later photos jump ahead of earlier ones. Not worth it.) WHY HEIGHTS ARE ROW TRACKS, NOT ASPECT RATIOS Two tiles of different widths in the same band would resolve to different heights from a ratio, and a wide tile left with no sibling would collapse. Fixed tracks give every tile a definite height at any photo count. WHY THE CLUSTER IS 3 COLUMNS x 3 ROWS Exactly half the featured tile's width AND half its height, so the cluster and the photo it sits beside frame at the SAME aspect ratio. The sizes differ; the crop does not, which is what keeps subjects intact across a wall of mixed tile sizes. */ @media (min-width:768px){ [data-design-preset="modern-utility"] .ak-gallery__grid{ grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:clamp(52px,5.2vw,86px); gap:clamp(.5rem,.9vw,.8rem); } [data-design-preset="modern-utility"] .ak-gallery__item{aspect-ratio:auto;} /* Band A — a wide featured photo beside an upright one, same height. */ [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+1){grid-column:span 7;grid-row:span 5;} [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+2){grid-column:span 5;grid-row:span 5;} /* Band B — the tall featured photo, then the 2x2 cluster that locks beside it. */ [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+3){grid-column:span 6;grid-row:span 6;} [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+4), [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+5), [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+6), [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+7){grid-column:span 3;grid-row:span 3;} /* FLUSH ENDINGS A gallery whose length is not a multiple of 7 stops mid-band, and an unfinished CLUSTER leaves a square hole punched in the middle of the wall — far uglier than a short last row. Each rule below grows the surviving tiles into exactly the space their band has left, so every count from 1 upwards ends level. Positions 2 and 7 already close their band and need no rule. */ /* …#1: a lone featured photo becomes a full-width banner. */ [data-design-preset="modern-utility"] .ak-gallery__item:last-child:nth-child(7n+1){grid-column:1 / -1;grid-row:span 4;} /* …#3: no cluster follows it, so the featured photo takes the whole band. */ [data-design-preset="modern-utility"] .ak-gallery__item:last-child:nth-child(7n+3){grid-column:1 / -1;grid-row:span 4;} /* …#4: one cluster tile — grow it to the full half instead of a lone square. */ [data-design-preset="modern-utility"] .ak-gallery__item:last-child:nth-child(7n+4){grid-column:span 6;grid-row:span 6;} /* …#5: two cluster tiles — stand them full height, side by side. */ [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+4):nth-last-child(2), [data-design-preset="modern-utility"] .ak-gallery__item:last-child:nth-child(7n+5){grid-row:span 6;} /* …#6: three of four — the last one takes the cluster's bottom row. */ [data-design-preset="modern-utility"] .ak-gallery__item:last-child:nth-child(7n+6){grid-column:span 6;} /* A short, wide crop loses its subject when the frame is centred — landscape and adventure photos carry it just above the middle. The two featured tiles are tall enough to show the frame honestly, so they keep a true centre; their full-width fallbacks above are banners and take the shared bias. */ [data-design-preset="modern-utility"] .ak-gallery__item img{object-position:50% 42%;} [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+1):not(:last-child) img, [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+3):not(:last-child) img{object-position:50% 50%;} } /* Phone: the same 7-photo rhythm at two columns. The band-A featured photo runs edge to edge and everything else pairs up, so the wall keeps its big/small contrast instead of becoming one long column of identical photos. Ratios stay generous (16:10 and square) — a 12-column collage squeezed onto a phone is what produces the letterboxed slivers this avoids. Under 360px the base single column stands; half of that really is a thumbnail. */ @media (min-width:360px) and (max-width:767.98px){ [data-design-preset="modern-utility"] .ak-gallery__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.45rem,1.6vw,.7rem); } [data-design-preset="modern-utility"] .ak-gallery__item{aspect-ratio:1/1;} [data-design-preset="modern-utility"] .ak-gallery__item:nth-child(7n+1){grid-column:1 / -1;aspect-ratio:16/10;} /* The three positions a 7-cycle can strand a tile at with no partner: give it the row rather than leaving a gap beside it. */ [data-design-preset="modern-utility"] .ak-gallery__item:last-child:nth-child(7n+2), [data-design-preset="modern-utility"] .ak-gallery__item:last-child:nth-child(7n+4), [data-design-preset="modern-utility"] .ak-gallery__item:last-child:nth-child(7n+6){grid-column:1 / -1;aspect-ratio:16/10;} [data-design-preset="modern-utility"] .ak-gallery__item img{object-position:50% 42%;} } /* ---- Contact: one card per preset --------------------------------------- */ /* The card is a single surface now, so each preset states it once here rather than colouring an intro slab and a form panel separately. */ [data-design-preset="expedition"] .ak-contact{ background:transparent;border-color:transparent; box-shadow:none; } /* Expedition's card is dark, so the information half keeps light type. The column paints NO background of its own — only the hairline between the two halves separates them. */ [data-design-preset="expedition"] .ak-contact__intro{background:transparent;border-right-color:rgba(255,255,255,.14);color:#fff;} [data-design-preset="expedition"] .ak-contact__intro .ak-heading{color:#fff;} [data-design-preset="expedition"] .ak-contact__intro .ak-lead, [data-design-preset="expedition"] .ak-contact__prompt p{color:rgba(255,255,255,.8);} [data-design-preset="expedition"] .ak-contact__prompt{border-top-color:rgba(255,255,255,.2);} [data-design-preset="expedition"] .ak-contact__detail{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);} [data-design-preset="expedition"] .ak-contact__detail:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);} [data-design-preset="expedition"] .ak-contact__label{color:rgba(255,255,255,.62);} [data-design-preset="expedition"] .ak-contact__detail :is(a,.ak-contact__address){color:#fff;} [data-design-preset="editorial-premium"] .ak-contact{ background:transparent;border-color:var(--site-border);box-shadow:none; } [data-design-preset="warm-local"] .ak-contact{background:#fff;border-color:rgba(120,80,40,.16);} [data-design-preset="modern-utility"] .ak-contact{background:#fff;border-color:var(--ak-hairline);} /* ---- Frosted Glass visual preset ---------------------------------------- */ /* Alpine glass. One continuous atmospheric ground, a translucent panel per section, and brighter cards inside those panels. THREE DEPTH LAYERS, deliberately different alphas. Depth here is carried by opacity, not by shadows: LAYER 1 page ground opaque, gradient-built alpine atmosphere LAYER 2 section glass .46 white -- the band wrapper LAYER 3 inner cards .60 white -- cards, FAQ rows, quotes chips .44 white -- controls and pills inside a card CTA .72 white -- the strongest surface on the page A card over a band composites to about 77% white over about 46% over the ground: three steps the eye can actually separate. WHY THIS IS SCOPED TO THE WRAPPER, NOT TO EACH SECTION. The renderer stripes every non-full-bleed section with ak-band--surface or ak-band--tint (see apps/renderer/src/render.cjs). Those paint an OPAQUE white or grey rectangle, which is what used to make ProductGrid, About, FAQ, Gallery, Contact and Reviews look like plain blocks no matter how their inner cards were styled -- the preset only ever cleared --site-section-tint and left ak-band--surface solid white. Painting the band itself means every section, including any section added later, inherits the material for free. Sections below therefore mostly REMOVE their own panel rather than add one. */ [data-design-preset="frosted-glass"]{ --site-maxw:1200px; /* Radii step down through the layers so a card never looks softer than the panel holding it. */ --site-radius-sm:10px; --site-radius-md:14px; --site-radius-lg:20px; --site-radius-xl:26px; --site-radius-full:999px; /* ---------- LAYER 1 -- page ground ---------- */ --site-page-bg:#dce6f3; /* The white wash laid over an UPLOADED background photo. Three stops rather than one flat value: the head of the page sits under the navbar pill and the hero, which supply their own contrast, while the middle is where body copy meets the photo through .46 glass and needs the most help. Named here so a site's ground can be tuned without touching the declaration. */ --ak-page-veil-top:52%; --ak-page-veil-mid:40%; --ak-page-veil-bot:58%; --site-section-tint:transparent; --ak-sky-hi:#f4f8fd; --ak-sky-lo:#d4e0f0; --ak-ridge-near:#8fa9c9; --ak-ridge-mid:#a2bad6; --ak-ridge-far:#b7c9e0; --ak-fog:#eaf1fa; /* ---------- LAYER 2 -- section glass ---------- SMOKED, not white. The bands used to be a white film (rgba(255,255,255,.46)) that sat LIGHTER than the sky behind them, so a "glass" panel read as a sheet of paper laid on the gradient. The hero's card is the material this preset is actually known for — a smoked pane you can see the picture through — and these now share its character: a light slate tint instead of white, so each band sits a step DARKER and cooler than the ground and the photograph-like depth survives. It stops well short of the hero's own --ak-pane-bg (#0b1728 at 34%). That value is designed to sit over a PHOTOGRAPH; over this pale sky it composites to a flat mid-grey where white text measures 2.56:1 and dark text is the only option left. The tint below composites to ~rgb(208,219,234) — visibly smoked, and still 11:1 for the dark ink the sections are set in. */ --ak-band-bg:rgba(196,209,226,.62); --ak-band-edge:rgba(255,255,255,.55); /* The sheen follows the hero card's angle and strength: a 34% white highlight across the top of a smoked pane washes the very thing that makes it read as glass. */ --ak-band-sheen:linear-gradient(158deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,0) 68%); --ak-band-shadow:inset 0 1px 0 0 rgba(255,255,255,.62),0 28px 64px -36px rgba(26,52,92,.42); --ak-band-radius:26px; /* Deliberately none, and the one dial to turn if that is ever revisited. What sits behind a band is a smooth gradient, so blurring it is a visual no-op -- and any non-none backdrop-filter here would make the wrapper a Backdrop Root, which flattens every inner card's blur into this panel's flat white wash instead of the real ground. It would also add a full-width composited layer per section and turn the wrapper into a containing block for positioned descendants. */ --ak-band-blur:none; /* ---------- LAYER 3 -- inner cards ---------- */ --ak-card-bg:rgba(255,255,255,.60); --ak-card-hover-bg:rgba(255,255,255,.74); --ak-card-edge:rgba(255,255,255,.70); --ak-card-sheen:linear-gradient(158deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.08) 36%,rgba(255,255,255,0) 64%); --ak-card-shadow:inset 0 1px 0 0 rgba(255,255,255,.70),0 20px 42px -26px rgba(26,52,92,.44); --ak-card-hover-shadow:0 34px 60px -28px rgba(26,52,92,.50); --ak-card-blur:saturate(1.55) blur(20px); /* ---------- LAYER 3a -- the product tile ---------- */ /* Brighter than a plain card, and its own pair of names rather than a bump to --ak-card-bg: the tile FRAMES a photograph, so it has to read as an object in its own right, while a quote or a booking panel is still just a surface. Raising the shared card alpha to get this would have lightened every one of those too and flattened the three-step depth the preset is built on. */ --ak-tile-bg:rgba(255,255,255,.70); --ak-tile-hover-bg:rgba(255,255,255,.82); /* The even margin between the tile edge and the photo inside it. */ --ak-tile-frame:.5rem; /* ---------- LAYER 3b -- chips and controls inside a card ---------- */ --ak-chip-bg:rgba(255,255,255,.44); --ak-chip-edge:rgba(255,255,255,.56); /* ---------- Over-photo pane: navbar above the hero, and the hero copy ----- */ /* Separate from the layers above because the ground here is a photograph, not the pale page: a white FILL would hide it, so this is a WASH. SMOKED, not white. The copy over it is white (the base sheet sets that for every overlay hero), and a white wash under white type gives it nothing to sit on — over a bright sky, which is most of these photos, the text simply dissolved. Tinting toward the preset's own alpine navy keeps the photo fully visible through the pane while giving the type a floor. */ /* Light by default, because the DEFAULT material is light. The dark smoked navy this used to hold is still exactly what "pane" and "night" set — see the material blocks at the foot of this sheet. */ --ak-pane-bg:rgba(222,231,243,.86); --ak-pane-edge:rgba(255,255,255,.80); --ak-pane-blur:saturate(1.25) blur(18px); /* ONE material for the pill, at every scroll position and over every ground. It used to wear a light wash and WHITE type while it sat over the hero photo, which turned into white-on-white the moment the hero scrolled away -- the pill is sticky and the treatment was structural, so it never switched back. Tinting it dark instead fixed the legibility and lost the preset: a near-black bar is the one thing frosted glass is not. A frosted pill with the page's own ink is legible on BOTH grounds and is what the design is actually made of, so there is no state to get wrong. */ --ak-nav-bg:rgba(255,255,255,.78); --ak-nav-bg-scrolled:rgba(255,255,255,.90); /* ---------- CTA -- one step stronger than a card ---------- */ /* One step stronger than a band, which is what makes the closing panel read as the end of the page. It tracks the MATERIAL — each one restates it — so the CTA never stays white while the sections around it change. */ --ak-cta-bg:rgba(214,226,240,.80); --ak-cta-edge:rgba(255,255,255,.76); --ak-cta-blur:saturate(1.6) blur(26px); /* ---------- Geometry. One frame for the whole page. ---------- */ --ak-band-inset:clamp(1rem,3vw,2rem); --ak-band-maxw:1280px; --ak-band-gap:clamp(1rem,2.2vw,1.75rem); --ak-band-pad-i:clamp(1.25rem,3vw,2.75rem); --ak-band-pad-b:clamp(2.25rem,4.5vw,3.75rem); --ak-head-gap:clamp(1.5rem,3vw,2.25rem); --ak-nav-h:74px; --ak-nav-gap:16px; /* Deep alpine navy, mixed TOWARD navy rather than derived from the brand, so the footer stays deep for any tenant hue. */ --site-footer-bg:color-mix(in srgb,#0b1728 82%,var(--site-primary-strong)); /* Softer than the utility presets: glass should settle, not snap. Rescaled with the rest of the sheet — settling is a shape, not a long duration. BASE tokens: the tier scales these (see "motion tokens" at the top). */ --ak-base-rise:40px;--ak-base-dur:730ms;--ak-base-stagger:84ms; /* Legacy names kept as aliases so any rule not yet migrated still lands on the right material. New rules use the layer names above. */ --ak-glass:var(--ak-chip-bg); --ak-glass-strong:var(--ak-card-bg); --ak-glass-edge:var(--ak-card-edge); --ak-glass-shadow:var(--ak-card-shadow); --ak-glass-blur:var(--ak-card-blur); --ak-glass-sheen:var(--ak-card-sheen); } /* WORDMARK IDENTITY -- SOFT-TECHNICAL. Space Grotesk's flattened bowls and single-storey "a" give the mark a slightly engineered voice, which keeps an otherwise very soft material from reading as decorative. Size, weight, case and slant are the SHARED treatment every preset wears; only the face and the tracking are this preset's own. The tracking opens up past the geometric presets because Space Grotesk's wide flat bowls close their counters when set in caps at this size. */ [data-design-preset="frosted-glass"]{ --ak-wordmark-weight:700;--ak-wordmark-case:uppercase; --ak-wordmark-tracking:.03em;--ak-wordmark-slant:italic; --ak-wordmark-size:clamp(1.15rem,2.5vw,2.4rem);} /* ---- LAYER 1: the alpine ground ------------------------------------------ */ /* Two background-image declarations on purpose. The first is atmosphere only and parses everywhere; the second adds the ridges. A single unparseable gradient function invalidates the WHOLE list, so an engine that cannot read conic-gradient keeps the first declaration instead of losing the ground. */ [data-design-preset="frosted-glass"] body, body[data-design-preset="frosted-glass"]{ background-color:var(--site-page-bg); background-image: radial-gradient(70rem 46rem at 88% -8%,rgba(255,252,244,.70),transparent 62%), radial-gradient(64rem 40rem at 16% 112%,color-mix(in srgb,var(--site-primary) 20%,transparent),transparent 66%), linear-gradient(180deg,var(--ak-sky-hi) 0%,#e6edf8 36%,#dde7f4 70%,var(--ak-sky-lo) 100%); /* Ridges. A conic-gradient whose origin is the APEX and whose from-angle is 180deg minus half its width draws a symmetric downward peak -- no images and no clip-paths. The fog band sits above them in the stack and dissolves their lower two thirds, so what is left is hazed summits rather than three filled triangles. */ background-image: radial-gradient(70rem 46rem at 88% -8%,rgba(255,252,244,.70),transparent 62%), linear-gradient(180deg,transparent 0%,transparent 38%,color-mix(in srgb,var(--ak-fog) 55%,transparent) 52%,color-mix(in srgb,var(--ak-fog) 92%,transparent) 68%,var(--ak-fog) 84%,color-mix(in srgb,var(--ak-fog) 0%,transparent) 100%), conic-gradient(from 152deg at 36% 33%,transparent 0deg,color-mix(in srgb,var(--ak-ridge-near) 42%,transparent) 0deg 56deg,transparent 56deg), conic-gradient(from 158deg at 63% 21%,transparent 0deg,color-mix(in srgb,var(--ak-ridge-mid) 36%,transparent) 0deg 44deg,transparent 44deg), conic-gradient(from 146deg at 11% 40%,transparent 0deg,color-mix(in srgb,var(--ak-ridge-far) 30%,transparent) 0deg 68deg,transparent 68deg), radial-gradient(64rem 40rem at 16% 112%,color-mix(in srgb,var(--site-primary) 20%,transparent),transparent 66%), linear-gradient(180deg,var(--ak-sky-hi) 0%,#e6edf8 36%,#dde7f4 70%,var(--ak-sky-lo) 100%); /* no-repeat is required: without it the fixed layers tile against the viewport at some sizes. Fixed keeps the ridges still while the panels slide over them, which is the whole optical premise of the preset. */ background-repeat:no-repeat; background-attachment:fixed; } /* The wedges get tall and thin on a phone; widen them and drop the apexes. */ @media (max-width:767.98px){ [data-design-preset="frosted-glass"] body, body[data-design-preset="frosted-glass"]{ background-image: radial-gradient(70rem 46rem at 88% -8%,rgba(255,252,244,.70),transparent 62%), linear-gradient(180deg,transparent 0%,transparent 40%,color-mix(in srgb,var(--ak-fog) 60%,transparent) 54%,var(--ak-fog) 78%,color-mix(in srgb,var(--ak-fog) 0%,transparent) 100%), conic-gradient(from 139deg at 34% 38%,transparent 0deg,color-mix(in srgb,var(--ak-ridge-near) 40%,transparent) 0deg 82deg,transparent 82deg), conic-gradient(from 147deg at 68% 28%,transparent 0deg,color-mix(in srgb,var(--ak-ridge-mid) 34%,transparent) 0deg 66deg,transparent 66deg), linear-gradient(180deg,var(--ak-sky-hi) 0%,#e6edf8 36%,#dde7f4 70%,var(--ak-sky-lo) 100%); } } /* ---- LAYER 1, replaced: an uploaded page photograph ---------------------- */ /* OPTIONAL, and nothing above changes when it is absent. The renderer emits data-page-bg="image" plus --site-page-image ONLY when the theme carries a background image that survived resolvePageBackgroundImage() -- so a site that has uploaded nothing (which is every site today) keeps the gradient ground exactly as it was, and a stored value that is not a safe url falls back to it too. The attribute is on , the same element the preset scope resolves to, so this selector is (0,2,1) against the ground's (0,1,1) -- it wins over BOTH the desktop rule and the phone one without needing to be ordered against a media query, and without touching either of them. THE VEIL IS NOT DECORATION. Every panel on the page is translucent white; a photograph read straight through them would put arbitrary contrast behind body copy at any scroll position. The white wash flattens the photo's dynamic range to something the glass can sit on and still be read, which is why it is part of the same declaration rather than an opt-in. Fixed, like the gradient ground: the panels slide over a still image, which is the optical premise the whole preset is built on. */ [data-design-preset="frosted-glass"] body[data-page-bg="image"], body[data-design-preset="frosted-glass"][data-page-bg="image"]{ background-color:var(--site-page-bg); background-image: linear-gradient(180deg, color-mix(in srgb,#ffffff var(--ak-page-veil-top),transparent) 0%, color-mix(in srgb,#ffffff var(--ak-page-veil-mid),transparent) 46%, color-mix(in srgb,#ffffff var(--ak-page-veil-bot),transparent) 100%), var(--site-page-image); background-size:auto,cover; background-position:center,center; background-repeat:no-repeat,no-repeat; background-attachment:fixed,fixed; } /* A phone shows a much taller crop of the same photo, so the middle of the image spends longer behind copy; the veil closes up to compensate. */ @media (max-width:767.98px){ [data-design-preset="frosted-glass"] body[data-page-bg="image"], body[data-design-preset="frosted-glass"][data-page-bg="image"]{ --ak-page-veil-top:60%; --ak-page-veil-mid:52%; --ak-page-veil-bot:64%; } } /* ---- LAYER 2: the section panel ------------------------------------------ */ /* :is(.ak-band--surface,.ak-band--tint) IS the set of content sections -- the renderer gives exactly those two classes to non-full-bleed sections, so Navbar (sticky only), Hero, CTA and Footer are excluded structurally with no section-type list to keep in sync. There is no bare .ak-band rule in the base sheet, so the two modifiers are also the only handle the dead-class test accepts. DO NOT add overflow:hidden, position/z-index, backdrop-filter, filter, opacity below 1, isolation or contain:paint to this wrapper. The first would clip cards' hover-lift shadows, the second would fight the sticky navbar at z-index 50, and any of the rest would make it a Backdrop Root and silently flatten every inner card's blur. */ [data-design-preset="frosted-glass"] :is(.ak-band--surface,.ak-band--tint){ /* Geometry ONLY -- deliberately no background here. This selector ties at (0,2,0) with .ak-section-wrap[data-bg="dark"] in the base sheet and sits later in the file, so a background:transparent here would win the tie and strip the colour from every section that chose one in the editor. The guarded rule below repaints the default bands instead, at (0,4,0). */ width:min(calc(100% - 2 * var(--ak-band-inset)),var(--ak-band-maxw)); margin:var(--ak-band-gap) auto; /* Transparent rather than absent so the content box is identical whether or not the material rule below applies. */ border:1px solid transparent; border-radius:var(--ak-band-radius); } /* The material. The :not() guards are REQUIRED, not defensive: the selector above ties at (0,2,0) with .ak-section-wrap[data-bg="surface"] in the base sheet and this block is later in the file, so without them the glass would silently override every per-section background chosen in the editor. */ [data-design-preset="frosted-glass"] :is(.ak-band--surface,.ak-band--tint):not([data-bg="primary"]):not([data-bg="dark"]):not([data-custom-bg]){ background-color:var(--ak-band-bg); background-image:var(--ak-band-sheen); border-color:var(--ak-band-edge); box-shadow:var(--ak-band-shadow); -webkit-backdrop-filter:var(--ak-band-blur);backdrop-filter:var(--ak-band-blur); } /* One padding value for every section. The shorthand also beats the 1440px bump in the base sheet, so the vertical rhythm is a single number. */ [data-design-preset="frosted-glass"] .ak-section{ padding:var(--ak-band-pad-b) var(--ak-band-pad-i); } [data-design-preset="frosted-glass"] .ak-heading{letter-spacing:-.02em;font-weight:700;} [data-design-preset="frosted-glass"] .ak-lead{color:color-mix(in srgb,var(--site-fg) 74%,transparent);} [data-design-preset="frosted-glass"] .ak-eyebrow{letter-spacing:.16em;font-size:.7rem;} /* One head gap everywhere. The base sets margin-bottom on the head and margin-top on each grid; adjacent siblings COLLAPSE to the larger, so the gap silently differed per section. Zeroing the grids makes the token literal. */ [data-design-preset="frosted-glass"] :is(.ak-section__head,.ak-flex__head){margin-bottom:var(--ak-head-gap);max-width:64ch;} [data-design-preset="frosted-glass"] :is(.ak-product-grid__grid,.ak-gallery__grid,.ak-testimonials__grid,.ak-faq__list){margin-top:0;} [data-design-preset="frosted-glass"] .ak-testimonials__summary{margin-bottom:var(--ak-head-gap);} /* Buttons. The primary stays solid -- an action must never be ambiguous -- and the ghost becomes a chip. */ [data-design-preset="frosted-glass"] .ak-btn{border-radius:var(--site-radius-full);font-weight:650;} [data-design-preset="frosted-glass"] :is(.ak-btn--primary,.ak-btn--accent){ box-shadow:0 10px 24px -12px color-mix(in srgb,var(--site-primary) 70%,transparent); } [data-design-preset="frosted-glass"] .ak-btn--ghost{ background:var(--ak-chip-bg);border-color:var(--ak-chip-edge);color:var(--site-fg); } [data-design-preset="frosted-glass"] .ak-btn--ghost:hover{background:var(--ak-card-hover-bg);} /* ---- Navbar -------------------------------------------------------------- */ /* Same pill as before, now wired to the shared frame so the header and the panels below it line up on one grid. */ [data-design-preset="frosted-glass"] .ak-section-wrap.ak-wrap--sticky{ background:transparent; padding:var(--ak-nav-gap) var(--ak-band-inset) 0; } @supports selector(:has(*)){ [data-design-preset="frosted-glass"] .ak-wrap--sticky:has(+ .ak-section-wrap .ak-hero--overlay){ margin-bottom:calc(-1 * (var(--ak-nav-h) + var(--ak-nav-gap))); } } [data-design-preset="frosted-glass"] .ak-navbar{ height:var(--ak-nav-h); max-width:min(var(--ak-band-maxw),100%);margin-inline:auto; padding:0 .75rem 0 1.1rem; border:1px solid var(--ak-card-edge); border-radius:var(--site-radius-full); background:#fff; background:var(--ak-nav-bg); box-shadow:var(--ak-card-shadow); -webkit-backdrop-filter:var(--ak-card-blur);backdrop-filter:var(--ak-card-blur); } [data-design-preset="frosted-glass"] .ak-navbar.is-scrolled{ background:var(--ak-nav-bg-scrolled); box-shadow:0 22px 46px -24px rgba(26,52,92,.5); } /* NO over-photo variant. There deliberately is not one any more: the pill is position:sticky, so whatever it wears over the hero it also wears over the pale page and the near-white panels for the whole rest of the scroll. Any treatment tuned for the photograph is therefore automatically wrong for 90% of the page, which is exactly how the white-type version came to vanish. One material, legible everywhere, no state to get out of sync. */ /* Anchored to a full-width navbar's bottom edge; inside a pill it is a stray underline. */ [data-design-preset="frosted-glass"] .ak-navbar__progress{display:none;} [data-design-preset="frosted-glass"] .ak-navbar__links a{font-size:.82rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;} [data-design-preset="frosted-glass"] .ak-navbar__brand img{height:clamp(26px,2.6vw,34px);} [data-design-preset="frosted-glass"] .ak-navbar__brand[data-logo-kind="lockup"] img{ height:clamp(32px,3.4vw,44px);max-width:min(56vw,320px); } @media (max-width:860px){ [data-design-preset="frosted-glass"] .ak-navbar__nav{ background:color-mix(in srgb,#ffffff 92%,transparent); border-radius:var(--site-radius-lg);border:1px solid var(--ak-card-edge); -webkit-backdrop-filter:var(--ak-card-blur);backdrop-filter:var(--ak-card-blur); } } /* ---- Hero ---------------------------------------------------------------- */ [data-design-preset="frosted-glass"] .ak-hero__media{border-radius:var(--site-radius-xl);} /* Full-bleed and full-height. svh rather than vh so mobile browsers measure the VISIBLE viewport instead of the one behind the collapsing URL bar; vh stays as the fallback declaration for engines without svh. */ [data-design-preset="frosted-glass"] .ak-hero--overlay{ min-height:100vh;min-height:100svh; display:grid;padding:calc(var(--ak-nav-h) + var(--ak-nav-gap) + 1rem) clamp(1rem,4vw,2.5rem) clamp(2rem,5vw,4rem); } /* The copy sits on its own pane: it is the one place in the kit where text is guaranteed to be over an uncontrolled photo, and a pane is what makes that legible without dimming the picture. */ [data-design-preset="frosted-glass"] .ak-hero--overlay .ak-hero__content{ background-color:var(--ak-pane-bg); /* The same diagonal highlight every other panel carries. Without it a smoked pane over a photo reads as a grey box someone dropped on the picture; with it, it reads as glass. */ background-image:linear-gradient(158deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,0) 68%); border:1px solid var(--ak-pane-edge); border-radius:var(--site-radius-xl); padding:clamp(1.5rem,3.5vw,2.75rem); max-width:min(46rem,100%); box-shadow:0 30px 70px -40px rgba(4,10,22,.7); -webkit-backdrop-filter:var(--ak-pane-blur);backdrop-filter:var(--ak-pane-blur); } [data-design-preset="frosted-glass"] .ak-hero--overlay[data-content-position="center"] .ak-hero__content{ place-self:center;text-align:center; } [data-design-preset="frosted-glass"] .ak-hero--overlay[data-content-position="center"] .ak-hero__actions{justify-content:center;} [data-design-preset="frosted-glass"] .ak-hero--overlay[data-content-position="bottom-left"] .ak-hero__content{ place-self:end start;text-align:left; } [data-design-preset="frosted-glass"] .ak-hero--overlay .ak-eyebrow{ display:inline-block;padding:.35rem .9rem;border-radius:var(--site-radius-full); background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3); color:#fff; } /* PUT BACK what this preset accidentally took away. The base sheet makes every overlay hero's copy white -- .ak-hero--overlay .ak-lead -- but that is (0,2,0), exactly the same weight as this preset's own [data-design-preset] .ak-lead, which is LATER in the file and therefore won. The body copy over the photograph was rendering in dark ink as a result, and the ghost CTA beside it lost its white for the same reason. Restated here at (0,3,0) so no ordering can undo it again. */ [data-design-preset="frosted-glass"] .ak-hero--overlay :is(.ak-lead,.ak-hero__content p){ color:rgba(255,255,255,.94); text-shadow:0 1px 14px rgba(4,10,22,.45); } [data-design-preset="frosted-glass"] .ak-hero--overlay .ak-heading{ color:#fff;text-shadow:0 2px 22px rgba(4,10,22,.5); } [data-design-preset="frosted-glass"] .ak-hero--overlay .ak-btn--ghost{ color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.55); } [data-design-preset="frosted-glass"] .ak-hero--overlay .ak-btn--ghost:hover{ background:rgba(255,255,255,.24);border-color:#fff; } /* NO SEAM. There used to be a tall ::after here fading the photo into the page ground -- it read as a milky smear washing out the bottom third of the picture, and it is plainly wrong once the ground is the site's OWN uploaded photograph rather than the pale gradient it was mixed from. The hero now ends on its own edge, which the panel below it already softens. */ /* ---- Section heads and the grid head ------------------------------------- */ [data-design-preset="frosted-glass"] .ak-product-grid__head{align-items:flex-end;} [data-design-preset="frosted-glass"] .ak-product-grid__viewall{ border-radius:var(--site-radius-full); background-color:var(--ak-card-bg); background-image:var(--ak-card-sheen); border:1px solid var(--ak-card-edge); color:var(--site-primary-strong);font-weight:650; } [data-design-preset="frosted-glass"] .ak-product-grid__viewall:hover{ background-color:var(--ak-card-hover-bg);color:var(--site-primary-strong); } [data-design-preset="frosted-glass"] .ak-product-grid__count{ background:color-mix(in srgb,var(--site-primary) 14%,transparent);color:var(--site-primary-strong); } /* ---- Product cards ------------------------------------------------------- */ /* A TILE, not a photo with a caption pane. The card is one bright sheet of glass and the photograph sits INSIDE it with an even frame on all four sides, so what the eye reads first is a row of matching objects rather than three rectangles of someone else's photography. The frame is padding on .ak-card plus a radius on .ak-card__media -- the base sets overflow:hidden on both, so the photo clips to its own corner and the card keeps the softer outer one. Radii step DOWN from card to photo for the usual reason: an inner corner that is rounder than the one containing it reads as a mistake. The blur stays on .ak-card and NOT on .ak-card__body. .ak-card is the element carrying data-reveal, and [data-reveal].ak-pre{opacity:0} makes it a Backdrop Root while revealing -- a filter on the body would then blur nothing but the card itself. Keeping it here also gives the badge the photo as its backdrop. */ [data-design-preset="frosted-glass"] .ak-product-grid__grid{gap:clamp(1.1rem,2.4vw,1.7rem);} [data-design-preset="frosted-glass"] .ak-card{ background-color:var(--ak-tile-bg); background-image:var(--ak-card-sheen); border:1px solid var(--ak-card-edge); border-radius:var(--site-radius-lg); box-shadow:var(--ak-card-shadow); -webkit-backdrop-filter:var(--ak-card-blur);backdrop-filter:var(--ak-card-blur); padding:var(--ak-tile-frame); transition:transform .35s ease,box-shadow .35s ease,background-color .35s ease; } [data-design-preset="frosted-glass"] .ak-card__media{ margin:0;border-radius:var(--site-radius-md); } [data-design-preset="frosted-glass"] .ak-card__media img{aspect-ratio:16/11;} /* Transparent: the tile above is the only surface. A second fill here is what made the old card read as a pane stacked on a photo. */ [data-design-preset="frosted-glass"] .ak-card__body{ background-color:transparent;background-image:none;border-top:0; padding:.95rem .55rem .35rem;gap:.4rem; } [data-design-preset="frosted-glass"] .ak-card:hover{ transform:translateY(-5px); background-color:var(--ak-tile-hover-bg); box-shadow:var(--ak-card-hover-shadow); } [data-design-preset="frosted-glass"] .ak-card__title{font-size:1.06rem;line-height:1.35;letter-spacing:-.02em;font-weight:750;} [data-design-preset="frosted-glass"] .ak-card__desc{font-size:.875rem;line-height:1.5;color:color-mix(in srgb,var(--site-fg) 58%,transparent);} [data-design-preset="frosted-glass"] .ak-card__metarow{ gap:.3rem 1.1rem;margin:.15rem 0 0; color:color-mix(in srgb,var(--site-fg) 62%,transparent);font-weight:600;font-size:.8rem; } [data-design-preset="frosted-glass"] .ak-card__meta{font-size:.82rem;color:color-mix(in srgb,var(--site-fg) 62%,transparent);} [data-design-preset="frosted-glass"] .ak-card__metarow svg{color:var(--site-primary);} /* THE PRICE ROW. .ak-card__foot is display:contents in the base sheet, so giving it a real display is all it takes to put the price and the button on ONE line -- price left, action right -- without the component knowing. The inner .ak-card__footer then stops being the bottom row and becomes just the price + availability cluster, which is why its own margin/padding go. */ [data-design-preset="frosted-glass"] .ak-card__foot{ display:flex;align-items:center;justify-content:space-between;gap:.65rem; margin-top:auto;padding-top:.85rem; border-top:1px solid color-mix(in srgb,var(--site-fg) 10%,transparent); } [data-design-preset="frosted-glass"] .ak-card__footer{ flex:1 1 auto;min-width:0;justify-content:flex-start;gap:.45rem; margin-top:0;padding-top:0; } [data-design-preset="frosted-glass"] .ak-card__price{color:var(--site-fg);font-weight:800;font-size:1rem;} [data-design-preset="frosted-glass"] .ak-card .ak-btn{ flex:none;width:auto;margin-top:0; border-radius:var(--site-radius-full);padding:.52rem 1.05rem;font-size:.84rem;gap:.4rem; background:var(--site-primary);color:var(--site-primary-contrast);border-color:transparent; } /* Decorative, and deliberately CSS rather than markup: the arrow is this preset's punctuation, not part of anyone's button label. */ [data-design-preset="frosted-glass"] .ak-card .ak-btn::after{content:"\2192";font-size:1em;line-height:1;} /* The badge sits ON the photo. A light chip, mixed from the site's action colour so it stays the brand's own hue on every tenant, over a blur so it survives a bright or busy corner. */ [data-design-preset="frosted-glass"] .ak-card__badge{ top:.7rem;left:.7rem; background:color-mix(in srgb,var(--site-accent) 26%,#ffffff); border:1px solid color-mix(in srgb,#ffffff 70%,transparent); color:color-mix(in srgb,var(--site-accent) 72%,#0b1728); font-weight:700;letter-spacing:.03em;text-transform:none; box-shadow:0 6px 16px -10px rgba(26,52,92,.55); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } [data-design-preset="frosted-glass"] .ak-card__avail{ background:var(--ak-chip-bg);border:1px solid var(--ak-chip-edge);color:var(--site-fg-soft); } /* ---- Booking ------------------------------------------------------------- */ [data-design-preset="frosted-glass"] .ak-booking{ background-color:#fff; background-color:var(--ak-card-bg); background-image:var(--ak-card-sheen); border:1px solid var(--ak-card-edge); border-radius:var(--site-radius-xl); box-shadow:var(--ak-card-shadow); -webkit-backdrop-filter:var(--ak-card-blur);backdrop-filter:var(--ak-card-blur); } [data-design-preset="frosted-glass"] .ak-book__dialog--steps{--ak-bk-ground:#ffffff;} [data-design-preset="frosted-glass"] .ak-book__dialog{ background:color-mix(in srgb,#ffffff 94%,transparent); border:1px solid var(--ak-card-edge); border-radius:var(--site-radius-xl); -webkit-backdrop-filter:var(--ak-card-blur);backdrop-filter:var(--ak-card-blur); } /* No backdrop-filter on form controls: it repaints on every keystroke. */ [data-design-preset="frosted-glass"] .ak-pill{ border-radius:var(--site-radius-full);background:var(--ak-chip-bg);border-color:var(--ak-chip-edge); } [data-design-preset="frosted-glass"] .ak-pill[aria-pressed="true"], [data-design-preset="frosted-glass"] .ak-pill.is-selected{ background:var(--site-primary);border-color:transparent; } [data-design-preset="frosted-glass"] .ak-num{ border-radius:var(--site-radius-full);background:var(--ak-chip-bg);border-color:var(--ak-chip-edge); } /* THE CONTROLS, NOT THEIR WRAPPER. .ak-field is the label+input COLUMN -- a flex div -- so the old rules here painted a background and a radius onto a box nobody can see, left the actual on the base sheet's near-white fill with a --site-border hairline that vanishes against the glass, and hung :focus on a div that can never receive it. The whole control read as a soft smudge with no edge, and clicking one produced the base --site-focus-ring: two hard rings, the outer one --site-fg, which is the black outline that has no business anywhere near this preset. */ [data-design-preset="frosted-glass"] .ak-field{background:none;border:0;border-radius:0;} [data-design-preset="frosted-glass"] :is(.ak-field select,.ak-field input,.ak-contact textarea){ background:color-mix(in srgb,#ffffff 72%,transparent); border:1px solid color-mix(in srgb,var(--site-fg) 14%,transparent); border-radius:var(--site-radius-md); box-shadow:inset 0 1px 0 0 rgba(255,255,255,.55); } [data-design-preset="frosted-glass"] :is(.ak-field select,.ak-field input,.ak-contact textarea)::placeholder{ color:color-mix(in srgb,var(--site-fg) 42%,transparent); } [data-design-preset="frosted-glass"] :is(.ak-field select,.ak-field input,.ak-contact textarea):hover{ border-color:color-mix(in srgb,var(--site-fg) 24%,transparent); } /* One brand ring, drawn OUTSIDE the border so the field keeps its shape while focused instead of appearing to gain a second, heavier outline. */ [data-design-preset="frosted-glass"] :is(.ak-field select,.ak-field input,.ak-contact textarea):focus{ outline:none; background:color-mix(in srgb,#ffffff 92%,transparent); border-color:var(--site-primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--site-primary) 22%,transparent); } [data-design-preset="frosted-glass"] .ak-field label{ color:color-mix(in srgb,var(--site-fg) 76%,transparent);font-weight:650; } /* The same ring for every other focusable thing in the preset, for the same reason: --site-focus-ring's outer band is --site-fg, which reads as a black outline stamped on the glass. Redefined on the preset root so buttons, pills, number steppers and links all pick it up without a rule each. */ [data-design-preset="frosted-glass"]{ --site-focus-ring:0 0 0 3px color-mix(in srgb,var(--site-primary) 30%,transparent); } /* ---- Product detail: inherits the band ----------------------------------- */ [data-design-preset="frosted-glass"] .ak-product-detail{ background:transparent;background-image:none;border:0;box-shadow:none;padding:0; -webkit-backdrop-filter:none;backdrop-filter:none; } [data-design-preset="frosted-glass"] .ak-product-detail__media{border-radius:var(--site-radius-lg);} /* ---- Gallery ------------------------------------------------------------- */ [data-design-preset="frosted-glass"] .ak-gallery__grid{gap:clamp(.85rem,1.8vw,1.25rem);} [data-design-preset="frosted-glass"] .ak-gallery__item{ border-radius:var(--site-radius-lg); border:1px solid var(--ak-card-edge); box-shadow:var(--ak-card-shadow); } /* ---- Testimonials -------------------------------------------------------- */ [data-design-preset="frosted-glass"] .ak-testimonials__grid{gap:clamp(1.1rem,2.4vw,1.6rem);} [data-design-preset="frosted-glass"] .ak-quote{ background-color:#fff; background-color:var(--ak-card-bg); background-image:var(--ak-card-sheen); border:1px solid var(--ak-card-edge); border-radius:var(--site-radius-lg); box-shadow:var(--ak-card-shadow); padding:clamp(1.35rem,2.8vw,1.85rem); -webkit-backdrop-filter:var(--ak-card-blur);backdrop-filter:var(--ak-card-blur); transition:transform .35s ease,box-shadow .35s ease,background-color .35s ease; } [data-design-preset="frosted-glass"] .ak-quote:hover{ transform:translateY(-4px); background-color:var(--ak-card-hover-bg); box-shadow:var(--ak-card-hover-shadow); } [data-design-preset="frosted-glass"] .ak-quote__text{color:var(--site-fg);font-size:1.02rem;line-height:1.65;font-style:italic;} [data-design-preset="frosted-glass"] .ak-quote__head{ padding-bottom:.9rem;margin-bottom:.2rem; border-bottom:1px solid color-mix(in srgb,var(--site-fg) 10%,transparent); } [data-design-preset="frosted-glass"] .ak-quote__avatar{ border:2px solid color-mix(in srgb,#ffffff 85%,transparent); box-shadow:0 6px 14px -8px rgba(26,52,92,.5); } [data-design-preset="frosted-glass"] .ak-quote__rating{ padding:.3rem .6rem;border-radius:var(--site-radius-full); background:var(--ak-chip-bg);border:1px solid var(--ak-chip-edge);align-self:flex-start; } [data-design-preset="frosted-glass"] .ak-quote__source{color:var(--site-primary-strong);} [data-design-preset="frosted-glass"] .ak-quote__verified{filter:drop-shadow(0 1px 2px rgba(26,52,92,.2));} [data-design-preset="frosted-glass"] .ak-testimonials__summary{ display:inline-flex;padding:.45rem .95rem;border-radius:var(--site-radius-full); background:var(--ak-chip-bg);border:1px solid var(--ak-chip-edge); } /* ---- About: the band IS the panel, and the photo runs to its edge --------- */ /* No panel of its own. Stacking a card on the band is what made this read as a flat washed-out block; the image/text split now sits directly on the section glass, which is the single large panel the design asks for. From tablet up the photograph BLEEDS to the panel's own right edge, full height, so the section reads as one object split in two rather than as a picture parked next to some copy. Three things make that work: 1. NEGATIVE MARGIN, not a wider element. .ak-container is already exactly as wide as .ak-section's content box at every width this preset renders at (the band caps at --ak-band-maxw, which leaves less than --site-maxw once the section padding is off), so cancelling that padding on three sides lands the photo precisely on the panel edge. 2. THE PHOTO OWNS THE CORNER. The band wrapper deliberately has no overflow:hidden -- it would clip the cards' hover-lift shadows -- so the right pair of corners is rounded here instead, to the band radius less its 1px border. The left pair stays square where the copy meets it. 3. THE IMAGE IS TAKEN OUT OF FLOW. A stretched grid item whose child is height:100% has no definite height to resolve against during row sizing, so the row would fall back to the photo's INTRINSIC height and a tall original would blow the section open. Absolute positioning removes it from that calculation entirely: the row is sized by the copy, and the photo covers whatever height that comes to (with a floor, for a short About). */ [data-design-preset="frosted-glass"] .ak-about{ background:transparent;background-image:none;border:0;box-shadow:none;padding:0; -webkit-backdrop-filter:none;backdrop-filter:none; } [data-design-preset="frosted-glass"] .ak-about__media{border-radius:var(--site-radius-lg);} /* Stats: a measured row, not a strip of pills. Chips here competed with the product tiles for the same attention; hairline-divided figures read as evidence, which is what a proof row is for. auto-fit rather than a fixed three, because the section takes any number of stats. */ [data-design-preset="frosted-glass"] .ak-about__stats{ grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr)); gap:0; margin-top:clamp(1.5rem,3vw,2.25rem); padding-top:clamp(1.15rem,2.4vw,1.6rem); border-top:1px solid color-mix(in srgb,var(--site-fg) 12%,transparent); } [data-design-preset="frosted-glass"] .ak-about__stat{ background:transparent;border:0;border-radius:0; padding:.1rem clamp(.75rem,1.6vw,1.25rem); border-left:1px solid color-mix(in srgb,var(--site-fg) 12%,transparent); } /* The first figure lines up with the copy above it; a leading rule and an indent would both read as a missing column. */ [data-design-preset="frosted-glass"] .ak-about__stat:first-child{ border-left:0;padding-left:0; } [data-design-preset="frosted-glass"] .ak-about__stat b{ font-size:clamp(1.6rem,3vw,2.1rem);font-weight:750;letter-spacing:-.03em; color:var(--site-fg);margin-bottom:.1rem; } [data-design-preset="frosted-glass"] .ak-about__stat span{ font-size:.78rem;font-weight:600;letter-spacing:.02em; color:color-mix(in srgb,var(--site-fg) 58%,transparent); } @media (min-width:768px){ [data-design-preset="frosted-glass"] .ak-about{ grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(1.75rem,4vw,3.25rem); } [data-design-preset="frosted-glass"] .ak-about__media{ align-self:stretch; min-height:clamp(17rem,30vw,28rem); margin:calc(-1 * var(--ak-band-pad-b)) calc(-1 * var(--ak-band-pad-i)) calc(-1 * var(--ak-band-pad-b)) 0; border-radius:0 calc(var(--ak-band-radius) - 1px) calc(var(--ak-band-radius) - 1px) 0; box-shadow:none; } /* Inherited so the scrim and the photo share the bled corner exactly. */ [data-design-preset="frosted-glass"] .ak-about__media::before{border-radius:inherit;} [data-design-preset="frosted-glass"] .ak-about__media :is(img,video,iframe){ position:absolute;inset:0; width:100%;height:100%;aspect-ratio:auto; object-fit:cover;border-radius:inherit; } } /* ---- FAQ ----------------------------------------------------------------- */ /* Rows are cards. No per-row shadow: eight stacked drop-shadows inside one panel reads as sludge. */ [data-design-preset="frosted-glass"] .ak-faq__list{gap:.7rem;max-width:none;} [data-design-preset="frosted-glass"] .ak-faq details{ background-color:#fff; background-color:var(--ak-card-bg); background-image:var(--ak-card-sheen); border:1px solid var(--ak-card-edge); border-radius:var(--site-radius-md); box-shadow:none; padding:1.05rem 1.25rem; -webkit-backdrop-filter:var(--ak-card-blur);backdrop-filter:var(--ak-card-blur); transition:background-color .3s ease,border-color .3s ease; } [data-design-preset="frosted-glass"] .ak-faq details:hover{background-color:var(--ak-card-hover-bg);} [data-design-preset="frosted-glass"] .ak-faq details[open]{ background-color:var(--ak-card-hover-bg); border-color:rgba(255,255,255,.85); } [data-design-preset="frosted-glass"] .ak-faq summary{font-weight:700;letter-spacing:-.01em;} [data-design-preset="frosted-glass"] .ak-faq summary::after{ display:grid;place-items:center;width:1.65rem;height:1.65rem;font-size:1.1rem; border-radius:50%;background:var(--ak-chip-bg); border:1px solid var(--ak-chip-edge);color:var(--site-primary-strong); } /* ---- Contact: inherits the band ------------------------------------------ */ /* The section's own gradient and the card both go: this preset already paints the ground, and a card on the band is the washed-out block again. What is left is the base hairline between the two halves. Contact and Reviews then read as neighbouring glass panels by construction, not by a special rule. */ [data-design-preset="frosted-glass"] .ak-contact-section{background:transparent;} [data-design-preset="frosted-glass"] .ak-contact{ background:transparent;background-image:none;border:0;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none; } [data-design-preset="frosted-glass"] .ak-contact__intro{ background:transparent;border-right-color:var(--ak-card-edge); } [data-design-preset="frosted-glass"] .ak-contact__detail{ background:var(--ak-chip-bg);border-color:var(--ak-chip-edge); } [data-design-preset="frosted-glass"] .ak-contact__icon{ background:color-mix(in srgb,var(--site-primary) 14%,transparent); border:1px solid var(--ak-chip-edge); color:var(--site-primary-strong); } [data-design-preset="frosted-glass"] .ak-contact__prompt-mark{ background:var(--site-primary);color:var(--site-primary-contrast);box-shadow:none; } [data-design-preset="frosted-glass"] .ak-contact__prompt{border-top-color:var(--ak-card-edge);} [data-design-preset="frosted-glass"] :is(.ak-contact .ak-field input,.ak-contact textarea,.ak-contact .ak-field select){ background:var(--ak-chip-bg);border-color:var(--ak-chip-edge); } /* ---- RichText and FlexSection -------------------------------------------- */ [data-design-preset="frosted-glass"] .ak-richtext{ background:transparent;background-image:none;border:0;padding:0; -webkit-backdrop-filter:none;backdrop-filter:none; } [data-design-preset="frosted-glass"] .ak-flex__card{ background-color:var(--ak-card-bg); background-image:var(--ak-card-sheen); border:1px solid var(--ak-card-edge); border-radius:var(--site-radius-lg); box-shadow:var(--ak-card-shadow); -webkit-backdrop-filter:var(--ak-card-blur);backdrop-filter:var(--ak-card-blur); } /* ---- CTA: the strongest surface on the page ------------------------------ */ /* The base CTA is a brand gradient with white type, so the pane and the ink have to change together -- leaving color:var(--site-primary-contrast) over a pale pane is white on white. That is why every ink rule below is restated rather than only the background being swapped. */ [data-design-preset="frosted-glass"] [data-ak-section-type="CTA"] .ak-section{padding-inline:var(--ak-band-inset);} [data-design-preset="frosted-glass"] .ak-cta{ max-width:var(--ak-band-maxw); border-radius:var(--ak-band-radius); border:1px solid var(--ak-cta-edge); background-color:#fff; background-color:var(--ak-cta-bg); background-image: linear-gradient(150deg,rgba(255,255,255,.50) 0%,rgba(255,255,255,.06) 40%,transparent 70%), radial-gradient(60rem 30rem at 78% -20%,color-mix(in srgb,var(--site-primary) 16%,transparent),transparent 62%); color:var(--site-fg); box-shadow:inset 0 1px 0 0 rgba(255,255,255,.75),0 40px 80px -40px rgba(26,52,92,.50); -webkit-backdrop-filter:var(--ak-cta-blur);backdrop-filter:var(--ak-cta-blur); } [data-design-preset="frosted-glass"] .ak-cta .ak-heading{color:var(--site-heading);} [data-design-preset="frosted-glass"] .ak-cta .ak-lead{color:var(--site-muted);} [data-design-preset="frosted-glass"] .ak-cta__badge{ border-color:var(--ak-chip-edge);background:var(--ak-chip-bg);color:var(--site-fg); } [data-design-preset="frosted-glass"] .ak-cta__assurance-icon{color:var(--site-primary);} [data-design-preset="frosted-glass"] .ak-cta .ak-btn--ghost{ color:var(--site-fg);border-color:var(--ak-chip-edge);background:var(--ak-chip-bg); } [data-design-preset="frosted-glass"] .ak-cta .ak-btn--ghost:hover{ background:var(--ak-card-hover-bg);border-color:var(--site-primary-light); } /* The bloom was tuned for the brand gradient; on glass it is a grey haze. */ [data-design-preset="frosted-glass"] .ak-cta__glow{opacity:.35;} [data-design-preset="frosted-glass"] .ak-cta__assurances{ margin:0;padding:0;border:0;width:auto;display:flex;flex-direction:column; gap:.55rem;align-items:stretch; } [data-design-preset="frosted-glass"] .ak-cta__assurance{ display:flex;align-items:center;gap:.6rem; padding:.6rem .95rem;border-radius:var(--site-radius-full); background:var(--ak-chip-bg); border:1px solid var(--ak-chip-edge); font-size:.86rem;font-weight:600;color:var(--site-fg-soft); } @media (min-width:900px){ /* Two columns only where there is room; below this the pills stay stacked under the copy, which is the readable order on a phone. */ [data-design-preset="frosted-glass"] .ak-cta__inner{ display:grid;grid-template-columns:minmax(0,1.35fr) minmax(15rem,.65fr); gap:clamp(1.5rem,4vw,3rem);align-items:center;text-align:left; } [data-design-preset="frosted-glass"] .ak-cta__assurances{grid-column:2;grid-row:1 / span 5;align-self:center;} [data-design-preset="frosted-glass"] .ak-cta__actions{justify-content:flex-start;} [data-design-preset="frosted-glass"] .ak-cta .ak-lead{margin-left:0;margin-right:0;} [data-design-preset="frosted-glass"] .ak-cta__badge{align-self:flex-start;} } /* ---- Footer: the last glass panel ---------------------------------------- */ /* The footer is now MADE OF the preset instead of merely lining up with it: the same band material, edge, sheen and radius as every other panel on the page. The deep-navy version was connected only by geometry, and it ended the page on the one object that did not belong to the design. THE WHOLE JOB IS THE INK, and it is not optional. The base sheet gives the footer a dark ground for every preset, so it hard-codes #fff headings and --site-on-dark links, tagline, contact rows and legal line. Put a light pane under that and the footer renders white-on-white -- which is precisely what the previous attempt shipped, and why it was reverted with a comment saying the pane must stay dark. It does not have to; the colours below are the work that was missing. Every white the base sets is re-pointed here, and the contact chips and the hairline with them. THIS ALSO CLOSES A LIVE BUG. The base sheet's data-bg rule for the footer is (0,3,0) and beats this one, so ANY footer whose Design > Background was set to surface/muted -- or to a light custom colour -- got a pale ground while keeping the base sheet's white type. The footer went blank. With the ink dark by default that override now produces a readable footer instead of an empty one. */ /* THE FOOTER IS THE ONE DARK PANE. Every other band in this preset is light glass on the sky; the footer closes the page on deep navy instead, which also gives the light bands above it an edge to stop against. The whole block below flips WITH it: the panel used to derive every text colour from --site-fg (the dark ink that reads on white glass), so changing only the background would have left dark type on navy. --ak-footer-ink is the body colour, stated once and referred to by every role that used to mix --site-fg. */ [data-design-preset="frosted-glass"]{ --ak-footer-bg:#1a2b41; --ak-footer-ink:#ffffffcc; } [data-design-preset="frosted-glass"] .ak-footer{ background-color:var(--ak-footer-bg); /* The white sheen is dropped: it was the highlight that made a translucent pane read as glass, and over navy it is just a grey wash. The brand glow stays and is lifted, because on a dark ground it has to carry the warmth the sheen used to. */ background-image: radial-gradient(46rem 26rem at 84% -20%,color-mix(in srgb,var(--site-primary) 26%,transparent),transparent 70%); color:var(--ak-footer-ink); /* FULL-BLEED, SQUARE, FLUSH. Every other band in this preset is a floating pane, and the footer used to be one too — inset 32px a side, 26px radius, with the page ground showing down both edges and around the corners. A footer is the END of the page, not an element on it: floating one leaves a strip of ground below the last thing on the site, which reads as a layout bug rather than as a design. It keeps the pane's surface and glow; only its geometry becomes the page's. */ width:100%; margin:0; border:0; border-top:1px solid var(--ak-band-edge); border-radius:0; box-shadow:none; padding:clamp(2.5rem,5vw,3.75rem) clamp(1.5rem,4vw,3rem) clamp(1.5rem,3vw,2.25rem); } /* Headings and the wordmark sit at FULL white: the body ink is 80% on purpose, and a heading at the same weight as its own paragraph stops being a heading. */ [data-design-preset="frosted-glass"] .ak-footer h3{color:#fff;} [data-design-preset="frosted-glass"] .ak-footer__brand-name{color:#fff;} /* Column titles come off --site-accent with !important, which is an action colour chosen to sit on a DARK footer -- on the glass it can land anywhere from washed out to shouting. The brand's deep tone is the readable relative of the same hue, and it needs !important only to answer the base sheet's. */ /* The brand's DEEP tone was chosen to read on white glass; on navy it goes nearly black, so the column titles wear the brand lifted toward white — the same trick the dark bands elsewhere use to keep a hue legible for any tenant. The !important still only answers the base sheet's own !important. */ [data-design-preset="frosted-glass"] .ak-footer__column-title{ color:color-mix(in srgb,var(--site-primary) 62%,#fff)!important; } [data-design-preset="frosted-glass"] .ak-footer :is(a,.ak-footer__contact-row){ color:var(--ak-footer-ink);opacity:1; } [data-design-preset="frosted-glass"] .ak-footer :is(a:hover,a.ak-footer__contact-row:hover){ color:#fff;opacity:1; } [data-design-preset="frosted-glass"] .ak-footer__tagline{ color:var(--ak-footer-ink);opacity:1; } [data-design-preset="frosted-glass"] .ak-footer__contact :is(a,span){ color:var(--ak-footer-ink);opacity:1; } /* The icon chips were a white wash on white -- the same chip every other control in the preset wears is both visible and consistent. */ [data-design-preset="frosted-glass"] .ak-footer__contact-icon{ background:var(--ak-chip-bg); border:1px solid var(--ak-chip-edge); color:var(--site-primary-strong); } /* Back to a white hairline now that the pane is dark — the dark-ink rule this replaces was invisible on navy. The legal line sits below the body ink. */ [data-design-preset="frosted-glass"] .ak-footer__bottom{ border-top:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.62);opacity:1; } /* ---- No backdrop-filter -------------------------------------------------- */ /* Firefox before 103, older Safari, and anything with the effect disabled. Because the layers are tokens this is now six overrides plus three special cases -- and a section added later needs no edit here at all. The band itself needs nothing: a translucent fill over a gradient renders identically everywhere, which is the whole reason its blur is none. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ [data-design-preset="frosted-glass"]{ --ak-card-bg:#ffffff; --ak-card-hover-bg:#ffffff; --ak-tile-bg:#ffffff; --ak-tile-hover-bg:#ffffff; --ak-chip-bg:color-mix(in srgb,#ffffff 90%,var(--site-primary-soft)); --ak-cta-bg:#ffffff; --ak-nav-bg:#ffffff; --ak-nav-bg-scrolled:#ffffff; --ak-band-bg:rgba(196,209,226,.74); } [data-design-preset="frosted-glass"] .ak-hero--overlay .ak-hero__content{background:rgba(12,22,38,.62);} [data-design-preset="frosted-glass"] .ak-navbar__nav{background:#fff;} /* The only preset with no rule for the bar's call to action, so it fell back to the bare base pill. Filled in the brand, like every other preset. */ [data-design-preset="frosted-glass"] .ak-navbar__cta{ background:var(--site-primary);color:var(--site-primary-contrast); border:1px solid var(--site-primary);border-radius:999px; box-shadow:0 8px 20px -12px rgba(12,22,38,.5); } [data-design-preset="frosted-glass"] .ak-navbar__cta:hover{ background:var(--site-primary-strong);border-color:var(--site-primary-strong); } /* The badge is a LIGHT chip in this preset, so the no-blur fallback is the same chip made opaque -- not the old dark pill, which would now be the only dark object on the tile. */ [data-design-preset="frosted-glass"] .ak-card__badge{ background:color-mix(in srgb,var(--site-accent) 20%,#ffffff); } } /* ---- Modern Utility: compact alpine catalogue direction ----------------- * * This is the final art-direction layer for the preset. It keeps the existing * section markup and data contracts, but composes them like the reference * landing page: a compact framed navbar, a light split hero, a four-item trust * strip, and horizontal product rows. The frame is shared with the navbar at * every large width (including 1440px), so the hero, catalogue and About copy * start on the same vertical guide. */ [data-design-preset="modern-utility"]{ --site-maxw:1280px; --site-page-bg:#fff; --site-section-tint:#f8fafc; --ak-paper:#fff; --ak-tint:#f3f6f8; --ak-ink:#101820; --ak-hairline:#dfe5e9; --ak-nav-h:64px; font-family:var(--site-font-body); color:var(--ak-ink); background:#fff; } [data-design-preset="modern-utility"] .ak-section-wrap, [data-design-preset="modern-utility"] .ak-band--surface, [data-design-preset="modern-utility"] .ak-band--tint{background:#fff;} [data-design-preset="modern-utility"] .ak-section{ padding-block:clamp(2.25rem,4.5vw,4rem); } /* NO font-family HERE — the heading face is the preset's own choice. * * This block used to declare font-family:var(--site-font-body). It is the LAST * modern-utility .ak-heading rule in the sheet — identical specificity to the * one in the warm-paper layer above, and later, and neither sits inside a media * query — so it won unconditionally and beat the base .ak-heading rule's * font-family:var(--site-font-heading). * * The effect was that this preset's declared heading face was dead: the font * catalogue resolves modern-utility to Fraunces, the theme correctly emitted * --site-font-heading:'Fraunces', and every heading still rendered in the body * sans. scripts/check-fonts.cjs reports exactly this. * * Only the font-family line was removed. The weight, tracking, leading and * colour below are this layer's own art direction and are untouched. */ [data-design-preset="modern-utility"] .ak-heading{ font-weight:700; letter-spacing:-.025em; line-height:1.12; color:var(--ak-ink); } [data-design-preset="modern-utility"] .ak-h1{ font-size:clamp(2.25rem,4.3vw,3.6rem); line-height:1.02; letter-spacing:-.04em; max-width:15ch; } [data-design-preset="modern-utility"] .ak-h2{font-size:clamp(1.35rem,2vw,1.85rem);} [data-design-preset="modern-utility"] .ak-lead{ font-size:.9rem; line-height:1.55; color:#52606d; } [data-design-preset="modern-utility"] .ak-eyebrow{ display:inline-flex; padding:.22rem .48rem; margin-bottom:.75rem; border:0; border-radius:3px; background:#e7f1f8; color:#12639a; font-size:.58rem; font-weight:700; letter-spacing:.11em; line-height:1.2; } [data-design-preset="modern-utility"] .ak-eyebrow::before{display:none;} /* Navbar and all desktop sections use the same 1280px content guides. */ [data-design-preset="modern-utility"] .ak-navbar{ height:var(--ak-nav-h); padding-block:0; padding-inline:max(1.25rem,calc((100vw - var(--site-maxw)) / 2)); background:rgba(255,255,255,.96); border-bottom:1px solid #e3e9ed; box-shadow:0 1px 8px rgba(16,24,32,.035); -webkit-backdrop-filter:none; backdrop-filter:none; } [data-design-preset="modern-utility"] .ak-navbar.is-scrolled{ background:#fff; border-bottom-color:#d8e0e5; box-shadow:0 5px 18px rgba(16,24,32,.07); } [data-design-preset="modern-utility"] .ak-navbar__brand{ font-family:var(--site-font-body); font-size:.72rem; font-weight:800; letter-spacing:.04em; color:var(--ak-ink); gap:.45rem; } [data-design-preset="modern-utility"] .ak-navbar__brand img{ width:auto; height:34px; max-width:150px; border-radius:0; object-fit:contain; background:none; } /* 34px tall and capped at 150px wide is right for a compact square mark and far too small for a lockup — at that width a four-to-one image renders the wordmark at about 8px. */ [data-design-preset="modern-utility"] .ak-navbar__brand[data-logo-kind="lockup"] img{ height:clamp(34px,3.6vw,46px); max-width:min(56vw,320px); } [data-design-preset="modern-utility"] .ak-navbar__links{gap:clamp(1.1rem,2vw,1.9rem);} [data-design-preset="modern-utility"] .ak-navbar__links a{ color:#40505c; font-size:.7rem; font-weight:600; padding:.35rem 0; } [data-design-preset="modern-utility"] .ak-navbar__links a::after{height:1px;background:var(--ak-ink);} [data-design-preset="modern-utility"] .ak-navbar__cta, [data-design-preset="modern-utility"] .ak-btn{ border-radius:4px; font-size:.72rem; font-weight:700; letter-spacing:0; padding:.62rem 1rem; box-shadow:none; } [data-design-preset="modern-utility"] .ak-navbar__cta{padding:.48rem .95rem;} [data-design-preset="modern-utility"] :is(.ak-btn--primary,.ak-btn--accent){background:#101820;color:#fff;} [data-design-preset="modern-utility"] .ak-btn--ghost{background:#fff;color:var(--ak-ink);border-color:#cbd5db;} /* Split hero: landscape photo, quiet border and copy on the left. The same rules work for both Hero modes; overlay images are real grid items. */ [data-design-preset="modern-utility"] .ak-hero{ width:100%; padding-block:clamp(2.5rem,5vw,4.25rem); padding-inline:max(1.25rem,calc((100vw - var(--site-maxw)) / 2)); gap:clamp(2rem,4vw,4rem); justify-content:stretch; background:#fff; } [data-design-preset="modern-utility"] .ak-hero:not(.ak-hero--overlay){ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); } [data-design-preset="modern-utility"] .ak-hero__content{max-width:31rem;justify-self:start;} [data-design-preset="modern-utility"] .ak-hero__media, [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) .ak-hero__bg{ width:100%; height:auto; aspect-ratio:16/9; max-width:none; justify-self:stretch; border:1px solid #d5dde2; border-radius:7px; background:#eef3f6; box-shadow:0 5px 16px rgba(16,24,32,.10); } [data-design-preset="modern-utility"] .ak-hero__media img, [data-design-preset="modern-utility"] .ak-hero__media video, [data-design-preset="modern-utility"] .ak-hero__media iframe, [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) .ak-hero__bg{ border-radius:6px; object-fit:cover; } [data-design-preset="modern-utility"] .ak-hero--overlay{ /* This is a framed catalogue hero, not a full-screen image band. Keeping its height content-led lets the trust strip and first product rows appear in the initial desktop view, as in the reference composition. */ min-height:0; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); justify-content:stretch; align-items:center; color:var(--ak-ink); background:#fff; } [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg){ display:grid; padding-block:clamp(2.5rem,5vw,4.25rem); padding-inline:max(1.25rem,calc((100vw - var(--site-maxw)) / 2)); grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); justify-content:stretch; column-gap:clamp(2rem,3.5vw,3.5rem); } [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) .ak-hero__content{ grid-column:1; grid-row:1; max-width:31rem; } [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) .ak-hero__bg:is(img,video){ position:relative; inset:auto; grid-column:2; grid-row:1; display:block; width:100%; height:auto; max-width:none; aspect-ratio:16/9; justify-self:stretch; border:1px solid #d5dde2; border-radius:8px; background:#eef3f6; box-shadow:0 10px 28px rgba(16,24,32,.11); object-position:center; } [data-design-preset="modern-utility"] .ak-hero--overlay::before{background:none;} [data-design-preset="modern-utility"] .ak-hero--overlay :is(.ak-heading,.ak-h1){color:var(--ak-ink);text-shadow:none;} [data-design-preset="modern-utility"] .ak-hero--overlay .ak-lead{color:#52606d;text-shadow:none;} [data-design-preset="modern-utility"] .ak-hero--overlay .ak-eyebrow{background:#e7f1f8;color:#12639a;} /* Trust strip. FlexSection's existing stats block becomes the four compact assurance items shown between the hero and catalogue. */ [data-design-preset="modern-utility"] .ak-flex__stats{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-block:.25rem; padding-block:1rem; border-block:1px solid #e4eaee; } [data-design-preset="modern-utility"] .ak-flex__stat{ position:relative; min-height:2.3rem; padding:.15rem 1rem .15rem 2.15rem; border:0; border-radius:0; background:none; text-align:left; } [data-design-preset="modern-utility"] .ak-flex__stat:not(:last-child){border-right:1px solid #e4eaee;} [data-design-preset="modern-utility"] .ak-flex__stat::before{ content:"✓"; position:absolute; left:.45rem; top:.25rem; display:grid; place-items:center; width:1.2rem; height:1.2rem; border:1px solid #7d909e; border-radius:50%; color:#344b5a; font-size:.68rem; font-weight:800; } [data-design-preset="modern-utility"] .ak-flex__stat b{ font-family:var(--site-font-body); font-size:.72rem; font-weight:700; line-height:1.25; color:var(--ak-ink); } [data-design-preset="modern-utility"] .ak-flex__stat span{ display:block; margin-top:.12rem; font-size:.62rem; line-height:1.25; color:#687985; } /* Product cards become deliberately spacious catalogue rows. The image forms a stable visual column; the text remains easy to scan and the booking action is consistently anchored at the lower-right edge. */ [data-design-preset="modern-utility"] .ak-product-grid__head{ align-items:end; padding-bottom:.55rem; border-bottom:0; } [data-design-preset="modern-utility"] .ak-product-grid__head .ak-h2{margin-bottom:0;} [data-design-preset="modern-utility"] .ak-product-grid__viewall{ padding:0; color:#52606d; font-size:.7rem; font-weight:600; } [data-design-preset="modern-utility"] .ak-product-grid__grid{ display:grid; /* ALWAYS one product per row, at every product count. */ grid-template-columns:1fr; gap:1.1rem; margin-top:1.15rem; } [data-design-preset="modern-utility"] .ak-card{ display:grid; /* A catalogue ROW, so the thumbnail is a thumbnail: wide enough to read the photo, narrow enough that the copy — which is what the reader is scanning — owns the line. */ grid-template-columns:clamp(168px,16vw,212px) minmax(0,1fr); min-height:124px; overflow:hidden; background:#fff; border:1px solid #d9e2e7; border-radius:10px; box-shadow:0 3px 11px rgba(16,24,32,.055); } [data-design-preset="modern-utility"] .ak-card:hover{transform:none;box-shadow:0 10px 24px rgba(16,24,32,.10);border-color:#b8c7cf;} [data-design-preset="modern-utility"] .ak-card__media{height:100%;padding:0;border-radius:0;background:#eef3f6;} /* THE THUMBNAIL MUST NOT SET THE ROW HEIGHT. In a catalogue row the copy decides how tall the row is; the photo crops to whatever that turns out to be. Left in normal flow the image cannot do that: "height:100%" resolves against an auto-sized grid row, so it falls back to the image's own 4:3 intrinsic ratio and the ROW sizes to the PHOTO instead. At a 192px column that is 144px, which is why these cards stood 146px tall however little text they carried. Taking the image out of flow removes its intrinsic contribution entirely, so the row is driven by the body content and the card's min-height, and the photo simply fills the box it is given. The media box is already position:relative with overflow:hidden in the base sheet, and the badge is already absolute inside it, so nothing else has to move. */ [data-design-preset="modern-utility"] .ak-card__media img{ position:absolute; inset:0; width:100%; height:100%; min-height:0; aspect-ratio:auto; object-fit:cover; border-radius:0; } [data-design-preset="modern-utility"] .ak-card__body{ display:grid; grid-template-columns:minmax(0,1fr) auto; /* The action column spans every row so the button can sit at its BOTTOM, level with the price, while the copy stacks in the left column: title, description, facts, price. */ grid-template-areas:"title action" "desc action" "meta action" "footer action"; align-content:center; align-items:center; column-gap:1.25rem; row-gap:.25rem; min-width:0; padding:.95rem 1.15rem; } /* The description is part of this card, so it gets its own line and is held to two of them: a long blurb must not be allowed to set the row height and turn a scannable list back into a stack of paragraphs. */ [data-design-preset="modern-utility"] .ak-card__desc{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; overflow:hidden;margin:.1rem 0 .15rem; } /* KILL THE INHERITED DIVIDER. The warm-paper layer above makes this body a wrapping FLEX row and adds ::after as a full-width 1px flex item — a deliberate rule above the price, done as an item rather than a border so it could not stop halfway beside the button. That layer's layout is gone here (this body is a GRID), but its pseudo-element was never switched off, and an ::after on a grid container is an auto-placed GRID ITEM: it landed in the desc row, drew a stray line across every card, and forced the row open. Cards rendered ~184px tall with an empty band through the middle. */ [data-design-preset="modern-utility"] .ak-card__body::after{content:none;} /* Same story: the flex layout gave the price a .7rem top margin to sit off the rule that no longer exists here. In the grid it is pure dead space. */ [data-design-preset="modern-utility"] .ak-card__price{margin-top:0;} [data-design-preset="modern-utility"] .ak-card__title{grid-area:title;font-family:var(--site-font-body);font-size:.98rem;font-weight:750;line-height:1.25;color:var(--ak-ink);} [data-design-preset="modern-utility"] .ak-card__desc{grid-area:desc;max-width:72ch;font-size:.72rem;line-height:1.45;color:#687985;} [data-design-preset="modern-utility"] .ak-card__metarow, [data-design-preset="modern-utility"] .ak-card__meta{grid-area:meta;font-size:.68rem;line-height:1.3;color:#687985;} [data-design-preset="modern-utility"] .ak-card__metarow span{gap:.28rem;} [data-design-preset="modern-utility"] .ak-card__foot{display:contents;} [data-design-preset="modern-utility"] .ak-card__footer{grid-area:footer;display:flex;align-items:baseline;gap:.35rem;margin:0;padding:0;} [data-design-preset="modern-utility"] .ak-card__price{font-family:var(--site-font-body);font-size:.78rem;font-weight:800;color:var(--ak-ink);} [data-design-preset="modern-utility"] .ak-card__price small{font-size:.64rem;color:#687985;} [data-design-preset="modern-utility"] .ak-card__avail{font-size:.6rem;padding:.2rem .45rem;} /* DESCENDANT, NOT CHILD — and that is the whole rule, not a style preference. The button is a child of .ak-card__foot in the markup; .ak-card__foot is only display:contents. That flattens the BOX tree, so the button becomes a grid item of the body — but a child combinator matches the DOM tree, which is unchanged. ".ak-card__body > .ak-btn" therefore matched nothing: the button never got grid-area:action, auto-placed itself into the first row, and its 33px height plus an inherited 11px top margin inflated the title row to 44px. That was the empty band under every card title. */ [data-design-preset="modern-utility"] .ak-card__body .ak-btn{ grid-area:action; /* BOTTOM of the action column, right edge of the card: the action is the last thing in the row's reading order, so it sits where the eye finishes rather than floating against the title. */ align-self:end;justify-self:end; width:auto;margin:0;padding:.6rem 1.05rem;font-size:.7rem; } /* About, detail, reviews and FAQ share the same restrained white-card language. */ [data-design-preset="modern-utility"] .ak-about{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);} [data-design-preset="modern-utility"] .ak-about__media, [data-design-preset="modern-utility"] .ak-about__media img{border-radius:8px;box-shadow:none;background:#eef3f6;} [data-design-preset="modern-utility"] .ak-about__media img{aspect-ratio:16/10;object-fit:cover;} [data-design-preset="modern-utility"] :is(.ak-quote,.ak-faq details,.ak-booking,.ak-book__dialog,.ak-contact,.ak-flex__card){ background:#fff; border-color:#dce3e8; border-radius:8px; box-shadow:0 1px 3px rgba(16,24,32,.06); } [data-design-preset="modern-utility"] .ak-gallery__item{border-radius:8px;box-shadow:none;} [data-design-preset="modern-utility"] .ak-cta{border-radius:8px;background:#101820;box-shadow:none;} @media (min-width:1440px){ /* Lock the outer guides to the same frame used by the navbar. */ [data-design-preset="modern-utility"] .ak-navbar, [data-design-preset="modern-utility"] .ak-hero, [data-design-preset="modern-utility"] .ak-section > .ak-container{ --site-maxw:1280px; } [data-design-preset="modern-utility"] .ak-hero{padding-block:3.5rem;} } /* Hero media sizing: the large-screen composition is built around a 735 × 300 landscape plate. It is deliberately an explicit frame rather than a ratio derived from the headline column: at 1440px+ that keeps the image calm and leaves the copy its intended reading measure. Below that point the media gives width back first, then stacks before either column becomes cramped. */ @media (min-width:1440px){ [data-design-preset="modern-utility"] :is( .ak-hero:not(.ak-hero--overlay), .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) ){ grid-template-columns:minmax(0,1fr) 735px; column-gap:3rem; } [data-design-preset="modern-utility"] .ak-hero__media, [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) .ak-hero__bg:is(img,video){ width:735px; height:340px; max-width:100%; aspect-ratio:auto; justify-self:end; } } @media (min-width:1024px) and (max-width:1439.98px){ [data-design-preset="modern-utility"] :is( .ak-hero:not(.ak-hero--overlay), .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) ){ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); column-gap:clamp(2rem,3.5vw,2.75rem); } [data-design-preset="modern-utility"] .ak-hero__media, [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) .ak-hero__bg:is(img,video){ width:100%; height:clamp(290px,calc(11.72vw + 170px),320px); max-width:none; aspect-ratio:auto; justify-self:stretch; } } @media (max-width:879px){ [data-design-preset="modern-utility"] .ak-hero, [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg){ display:grid; grid-template-columns:1fr; } [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) .ak-hero__content, [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) .ak-hero__bg{grid-column:1;grid-row:auto;} [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) .ak-hero__bg{position:relative;} [data-design-preset="modern-utility"] .ak-about{grid-template-columns:1fr;} [data-design-preset="modern-utility"] .ak-flex__stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1rem;} [data-design-preset="modern-utility"] .ak-flex__stat:nth-child(2){border-right:0;} } @media (max-width:1023.98px){ [data-design-preset="modern-utility"] :is( .ak-hero:not(.ak-hero--overlay), .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) ){ grid-template-columns:1fr; justify-content:stretch; } [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) .ak-hero__content, [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) .ak-hero__bg:is(img,video){ grid-column:1; grid-row:auto; } [data-design-preset="modern-utility"] .ak-hero__media, [data-design-preset="modern-utility"] .ak-hero--overlay:has(> :is(img,video).ak-hero__bg) .ak-hero__bg:is(img,video){ width:100%; height:auto; max-width:none; aspect-ratio:16/10; justify-self:stretch; } } @media (max-width:767.98px){ [data-design-preset="modern-utility"] .ak-navbar{padding-inline:1rem;} [data-design-preset="modern-utility"] .ak-navbar__nav{background:#fff;border-bottom-color:#dfe5e9;} [data-design-preset="modern-utility"] .ak-card{display:flex;flex-direction:column;} [data-design-preset="modern-utility"] .ak-card__media{height:auto;} /* BACK INTO FLOW. The desktop row takes this image out of flow so the photo cannot set the row height; a stacked card is the opposite case — here the photo IS the block, and an absolutely positioned image inside an auto-height box would collapse it to nothing and show no photo at all. */ [data-design-preset="modern-utility"] .ak-card__media img{ position:static;height:auto;aspect-ratio:16/9;min-height:0; } /* flex-wrap MUST be reset here, and the children's flex basis with it. The warm-paper layer makes this body a WRAPPING ROW and gives every text child flex:0 0 100% so each takes a full line. Turning the direction to column without turning the wrap off reinterprets that 100%: in a column it is 100% of the HEIGHT, so each child demanded a full column and the content wrapped SIDEWAYS out of the card — the title rendered at left:-99px, half of it clipped off the edge. Card copy was unreadable on a phone. */ [data-design-preset="modern-utility"] .ak-card__body{ display:flex;flex-direction:column;flex-wrap:nowrap; align-items:stretch;gap:.35rem;padding:.8rem; } [data-design-preset="modern-utility"] .ak-card__body > *, [data-design-preset="modern-utility"] .ak-card__foot > *{flex:0 0 auto;} [data-design-preset="modern-utility"] .ak-card__footer{display:flex;} /* Same correction as above: the button is not a child of the body. */ [data-design-preset="modern-utility"] .ak-card__body .ak-btn{width:100%;} [data-design-preset="modern-utility"] .ak-flex__stat{padding-left:2rem;} [data-design-preset="modern-utility"] .ak-flex__stat:nth-child(odd){border-right:1px solid #e4eaee;} } /* ======================================================================== */ /* Stats — the figures band */ /* ======================================================================== */ /* Base rules = the classic appearance. Every preset below re-cuts the same three elements (grid, stat, and the b/span inside it) rather than reordering the markup, because the component renders identically under all of them. */ .ak-stats__head{max-width:60ch;} .ak-stats__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--site-space-4);} /* Column count is DECLARED, not auto-fit: three figures must be three columns, never two-plus-one hanging on its own row. Six wraps to two rows of three. */ @media (min-width:768px){ .ak-stats__grid[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr));} .ak-stats__grid[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr));} .ak-stats__grid[data-count="5"]{grid-template-columns:repeat(5,minmax(0,1fr));} .ak-stats__grid[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr));} } .ak-stats__stat{padding:1.1rem 1.2rem;background:var(--site-primary-soft);border-radius:var(--site-radius-md);} .ak-stats__stat b{display:block;font-family:var(--site-font-heading);font-size:clamp(1.55rem,3.2vw,2.2rem); line-height:1;letter-spacing:-.02em;color:var(--site-primary);font-variant-numeric:tabular-nums;} .ak-stats__stat span{display:block;margin-top:.45rem;color:var(--site-muted);font-size:.85rem;line-height:1.4;} /* A figure is a and a , and the band-tone rules at the top of this sheet only reach .ak-heading/p/li/a — so on a dark or brand band both would keep their light-ground colours. These put that right for every preset at once, which is why they live in the base sheet rather than in six blocks. */ .ak-section-wrap[data-bg="dark"] .ak-stats__stat, .ak-section-wrap[data-bg="primary"] .ak-stats__stat{background:color-mix(in srgb,#fff 8%,transparent);} .ak-section-wrap[data-bg="dark"] .ak-stats__stat b, .ak-section-wrap[data-bg="primary"] .ak-stats__stat b{color:var(--site-accent);} .ak-section-wrap[data-bg="dark"] .ak-stats__stat span, .ak-section-wrap[data-bg="primary"] .ak-stats__stat span{color:color-mix(in srgb,var(--site-on-dark) 80%,transparent);} /* -- Expedition: a race board bolted under the hero. ---------------------- Near-black band, brand numbers, nothing boxed: the figures are the only thing on the strip, so a panel around each one would be furniture. It runs edge to edge directly below the hero, which is why the band paints itself rather than inheriting the page ground. */ [data-design-preset="expedition"] [data-ak-section-type="Stats"]{background:var(--ak-band-deep);} [data-design-preset="expedition"] [data-ak-section-type="Stats"] .ak-section{background:transparent;} [data-design-preset="expedition"] .ak-stats{padding-block:clamp(1.9rem,3.4vw,2.6rem);} [data-design-preset="expedition"] .ak-stats__head{margin-bottom:clamp(1rem,2vw,1.5rem);} [data-design-preset="expedition"] .ak-stats__grid{gap:clamp(1.25rem,3vw,2.5rem);} [data-design-preset="expedition"] .ak-stats__stat{ background:transparent;border:0;border-radius:0;padding:0; } [data-design-preset="expedition"] .ak-stats__stat b{ font-weight:600;color:var(--site-primary); font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.01em; } [data-design-preset="expedition"] .ak-stats__stat span{ font-family:var(--site-font-heading);font-weight:500;color:rgba(255,255,255,.62); text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;margin-top:.3rem; } /* -- Clean Conversion: a flat, calm data panel. ---------------------------- */ [data-design-preset="clean-conversion"] .ak-stats__stat{ background:#eef2f7;border:1px solid var(--site-border);border-radius:10px; } [data-design-preset="clean-conversion"] .ak-stats__stat b{font-weight:800;color:var(--site-primary);} [data-design-preset="clean-conversion"] .ak-stats__stat span{font-size:.82rem;} /* -- Editorial Premium: no boxes. A hairline over each figure, and the number set in the serif at a reading weight rather than a shout. ------ */ [data-design-preset="editorial-premium"] .ak-stats__grid{gap:clamp(1.5rem,3vw,2.75rem);} /* ONE dark band with the figures ruled off inside it, rather than four separate dark cards floating on paper: the cards left pale gutters between them, which is precisely the seam this preset is meant not to have. */ [data-design-preset="editorial-premium"] .ak-stats{background:var(--ak-panel);} [data-design-preset="editorial-premium"] .ak-stats__stat{ background:transparent;border-radius:0;border-top:0; padding:.35rem 0 .35rem clamp(1rem,2.4vw,2rem); border-left:1px solid rgba(246,244,239,.16); } /* The first figure has nothing to be ruled off from. */ [data-design-preset="editorial-premium"] .ak-stats__stat:first-child{ border-left:0;padding-left:0; } [data-design-preset="editorial-premium"] .ak-stats__stat b{ font-weight:500;color:var(--ak-brand-lift);letter-spacing:-.015em; } /* The label inherited the section foreground, which is near-black on paper -- invisible now the band is dark. */ [data-design-preset="editorial-premium"] .ak-stats__stat span{ text-transform:uppercase;letter-spacing:.18em;font-size:.68rem; color:rgba(246,244,239,.6); } /* -- Warm Local: the same rounded card the rest of the page is made of. ---- */ [data-design-preset="warm-local"] .ak-stats__stat{ background:#fff;border:1px solid rgba(120,80,40,.14); border-radius:var(--site-radius-xl);padding:1.3rem 1.4rem; } [data-design-preset="warm-local"] .ak-stats__stat b{color:var(--site-primary-strong);} [data-design-preset="warm-local"] .ak-stats__stat span{font-weight:600;} /* -- Modern Utility: a spec row. Hairline gutters instead of panels, and the label set in the mono the preset uses for its other data. ------------- */ [data-design-preset="modern-utility"] .ak-stats__grid{gap:0;} [data-design-preset="modern-utility"] .ak-stats__stat{ background:transparent;border-radius:0;padding:.2rem 1.25rem; border-left:1px solid var(--ak-hairline,#dfe5e9); } [data-design-preset="modern-utility"] .ak-stats__grid .ak-stats__stat:first-child{border-left:0;padding-left:0;} [data-design-preset="modern-utility"] .ak-stats__stat b{ font-weight:400;color:var(--ak-ink,#101820);font-size:clamp(1.6rem,3vw,2.35rem); } [data-design-preset="modern-utility"] .ak-stats__stat span{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase;letter-spacing:.06em;font-size:.7rem; } /* -- Frosted Glass: ONE pane, four figures on it. -------------------------- The figures used to be four glass cards inside a glass band — a card in a card, where the inner edges fought the outer one and the row read as four separate widgets rather than one strip of evidence. The band is the pane; the figures sit directly on it. */ [data-design-preset="frosted-glass"] .ak-stats__stat{ background:transparent;border:0;border-radius:0;padding:0; -webkit-backdrop-filter:none;backdrop-filter:none; } [data-design-preset="frosted-glass"] .ak-stats__stat b{ font-weight:800;letter-spacing:-.03em;color:var(--site-primary-strong); } [data-design-preset="frosted-glass"] .ak-stats__stat span{ text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:600; color:color-mix(in srgb,var(--site-fg) 58%,transparent); } /* EDGE TO EDGE, AND FLUSH UNDER THE HERO. Every other band is an inset pane that floats on the sky with a gap above and below — that is the preset. The figures strip is the exception: it reads as part of the hero rather than as the first panel after it, so it takes the hero's own full-bleed width and sits directly against it with no seam. Consequences, stated because they are deliberate: no side inset means no rounded corners (a 26px radius at the viewport edge looks like a mistake) and no side borders (they would be hairlines pinned to the window edges). The BOTTOM margin stays, so the next real pane still floats away from it. */ [data-design-preset="frosted-glass"] [data-ak-section-type="Stats"]{ width:100%; max-width:none; margin-top:0; margin-inline:0; border-radius:0; border-left-width:0; border-right-width:0; } /* The pane already carries the padding; the inner container must not narrow the row again, or the first figure sits a second gutter in from the edge. */ [data-design-preset="frosted-glass"] .ak-stats .ak-container{ max-width:none;width:100%; } [data-design-preset="frosted-glass"] .ak-stats{padding-block:clamp(1.5rem,2.8vw,2.1rem);} [data-design-preset="frosted-glass"] .ak-stats__grid{gap:clamp(1rem,2.4vw,2rem);} /* ======================================================================== */ /* Frosted Glass — pane MATERIAL */ /* ======================================================================== */ /* One dial, three answers. The preset ships "smoked" (the tokens above); the two below are opt-in through theme.glassMaterial, which the renderer narrows to a known name and stamps as data-glass on . Both are written as TOKEN overrides only. Every pane, card, chip and control in this preset already reads its material from those custom properties, so a material swap needs no per-element rules and cannot miss one — which is exactly what would happen if each variant restated the CSS. */ /* ---- CLEAR: the original white film ------------------------------------ */ /* Bright and airy. Honest about its trade-off: white over the sky composites LIGHTER than the ground, so a pane reads as paper on the gradient rather than as glass. Kept because some brands want the lift, and because it is what every site published before the material existed already looks like. */ [data-design-preset="frosted-glass"][data-glass="clear"], [data-design-preset="frosted-glass"] [data-glass="clear"]{ --ak-band-bg:rgba(255,255,255,.46); --ak-cta-bg:rgba(255,255,255,.72); --ak-cta-edge:rgba(255,255,255,.76); /* The hero card is the one pane that sits over a PHOTOGRAPH, so it cannot be as thin as a band: it has to beat whatever picture the operator uploaded. Hence .82 where the sections take .46. */ --ak-pane-bg:rgba(255,255,255,.82); --ak-pane-edge:rgba(255,255,255,.86); --ak-band-sheen:linear-gradient(168deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.06) 32%,rgba(255,255,255,0) 58%); } /* ---- FROST: soft white panes ------------------------------------------- */ /* The value the CTA already wears — #ffffffb8, white at 72%. Between "clear" (white at 46%, so airy the pane barely registers) and "smoked" (a slate tint that sits under the sky): this one is unmistakably a panel, still white, and still lets the ridges through underneath. */ [data-design-preset="frosted-glass"][data-glass="frost"], [data-design-preset="frosted-glass"] [data-glass="frost"]{ --ak-band-bg:rgba(255,255,255,.72); --ak-band-sheen:linear-gradient(158deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.06) 38%,rgba(255,255,255,0) 68%); --ak-cta-bg:rgba(255,255,255,.88); --ak-cta-edge:rgba(255,255,255,.82); --ak-pane-bg:rgba(255,255,255,.90); --ak-pane-edge:rgba(255,255,255,.88); } /* ---- PANE: the hero card's material, verbatim -------------------------- */ /* Every section takes --ak-pane-bg — the same smoked navy at 34% the hero card is made of — with its edge and its blur, on the preset's normal light sky. WHY THE TYPE STAYS DARK. The hero's card carries white text because a PHOTOGRAPH sits behind it. Over this pale ground the identical value composites to about rgb(154,164,177): white on that measures 2.56:1, which is unreadable, while the preset's own ink measures 6.4:1. So the material is copied exactly and the type is not — the alternative is a pane nobody can read. For the hero's actual look, with light type, the ground has to be dark: that is the "night" material below. */ [data-design-preset="frosted-glass"][data-glass="pane"], [data-design-preset="frosted-glass"] [data-glass="pane"]{ --ak-band-bg:var(--ak-pane-bg); --ak-band-edge:var(--ak-pane-edge); --ak-band-sheen:linear-gradient(158deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,0) 68%); --ak-band-shadow:inset 0 1px 0 0 rgba(255,255,255,.22),0 30px 70px -40px rgba(4,10,22,.7); /* The card's blur as well as its colour — this is the material, and the pane is not the pane without it. It is the ONE dial the sheet warns about (see --ak-band-blur above): a non-none backdrop-filter here makes each section a Backdrop Root, so cards inside it sample THIS panel instead of the real ground, and each section becomes a full-width composited layer and a containing block for positioned descendants. Measured on this material the first effect is ~3 blue levels across a row either way — the ground behind a band is a smooth gradient, so there is almost nothing for the inner blur to lose. That is the trade this material makes deliberately; "smoked" and "clear" keep the band unblurred. */ /* The hero card keeps the smoked navy this material is named after. */ --ak-pane-bg:color-mix(in srgb,#0b1728 34%,transparent); --ak-pane-edge:color-mix(in srgb,#ffffff 26%,transparent); --ak-band-blur:var(--ak-pane-blur); /* The CTA paints from its own token — one step stronger than a band, which is its job — so a material that did not state it left the closing panel white while every section around it changed. */ --ak-cta-bg:color-mix(in srgb,#0b1728 44%,transparent); --ak-cta-edge:var(--ak-pane-edge); /* Cards sitting ON a mid-slate pane have to lift, not tint further. */ --ak-card-bg:rgba(255,255,255,.62); --ak-card-hover-bg:rgba(255,255,255,.76); --ak-card-edge:rgba(255,255,255,.72); } /* ---- NIGHT: dark ground, hero-card panes ------------------------------- */ /* The only material where a section pane looks like the hero's card, because the card is dark for one reason: something dark sits behind it. So the SKY goes dark first and the panes then take the hero's own smoked navy. The type flips with it, and flips through --site-* tokens rather than a list of selectors: headings, body, muted labels and borders are all derived, so one block turns the whole preset over and nothing is left behind on a colour meant for a pale ground. */ [data-design-preset="frosted-glass"][data-glass="night"], [data-design-preset="frosted-glass"] [data-glass="night"]{ /* the ground */ --ak-sky-hi:#16233a; --ak-sky-lo:#080f1c; --ak-fog:#1d2b45; /* Ridges must sit DARKER than the sky here. The light material has them darker than a pale ground, so lifting them for a dark one inverted the silhouette: the mountains glowed instead of receding, and every translucent card above them picked up a bright patch where a peak passed behind it. */ --ak-ridge-near:#0b1322; --ak-ridge-mid:#0f1a2c; --ak-ridge-far:#131f34; --site-page-bg:#0d1626; /* the panes: the hero card's own material */ --ak-band-bg:var(--ak-pane-bg); --ak-band-edge:var(--ak-pane-edge); --ak-band-sheen:linear-gradient(158deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 38%,rgba(255,255,255,0) 68%); --ak-band-shadow:inset 0 1px 0 0 rgba(255,255,255,.14),0 28px 64px -36px rgba(2,8,20,.7); /* cards and chips sit ON the panes, so they lift rather than darken */ --ak-card-bg:rgba(255,255,255,.09); --ak-card-hover-bg:rgba(255,255,255,.15); --ak-card-edge:rgba(255,255,255,.20); --ak-card-sheen:linear-gradient(158deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 36%,rgba(255,255,255,0) 64%); --ak-card-shadow:inset 0 1px 0 0 rgba(255,255,255,.12),0 20px 42px -26px rgba(2,8,20,.6); --ak-chip-bg:rgba(255,255,255,.12); --ak-chip-edge:rgba(255,255,255,.22); --ak-cta-bg:rgba(255,255,255,.10); --ak-cta-edge:rgba(255,255,255,.20); --ak-pane-bg:color-mix(in srgb,#0b1728 34%,transparent); --ak-pane-edge:color-mix(in srgb,#ffffff 26%,transparent); /* the floating navbar pill */ --ak-nav-bg:rgba(16,26,44,.72); --ak-nav-bg-scrolled:rgba(16,26,44,.88); /* TYPE. Derived tokens, so every section follows without its own rule. */ --site-fg:#eaf1fb; --site-fg-soft:rgba(234,241,251,.82); --site-heading:#ffffff; --site-muted:rgba(234,241,251,.62); --site-border:rgba(255,255,255,.18); --site-primary-strong:color-mix(in srgb,var(--site-primary) 58%,#ffffff); } /* ---- NIGHT: the ground itself ------------------------------------------ The light material's ground is not all tokens — its mid stops (#e6edf8, #dde7f4) and its warm sun are literals, so overriding tokens alone left a pale band across the middle of a dark page and a cream glow in the corner. This restates the SAME layer stack with dark values: identical structure, so the ridges, the fog band and the brand glow all still line up. (0,2,1) against the light rule's (0,1,1), so it wins wherever it applies and nowhere else. */ body[data-design-preset="frosted-glass"][data-glass="night"]{ background-color:var(--site-page-bg); background-image: radial-gradient(70rem 46rem at 88% -8%,rgba(148,186,236,.16),transparent 62%), linear-gradient(180deg,transparent 0%,transparent 38%,color-mix(in srgb,var(--ak-fog) 55%,transparent) 52%,color-mix(in srgb,var(--ak-fog) 92%,transparent) 68%,var(--ak-fog) 84%,color-mix(in srgb,var(--ak-fog) 0%,transparent) 100%), conic-gradient(from 152deg at 36% 33%,transparent 0deg,color-mix(in srgb,var(--ak-ridge-near) 42%,transparent) 0deg 56deg,transparent 56deg), conic-gradient(from 158deg at 63% 21%,transparent 0deg,color-mix(in srgb,var(--ak-ridge-mid) 36%,transparent) 0deg 44deg,transparent 44deg), conic-gradient(from 146deg at 11% 40%,transparent 0deg,color-mix(in srgb,var(--ak-ridge-far) 30%,transparent) 0deg 68deg,transparent 68deg), radial-gradient(64rem 40rem at 16% 112%,color-mix(in srgb,var(--site-primary) 30%,transparent),transparent 66%), linear-gradient(180deg,var(--ak-sky-hi) 0%,#101b2e 36%,#0b1424 70%,var(--ak-sky-lo) 100%); } /* The decorative motif is drawn in a light ink for a pale ground. Left alone it became the brightest thing on a dark page — big pale triangles reading through every translucent pane above them. */ [data-design-preset="frosted-glass"][data-glass="night"] .ak-motif{ --ak-motif-color:#9db8dc; --ak-motif-opacity:.05; } /* ---- The hero copy follows its card -------------------------------------- The hero's type is white with a dark shadow, which is correct on a smoked card over a photograph and unreadable the moment the card turns light. The three light materials therefore flip it, and drop the shadow with it: a dark glow under dark text on a pale pane just looks dirty. (0,4,0) against the white rules' (0,3,0), so this wins wherever it applies and the dark materials keep the white type untouched. */ [data-design-preset="frosted-glass"]:is([data-glass="clear"],[data-glass="frost"],[data-glass="smoked"]) .ak-hero--overlay .ak-heading{ color:var(--site-heading);text-shadow:none; } [data-design-preset="frosted-glass"]:is([data-glass="clear"],[data-glass="frost"],[data-glass="smoked"]) .ak-hero--overlay :is(.ak-lead,.ak-hero__content p){ color:var(--site-fg-soft);text-shadow:none; } [data-design-preset="frosted-glass"]:is([data-glass="clear"],[data-glass="frost"],[data-glass="smoked"]) .ak-hero--overlay .ak-eyebrow{ background:var(--ak-chip-bg);border-color:var(--ak-chip-edge);color:var(--site-primary-strong); } [data-design-preset="frosted-glass"]:is([data-glass="clear"],[data-glass="frost"],[data-glass="smoked"]) .ak-hero--overlay .ak-btn--ghost{ color:var(--site-fg);background:var(--ak-chip-bg);border-color:var(--ak-chip-edge); } [data-design-preset="frosted-glass"]:is([data-glass="clear"],[data-glass="frost"],[data-glass="smoked"]) .ak-hero--overlay .ak-btn--ghost:hover{ background:var(--ak-card-hover-bg);border-color:var(--site-primary); } /* ---- Frosted Glass: the hero photo answers the image-scrim setting ------- Every other preset sets its hero copy DIRECTLY on the photograph, so the overlay scrim is legibility and is deliberately exempt from the decorative opt-out — text over a picture needs its backing whatever the setting says. This preset is the exception it was written before: the copy sits on its own pane, which is what makes it readable "without dimming the picture". The brand wash rising from the bottom is therefore pure decoration here, and an operator who switched the brand tint off was still getting it — the photo stayed clear at the top and picked up colour towards the bottom, constantly. With the tint OFF the photograph is now left alone. With it ON the tier rules apply untouched, so turning it back on brings the wash back. */ body[data-design-preset="frosted-glass"][data-image-scrim="off"] .ak-hero--overlay::before{ background:none; } /* THE PANE TAKES OVER THE WORK THE SCRIM WAS DOING. With the scrim gone the photograph reaches the copy pane at full strength, and on the two DARK materials — where the pane is only 34% navy and the type is white — the heading measured 3.9:1 against a bright picture. That is the preset's own strategy applied honestly: the pane is what makes hero copy legible, so when nothing else is dimming the photo the pane thickens instead. The light materials already sit at .82-.90 and need no help. */ body[data-design-preset="frosted-glass"][data-image-scrim="off"]:is([data-glass="pane"],[data-glass="night"]){ --ak-pane-bg:color-mix(in srgb,#0b1728 58%,transparent); } /* ──────────────────────────────────────────────────────────────────────────── BACKGROUND-ART GROUND: INK FOLLOWS THE GROUND, NOT THE COMPONENT. .ak-cta and .ak-footer are SELF-CONTAINED dark surfaces: each paints its own background and sets its copy to --site-primary-contrast / --site-on-dark, independently of the band it sits on. That is correct until a background-art scene repaints the ground underneath it. On the one LIGHT-ground scene the result was white copy on a near-white field — measured contrast 1.03, i.e. invisible, in every preset. The fix is not to reclassify the scene (it really is a pale field with vivid shapes) and not to hide it from generation. It is to make the ink follow the ground: the kit already declares each scene's polarity in ART_GROUND, the sections publish it as data-art-ground, and these rules read it. A future light-ground scene is covered the day it is added, with no new CSS. SPECIFICITY. The per-preset CTA rules above are (0,3,0) — e.g. [data-design-preset="expedition"] .ak-cta :is(.ak-heading,h1,h2,h3){color:#fff} — and several are literal #fff rather than a token, so redefining a custom property cannot reach them. These selectors are therefore (0,4,0) via the preset attribute that always carries, which beats them on specificity alone and does not depend on this block staying last in the file. ──────────────────────────────────────────────────────────────────────────── */ /* The BASE ink for everything inside, so "color:inherit" and "currentColor" resolve correctly too — the footer's sign-up input, its border and its placeholder are all built from currentColor, and per-element overrides can never reach them. The rules below then handle the elements that hard-code a colour instead of inheriting one. */ [data-design-preset] [data-art-ground="light"]{color:var(--site-fg);} /* ONLY copy that sits DIRECTLY on the art. A child that paints its own surface (a quote card, an About stat chip) is its own ground and already has ink that matches it — reaching into one turned the dark quote card's text dark and erased it, which is the exact bug above with the polarity flipped. The exclusion list is every descendant in these four sections that declares a background of its own; keep it in step with those declarations. */ [data-design-preset] [data-art-ground="light"] :is(.ak-heading,h1,h2,h3):not(:is(.ak-quote,.ak-about__stat,.ak-flex__stat) *){color:var(--site-heading);} [data-design-preset] [data-art-ground="light"] :is(.ak-lead,p,li,dd,dt,blockquote):not(:is(.ak-quote,.ak-about__stat,.ak-flex__stat) *){color:var(--site-fg);} [data-design-preset] [data-art-ground="light"] :is(a,.ak-footer__contact-row,.ak-footer__tagline,.ak-footer__bottom):not(:is(.ak-quote,.ak-about__stat,.ak-flex__stat) *){color:var(--site-fg);} [data-design-preset] [data-art-ground="light"] :is(a,.ak-footer__contact-row):not(:is(.ak-quote,.ak-about__stat,.ak-flex__stat) *):hover{color:var(--site-primary);} /* The eyebrow is accent-coloured by design. --site-primary-900 is the darkest step of the tenant's own scale, so it stays recognisably the brand colour and still clears contrast on the pale field. */ [data-design-preset] [data-art-ground="light"] .ak-eyebrow:not(:is(.ak-quote,.ak-about__stat,.ak-flex__stat) *){color:var(--site-primary-900);} /* The CTA's outline button and the footer's rules are drawn in white-alpha, which disappears on a pale ground for the same reason the copy did. */ [data-design-preset] [data-art-ground="light"] .ak-btn--ghost{ color:var(--site-fg);border-color:color-mix(in srgb,var(--site-fg) 38%,transparent); background:color-mix(in srgb,#fff 55%,transparent);} [data-design-preset] [data-art-ground="light"] .ak-btn--ghost:hover{ background:color-mix(in srgb,#fff 78%,transparent);border-color:var(--site-fg);} [data-design-preset] [data-art-ground="light"] :is(.ak-footer__bottom,.ak-cta__assurances){ border-top-color:color-mix(in srgb,var(--site-fg) 18%,transparent);} [data-design-preset] [data-art-ground="light"] .ak-cta__badge{ color:var(--site-fg);border-color:color-mix(in srgb,var(--site-fg) 26%,transparent);} /* HOW VIVID THE PALE SCENE'S SHAPES ARE. "blob" is a pale field with three heavily-blurred brand/accent shapes over it. At full strength those shapes pass behind the copy and pull even correct dark ink down to ~3.2 — readable-ish for a large heading, not for body text. Softening them keeps the scene's character (it is still colour on a pale field, still the light-ground design) while leaving the copy on the field rather than on a shape. Tunable in one place instead of per section. */ .ak-bgart__blobs{opacity:var(--ak-bgart-blob-strength,.34);} /* ═══════════════════════════════════════════════════════════════════════════ BLOG — .ak-blog (listing), .ak-post / .ak-prose (article), .ak-bloghl (teaser) ═══════════════════════════════════════════════════════════════════════════ These are the base (classic) rules. Each preset's scoped rules live in the "blog preset coverage" block further down, together rather than scattered through seven preset sections, because a blog is one design problem and reading the seven answers side by side is how they stay coherent. THE ONE INVARIANT: the reading measure. .ak-prose is 66ch in every layout and every preset. Where the column sits changes; how wide it is does not, because a comfortable line length is a property of reading and not of the design. */ /* ---- Listing head + filter ---------------------------------------------- */ /* The head is eyebrow, title, subtitle — the same three lines every other section opens with. It used to be a two-column flex with an article count opposite the heading; the count is gone, so the row is just the text. */ .ak-blog__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--site-space-5);flex-wrap:wrap;} .ak-blog__headtext{max-width:56ch;} .ak-blog__title{margin:0;} .ak-blog__sub{margin-top:.55rem;max-width:48ch;} .ak-blog__filter{display:flex;gap:var(--site-space-4);flex-wrap:wrap;align-items:center; justify-content:space-between; margin:var(--site-space-4) 0 var(--site-space-5);padding-bottom:var(--site-space-4); border-bottom:1px solid var(--site-border);} .ak-blog__chips{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center;} /* The chips ARE .ak-pill — the booking widget's control, already styled in every preset. The count that used to sit in each one is gone: on a blog with one article per tag it printed a column of 1s and said nothing. */ /* The search box sits at the far end of the rule the chips sit on, so the two filters read as one bar. On a phone it drops under them and takes the full width, because a 12ch input is not a search box. */ .ak-blog__search{position:relative;display:flex;align-items:center; flex:0 1 20rem;min-width:14rem;} .ak-blog__searchicon{position:absolute;left:.7rem;width:1rem;height:1rem; color:var(--site-muted);pointer-events:none;} .ak-blog__searchinput{width:100%;border:1px solid var(--site-border); background:var(--site-surface);color:var(--site-fg); font:inherit;font-size:.86rem;padding:.55rem .8rem .55rem 2.2rem; border-radius:0;transition:border-color .2s ease,box-shadow .2s ease;} .ak-blog__searchinput::placeholder{color:var(--site-muted);} .ak-blog__searchinput:focus-visible{outline:none;border-color:var(--site-primary); box-shadow:var(--site-focus-ring);} /* Safari draws its own clear button, which collides with the icon and the square corners; Escape already clears the field. */ .ak-blog__searchinput::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;} /* ---- Post card ---------------------------------------------------------- */ .ak-blog__list,.ak-blog__rest,.ak-blog__side,.ak-blog__leadmain,.ak-bloghl__list,.ak-hlstack{ list-style:none;margin:0;padding:0;} .ak-blog__list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--site-space-5);} /* SQUARE, on purpose. The card is a photograph with a caption under it, and a rounded frame around a square photograph leaves four pale corners the eye reads as a gap in the grid. The listing is the one place in the kit that overrides the theme's radius; everything else still follows it. */ .ak-postcard{background:var(--site-surface);border:1px solid var(--site-border); border-radius:0;overflow:hidden;display:flex;flex-direction:column; /* Two layers, not one: a hairline shadow that separates the card from the band, and a wide soft one that gives it height. A single flat --site-shadow is what made the listing read as boxes drawn on paper. */ box-shadow:0 1px 2px rgba(16,24,40,.04),0 14px 30px -22px rgba(16,24,40,.3); transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;} /* The whole border takes the brand on hover, not a tint of it: the tint was a two-shade difference from the resting hairline, which on a pale palette is no signal at all. SPECIFICITY: a preset that sets its own resting border-color does so in a rule of EQUAL specificity that sits LATER in this file, so it wins the hover state as well. Every such preset therefore repeats the brand border in its own :hover rule — measured; without it clean-conversion and warm-local kept their hairline on hover. 'preset-section-design.test.ts' holds the line. */ .ak-postcard:hover{transform:translateY(-6px); box-shadow:0 2px 4px rgba(16,24,40,.05),0 26px 52px -28px rgba(16,24,40,.42); border-color:var(--site-primary);} .ak-postcard__link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit;} .ak-postcard__media{position:relative;overflow:hidden;aspect-ratio:16/10; background:color-mix(in srgb,var(--site-primary) 8%,var(--site-surface-muted,var(--site-bg)));} .ak-postcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;} .ak-postcard:hover .ak-postcard__media img{transform:scale(1.055);} /* A whisper of shade at the foot of the photograph, so the badge and the top of the title never sit on a pale patch of sky. Decorative and behind the badge. */ .ak-postcard__media::after{content:"";position:absolute;inset:auto 0 0 0;height:38%; background:linear-gradient(to top,rgba(12,16,22,.22),transparent);pointer-events:none;} /* The badge is the post's FIRST tag. One badge, never a stack: a card carrying three category labels tells a reader nothing about which one matters. */ /* A SOLID brand chip, not a frosted one. The translucent version borrowed the photograph's colour, so the same badge was legible on a dark ridge and gone on a bright sky — and a category label that only sometimes reads is not a label. Brand ink with its own contrast token works on any picture. The pair is deliberate: --site-primary-contrast is computed FOR --site-primary, by measuring both candidates against it. Filling with --site-primary-strong (the 800 shade) and keeping that text colour put the ink chosen for the lighter fill on a darker one — measured 3.3:1 on a green brand, under the 4.5 small text needs. Same token family, same step. */ .ak-postcard__badge{position:absolute;top:.7rem;left:.7rem; background:var(--site-primary);color:var(--site-primary-contrast,#fff); font-family:var(--site-font-heading);font-size:.6rem;font-weight:800; letter-spacing:.12em;text-transform:uppercase;padding:.34rem .6rem; border-radius:0;} .ak-postcard__body{padding:var(--site-space-4);display:flex;flex-direction:column;gap:.55rem;flex:1;} .ak-postcard__title{font-family:var(--site-font-heading);font-size:1.02rem;font-weight:800; line-height:1.32;letter-spacing:.01em;text-transform:uppercase;margin:0; transition:color .24s ease; /* Two lines, like the excerpt: a five-line headline breaks the row's rhythm and is not more informative than its first eight words. */ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* The card is one big link, so the title takes the brand colour on hover — the ordinary signal that this block goes somewhere. */ .ak-postcard:hover .ak-postcard__title{color:var(--site-primary);} .ak-postcard__excerpt{color:var(--site-muted);font-size:.87rem;line-height:1.58;margin:0; /* Two lines, so cards in a row keep the same shape whatever the copy does. */ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* The meta line now OPENS the card — date and length are what a reader sorts articles by, and under the excerpt they were the last thing on it. No rule above it any more: it is a header, not a footer. */ .ak-postcard__meta{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap; font-size:.72rem;color:var(--site-muted);font-variant-numeric:tabular-nums; letter-spacing:.02em;} .ak-postcard__metaitem{display:inline-flex;align-items:center;gap:.35rem;} .ak-postcard__metaicon{width:.85rem;height:.85rem;flex:none;opacity:.75;} .ak-postcard__avatar{width:1.3rem;height:1.3rem;border-radius:var(--site-radius-full);flex:none; background:linear-gradient(140deg,var(--site-primary),var(--site-accent));} /* The read affordance. Not a second link — the anchor wraps the whole card — which is why it is aria-hidden in the markup. */ /* margin-top:auto moved here from the meta row: something has to hold the card's baseline, and it is now the last line rather than the first. */ .ak-postcard__more{margin-top:auto;padding-top:.9rem; display:inline-flex;align-items:center;gap:.5rem; font-family:var(--site-font-heading);font-size:.68rem;font-weight:800; letter-spacing:.14em;text-transform:uppercase;color:var(--site-fg);} .ak-postcard:hover .ak-postcard__more{color:var(--site-primary);} .ak-postcard__arrow{transition:transform .24s ease;} .ak-postcard:hover .ak-postcard__arrow{transform:translateX(4px);} /* ---- Magazine: one lead story, a stack beside it, then a grid ----------- */ .ak-blog--magazine .ak-blog__lead{display:grid;grid-template-columns:1.55fr 1fr; gap:var(--site-space-5);margin-bottom:var(--site-space-5);} .ak-blog--magazine .ak-blog__side{display:flex;flex-direction:column;gap:var(--site-space-3);} .ak-postcard--hero .ak-postcard__media{aspect-ratio:16/9;} .ak-postcard--hero .ak-postcard__title{font-size:1.45rem;line-height:1.15;} .ak-postcard--hero .ak-postcard__excerpt{font-size:.95rem;-webkit-line-clamp:3;} .ak-postcard--mini .ak-postcard__link{flex-direction:row;align-items:stretch;} .ak-postcard--mini .ak-postcard__media{width:6.5rem;aspect-ratio:1/1;flex:none;} .ak-postcard--mini .ak-postcard__body{padding:.7rem .85rem;gap:.3rem;} .ak-postcard--mini .ak-postcard__title{font-size:.86rem;} .ak-postcard--mini .ak-postcard__meta{border-top:0;padding-top:.15rem;} .ak-blog--magazine .ak-blog__rest{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--site-space-5);} /* ---- Index: dated rows. Text first, survives a blog with no photos ------ */ .ak-blog--index .ak-blog__list{display:flex;flex-direction:column;gap:0;} .ak-postrow{display:grid;grid-template-columns:5rem 1fr 9.5rem;gap:var(--site-space-5); padding:var(--site-space-4) 0;border-bottom:1px solid var(--site-border);align-items:start;} .ak-postrow:first-child{border-top:1px solid var(--site-border);} /* The date rail is real information here: a conditions blog is read by recency, which is what earns it the leftmost column. */ .ak-postrow__date{font-size:.72rem;color:var(--site-muted);text-transform:uppercase; letter-spacing:.07em;font-weight:700;padding-top:.2rem;line-height:1.5;} .ak-postrow__title{font-family:var(--site-font-heading);font-size:1.14rem;font-weight:700; line-height:1.26;letter-spacing:-.012em;margin:0 0 .3rem;} .ak-postrow__title a{color:inherit;text-decoration:none;} .ak-postrow__title a:hover{color:var(--site-primary);} .ak-postrow__excerpt{color:var(--site-muted);font-size:.87rem;line-height:1.55;margin:0;max-width:62ch;} .ak-postrow__tags{display:flex;gap:.4rem;margin-top:.55rem;flex-wrap:wrap;align-items:center;} .ak-postrow__byline{font-size:.74rem;color:var(--site-muted);} .ak-postrow__media{display:block;aspect-ratio:3/2;border-radius:var(--site-radius-md);overflow:hidden;} .ak-postrow__media img{width:100%;height:100%;object-fit:cover;display:block;} .ak-postrow__media--empty{background:color-mix(in srgb,var(--site-primary) 7%,var(--site-bg));} .ak-tagchip{font-family:var(--site-font-heading);font-size:.62rem;font-weight:800; letter-spacing:.07em;text-transform:uppercase;padding:.22rem .5rem; border-radius:var(--site-radius-full);background:var(--site-primary-soft,color-mix(in srgb,var(--site-primary) 12%,transparent)); color:var(--site-primary-strong,var(--site-primary));text-decoration:none;} a.ak-tagchip:hover{background:var(--site-primary);color:var(--site-primary-contrast);} /* ---- Mosaic: photography as the argument -------------------------------- */ .ak-blog--mosaic .ak-blog__list{display:grid;grid-template-columns:repeat(4,1fr); grid-auto-rows:8.5rem;gap:var(--site-space-3);} .ak-tile{position:relative;border-radius:var(--site-radius-lg);overflow:hidden;} .ak-tile>a{position:absolute;inset:0;display:flex;align-items:flex-end;text-decoration:none;} .ak-tile--xl{grid-column:span 2;grid-row:span 2;} .ak-tile--wide{grid-column:span 2;} .ak-tile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .5s ease;} .ak-tile:hover .ak-tile__img{transform:scale(1.05);} /* The scrim is FIXED and not tenant-editable. Titles sit on photographs here, and a lightened scrim is how that becomes unreadable on a bright cover. */ .ak-tile__scrim{position:absolute;inset:0; background:linear-gradient(to top,rgba(8,10,14,.86),rgba(8,10,14,.16) 58%,transparent);} .ak-tile__body{position:relative;padding:.9rem 1rem;color:#fff;display:block;} .ak-tile__badge{display:inline-block;font-family:var(--site-font-heading);font-size:.6rem; font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.4rem; background:var(--site-accent);color:var(--site-accent-contrast);padding:.2rem .45rem; border-radius:var(--site-radius-sm);} .ak-tile__title{display:block;font-family:var(--site-font-heading);color:#fff;font-size:.95rem; font-weight:700;line-height:1.24;} .ak-tile--xl .ak-tile__title{font-size:1.3rem;} .ak-tile__meta{display:block;color:rgba(255,255,255,.72);font-size:.72rem;margin-top:.35rem; font-variant-numeric:tabular-nums;} /* ---- Pager + empty state ------------------------------------------------ */ .ak-blog__pager{display:flex;gap:.4rem;justify-content:center;align-items:center; margin-top:var(--site-space-5);} .ak-blog__page{min-width:2rem;height:2rem;display:inline-flex;align-items:center; justify-content:center;border-radius:var(--site-radius-md);border:1px solid var(--site-border); background:var(--site-surface);color:var(--site-fg);font-size:.8rem;font-weight:600; font-family:var(--site-font-body);cursor:pointer;font-variant-numeric:tabular-nums;} .ak-blog__page:hover:not(:disabled){border-color:var(--site-fg);} .ak-blog__page[aria-current="page"]{background:var(--site-fg);border-color:var(--site-fg); color:var(--site-bg);} .ak-blog__page:disabled{opacity:.4;cursor:default;} .ak-blog__page:focus-visible{outline:none;box-shadow:var(--site-focus-ring);} .ak-blog__empty{border:1px dashed var(--site-border);border-radius:var(--site-radius-lg); padding:var(--site-space-6);text-align:center;background:var(--site-surface);} .ak-blog__empty h3{font-family:var(--site-font-heading);font-size:1.15rem;margin:0;} .ak-blog__empty p{color:var(--site-muted);font-size:.88rem;margin:.5rem auto 1rem;max-width:42ch;} /* ---- Article: masthead -------------------------------------------------- */ .ak-post{display:block;} .ak-post__wrap{padding-block:var(--site-space-6);} .ak-post__crumb{font-size:.78rem;color:var(--site-muted);margin:0 0 .8rem;} .ak-post__crumb a{color:var(--site-primary);text-decoration:none;font-weight:600;} .ak-post__title{font-family:var(--site-font-heading);font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.1;letter-spacing:-.025em;font-weight:800;margin:0;} .ak-post__standfirst{font-size:1.05rem;color:var(--site-muted);line-height:1.6; margin:.8rem 0 0;max-width:60ch;} /* The byline row. NO rule above it — the title and standfirst already separate the masthead from the page, and the line split it in two. What the line was doing (marking the end of the headline block) is done instead by the row carrying its own weight: a face, a name stacked over its role, and the two scannable facts as chips. */ .ak-post__byline{display:flex;gap:.8rem 1.15rem;align-items:center;flex-wrap:wrap; margin-top:1.4rem;font-size:.8rem;color:var(--site-muted);} .ak-post__bylineid{display:flex;align-items:center;gap:.65rem;min-width:0;} .ak-post__bylinewho{display:flex;flex-direction:column;gap:.12rem;min-width:0;} .ak-post__byline b{font-family:var(--site-font-heading);color:var(--site-fg);font-weight:700; font-size:.95rem;line-height:1.2;letter-spacing:-.012em;} .ak-post__role{font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em; color:var(--site-primary);} /* The double ring reads as a portrait frame rather than a border, and the inner ring is the page colour so it works on the surface panels too. */ .ak-post__avatar{width:2.5rem;height:2.5rem;border-radius:var(--site-radius-full);flex:none; object-fit:cover;display:block; background:linear-gradient(140deg,var(--site-primary),var(--site-accent)); box-shadow:0 0 0 2px var(--site-bg),0 0 0 3.5px color-mix(in srgb,var(--site-primary) 34%,transparent);} .ak-post__avatar--initial{display:flex;align-items:center;justify-content:center;color:#fff; font-family:var(--site-font-heading);font-weight:800;font-size:1.05rem;line-height:1;} .ak-post__bylinemeta{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;} .ak-post__chip{display:inline-flex;align-items:center;gap:.38rem;white-space:nowrap; padding:.32rem .68rem;border-radius:var(--site-radius-full); border:1px solid var(--site-border); background:color-mix(in srgb,var(--site-fg) 4%,transparent); font-size:.735rem;font-weight:600;color:var(--site-muted);} .ak-post__chipicon{width:.85rem;height:.85rem;flex:none;opacity:.75;} .ak-post__cover{margin:var(--site-space-5) 0;} .ak-post__cover img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block; border-radius:var(--site-radius-lg);} .ak-post__cover figcaption{font-size:.74rem;color:var(--site-muted);margin-top:.5rem;font-style:italic;} /* ---- Article: the prose scale. The kit's only rich-text scope ----------- */ .ak-prose{max-width:66ch;} .ak-prose>*+*{margin-top:1rem;} .ak-prose p{font-size:1rem;line-height:1.72;color:var(--site-fg);margin:0;} .ak-prose p+p{margin-top:21.6px;} .ak-prose :is(h2,h3){font-family:var(--site-font-heading);letter-spacing:-.012em; margin:1.8rem 0 0;font-weight:700;line-height:1.3;color:var(--site-primary);} .ak-prose :is(h2,h3)+:is(p,ul,ol){margin-top:21.6px;} .ak-prose h2{font-size:1.3rem;} .ak-prose h3{font-size:1.16rem;} .ak-prose :is(ul,ol){padding-left:1.2rem;font-size:1rem;line-height:1.7;margin:0;} .ak-prose li+li{margin-top:8px;} .ak-prose li::marker,.ak-prose li>strong:first-child{color:var(--site-primary);} .ak-prose a{color:var(--site-primary);text-underline-offset:.18em;} .ak-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em; background:color-mix(in srgb,var(--site-fg) 7%,transparent);padding:.1em .35em; border-radius:var(--site-radius-sm);} /* The pull-quote: a tinted panel behind the brand rail, not a bare indent. The colour is the PRIMARY, because a quote is the one place running prose speaks in the site's own voice, and the wash is what separates it from the paragraphs above and below at a glance rather than on inspection. */ .ak-prose blockquote{margin:1.6rem 0;padding:1rem 1.2rem 1rem 1.25rem; border-left:4px solid var(--site-primary); background:color-mix(in srgb,var(--site-primary) 7%,transparent); border-radius:0 var(--site-radius-md) var(--site-radius-md) 0; font-family:var(--site-font-heading); font-size:1.12rem;line-height:1.55;font-weight:600;letter-spacing:-.01em;color:var(--site-fg);} /* A pause between passages. Sized off the prose rhythm so it reads as a beat in the article rather than a border someone left behind. */ .ak-prose__rule{border:0;height:1px;margin:2rem 0; background:linear-gradient(90deg,var(--site-border),transparent);} /* An embedded player. The aspect box is what stops the page reflowing when a third-party iframe finishes loading. */ .ak-prose__video{margin:1.6rem 0;} .ak-prose__player{position:relative;aspect-ratio:16/9;overflow:hidden; border-radius:var(--site-radius-md);background:color-mix(in srgb,var(--site-fg) 88%,transparent);} .ak-prose__player :is(iframe,video){position:absolute;inset:0;width:100%;height:100%; border:0;display:block;object-fit:cover;} .ak-prose figure{margin:1.6rem 0;} .ak-prose figure img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block; border-radius:var(--site-radius-md);} .ak-prose figcaption{font-size:.74rem;color:var(--site-muted);margin-top:.5rem;} /* ---- Article: tags, closing CTA, prev/next ------------------------------ */ .ak-post__tags{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center; margin-top:var(--site-space-5);padding-top:var(--site-space-4); border-top:1px solid var(--site-border);} .ak-post__tags>span:first-child{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em; color:var(--site-muted);font-weight:700;} /* Who wrote it, at the end. The masthead byline is metadata on the way in; this is the line that answers "should I trust this?" on the way out. */ .ak-post__author{margin-top:var(--site-space-5); display:flex;gap:var(--site-space-4);align-items:flex-start; border:1px solid var(--site-border);background:var(--site-surface); padding:var(--site-space-4);} .ak-post__authorface{width:3.2rem;height:3.2rem;flex:none; border-radius:var(--site-radius-full);object-fit:cover; background:var(--site-surface-muted,var(--site-bg));} /* No photograph: the initial on the brand, not a grey disc that reads as an image still loading. */ .ak-post__authorface--initial{display:flex;align-items:center;justify-content:center; background:var(--site-primary);color:var(--site-primary-contrast,#fff); font-family:var(--site-font-heading);font-size:1.3rem;font-weight:800;} .ak-post__authortext{min-width:0;} .ak-post__authorlabel{margin:0;font-size:.64rem;font-weight:800;letter-spacing:.14em; text-transform:uppercase;color:var(--site-primary);} .ak-post__authorname{margin:.25rem 0 0;font-family:var(--site-font-heading); font-size:1.02rem;font-weight:700;line-height:1.3;} .ak-post__authorrole{margin:.1rem 0 0;font-size:.78rem;color:var(--site-muted);} .ak-post__authorbio{margin:.45rem 0 0;font-size:.87rem;line-height:1.6; color:var(--site-muted);max-width:56ch;} /* A tour operator's article ends in a booking — that is what the blog is for. */ .ak-post__cta{margin-top:var(--site-space-5); background:var(--site-primary-soft,color-mix(in srgb,var(--site-primary) 10%,transparent)); border-radius:var(--site-radius-lg);padding:var(--site-space-5);display:flex;gap:var(--site-space-4); align-items:center;justify-content:space-between;flex-wrap:wrap;} .ak-post__ctatitle{font-family:var(--site-font-heading);font-size:1.1rem;letter-spacing:-.01em;margin:0;} .ak-post__cta p{font-size:.87rem;color:var(--site-muted);margin:.4rem 0 0;max-width:48ch;} .ak-post__ctabtns{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;} .ak-post__next{display:grid;grid-template-columns:1fr 1fr;gap:var(--site-space-3); margin-top:var(--site-space-5);} .ak-post__nextcard{border:1px solid var(--site-border);border-radius:var(--site-radius-md); padding:.85rem 1rem;background:var(--site-surface);text-decoration:none;color:inherit;display:block;} .ak-post__nextcard:hover{border-color:var(--site-primary);} .ak-post__nextcard--next{text-align:right;} .ak-post__nextcard span{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em; color:var(--site-muted);font-weight:700;} .ak-post__nextcard b{display:block;font-family:var(--site-font-heading);font-size:.9rem; margin-top:.3rem;line-height:1.35;} /* ---- Article layout: centered (the default and the fallback) ------------ */ .ak-post--centered :is(.ak-post__head,.ak-prose,.ak-post__tags,.ak-post__author,.ak-post__cta,.ak-post__next,.ak-post__cover){ margin-left:auto;margin-right:auto;max-width:68ch;} .ak-post--centered .ak-prose{max-width:66ch;} /* The cover is the one element allowed out of the reading column: a photograph read at text width looks like an inline figure rather than the article's opening image. It stays inside the container, so it never goes edge-to-edge. */ .ak-post--centered .ak-post__cover{max-width:min(100%,58rem);} /* ---- Article layout: cover first ---------------------------------------- */ .ak-post--cover .ak-post__hero{position:relative;display:flex;align-items:flex-end; min-height:min(62vh,26rem);} .ak-post__heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .ak-post__heroscrim{position:absolute;inset:0; background:linear-gradient(to top,rgba(8,10,14,.9),rgba(8,10,14,.3) 62%,rgba(8,10,14,.05));} .ak-post--cover .ak-post__herobody{position:relative;padding-block:var(--site-space-6);} .ak-post--cover .ak-post__title{color:#fff;} .ak-post--cover .ak-post__standfirst{color:rgba(255,255,255,.84);} .ak-post--cover .ak-post__crumb{color:rgba(255,255,255,.72);} .ak-post--cover .ak-post__crumb a{color:#fff;} .ak-post--cover .ak-post__byline{color:rgba(255,255,255,.78);} .ak-post--cover .ak-post__byline b{color:#fff;} .ak-post--cover .ak-post__role{color:#fff;opacity:.8;} .ak-post--cover .ak-post__chip{border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.13);color:#fff;} .ak-post--cover .ak-post__avatar{box-shadow:0 0 0 2px rgba(255,255,255,.34);} .ak-post--cover :is(.ak-prose,.ak-post__tags,.ak-post__author,.ak-post__cta,.ak-post__next){ margin-left:auto;margin-right:auto;max-width:68ch;} .ak-post--cover .ak-prose{max-width:66ch;} /* ---- Article layout: sticky rail ---------------------------------------- */ .ak-post--rail .ak-post__wrap{display:grid;grid-template-columns:13rem minmax(0,1fr); gap:var(--site-space-6);align-items:start;} .ak-post__aside{position:sticky;top:calc(var(--ak-nav-h,72px) + 1rem);display:flex; flex-direction:column;gap:var(--site-space-4);} .ak-post__toc{border-left:2px solid var(--site-border);padding-left:.9rem;display:flex; flex-direction:column;gap:.5rem;} .ak-post__toc b{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--site-muted);} .ak-post__toc a{font-size:.8rem;color:var(--site-muted);text-decoration:none;} .ak-post__toc a:hover{color:var(--site-fg);} .ak-post__meta-stack{display:flex;flex-direction:column;gap:.6rem;font-size:.76rem;color:var(--site-muted);} .ak-post__meta-stack div b{display:block;color:var(--site-fg);font-size:.8rem; font-family:var(--site-font-heading);} /* ---- Article layout: split masthead ------------------------------------- */ .ak-post--split .ak-post__splitmast{display:grid;grid-template-columns:1fr 1fr; min-height:min(52vh,20rem);} .ak-post--split .ak-post__splitmedia{position:relative;} .ak-post--split .ak-post__splitmedia img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;} .ak-post__floatmeta{position:absolute;bottom:0;left:0;right:0;margin:0;padding:1.1rem 1.3rem; background:linear-gradient(to top,rgba(8,10,14,.8),transparent);color:#fff;font-size:.74rem;} .ak-post--split .ak-post__splitcopy{padding:var(--site-space-6) var(--site-space-5); display:flex;flex-direction:column;justify-content:center;background:var(--site-surface);} .ak-post--split :is(.ak-prose,.ak-post__tags,.ak-post__author,.ak-post__cta,.ak-post__next){ margin-left:auto;margin-right:auto;max-width:68ch;} .ak-post--split .ak-prose{max-width:66ch;} /* ---- Home teaser -------------------------------------------------------- */ .ak-bloghl__head{display:flex;justify-content:space-between;align-items:flex-end; gap:var(--site-space-4);flex-wrap:wrap;} .ak-bloghl__title{margin:0;} .ak-bloghl--trio .ak-bloghl__list{display:grid;grid-template-columns:repeat(3,1fr); gap:var(--site-space-5);} .ak-bloghl--list .ak-bloghl__list{display:flex;flex-direction:column;gap:0;} .ak-hlrow{display:grid;grid-template-columns:1.6rem 1fr auto;gap:var(--site-space-4); padding:.8rem 0;border-bottom:1px solid var(--site-border);align-items:center;} .ak-hlrow:first-child{border-top:1px solid var(--site-border);} .ak-hlrow__idx{font-family:var(--site-font-heading);font-size:.74rem;font-weight:800; color:var(--site-muted);font-variant-numeric:tabular-nums;} .ak-hlrow__title{font-family:var(--site-font-heading);font-size:.95rem;font-weight:600; line-height:1.35;color:inherit;text-decoration:none;} .ak-hlrow__title:hover{color:var(--site-primary);} .ak-hlrow__meta{font-size:.74rem;color:var(--site-muted);white-space:nowrap;} .ak-bloghl--strip .ak-bloghl__list{display:grid;grid-template-columns:1.4fr 1fr; gap:var(--site-space-4);align-items:stretch;} .ak-hlfeature{position:relative;border-radius:var(--site-radius-lg);overflow:hidden; display:flex;align-items:flex-end;min-height:13rem;text-decoration:none;} .ak-hlfeature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .ak-hlstack{display:flex;flex-direction:column;gap:.6rem;} .ak-hlmini{flex:1;background:var(--site-surface);border:1px solid var(--site-border); border-radius:var(--site-radius-md);} .ak-hlmini>a{display:flex;gap:.75rem;align-items:center;padding:.6rem .7rem;height:100%; text-decoration:none;color:inherit;} .ak-hlmini :is(img,.ak-hlmini__ph){width:3.2rem;height:3.2rem;flex:none;object-fit:cover; border-radius:var(--site-radius-sm); background:color-mix(in srgb,var(--site-primary) 8%,var(--site-bg));} .ak-hlmini b{display:block;font-family:var(--site-font-heading);font-size:.85rem;line-height:1.32;} .ak-hlmini .ak-hlrow__meta{white-space:normal;} /* ---- Listing filter chips: legible on the LISTING's own band ------------ */ /* The chips ARE .ak-pill, the booking widget's control — reusing it is what gives them every preset's shape for free, and it is why there is no chip component. The cost showed up on the blog: a preset whose booking panel sits on a DARK band paints .ak-pill white-on-transparent (expedition: rgba(255,255,255,.06) with #fff text), and the listing's band is paper. The tag chips rendered white on white — present, clickable, invisible. So the listing restates the surface for ITS chips only. Booking pills, which are the ones that actually sit on the dark panel, are untouched. PLACED HERE ON PURPOSE: after the per-preset .ak-pill rules and before the per-preset blog rules. Specificity is equal (one attribute + one class either way), so source order is the entire mechanism — move this block above the preset pill rules and the chips disappear again. */ .ak-blog__filter .ak-pill{ background:var(--site-surface);border-color:var(--site-border);color:var(--site-fg); padding:.45rem .85rem;font-size:.7rem;font-weight:700; letter-spacing:.09em;text-transform:uppercase;border-radius:0; } .ak-blog__filter .ak-pill:hover{border-color:var(--site-primary);color:var(--site-primary);} /* The chosen tag takes the brand, not the neutral ink: it is the one control on the page that says which slice of the blog you are looking at. */ .ak-blog__filter .ak-pill[aria-pressed="true"]{ background:var(--site-primary);border-color:var(--site-primary); color:var(--site-primary-contrast,#fff); } /* ---- Blog: narrow screens ---------------------------------------------- */ @media (max-width:960px){ .ak-blog__list,.ak-blog--magazine .ak-blog__rest,.ak-bloghl--trio .ak-bloghl__list{ grid-template-columns:repeat(2,1fr);} .ak-blog--magazine .ak-blog__lead{grid-template-columns:1fr;} .ak-blog--mosaic .ak-blog__list{grid-template-columns:repeat(2,1fr);} .ak-tile--xl{grid-column:span 2;grid-row:span 1;} .ak-postrow{grid-template-columns:1fr;gap:.5rem;} .ak-postrow__media{display:none;} /* The rail moves ABOVE the article rather than disappearing: the contents list is the reason someone opened a long how-to. */ .ak-post--rail .ak-post__wrap{grid-template-columns:1fr;} .ak-post__aside{position:static;} .ak-post--split .ak-post__splitmast{grid-template-columns:1fr;} .ak-post--split .ak-post__splitmedia{min-height:14rem;} .ak-bloghl--strip .ak-bloghl__list{grid-template-columns:1fr;} .ak-post__next{grid-template-columns:1fr;} .ak-post__nextcard--next{text-align:left;} } @media (max-width:620px){ .ak-blog__list,.ak-blog--magazine .ak-blog__rest,.ak-bloghl--trio .ak-bloghl__list, .ak-blog--mosaic .ak-blog__list{grid-template-columns:1fr;} /* The box takes the width the chips leave: a search field squeezed beside a wrapped chip row is too narrow to read what you typed into it. */ .ak-blog__search{flex:1 1 100%;} .ak-tile--xl,.ak-tile--wide{grid-column:span 1;} .ak-postcard--mini .ak-postcard__media{width:5rem;} } /* ═══════════════════════════════════════════════════════════════════════════ BLOG PRESET COVERAGE ═══════════════════════════════════════════════════════════════════════════ Seven answers to the same design problem, kept together so they can be read side by side. 'preset-coverage.test.ts' requires every registered section to have real scoped rules in every preset — token inheritance is not coverage, because tokens change the palette and the radii but cannot give a section the composition and surface treatment the preset promises. 'classic' is the un-scoped block above, by definition. */ /* ---- Expedition: photo-led, condensed, energetic ------------------------ */ /* Uppercase heads, squared badges, borderless cards floating on a deep shadow. The accent is remapped to the operator's own primary at the preset root, so nothing here names a colour the tenant did not choose. */ [data-design-preset="expedition"] :is(.ak-blog__title,.ak-bloghl__title,.ak-post__title){ text-transform:uppercase;letter-spacing:.005em;font-weight:700;} [data-design-preset="expedition"] .ak-postcard{border-width:0; box-shadow:0 22px 46px -26px color-mix(in srgb,var(--site-fg) 55%,transparent);} /* This preset drops the resting border; the hover one has to put it back or there is nothing for the brand colour to land on. */ [data-design-preset="expedition"] .ak-postcard:hover{border-width:1px; border-color:var(--site-primary);} [data-design-preset="expedition"] .ak-postcard__badge{background:var(--site-accent); color:var(--site-accent-contrast);-webkit-backdrop-filter:none;backdrop-filter:none;} [data-design-preset="expedition"] .ak-postcard__title{font-size:1.08rem;letter-spacing:0;} [data-design-preset="expedition"] .ak-tagchip{border-radius:3px;} [data-design-preset="expedition"] .ak-postrow__title{text-transform:none;} [data-design-preset="expedition"] .ak-postrow{border-bottom-width:2px;} [data-design-preset="expedition"] .ak-tile{border-radius:var(--site-radius-md);} [data-design-preset="expedition"] .ak-tile__badge{border-radius:2px;} [data-design-preset="expedition"] .ak-blog__page{border-radius:4px;} /* The article's own furniture: a race-number rule under the standfirst and a heavier quote, matching how this preset treats every other lead paragraph. */ [data-design-preset="expedition"] .ak-post__standfirst{font-weight:500;} [data-design-preset="expedition"] .ak-prose blockquote{border-left-width:5px; text-transform:none;font-weight:700;} [data-design-preset="expedition"] .ak-prose :is(h2,h3){text-transform:uppercase; letter-spacing:.01em;} [data-design-preset="expedition"] .ak-bloghl .ak-hlfeature{border-radius:var(--site-radius-md);} [data-design-preset="expedition"] .ak-hlrow__idx{color:var(--site-accent);} [data-design-preset="expedition"] .ak-hlmini{border-width:0; box-shadow:0 14px 30px -22px color-mix(in srgb,var(--site-fg) 50%,transparent);} /* ---- Clean Conversion: everything on white, one tint, soft geometry ----- */ /* This preset's premise is a single bright sheet. Cards therefore lose their shadow entirely and are held by a hairline instead — a stack of shadowed cards on white reads as clutter here, where it reads as depth elsewhere. */ [data-design-preset="clean-conversion"] .ak-postcard{box-shadow:none; border-color:color-mix(in srgb,var(--site-primary) 14%,var(--ak-white,#fff));} [data-design-preset="clean-conversion"] .ak-postcard:hover{transform:translateY(-2px); box-shadow:0 16px 34px -26px color-mix(in srgb,var(--site-primary) 60%,transparent); border-color:var(--site-primary);} [data-design-preset="clean-conversion"] .ak-postcard:hover .ak-postcard__media img{transform:scale(1.02);} [data-design-preset="clean-conversion"] .ak-postcard__badge{background:var(--ak-navy,#0e2033); color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;} [data-design-preset="clean-conversion"] :is(.ak-blog__page,.ak-postrow__media,.ak-tile){ border-radius:8px;} [data-design-preset="clean-conversion"] .ak-tagchip{border-radius:6px;} [data-design-preset="clean-conversion"] .ak-blog__filter{border-bottom-color:var(--ak-tint,#e9f0fb);} /* The article's closing CTA is the whole point of this preset, so it gets the tint the rest of the page is denied. */ [data-design-preset="clean-conversion"] .ak-post__cta{background:var(--ak-tint,#e9f0fb);} [data-design-preset="clean-conversion"] .ak-post__nextcard{box-shadow:none;} [data-design-preset="clean-conversion"] .ak-prose blockquote{border-left-color:var(--site-primary);} [data-design-preset="clean-conversion"] .ak-bloghl__list .ak-postcard{box-shadow:none;} [data-design-preset="clean-conversion"] .ak-hlmini{box-shadow:none;border-radius:8px;} [data-design-preset="clean-conversion"] .ak-hlrow{border-bottom-color:var(--ak-tint,#e9f0fb);} /* ---- Editorial Premium: printed page. No chrome, hairlines, zero radius -- */ /* Cards stop being cards: the ground is one sheet of paper, so a post is an image with type under it, separated by rules rather than by borders. This is the preset where the Index layout is strongest, and the rules below are what make that true. */ [data-design-preset="editorial-premium"] .ak-postcard{background:transparent;border:0; box-shadow:none;border-radius:0;} [data-design-preset="editorial-premium"] .ak-postcard:hover{transform:none;box-shadow:none;} [data-design-preset="editorial-premium"] .ak-postcard:hover .ak-postcard__media img{transform:none;} [data-design-preset="editorial-premium"] .ak-postcard__body{padding:.85rem 0 0;} [data-design-preset="editorial-premium"] .ak-postcard__title{font-weight:500;letter-spacing:-.015em;} [data-design-preset="editorial-premium"] .ak-postcard__media{border-radius:0;} [data-design-preset="editorial-premium"] .ak-postcard__badge{border-radius:0; background:var(--site-fg);color:var(--site-page-bg);-webkit-backdrop-filter:none;backdrop-filter:none;} [data-design-preset="editorial-premium"] :is(.ak-tagchip,.ak-blog__page,.ak-tile,.ak-postrow__media){ border-radius:0;} [data-design-preset="editorial-premium"] .ak-tagchip{background:transparent; border:1px solid var(--site-border);color:var(--site-fg);} [data-design-preset="editorial-premium"] .ak-postrow{border-bottom-width:1px;} [data-design-preset="editorial-premium"] .ak-postrow__title{font-weight:500;font-size:1.24rem;} [data-design-preset="editorial-premium"] .ak-blog__empty{border-style:solid;border-radius:0;} /* The pull-quote is the masthead face — the one place this preset lets its serif into running text. */ [data-design-preset="editorial-premium"] .ak-prose blockquote{border-left-width:1px; font-family:var(--site-font-brand,var(--site-font-heading));font-weight:400;font-size:1.35rem; border-left-color:var(--site-border); /* This preset's quote is a hairline and white space. The tinted panel the base rule now paints is the opposite gesture, so it is removed here. */ background:none;border-radius:0;padding-left:1.25rem;} [data-design-preset="editorial-premium"] .ak-prose :is(h2,h3){font-weight:500;} [data-design-preset="editorial-premium"] .ak-post__title{font-weight:500;letter-spacing:-.022em;} [data-design-preset="editorial-premium"] .ak-post__cover img{border-radius:0;} [data-design-preset="editorial-premium"] .ak-post__cta{border-radius:0;background:transparent; border-top:1px solid var(--site-fg);border-bottom:1px solid var(--site-fg);} [data-design-preset="editorial-premium"] .ak-post__nextcard{border-radius:0;background:transparent;} /* THE TITLE NEVER SITS ON A PHOTOGRAPH in this preset — cover-first resolves to a plain masthead with the picture underneath, which is how a printed feature opens. */ [data-design-preset="editorial-premium"] .ak-post--cover .ak-post__hero{min-height:0; display:block;} [data-design-preset="editorial-premium"] .ak-post--cover .ak-post__heroimg{position:static; height:auto;aspect-ratio:21/9;} [data-design-preset="editorial-premium"] .ak-post--cover .ak-post__heroscrim{display:none;} [data-design-preset="editorial-premium"] .ak-post--cover .ak-post__herobody{padding-block:var(--site-space-5);} [data-design-preset="editorial-premium"] .ak-post--cover :is(.ak-post__title,.ak-post__standfirst,.ak-post__crumb,.ak-post__byline){ color:var(--site-fg);} [data-design-preset="editorial-premium"] .ak-post--cover .ak-post__standfirst{color:var(--site-muted);} [data-design-preset="editorial-premium"] .ak-post--cover .ak-post__role{color:var(--site-primary);opacity:1;} [data-design-preset="editorial-premium"] .ak-post--cover .ak-post__chip{ border-color:var(--site-border);background:color-mix(in srgb,var(--site-fg) 4%,transparent); color:var(--site-muted);} [data-design-preset="editorial-premium"] .ak-post--cover .ak-post__avatar{ box-shadow:0 0 0 2px var(--site-bg),0 0 0 3.5px color-mix(in srgb,var(--site-primary) 34%,transparent);} [data-design-preset="editorial-premium"] .ak-bloghl__list .ak-postcard__body{padding:.85rem 0 0;} [data-design-preset="editorial-premium"] .ak-hlrow{border-bottom-width:1px;} [data-design-preset="editorial-premium"] .ak-hlmini{border-radius:0;background:transparent; border-left:0;border-right:0;border-top:0;} [data-design-preset="editorial-premium"] .ak-hlfeature{border-radius:0;} /* ---- Warm Local: cream paper, generous rounding, soft shadow ------------ */ [data-design-preset="warm-local"] .ak-postcard{ box-shadow:0 16px 32px -24px color-mix(in srgb,var(--ak-brown,#2a1b0f) 55%,transparent); border-color:color-mix(in srgb,var(--ak-brown,#2a1b0f) 12%,transparent);} [data-design-preset="warm-local"] .ak-postcard:hover{transform:translateY(-4px); border-color:var(--site-primary);} [data-design-preset="warm-local"] .ak-postcard__title{font-weight:600;letter-spacing:-.005em;} /* The pale chips these three presets used to carry are gone: a near-white badge over a photograph reads on a dark ridge and disappears on a bright sky. They keep their own ink instead — solid, with its own contrast token. */ [data-design-preset="warm-local"] .ak-postcard__badge{ background:var(--ak-brown,#2a1b0f);color:var(--ak-cream,#fdf8f1);} [data-design-preset="warm-local"] .ak-tagchip{ background:color-mix(in srgb,var(--site-accent) 14%,var(--ak-cream,#fdf8f1)); color:color-mix(in srgb,var(--ak-brown,#2a1b0f) 82%,var(--site-accent));} [data-design-preset="warm-local"] :is(.ak-postrow__media,.ak-tile,.ak-blog__page){ border-radius:var(--site-radius-md);} [data-design-preset="warm-local"] .ak-postrow{ border-bottom-color:color-mix(in srgb,var(--ak-brown,#2a1b0f) 12%,transparent);} [data-design-preset="warm-local"] .ak-prose blockquote{border-left-width:0; padding:1rem 1.2rem;border-radius:var(--site-radius-lg); background:color-mix(in srgb,var(--site-accent) 10%,transparent);font-weight:600;} [data-design-preset="warm-local"] .ak-post__cover img{border-radius:var(--site-radius-lg);} [data-design-preset="warm-local"] .ak-post__cta{ background:color-mix(in srgb,var(--site-accent) 12%,var(--ak-cream,#fdf8f1));} [data-design-preset="warm-local"] .ak-hlmini{ box-shadow:0 12px 26px -22px color-mix(in srgb,var(--ak-brown,#2a1b0f) 50%,transparent);} [data-design-preset="warm-local"] .ak-hlfeature{border-radius:var(--site-radius-xl,32px);} [data-design-preset="warm-local"] .ak-bloghl .ak-hlrow__idx{ color:color-mix(in srgb,var(--ak-brown,#2a1b0f) 60%,transparent);} /* ---- Modern: warm paper, calm, no shadows ------------------------------- */ /* Cards are a shade DEEPER than the page rather than lifted off it — this preset builds depth with tone, not with shadow, which is why every card shadow here is removed rather than softened. */ [data-design-preset="modern-utility"] .ak-postcard{box-shadow:none; background:var(--ak-tint,var(--site-surface));border-color:var(--ak-hairline,var(--site-border));} [data-design-preset="modern-utility"] .ak-postcard:hover{transform:translateY(-2px); box-shadow:none;border-color:var(--site-primary);} [data-design-preset="modern-utility"] .ak-postcard__title{font-weight:600;} [data-design-preset="modern-utility"] :is(.ak-postrow,.ak-blog__filter){ border-bottom-color:var(--ak-hairline,var(--site-border));} [data-design-preset="modern-utility"] .ak-postrow:first-child{ border-top-color:var(--ak-hairline,var(--site-border));} [data-design-preset="modern-utility"] .ak-tagchip{ background:color-mix(in srgb,var(--site-primary) 9%,transparent);} [data-design-preset="modern-utility"] .ak-tile{border-radius:var(--site-radius-md);} [data-design-preset="modern-utility"] .ak-blog__page{background:var(--ak-tint,var(--site-surface)); border-color:var(--ak-hairline,var(--site-border));} /* The serif headline is this preset's voice, so the prose headings carry it at a reading weight rather than a display one. */ [data-design-preset="modern-utility"] .ak-prose :is(h2,h3){font-weight:600;letter-spacing:-.008em;} [data-design-preset="modern-utility"] .ak-prose blockquote{border-left-color:var(--site-primary); font-weight:600;} [data-design-preset="modern-utility"] .ak-post__cta{border-radius:var(--site-radius-md); background:var(--ak-tint,var(--site-surface));} [data-design-preset="modern-utility"] .ak-post__nextcard{background:var(--ak-tint,var(--site-surface)); border-color:var(--ak-hairline,var(--site-border));} [data-design-preset="modern-utility"] .ak-hlmini{box-shadow:none; background:var(--ak-tint,var(--site-surface));border-color:var(--ak-hairline,var(--site-border));} [data-design-preset="modern-utility"] .ak-hlrow{border-bottom-color:var(--ak-hairline,var(--site-border));} [data-design-preset="modern-utility"] .ak-hlrow:first-child{border-top-color:var(--ak-hairline,var(--site-border));} [data-design-preset="modern-utility"] .ak-bloghl__title{letter-spacing:-.015em;} /* ---- Frosted Glass: translucent panes over the alpine ground ------------ */ /* Cards become panes: the ground shows through, borders go transparent, and the blur is what separates the card from the photograph behind it. */ [data-design-preset="frosted-glass"] .ak-postcard{ background:var(--ak-card-bg,rgba(255,255,255,.55)); -webkit-backdrop-filter:var(--ak-card-blur,blur(10px));backdrop-filter:var(--ak-card-blur,blur(10px)); border-color:transparent; box-shadow:0 22px 48px -30px rgba(20,36,58,.6);} [data-design-preset="frosted-glass"] .ak-postcard:hover{ background:var(--ak-card-hover-bg,rgba(255,255,255,.72)); border-color:var(--site-primary);} [data-design-preset="frosted-glass"] .ak-tagchip{background:var(--ak-chip-bg,rgba(255,255,255,.6)); color:var(--site-primary-strong,var(--site-primary));} [data-design-preset="frosted-glass"] .ak-blog__filter{border-bottom-color:rgba(255,255,255,.5);} [data-design-preset="frosted-glass"] .ak-postrow{border-bottom-color:rgba(255,255,255,.5);} [data-design-preset="frosted-glass"] .ak-postrow:first-child{border-top-color:rgba(255,255,255,.5);} [data-design-preset="frosted-glass"] .ak-blog__page{ background:var(--ak-card-bg,rgba(255,255,255,.55));border-color:transparent; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);} [data-design-preset="frosted-glass"] .ak-blog__empty{ background:var(--ak-card-bg,rgba(255,255,255,.55));border-style:solid;border-color:transparent; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);} [data-design-preset="frosted-glass"] .ak-prose blockquote{border-left-width:0; padding:1rem 1.2rem;border-radius:var(--site-radius-md); background:var(--ak-card-bg,rgba(255,255,255,.55)); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);} [data-design-preset="frosted-glass"] .ak-post__cta{ background:var(--ak-card-bg,rgba(255,255,255,.55)); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);} [data-design-preset="frosted-glass"] .ak-post__nextcard{ background:var(--ak-card-bg,rgba(255,255,255,.55));border-color:transparent; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);} [data-design-preset="frosted-glass"] .ak-hlmini{ background:var(--ak-card-bg,rgba(255,255,255,.55));border-color:transparent; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);} [data-design-preset="frosted-glass"] .ak-hlrow{border-bottom-color:rgba(255,255,255,.5);} [data-design-preset="frosted-glass"] .ak-hlrow:first-child{border-top-color:rgba(255,255,255,.5);} [data-design-preset="frosted-glass"] .ak-bloghl__title{letter-spacing:-.012em;} /* ---- No backdrop-filter: the panes become solid, never invisible -------- */ @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ [data-design-preset="frosted-glass"] :is(.ak-postcard,.ak-hlmini,.ak-post__cta,.ak-post__nextcard,.ak-blog__empty){ background:rgba(255,255,255,.9);} } /* ---- Testimonials: the review-card composition -------------------------- */ /* ──────────────────────────────────────────────────────────────────────────── SPECIFICITY, FIRST — it is the reason every selector here says '.ak-testimonials .ak-quote' rather than just '.ak-quote'. Both presets already restyle the card higher up the file through a grouped rule: '[data-design-preset="…"] :is(.ak-booking,.ak-quote,.ak-faq details)'. ':is()' takes the specificity of its MOST specific argument, and that list contains '.ak-faq details' — a class AND a type — so the whole thing scores (0,2,1). A plain '[preset] .ak-quote' is (0,2,0) and LOSES to it no matter how far down the file it sits. That is not a hypothetical: the first cut of this block set a radius, a white ground and a layered shadow on the card and none of the three ever applied. Nothing failed, the section simply kept the old flat panel. Adding the section as an ancestor takes it to (0,3,0), which wins — and '.ak-quote' only ever renders inside '.ak-testimonials', so it narrows nothing. ──────────────────────────────────────────────────────────────────────────── */ /* ──────────────────────────────────────────────────────────────────────────── Shared by editorial-premium and modern-utility, and DELIBERATELY THE LAST BLOCK IN THIS STYLESHEET. Both presets already style '.ak-quote' in their own sections above, and these selectors have the SAME specificity (one attribute + one class). Source order is therefore the only thing that decides the winner. Move this block up and the earlier surface rules quietly take over again — which is exactly the bug it would look like. THE COMPOSITION, and why it is this shape: • the card OPENS on a quote glyph in a soft brand chip, so a wall of reviews reads as quotations at a glance rather than as paragraphs; • the ATTRIBUTION CLOSES it, under a hairline, pinned to the bottom with 'margin-top:auto' — so every author line in a row sits on one baseline however uneven the quotes are. The markup puts the author FIRST; flex 'order' re-sequences it without touching the component, which keeps the DOM order (name before quote) that a screen reader wants anyway; • with EXACTLY THREE reviews the middle card lifts and grows a shade, the way a testimonial carousel frames its active slide. Four or more and the grid stays even. ':nth-child(2):nth-last-child(2)' is what expresses "exactly three" in CSS — no count attribute, no JS, no markup change. Each preset keeps its own VOICE inside that composition: editorial-premium stays paper — near-square corners, hairline border, serif italic quote — while modern-utility is the soft white utility card. Same bones, two accents. ──────────────────────────────────────────────────────────────────────────── */ [data-design-preset="editorial-premium"] .ak-testimonials .ak-section__head, [data-design-preset="modern-utility"] .ak-testimonials .ak-section__head{ text-align:center;margin-inline:auto;max-width:46rem; } [data-design-preset="editorial-premium"] .ak-testimonials__summary{ justify-content:center;border-top:0;padding-top:0; } [data-design-preset="editorial-premium"] .ak-testimonials__grid, [data-design-preset="modern-utility"] .ak-testimonials__grid{ gap:clamp(1.1rem,2.4vw,1.75rem); align-items:stretch; /* Room for the lifted middle card. Without it the lift is clipped by the section's own padding at narrow desktop widths. */ padding-block:clamp(.5rem,1.4vw,1.25rem); } /* Three across from LAPTOP width, not 1440 like the base grid. This is load-bearing for the composition below, not a taste change: the lead card is "the middle of three", and at two columns there is no middle — the lift then lands on whichever card happens to be on the right, which reads as a rendering fault. Three-up also gives six reviews the even 3x2 wall the design is drawn around. */ @media (min-width:1024px){ [data-design-preset="editorial-premium"] .ak-testimonials__grid, [data-design-preset="modern-utility"] .ak-testimonials__grid{ grid-template-columns:repeat(3,1fr); } } [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote, [data-design-preset="modern-utility"] .ak-testimonials .ak-quote{ position:relative; display:flex;flex-direction:column;gap:.9rem; padding:clamp(1.5rem,2.8vw,2rem); background:var(--site-surface); transition:transform .3s ease,box-shadow .3s ease; } [data-design-preset="modern-utility"] .ak-testimonials .ak-quote{ border:0;border-radius:14px; box-shadow:0 1px 2px rgba(16,24,40,.05),0 18px 38px -26px rgba(16,24,40,.38); } [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote{ border:1px solid var(--site-border);border-radius:3px; box-shadow:0 14px 32px -28px rgba(28,24,20,.5); } /* The opening glyph. A pseudo-element because it is punctuation, not content: the quote is already a
    with its text inside, and a real character in the markup would be read out before every review. */ [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote::before, [data-design-preset="modern-utility"] .ak-testimonials .ak-quote::before{ content:"\201C"; order:-1;flex:none; display:grid;place-items:center; width:2.9rem;height:2.9rem; font-family:var(--site-font-wordmark,var(--site-font-heading)); font-size:3.1rem;font-weight:500; /* A left double quote hangs in the TOP HALF of its em box, so centring the box leaves the mark high and light. line-height under 1 pulls the glyph's own mass to the middle of the chip; the padding trims what that overshoots. Tuned against DM Serif Display and Inter — the two faces the presets actually resolve to. */ line-height:.55;padding-top:.34em; color:var(--site-primary); background:color-mix(in srgb,var(--site-primary) 11%,transparent); border-radius:999px; } [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote::before{ border-radius:2px;font-style:italic; background:color-mix(in srgb,var(--site-primary) 9%,transparent); color:var(--site-primary); } [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote__rating, [data-design-preset="modern-utility"] .ak-testimonials .ak-quote__rating{order:1;} [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote__text, [data-design-preset="modern-utility"] .ak-testimonials .ak-quote__text{order:2;} [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote__posted, [data-design-preset="modern-utility"] .ak-testimonials .ak-quote__posted{order:3;} [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote__head, [data-design-preset="modern-utility"] .ak-testimonials .ak-quote__head{ order:4;margin-top:auto;padding-top:1.05rem; border-top:1px solid var(--site-border); } [data-design-preset="modern-utility"] .ak-testimonials .ak-quote__text{ font-size:1rem;line-height:1.7;color:var(--site-fg-soft); } /* Editorial keeps its pull-quote voice — the serif italic is the preset, and losing it here would make the band read as another site's section. */ [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote__text{ font-family:var(--site-font-heading);font-style:italic; font-size:1.14rem;line-height:1.6;color:var(--site-fg); } [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote__avatar, [data-design-preset="modern-utility"] .ak-testimonials .ak-quote__avatar{width:40px;height:40px;} [data-design-preset="modern-utility"] .ak-testimonials .ak-quote__avatar{border-radius:999px;} [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote__avatar{border-radius:2px;} [data-design-preset="modern-utility"] .ak-testimonials .ak-quote__name{font-weight:600;font-size:.95rem;} [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote__name{ font-family:var(--site-font-heading);font-weight:500;font-size:1rem; } [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote__date, [data-design-preset="modern-utility"] .ak-testimonials .ak-quote__date{font-size:.78rem;color:var(--site-muted);} [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote:hover, [data-design-preset="modern-utility"] .ak-testimonials .ak-quote:hover{transform:translateY(-6px);} [data-design-preset="modern-utility"] .ak-testimonials .ak-quote:hover{ box-shadow:0 2px 4px rgba(16,24,40,.06),0 26px 52px -28px rgba(16,24,40,.45); } [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote:hover{ border-color:var(--site-fg);box-shadow:0 18px 40px -30px rgba(28,24,20,.55); } /* Exactly three reviews: the middle one leads. Only from 1024px up, because below that the grid is one or two columns and "the middle of the row" is not a thing that exists. */ @media (min-width:1024px){ [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote:nth-child(2):nth-last-child(2), [data-design-preset="modern-utility"] .ak-testimonials .ak-quote:nth-child(2):nth-last-child(2){ transform:translateY(-14px) scale(1.035);z-index:1; } [data-design-preset="modern-utility"] .ak-testimonials .ak-quote:nth-child(2):nth-last-child(2){ box-shadow:0 2px 4px rgba(16,24,40,.07),0 32px 64px -30px rgba(16,24,40,.5); } [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote:nth-child(2):nth-last-child(2){ box-shadow:0 24px 52px -32px rgba(28,24,20,.6); } [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote:nth-child(2):nth-last-child(2) .ak-quote__text, [data-design-preset="modern-utility"] .ak-testimonials .ak-quote:nth-child(2):nth-last-child(2) .ak-quote__text{ font-size:1.08rem; } [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote:nth-child(2):nth-last-child(2):hover, [data-design-preset="modern-utility"] .ak-testimonials .ak-quote:nth-child(2):nth-last-child(2):hover{ transform:translateY(-19px) scale(1.035); } } /* Reduced motion drops the hover TRAVEL. The lead card's lift is a resting state, not an animation, so it is restated here rather than lost. */ @media (prefers-reduced-motion:reduce){ [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote, [data-design-preset="modern-utility"] .ak-testimonials .ak-quote{transition:box-shadow .3s ease,border-color .3s ease;} [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote:hover, [data-design-preset="modern-utility"] .ak-testimonials .ak-quote:hover{transform:none;} } @media (prefers-reduced-motion:reduce) and (min-width:1024px){ [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote:nth-child(2):nth-last-child(2), [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote:nth-child(2):nth-last-child(2):hover, [data-design-preset="modern-utility"] .ak-testimonials .ak-quote:nth-child(2):nth-last-child(2), [data-design-preset="modern-utility"] .ak-testimonials .ak-quote:nth-child(2):nth-last-child(2):hover{ transform:translateY(-14px) scale(1.035); } } /* ---- Editorial premium: the reviews as a printed plate ------------------ */ /* ──────────────────────────────────────────────────────────────────────────── Built on the shared review-card composition above (glyph, stars, quote, hairline, attribution) and dressed as paper: contour lines under everything, a centred masthead with a signature beside it, a faint landscape watermark on each card, a summit ornament closing the band, and pale forest silhouettes in the bottom corners. All of the drawing is CSS. Nothing here adds markup, so no other preset pays for it and the section's schema stays the same three fields it gained: a subtitle, a signature line and a closing line — copy the tenant writes. ONE NOTE ON THE SIGNATURE: the reference sets it in handwriting. The kit loads exactly three faces per site (heading / body / brand) and none of them is a script, so this is the brand serif in italic with a drawn underline rather than a fourth webfont on every page. ──────────────────────────────────────────────────────────────────────────── */ [data-design-preset="editorial-premium"] .ak-testimonials{ --ak-rev-ink:#1d4d33; --ak-rev-paper:#f7f8f4; position:relative;overflow:hidden; background:var(--ak-rev-paper); padding-block:clamp(3rem,6vw,5rem); } [data-design-preset="editorial-premium"] .ak-testimonials > .ak-container{ position:relative;z-index:1; } /* The contour lines are the section's own 'pattern' (default: topo) — this only tunes them for a paper ground. */ [data-design-preset="editorial-premium"] .ak-testimonials .ak-motif{ --ak-motif-color:var(--ak-rev-ink);--ak-motif-opacity:.07; } /* Forest and ridge silhouettes in the corners. Decorative, behind everything, and they leave the middle of the band alone so nothing sits on type. */ [data-design-preset="editorial-premium"] .ak-testimonials::before, [data-design-preset="editorial-premium"] .ak-testimonials::after{ content:"";position:absolute;bottom:0;z-index:0;pointer-events:none; height:clamp(6rem,14vw,11rem);width:clamp(12rem,30vw,26rem); background-repeat:no-repeat;background-position:left bottom;background-size:contain; /* Faint enough to be paper texture. Louder than this and the corners start competing with the reviews, which are the point of the band. */ opacity:.34; } [data-design-preset="editorial-premium"] .ak-testimonials::before{ left:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 120' fill='%23a8bfae'%3E%3Cpath d='M0 120h320v-6H0z' opacity='.5'/%3E%3Cpath d='M18 114 32 74l14 40zM44 114 62 62l18 52zM74 114 88 78l14 36zM100 114l22-64 22 64zM138 114l16-44 16 44zM162 114l20-58 20 58zM196 114l14-40 14 40zM222 114l18-52 18 52zM252 114l14-38 14 38zM276 114l16-46 16 46z'/%3E%3C/svg%3E"); } [data-design-preset="editorial-premium"] .ak-testimonials::after{ right:0;background-position:right bottom; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 120' fill='%23a8bfae'%3E%3Cpath d='M0 120h320v-6H0z' opacity='.5'/%3E%3Cpath d='M0 114 74 34l40 44 26-26 62 62z' opacity='.55'/%3E%3Cpath d='M150 114 214 42l32 34 22-20 52 58z' opacity='.75'/%3E%3Cpath d='M236 114 268 78l18 20 12-11 26 27z' fill='%23ffffff' opacity='.55'/%3E%3C/svg%3E"); } /* ---- Masthead ---- */ [data-design-preset="editorial-premium"] .ak-testimonials .ak-section__head{ text-align:center;margin-inline:auto;max-width:46rem;position:relative; } [data-design-preset="editorial-premium"] .ak-testimonials .ak-eyebrow{ display:inline-flex;align-items:center;gap:.9rem; color:var(--ak-rev-ink);font-size:.66rem;letter-spacing:.28em;font-weight:600; } /* A rule either side of the eyebrow, both drawn here — the element has no dot of its own in this section, unlike How it works. */ [data-design-preset="editorial-premium"] .ak-testimonials .ak-eyebrow::before, [data-design-preset="editorial-premium"] .ak-testimonials .ak-eyebrow::after{ content:"";display:inline-block;width:2.25rem;height:1px; background:currentColor;opacity:.5; } [data-design-preset="editorial-premium"] .ak-testimonials .ak-h2{ font-family:var(--site-font-wordmark,var(--site-font-heading)); font-weight:400;letter-spacing:-.015em;line-height:1.02; font-size:clamp(2.2rem,5.2vw,4rem);color:var(--ak-rev-ink); } [data-design-preset="editorial-premium"] .ak-testimonials__sub{ margin-inline:auto;max-width:44ch; font-family:var(--site-font-wordmark,var(--site-font-heading)); font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.6; color:color-mix(in srgb,var(--ak-rev-ink) 72%,transparent); } /* The signature, lifted out of flow beside the masthead. */ [data-design-preset="editorial-premium"] .ak-testimonials__flourish{ position:absolute;top:clamp(.5rem,2vw,1.75rem);right:0;z-index:2; margin:0;max-width:8.5rem;text-align:left; font-family:var(--site-font-wordmark,var(--site-font-heading)); font-style:italic;font-weight:400;line-height:1.15; font-size:clamp(1.1rem,2vw,1.6rem); color:color-mix(in srgb,var(--ak-rev-ink) 62%,transparent); transform:rotate(-4deg); } /* The drawn underline that sells the aside as a hand-written one. */ [data-design-preset="editorial-premium"] .ak-testimonials__flourish::after{ content:"";display:block;height:.6rem;margin-top:.15rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12' preserveAspectRatio='none' fill='none' stroke='%231d4d33' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M4 8 C40 2 96 2 156 6' opacity='.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-size:100% 100%; } @media (max-width:1023px){ /* No margin to hang it in — back into flow, above the head. */ [data-design-preset="editorial-premium"] .ak-testimonials__flourish{ position:static;transform:none;max-width:none;text-align:center; margin:0 auto .75rem; } [data-design-preset="editorial-premium"] .ak-testimonials__flourish::after{ margin-inline:auto;width:9rem; } } /* ---- The cards ---- */ [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote{ background:#fff;border-color:color-mix(in srgb,var(--ak-rev-ink) 12%,transparent); border-radius:14px; box-shadow:0 1px 2px rgba(29,77,51,.05),0 22px 44px -30px rgba(29,77,51,.35); overflow:hidden; } [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote:hover{ border-color:color-mix(in srgb,var(--ak-rev-ink) 30%,transparent); box-shadow:0 2px 4px rgba(29,77,51,.06),0 30px 56px -32px rgba(29,77,51,.42); } /* The glyph chip goes green-on-pale-green here. */ [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote::before{ border-radius:999px; background:color-mix(in srgb,var(--ak-rev-ink) 13%,transparent); color:var(--ak-rev-ink); } /* A landscape watermark in the card's top corner. Alternating so a row of three is not three copies of one drawing: ridges, then trees, then ridges. */ [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote::after{ content:"";position:absolute;top:.9rem;right:.9rem;z-index:0; width:clamp(4.5rem,9vw,6.5rem);height:3.25rem;pointer-events:none; background-repeat:no-repeat;background-position:right top;background-size:contain; opacity:.42; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90' fill='none' stroke='%23a8bfae' stroke-width='1.6'%3E%3Cpath d='M8 82 76 16l30 34 20-20 58 52' stroke-linejoin='round'/%3E%3Cpath d='M56 40 76 16l20 24' stroke='%23dfe7e0'/%3E%3Cpath d='M112 44 126 30l14 14' stroke='%23dfe7e0'/%3E%3C/svg%3E"); } [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote:nth-child(even)::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90' fill='none' stroke='%23a8bfae' stroke-width='1.6'%3E%3Cpath d='M100 10 128 48h-18l22 30H74l22-30H78z' stroke-linejoin='round'/%3E%3Cpath d='M100 78v8M56 34 76 62h-13l16 22H36l16-22H40z' stroke-linejoin='round'/%3E%3Cpath d='M148 40 166 66h-12l14 20h-38l14-20h-11z' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Everything the card says stays above the watermark. */ [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote > *{position:relative;z-index:1;} [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote__text{ color:color-mix(in srgb,var(--ak-rev-ink) 88%,transparent); } [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote__head{ border-top-color:color-mix(in srgb,var(--ak-rev-ink) 12%,transparent); } /* The attribution disc: the initial on brand ink, set in the display serif. */ [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote__avatar{ width:2.6rem;height:2.6rem;border-radius:999px; } [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote__avatar--initials{ background:var(--ak-rev-ink);color:#fff; font-family:var(--site-font-wordmark,var(--site-font-heading)); font-weight:400;font-size:1.15rem; } [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote__name{ font-family:var(--site-font-wordmark,var(--site-font-heading)); font-weight:400;font-size:1.05rem;color:var(--ak-rev-ink); } [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote__date{ color:color-mix(in srgb,var(--ak-rev-ink) 55%,transparent); } /* The lead card takes a brand hairline as well as the lift. */ @media (min-width:1024px){ [data-design-preset="editorial-premium"] .ak-testimonials .ak-quote:nth-child(2):nth-last-child(2){ border-color:color-mix(in srgb,var(--ak-rev-ink) 40%,transparent); } } /* ---- The summit ornament closing the band ---- */ [data-design-preset="editorial-premium"] .ak-testimonials__footnote{ color:var(--ak-rev-ink);letter-spacing:.22em;font-size:.62rem; margin-top:clamp(2.25rem,5vw,3.5rem); } [data-design-preset="editorial-premium"] .ak-testimonials__footnote::before{ content:"";display:block;width:clamp(9rem,22vw,13rem);height:1.5rem; margin:0 auto .9rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 26' fill='none' stroke='%231d4d33' stroke-width='1.4'%3E%3Cpath d='M4 18h86M170 18h86' opacity='.45' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M104 18 122 4l14 11 8-6 12 9' stroke-linejoin='round' opacity='.8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center;background-size:contain; }