/* ===========================================================================
ARKVIZ / by Arkneeds - design layer
Arkviz 3D web sales application.
DESIGN INTENT
The hero is the architectural render, not the interface. So the chrome is
liquid glass: light, translucent, heavily blurred, letting the render read
straight through it. Ink is spent only where the eye needs an anchor -
selected states, the onboarding card - and Acid Lime appears once, on the
primary action. Nothing here should out-shout the building.
Palette and accent are the Arkneeds tokens shipped in the Arkviz 3D Tour
Studio rebrand; the material treatment differs because the content does
(bright exterior renders here, dark interior panoramas there).
Behaviour, geometry, sizing and hit targets are untouched. This layer
changes MATERIAL, COLOUR, TYPE and DEPTH only.
Cascade note: Vue route chunks inject their stylesheets at runtime, after
this file, so declarations here are !important by necessity.
========================================================================= */
:root {
/* --- brand ------------------------------------------------------------ */
--ark-ink: #0C0F0D;
--ark-paper: #FBFBF8;
--ark-paper-2: #F5F6F1;
--ark-bg: #F6F7F2;
--ark-tint: #E9E7DF;
--ark-concrete: #DCDCDB;
--ark-stone: #BDB5A9;
--ark-accent: #D0FF00;
--ark-accent-txt: #5E7A00;
--ark-accent-soft: rgba(94, 122, 0, .12); /* not lime: repeats per card - QA B7 */
--ark-ok: #91B43D;
--ark-warn: #EBA941;
--ark-danger: #EC5542;
/* Text ramp. Floored against the WORST case this material actually sees -
glass at its lowest alpha over a DARK render (~#C8C8C6), not against the
app background. The app ships a day/night control, so a dark scene behind
the glass is reachable. t-3 is the floor for any text: 4.62:1 worst case. */
--ark-t-1: rgba(12, 15, 13, .96);
--ark-t-2: rgba(12, 15, 13, .82);
--ark-t-3: rgba(12, 15, 13, .72);
/* --- liquid glass -----------------------------------------------------
Two materials only: light glass for chrome, ink glass for anchors.
The specular top edge is what makes it read as glass rather than
as a flat tint, so it is present on every glass surface. */
--ark-blur: saturate(180%) blur(28px);
--ark-blur-sm: saturate(170%) blur(18px);
--ark-glass: rgba(252, 252, 250, .78);
--ark-glass-strong: rgba(252, 252, 250, .92);
--ark-glass-quiet: rgba(252, 252, 250, .62);
--ark-glass-ink: rgba(12, 15, 13, .80);
--ark-line: rgba(12, 15, 13, .10);
--ark-line-2: rgba(12, 15, 13, .16);
--ark-specular: inset 0 1px 0 rgba(255, 255, 255, .72);
--ark-specular-ink: inset 0 1px 0 rgba(255, 255, 255, .10);
/* Depth is carried by the material, not by heavy drop shadows. */
--ark-e1: 0 1px 2px rgba(12,15,13,.05);
--ark-e2: 0 1px 3px rgba(12,15,13,.07), 0 8px 22px -10px rgba(12,15,13,.16);
--ark-e3: 0 2px 6px rgba(12,15,13,.10), 0 18px 40px -14px rgba(12,15,13,.26);
--ark-ease: cubic-bezier(.4, 0, .2, 1);
--ark-display: Newsreader, Georgia, "Times New Roman", serif;
--ark-sans: Geist, "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
--ark-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* --- 1. Type ------------------------------------------------------------- */
html, body, button, input, select, textarea, .sidebar, .filters {
font-family: var(--ark-sans) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html, body { background: var(--ark-bg) !important; color: var(--ark-t-1) !important; }
/* Numerals are data: mono and tabular so columns hold as values change. */
.label-value, .label-unit, .count-text, .count-badge,
.price-row, .price-column, .data .value, .list-item .value {
font-family: var(--ark-mono) !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -0.01em !important;
}
/* Section eyebrows: mono, uppercase, tracked out. */
.filters .title, .statuses > .title, .sliders .title, .info-title {
font-family: var(--ark-mono) !important;
font-size: 10.5px !important;
font-weight: 500 !important;
letter-spacing: 0.09em !important;
text-transform: uppercase !important;
color: var(--ark-t-3) !important;
}
/* --- 1b. Mobile entry screen (below 1024px) ------------------------------
The one editorial moment in the product: display serif, sentence case,
lime action. Wider viewports skip this and open the app directly. */
#mobile-starter-placeholder .title {
font-family: var(--ark-display) !important;
font-weight: 400 !important;
font-size: clamp(34px, 8vw, 52px) !important;
line-height: 1.05 !important;
letter-spacing: -0.02em !important;
text-transform: none !important;
color: var(--ark-paper) !important;
text-shadow: 0 2px 30px rgba(12,15,13,.5);
}
#mobile-starter-placeholder .button {
background: var(--ark-accent) !important;
color: var(--ark-ink) !important;
border: none !important;
border-radius: 999px !important;
box-shadow: 0 2px 8px rgba(12,15,13,.22), 0 16px 40px -12px rgba(12,15,13,.42) !important;
transition: scale .2s var(--ark-ease), translate .2s var(--ark-ease) !important;
}
#mobile-starter-placeholder .button:hover { translate: 0 -1px; }
#mobile-starter-placeholder .button .content,
#mobile-starter-placeholder .button span {
color: var(--ark-ink) !important;
text-transform: none !important;
font-weight: 600 !important;
font-size: 16px !important;
letter-spacing: -0.01em !important;
}
#mobile-starter-placeholder .button svg { color: var(--ark-ink) !important; }
/* --- 2. The sidebar as glass --------------------------------------------
The canvas is wider than its column and runs ~320px behind this panel,
but stops short of the left edge. A horizontal gradient makes the panel
fractionally denser on the left so that boundary never reads as a seam. */
.main-bar, .sidebar {
background: linear-gradient(90deg,
rgba(252, 252, 250, .88) 0%,
rgba(252, 252, 250, .84) 22%,
rgba(252, 252, 250, .78) 58%,
rgba(252, 252, 250, .76) 100%) !important;
-webkit-backdrop-filter: var(--ark-blur);
backdrop-filter: var(--ark-blur);
border-right: 1px solid var(--ark-line) !important;
box-shadow: var(--ark-specular) !important;
color: var(--ark-t-1) !important;
}
.filters, .filters-container, .base-filters, .results, .apartments-list,
.apartments-grid, .sidebar .content-wrapper {
background: transparent !important;
}
.search-header {
background: rgba(252, 252, 250, .55) !important;
-webkit-backdrop-filter: var(--ark-blur-sm);
backdrop-filter: var(--ark-blur-sm);
border-bottom: 1px solid var(--ark-line) !important;
}
.menu, .more-menu, .sort-dropdown {
background: var(--ark-glass-strong) !important;
-webkit-backdrop-filter: var(--ark-blur);
backdrop-filter: var(--ark-blur);
border: 1px solid var(--ark-line) !important;
border-radius: 14px !important;
box-shadow: var(--ark-e3), var(--ark-specular) !important;
}
.menu-item { border-color: var(--ark-line) !important; }
.menu-link { color: var(--ark-t-1) !important; }
.menu-link:hover { color: var(--ark-accent-txt) !important; }
/* the mobile bottom-sheet drag handle - the app hardcodes #f2f2f2 here */
.draggable-bar {
background: rgba(252, 252, 250, .70) !important;
-webkit-backdrop-filter: var(--ark-blur-sm);
backdrop-filter: var(--ark-blur-sm);
border-bottom: 1px solid var(--ark-line) !important;
}
/* --- 2b. Brand lockup in place of the client investment logo -------------
"ARKVIZ / by Arkneeds" - Arkviz never stands alone. Both the desktop
(.investment-logo) and mobile (.logo) headers carry it. These are ![]()
elements, so swapping rendered content is the only clean CSS route; the
lockup SVG embeds the supplied brand mark verbatim. */
/* The lockup is swapped at BUILD time (rebrand.mjs writes it over
cdn/jeff/logo.svg, which is what getAssetsBaseUrl + logoRelativePath
resolves to). CSS content:url() on an ![]()
is Chromium/WebKit only and
would leave the previous client's mark showing in Firefox, so this rule
carries geometry only. */
img.investment-logo, img.logo {
width: 188px !important;
height: 28px !important;
max-width: 188px !important;
object-fit: contain !important;
object-position: left center !important;
}
/* --- 3. Status filters ---------------------------------------------------
Quiet glass chips. The selected one is the ink anchor - small, deliberate,
and the only dark mass in the panel. */
.filters-selectable-button {
background: rgba(252, 252, 250, .55) !important;
border: 1px solid var(--ark-line) !important;
color: var(--ark-t-2) !important;
border-radius: 9px !important;
font-weight: 500 !important;
letter-spacing: -0.01em !important;
box-shadow: none !important;
transition: background .18s var(--ark-ease),
color .18s var(--ark-ease),
border-color .18s var(--ark-ease) !important;
}
.filters-selectable-button:hover {
background: rgba(252, 252, 250, .92) !important;
border-color: var(--ark-line-2) !important;
color: var(--ark-t-1) !important;
}
.filters-selectable-button.--active {
background: var(--ark-glass-ink) !important;
-webkit-backdrop-filter: var(--ark-blur-sm);
backdrop-filter: var(--ark-blur-sm);
border-color: transparent !important;
color: var(--ark-paper) !important;
font-weight: 600 !important;
box-shadow: var(--ark-e1), var(--ark-specular-ink) !important;
}
/* --- 4. Sliders ----------------------------------------------------------
The filled range is ink, not lime: there are four of these on screen and
four lime bars would blow the accent budget on their own. */
.slider-base { background: rgba(12, 15, 13, .12) !important; }
.slider-connect { background: var(--ark-t-1) !important; }
.slider-handle {
background: var(--ark-paper) !important;
border: 1px solid var(--ark-line-2) !important;
box-shadow: 0 1px 3px rgba(12,15,13,.24) !important;
transition: scale .15s var(--ark-ease), translate .15s var(--ark-ease), box-shadow .15s var(--ark-ease) !important;
}
.slider-handle:hover, .slider-handle:focus {
box-shadow: 0 2px 8px rgba(12,15,13,.30) !important;
scale: 1.08;
}
/* --- 5. Apartment cards --------------------------------------------------
Barely-there glass. The floor plan is the content; the card is a frame. */
/* A raised element must be DENSER than the surface it sits on - the card was
thinner than its own sidebar, so it read as nothing. On a light-on-light
glass system separation comes from density + shadow; a hairline heavy
enough to hit 3:1 would render as a wireframe and kill the material. */
.apartment-box {
background: rgba(252, 252, 250, .92) !important;
-webkit-backdrop-filter: var(--ark-blur-sm);
backdrop-filter: var(--ark-blur-sm);
border: 1px solid rgba(12, 15, 13, .20) !important;
border-radius: 14px !important;
box-shadow: var(--ark-e2) !important;
transition: background .2s var(--ark-ease), border-color .2s var(--ark-ease),
box-shadow .2s var(--ark-ease) !important;
}
.apartment-box:hover {
background: rgba(252, 252, 250, .99) !important;
border-color: rgba(12, 15, 13, .28) !important;
box-shadow: var(--ark-e3) !important;
}
.image-container, .image-preview { background: rgba(252, 252, 250, .55) !important; }
/* Promotion is the standout: lime-soft pill, readable lime text. */
.--promotion-label {
background: var(--ark-accent-soft) !important;
color: #4A6100 !important;
border-radius: 5px !important;
padding: 1px 6px !important;
font-weight: 600 !important;
}
.--promotion-price { color: #4A6100 !important; font-weight: 600 !important; }
.--old-price { color: var(--ark-t-3) !important; text-decoration-thickness: 1px; }
/* Status pills: tinted fill + coloured text, never a solid block. */
.status-label { border-radius: 6px !important; font-size: 11px !important; font-weight: 600 !important; }
.status-label.--available { background: rgba(94,122,0,.12) !important; color: #4A6100 !important; }
.status-label.--reserved { background: rgba(154,103,0,.12) !important; color: #8A5C00 !important; }
.status-label.--sold { background: rgba(162,58,46,.12) !important; color: #8C3227 !important; }
.status-label.--promotion { background: var(--ark-accent-soft) !important; color: #4A6100 !important; }
/* --- 6. Floating controls over the render --------------------------------
Light glass so they sit in the scene rather than punching holes in it.
Sizes are deliberately NOT touched - 32/44px circles stay exactly that. */
.screenshot-button, .time-of-day-switch, .colliders-switch,
.compass.--circular, .more-button {
background: var(--ark-glass) !important;
-webkit-backdrop-filter: var(--ark-blur);
backdrop-filter: var(--ark-blur);
border: 1px solid rgba(255, 255, 255, .55) !important;
box-shadow: var(--ark-e2), var(--ark-specular) !important;
color: var(--ark-t-1) !important;
transition: background .18s var(--ark-ease), color .18s var(--ark-ease) !important;
}
.screenshot-button:hover, .time-of-day-switch:hover, .colliders-switch:hover,
.more-button:hover {
background: var(--ark-glass-strong) !important;
color: var(--ark-t-1) !important;
}
/* The single accent move in the whole interface. */
.expand-menu-button {
background: var(--ark-accent) !important;
color: var(--ark-ink) !important;
border: none !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
box-shadow: 0 1px 3px rgba(12,15,13,.18),
0 10px 26px -10px rgba(12,15,13,.34) !important;
}
.expand-menu-button svg, .expand-menu-button .text { color: var(--ark-ink) !important; }
/* --- 7. Building tooltips ------------------------------------------------
These sit directly on the render and there are seven of them at once, so
they whisper: quiet glass, no shadow stack, muted count.
.container and .marker are LAYOUT wrappers and must stay transparent -
painting .marker produces a solid bar across the tooltip. */
.building-tooltip, .building-tooltip .container, .building-tooltip .marker {
background: transparent !important;
}
.building-tooltip .box {
background: rgba(252, 252, 250, .82) !important;
-webkit-backdrop-filter: var(--ark-blur-sm);
backdrop-filter: var(--ark-blur-sm);
border: 1px solid rgba(255, 255, 255, .5) !important;
border-radius: 11px !important;
box-shadow: 0 2px 10px -4px rgba(12,15,13,.22), var(--ark-specular) !important;
}
.building-tooltip .name, .building-tooltip .title {
color: var(--ark-t-1) !important;
font-weight: 600 !important;
letter-spacing: -0.015em !important;
}
.building-tooltip .count, .building-tooltip .count-text {
color: var(--ark-t-2) !important;
font-family: var(--ark-mono) !important;
font-size: 11px !important;
}
/* the highlighted building is the one that may take the accent */
/* Ink anchor, matching the active filter chip: one selection language in the
product, and lime never touches the render. */
.building-tooltip.--highlight .box {
background: var(--ark-glass-ink) !important;
border-color: rgba(255, 255, 255, .12) !important;
}
.building-tooltip.--highlight .name,
.building-tooltip.--highlight .count,
.building-tooltip.--highlight .count-text { color: var(--ark-paper) !important; }
/* connector stalk and point, legible against both sky and facade */
.building-tooltip .marker .line { background: var(--ark-paper) !important; opacity: .92; }
.building-tooltip .marker .circle {
background: var(--ark-ink) !important;
border-color: var(--ark-paper) !important;
}
/* --- 8. Guide / onboarding ----------------------------------------------
Deliberately the one ink card: it must interrupt.
The component renders .guide-tooltip > .footer > .next|.back|.close|.dot
with NO .guide ancestor, and drives its controls off --ui-color, which
resolves to --primary (Ink) and vanishes on this card. Retarget the
variables at the layer that owns them, then style the real elements.
(.guide itself is a small inline "Tutorial" hint on LIGHT chrome - it must
not inherit any of this.) */
.guide-layer,
.guide-layer.--light,
.guide-layer.--light-ui {
--tooltip-background: rgba(12, 15, 13, .80) !important;
--ui-color: #D0FF00 !important;
--icons-fill: #FBFBF8 !important;
--text-heading-color: #FBFBF8 !important;
--text-body-color: rgba(251, 251, 248, .76) !important;
}
.guide-tooltip {
background: var(--ark-glass-ink) !important;
-webkit-backdrop-filter: var(--ark-blur);
backdrop-filter: var(--ark-blur);
border: 1px solid rgba(255, 255, 255, .10) !important;
border-radius: 14px !important;
box-shadow: var(--ark-e3), var(--ark-specular-ink) !important;
color: var(--ark-paper) !important;
}
.guide-tooltip .title { color: var(--ark-paper) !important; font-weight: 600 !important; }
.guide-tooltip .content,
.guide-tooltip .text { color: rgba(251, 251, 248, .76) !important; }
.guide-tooltip .footer .dot { background: rgba(251, 251, 248, .30) !important; }
.guide-tooltip .footer .dot.--active { background: var(--ark-paper) !important; }
.guide-tooltip .footer .next,
.guide-tooltip .footer .back,
.guide-tooltip .footer .close,
.guide-tooltip .close-button { color: var(--ark-accent) !important; }
.guide-tooltip svg { color: rgba(251, 251, 248, .75) !important; }
/* --- 9. Scrollbars ------------------------------------------------------- */
.os-scrollbar-handle { background: rgba(12,15,13,.22) !important; border-radius: 99px !important; }
/* --- 10. Loading states --------------------------------------------------
Passive states never take the accent. */
.loader-spinner, .loader, .spinner { color: var(--ark-t-3) !important; }
.loader-spinner .dot { background: currentColor !important; }
.loader-text { color: var(--ark-t-2) !important; font-family: var(--ark-sans) !important; }
/* --- 11. Product watermark ----------------------------------------------- */
.company-logo {
display: inline-flex !important;
align-items: baseline !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
padding: 6px 10px !important;
background: var(--ark-glass) !important;
-webkit-backdrop-filter: var(--ark-blur-sm);
backdrop-filter: var(--ark-blur-sm);
border-radius: 10px !important;
box-shadow: none !important;
text-decoration: none !important;
white-space: nowrap !important;
}
.company-logo > * { display: none !important; }
.company-logo::before {
content: "ARK";
font: italic 700 12px/1 var(--ark-sans);
color: var(--ark-t-1);
letter-spacing: 0.01em;
}
.company-logo::after {
content: "VIZ";
font: italic 700 12px/1 var(--ark-sans);
color: var(--ark-t-1);
letter-spacing: 0.01em;
border-bottom: 2.5px solid var(--ark-accent);
padding-bottom: 2px;
}
/* --- 12. Focus -----------------------------------------------------------
The app ships no visible focus ring; keyboard users need one. */
:focus-visible {
outline: 2px solid var(--ark-ink) !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 4px rgba(251, 251, 248, .85) !important;
}
/* ===========================================================================
PREMIUM PASS — icons + measured smoked panels
===========================================================================
The shipped icons are not a set: some are stroked at 1.75, some are solid
glyphs, on 16 and 24 viewBoxes. That inconsistency is what makes them read
as cheap. They are replaced here with one system — 24 grid, 1.6 stroke,
round caps — painted as a mask so they inherit currentColor and stay crisp.
Panels: the floating controls that sit ON the render become measured
smoked glass, the same material as the shipped Arkviz interior tour. The
sidebar stays light: it is a dense reading surface, not an overlay.
========================================================================= */
:root {
--smoke: rgba(12, 15, 13, .70);
--smoke-strong: rgba(12, 15, 13, .86);
--smoke-line: rgba(255, 255, 255, .10);
--smoke-blur: blur(24px) saturate(1.4);
--smoke-lift: 0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
--on-smoke: #F4F5F4;
--on-smoke-2: rgba(244,245,244,.72);
}
/* --- one icon system ----------------------------------------------------- */
/* The compass is NOT in this list: its needle is live, driven by the scene
heading. Hiding it would leave an instrument with nothing to read. */
.screenshot-button svg, .time-of-day-switch svg, .colliders-switch svg,
.share-button svg, .menu-trigger svg, .more-button svg {
display: none !important;
}
.compass.--circular svg { color: var(--on-smoke) !important; }
.screenshot-button::after, .time-of-day-switch::after, .colliders-switch::after,
.share-button::after, .menu-trigger::after, .more-button::after {
content: ""; display: block; width: 18px; height: 18px;
background: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
.screenshot-button::after {
-webkit-mask-image: var(--ic-camera); mask-image: var(--ic-camera);
}
.time-of-day-switch::after { -webkit-mask-image: var(--ic-sun); mask-image: var(--ic-sun); }
.colliders-switch::after { -webkit-mask-image: var(--ic-eye); mask-image: var(--ic-eye); }
.share-button::after { -webkit-mask-image: var(--ic-share); mask-image: var(--ic-share); }
.menu-trigger::after { -webkit-mask-image: var(--ic-menu); mask-image: var(--ic-menu); }
.more-button::after { -webkit-mask-image: var(--ic-more); mask-image: var(--ic-more); }
:root {
--ic-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.6A1.6 1.6 0 0 1 4.6 7h2.5l1.2-2h6.4l1.2 2h2.5A1.6 1.6 0 0 1 20 8.6v9.8A1.6 1.6 0 0 1 18.4 20H4.6A1.6 1.6 0 0 1 3 18.4z'/%3E%3Ccircle cx='11.5' cy='13' r='3.6'/%3E%3C/svg%3E");
--ic-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.6v2.4M12 19v2.4M2.6 12h2.4M19 12h2.4M5.4 5.4l1.7 1.7M16.9 16.9l1.7 1.7M18.6 5.4l-1.7 1.7M7.1 16.9l-1.7 1.7'/%3E%3C/svg%3E");
--ic-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.4A8.6 8.6 0 0 1 9.6 4 8.6 8.6 0 1 0 20 14.4z'/%3E%3C/svg%3E");
--ic-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12s3.6-6 9-6 9 6 9 6-3.6 6-9 6-9-6-9-6z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M4 20L20 4'/%3E%3C/svg%3E");
--ic-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17.5' cy='5.5' r='2.6'/%3E%3Ccircle cx='6.5' cy='12' r='2.6'/%3E%3Ccircle cx='17.5' cy='18.5' r='2.6'/%3E%3Cpath d='M8.8 10.7l6.4-3.9M8.8 13.3l6.4 3.9'/%3E%3C/svg%3E");
--ic-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E");
--ic-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='5.5' cy='12' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='18.5' cy='12' r='1.7'/%3E%3C/svg%3E");
}
/* the night state swaps the glyph, not just the tint */
.time-of-day-switch.--active::after, .time-of-day-switch[aria-pressed="true"]::after {
-webkit-mask-image: var(--ic-moon); mask-image: var(--ic-moon);
}
/* --- measured smoked panels, only where they float over the render ------- */
.screenshot-button, .time-of-day-switch, .colliders-switch,
.compass.--circular, .more-button {
background: var(--smoke) !important;
-webkit-backdrop-filter: var(--smoke-blur); backdrop-filter: var(--smoke-blur);
border: 1px solid var(--smoke-line) !important;
box-shadow: var(--smoke-lift) !important;
color: var(--on-smoke) !important;
}
.screenshot-button:hover, .time-of-day-switch:hover, .colliders-switch:hover,
.more-button:hover {
background: var(--smoke-strong) !important;
color: var(--ark-accent) !important;
}
/* building tooltips: smoked, so they read as one family with the controls */
.building-tooltip .box {
background: var(--smoke) !important;
border: 1px solid var(--smoke-line) !important;
box-shadow: var(--smoke-lift) !important;
}
.building-tooltip .name, .building-tooltip .title { color: var(--on-smoke) !important; }
.building-tooltip .count, .building-tooltip .count-text { color: var(--on-smoke-2) !important; }
.building-tooltip.--highlight .box {
background: var(--ark-accent) !important; border-color: var(--ark-accent) !important;
}
.building-tooltip.--highlight .name,
.building-tooltip.--highlight .count,
.building-tooltip.--highlight .count-text { color: var(--ark-ink) !important; }
.building-tooltip .marker .circle { background: var(--ark-accent) !important; border-color: var(--ark-ink) !important; }
/* the compass needle should read as an instrument, not a sticker */
.compass.--circular { border-radius: 50% !important; }
/* ===========================================================================
HOLISTIC PASS — demo 1
========================================================================= */
/* --- 1. Boot loader ------------------------------------------------------
The markup is .boxes > .box(x4) > div(x7): four volumes assembling. With a
solid ink fill they read as one black lump and the idea is lost. Rendered
as translucent massing with lime edges, the animation says what it means -
a building coming together. */
.loader { background: var(--ark-bg) !important; }
.loader::before {
background: radial-gradient(60% 50% at 50% 38%, rgba(208,255,0,.10), transparent 70%) !important;
filter: blur(90px) !important;
}
.loader .title {
font-family: var(--ark-display) !important;
font-weight: 400 !important;
font-size: clamp(22px, 3vw, 30px) !important;
letter-spacing: -0.02em !important;
color: var(--ark-ink) !important;
}
.loader .text {
font-family: var(--ark-mono) !important;
font-size: 11px !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--ark-t-3) !important;
font-variant-numeric: tabular-nums;
}
.loader .box > div {
background: rgba(94, 122, 0, .10) !important;
border: 1px solid rgba(94, 122, 0, .45) !important;
box-shadow: inset 0 0 12px rgba(208, 255, 0, .12) !important;
}
.loader .box > div:first-child {
background: rgba(208, 255, 0, .22) !important;
border-color: rgba(94, 122, 0, .65) !important;
}
/* --- 2. Entry screen -----------------------------------------------------
Structure is: #mobile-starter-placeholder > .container(z:2) with the photo
as a picture.image at z:-1 INSIDE it. So the scrim cannot live on the root
- the container's own stacking context paints over it. It goes on
.container::after at z:-1, which sits above the image (equal z, later in
tree order) and below the static text.
The container is also a narrow centred column by default, which letterboxes
the render; it is taken full-bleed here so the frame reads as designed. */
#mobile-starter-placeholder {
background: var(--ark-ink) !important;
}
#mobile-starter-placeholder .container {
width: 100% !important; max-width: none !important;
display: flex !important; flex-direction: column;
align-items: flex-start !important; justify-content: flex-end !important;
height: 100% !important; min-height: 100% !important;
padding: 0 clamp(22px, 6vw, 56px) clamp(34px, 7vh, 58px) !important;
gap: 18px;
}
#mobile-starter-placeholder .container picture.image,
#mobile-starter-placeholder .container picture.image img {
width: 100% !important; height: 100% !important;
object-fit: cover !important; object-position: center !important;
}
/* scrim anchored to the type corner + a blueprint grid, as one layer */
#mobile-starter-placeholder .container::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image:
linear-gradient(to right, rgba(244,245,244,.09) 1px, transparent 1px),
linear-gradient(to bottom, rgba(244,245,244,.09) 1px, transparent 1px),
radial-gradient(130% 85% at 10% 82%, rgba(12,15,13,.92) 0%, rgba(12,15,13,.55) 34%, rgba(12,15,13,0) 68%),
linear-gradient(to top, rgba(12,15,13,.86) 0%, rgba(12,15,13,.22) 32%, rgba(12,15,13,0) 60%);
background-size: 64px 64px, 64px 64px, auto, auto;
}
/* eyebrow above the headline, on the same left rule as everything else */
#mobile-starter-placeholder .container::before {
content: "[ ARKVIZ · LIVE MODEL ]";
font: 500 10px/1 var(--ark-mono);
letter-spacing: .18em; color: var(--ark-accent);
text-shadow: 0 1px 10px rgba(12,15,13,.7);
}
#mobile-starter-placeholder .title {
text-align: left !important; margin: 0 !important;
max-width: 15ch;
}
#mobile-starter-placeholder .button { align-self: flex-start !important; }
/* --- 3. Logo lockups: readable at the size they are painted -------------- */
img.investment-logo, img.logo {
content: url("./arkviz-lockup-compact.svg") !important;
width: auto !important; height: 26px !important; max-width: 122px !important;
object-fit: contain !important; object-position: left center !important;
}
.company-logo::before, .company-logo::after { content: none !important; }
.company-logo {
width: 104px !important; height: 24px !important; padding: 7px 12px !important;
background: var(--smoke) !important;
-webkit-backdrop-filter: var(--smoke-blur); backdrop-filter: var(--smoke-blur);
border: 1px solid var(--smoke-line) !important;
border-radius: 999px !important;
background-image: url("./arkviz-lockup-onsmoke.svg") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 84px auto !important;
}
/* --- 4. Direction control: an instrument, not a badge -------------------- */
.compass.--circular {
width: 34px !important; height: 34px !important;
border-radius: 50% !important;
background: var(--smoke) !important;
border: 1px solid var(--smoke-line) !important;
box-shadow: 0 4px 16px rgba(0,0,0,.32) !important;
}
.compass.--circular svg { width: 17px !important; height: 17px !important; opacity: .92; }
/* --- 5. Sidebar: composed, not stacked ----------------------------------
Same controls, same geometry - tighter rhythm, a clearer hierarchy and
one hairline structure instead of loose rows. */
.search-header { padding-block: 18px !important; }
.filters { padding-bottom: 18px !important; }
.filters .title, .statuses > .title, .sliders .title {
font-size: 9.5px !important; letter-spacing: .16em !important;
color: var(--ark-t-3) !important; margin-bottom: 8px !important;
}
.filters-slider { padding-block: 3px !important; }
.label-value, .label-unit { font-size: 12.5px !important; font-weight: 500 !important; }
.slider-base { height: 3px !important; }
.slider-handle { width: 15px !important; height: 15px !important; }
.filters-selectable-button { border-radius: 8px !important; font-size: 12.5px !important; }
.advanced-trigger {
font-family: var(--ark-mono) !important; font-size: 10px !important;
letter-spacing: .12em !important; text-transform: uppercase !important;
color: var(--ark-t-3) !important;
}
.results {
font-family: var(--ark-mono) !important; font-size: 11px !important;
letter-spacing: .1em !important; text-transform: uppercase !important;
color: var(--ark-t-2) !important;
}
.results .count { font-weight: 600 !important; color: var(--ark-t-1) !important; }
.apartment-box { border-radius: 14px !important; }
.apartment-box .name, .apartment-box .title { letter-spacing: -0.02em !important; }
.sort-dropdown { font-size: 12.5px !important; }
/* ===========================================================================
APPLE PASS — demo 1
===========================================================================
Built against the apple-design skill (Apple's WWDC design talks, translated
for the web). Four of its rules drive everything below:
§12 Materials. "Never stack a light translucent surface on another." The
sidebar IS light glass, so nothing inside it may carry its own glass or
its own shadow. Header buttons therefore have no resting background at
all — they earn one on hover. Smoked glass is reserved for the controls
that genuinely float over the render.
§1 Response. Feedback belongs on pointer-down. Every control here gets a
:active scale, 100ms, so a press reads as a press.
§15 Typography. Tracking is size-specific. Captions go up (+.14em, mono,
uppercase); values come down (-0.01em) and go tabular.
§16 Craft. One radius ladder, one spacing rhythm, one icon size. The
old interface carried eight radii and three icon systems; that is what
read as cheap, more than any single colour did.
Geometry of the underlying app is respected: hit targets only ever grow.
========================================================================= */
:root {
/* radius ladder — derived from the brand mark, a squircle at 16.5% of its
side. Child radius = parent radius − padding, always. */
--r-1: 8px; /* badges, segment thumbs */
--r-2: 12px; /* buttons, segment tracks */
--r-3: 16px; /* cards */
--r-4: 20px; /* sheets, menus */
--r-pill: 999px;
/* motion — critically damped by default (skill §4: damping 1.0, response
0.3–0.4s). Bounce is reserved for gestures that carried momentum, and
nothing in this interface does. */
--spring: cubic-bezier(.32, .72, 0, 1);
--t-press: 100ms;
--t-fast: 160ms;
--t-base: 280ms;
--hit: 36px; /* one icon-button size everywhere in the panel */
--ic: 18px; /* one icon size */
--ic-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
--ic-rows: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 7h4M4 12h4M4 17h4M11 7h9M11 12h9M11 17h9'/%3E%3C/svg%3E");
--ic-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
/* --- A. Sidebar header: a toolbar, not a row of boxes ---------------------
The three buttons here were being painted with the same materials as the
controls that float over the render — one of them ended up a black square
on a white panel. On a light glass surface they are chrome: transparent at
rest, a light fill on hover, and all on one 36px grid. */
.content-viewport > .header {
display: flex !important;
align-items: center !important;
gap: 6px !important;
height: 64px !important;
min-height: 64px !important;
padding: 0 12px !important;
background: rgba(252, 252, 250, .72) !important;
-webkit-backdrop-filter: var(--ark-blur); backdrop-filter: var(--ark-blur);
border-bottom: 0 !important;
position: relative;
}
/* a scroll edge effect where content meets the bar, never a hairline rule */
.content-viewport > .header::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -20px; height: 20px;
pointer-events: none;
background: linear-gradient(to bottom, rgba(252,252,250,.66), rgba(252,252,250,0));
}
.header-content {
display: flex !important; align-items: center !important; gap: 2px !important;
flex: 1 1 auto !important; min-width: 0 !important;
}
.header-content img.investment-logo { margin-right: auto !important; }
.menu-trigger, .close-app-button, .share-button, .trigger-view,
.menu-container > .close-button {
width: var(--hit) !important; height: var(--hit) !important;
min-width: var(--hit) !important; min-height: var(--hit) !important;
flex: none !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
padding: 0 !important; margin: 0 !important;
background: transparent !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
border: 0 !important;
border-radius: var(--r-2) !important;
box-shadow: none !important;
color: var(--ark-t-2) !important;
cursor: pointer;
transition: background var(--t-fast) var(--spring),
color var(--t-fast) var(--spring),
scale var(--t-press) var(--spring), translate var(--t-press) var(--spring) !important;
}
.menu-trigger:hover, .close-app-button:hover, .share-button:hover,
.trigger-view:hover, .menu-container > .close-button:hover {
background: rgba(12, 15, 13, .055) !important;
color: var(--ark-t-1) !important;
}
/* skill §1: the press IS the feedback, and it lands on pointer-down */
.menu-trigger:active, .close-app-button:active, .share-button:active,
.trigger-view:active, .menu-container > .close-button:active {
scale: .94;
background: rgba(12, 15, 13, .09) !important;
}
.menu-trigger::after, .close-app-button::after, .share-button::after {
width: var(--ic) !important; height: var(--ic) !important;
}
/* the close and view buttons ship