/* ═══════════════════════════════════════════════════════════════════════ css/base/home_tiles.css — entity homepage section tiles · 2026-06-11 ONE SHARED PLACE for the homepage tile design (each __/index.php links this file — edit here, every homepage follows). Design: the tile face adopts the TOP-NAV HEADER BUTTON style (dark entity chrome, thin gold border, mono uppercase label, gold number). Behind each face sits an 83×83 px BACKING SQUARE in the entity's darker tone — the face is centred in it with 5 px padding all round, and the square wears a 3 px FEATHERED border (blurred gold ring). All colours come from the entity skin tokens (--nav-bg / --nav-gold / --nav-text…), so the same file renders correctly on every site. ═══════════════════════════════════════════════════════════════════════ */ /* Entity background extends to the scrollbar track — prevents a white strip on the right edge when the page height exceeds the viewport. */ html { background: var(--page-bg); } /* DEEP entity bg — matches the library / portals */ /* The hero starts at the TOP of the page (title right under the nav) — overrides each page's vertical centering, shared for ALL homepages. */ main[class*="-hero"] { justify-content: flex-start; min-height: 0; padding-top: 34px; } .portal-tiles { margin-top: 44px; display: grid; grid-template-columns: repeat(4, 83px); /* cell = the 83px backing square */ gap: 16px; justify-content: center; width: 100%; } @media (max-width: 460px) { .portal-tiles { grid-template-columns: repeat(2, 83px); } } /* ── TOOL ROW — the FIRST row (above the section grid): the entity's Skin Manager + its own Site Map. Same face + backing design. */ .tool-row { margin-top: 44px; display: grid; grid-template-columns: repeat(2, 83px); gap: 16px; justify-content: center; width: 100%; } .tool-row + .portal-tiles { margin-top: 16px; } /* section grid follows at the grid gap */ .tool-row .ptile-ico { color: var(--nav-gold, #B8832A); height: 20px; } .tool-row .ptile-ico svg { width: 20px; height: 20px; display: block; } .tool-row .ptile-name { text-transform: none; letter-spacing: 0.03em; } /* The FACE — same recipe as the header nav buttons (.darx-nav-link). The 5px margin centres the 73px face inside the 83px grid cell. */ .portal-tiles .ptile, .tool-row .ptile { position: relative; width: 73px; height: 73px; margin: 5px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px; text-align: center; border-radius: var(--tile-radius, 6px); text-decoration: none; /* RECOLOURABLE + emboss-preserving (skin group "Bands & Tiles"). The bevel is a light-top / dark-bottom mix off the chosen --tile-color, scaled by --emboss-strength, so the 3-D survives at ANY luminance; the halo = --glow-color × --glow-strength. Inner-ring width/colour + radius + border are skin controls too. Leave a colour field blank → inherits the nav colours. 2026-06-24 user. */ --_tile: var(--tile-color, var(--nav-bg, #23282F)); --_es: var(--emboss-strength, 100); --_gc: var(--glow-color, var(--nav-gold, #B8832A)); --_gs: var(--glow-strength, 100); --_ring: var(--tile-ring, 5px); background: linear-gradient(180deg, color-mix(in srgb, var(--_tile), #fff calc(var(--_es) * 0.4%)) 0%, color-mix(in srgb, var(--_tile), #000 calc(var(--_es) * 0.32%)) 100%); border: var(--tile-border, 1px) solid color-mix(in srgb, var(--_gc) 50%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, transparent, #fff calc(var(--_es) * 0.56%)), inset 0 -1px 0 color-mix(in srgb, transparent, #000 calc(var(--_es) * 0.44%)); transition: border-color .15s ease, background .15s ease, transform .12s ease, box-shadow .15s ease; } /* The BACKING SQUARE — 83×83 (face 73 + 5px padding), darker tone + the gold halo, both from the skin controls (so recolouring keeps the ring). */ .portal-tiles .ptile::before, .tool-row .ptile::before { content: ''; position: absolute; inset: calc(-1 * var(--_ring)); z-index: -1; border-radius: calc(var(--tile-radius, 6px) + var(--_ring)); /* ring fill = the skin "Tile inner-ring colour", or derived darker tile if blank */ background: var(--tile-ring-color, color-mix(in srgb, var(--_tile), #000 calc(var(--_es) * 0.6%))); box-shadow: 0 0 4px 3px color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.38%)), 0 6px 16px -5px rgba(0, 0, 0, 0.5); } /* ── HOVER = DEBOSSED (pressed IN), 2026-07-24 user ──────────────────────── Was a RAISE: the gradient mixed ~67% white in, the tile lifted -2px and lit an outer halo, so hovering made the tile bulge OUT and go pale. The user's tiles are meant to press IN under the pointer. The deboss is the resting bevel INVERTED, so it stays a real 3-D read at any tile colour and still rides --emboss-strength: · gradient flipped — DARK at the top, lighter at the bottom (light now comes from below, which is what a recess looks like); · inner shadow moved to the TOP edge and the highlight to the BOTTOM edge (resting state is the exact opposite); · no lift — a 1px nudge DOWN instead of 2px up; · the outer halo is dropped on hover (a glow reads as "raised"), leaving only the ring border in --glow-color so the target is still obvious. :active presses a touch deeper again. */ .portal-tiles .ptile:hover, .tool-row .ptile:hover { border-color: var(--_gc); background: linear-gradient(180deg, color-mix(in srgb, var(--_tile), #000 calc(var(--_es) * 0.34%)) 0%, color-mix(in srgb, var(--_tile), #fff calc(var(--_es) * 0.10%)) 100%); transform: translateY(1px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_gc) 45%, transparent), inset 0 2px 4px color-mix(in srgb, transparent, #000 calc(var(--_es) * 0.50%)), inset 0 -1px 0 color-mix(in srgb, transparent, #fff calc(var(--_es) * 0.34%)); } .portal-tiles .ptile:active, .tool-row .ptile:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_gc) 55%, transparent), inset 0 3px 6px color-mix(in srgb, transparent, #000 calc(var(--_es) * 0.66%)); } .portal-tiles .ptile-num { font-family: var(--font-mono); font-size: var(--ui-fs-value); font-weight: 500; letter-spacing: 0.08em; color: color-mix(in srgb, var(--nav-gold, #B8832A) 65%, transparent); } .portal-tiles .ptile-name, .tool-row .ptile-name { font-family: var(--font-mono); font-size: var(--ui-fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.25; /* normal = Nav button text; HIGHLIGHTED on hover = Nav button text (highlighted) */ color: var(--nav-text, #F1E9D8); transition: color .16s ease; } .portal-tiles .ptile:hover .ptile-name, .portal-tiles .ptile:focus-visible .ptile-name, .tool-row .ptile:hover .ptile-name, .tool-row .ptile:focus-visible .ptile-name { color: var(--nav-text-hover, #F1E9D8); /* skin --shadow-strong token + a SHARP near-black core: a wide *soft* shadow is invisible on the dark platform tile, so the sharp layer is what actually reads. */ text-shadow: var(--shadow-strong, 0 6px 18px rgba(0,0,0,.4)), 0 2px 4px rgba(0,0,0,.97), 0 5px 16px rgba(0,0,0,.85); } /* logotype (icon) gets the same layered drop shadow on hover */ .portal-tiles .ptile-ico, .tool-row .ptile-ico { transition: filter .16s ease, transform .16s ease, color .16s ease; } .portal-tiles .ptile:hover .ptile-ico, .portal-tiles .ptile:focus-visible .ptile-ico, .tool-row .ptile:hover .ptile-ico, .tool-row .ptile:focus-visible .ptile-ico { filter: drop-shadow(var(--shadow-strong, 0 6px 16px rgba(0,0,0,.4))) drop-shadow(0 2px 4px rgba(0,0,0,.92)) drop-shadow(0 5px 14px rgba(0,0,0,.7)); } /* Live document count — corner chip. Roboto, NOT JetBrains Mono: the mono dotted zero reads like an 8 at this size. */ .portal-tiles .ptile-count { position: absolute; right: 3px; bottom: 3px; font-family: var(--font-sans); font-size: var(--ui-fs-micro); font-weight: 600; letter-spacing: 0.03em; padding: 0 4px; border-radius: 999px; color: var(--nav-gold, #B8832A); border: 1px solid color-mix(in srgb, var(--nav-gold, #B8832A) 55%, transparent); background: rgba(0, 0, 0, 0.28); } /* Index badge — top-left corner number for the page-hub tiles (12/index.php). Opt-in: only renders where a .ptile-num span exists, so other tile pages are untouched. Mirrors .ptile-count. 2026-06-25 user. */ .ptile .ptile-num { position: absolute; top: 4px; left: 6px; z-index: 3; font-family: var(--font-sans); font-size: var(--ui-fs-micro); font-weight: 700; line-height: 1; letter-spacing: 0.02em; padding: 2px 5px; border-radius: 999px; color: var(--nav-gold, #B8832A); border: 1px solid color-mix(in srgb, var(--nav-gold, #B8832A) 55%, transparent); background: rgba(0, 0, 0, 0.28); } /* ── TOOL TILES — subtly different material from section tiles. Muted border + deeper background reads as "admin control", not content. */ .tool-row .ptile-tool { /* same recolour + emboss vars as .ptile (defined there, same element). 2026-06-24 user. */ border-color: color-mix(in srgb, var(--_gc) 28%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--_tile), #fff calc(var(--_es) * 0.32%)) 0%, color-mix(in srgb, var(--_tile), #000 calc(var(--_es) * 0.36%)) 100%); } .tool-row .ptile-tool::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.65%)) 30%, color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.65%)) 70%, transparent 100%); border-radius: 6px 6px 0 0; pointer-events: none; } .tool-row .ptile-tool:hover { border-color: color-mix(in srgb, var(--_gc) 70%, transparent); }