/* * Stage UI-1 — REVF common UI layer. * * This is the single shared stylesheet for every production screen. It is * loaded first by templates/base.html, before any page-specific sheet, and * carries three things: * * 1. design tokens (--revf-*) ... colour / spacing / radius / shadow / type * 2. app chrome ... header, navigation, page header, banners * 3. component library ... button, field, card, stat, table, badge, * status chip, empty / error state, * pagination, tabs, confirm, action menu * * The palette, radii, soft tinted surfaces and the teal accent come from the * original 不動産 Value Finder design mock (templates/ui_mock.html + * static/css/ui_mock.css) and 参考デザイン.png. Only presentation lives here — * no layout rule depends on a particular record, and nothing here changes form * actions, field names or routes. * * Fonts: system stack only. No web font is downloaded. */ /* ============================================================ 1. Design tokens ============================================================ */ :root { /* -- surfaces -------------------------------------------- UI FOUNDATION v1: the page ground went one step darker (#f4f7f9 -> #eef2f6). Every card, panel and table in the product is --revf-surface white; against the old ground the difference was about three levels of one channel, so a screen read as one undifferentiated white sheet and the card borders were doing all the separating on their own. The step is deliberately small — this is still a light product, not a grey one — but it is now visible, so a card looks RAISED rather than drawn. Nothing else moves: the soft status tints are all mixed against white surfaces, not against the ground. */ --revf-background: #eef2f6; --revf-surface: #ffffff; --revf-surface-muted: #f8fafb; --revf-surface-sunken: #eef3f5; /* -- brand ----------------------------------------------- */ --revf-primary: #0f9f9a; --revf-primary-hover: #0c7f7b; --revf-primary-soft: #eaf7f6; --revf-primary-border: #a9ddda; --revf-accent: #19b5b0; /* -- text ------------------------------------------------ */ --revf-text-primary: #0f2140; --revf-text-secondary: #5c6b7d; --revf-text-muted: #7d8b9a; --revf-text-inverse: #ffffff; /* -- lines ----------------------------------------------- */ --revf-border: #dbe3e9; --revf-border-strong: #c3cfd8; --revf-border-faint: #e8edf1; /* -- status ---------------------------------------------- UI FOUNDATION v1 — THIS IS THE SEMANTIC COLOUR RULE FOR THE WHOLE PRODUCT. A screen does not pick a colour; it picks a MEANING, and the meaning already has a colour. Six roles, no more, each a trio of text / soft fill / border so a chip, a banner, a tile and a figure all tint the same way: primary REVF itself, the main action --revf-primary* positive done, healthy, passing --revf-success* warning needs attention, not yet a problem --revf-warning* danger failed, destructive, blocking --revf-danger* information neutral fact, in progress --revf-info* neutral no state, disabled, unclassified --revf-neutral* --revf-purple* and --revf-amber* are the two ACCENTS, not roles: purple marks 潜在価値-family content and amber marks 保存/お気に入り. They carry no pass/fail meaning and must not be used to express one. Colour is never the only channel. Every chip names its state in text (§10), and a figure that takes a tone keeps the label beside it. Adding a seventh role means editing this list — not adding a hex value at a call site. */ --revf-success: #14804a; --revf-success-soft: #e9f5ee; --revf-success-border: #a9d7bd; --revf-warning: #b5701a; --revf-warning-soft: #fdf3e6; --revf-warning-border: #e8c68f; --revf-danger: #b6362d; --revf-danger-soft: #fbeceb; --revf-danger-border: #eeb4af; --revf-info: #2668bf; --revf-info-soft: #edf3fc; --revf-info-border: #b3ccec; --revf-neutral: #5c6b7d; --revf-neutral-soft: #eef1f4; --revf-neutral-border: #d3dae1; --revf-purple: #6f5fb3; --revf-purple-soft: #f1eefa; --revf-purple-border: #cdc4ea; /* Amber is the "saved / favourite" accent from 参考デザイン.png — warmer than the warning orange so a favourite never reads as a problem. */ --revf-amber: #a8720c; --revf-amber-soft: #fdf5e3; --revf-amber-border: #ecd39a; /* -- spacing --------------------------------------------- */ --revf-space-1: 4px; --revf-space-2: 8px; --revf-space-3: 12px; --revf-space-4: 16px; --revf-space-5: 20px; --revf-space-6: 24px; --revf-space-8: 32px; --revf-space-10: 40px; --revf-space-12: 48px; /* -- radius ---------------------------------------------- */ --revf-radius-sm: 7px; --revf-radius-md: 10px; --revf-radius-lg: 14px; --revf-radius-xl: 18px; --revf-radius-pill: 999px; /* -- shadow ---------------------------------------------- */ --revf-shadow-xs: 0 1px 2px rgba(15, 33, 64, 0.05); --revf-shadow-sm: 0 2px 8px rgba(15, 33, 64, 0.06); --revf-shadow-md: 0 6px 18px rgba(15, 33, 64, 0.08); --revf-focus-ring: 0 0 0 3px rgba(15, 159, 154, 0.28); /* -- typography ------------------------------------------ First review pass: the whole scale was one step too small on a 1440 screen — body text sat at 14px and secondary text (nav, KPI labels, section links, chips) at 13px or below, which read as cramped next to 参考デザイン.png. Every step moved up one notch, and the floor is now 13px so no supporting text drops below comfortable reading size. */ --revf-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; --revf-font-size-xs: 13px; --revf-font-size-sm: 14px; --revf-font-size-base: 15px; --revf-font-size-md: 17px; --revf-font-size-lg: 22px; --revf-font-size-xl: 26px; --revf-font-size-2xl: 34px; /* -- icon sizes ------------------------------------------ Fifth review pass: icon sizes used to be an argument passed at each call site, so the same kind of glyph came out at a different size on every screen and there was no single place to grow them. They are tokens now. A template still says WHICH icon; the component decides how big it is. */ --revf-icon-nav: 26px; /* top-level header nav */ --revf-icon-menu-item: 23px; /* inside a nav dropdown */ --revf-icon-control: 28px; /* notification, logout, menu button */ --revf-icon-hero: 34px; /* page hero */ --revf-icon-kpi: 32px; /* KPI / stat tile */ --revf-icon-section: 26px; /* section heading */ --revf-icon-action: 22px; /* buttons */ --revf-icon-fact: 21px; /* price, yield, location on a card */ --revf-icon-chip: 17px; /* status chips — deliberately smaller */ /* -- layout ---------------------------------------------- UI FOUNDATION v1: 1360 -> 1520. REVF is an analysis product: its real screens are a KPI row, a filter block and a list of properties with price, yield, area and status on the same line. At 1360 a 1600 or 1920 desktop spent 300+ pixels a side on nothing while those rows wrapped or truncated. 1520 gives a four-column KPI row and a wide list real room and still leaves a margin on a 1600 screen, so the page reads as a page rather than as a full-bleed table. It is NOT unlimited, and reading-width content does not get it: a screen that is prose (setup guidance, confirmations, help) uses .dashboard-container--reading below, which caps at a line length someone will actually finish. Anything wider than the viewport is impossible by construction — the width is a min() against the gutter, so widening this token can never introduce horizontal scroll. */ --revf-content-width: 1520px; --revf-content-width-reading: 980px; --revf-content-gutter: 28px; /* -- stacking order --------------------------------------- UI FOUNDATION v1. Sticky chrome is the one place where a magic z-index grows every time somebody adds a layer, so the four layers REVF actually has are named once, here, in order. A new sticky element picks the token for the layer it belongs to; it does not invent 9999. header the application header, above everything else on the page menu row-level action menus, which open over content backbar the global 「戻る」 bar, under the header it hangs below raised in-card sticky bits (table headers, column labels) The literal numbers keep their previous values, so nothing that already sits at 20 or 15 changes position relative to anything else. */ --revf-layer-raised: 2; --revf-layer-backbar: 12; --revf-layer-menu: 15; --revf-layer-header: 20; /* -- sticky header offset --------------------------------- UI FOUNDATION v1. .site-header is sticky, so anything else that wants to stick has to start BELOW it. The header's height is not fixed — the brand lock-up, the nav padding and the icon controls all step down with the viewport — so this token carries the height per breakpoint (see §18) and the sticky backbar reads it instead of guessing. The values are deliberate slight OVER-estimates of the measured header (138 / 123 / 115 / 107 at 1440 / 1280 / 1180 / 390). Over-estimating leaves a few pixels of ground between the header and the bar, which is invisible; under-estimating would slide the bar under the header, which would hide it. static/js/revf-nav.js narrows the gap to the real measured height where scripting is on — a refinement, never a requirement. */ --revf-header-height: 140px; /* -- safe area (iPhone notch / Dynamic Island) ------------ MOBILE-HEADER-SAFE-AREA v1. templates/pwa_head.html already ships `viewport-fit=cover` AND `apple-mobile-web-app-status-bar-style: black-translucent`, so once the app is added to the home screen the page starts at y=0 — UNDER the status bar and the Dynamic Island. Nothing was reading env(safe-area-inset-top), so the header's right-hand controls (メニュー / 通知 / ログアウト) were drawn inside that band and could not be tapped reliably. The TOP inset is a token rather than an inline env() call so that every rule which has to clear the island reads the SAME value, and so the value can be substituted in QA (Chromium reports no inset, so a rule written as a bare env() cannot be exercised at all in a headless run). Only the top inset is tokenised — it is the only one this change needs, and the left/right insets already sit on in mobile_responsive.css. It is declared twice on purpose: the literal 0px always parses, and the env() line overrides it only where env() is understood. A browser too old for env() therefore still gets a usable value instead of an invalid var() that would take the whole padding declaration down with it. */ --revf-safe-top: 0px; --revf-safe-top: env(safe-area-inset-top, 0px); /* --------------------------------------------------------- Back-compatible aliases. The existing page stylesheets (dashboard_mock.css, custom_properties.css, property_detail.css ...) refer to these names. Pointing them at the tokens above means every legacy rule picks up the shared palette instead of drifting from it. --------------------------------------------------------- */ --page-bg: var(--revf-background); --surface: var(--revf-surface); --navy: var(--revf-text-primary); --text: var(--revf-text-primary); --text-main: var(--revf-text-primary); --text-sub: var(--revf-text-secondary); --muted: var(--revf-text-secondary); --primary: var(--revf-primary); --primary-dark: var(--revf-primary-hover); --primary-soft: var(--revf-primary-soft); --accent-2: var(--revf-accent); --blue: var(--revf-info); --blue-soft: var(--revf-info-soft); --green: var(--revf-success); --green-soft: var(--revf-success-soft); --orange: var(--revf-warning); --orange-soft: var(--revf-warning-soft); --danger: var(--revf-danger); --danger-soft: var(--revf-danger-soft); --purple: var(--revf-purple); --purple-soft: var(--revf-purple-soft); --border-light: var(--revf-border); --border-medium: var(--revf-border); --border-faint: var(--revf-border-faint); } /* ============================================================ 2. Base ============================================================ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--revf-background); color: var(--revf-text-primary); font-family: var(--revf-font); font-size: var(--revf-font-size-base); line-height: 1.6; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: none; } /* A visible focus ring on every interactive element — keyboard users must be able to see where they are. :focus-visible keeps it off mouse clicks. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--revf-primary); outline-offset: 2px; border-radius: var(--revf-radius-sm); } img, svg, video, canvas { max-width: 100%; } /* Screen-reader-only helper for labels that must exist but not be shown. */ .revf-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Skip link: first tab stop on every page. */ .revf-skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; background: var(--revf-primary); color: var(--revf-text-inverse); font-weight: 700; border-radius: 0 0 var(--revf-radius-md) 0; } .revf-skip-link:focus { left: 0; } /* ============================================================ 3. App header + navigation ============================================================ */ .site-header { background: var(--revf-surface); border-bottom: 1px solid var(--revf-border); position: sticky; top: 0; z-index: var(--revf-layer-header); /* MOBILE-HEADER-SAFE-AREA v1: the header is the topmost element of every authenticated screen, so the status-bar / notch inset belongs to IT — its own surface then fills that band instead of the controls sitting in it. 0px on a desktop browser and on any device without an inset, so this changes nothing at 1280 and above; the phone step-down in mobile_responsive.css adds its own breathing room on top. */ padding-top: var(--revf-safe-top); } /* Fifth review pass: three regions, not one row that starts at the left. The header was a flex row with everything packed against the left edge, so on a 1600px screen the logo and the four nav buttons sat in the first half and the right-hand third was empty. It is a three-column grid now — [ logo ] [ nav ] [ notification / user / logout ] — with weighted side tracks, so the nav's position is a property of the layout rather than of wherever the logo happens to end. minmax keeps each side track at least as wide as its content, so the centre column can never be squeezed into an overlap. align-items: center puts all three on one measured centre line. Sixth review pass: the nav sits right of the bar's centre now. Two things put it there — the right-hand controls gave up the ログアウト label (see mobile_responsive.css), which freed ~79px of track, and the left track takes its share of that as slack. --revf-header-left-weight is the knob: raise it to push the nav further right, lower it to bring it back. The logo does not move either way — it is justify-self: start in a track whose left edge IS the bar's left edge, so its X position is unchanged. */ .header-inner { width: min(calc(100% - 2 * var(--revf-content-gutter)), var(--revf-content-width)); margin: 0 auto; min-height: 112px; display: grid; /* Ninth review pass: the brand is a stacked block now, so the left track is its own width rather than a share of the bar, and the nav gets the whole middle. max-content on both sides pins the logo left and the controls right; minmax(0, 1fr) in the middle lets the nav own everything between them without ever pushing a side track out of the bar. */ grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; column-gap: 30px; /* The bar sat hard against the top of the window. The padding is on the row, not on any one control, so the logo, the tabs and the right-hand buttons all move down together and stay on one centre line. More above than below, which is what reads as breathing room rather than as a mis-centred bar. */ padding-top: 18px; padding-bottom: 10px; } .brand-logo-link { display: block; justify-self: start; flex: 0 0 auto; padding: 0; line-height: 0; /* no descender gap under an inline image */ } /* The stacked artwork is 686x440 with a 12px transparent margin, so the visible mark is 662x416 — about 96% of the box each way. A stacked mark is sized by WIDTH: fixing the height would make the wordmark underneath shrink with it. height: auto keeps the aspect exactly as exported; nothing is scaled, clipped or object-fitted. */ .brand-logo-image { display: block; width: 170px; height: auto; } /* -- OWNER ADMIN shell --------------------------------------- REVF-OWNER-ADMIN v1. The admin product reuses every token, component and breakpoint of the member app — same brand, same type scale, same 44px touch floor. What it does NOT reuse is the impression of being in the same place: a tinted bar, an accent rule under it and the word 管理 beside the mark, so "which of the two am I in" is answered before anything is read. Deliberately small. A second design system would be a second thing to keep in step, and this stage is an information-architecture change, not a rebrand. */ .site-header--admin { background: var(--revf-surface-muted); border-bottom: 1px solid var(--revf-amber-border); } .site-header--admin .brand-logo-link { display: inline-flex; align-items: center; gap: var(--revf-space-2); line-height: 1; } /* REVF-OWNER-MODE-BAR v1: amber, to agree with the bar under this header. The BIG statement of which product this is now lives there; this stays a small mark beside the logo rather than competing with it. */ .brand-admin-tag { font-size: var(--revf-font-size-sm); font-weight: 800; letter-spacing: 0.08em; color: var(--revf-amber); background: var(--revf-amber-soft); border: 1px solid var(--revf-amber-border); border-radius: var(--revf-radius-sm); padding: 3px 8px; white-space: nowrap; } /* -- the OWNER mode bar ------------------------------------- * * REVF-OWNER-MODE-BAR v1. One line under the header, drawn for the OWNER only * (_owner_mode_bar.html), carrying WHICH of the two products they are standing * in and the way to the other one. * * REVF-OWNER-ADMIN v1 §8 had both doors as 50px circles inside the header's * right-hand icon row, words clipped into a .control-label, because the * three-column grid had no room for a seventh control. Moving them one row down * buys that room: the labels are visible text again, the current mode is stated * at heading weight, and the icon row goes back to bell + avatar + ログアウト. * * Amber, not the warning orange: 「管理画面にいる」 is a state worth noticing, * not a problem to fix. Colour is the SECOND channel — the mode is written out * in words on both bars, and they differ in their text before their tint. */ /* Deliberately NOT sticky. The header above it is, and a second sticky strip would need the header's exact height as an offset - a number that changes at three breakpoints and again with the safe-area inset. The bar scrolls with the page; the header keeps the top of the window. */ .revf-mode-bar { background: var(--revf-surface-muted); border-bottom: 1px solid var(--revf-border); } /* Inside the admin product the whole strip takes the accent, so the mode is legible from the corner of the eye before the words are read. */ .revf-mode-bar--admin { background: var(--revf-amber-soft); border-bottom: 1px solid var(--revf-amber-border); box-shadow: inset 0 3px 0 var(--revf-amber); } .revf-mode-bar-inner { width: min(calc(100% - 2 * var(--revf-content-gutter)), var(--revf-content-width)); margin: 0 auto; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: var(--revf-space-4); padding: 10px 0; } .revf-mode-current { display: flex; align-items: center; gap: var(--revf-space-3); margin: 0; min-width: 0; } .revf-mode-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: var(--revf-radius-md); background: var(--revf-surface); border: 1px solid var(--revf-border); color: var(--revf-text-secondary); } .revf-mode-bar--admin .revf-mode-icon { border-color: var(--revf-amber-border); color: var(--revf-amber); } .revf-mode-text { display: flex; flex-direction: column; min-width: 0; } .revf-mode-eyebrow { font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; color: var(--revf-text-muted); } /* Section-heading weight on purpose: this is the answer to 「今どっちの画面か」 and it has to win that question at a glance. */ .revf-mode-name { font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: 0.01em; color: var(--revf-text-primary); } .revf-mode-bar--admin .revf-mode-name { color: var(--revf-amber); } /* One sentence of context. First thing to go on a narrow screen — the mode name beside it is what actually has to survive. */ .revf-mode-note { color: var(--revf-text-secondary); font-size: var(--revf-font-size-xs); line-height: 1.5; padding-left: var(--revf-space-3); border-left: 1px solid var(--revf-border); } .revf-mode-bar--admin .revf-mode-note { border-left-color: var(--revf-amber-border); } /* §8's two doors, in their new home. Same class names, same destinations - a labelled pill rather than a circle, because there is room for words here. */ .revf-mode-bar .admin-user-view, .revf-mode-bar .admin-entry-link { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 42px; padding: 0 16px; border-radius: var(--revf-radius-md); font-size: var(--revf-font-size-sm); font-weight: 800; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease; } /* Into the admin: the accent is on the DESTINATION, so the door that leads to the operational product is the amber one on both bars. */ .revf-mode-bar .admin-entry-link { color: var(--revf-amber); background: var(--revf-amber-soft); border: 1px solid var(--revf-amber-border); } .revf-mode-bar .admin-entry-link:hover { background: #fff; border-color: var(--revf-amber); } /* Back out to the user app: quiet, because leaving the admin is the ordinary thing to do and must not compete with the mode label beside it. */ .revf-mode-bar .admin-user-view { color: var(--revf-text-secondary); background: var(--revf-surface); border: 1px solid var(--revf-border-strong); } .revf-mode-bar .admin-user-view:hover { background: var(--revf-surface-sunken); border-color: var(--revf-text-muted); } .revf-mode-bar .admin-user-view svg, .revf-mode-bar .admin-entry-link svg { width: 18px; height: 18px; flex: 0 0 18px; } .revf-mode-switch-label { white-space: nowrap; } /* -- nav disclosure (mobile) --------------------------------- */ .nav-toggle { display: none; align-items: center; justify-content: center; gap: 8px; min-height: 50px; min-width: 50px; padding: 0 16px; margin-left: auto; border: 1px solid var(--revf-border); border-radius: var(--revf-radius-md); background: var(--revf-surface); color: var(--revf-text-primary); font: inherit; font-size: var(--revf-font-size-sm); font-weight: 700; cursor: pointer; } .nav-toggle svg { width: var(--revf-icon-control); height: var(--revf-icon-control); } /* -- primary nav --------------------------------------------- */ /* Ninth review pass: the stacked logo bought 158px, and it still is not enough for five EQUAL columns. Built and measured before deciding. Equal columns size every entry to the widest one. 保有シミュレーション at 18px is a 10-character label: 180px of text, plus a 26px glyph, an 18px caret, two 8px gaps and 24px of padding = 264px. Five of those plus four 12px gaps is 1320px. The bar is 1360 wide and the logo (170) and the right-hand controls (178) and their two gaps take 412 of it, leaving 948. Equal columns are 372px short — and they stay short at any viewport, because --revf-content-width caps the bar at 1360. Rendered anyway, the three long labels overflowed their 180px cells. Nothing available fixes that: dropping the glyph or the caret to make room is ruled out, wrapping to two lines is ruled out, and the font would have to fall to about 9px. So the columns are content-sized, and everything else equal columns were meant to buy is enforced instead — one height, one padding, one gap, one type size, labels centred in their own tab, and no per-item exceptions. Shortening 保有シミュレーション is the only change that would make true equal columns fit. */ /* Tenth review pass: the nav fills the middle track instead of sitting at its left edge, and space-between shares the leftover width evenly BETWEEN the five entries. The entries keep their own widths - this distributes the gaps, not the tabs - so the row starts a fixed distance from the logo and ends a fixed distance from the bell, with the same air between every pair. */ .main-nav { display: flex; align-items: center; justify-self: stretch; justify-content: space-between; width: 100%; /* Stage REVF-BETA-IA: 12px -> 8px. Measured, not guessed. The top level went from five entries to six, and the row was ALREADY running wider than its track at every desktop width (the note above says so: the columns are content-sized because equal ones do not fit). Four pixels off each of the five gaps, plus two off each tab's side padding below and two more at the 1439 step, buys back more than the sixth entry costs. Measured after the change: the row FITS its track at 1440, 1366 and 1280, where before this stage it ran roughly 24, 26 and 66 pixels wide of it. Nothing else about the tab changes: same height, same type size, same glyph, same shape. 1281-1365 was ALSO short at first (a seam left by the step below it); it is fixed further down this file, in its own band. Measured after both changes, the row fits its track at 1440 / 1366 / 1365 / 1300 / 1281 / 1280 - the whole range from the メニュー-button handover's doorstep up. ONE band is still short, and it is not new: 1181-1279, the step that hands over to the メニュー button at 1180. There the track keeps shrinking with the viewport while the tabs, being content-sized, do not: 1280 track 950 row 950 fits 1200 track 870 row 943 73 over 1181 track 851 row 943 92 over It was worse before this stage (90 and 109 over, on a five-entry row that measured 960), so this is an improvement, not a regression - but it is not zero. Closing 92px across six tabs means ~15px each, which can only come from the type, the glyphs or the labels, and all three are ruled out. The honest fix is the one this design already uses when the row will not fit: hand over to the メニュー button earlier than 1180. That is a deliberate change to a measured breakpoint, so it is left for a stage that can make it on purpose. The PAGE never scrolls horizontally at any width. */ gap: 8px; min-width: 0; } /* Fifth review pass: each entry is a tab-shaped button, not bare text. As plain links they read as decoration — nothing said "this is a control you can press", and the current section was carried by a tint alone. Each one now has a visible edge, a resting surface and a pressed state, so where you are and where you can go are both legible at a glance. The design stays soft: a faint border on a plain surface, not a filled toolbar. */ .main-nav a, .nav-menu > summary { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; /* 12px -> 10px, with the gap above: see the note on .main-nav. The hit area is unchanged in the direction that matters - min-height is still 60px, and the tabs still fill the middle track. */ padding: 0 10px; border: 1px solid var(--revf-border-faint); border-radius: var(--revf-radius-lg); background: var(--revf-surface); font-size: 17px; font-weight: 650; line-height: 1.25; color: var(--revf-text-primary); white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } /* The nav glyphs are the largest icons in the product: they sit beside an 18px label and have to read at a glance from across the header. */ .main-nav > a > .revf-icon, .nav-menu > summary > .revf-icon { width: var(--revf-icon-nav); height: var(--revf-icon-nav); } .main-nav a:hover, .nav-menu > summary:hover { background: var(--revf-surface-sunken); border-color: var(--revf-border-strong); color: var(--revf-primary-hover); } /* Active page: tinted fill, a stronger border and heavier type, plus the underline. Four separate cues, so the current section survives colour blindness, a greyscale print and a high-contrast theme alike — aria-current is set on the same element. */ .main-nav a.active, .main-nav a[aria-current="page"], .nav-menu.is-active > summary { background: var(--revf-primary-soft); border-color: var(--revf-primary-border); color: var(--revf-primary-hover); font-weight: 700; } .main-nav a.active::after, .main-nav a[aria-current="page"]::after, .nav-menu.is-active > summary::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 7px; height: 3px; border-radius: 3px; background: var(--revf-primary); } .nav-compare-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--revf-radius-pill); background: var(--revf-primary); color: var(--revf-text-inverse); font-size: 13px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } /* -- grouped nav menus (
: works without JavaScript) --- */ .nav-menu { position: relative; } .nav-menu > summary { list-style: none; } .nav-menu > summary::-webkit-details-marker { display: none; } /* In flow. With equal columns the label is centred in whatever the column leaves after the glyph and the caret, so every menu entry's label sits on the same axis as every other menu entry's — and a plain link, having no caret, sits a caret's-width right of them. That last difference is the price of not clipping 保有シミュレーション, and it is 18px. */ .nav-menu > summary .nav-caret { width: 18px; height: 18px; flex: 0 0 18px; transition: transform 0.15s ease; } .nav-menu[open] > summary .nav-caret { transform: rotate(180deg); } .nav-menu-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 280px; padding: var(--revf-space-3); display: flex; flex-direction: column; gap: 1px; background: var(--revf-surface); border: 1px solid var(--revf-border); border-radius: var(--revf-radius-lg); box-shadow: var(--revf-shadow-md); } /* GLOBAL UI SHELL FINAL v1 — the LAST menu opens to the LEFT. Measured at 1280x800, the width this product is most often read at: the 設定 summary starts at x=1059 and the panel is 280px wide, so anchoring it at left:0 put its right edge at 1339 — 59px past the window. The panel did not scroll the page (the header clips nothing), it was simply CUT: 「メールアドレス 設定」 lost its last characters and the whole shortcut list sat half outside the viewport. At 1440 it cleared the edge by 3px, which is not clearance. Anchoring the last menu's panel to its trigger's RIGHT edge fixes it for every desktop width without a script, without measuring anything at runtime and without a second dropdown system: the rule is one declaration pair, and the menus that are NOT last keep opening left-to-right as before. Any menu added after 設定 becomes :last-of-type and inherits the same protection, which is exactly the menu that would need it. */ .main-nav .nav-menu:last-of-type .nav-menu-panel { left: auto; right: 0; } .nav-menu-panel a { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 11px 12px; border-radius: var(--revf-radius-sm); font-size: 16px; font-weight: 600; color: var(--revf-text-primary); white-space: nowrap; } .nav-menu-panel a .revf-icon { width: var(--revf-icon-menu-item); height: var(--revf-icon-menu-item); } .nav-menu-panel a:hover { background: var(--revf-surface-sunken); } .nav-menu-panel a[aria-current="page"] { background: var(--revf-primary-soft); color: var(--revf-primary-hover); font-weight: 800; } .nav-menu-group-label { padding: 8px 10px 4px; font-size: var(--revf-font-size-xs); font-weight: 800; color: var(--revf-text-muted); letter-spacing: 0.04em; } /* "See all settings" — the way out of a short shortcut list into the full, grouped hub. Separated so it does not read as another shortcut. The selector is deliberately more specific than `.nav-menu-panel a` so it wins on cascade rather than with !important. */ .nav-menu-panel a.nav-menu-more { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: var(--revf-space-2); padding-top: 12px; border-top: 1px solid var(--revf-border-faint); border-radius: 0; color: var(--revf-primary-hover); font-weight: 800; } .nav-menu-panel a.nav-menu-more:hover { background: transparent; text-decoration: underline; } /* -- header icons -------------------------------------------- */ .header-icons { display: flex; align-items: center; justify-self: end; gap: var(--revf-space-3); flex: 0 0 auto; } .icon-button { width: 50px; height: 50px; border-radius: 50%; background: var(--revf-surface); border: 1px solid var(--revf-border); display: inline-flex; align-items: center; justify-content: center; color: var(--revf-text-secondary); cursor: pointer; flex: 0 0 auto; } .icon-button:hover { background: var(--revf-surface-sunken); } .icon-button svg { width: var(--revf-icon-control); height: var(--revf-icon-control); } .icon-button.avatar { background: var(--revf-primary-soft); color: var(--revf-primary-hover); font-size: 17px; font-weight: 800; border-color: var(--revf-primary-border); cursor: default; } .notification-bell { position: relative; } .notification-badge { position: absolute; top: -3px; right: -3px; display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: var(--revf-radius-pill); background: var(--revf-danger); color: var(--revf-text-inverse); /* 12px, not the 13px floor: this sits inside a 21px circle on top of the bell, so it has to stay legible without outgrowing its own badge. */ font-size: 12px; font-weight: 800; line-height: 1; border: 2px solid var(--revf-surface); font-variant-numeric: tabular-nums; } .logout-form { margin: 0; } .logout-button { min-height: 50px; padding: 0 18px; font: inherit; font-size: var(--revf-font-size-sm); font-weight: 700; color: var(--revf-primary-hover); background: var(--revf-surface); border: 1px solid var(--revf-primary-border); border-radius: var(--revf-radius-md); cursor: pointer; } .logout-button:hover { background: var(--revf-primary-soft); } /* ============================================================ 4. Page shell ============================================================ */ .dashboard-container { width: min(calc(100% - 2 * var(--revf-content-gutter)), var(--revf-content-width)); margin: 0 auto; } /* UI FOUNDATION v1 — the reading-width opt-out. The content column is wide because REVF's screens are dense. A screen that is mostly PROSE — setup guidance, a confirmation, an explanation of what a destructive action does — is the opposite case: at 1520 its sentences run too long to track from one line to the next. Such a screen adds this modifier and gets a column someone will actually read, in the same place on the page, with the same gutter. */ .dashboard-container--reading { width: min(calc(100% - 2 * var(--revf-content-gutter)), var(--revf-content-width-reading)); } .main-content { padding-top: var(--revf-space-8); padding-bottom: var(--revf-space-12); } /* -- global back affordance ----------------------------------- REVF-GLOBAL-BACK v1. One 「← 戻る」 per screen, always in the same place: under the header (and, for the OWNER, under the mode bar), above the page title, aligned with the left edge of the content column. It is a pill rather than a bare text link for two reasons. A box can be left-aligned with the content edge without the optical negative margin a padded text link would need, and a 44px-high target is reachable with a thumb without inflating the type. It stays quieter than .primary-button and than the page title - neutral surface, faint border, secondary text - and only picks up the teal on hover/focus, so it is findable without competing with the title underneath it. */ /* UI FOUNDATION v1 — and it now FOLLOWS THE SCROLL. 「戻る」 answered 「一歩戻りたい」 only while the top of the page was on screen. On a property list, a broker directory or a detailed analysis — the screens where someone scrolls a long way and then wants out — it had scrolled off, so the answer was 「一番上まで戻ってから戻る」. It sticks under the header rather than over it: --revf-header-height (§1) is the offset, --revf-layer-backbar (12) puts it under the header's 20 and under an open action menu's 15, so nothing that used to be on top of it ends up beneath it. The bar is OPAQUE on purpose. A bare floating pill would let page content run visibly behind it; painting the ground colour across the full width means content passes under a surface, which is what a sticky bar is supposed to look like. It is the ground colour, not a white panel, so the bar itself never reads as one of the page's cards. */ .revf-backbar { position: sticky; top: var(--revf-header-height); z-index: var(--revf-layer-backbar); padding-top: var(--revf-space-4); padding-bottom: var(--revf-space-3); background: var(--revf-background); } /* The bar is opaque, so content stops at a hard edge underneath it. A short fade below that edge says 「まだ下に続いている」 instead of 「ここで切れて いる」, and it is drawn OUTSIDE the bar's own box so it never covers the link or eats into a tap target. */ .revf-backbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none; background: linear-gradient(var(--revf-background), transparent); } .revf-back-link { display: inline-flex; align-items: center; gap: var(--revf-space-2); min-height: 44px; padding: 0 var(--revf-space-4); border: 1px solid var(--revf-border); border-radius: var(--revf-radius-pill); background: var(--revf-surface); box-shadow: var(--revf-shadow-xs); color: var(--revf-text-secondary); font-size: var(--revf-font-size-base); font-weight: 600; line-height: 1; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .revf-back-link:hover { background: var(--revf-primary-soft); border-color: var(--revf-primary-border); color: var(--revf-primary-hover); } .revf-back-link:focus-visible { border-color: var(--revf-primary); color: var(--revf-primary-hover); } .revf-back-icon { display: inline-flex; align-items: center; } .dashboard-section { margin-top: var(--revf-space-8); } .dashboard-section:first-of-type { margin-top: 0; } /* -- page hero ------------------------------------------------ Fifth review pass. A page title was a bare 34px line, while every section below it carried a teal rule and a tinted glyph — so the sections looked more important than the page they were on. The hero gives the top of the screen its own treatment: a glyph that names the page, a larger title, and room for a description that is actually worth reading. It is deliberately not a banner. The tint fades out within the first third of the block, the border is the faint one, and there is no full-width colour bar, so a page with a hero still reads as the same product as a page without one. Screens that are a step INSIDE a section (a detail, an edit form, a confirmation) keep the plain .page-title-row — the hero marks where a task begins, and putting one on every screen would say nothing. */ .page-hero { display: flex; align-items: flex-start; gap: var(--revf-space-5); margin-bottom: var(--revf-space-6); padding: var(--revf-space-8); border: 1px solid var(--revf-border-faint); border-radius: var(--revf-radius-xl); background: linear-gradient(135deg, var(--revf-primary-soft) 0%, var(--revf-surface) 58%); box-shadow: var(--revf-shadow-xs); } .page-hero-icon { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 56px; border-radius: var(--revf-radius-lg); border: 1px solid var(--revf-primary-border); background: var(--revf-surface); color: var(--revf-primary-hover); } .page-hero-icon .revf-icon { width: var(--revf-icon-hero); height: var(--revf-icon-hero); } .page-hero-text { flex: 1 1 auto; min-width: 0; } .page-hero-titleline { display: flex; align-items: center; gap: var(--revf-space-3); flex-wrap: wrap; } .page-hero-title { margin: 0; font-size: 38px; line-height: 1.2; font-weight: 800; color: var(--revf-text-primary); letter-spacing: -0.02em; } /* UI FOUNDATION v1 — the brand hero, used by the dashboard. The header carries the REVF lock-up on every screen, so the dashboard does NOT repeat the logo image directly underneath it. What it was missing is different: the first screen of the product opened with a generic 34px 「ダッシュボード」 and said nothing about whose product it is. The eyebrow says REVF 不動産 Value Finder in the brand's own colour, above the title, and the panel carries a deeper version of the teal wash — so the first thing on screen is REVF, without a second logo and without a new asset. */ .page-hero--brand { border-color: var(--revf-primary-border); background: linear-gradient(135deg, #dff2f1 0%, var(--revf-primary-soft) 34%, var(--revf-surface) 76%); } .page-hero--brand .page-hero-icon { border-color: var(--revf-primary); background: var(--revf-primary); color: var(--revf-text-inverse); } .page-hero--brand .page-hero-eyebrow { color: var(--revf-primary-hover); } .page-hero-eyebrow { margin-bottom: 6px; } /* 74ch, not the full width: a description that runs the width of a 1440 screen is a description nobody finishes. */ .page-hero-description { margin: 10px 0 0; max-width: 74ch; font-size: var(--revf-font-size-md); line-height: 1.75; color: var(--revf-text-secondary); } .page-hero-actions { display: flex; align-items: center; gap: var(--revf-space-3); flex-wrap: wrap; flex: 0 0 auto; align-self: center; } @media (max-width: 900px) { .page-hero { flex-wrap: wrap; padding: var(--revf-space-6); gap: var(--revf-space-4); } .page-hero-icon { width: 48px; height: 48px; flex: 0 0 48px; } .page-hero-icon .revf-icon { width: 30px; height: 30px; } .page-hero-title { font-size: 30px; } .page-hero-description { font-size: var(--revf-font-size-base); line-height: 1.7; } .page-hero-actions { flex: 1 0 100%; align-self: flex-start; } } /* The two property detail screens already open with a block that names the property and shows its headline numbers. Dropping a generic hero on top of that would repeat the title and push the figures below the fold, so they get the hero's reading treatment as a lead paragraph instead. */ .detail-lead { margin: var(--revf-space-3) 0 0; max-width: 74ch; font-size: var(--revf-font-size-base); line-height: 1.75; color: var(--revf-text-secondary); } /* A caveat that belongs to the screen rather than to any one section: the exact provider limits under メールから物件を自動取得, for example. Quieter than the hero description and separated from whatever follows it. */ .page-note { margin: calc(-1 * var(--revf-space-3)) 0 var(--revf-space-6); max-width: 90ch; font-size: var(--revf-font-size-sm); line-height: 1.7; color: var(--revf-text-muted); } /* -- page header (screens one step inside a section) ---------- */ .page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--revf-space-4); margin-bottom: var(--revf-space-6); flex-wrap: wrap; } .page-title { margin: 0; font-size: var(--revf-font-size-2xl); line-height: 1.25; font-weight: 800; color: var(--revf-text-primary); letter-spacing: -0.02em; } .page-description { margin-top: 6px; margin-bottom: 0; font-size: var(--revf-font-size-base); line-height: 1.6; color: var(--revf-text-secondary); } .page-title-actions { display: flex; align-items: center; gap: var(--revf-space-3); flex-wrap: wrap; } .updated-at { font-size: var(--revf-font-size-sm); color: var(--revf-text-secondary); font-variant-numeric: tabular-nums; } /* -- breadcrumb / back link ---------------------------------- */ .revf-backlink { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-size: var(--revf-font-size-sm); font-weight: 700; color: var(--revf-text-secondary); } .revf-backlink:hover { color: var(--revf-primary-hover); } .revf-backlink svg { width: 14px; height: 14px; } /* -- section heading (teal rule, from the original design) ---- */ .section-header { margin-bottom: var(--revf-space-4); padding-left: var(--revf-space-3); border-left: 4px solid var(--revf-primary); display: flex; justify-content: space-between; align-items: center; gap: var(--revf-space-3); flex-wrap: wrap; } .section-title { margin: 0; font-size: var(--revf-font-size-lg); line-height: 1.35; font-weight: 800; color: var(--revf-text-primary); letter-spacing: -0.01em; } /* 15px and a full 44px hit area: this is the "see all" affordance and it was being overlooked at 13px in a 36px box. */ .section-link { display: inline-flex; align-items: center; gap: 3px; min-height: 44px; padding: 0 2px; font-size: 15px; font-weight: 700; color: var(--revf-primary-hover); } .section-link:hover { text-decoration: underline; } .section-link svg { width: 17px; height: 17px; } /* ============================================================ 5. Banners (status / flash / error) ============================================================ */ .status-banner, .revf-banner { display: flex; align-items: flex-start; gap: var(--revf-space-2); margin-bottom: var(--revf-space-5); padding: 12px 16px; border-radius: var(--revf-radius-md); border: 1px solid var(--revf-primary-border); background: var(--revf-primary-soft); color: var(--revf-primary-hover); font-size: var(--revf-font-size-sm); font-weight: 700; line-height: 1.6; } .revf-banner--info { border-color: var(--revf-info-border); background: var(--revf-info-soft); color: var(--revf-info); } .revf-banner--success { border-color: var(--revf-success-border); background: var(--revf-success-soft); color: var(--revf-success); } .revf-banner--warning { border-color: var(--revf-warning-border); background: var(--revf-warning-soft); color: var(--revf-warning); } .revf-banner--danger, .error-banner { border-color: var(--revf-danger-border); background: var(--revf-danger-soft); color: var(--revf-danger); } /* ============================================================ 6. Buttons ============================================================ */ .revf-button, .primary-button, .secondary-button, .danger-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: var(--revf-radius-md); border: 1px solid transparent; font: inherit; font-size: var(--revf-font-size-sm); font-weight: 700; text-align: center; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .revf-button svg, .primary-button svg, .secondary-button svg, .danger-button svg { width: var(--revf-icon-action); height: var(--revf-icon-action); } /* primary */ .revf-button--primary, .primary-button { background: var(--revf-primary); border-color: var(--revf-primary); color: var(--revf-text-inverse); box-shadow: var(--revf-shadow-xs); } .revf-button--primary:hover, .primary-button:hover { background: var(--revf-primary-hover); border-color: var(--revf-primary-hover); } /* secondary / outline */ .revf-button--secondary, .secondary-button { background: var(--revf-surface); border-color: var(--revf-border-strong); color: var(--revf-text-primary); } .revf-button--secondary:hover, .secondary-button:hover { background: var(--revf-surface-sunken); } /* quiet / ghost */ .revf-button--ghost { background: transparent; border-color: transparent; color: var(--revf-primary-hover); } .revf-button--ghost:hover { background: var(--revf-primary-soft); } /* destructive */ .revf-button--danger, .danger-button { background: var(--revf-surface); border-color: var(--revf-danger-border); color: var(--revf-danger); } .revf-button--danger:hover, .danger-button:hover { background: var(--revf-danger-soft); } /* GLOBAL UI SHELL FINAL v1: 40px, not 34px. --sm is the compact button, not a chip: 絞り込み / リセット on 自動取得物件, 「希望条件を保存」, 「自動収集の設定を保存」 and the 再取込 controls all wear it, and every one of them is a real operation a member performs. At 34px it sat below the 40px pointer floor the rest of this sheet keeps, and the phone sheet's generic 44px rule on the `button` ELEMENT never reached it — a class selector outranks an element one, so the 34px survived the small screen too. The floor is therefore set HERE, where the modifier is defined, and lifted to 44px on the phone alongside it in mobile_responsive.css. (No braces in this comment on purpose: test_ui_shell's base_rule reader scans raw characters for them, so a brace in prose detaches the rule below from its selector and every assertion about it silently reads nothing.) Static chips and badges (.revf-chip, .dir-pill-count) are untouched: they are not controls, and padding them out to a tap target would say they were. */ .revf-button--sm { min-height: 40px; padding: 0 14px; font-size: var(--revf-font-size-xs); } .revf-button[disabled], .revf-button.is-disabled, button[disabled] { opacity: 0.55; cursor: not-allowed; } .revf-button-row { display: flex; align-items: center; gap: var(--revf-space-2); flex-wrap: wrap; } /* Stage WEB-5: a one-button POST form sitting inline next to a link inside a table cell (the 再取込 action on the failure triage lists). A
is a block element, so without this it would push the row's other action onto its own line at every width; inline-block keeps the pair side by side on a wide table and lets them wrap on a narrow one. The button inside keeps the shared .revf-button sizing, so the touch target is unchanged. */ .revf-inline-form { display: inline-block; margin: 0; vertical-align: middle; } /* ============================================================ 7. Forms ============================================================ */ .revf-form-section { margin-bottom: var(--revf-space-6); padding: var(--revf-space-5); background: var(--revf-surface); border: 1px solid var(--revf-border); border-radius: var(--revf-radius-lg); box-shadow: var(--revf-shadow-xs); } .revf-form-section-title { margin: 0 0 var(--revf-space-4); padding-bottom: var(--revf-space-3); border-bottom: 1px solid var(--revf-border-faint); font-size: var(--revf-font-size-md); font-weight: 800; color: var(--revf-text-primary); } .revf-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--revf-space-4); } .revf-field, .form-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .revf-field > label, .form-field > label { font-size: var(--revf-font-size-sm); font-weight: 700; color: var(--revf-text-primary); } .revf-field-required { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--revf-radius-pill); background: var(--revf-danger-soft); border: 1px solid var(--revf-danger-border); color: var(--revf-danger); font-size: 13px; font-weight: 800; vertical-align: middle; } .revf-field-optional { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--revf-radius-pill); background: var(--revf-neutral-soft); border: 1px solid var(--revf-neutral-border); color: var(--revf-text-secondary); font-size: 13px; font-weight: 700; vertical-align: middle; } .revf-field-hint, .form-field-hint { font-size: var(--revf-font-size-xs); color: var(--revf-text-secondary); line-height: 1.6; } .revf-field-error { display: flex; align-items: flex-start; gap: 5px; font-size: var(--revf-font-size-xs); font-weight: 700; color: var(--revf-danger); } .revf-field-error::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; border-radius: 50%; background: var(--revf-danger); color: var(--revf-text-inverse); font-size: 12px; font-weight: 800; } input[type="text"], input[type="search"], input[type="number"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], select, textarea { min-height: 42px; padding: 9px 11px; border: 1px solid var(--revf-border-strong); border-radius: var(--revf-radius-md); background: var(--revf-surface); color: var(--revf-text-primary); font: inherit; font-size: var(--revf-font-size-sm); line-height: 1.5; max-width: 100%; } textarea { min-height: 96px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--revf-primary); box-shadow: var(--revf-focus-ring); } input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], .revf-field.has-error input, .revf-field.has-error select, .revf-field.has-error textarea { border-color: var(--revf-danger); } input[aria-invalid="true"]:focus, .revf-field.has-error input:focus { box-shadow: 0 0 0 3px rgba(182, 54, 45, 0.2); } input[disabled], select[disabled], textarea[disabled], input[readonly] { background: var(--revf-surface-sunken); color: var(--revf-text-secondary); } input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--revf-primary); } .revf-check { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; font-size: var(--revf-font-size-sm); font-weight: 600; cursor: pointer; } .revf-form-actions { display: flex; align-items: center; gap: var(--revf-space-3); flex-wrap: wrap; margin-top: var(--revf-space-6); padding-top: var(--revf-space-5); border-top: 1px solid var(--revf-border-faint); } /* ============================================================ 8. Cards & stat tiles ============================================================ */ .revf-card { background: var(--revf-surface); border: 1px solid var(--revf-border); border-radius: var(--revf-radius-lg); box-shadow: var(--revf-shadow-xs); padding: var(--revf-space-5); } .revf-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--revf-space-3); margin-bottom: var(--revf-space-4); flex-wrap: wrap; } .revf-card-title { margin: 0; font-size: var(--revf-font-size-md); font-weight: 800; color: var(--revf-text-primary); } /* -- panel: the shared SECTION shell ------------------------- UI FOUNDATION v1. .revf-card is one thing on a page — a property, a broker, a figure. A SECTION of a screen is a different job: it has a heading, optional supporting text, optional status, optional actions, a body, and sometimes a footer of meta information. Every screen was building that by hand out of .revf-card plus .section-header plus its own spacing, so 「セクションの境目 が分からない」 was true even where each part was correct. One shell, five parts, all optional but the body:

…

…

chips / buttons
…
…
The head is separated by a real rule, not by whitespace, and it sits on the muted surface — so a section boundary survives being next to another section, which is precisely what a whitespace-only boundary does not. It is not a framework. It is a box with a header and a footer, and it is here because 物件 / 金融機関 / 仲介業者 / 分析ブロック all need exactly this and would otherwise each grow their own. */ .revf-panel { background: var(--revf-surface); border: 1px solid var(--revf-border); border-radius: var(--revf-radius-lg); box-shadow: var(--revf-shadow-sm); overflow: hidden; } .revf-panel + .revf-panel { margin-top: var(--revf-space-6); } .revf-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--revf-space-4); flex-wrap: wrap; padding: var(--revf-space-4) var(--revf-space-6); border-bottom: 1px solid var(--revf-border-faint); background: var(--revf-surface-muted); } .revf-panel-heading { display: flex; align-items: center; gap: var(--revf-space-3); flex-wrap: wrap; min-width: 0; } /* The teal rule from .section-header, kept: it is REVF's section marker and a panel heading is a section heading. */ .revf-panel-title { margin: 0; padding-left: var(--revf-space-3); border-left: 4px solid var(--revf-primary); font-size: var(--revf-font-size-lg); line-height: 1.35; font-weight: 800; letter-spacing: -0.01em; color: var(--revf-text-primary); } .revf-panel-sub { margin: 0; max-width: 74ch; font-size: var(--revf-font-size-sm); line-height: 1.7; color: var(--revf-text-secondary); } .revf-panel-actions { display: flex; align-items: center; gap: var(--revf-space-3); flex-wrap: wrap; } .revf-panel-body { padding: var(--revf-space-6); } /* A body that is entirely a table or a list of rows draws its own separators, so the panel must not add a second inset around them. */ .revf-panel-body--flush { padding: 0; } .revf-panel-meta { padding: var(--revf-space-3) var(--revf-space-6); border-top: 1px solid var(--revf-border-faint); background: var(--revf-surface-muted); font-size: var(--revf-font-size-xs); color: var(--revf-text-muted); } /* One horizontal rule, one definition. Used inside a panel body to separate two groups that are the same kind of thing. */ .revf-divider { height: 1px; margin: var(--revf-space-5) 0; border: 0; background: var(--revf-border-faint); } @media (max-width: 640px) { .revf-panel-head { padding: var(--revf-space-4); } .revf-panel-body { padding: var(--revf-space-4); } .revf-panel-meta { padding: var(--revf-space-3) var(--revf-space-4); } } /* -- typography helpers -------------------------------------- UI FOUNDATION v1. The type SCALE already existed as tokens; what did not exist was a name for the two roles screens kept re-inventing inline — the small label above a heading, and the number that is the whole point of the block it sits in. The hierarchy these complete, largest first: .page-hero-title 38 page title .section-title / .revf-panel-title 22 section title .revf-card-title 17 card title body 15 body .revf-meta 13 meta / helper text .revf-figure 30 the number a screen exists to show .revf-figure is the answer to 「重要な数字が他の文字に埋もれる」: tabular figures, one weight above everything around it, and a unit that is deliberately NOT the same size as the number. */ .revf-eyebrow { display: block; margin: 0 0 var(--revf-space-1); font-size: var(--revf-font-size-xs); font-weight: 800; letter-spacing: 0.08em; color: var(--revf-text-muted); } .revf-meta { margin: 0; font-size: var(--revf-font-size-xs); line-height: 1.7; color: var(--revf-text-muted); } .revf-figure { display: inline-flex; align-items: baseline; gap: 3px; font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--revf-text-primary); font-variant-numeric: tabular-nums; } .revf-figure-unit { font-size: var(--revf-font-size-sm); font-weight: 700; color: var(--revf-text-secondary); } /* The tone modifiers exist so a figure can carry the SAME semantic colour vocabulary as a chip does — never as the only signal, always beside a label that says what the number is. */ .revf-figure--positive { color: var(--revf-success); } .revf-figure--warning { color: var(--revf-warning); } .revf-figure--danger { color: var(--revf-danger); } .revf-figure--primary { color: var(--revf-primary-hover); } /* -- stat tiles (KPI row) ------------------------------------ */ .metric-grid, .revf-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--revf-space-4); } /* The dashboard's KPI row is exactly FIVE — the five steps a property travels. ACQUIRED PROPERTY WORKSPACE v1 laid them out three across, wrapping to 3 + 2. Measured at 1280x800 that leaves the second row with a HOLE the width of a whole card on its right, and the break falls between 抽出した潜在価値物件 and 金融機関融資候補物件 — mid-sentence, in the middle of the judgement the member is being walked through. GLOBAL UI SHELL FINAL v1 lays the same five cards out 2 + 3 on a six-column track, so both rows are full AND the break now falls where the product's own flow already breaks: row 1 本日の自動取得物件 ／ 自動取得物件 — 何が届いたか row 2 抽出した潜在価値物件 ／ 金融機関融資候補物件 ／ 詳細分析物件 — どう判断するか Steps 1-2 happen without the member (REVF が取得); steps 3-5 are where they look, compare and choose. That is the same 取得 → 抽出 → 融資 → 詳細分析 ordering the flow rail on 自動取得物件 already carries, so the dashboard is not inventing a second reading of the pipeline — it is showing the one the rest of the product uses. Above 1500px the five open back out into ONE row, as they did before: at that width a two-card row is 740px wide holding 250px of content, which is the 「白い箱が並んでいるだけ」 the wrapping was meant to cure, and the whole pipeline fits on one line with room for every card's meaning and action. The phone sheet stacks them (2-up at 768, 1-up at 560) and resets the spans with them. */ .dashboard-kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--revf-space-5); } .dashboard-kpi-grid > * { grid-column: span 2; } .dashboard-kpi-grid > :nth-child(-n + 2) { grid-column: span 3; } @media (min-width: 1500px) { .dashboard-kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* The spans come off with the six-column track, or two of the five cards would still be claiming three columns of a five-column grid. */ .dashboard-kpi-grid > *, .dashboard-kpi-grid > :nth-child(-n + 2) { grid-column: span 1; } } /* A KPI card is four lines tall now (label / figure / meaning / action), so its glyph is pinned to the TOP of that block instead of floating at its middle: centred against four lines it read as a separate mark sitting beside the card rather than as the label's own icon. Scoped to the dashboard's row — .metric-card is reused lower down the same page as a plain two-line count box (問い合わせ対応案件), where centring is still right. */ .dashboard-kpi-grid .metric-card { align-items: flex-start; } .dashboard-kpi-grid .metric-icon { margin-top: -4px; } /* The window a count was taken inside (表示期間 1ヶ月). Quiet: it explains the number above it, it is not a second number. */ .metric-note { margin-top: 2px; font-size: var(--revf-font-size-xs); color: var(--revf-text-muted); line-height: 1.3; } /* GLOBAL UI SHELL FINAL v1 — WHAT the number counts, in one line. The five KPI cards were a label, a figure and a tinted box. That is enough to recognise a screen you already know and nothing at all to someone meeting the product: 「抽出した潜在価値物件 7件」 does not say who extracted them, out of what, or why these seven. The meaning line is that sentence, and its wording comes from the destination screen's own hero rather than from a second description invented here. It is not a second figure and must never read as one: text weight, secondary colour, sitting under the number it explains. .metric-note (表示期間) stays quieter still, below this — the window a count was taken inside is a qualification of the number, not a description of the population. */ .metric-meaning { margin-top: 6px; font-size: var(--revf-font-size-xs); line-height: 1.45; font-weight: 600; color: var(--revf-text-secondary); } /* GLOBAL UI SHELL FINAL v1 — the card's own door. The whole card has been a link since Stage WEB-2, but nothing on it SAID so: a tinted rectangle with a number in it reads as a readout, and a reader who never hovers never learns the number is a way in. This is the affordance, worded as the thing that happens (「投資候補を見る」), in the product's link colour with the same chevron every other 「…へ」 link in this sheet uses. Deliberately NOT a button. A button inside a link is a second, competing target and would invite a nested