/* Aksons Umhlanga · "The floor, catalogued" A live lot book: gallery-white paper and lot-book black, nothing else; the cars' paint carries the colour. Gloock (the logo's heavy Didone) for lot titles and numbers, Schibsted Grotesk for text and figures. The logo's full stop is the mark (lot markers, the cursor, the Up close dot); the stencil cut in its letters is the transition (images open through a vertical slit). engine.css (forms, dialogs, filters, Ask) loads first; this file wins. */ :root { --ak-paper: #f6f6f4; --ak-sheet: #ffffff; --ak-well: #ececE9; --ak-ink: #0b0b0b; --ak-ink-2: #34342f; --ak-ink-3: #62625c; --ak-ink-4: #9a9a93; --ak-rule: rgba(11, 11, 11, .14); --ak-rule-2: rgba(11, 11, 11, .28); --ak-rule-solid: #d9d9d4; --ak-black: #0b0b0b; --ak-on-black: #f6f6f4; --ak-on-black-2: #b9b9b2; --ak-edge: rgba(246, 246, 244, .16); /* engine.css names */ --ak-plate: #0b0b0b; --ak-plate-2: #1a1a18; --ak-on-plate-2: #b9b9b2; --ak-silver-2: #b9b9b2; --ak-display: 'Gloock', 'Times New Roman', serif; --ak-text: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --ak-ease: cubic-bezier(.16, 1, .3, 1); --ak-ease-io: cubic-bezier(.76, 0, .24, 1); --ak-gut: clamp(18px, 4vw, 56px); --ak-col-gap: clamp(16px, 2vw, 28px); --ak-sec: clamp(88px, 11vw, 168px); --ak-head: 68px; --ak-max: 1520px; color-scheme: light; } /* ---------- base ---------- */ :where(.ak-site) :where(*, *::before, *::after) { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ak-head) + 16px); } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body.ak-site { margin: 0; background: var(--ak-paper); color: var(--ak-ink); font-family: var(--ak-text); font-size: 17px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ak-page { overflow-x: clip; min-height: 100svh; } :where(.ak-site) :where(img, svg, video) { max-width: 100%; height: auto; } :where(.ak-site) :where(a) { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; } :where(.ak-site) :where(input, select, textarea, button) { font: inherit; color: inherit; } .ak-site ::selection { background: var(--ak-ink); color: var(--ak-paper); } .ak-site :focus-visible { outline: 2px solid var(--ak-ink); outline-offset: 3px; } .ak-ink :focus-visible, .ak-foot :focus-visible { outline-color: var(--ak-paper); } .ak-site [hidden] { display: none !important; } .ak-site .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } :where(.ak-site) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; } :where(.ak-site) :where(ul, ol) { padding: 0; list-style: none; } :where(.ak-site) :where(img, video) { display: block; } .ak-site .ic { width: 1.15em; height: 1.15em; flex: none; } .ak-site input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; display: none; } .ak-site .crumbs a { display: inline-block; padding-block: 8px; } .ak-site .crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: 13px; color: var(--ak-ink-3); } html { scrollbar-color: var(--ak-ink) var(--ak-paper); scrollbar-width: thin; } .skip { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--ak-ink); color: var(--ak-paper); text-decoration: none; } .skip:focus { top: 12px; } .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ak-wrap, .ak-site .wrap { width: min(var(--ak-max), 100% - 2 * var(--ak-gut)); margin-inline: auto; } .ak-sec { position: relative; padding-block: var(--ak-sec); } .ak-ink { background: var(--ak-black); color: var(--ak-on-black); } /* ---------- type ---------- */ .ak-display, .ak-h2, .ak-foot__t, .ak-cover__t, .ak-statement__t { font-family: var(--ak-display); font-weight: 400; letter-spacing: -.02em; line-height: 1.02; text-wrap: balance; } .ak-display { font-size: clamp(2.8rem, 1.6rem + 4.6vw, 6rem); } .ak-h2 { font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4.6rem); } .ak-h3 { font-family: var(--ak-text); font-weight: 600; font-size: clamp(1.15rem, 1rem + .4vw, 1.4rem); letter-spacing: -.012em; line-height: 1.2; } .ak-lede { font-size: clamp(1.05rem, .98rem + .3vw, 1.25rem); line-height: 1.5; color: var(--ak-ink-2); max-width: 46ch; text-wrap: pretty; } .ak-ink .ak-lede { color: var(--ak-on-black-2); } .ak-label { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ak-ink-3); } .ak-ink .ak-label { color: var(--ak-on-black-2); } .ak-fig { display: inline-flex; align-items: baseline; gap: .18em; font-family: var(--ak-display); font-variant-numeric: lining-nums; line-height: 1; } .ak-fig small { font-family: var(--ak-text); font-size: .34em; font-weight: 500; letter-spacing: 0; color: var(--ak-ink-3); } .prose { max-width: 68ch; } .prose > * + * { margin-top: 1em; } .prose h2, .prose h3 { font-family: var(--ak-display); font-weight: 400; line-height: 1.1; margin-top: 1.6em; } .prose h2 { font-size: 2rem; } .prose h3 { font-size: 1.5rem; } .prose ul { list-style: disc; padding-left: 1.2em; } .prose a { text-decoration: underline; } /* ---------- buttons, links, chips ---------- */ .ak-btn { --b: var(--ak-ink); --f: var(--ak-paper); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 50px; padding: 0 1.45rem 0 1.25rem; border: 1px solid var(--b); background: transparent; color: var(--b); font: 600 15.5px/1 var(--ak-text); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; overflow: hidden; transition: color .45s var(--ak-ease), border-color .3s; -webkit-tap-highlight-color: transparent; } /* The dot: the logo's full stop leads every label; on hover a disc of the same ink floods the button. */ .ak-btn > span:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: currentColor; vertical-align: .16em; transition: transform .5s var(--ak-ease); } .ak-btn::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 240%; aspect-ratio: 1; border-radius: 50%; background: var(--b); transform: translate(-50%, -50%) scale(0); transition: transform .7s var(--ak-ease); } .ak-btn { padding-inline: 1.3rem; } .ak-btn .ic { width: 18px; height: 18px; flex: none; transition: transform .45s var(--ak-ease); } .ak-btn:hover .ic:last-child { transform: translateX(4px); } .ak-btn:active { transform: translateY(1px); } /* Ink: black block, paper text. */ .ak-btn--ink, .ak-btn--lit { --b: var(--ak-paper); background: var(--ak-ink); color: var(--ak-paper); border-color: var(--ak-ink); } /* Line: hairline box, ink text. */ .ak-btn--line, .ak-btn--ghost { --b: var(--ak-ink); border-color: var(--ak-rule-2); color: var(--ak-ink); } /* On black. */ .ak-btn--paper { --b: var(--ak-ink); background: var(--ak-paper); color: var(--ak-ink); border-color: var(--ak-paper); } .ak-btn--rev { --b: var(--ak-paper); border-color: rgba(246, 246, 244, .4); color: var(--ak-paper); } @media (hover: hover) and (pointer: fine) { .ak-btn:hover::before { transform: translate(-50%, -50%) scale(1); } .ak-btn:hover > span:first-child::before { transform: scale(1.4); } .ak-btn--ink:hover, .ak-btn--lit:hover { color: var(--ak-ink); } .ak-btn--line:hover, .ak-btn--ghost:hover { color: var(--ak-paper); border-color: var(--ak-ink); } .ak-btn--paper:hover { color: var(--ak-paper); } .ak-btn--rev:hover { color: var(--ak-ink); border-color: var(--ak-paper); } } .ak-link { display: inline-flex; align-items: center; gap: .45em; padding: 0; border: 0; background: none; font: 600 15.5px/1.3 var(--ak-text); color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 3px; cursor: pointer; transition: background-size .5s var(--ak-ease); } .ak-link:hover { background-size: 0 1px; background-position: 100% 100%; } .ak-link .ic { width: 16px; height: 16px; transition: transform .4s var(--ak-ease); } .ak-link:hover .ic { transform: translateX(3px); } .ak-ib { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; transition: background-color .25s; } .ak-ib .ic { width: 20px; height: 20px; } .ak-ib:hover { background: rgba(11, 11, 11, .06); } .ak-ib__n { position: absolute; right: 4px; top: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--ak-ink); color: var(--ak-paper); font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; } .ak-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ak-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--ak-rule-2); border-radius: 30px; font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .25s, color .25s, border-color .25s; } .ak-chip em { font-style: normal; font-size: 12px; color: var(--ak-ink-3); font-variant-numeric: tabular-nums; } .ak-chip:hover, .ak-chip.is-on { background: var(--ak-ink); color: var(--ak-paper); border-color: var(--ak-ink); } .ak-chip:hover em, .ak-chip.is-on em { color: var(--ak-on-black-2); } .ak-seg { display: inline-flex; padding: 3px; border: 1px solid var(--ak-rule-2); border-radius: 30px; } .ak-seg button { min-height: 32px; padding: 0 14px; border-radius: 30px; font-size: 13.5px; font-weight: 600; color: var(--ak-ink-3); transition: background-color .3s, color .3s; } .ak-seg button[aria-pressed='true'] { background: var(--ak-ink); color: var(--ak-paper); } .ak-ink .ak-seg { border-color: var(--ak-edge); } .ak-ink .ak-seg button[aria-pressed='true'] { background: var(--ak-paper); color: var(--ak-ink); } /* prices */ .ak-site .price { font-family: var(--ak-text); font-weight: 650; letter-spacing: -.01em; font-variant-numeric: lining-nums; font-feature-settings: normal; } .ak-site .price small { font-weight: 500; color: var(--ak-ink-3); } .ak-site .price__was { text-decoration: line-through; } /* hairline that draws itself */ .ak-rule { display: block; height: 1px; background: var(--ak-ink); transform-origin: 0 50%; } .ak-m .ak-rule[data-rule]:not(.is-in) { transform: scaleX(0); } .ak-m .ak-rule[data-rule] { transition: transform 1.2s var(--ak-ease); } /* masks: a line lives in an overflow box it rises out of */ .ak-mask { display: block; overflow: clip; overflow-clip-margin: .12em; padding-bottom: .06em; margin-bottom: -.06em; } .ak-mask > * { display: block; } /* ---------- reveals (only with JS + motion; the head script drops ak-m after 4 s if lot.js never runs) ---------- */ .ak-m [data-in]:not(.is-in) { opacity: 0; transform: translateY(26px); } .ak-m [data-in] { transition: opacity .9s var(--ak-ease) var(--d, 0s), transform 1.1s var(--ak-ease) var(--d, 0s); } .ak-m [data-split] .w { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ak-ease) calc(var(--d, 0s) + var(--wi) * .045s); } .ak-m [data-split] .wm { display: inline-block; overflow: clip; overflow-clip-margin: .1em; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; } .ak-m [data-split].is-in .w { transform: none; } /* The stencil slit: images open from a vertical cut in the middle. */ .ak-m .ak-slit:not(.is-in) > *, .ak-m [data-slit]:not(.is-in) > * { clip-path: inset(0 50% 0 50%); } .ak-m .ak-slit > *, .ak-m [data-slit] > * { transition: clip-path 1.25s var(--ak-ease-io) var(--d, 0s); } .ak-m .ak-slit.is-in > *, .ak-m [data-slit].is-in > * { clip-path: inset(0 0 0 0); } .ak-m .ak-slit[data-in], .ak-m [data-slit][data-in] { opacity: 1; transform: none; } /* words that fill from pale to ink as they scroll through (driven by --f on each word) */ [data-fill] .fw { color: color-mix(in srgb, currentColor calc(var(--f, 1) * 100%), transparent); transition: color .2s linear; } .ak-m [data-fill] .fw { --f: .16; } /* ---------- header ---------- */ .ak-bar { position: sticky; top: 0; z-index: 100; background: rgba(246, 246, 244, .94); border-bottom: 1px solid transparent; transition: transform .6s var(--ak-ease-io), border-color .3s, background-color .3s; } @supports (backdrop-filter: blur(1px)) { .ak-bar { background: rgba(246, 246, 244, .82); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); } } .ak-bar.is-scrolled { border-bottom-color: var(--ak-rule); } .ak-bar.is-tucked { transform: translateY(-101%); } .admin-bar .ak-bar { top: 32px; } .ak-bar__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; height: var(--ak-head); padding-inline: var(--ak-gut); max-width: calc(var(--ak-max) + 2 * var(--ak-gut)); margin-inline: auto; } .ak-bar__logo { display: block; width: 116px; color: var(--ak-ink); } .ak-logo { display: block; width: 100%; height: auto; overflow: visible; } .ak-bar__nav ul { display: flex; justify-content: center; gap: clamp(14px, 2.2vw, 34px); } .ak-bar__nav a { position: relative; display: inline-flex; align-items: baseline; gap: 3px; padding: 8px 0; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ak-ink-2); transition: color .25s; } .ak-bar__nav sup { font-size: 10.5px; font-weight: 650; color: var(--ak-ink-3); top: -.6em; } .ak-bar__nav a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ak-ink); transform: scale(0); transition: transform .45s var(--ak-ease); } .ak-bar__nav a:hover, .ak-bar__nav a[aria-current] { color: var(--ak-ink); } .ak-bar__nav a:hover::after, .ak-bar__nav a[aria-current]::after { transform: scale(1); } .ak-bar__r { display: flex; align-items: center; gap: 4px; } .ak-bar__tel { margin-right: 10px; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; } .ak-bar__book { min-height: 42px; margin-left: 8px; padding-inline: 1rem 1.15rem; font-size: 14.5px; } .ak-bar__call { display: none; } .ak-bar__menu { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px 0 12px; border: 0; background: none; font-size: 14.5px; font-weight: 600; cursor: pointer; } .ak-burger { position: relative; display: inline-block; width: 22px; height: 12px; } .ak-burger i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ak-ease), top .5s var(--ak-ease); } .ak-burger i:first-child { top: 1px; } .ak-burger i:last-child { top: 9px; } .ak-burger.is-x i:first-child { top: 5px; transform: rotate(45deg); } .ak-burger.is-x i:last-child { top: 5px; transform: rotate(-45deg); } .ak-bar__prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ak-ink); transform-origin: 0 50%; transform: scaleX(0); } @supports (animation-timeline: scroll()) { .ak-m .ak-bar__prog { animation: akProg linear both; animation-timeline: scroll(root); } @keyframes akProg { to { transform: scaleX(1); } } } .ak-announce { margin: 0; padding: 9px var(--ak-gut); background: var(--ak-ink); color: var(--ak-paper); font-size: 14px; text-align: center; } /* ---------- menu: the contents page ---------- */ .ak-menu { position: fixed; inset: 0; z-index: 300; background: var(--ak-paper); overflow-y: auto; overscroll-behavior: contain; } .ak-menu__in { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 100%; padding: 0 var(--ak-gut) 28px; } .ak-menu__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--ak-head); } .ak-menu__logo { width: 116px; } .ak-menu__body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); padding-block: clamp(24px, 4vw, 56px); } .ak-menu__h { padding-bottom: 14px; border-bottom: 1px solid var(--ak-ink); } .ak-toc li { border-bottom: 1px solid var(--ak-rule); } .ak-toc__a { display: flex; align-items: baseline; gap: 14px; padding: clamp(12px, 1.6vw, 20px) 0; text-decoration: none; } .ak-toc__t { font-family: var(--ak-display); font-size: clamp(2rem, 1.2rem + 3vw, 4.2rem); line-height: 1; letter-spacing: -.02em; transition: transform .6s var(--ak-ease); } .ak-toc__a--sm .ak-toc__t { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); } .ak-toc__dots { flex: 1; min-width: 20px; height: 1px; background-image: radial-gradient(circle, var(--ak-ink-4) 1px, transparent 1.4px); background-size: 7px 3px; background-repeat: repeat-x; background-position: 0 50%; transform: translateY(-.3em); } .ak-toc__n { font-size: 14.5px; font-weight: 600; color: var(--ak-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; } .ak-toc__a:hover .ak-toc__t, .ak-toc__a.is-lit .ak-toc__t { transform: translateX(12px); } .ak-toc__a[aria-current] .ak-toc__t::before { content: ""; display: inline-block; width: .16em; height: .16em; margin-right: .22em; border-radius: 50%; background: currentColor; vertical-align: .12em; } .ak-menu__side { display: grid; align-content: start; gap: 14px; } .ak-menu__prev { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ak-well); margin-bottom: 10px; } .ak-menu__prev img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s, transform 1.2s var(--ak-ease); } .ak-menu__prev img.is-swap { opacity: 0; transform: scale(1.03); } .ak-menu__foot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-top: 22px; border-top: 1px solid var(--ak-ink); } .ak-menu__foot a, .ak-menu__foot p { display: grid; gap: 4px; font-size: 15px; text-decoration: none; } .ak-m .ak-menu.is-opening { animation: akMenuIn .8s var(--ak-ease-io) both; } .ak-m .ak-menu.is-closing { animation: akMenuOut .45s var(--ak-ease-io) both; } @keyframes akMenuIn { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } } @keyframes akMenuOut { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 50% 0 50%); } } .ak-m .ak-menu.is-opening .ak-toc li { animation: akUp .9s var(--ak-ease) both; animation-delay: calc(.25s + var(--i) * .05s); } @keyframes akUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } /* search overlay */ .ak-searchov { position: fixed; inset: 0; z-index: 310; background: rgba(246, 246, 244, .98); overflow-y: auto; } .ak-searchov .search__in { padding-block: 28px; } .ak-searchov .search__f { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--ak-ink); padding-bottom: 12px; } .ak-searchov .search__f > .ic { width: 26px; height: 26px; } .ak-searchov input[type=search] { flex: 1; min-width: 0; border: 0; background: none; font-family: var(--ak-display); font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem); outline: none; } .ak-searchov .search__res { display: grid; gap: 14px; padding-top: 24px; } /* ---------- loader handover: hold the first screen until the catalogue opens ---------- */ .ak-ld .ak-cover__lot.is-on .ak-mask > *, .ak-ld .ak-cover__plate.is-on img { transition: none !important; } /* ===================================================================================== HOME ===================================================================================== */ /* ---------- the cover ---------- */ .ak-cover { position: relative; } .ak-cover__pin { position: relative; } .ak-cover__plates { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ak-paper); } .ak-cover__plate { position: absolute; inset: 0; margin: 0; } .ak-cover__plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; } .ak-cover__plate { clip-path: inset(0 50% 0 50%); } .ak-cover__plate.is-on { clip-path: inset(0 0 0 0); } /* Without the pin (no JS / reduced motion / phones before boot): the lots stack. */ .ak-cover__lots { display: grid; gap: 0; } .ak-cover__lot { display: grid; gap: 14px; padding: 28px var(--ak-gut) 36px; border-bottom: 1px solid var(--ak-rule); } .ak-cover:not(.is-live) .ak-cover__plates { display: none; } .ak-cover__no { display: flex; align-items: baseline; gap: 10px; margin: 0; } .ak-cover__lotw { font-size: 13px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; } .ak-cover__no b { font-family: var(--ak-display); font-weight: 400; font-size: clamp(5.6rem, 3rem + 11vw, 15rem); line-height: .78; letter-spacing: -.045em; font-variant-numeric: lining-nums; } .ak-cover__t { display: grid; gap: 2px; font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4.8rem); } .ak-cover__mk { font-family: var(--ak-text); font-size: clamp(.95rem, .85rem + .3vw, 1.15rem); font-weight: 600; letter-spacing: 0; color: var(--ak-ink-3); } .ak-cover__md { line-height: .98; } .ak-cover__lines { display: grid; gap: 4px; } .ak-cover__lines li > span { display: flex; align-items: baseline; gap: 10px; font-size: 15.5px; color: var(--ak-ink-2); } .ak-cover__lines li > span::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ak-ink); transform: translateY(-.2em); } .ak-cover__buy { display: grid; gap: 16px; padding-top: 14px; border-top: 1px solid var(--ak-rule); } .ak-cover__price { display: grid; gap: 2px; } .ak-cover__cash { font-size: clamp(1.5rem, 1.25rem + .8vw, 2rem); } .ak-cover__price small { font-size: 14px; color: var(--ak-ink-3); } .ak-cover__acts { display: flex; flex-wrap: wrap; gap: 8px; } .ak-cover__rail { display: none; } .ak-cover__slit { display: none; } /* The live pinned spread */ .ak-cover.is-live .ak-cover__track { position: relative; height: calc(100svh + (var(--n) - 1) * 72svh); } .ak-cover.is-live .ak-cover__pin { position: sticky; top: var(--ak-head); height: calc(100svh - var(--ak-head)); overflow: hidden; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr) auto; } .admin-bar .ak-cover.is-live .ak-cover__pin { top: calc(var(--ak-head) + 32px); height: calc(100svh - var(--ak-head) - 32px); } .ak-cover.is-live .ak-cover__plates { display: block; grid-column: 2; grid-row: 1 / 3; aspect-ratio: auto; height: 100%; } /* The studio's white wall dissolves into the page on the left and the top. */ .ak-cover.is-live .ak-cover__plate img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 16%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 16%); mask-composite: intersect; } .ak-cover.is-live .ak-cover__slit { display: block; position: absolute; left: 50%; top: 8%; bottom: 8%; width: 1px; background: var(--ak-ink); transform: scaleY(0); opacity: 0; pointer-events: none; z-index: 3; } .ak-cover.is-live .ak-cover__lots { grid-column: 1; grid-row: 1; position: relative; display: block; } .ak-cover.is-live .ak-cover__lot { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 1.6vh, 18px); padding: 0 0 0 var(--ak-gut); border: 0; pointer-events: none; opacity: 0; transition: opacity 0s .65s; } .ak-cover.is-live .ak-cover__lot.is-on, .ak-cover.is-live .ak-cover__lot.is-out { opacity: 1; transition-delay: 0s; } .ak-cover.is-live .ak-cover__lot.is-on { pointer-events: auto; } .ak-cover.is-live .ak-cover__lot .ak-mask > *, .ak-cover.is-live .ak-cover__lines li > span { transform: translateY(105%); transition: transform .8s var(--ak-ease); } .ak-cover.is-live .ak-cover__lot.is-on .ak-mask > *, .ak-cover.is-live .ak-cover__lot.is-on .ak-cover__lines li > span { transform: none; transition-delay: calc(.12s + var(--k, 0) * .06s); } .ak-cover.is-live .ak-cover__lot.is-out .ak-mask > *, .ak-cover.is-live .ak-cover__lot.is-out .ak-cover__lines li > span { transform: translateY(-105%); transition-duration: .55s; transition-timing-function: var(--ak-ease-io); } .ak-cover.is-live .ak-cover__t .ak-mask:nth-child(2) > * { transition-delay: .08s; } .ak-cover.is-live .ak-cover__lot.is-on .ak-cover__t .ak-mask:nth-child(2) > * { transition-delay: .2s; } .ak-cover.is-live .ak-cover__lotw, .ak-cover.is-live .ak-cover__buy { opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .8s var(--ak-ease); } .ak-cover.is-live .ak-cover__lot.is-on .ak-cover__lotw, .ak-cover.is-live .ak-cover__lot.is-on .ak-cover__buy { opacity: 1; transform: none; transition-delay: .3s; } .ak-cover.is-live .ak-cover__buy { max-width: 470px; } .ak-cover.is-live .ak-cover__rail { display: grid; gap: 14px; grid-column: 1; grid-row: 2; position: relative; z-index: 4; padding: 0 clamp(16px, 2vw, 40px) clamp(16px, 2.4vh, 26px) var(--ak-gut); pointer-events: none; } .ak-cover__meta { display: flex; align-items: baseline; gap: 14px; font-size: 14px; color: var(--ak-ink-3); pointer-events: auto; } .ak-cover__meta b { font-family: var(--ak-display); font-weight: 400; font-size: 1.6rem; color: var(--ak-ink); } .ak-cover__meta .ak-link { font-size: 14px; color: var(--ak-ink); } .ak-cover__steps { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; pointer-events: auto; } .ak-cover__steps button { display: grid; gap: 7px; width: 100%; padding: 10px 0 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ak-ink-3); } .ak-cover__sn { font-family: var(--ak-display); font-size: 1.15rem; line-height: 1; color: var(--ak-ink); } .ak-cover__sname { font-size: 12.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; } .ak-cover__steps i { position: relative; display: block; height: 1px; background: var(--ak-rule-2); overflow: hidden; } .ak-cover__steps i b { position: absolute; inset: 0; background: var(--ak-ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); } .ak-cover__steps [aria-current] .ak-cover__sname, .ak-cover__steps button:hover .ak-cover__sname { color: var(--ak-ink); } /* ---------- statement ---------- */ .ak-statement { position: relative; } .ak-statement__pin { display: grid; place-content: center; gap: clamp(26px, 4vw, 48px); min-height: 92svh; padding: var(--ak-sec) var(--ak-gut); text-align: center; } .ak-statement__t { margin: 0 auto; max-width: 15ch; font-size: clamp(2.6rem, 1.2rem + 5.4vw, 7rem); line-height: 1; letter-spacing: -.03em; } .ak-statement__by { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 auto; font-size: 14.5px; color: var(--ak-ink-3); } .ak-statement__lg { width: 92px; color: var(--ak-ink); } /* ---------- contents ---------- */ .ak-contents__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; padding-bottom: clamp(30px, 4vw, 56px); } .ak-contents__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 72px); align-items: start; border-top: 1px solid var(--ak-ink); } .ak-contents__row { display: grid; grid-template-columns: minmax(0, auto) minmax(24px, 1fr) auto; grid-template-areas: "mk dots n" "mk dots span"; align-items: baseline; column-gap: 16px; padding: clamp(12px, 1.4vw, 18px) 0; border-bottom: 1px solid var(--ak-rule); text-decoration: none; color: #85857e; transition: color .45s var(--ak-ease); } .ak-contents__th { display: none; } .ak-contents__mk { grid-area: mk; hyphens: none; -webkit-hyphens: none; white-space: nowrap; font-family: var(--ak-display); font-size: clamp(2rem, 1.2rem + 2.8vw, 4.2rem); line-height: 1.02; letter-spacing: -.025em; transition: transform .7s var(--ak-ease); } .ak-contents__dots { grid-area: dots; align-self: center; height: 1px; background-image: radial-gradient(circle, currentColor 1px, transparent 1.4px); background-size: 7px 3px; background-repeat: repeat-x; background-position: 0 50%; opacity: .6; } .ak-contents__n { grid-area: n; font-size: 15px; font-weight: 600; text-align: right; color: var(--ak-ink-3); } .ak-contents__n b { font-family: var(--ak-display); font-weight: 400; font-size: 1.5rem; color: inherit; } .ak-contents__span { grid-area: span; font-size: 13.5px; text-align: right; color: var(--ak-ink-3); white-space: nowrap; } .ak-contents__row.is-on { color: var(--ak-ink); } .ak-contents__row.is-on .ak-contents__mk { transform: translateX(14px); } .ak-contents__row.is-on .ak-contents__n { color: var(--ak-ink); } .ak-contents__plate { position: sticky; top: calc(var(--ak-head) + 6vh); margin: 0; padding-top: clamp(18px, 2vw, 28px); } .ak-contents__plate img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--ak-well); transition: opacity .3s, clip-path .8s var(--ak-ease-io); } .ak-contents__plate img.is-swap { opacity: .0; } .ak-contents__plate figcaption { margin-top: 12px; font-size: 14px; font-weight: 600; } .ak-contents__all { margin-top: clamp(30px, 4vw, 56px); } /* ---------- just catalogued (the page turns black as it arrives) ---------- */ .ak-newest { background: var(--ak-paper); color: var(--ak-ink); transition: background-color .8s var(--ak-ease), color .8s var(--ak-ease); } .ak-newest.is-dark { background: var(--ak-black); color: var(--ak-on-black); } .ak-newest.is-dark .ak-lede { color: var(--ak-on-black-2); } .ak-newest__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 20px 48px; align-items: end; padding-bottom: clamp(28px, 3.5vw, 52px); } .ak-newest__track { display: flex; gap: var(--ak-col-gap); padding-inline: var(--ak-gut); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--ak-gut); } .ak-newest__track::-webkit-scrollbar { display: none; } .ak-newest__track > .ak-card { flex: 0 0 min(84vw, 460px); scroll-snap-align: start; } .ak-newest__end { flex: 0 0 min(64vw, 300px); display: grid; align-content: center; justify-items: start; gap: 8px; padding: 28px; border: 1px solid currentColor; text-decoration: none; scroll-snap-align: start; } .ak-newest__endn { font-family: var(--ak-display); font-size: 5rem; line-height: .9; } .ak-newest__end .ic { width: 26px; height: 26px; margin-top: 12px; transition: transform .5s var(--ak-ease); } .ak-newest__end:hover .ic { transform: translateX(8px); } .ak-newest__bar { height: 1px; margin-top: 30px; background: var(--ak-edge); position: relative; } .ak-newest:not(.is-dark) .ak-newest__bar { background: var(--ak-rule); } .ak-newest__bar i { position: absolute; inset: 0; background: currentColor; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); } .ak-newest.is-dark .ak-card__make, .ak-newest.is-dark .ak-card__meta, .ak-newest.is-dark .ak-card__pm, .ak-newest.is-dark .price small { color: var(--ak-on-black-2); } .ak-newest.is-dark .ak-card__win { background: #161614; } .ak-newest.is-dark .ak-card__lot { background: var(--ak-paper); color: var(--ak-ink); } /* ---------- car card: the catalogue plate ---------- */ .ak-card { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .ak-card__win { position: relative; overflow: hidden; background: var(--ak-well); } .ak-card__media { display: block; aspect-ratio: 4 / 3; } .ak-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ak-ease), opacity .2s; } @media (hover: hover) and (pointer: fine) { .ak-card:hover .ak-card__media img { transform: scale(1.035); } } .ak-card__noimg { display: grid; place-items: center; height: 100%; font-size: 14px; color: var(--ak-ink-3); } .ak-card__ticks { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 3px; opacity: 0; transition: opacity .3s; } .ak-card__ticks i { flex: 1; height: 2px; background: rgba(255, 255, 255, .5); } .ak-card__ticks i.is-on { background: #fff; } .ak-card:hover .ak-card__ticks { opacity: 1; } .ak-card__state { position: absolute; left: 0; top: 0; padding: 7px 11px; background: var(--ak-ink); color: var(--ak-paper); font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; } .ak-card__tools { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; } .ak-save { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(246, 246, 244, .92); color: var(--ak-ink); cursor: pointer; transition: background-color .25s, color .25s, transform .3s var(--ak-ease); } .ak-save .ic { width: 17px; height: 17px; } .ak-save[aria-pressed='true'] { background: var(--ak-ink); color: var(--ak-paper); } .ak-save[aria-pressed='true'] .ic path { fill: currentColor; } .ak-save:active { transform: scale(.92); } @media (hover: hover) and (pointer: fine) { .ak-card__tools { opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .4s var(--ak-ease); } .ak-card:hover .ak-card__tools, .ak-card__tools:focus-within { opacity: 1; transform: none; } } .ak-card__body { flex: 1; display: flex; flex-direction: column; gap: 6px; } .ak-card__make { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ak-ink-3); } .ak-card__lot { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; background: var(--ak-ink); color: var(--ak-paper); font-size: 11.5px; font-weight: 650; letter-spacing: .06em; } .ak-card__t { font-family: var(--ak-display); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + .9vw, 2.2rem); line-height: 1.02; letter-spacing: -.02em; } .ak-card__t a { text-decoration: none; } .ak-card__t a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .ak-card__t span { display: block; margin-top: 4px; font-family: var(--ak-text); font-size: 14px; letter-spacing: 0; line-height: 1.35; color: var(--ak-ink-3); } .ak-card__tools, .ak-card__state { z-index: 2; } .ak-card__meta { font-size: 14px; color: var(--ak-ink-3); } .ak-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--ak-rule); } .ak-ink .ak-card__price, .ak-newest.is-dark .ak-card__price { border-top-color: var(--ak-edge); } .ak-card__cash { font-size: 1.2rem; } .ak-card__pm { font-size: 13.5px; color: var(--ak-ink-3); } .ak-card__pm b { font-weight: 600; color: inherit; } .vc--sold .ak-card__media img { filter: grayscale(1) contrast(.9); opacity: .7; } /* ---------- up close ---------- */ .ak-upclose { position: relative; background: var(--ak-paper); } .ak-upclose__pin { display: none; } .ak-upclose__lhead { padding-top: var(--ak-sec); } .ak-upclose__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px; padding-block: 30px var(--ak-sec); } .ak-upclose__list li { display: grid; gap: 14px; } .ak-upclose__crop { display: block; aspect-ratio: 4 / 3; background-repeat: no-repeat; background-size: var(--z, 220%) auto; background-position: var(--x) var(--y); } .ak-upclose__list p { color: var(--ak-ink-3); margin-top: 6px; } .ak-upclose.is-live .ak-upclose__lhead, .ak-upclose.is-live .ak-upclose__list { display: none; } .ak-upclose.is-live .ak-upclose__pin { display: block; position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--ak-paper); } .ak-upclose__plates { position: absolute; inset: 0; } .ak-upclose__plate { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; } .ak-upclose__plate img { width: 100%; height: 100%; display: block; } /* A paper loupe: the page closes in around the detail, like looking through a catalogue lens. */ .ak-upclose__shade { position: absolute; inset: 0; background: radial-gradient(circle at 36% 52%, rgba(246, 246, 244, 0) 0 16%, rgba(246, 246, 244, .62) 44%, rgba(246, 246, 244, .94) 100%); pointer-events: none; } .ak-reticle { position: absolute; left: 0; top: 0; width: 86px; height: 86px; pointer-events: none; } .ak-reticle svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--ak-ink); } .ak-reticle__ring { stroke-width: 1.4; } .ak-reticle__perf { stroke-width: 1; stroke-dasharray: 1 6; stroke-linecap: round; opacity: .8; } .ak-reticle__dot { fill: var(--ak-ink); stroke: var(--ak-paper); stroke-width: 1.5; } .ak-upclose__lead { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .ak-upclose__lead line { stroke: var(--ak-ink); stroke-width: 1; } .ak-upclose__head { position: absolute; left: var(--ak-gut); top: calc(var(--ak-head) + 22px); z-index: 3; max-width: min(34ch, 42vw); padding: 18px 22px 20px; background: var(--ak-paper); box-shadow: 0 24px 50px -30px rgba(11, 11, 11, .35); } .ak-lot .ak-upclose__head { top: calc(var(--ak-head) + 74px); } .ak-upclose__lot { margin-bottom: 8px; font-size: 12.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; } .ak-upclose__t { font-family: var(--ak-display); font-weight: 400; font-size: clamp(1.8rem, 1.1rem + 2vw, 3.1rem); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; } .ak-upclose__sub { margin-top: 10px; font-size: 14px; color: var(--ak-ink-3); } .ak-upclose__sub a { color: var(--ak-ink); font-weight: 600; } .ak-upclose__card { position: absolute; right: var(--ak-gut); top: 50%; translate: 0 -50%; z-index: 3; width: min(370px, 31vw); display: grid; gap: 12px; padding: 22px 22px 24px; background: var(--ak-sheet); box-shadow: 0 30px 60px -30px rgba(11, 11, 11, .35), 0 1px 0 rgba(11, 11, 11, .06); } .ak-upclose__no { display: flex; align-items: baseline; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--ak-rule); } .ak-upclose__no .ak-box { font-family: var(--ak-display); font-size: 3rem; line-height: .9; letter-spacing: -.03em; } .ak-upclose__of { font-size: 14px; color: var(--ak-ink-3); } .ak-upclose__loupe { aspect-ratio: 16 / 10; background-color: var(--ak-well); background-repeat: no-repeat; } .ak-upclose__ct { font-family: var(--ak-display); font-weight: 400; font-size: 1.7rem; line-height: 1.05; letter-spacing: -.015em; } .ak-upclose__card p { color: var(--ak-ink-2); font-size: 15px; } .ak-upclose__card p:empty { display: none; } .ak-upclose__card.is-swap > * { animation: akCardIn .7s var(--ak-ease) both; } .ak-upclose__card.is-swap > *:nth-child(2) { animation-delay: .04s; } .ak-upclose__card.is-swap > *:nth-child(3) { animation-delay: .08s; } .ak-upclose__card.is-swap > *:nth-child(4) { animation-delay: .12s; } @keyframes akCardIn { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } } .ak-upclose__stops { position: absolute; left: var(--ak-gut); right: var(--ak-gut); bottom: 22px; z-index: 3; display: flex; gap: 8px; } .ak-upclose__stops button { flex: 1; display: grid; gap: 8px; min-height: 44px; align-content: end; padding: 0; border: 0; background: none; text-align: left; font-size: 12.5px; font-weight: 650; color: var(--ak-ink-3); font-variant-numeric: tabular-nums; cursor: pointer; } .ak-upclose__stops em { font-style: normal; font-weight: 500; } .ak-upclose__stops i { display: block; height: 1px; background: var(--ak-rule-2); transition: background-color .4s, transform .4s; transform-origin: 0 50%; } .ak-upclose__stops .is-done i { background: var(--ak-ink-3); } .ak-upclose__stops [aria-current='true'] { color: var(--ak-ink); } .ak-upclose__stops [aria-current='true'] i { background: var(--ak-ink); transform: scaleY(2); } body.ak-in-tour .wafab-wrap, body.ak-in-tour .ask__btn, body.ak-in-tour .ak-qbar { opacity: 0; pointer-events: none; } /* ---------- films (Everyday we dala) ---------- */ .ak-films__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 20px 48px; align-items: end; padding-bottom: clamp(28px, 3.5vw, 52px); } .ak-films__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ak-col-gap); width: min(var(--ak-max), 100% - 2 * var(--ak-gut)); margin-inline: auto; } .ak-films__f { display: grid; gap: 12px; margin: 0; } .ak-films__v { aspect-ratio: 9 / 16; overflow: hidden; background: var(--ak-well); } .ak-films__m { display: block; width: 100%; height: 100%; object-fit: cover; } .ak-films__f figcaption { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; font-weight: 600; } .ak-films__n { font-family: var(--ak-display); font-weight: 400; font-size: 1.2rem; } .ak-films__f:nth-child(2) { margin-top: clamp(30px, 6vw, 110px); } .ak-films__f:nth-child(3) { margin-top: clamp(14px, 3vw, 54px); } /* ---------- deal (budget) ---------- */ .ak-deal { border-top: 1px solid var(--ak-rule); } .ak-deal__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 110px); align-items: start; } .ak-deal__ctl { display: grid; gap: 22px; } .ak-deal__fig { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; } .ak-deal__v { font-family: var(--ak-display); font-size: clamp(3.2rem, 2rem + 4vw, 6rem); line-height: .9; letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; } .ak-deal__fig small { font-size: 15px; color: var(--ak-ink-3); } .ak-scale { position: relative; padding-bottom: 26px; } .ak-scale input[type=range] { --p: 17%; width: 100%; height: 34px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; } .ak-scale input[type=range]::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, var(--ak-ink) var(--p), var(--ak-rule-2) var(--p)); } .ak-scale input[type=range]::-moz-range-track { height: 1px; background: var(--ak-rule-2); } .ak-scale input[type=range]::-moz-range-progress { height: 1px; background: var(--ak-ink); } .ak-scale input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -12.5px; border-radius: 50%; background: var(--ak-ink); border: 5px solid var(--ak-paper); box-shadow: 0 0 0 1px var(--ak-ink); transition: transform .25s var(--ak-ease); } .ak-scale input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ak-ink); border: 5px solid var(--ak-paper); box-shadow: 0 0 0 1px var(--ak-ink); } .ak-scale input[type=range]:active::-webkit-slider-thumb { transform: scale(1.2); } .ak-scale__ticks { position: absolute; left: 0; right: 0; top: 23px; height: 7px; background-image: linear-gradient(90deg, var(--ak-rule-2) 1px, transparent 1px); background-size: calc(100% / 23) 100%; pointer-events: none; } .ak-scale__ends { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ak-ink-3); } .ak-deal__terms { font-size: 14px; color: var(--ak-ink-3); } .ak-deal__terms .ak-link { margin-left: 8px; font-size: 14px; color: var(--ak-ink); } .ak-deal__out { display: grid; gap: 18px; } .ak-deal__n { display: flex; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--ak-ink); font-size: 16px; font-weight: 600; } .ak-deal__n b { font-family: var(--ak-display); font-weight: 400; font-size: 3rem; line-height: .9; } .ak-deal__list { display: grid; gap: 0; min-height: 330px; } .ak-bline { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ak-rule); text-decoration: none; animation: akUp .6s var(--ak-ease) both; animation-delay: calc(var(--k) * .06s); } .ak-bline img { width: 96px; height: 72px; object-fit: cover; background: var(--ak-well); } .ak-bline b { display: block; font-weight: 600; line-height: 1.25; } .ak-bline small { font-size: 13px; color: var(--ak-ink-3); } .ak-bline__l { display: inline-block; margin-right: 6px; font-family: var(--ak-display); font-weight: 400; } .ak-bline__pm { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; } .ak-bline:hover b { text-decoration: underline; } .ak-deal__none { padding: 20px 0; color: var(--ak-ink-3); } .ak-deal__acts { display: flex; flex-wrap: wrap; gap: 8px; } /* ---------- sell band ---------- */ .ak-sell__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 110px); align-items: start; } .ak-sell .ak-h2 { color: var(--ak-on-black); } .ak-sell__side { display: grid; gap: 26px; justify-items: start; } .ak-sell__steps { display: grid; width: 100%; } .ak-sell__steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--ak-edge); } .ak-sell__steps b { font-family: var(--ak-display); font-weight: 400; font-size: 1.7rem; line-height: 1; } /* ---------- words ---------- */ .ak-words__h { padding-bottom: 14px; border-bottom: 1px solid var(--ak-ink); color: var(--ak-ink); } .ak-words__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 90px); padding-top: clamp(28px, 4vw, 56px); } .ak-words__q { margin: 0; display: grid; gap: 22px; align-content: start; } .ak-words__q blockquote { margin: 0; } .ak-words__q p { font-family: var(--ak-display); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem); line-height: 1.16; letter-spacing: -.015em; text-wrap: pretty; } .ak-words__q p::before { content: "\201C"; } .ak-words__q p::after { content: "\201D"; } .ak-words__q figcaption { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--ak-rule); font-size: 14.5px; } .ak-words__q figcaption span { color: var(--ak-ink-3); } .ak-words__src { margin-top: clamp(28px, 4vw, 50px); } /* ---------- family ---------- */ .ak-family { border-top: 1px solid var(--ak-rule); } .ak-family__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 6vw, 110px); align-items: center; } .ak-family__img { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ak-well); } .ak-family__img img { width: 100%; height: 100%; object-fit: cover; } .ak-family__txt { display: grid; gap: 22px; justify-items: start; } .ak-family__txt > p:not(.ak-lede) { max-width: 52ch; color: var(--ak-ink-2); } /* ---------- visit ---------- */ .ak-visit { border-top: 1px solid var(--ak-rule); } .ak-visit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 110px); align-items: start; } .ak-visit__txt { display: grid; gap: 24px; } .ak-visit__addr { font-family: var(--ak-display); font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem); line-height: 1.1; } .ak-visit__addr a { text-decoration: none; } .ak-visit__addr a:hover { text-decoration: underline; } .ak-hrs { display: grid; max-width: 440px; } .ak-hrs div { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--ak-rule); font-size: 15.5px; } .ak-hrs dd { margin: 0; color: var(--ak-ink-3); } .ak-visit__note { font-size: 14px; color: var(--ak-ink-3); } .ak-visit__acts { display: flex; flex-wrap: wrap; gap: 8px; } .ak-visit__media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--ak-col-gap); align-items: end; } .ak-visit__img { margin: 0; aspect-ratio: 9 / 16; overflow: hidden; background: var(--ak-well); } .ak-visit__img img { width: 100%; height: 100%; object-fit: cover; } .ak-visit__map { position: relative; display: grid; place-content: center; justify-items: center; gap: 10px; aspect-ratio: 3 / 4; border: 1px solid var(--ak-rule-2); background: var(--ak-sheet); text-align: center; font-size: 13px; color: var(--ak-ink-3); } .ak-visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); } /* ===================================================================================== FOOTER: the back cover ===================================================================================== */ .ak-foot { position: relative; background: var(--ak-black); color: var(--ak-on-black); padding-top: clamp(80px, 11vw, 170px); overflow: hidden; } .ak-foot__cta { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 28px 60px; align-items: end; padding-bottom: clamp(56px, 8vw, 110px); } .ak-foot__t { font-size: clamp(2.6rem, 1.3rem + 4.6vw, 6.4rem); max-width: 12ch; } .ak-foot__acts { display: flex; flex-wrap: wrap; gap: 8px; } .ak-foot__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 36px; padding-block: 36px; border-top: 1px solid var(--ak-edge); } .ak-foot__col { display: grid; gap: 14px; align-content: start; } .ak-foot .ak-label { color: var(--ak-on-black-2); } .ak-foot__big { font-family: var(--ak-display); font-size: 1.6rem; line-height: 1.15; } .ak-foot__big a { text-decoration: none; } .ak-foot__big a:hover { text-decoration: underline; } .ak-foot__note { font-size: 14px; color: var(--ak-on-black-2); } .ak-foot .ak-hrs div { border-bottom-color: var(--ak-edge); font-size: 15px; } .ak-foot .ak-hrs dd { color: var(--ak-on-black-2); } .ak-foot__links { display: grid; gap: 2px; } .ak-foot__links a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; text-decoration: none; color: var(--ak-on-black-2); transition: color .3s; } .ak-foot__links a:hover { color: var(--ak-on-black); } .ak-foot__links .ic { width: 14px; height: 14px; } .ak-foot__social { margin-top: 4px; } .ak-foot__colophon { padding: 18px 0 0; border-top: 1px solid var(--ak-edge); font-size: 13.5px; color: var(--ak-on-black-2); } .ak-foot__colophon::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--ak-on-black); vertical-align: .12em; } /* Wordmark bleed: the logo across the full width, cut by the page edge. */ .ak-foot__mark { position: relative; margin-top: clamp(40px, 6vw, 90px); padding: 0 var(--ak-gut) clamp(18px, 2.4vw, 34px); overflow: hidden; } .ak-foot__mark a { display: block; color: var(--ak-on-black); } .ak-logo--wall { width: 100%; } .ak-logo--wall { display: block; } .ak-m .ak-foot__mark .ak-lg__g--r0 { transform: translateY(100%); transform-box: fill-box; transition: transform 1.2s var(--ak-ease); transition-delay: calc(var(--i) * .07s); } .ak-m .ak-foot__mark.is-in .ak-lg__g--r0 { transform: none; } .ak-foot__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-block: 20px 28px; border-top: 1px solid var(--ak-edge); font-size: 13.5px; color: var(--ak-on-black-2); } .ak-foot__legalmenu { display: flex; gap: 18px; } .ak-foot__legalmenu a, .ak-foot__credit { text-decoration: none; color: var(--ak-on-black-2); } .ak-foot__legalmenu a:hover, .ak-foot__credit:hover { color: var(--ak-on-black); } .ak-foot__fine { flex: 1 1 360px; font-size: 12.5px; line-height: 1.5; } .ak-foot__credit { margin-left: auto; } /* ===================================================================================== The full stop: a dot that follows a fine pointer and grows into a label over lots ===================================================================================== */ .ak-dot { position: fixed; left: 0; top: 0; z-index: 400; display: none; pointer-events: none; } .ak-dot span { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ak-ink); color: var(--ak-paper); font-size: 0; font-weight: 650; letter-spacing: .04em; transition: width .5s var(--ak-ease), height .5s var(--ak-ease), margin .5s var(--ak-ease), font-size .3s, background-color .3s, opacity .3s; } .ak-dot.is-big span { width: 84px; height: 84px; margin: -42px 0 0 -42px; font-size: 14px; } .ak-dot.is-hide span { opacity: 0; } .ak-dot.is-rev span { background: var(--ak-paper); color: var(--ak-ink); } @media (hover: hover) and (pointer: fine) { .ak-m .ak-dot.is-on { display: block; } } /* the WhatsApp bubble (only when a number is set) and the quick bar */ .wafab-wrap { position: fixed; right: 20px; bottom: 22px; z-index: 90; transition: opacity .3s; } .wafab { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ak-ink); color: var(--ak-paper); box-shadow: 0 12px 30px -10px rgba(11, 11, 11, .5); } .wafab .ic { width: 26px; height: 26px; } .ak-qbar { display: none; } /* ===================================================================================== A LOT (car page) ===================================================================================== */ .ak-lotc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100svh - var(--ak-head)); } .ak-lotc__in { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(24px, 4vw, 56px) clamp(20px, 3vw, 48px) clamp(24px, 4vw, 56px) var(--ak-gut); min-width: 0; } .ak-lotc .crumbs { margin-bottom: 6px; } .ak-lotc__no { display: flex; align-items: baseline; gap: 10px; margin: 0; } .ak-lotc__no span { font-size: 13px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; } .ak-lotc__no b { font-family: var(--ak-display); font-weight: 400; font-size: clamp(4.4rem, 2.4rem + 6vw, 9rem); line-height: .8; letter-spacing: -.045em; } .ak-lotc__state { align-self: center; margin-left: 8px; padding: 6px 10px; background: var(--ak-ink); color: var(--ak-paper); font-style: normal; font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; } .ak-lotc__t { display: grid; gap: 4px; } .ak-lotc__mk { font-size: clamp(.95rem, .85rem + .3vw, 1.15rem); font-weight: 600; color: var(--ak-ink-3); } .ak-lotc__md { font-family: var(--ak-display); font-weight: 400; font-size: clamp(2.6rem, 1.4rem + 3.6vw, 5.4rem); line-height: .98; letter-spacing: -.025em; text-wrap: balance; } .ak-lotc__sub { font-size: 1.05rem; color: var(--ak-ink-2); } .ak-lotc__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14.5px; color: var(--ak-ink-2); } .ak-lotc__facts li { display: inline-flex; align-items: center; gap: 18px; } .ak-lotc__facts li + li::before { content: ""; width: 4px; height: 4px; margin-left: -9px; margin-right: -9px; border-radius: 50%; background: var(--ak-ink-4); } .ak-pricebox { display: grid; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--ak-ink); max-width: 520px; } .ak-pricebox__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ak-pricebox__price { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1; } .ak-pricebox__fine { font-size: 14px; color: var(--ak-ink-3); } .ak-pricebox__fine .ak-link { font-size: 14px; padding-bottom: 1px; color: var(--ak-ink); } .ak-pricebox__note { font-size: 14.5px; color: var(--ak-ink-2); } .ak-pricebox__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ak-pricebox__acts .ak-btn--ink { grid-column: 1 / -1; } .ak-pricebox__acts .ak-btn { padding-inline: .9rem; } .ak-pricebox__tools { display: flex; flex-wrap: wrap; gap: 2px 16px; padding-top: 10px; border-top: 1px solid var(--ak-rule); } .ak-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; font-size: 13.5px; font-weight: 550; color: var(--ak-ink-3); transition: color .25s; } .ak-tool .ic { width: 17px; height: 17px; } .ak-tool:hover, .ak-tool[aria-pressed='true'] { color: var(--ak-ink); } .ak-tool[aria-pressed='true'] .ic path { fill: currentColor; } .car--sold .ak-pricebox__price { color: var(--ak-ink-3); } /* the photos: the right page */ .ak-site .ak-lotc__stage { position: relative; background: var(--ak-paper); min-width: 0; display: flex; flex-direction: column; } .ak-lotc__track { flex: 1; } .ak-site .ak-lotc__slide { aspect-ratio: auto; height: 100%; min-height: 0; } .ak-lotc__slide img { object-position: 50% 62%; } .ak-lotc__track { height: calc(100svh - var(--ak-head) - 96px); min-height: 440px; } .ak-lotc__ui { position: absolute; right: 18px; bottom: 108px; display: flex; align-items: center; gap: 6px; } .ak-lotc__count { margin-right: 8px; padding: 6px 12px; background: rgba(246, 246, 244, .9); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; } .ak-ib--line { background: rgba(246, 246, 244, .9); border: 1px solid var(--ak-rule-2); } .ak-ib--line:hover { background: var(--ak-ink); color: var(--ak-paper); } .ak-site .ak-lotc__thumbs { background: var(--ak-paper); padding: 12px 18px; gap: 6px; } .ak-site .ak-lotc__thumbs .stage__thumb { width: 92px; opacity: .45; } .ak-site .ak-lotc__thumbs .stage__thumb.is-on { opacity: 1; outline: 1px solid var(--ak-ink); outline-offset: 2px; } /* the catalogue tab bar */ .ak-carnav { position: sticky; top: var(--ak-head); z-index: 80; background: rgba(246, 246, 244, .94); border-block: 1px solid var(--ak-rule); transition: top .6s var(--ak-ease-io); } @supports (backdrop-filter: blur(1px)) { .ak-carnav { background: rgba(246, 246, 244, .84); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } } .admin-bar .ak-carnav { top: calc(var(--ak-head) + 32px); } .ak-bar.is-tucked ~ .main .ak-carnav { top: 0; } .ak-carnav__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 58px; padding-inline: var(--ak-gut); max-width: calc(var(--ak-max) + 2 * var(--ak-gut)); margin-inline: auto; } .ak-carnav__links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .ak-carnav__links::-webkit-scrollbar { display: none; } .ak-carnav__links a { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 14.5px; font-weight: 550; color: var(--ak-ink-3); text-decoration: none; transition: color .3s; } .ak-carnav__links a::before { content: ""; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform .45s var(--ak-ease); } .ak-carnav__links a:hover, .ak-carnav__links a.is-on { color: var(--ak-ink); } .ak-carnav__links a.is-on::before { transform: scale(1); } .ak-carnav__buy { display: flex; align-items: center; gap: 16px; flex: none; } .ak-carnav__name { font-size: 14px; color: var(--ak-ink-3); } .ak-carnav__price { font-size: 1.05rem; } .ak-carnav__buy .ak-btn { min-height: 40px; padding: 0 14px; font-size: 14px; } /* the catalogue note */ .ak-essay__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(30px, 5vw, 90px); } .ak-essay__head { display: grid; gap: 22px; align-content: start; } .ak-essay__head .ak-label { padding-bottom: 12px; border-bottom: 1px solid var(--ak-ink); color: var(--ak-ink); } .ak-essay__facts { display: grid; } .ak-essay__facts div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ak-rule); font-size: 14.5px; } .ak-essay__facts dt { color: var(--ak-ink-3); } .ak-essay__facts dd { margin: 0; font-weight: 600; text-align: right; } .ak-essay__lines { font-family: var(--ak-display); font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.6rem); line-height: 1.08; letter-spacing: -.02em; text-wrap: pretty; } .ak-essay__notes { margin-top: clamp(26px, 3vw, 40px); border-top: 1px solid var(--ak-rule); } .ak-essay__notes summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; font-weight: 600; cursor: pointer; list-style: none; } .ak-essay__notes summary::-webkit-details-marker { display: none; } .ak-essay__notes summary .ic { width: 18px; height: 18px; transition: transform .4s var(--ak-ease); } .ak-essay__notes[open] summary .ic { transform: rotate(45deg); } .ak-essay__notes .prose { padding-bottom: 20px; color: var(--ak-ink-2); } /* walk around */ .ak-walksec { border-top: 1px solid var(--ak-rule); } .ak-walksec__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; margin-bottom: clamp(24px, 3vw, 44px); } .ak-walkstage { position: relative; width: min(100%, 1180px, 118vh); margin-inline: auto; } .ak-walk { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ak-well); cursor: grab; touch-action: pan-y; user-select: none; outline-offset: 4px; } .ak-walk:active { cursor: grabbing; } .ak-walk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: 0; transition: opacity .18s linear; pointer-events: none; } .ak-walk img.is-on { opacity: 1; } .ak-walk__hint { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; background: var(--ak-ink); color: var(--ak-paper); font-size: 14px; font-weight: 550; white-space: nowrap; pointer-events: none; transition: opacity .5s, translate .5s var(--ak-ease); } .ak-walk__hint .ic { width: 16px; height: 16px; } .ak-m .ak-walk__hint .ic:first-child { animation: akHintL 2s var(--ak-ease) infinite; } .ak-m .ak-walk__hint .ic:last-child { animation: akHintR 2s var(--ak-ease) infinite; } @keyframes akHintL { 50% { translate: -4px 0; } } @keyframes akHintR { 50% { translate: 4px 0; } } .ak-walk__hint.is-gone { opacity: 0; translate: -50% 10px; } .ak-walk__floor { display: none; } .ak-walk__arr { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; border: 1px solid var(--ak-rule-2); border-radius: 50%; background: rgba(246, 246, 244, .9); color: var(--ak-ink); cursor: pointer; transition: opacity .25s, background-color .2s, color .2s; } .ak-walk__arr--l { left: 14px; } .ak-walk__arr--r { right: 14px; } .ak-walk__arr .ic { width: 20px; height: 20px; } .ak-walk__arr:hover { background: var(--ak-ink); color: var(--ak-paper); } @media (hover: hover) and (pointer: fine) { .ak-walk__arr { opacity: 0; } .ak-walk:hover .ak-walk__arr, .ak-walk__arr:focus-visible { opacity: 1; } } .ak-walk__ctl { display: flex; align-items: center; gap: 22px 28px; margin-top: 16px; } .ak-walk__where { flex: none; display: flex; align-items: center; gap: 14px; min-width: 200px; } .ak-walk__map { flex: none; width: 70px; height: 70px; overflow: visible; } .ak-walk__car { fill: rgba(11, 11, 11, .05); stroke: var(--ak-ink-3); stroke-width: 1.2; } .ak-walk__glass { fill: rgba(11, 11, 11, .14); } .ak-walk__dot { fill: var(--ak-paper); stroke: var(--ak-ink-3); stroke-width: 1.2; transition: fill .25s, stroke .25s; } .ak-walk__dot.is-on { fill: var(--ak-ink); stroke: var(--ak-ink); } .ak-walk__cone { transform-origin: 50px 50px; transform-box: view-box; transition: transform .45s var(--ak-ease); } .ak-walk__cone path { fill: rgba(11, 11, 11, .1); } .ak-walk__at { display: grid; gap: 3px; margin: 0; line-height: 1.2; } .ak-walk__at b { font-size: 1.05rem; font-weight: 600; } .ak-walk__at span { font-size: 13px; color: var(--ak-ink-3); font-variant-numeric: tabular-nums; } .ak-walk__thumbs { flex: 1 1 auto; min-width: 0; display: flex; gap: 10px; justify-content: flex-end; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: -4px; } .ak-walk__thumbs::-webkit-scrollbar { display: none; } .ak-walk__th { flex: 0 1 104px; min-width: 76px; display: grid; gap: 6px; padding: 0; border: 0; background: none; color: var(--ak-ink-3); font-size: 12.5px; text-align: left; cursor: pointer; } .ak-walk__th img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: .55; transition: opacity .2s, outline-offset .2s; outline: 1px solid transparent; } .ak-walk__th span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ak-walk__th[aria-selected="true"] { color: var(--ak-ink); } .ak-walk__th[aria-selected="true"] img { opacity: 1; outline: 1px solid var(--ak-ink); outline-offset: 2px; } /* the figures + the floor's scale */ .ak-spec { border-top: 1px solid var(--ak-rule); } .ak-spec__head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 60px; align-items: end; padding-bottom: clamp(36px, 5vw, 64px); } .ak-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 20px; } .ak-figs__i { display: grid; gap: 8px; padding-left: 16px; border-left: 1px solid var(--ak-ink); } .ak-figs__i dt { font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ak-ink-3); } .ak-figs__i dd { margin: 0; font-size: clamp(2.2rem, 1.4rem + 2vw, 3.6rem); } .ak-scales { display: grid; gap: 4px; padding-block: 8px clamp(40px, 5vw, 70px); } .ak-scales__h { padding-bottom: 12px; border-bottom: 1px solid var(--ak-ink); color: var(--ak-ink); } .ak-scales__row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 260px; grid-template-areas: "k bar v" ". ends ."; align-items: center; column-gap: 28px; padding: 18px 0 10px; border-bottom: 1px solid var(--ak-rule); } .ak-scales__k { grid-area: k; font-weight: 600; } .ak-scales__bar { grid-area: bar; position: relative; height: 34px; } .ak-scales__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ak-rule-2); } .ak-scales__bar i { position: absolute; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: var(--ak-ink-4); } .ak-scales__bar b { position: absolute; top: 50%; left: calc(var(--pos) * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--ak-ink); box-shadow: 0 0 0 5px var(--ak-paper); } .ak-scales__bar b::after { content: ""; position: absolute; left: 50%; bottom: 12px; width: 1px; height: 14px; background: var(--ak-ink); } .ak-m [data-scales]:not(.is-in) .ak-scales__bar b { left: 0; opacity: 0; } .ak-m [data-scales] .ak-scales__bar b { transition: left 1.6s var(--ak-ease) var(--d), opacity .4s var(--d); } .ak-m [data-scales]:not(.is-in) .ak-scales__bar i { transform: scaleY(0); } .ak-m [data-scales] .ak-scales__bar i { transition: transform .6s var(--ak-ease) var(--d); } .ak-scales__v { grid-area: v; display: grid; gap: 2px; } .ak-scales__v strong { font-family: var(--ak-display); font-weight: 400; font-size: 1.7rem; line-height: 1; } .ak-scales__v small { font-size: 13px; color: var(--ak-ink-3); } .ak-scales__v span { font-size: 13px; color: var(--ak-ink-3); } .ak-scales__ends { grid-area: ends; display: flex; justify-content: space-between; font-size: 12px; color: var(--ak-ink-3); font-variant-numeric: tabular-nums; } .ak-spec__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(28px, 4vw, 60px); } .ak-spec__sec { display: grid; gap: 12px; align-content: start; } .ak-spec__sec .ak-label { padding-bottom: 10px; border-bottom: 1px solid var(--ak-ink); color: var(--ak-ink); } .ak-spec__dl div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--ak-rule); font-size: 15px; } .ak-spec__dl dt { color: var(--ak-ink-3); } .ak-spec__dl dd { margin: 0; text-align: right; font-weight: 550; } .ak-spec__extras { margin-top: clamp(30px, 4vw, 50px); } .ak-spec__extras .ak-label { padding-bottom: 10px; border-bottom: 1px solid var(--ak-ink); color: var(--ak-ink); } .ak-spec__extras ul { columns: 3 240px; column-gap: 40px; padding-top: 12px; } .ak-spec__extras li { break-inside: avoid; display: flex; gap: 10px; padding: 6px 0; font-size: 15px; } .ak-spec__extras li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: .6em; border-radius: 50%; background: var(--ak-ink); } /* plates */ .ak-gal { border-top: 1px solid var(--ak-rule); } .ak-gal__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; margin-bottom: clamp(24px, 3vw, 44px); } .ak-gal__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .ak-gal__i { position: relative; display: block; aspect-ratio: 4 / 3; padding: 0; border: 0; background: var(--ak-well); overflow: hidden; cursor: zoom-in; } .ak-gal__i img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ak-ease); } .ak-gal__i:hover img { transform: scale(1.04); } .ak-gal__n { position: absolute; left: 8px; bottom: 8px; padding: 3px 7px; background: rgba(246, 246, 244, .92); font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; } .ak-gal__i:first-child { grid-column: span 2; grid-row: span 2; } /* finance (black) */ .ak-fin__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(30px, 6vw, 110px); align-items: start; } .ak-fin__intro { display: grid; gap: 22px; justify-items: start; } .ak-fin .ak-h2 { color: var(--ak-on-black); } .ak-site .ak-calc2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 0; background: none; } .ak-calc2__ctl { display: grid; gap: 22px; align-content: start; } .ak-ink .rng > span { font-weight: 550; font-size: 15px; color: var(--ak-on-black); } .ak-ink .rng output { font-weight: 650; } .ak-ink input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; } .ak-ink input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--ak-edge); } .ak-ink input[type=range]::-moz-range-track { height: 1px; background: var(--ak-edge); } .ak-ink input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8.5px; border-radius: 50%; background: var(--ak-paper); } .ak-ink input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--ak-paper); } .ak-calc2__out { display: grid; gap: 14px; align-content: start; padding-left: 28px; border-left: 1px solid var(--ak-edge); } .ak-calc2__pm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .ak-calc2__pm small { white-space: nowrap; } .ak-calc2__pm span { font-family: var(--ak-display); font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4.2rem); line-height: .95; letter-spacing: -.03em; } .ak-calc2__pm small { font-size: 14px; color: var(--ak-on-black-2); } .ak-calc2__sum div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--ak-edge); font-size: 14.5px; } .ak-calc2__sum dt { color: var(--ak-on-black-2); } .ak-calc2__sum dd { margin: 0; font-variant-numeric: tabular-nums; } .ak-calc2__fine { font-size: 12.5px; color: var(--ak-on-black-2); } /* private viewing */ .ak-viewing__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 110px); align-items: start; } .ak-viewing__txt { display: grid; gap: 22px; align-content: start; } /* next lot */ .ak-next { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(24px, 4vw, 70px); padding: clamp(60px, 8vw, 120px) var(--ak-gut); background: var(--ak-sheet); border-block: 1px solid var(--ak-rule); text-decoration: none; overflow: hidden; } .ak-next__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; } .ak-next__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ak-ease); } .ak-next:hover .ak-next__img img { transform: scale(1.04); } .ak-next__txt { display: grid; gap: 14px; } .ak-next__t { font-family: var(--ak-display); font-size: clamp(2.4rem, 1.4rem + 3vw, 5rem); line-height: 1; letter-spacing: -.025em; text-wrap: balance; } .ak-next__p { display: inline-flex; align-items: center; gap: 12px; font-weight: 650; font-size: 1.15rem; } .ak-next__p .ic { width: 22px; height: 22px; transition: transform .5s var(--ak-ease); } .ak-next:hover .ak-next__p .ic { transform: translateX(8px); } /* also on the floor */ .ak-row__head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: clamp(24px, 3vw, 44px); } .ak-row__head .ak-link { white-space: nowrap; flex: none; } .ak-row__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, calc((100% - 3 * var(--ak-col-gap)) / 4)); gap: var(--ak-col-gap); overflow-x: auto; padding-inline: var(--ak-gut); scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--ak-gut); } .ak-row__track::-webkit-scrollbar { display: none; } .ak-row__track > * { scroll-snap-align: start; } /* phone buy bar on a lot */ .ak-mbar { display: none; } /* lightbox */ .ak-site .lightbox { background: var(--ak-paper); } .ak-site .lightbox::backdrop { background: var(--ak-paper); } .ak-site .lightbox img { object-fit: contain; } /* ===================================================================================== THE COLLECTION (cars index) + inner page heads ===================================================================================== */ .ak-phead2 { position: relative; padding: clamp(36px, 5vw, 80px) 0 clamp(30px, 4vw, 56px); border-bottom: 1px solid var(--ak-ink); } .ak-phead2__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 60px; align-items: end; margin-top: 18px; } .ak-phead2__t { max-width: 14ch; } .ak-phead2 .ak-lede { margin-top: 18px; } .ak-phead2__count { display: flex; align-items: flex-end; gap: 12px; margin: 0; } .ak-phead2__n { font-family: var(--ak-display); font-size: clamp(5rem, 3rem + 7vw, 11rem); line-height: .78; letter-spacing: -.04em; } .ak-phead2__l { display: grid; font-size: 15px; font-weight: 600; line-height: 1.2; padding-bottom: 6px; } .ak-phead2__l small { font-size: 13px; font-weight: 500; color: var(--ak-ink-3); } .ak-phead2__chips { margin-top: 26px; } .ak-phead2__aside { margin: 0; } .ak-showroom2 { padding-block: clamp(26px, 3vw, 44px) var(--ak-sec); } .ak-site .showroom { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; } .ak-site .filters { position: sticky; top: calc(var(--ak-head) + 16px); max-height: calc(100svh - var(--ak-head) - 32px); overflow-y: auto; scrollbar-width: thin; } .ak-site .filters__f { display: grid; gap: 18px; padding: 0 4px 20px 0; background: none; } .ak-site .filters__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--ak-ink); } .ak-site .filters__t { font-weight: 650; } .ak-site .fgroup__t { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ak-ink-3); } .ak-site .filters select, .ak-site .fsearch input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--ak-rule-2); border-radius: 0; background-color: var(--ak-sheet); font-size: 15px; } .ak-site .fsearch { position: relative; } .ak-site .fsearch .ic { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; color: var(--ak-ink-3); } .ak-site .fsearch input { padding-left: 38px; } .ak-site .tchips { display: flex; flex-wrap: wrap; gap: 6px; } .ak-site .tchip input { position: absolute; opacity: 0; pointer-events: none; } .ak-site .tchip span { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--ak-rule-2); border-radius: 30px; font-size: 14px; cursor: pointer; transition: background-color .2s, color .2s; } .ak-site .tchip span::before { display: none; } .ak-site .tchip em { font-style: normal; font-size: 12px; color: var(--ak-ink-3); } .ak-site .tchip input:checked + span { background: var(--ak-ink); color: var(--ak-paper); border-color: var(--ak-ink); } .ak-site .tchip input:checked + span em { color: var(--ak-on-black-2); } .ak-site .seg__o span::before { display: none; } .ak-site .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--ak-rule); } .ak-site .toolbar__sort { margin-left: auto; display: flex; align-items: center; gap: 10px; } .ak-site .toolbar__sort label { font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ak-ink-3); } .ak-site .toolbar__sort select { min-height: 42px; padding: 0 34px 0 12px; border: 1px solid var(--ak-rule-2); border-radius: 0; background-color: var(--ak-sheet); font-size: 14.5px; } .ak-site .ak-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) var(--ak-col-gap); } .ak-site .more { display: grid; justify-items: center; gap: 14px; margin-top: 40px; } .ak-site .more__n { font-size: 14px; color: var(--ak-ink-3); } .ak-tradein { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 50px; padding: 26px 28px; background: var(--ak-black); color: var(--ak-on-black); } .ak-tradein .ak-h3 { font-family: var(--ak-display); font-weight: 400; font-size: 1.9rem; } .ak-tradein p { color: var(--ak-on-black-2); } .ak-tradein .ak-btn { --b: var(--ak-ink); background: var(--ak-paper); color: var(--ak-ink); border-color: var(--ak-paper); } .ak-site .empty { display: grid; gap: 12px; justify-items: start; padding: 40px 0; } .ak-site .showroom__fine { margin-top: 18px; font-size: 12.5px; color: var(--ak-ink-3); } /* inner pages */ .ak-phead2__strips { display: none; } .ak-site .formcard { box-shadow: none; border: 1px solid var(--ak-rule-2); background: var(--ak-sheet); } .ak-site .formcard__t { font-family: var(--ak-display); font-weight: 400; letter-spacing: -.015em; } .ak-contact2__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 90px); align-items: start; } .ak-contact2__info { display: grid; gap: 22px; align-content: start; } .ak-contact2__tel { font-family: var(--ak-display); font-size: clamp(2.6rem, 1.6rem + 3vw, 4.6rem); line-height: 1; letter-spacing: -.03em; } .ak-contact2__tel a { text-decoration: none; } .ak-contact2__dl { display: grid; gap: 16px; } .ak-contact2__dl dd { margin: 4px 0 0; font-size: 1.15rem; } .ak-contact2__map { aspect-ratio: 21 / 8; margin-top: clamp(40px, 5vw, 70px); } .ak-about2__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 110px); align-items: start; } .ak-about2__txt { display: grid; gap: 22px; } .ak-about2__txt > p:not(.ak-about2__big) { max-width: 60ch; color: var(--ak-ink-2); } .ak-about2__big { font-family: var(--ak-display); font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.5rem); line-height: 1.08; letter-spacing: -.02em; } .ak-about2__photos { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--ak-col-gap); align-items: end; } .ak-about2__photos figure { margin: 0; overflow: hidden; background: var(--ak-well); } .ak-about2__photos figure:first-child { aspect-ratio: 3 / 4; } .ak-about2__photos figure:last-child { aspect-ratio: 3 / 4; transform: translateY(14%); } .ak-about2__photos img { width: 100%; height: 100%; object-fit: cover; } .ak-promises__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(30px, 4vw, 60px); border-top: 1px solid var(--ak-edge); } .ak-promises__list li { display: grid; gap: 10px; align-content: start; padding: 24px 24px 10px 0; } .ak-promises__list li + li { padding-left: 24px; border-left: 1px solid var(--ak-edge); } .ak-promises__list b { font-family: var(--ak-display); font-weight: 400; font-size: 2.6rem; line-height: 1; } .ak-promises__list strong { font-size: 1.1rem; font-weight: 600; } .ak-promises__list span { color: var(--ak-on-black-2); font-size: 15px; } .ak-promises .ak-h2 { color: var(--ak-on-black); } .ak-makes__list { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: clamp(26px, 3vw, 44px); } .ak-makes__list a { display: inline-flex; align-items: baseline; gap: 4px; text-decoration: none; color: var(--ak-ink-4); transition: color .3s; } .ak-makes__list a:hover { color: var(--ak-ink); } .ak-makes__t { font-family: var(--ak-display); font-size: clamp(2rem, 1.2rem + 2.4vw, 3.6rem); line-height: 1.1; letter-spacing: -.02em; } .ak-makes__list sup { font-size: 13px; font-weight: 650; color: var(--ak-ink-3); } .ak-talk__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 60px; } .ak-sec--page { padding-top: 0; } @media (max-width: 900px) { .ak-contact2__grid, .ak-about2__grid, .ak-talk__grid { grid-template-columns: minmax(0, 1fr); } .ak-promises__list { grid-template-columns: minmax(0, 1fr); } .ak-promises__list li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--ak-edge); } .ak-contact2__map { aspect-ratio: 4 / 3; } } /* sideways row pinned by GSAP on wide screens */ .ak-newest.is-pinned .ak-newest__track { overflow: visible; scroll-snap-type: none; } .ak-newest.is-pinned .ak-newest__pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--ak-head) + 10px) 28px; } .ak-newest.is-pinned { padding-block: 0; } /* page transitions: the next page opens through the slit */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } .ak-bar { view-transition-name: ak-bar; } ::view-transition-old(root) { animation: akVtOut .7s var(--ak-ease-io) both; } ::view-transition-new(root) { animation: akVtIn .9s var(--ak-ease-io) both; } @keyframes akVtOut { to { opacity: .4; scale: .985; } } @keyframes akVtIn { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } } } .ak-leave { position: fixed; left: 50%; top: 0; bottom: 0; z-index: 500; width: 1px; background: var(--ak-ink); transform: scaleY(0); pointer-events: none; transition: transform .6s var(--ak-ease); } .ak-leave.is-on { transform: scaleY(1); } /* ===================================================================================== RESPONSIVE ===================================================================================== */ @media (max-width: 1180px) { .ak-bar__nav, .ak-bar__tel { display: none; } .ak-bar__in { grid-template-columns: auto minmax(0, 1fr) auto; } } @media (max-width: 1100px) { .ak-newest__head, .ak-films__head, .ak-contents__head { grid-template-columns: minmax(0, 1fr); } .ak-contents__grid { grid-template-columns: minmax(0, 1fr); } .ak-contents__plate { display: none; } .ak-contents__th { display: block; grid-row: 1 / 3; width: 76px; height: 57px; object-fit: cover; margin-right: 4px; align-self: center; } .ak-contents__row { grid-template-columns: auto minmax(0, auto) minmax(18px, 1fr) auto; grid-template-areas: "th mk dots n" "th mk dots span"; } .ak-contents__th { grid-area: th; } .ak-foot__grid { grid-template-columns: 1fr 1fr; } .ak-upclose__card { top: auto; bottom: 78px; left: var(--ak-gut); right: var(--ak-gut); width: auto; translate: none; padding: 16px 18px; gap: 6px; } .ak-upclose__loupe { display: none; } .ak-upclose__no .ak-box { font-size: 2rem; } .ak-upclose__ct { font-size: 1.35rem; } .ak-upclose__card p { font-size: 14px; } .ak-upclose__stops em { display: none; } .ak-upclose__head { right: var(--ak-gut); max-width: none; padding: 12px 16px 14px; } .ak-upclose__t { font-size: clamp(1.25rem, 5vw, 1.7rem); } .ak-upclose__sub { font-size: 13px; margin-top: 6px; } .ak-upclose__shade { background: radial-gradient(circle at 50% 33%, rgba(246, 246, 244, 0) 0 16%, rgba(246, 246, 244, .55) 46%, rgba(246, 246, 244, .92) 100%); } } @media (max-width: 900px) { :root { --ak-head: 60px; } .ak-bar__book, .ak-bar__garage { display: none; } .ak-bar__call { display: inline-grid; } .ak-bar__mt { display: none; } .ak-bar__logo, .ak-menu__logo { width: 100px; } .ak-menu__body { grid-template-columns: minmax(0, 1fr); } .ak-menu__prev { display: none; } .ak-menu__foot { grid-template-columns: 1fr 1fr; } /* cover on phones: photo on top, the lot under it */ .ak-cover.is-live .ak-cover__track { height: calc(100svh + (var(--n) - 1) * 62svh); } .ak-cover.is-live .ak-cover__pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; } .ak-cover.is-live .ak-cover__plates { grid-column: 1; grid-row: 1; height: auto; aspect-ratio: 4 / 3; max-height: 44svh; } .ak-cover.is-live .ak-cover__plate img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%); mask-image: linear-gradient(180deg, transparent 0, #000 14%); } .ak-cover.is-live .ak-cover__lots { grid-row: 2; } .ak-cover.is-live .ak-cover__lot { justify-content: flex-start; padding: 6px var(--ak-gut) 0; gap: 8px; } .ak-cover__no b { font-size: clamp(4.4rem, 22vw, 7rem); } .ak-cover.is-live .ak-cover__lot { top: 0; } .ak-cover__t { font-size: clamp(1.9rem, 8.4vw, 2.6rem); } .ak-cover__lines { display: none; } .ak-cover.is-live .ak-cover__rail { grid-row: 3; padding-bottom: calc(76px + env(safe-area-inset-bottom)); } .ak-cover__meta { display: none; } .ak-cover__steps { width: 100%; } .ak-cover__steps li { flex: 1; min-width: 0; } .ak-cover__steps button { width: 100%; } .ak-cover__sname { display: none; } .ak-cover__acts .ak-btn { flex: 1 1 auto; } .ak-deal__grid, .ak-sell__grid, .ak-family__grid, .ak-visit__grid, .ak-words__grid { grid-template-columns: minmax(0, 1fr); } .ak-films__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; width: auto; padding-inline: var(--ak-gut); gap: 12px; } .ak-films__row::-webkit-scrollbar { display: none; } .ak-films__f { flex: 0 0 68vw; scroll-snap-align: center; margin: 0 !important; } .ak-foot__cta { grid-template-columns: minmax(0, 1fr); } .ak-foot__credit { margin-left: 0; } .ak-family__img { aspect-ratio: 4 / 3; } .ak-visit__media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ak-qbar { position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 95; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--ak-ink); color: var(--ak-paper); box-shadow: 0 16px 40px -14px rgba(11, 11, 11, .6); transition: transform .5s var(--ak-ease), opacity .3s; } .ak-qbar a, .ak-qbar button { display: grid; justify-items: center; gap: 2px; padding: 9px 4px 8px; border: 0; background: none; color: inherit; font-size: 11.5px; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent; } .ak-qbar .ic { width: 20px; height: 20px; } .ak-qbar .qbar__red { background: var(--ak-paper); color: var(--ak-ink); } .ak-qbar.is-away { transform: translateY(140%); } .ak-foot { padding-bottom: 76px; } .wafab-wrap { display: none; } } @media (max-width: 600px) { .ak-foot__grid { grid-template-columns: minmax(0, 1fr); } .ak-menu__foot { grid-template-columns: minmax(0, 1fr); } .ak-statement__pin { min-height: 74svh; } .ak-deal__list { min-height: 0; } .ak-bline { grid-template-columns: 72px minmax(0, 1fr); } .ak-bline img { width: 72px; height: 54px; } .ak-bline__pm { grid-column: 2; } } /* ===================================================================================== ENGINE SKIN: forms, controls, steps, FAQs, the finance page (catalogue language: square, hairline, ink) ===================================================================================== */ /* buttons the engine prints (.btn) look like the theme's own */ .ak-site .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 50px; padding: 0 1.3rem; border: 1px solid var(--ak-ink); background: var(--ak-ink); color: var(--ak-paper); font: 600 15.5px/1 var(--ak-text); text-decoration: none; cursor: pointer; transition: background-color .3s, color .3s; } .ak-site .btn::before { display: none; } .ak-site .btn > span:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: currentColor; vertical-align: .16em; } .ak-site .btn--line { background: transparent; color: var(--ak-ink); border-color: var(--ak-rule-2); } .ak-site .btn--white { background: var(--ak-paper); color: var(--ak-ink); border-color: var(--ak-paper); } .ak-site .btn--block { display: flex; width: 100%; } .ak-site .btn--sm { min-height: 42px; font-size: 14.5px; } @media (hover: hover) { .ak-site .btn:hover { background: var(--ak-paper); color: var(--ak-ink); } .ak-site .btn--line:hover, .ak-site .btn--white:hover { background: var(--ak-ink); color: var(--ak-paper); border-color: var(--ak-ink); } } .ak-site .link { font: 600 15px/1.3 var(--ak-text); color: var(--ak-ink); } .ak-site .link span { text-decoration-thickness: 1px; } .ak-site .link--light { color: var(--ak-paper); } /* inputs */ .ak-site .fld label, .ak-site .seg legend, .ak-site .checks legend, .ak-site .slots legend { font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ak-ink-3); } .ak-site .fld input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), .ak-site .fld select, .ak-site .fld textarea, .ak-site .calc__priceIn { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--ak-rule-2); border-radius: 0; background-color: var(--ak-sheet); color: var(--ak-ink); font-size: 16px; transition: border-color .2s, box-shadow .2s; } .ak-site .fld textarea { min-height: 110px; resize: vertical; } .ak-site .fld input:focus, .ak-site .fld select:focus, .ak-site .fld textarea:focus { outline: none; border-color: var(--ak-ink); box-shadow: 0 0 0 1px var(--ak-ink); } .ak-site select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230b0b0b' stroke-width='1.4'/%3E%3C/svg%3E"); } .ak-site select.ak-select, .ak-site .fld select, .ak-site .filters select, .ak-site .toolbar__sort select { background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; padding-right: 38px; } .ak-site input::placeholder, .ak-site textarea::placeholder { color: var(--ak-ink-4); } /* checkboxes: a square that fills with ink and a paper tick */ .ak-site input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 1px 0 0; flex: none; border: 1px solid var(--ak-ink-3); border-radius: 0; background: var(--ak-sheet); display: inline-grid; place-content: center; cursor: pointer; transition: background-color .2s, border-color .2s; } .ak-site input[type=checkbox]::after { content: ""; width: 10px; height: 6px; border: solid var(--ak-paper); border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); margin-top: -3px; transition: transform .25s var(--ak-ease); } .ak-site input[type=checkbox]:checked { background: var(--ak-ink); border-color: var(--ak-ink); } .ak-site input[type=checkbox]:checked::after { transform: rotate(-45deg) scale(1); } .ak-site .check, .ak-site .consent { font-size: 14.5px; color: var(--ak-ink-2); } /* choice tags (contact preference, gearbox, sell/trade): square, ink when on */ .ak-site .seg__o span, .ak-site .slot span, .ak-site .tchip span { border: 1px solid var(--ak-rule-2); border-radius: 0; background: var(--ak-sheet); color: var(--ak-ink); font-weight: 550; transition: background-color .2s, color .2s, border-color .2s; } .ak-site .seg__o span::before, .ak-site .slot span::before, .ak-site .tchip span::before { display: none; } .ak-site .seg__o input:checked + span, .ak-site .slot input:checked + span, .ak-site .tchip input:checked + span { background: var(--ak-ink); color: var(--ak-paper); border-color: var(--ak-ink); } .ak-site .slot input:checked + span small { color: var(--ak-on-black-2); } .ak-site .seg__o span { min-height: 42px; padding: 0 16px; } .ak-site .slots__days { padding: 2px 2px 8px; margin-inline: -2px; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); } .ak-site .slot { scroll-snap-align: start; } .ak-site .chip, .ak-site .ak-chip { border-radius: 0; } .ak-site .ak-seg, .ak-site .ak-seg button { border-radius: 0; } .ak-site .tabs__b { position: relative; padding: 10px 2px; margin-right: 18px; border: 0; background: none; font-size: 15px; font-weight: 600; color: var(--ak-ink-3); } .ak-site .tabs__b::before { display: none; } .ak-site .tabs__b::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ak-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ak-ease); } .ak-site .tabs__b[aria-selected='true'] { color: var(--ak-ink); } .ak-site .tabs__b[aria-selected='true']::after { transform: scaleX(1); } .ak-site .tabs { gap: 0; padding: 0; margin: 0 0 20px; border-bottom: 1px solid var(--ak-rule); } /* the 360° filter: a square switch */ .ak-site .switch__k { border-radius: 0; background: var(--ak-well); border: 1px solid var(--ak-rule-2); } .ak-site .switch__k::after { border-radius: 0; top: 3px; left: 3px; background: var(--ak-ink-3); } .ak-site .switch input:checked + .switch__k::after { background: var(--ak-paper); } /* range sliders on paper (the price filter, the finance page) */ .ak-site .rng input[type=range], .ak-site .dual input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; } .ak-site .rng input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--ak-rule-2); } .ak-site .rng input[type=range]::-moz-range-track { height: 1px; background: var(--ak-rule-2); } .ak-site .rng input[type=range]::-webkit-slider-thumb, .ak-site .dual input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8.5px; border: 0; border-radius: 50%; background: var(--ak-ink); } .ak-site .rng input[type=range]::-moz-range-thumb, .ak-site .dual input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--ak-ink); } .ak-site .dual::before { height: 1px; top: 14px; background: var(--ak-rule-2); } .ak-site .dual__fill { height: 1px; top: 14px; } .ak-site .dual input[type=range]::-webkit-slider-thumb { margin-top: 0; } .ak-site .rng > span { font-weight: 550; font-size: 15px; } .ak-site .rng output { font-weight: 650; } /* section frames the engine prints */ .ak-site .sec { position: relative; padding-block: clamp(56px, 7vw, 110px); } .ak-site .sec--paper { background: var(--ak-paper); border-top: 1px solid var(--ak-rule); } .ak-site .shead { display: block; margin-bottom: clamp(22px, 3vw, 40px); } .ak-site .shead__t { font-family: var(--ak-display); font-weight: 400; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.6rem); line-height: 1.02; letter-spacing: -.02em; } .ak-site .formblock__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 100px); } .ak-site .formblock__h { margin: 32px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ak-ink); font-family: var(--ak-text); font-size: 12.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; } .ak-site .numsteps { counter-reset: none; gap: 0; } .ak-site .numsteps li { padding: 18px 0; border-top: 1px solid var(--ak-rule); } .ak-site .numsteps .roundel { display: block; width: auto !important; height: auto !important; margin: 0 0 8px !important; background: none; color: var(--ak-ink); font-family: var(--ak-display); font-weight: 400; font-size: 2.6rem !important; line-height: 1; border-radius: 0; } .ak-site .numsteps h3 { margin-top: 0; font-family: var(--ak-text); font-weight: 600; font-size: 1.15rem; } .ak-site .numsteps p { color: var(--ak-ink-3); margin-top: 4px; } .ak-site .numsteps--compact li { grid-template-columns: 60px minmax(0, 1fr); align-items: baseline; } .ak-site .numsteps--compact .roundel { grid-row: 1 / 3; font-size: 2rem !important; } @media (min-width: 861px) { .ak-site .numsteps:not(.numsteps--compact) { gap: 0 var(--ak-col-gap); } } .ak-site .ticks li { padding-left: 20px; } .ak-site .ticks li::before { width: 6px; height: 6px; top: .62em; border-radius: 50%; transform: none; } .ak-site .faq { border-bottom: 1px solid var(--ak-rule); } .ak-site .faq summary { min-height: 54px; align-items: center; font-weight: 600; } .ak-site .faq summary::after { content: ""; width: 12px; height: 12px; background: linear-gradient(var(--ak-ink), var(--ak-ink)) 50% / 100% 1.5px no-repeat, linear-gradient(var(--ak-ink), var(--ak-ink)) 50% / 1.5px 100% no-repeat; transition: transform .4s var(--ak-ease); } .ak-site .faq[open] summary::after { transform: rotate(45deg); } .ak-site .fine { font-size: 13px; color: var(--ak-ink-3); } .ak-site .banks li { border-color: var(--ak-rule-2); font-weight: 550; } /* the finance page: the calculator on a black band */ .ak-site .sec.finance { background: var(--ak-black); color: var(--ak-on-black); } .ak-site .calc--page .calc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); } .ak-site .calc--page .calc__ctl { display: grid; gap: 22px; align-content: start; } .ak-site .calc--page .calc__out { display: grid; gap: 14px; align-content: start; padding: 0 0 0 clamp(20px, 3vw, 44px); background: none; border-left: 1px solid var(--ak-edge); color: var(--ak-on-black); transform: none; clip-path: none; } .ak-site .calc__priceL { display: grid; gap: 8px; font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ak-on-black-2); } .ak-site .calc__priceIn { display: flex; align-items: baseline; gap: 8px; padding: 0 0 6px; border: 0; border-bottom: 1px solid var(--ak-edge); background: none; color: var(--ak-on-black); font-family: var(--ak-display); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); text-transform: none; letter-spacing: -.02em; } .ak-site .calc__priceIn input { width: 100%; min-width: 0; border: 0; background: none; color: inherit; font: inherit; outline: none; } .ak-site .finance .rng > span { color: var(--ak-on-black); } .ak-site .finance .rng input[type=range]::-webkit-slider-runnable-track { background: var(--ak-edge); } .ak-site .finance .rng input[type=range]::-moz-range-track { background: var(--ak-edge); } .ak-site .finance .rng input[type=range]::-webkit-slider-thumb { background: var(--ak-paper); } .ak-site .finance .rng input[type=range]::-moz-range-thumb { background: var(--ak-paper); } .ak-site .calc__pm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .ak-site .calc__pm span { font-family: var(--ak-display); font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4.4rem); line-height: .95; letter-spacing: -.03em; white-space: nowrap; } .ak-site .calc__pm small { font-size: 14px; color: var(--ak-on-black-2); } .ak-site .calc__sum div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--ak-edge); font-size: 14.5px; } .ak-site .calc__sum dt { color: var(--ak-on-black-2); } .ak-site .calc__sum dd { margin: 0; } .ak-site .finance .fine { color: var(--ak-on-black-2); } /* empty states (garage, compare, sold) */ .ak-site .empty .ak-h3, .ak-site .empty h2, .ak-site .empty h3 { font-family: var(--ak-display); font-weight: 400; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); letter-spacing: -.015em; color: var(--ak-ink); } .ak-site .empty { padding-block: clamp(40px, 6vw, 90px); } @media (max-width: 900px) { .ak-site .formblock__grid, .ak-site .calc--page .calc__grid { grid-template-columns: minmax(0, 1fr); } .ak-site .calc--page .calc__out { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--ak-edge); } } /* lot page + collection on smaller screens */ @media (max-width: 1100px) { .ak-site .showroom { grid-template-columns: minmax(0, 1fr); } .ak-site .ak-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ak-scales__row { grid-template-columns: 120px minmax(0, 1fr) 200px; column-gap: 18px; } .ak-spec__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ak-carnav__name { display: none; } } @media (max-width: 900px) { .ak-lotc { grid-template-columns: minmax(0, 1fr); min-height: 0; } .ak-lotc__stage { order: -1; } .ak-lotc__track { max-height: none; } .ak-lotc__in { padding: 18px var(--ak-gut) 30px; } .ak-lotc__ui { bottom: 92px; right: 10px; } .ak-lotc__ui .ak-ib--line:not([data-stage-full]) { display: none; } .ak-site .ak-lotc__thumbs .stage__thumb { width: 72px; } .ak-carnav { top: var(--ak-head); } .ak-carnav__buy { display: none; } .ak-essay__grid, .ak-fin__grid, .ak-viewing__grid, .ak-walksec__head, .ak-gal__head, .ak-spec__head { grid-template-columns: minmax(0, 1fr); } .ak-site .ak-calc2 { grid-template-columns: minmax(0, 1fr); } .ak-calc2__out { padding-left: 0; border-left: 0; padding-top: 22px; border-top: 1px solid var(--ak-edge); } .ak-scales__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "bar bar" "ends ends"; row-gap: 6px; } .ak-scales__v { text-align: right; } .ak-spec__grid { grid-template-columns: minmax(0, 1fr); } .ak-gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .ak-next { grid-template-columns: minmax(0, 1fr); padding-block: 50px; } .ak-row__track { grid-auto-columns: 78vw; } .ak-walk__ctl { flex-direction: column; align-items: stretch; } .ak-walk__thumbs { justify-content: flex-start; } .ak-mbar { position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 95; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; background: var(--ak-ink); color: var(--ak-paper); box-shadow: 0 16px 40px -14px rgba(11, 11, 11, .6); transition: transform .5s var(--ak-ease); } .ak-mbar .mbar__p { flex: 1; min-width: 0; display: grid; line-height: 1.2; } .ak-mbar .mbar__p b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ak-on-black-2); } .ak-mbar .price { font-size: 1.05rem; color: var(--ak-paper); } .ak-mbar .price small, .ak-mbar .price__was { display: none; } .ak-mbar__call { color: var(--ak-paper); } .ak-mbar .ak-btn { min-height: 42px; padding-inline: 14px; } .ak-mbar.is-away { transform: translateY(140%); } .single-ak_vehicle .ak-foot { padding-bottom: 80px; } .ak-site .ak-grid { grid-template-columns: minmax(0, 1fr); } .ak-phead2__row { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ak-site *, .ak-site *::before, .ak-site *::after { animation-duration: 0s !important; transition-duration: 0s !important; } } /* ---------- review round 1 additions ---------- */ .ak-site .crumbs li > a, .ak-site .crumbs li > span { display: inline-block; padding-block: 8px; vertical-align: baseline; } .ak-foot { padding-bottom: 0; } .ak-foot__legal { padding-bottom: max(28px, env(safe-area-inset-bottom)); } body.ak-site { background: var(--ak-black); } .ak-page { background: var(--ak-paper); } .ak-site .ask__btn { box-shadow: 0 0 0 1px rgba(246, 246, 244, .55), 0 12px 30px -10px rgba(11, 11, 11, .5); } /* the map placeholder: the building number, set like a lot */ .ak-visit__map { background: var(--ak-black); color: var(--ak-on-black-2); border: 0; overflow: hidden; } .ak-visit__map::before { content: "27"; position: absolute; left: 50%; top: 42%; translate: -50% -50%; font-family: var(--ak-display); font-size: clamp(7rem, 14vw, 13rem); line-height: 1; letter-spacing: -.04em; color: var(--ak-on-black); pointer-events: none; } .ak-visit__map::after { content: "Meridian Drive · Umhlanga New Town Centre"; position: absolute; left: 0; right: 0; top: 64%; text-align: center; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; } .ak-visit__map > .ak-btn { position: absolute; z-index: 1; left: 50%; bottom: clamp(16px, 6%, 32px); translate: -50% 0; } .ak-visit__map::after { top: auto; bottom: calc(clamp(16px, 6%, 32px) + 66px); } .ak-visit__map::before { top: 40%; } .ak-visit__map .ak-btn { --b: var(--ak-ink); background: var(--ak-paper); color: var(--ak-ink); border-color: var(--ak-paper); } .ak-visit__map p { display: none; } .ak-visit__map:has(iframe)::before, .ak-visit__map:has(iframe)::after { display: none; } /* 404 */ .ak-404 { padding-block: clamp(80px, 12vw, 180px); } @media (max-width: 900px) { .ak-contents__mk { font-size: clamp(1.5rem, 7.4vw, 2.2rem); } .ak-foot { padding-bottom: 0; } .ak-foot__legal { padding-bottom: calc(90px + env(safe-area-inset-bottom)); } .ak-lotc__track { height: auto; min-height: 0; } .ak-site .ak-lotc__slide { aspect-ratio: 4 / 3; height: auto; } } .ak-404__in { display: grid; gap: 22px; justify-items: start; max-width: 900px; } .ak-404__no { display: flex; align-items: baseline; gap: 10px; } .ak-404__no span { font-size: 13px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; } .ak-404__no b { font-family: var(--ak-display); font-weight: 400; font-size: clamp(5rem, 3rem + 8vw, 11rem); line-height: .8; letter-spacing: -.045em; } .ak-404__acts { display: flex; flex-wrap: wrap; gap: 8px; }