Platform Page Design — Visual Reference

Established Standards

File Naming: ENTITY_CATEGORY_DESCRIPTION_YYYYMMDD.ext — DARMASTER for platform docs, underscores only, date is TODAY.

Folder Placement: TXT → __darmaster\11\0101\txt\ | HTML → __darmaster\11\0102\html\

Delivery: Every file ends with clickable link + full C:\MAMP\htdocs\... path.

Entity Names (NEVER truncate): DARX = Daralbeida Brands LLC | DARH = Daralbeida Holdings LLC | DARM = Daralbeida Maroc SARL

Design Rules: Light background + dark text for docs (never platform theme). Tokens only (never hardcoded colours/fonts). Pages = deep dark, cards = fixed #F6F1E6. All buttons use bevel recipe. See full rules in design_requirements_master.md.

Part 5 — Chrome: Top Nav Bar

Entity Wordmark Row (top-left corner)

The entity name in Cinzel Decorative, uppercase, 16px, faint ivory. Links to the entity's consumer home (index.php).

Live on every internal page:

DARH Home DARX Home DARM Home

Spec: Part 5, Row 1

DARMASTER INTRANET Badge (top-right)

Uniform across all pages. White text, same bevel button recipe as nav tabs. Links to DARMASTER cockpit.

DARH Section 01 DARMASTER Home

Spec: Part 5, Row 1

Eight Section Buttons (4-column grid)

Resting: 2-stop gradient + gold hairline + inset bevel. Hover: gold glow + lifted. Active: gold text + inset shadow.

DARH Library (08 active) DARM Section 01 DARMASTER Overview

Spec: Part 5, Row 2 — Part 7 (Bevel Button Recipe)

Position: Sticky (never auto-hides)

Nav stays pinned at top:0. Scroll down and it remains visible.

DARH Section 02 — scroll to test

Spec: Part 5; Part 12.4

Part 6 — Chrome: Bottom Footer Bar

Icon-Only Button Row (6 buttons + scroll %)

INTRANET · BACK · HOME · FORWARD · SITEMAP · GUIDE — Plus scroll % on far right. Fixed at bottom, always visible.

DARH Section 03 — scroll to test

Spec: Part 6

HOME Button Target

⌂ HOME leads to manager home (home.php), NOT consumer index. Different from the nav wordmark.

DARH Manager Home DARH Consumer Home

Spec: Part 6

Smart Chrome (slides down on scroll)

Footer slides out when scrolling down; returns on scroll-up or bottom-edge pointer peek.

DARMASTER Library — long page, good for testing

Spec: Part 6

Part 7 — The Bevel Button Recipe

Resting State: Dark Gradient + Gold Hairline

linear-gradient(180deg, --nav-bg 82%, --nav-bg 88%) + 1px solid (--nav-gold 32%) + inset bevel highlights. Every nav button, every footer button, every form button.

DARH Section 01 — nav tabs at rest

Spec: Part 7, RESTING STATE

Hover State: Gold Glow + Lift

Gold edge intensifies, gold halo blooms, text brightens, 1px lift. NO underline, NO white text.

DARH Section 02 — hover nav buttons

Spec: Part 7, HOVER STATE

Active State: Inset Shadow (Pressed Feeling)

Gradient inverts, inset shadow deepens, looks pushed-in. Active nav button = gold text + inset glow.

DARH Section 05 — tab 05 highlighted DARM Section 04 — tab 04 highlighted

Spec: Part 7, ACTIVE STATE

Part 8 — Page Type: Entity Homepage

Deep Entity Background + Gold Radial Glow

Page background = 84% entity nav-bg + white. Faint gold radial glow near top lifts the page.

DARX DARX Home (brown) DARH DARH Home (blue) DARM DARM Home (green)

Spec: Part 8.1

Centred Hero Title + Subhead + Lede

H1 in Cinzel Decorative, gold-tinted ivory. Subhead mono 0.72rem uppercase. Lede in body serif, muted light. All centre-aligned.

DARM Home

Spec: Part 8.2

Tile Group Panels (Very Round, Gold Border)

Each group: border-radius 32px, semi-dark background, 1.5px gold border. Caption above in mono uppercase. Two groups: LIBRARY CONTROLS (2 tiles) + SECTIONS (8 tiles).

DARH Home — scroll to see groups

Spec: Part 8.3–8.4

Circular Tiles with Animated Sheen

Each tile: border-radius 50% (perfect circle). On hover, diagonal gold sheen sweeps across it.

DARM Home — hover over all tiles

Spec: Part 8.4

Part 9 — Page Type: Section Portal

Section Main Header (Cinzel Decorative Brand Header)

Large title in var(--font-display) above toolbar. Brand-style header, not locked h1 title font.

DARH Section 02 DARM Section 06

Spec: Part 9.2

Sticky Toolbar Pins Under Nav

Toolbar (.portal-toolbar) is sticky at top: var(--nav-h-real) — pins just below nav, doesn't scroll away.

DARH Section 03 — scroll to test

Spec: Part 9.3; Part 12.4

Document List Rows (Light Ivory + Entity Colour Left Border)

Each row: background var(--row-bg) (#F6F1E6), left border 3px solid in file entity colour, truncated title, status LED on right.

DARH Section 04

Spec: Part 9.4

Part 10 — Page Type: Document Library (/08)

Four Nested Band Layers (Entity Colour Gradient)

L1 entity 44% colour. L2 section 30% colour. L3 dept 18% colour. L4 file rows use --row-bg (#F6F1E6). All text #33312E ink.

DARH Library — click to expand DARM Library — different entity colour

Spec: Part 10.2

Count Chips (Debossed Wells, Not Raised Pills)

RECESSED wells: inset shadow on top (the recess), light lip on bottom. Entity-coloured numeral inside. On ALL band labels.

DARMASTER Library

Spec: Part 10.6

Status LED (Glassy Dome Inside Dark Chip)

Each document has an LED: green live, amber review, red unpublished, gray archived. 9px glassy dome (radial gradient) inside dark icon chip.

DARH Library — check different LEDs, click rows to expand

Spec: Part 10.5

Toolbar: Full-Width Dark Band, 28px Controls

All toolbar buttons/filters exactly 28px tall, squared corners (2px), mono uppercase. Search flexes, filters/view toggles fixed width.

DARMASTER Library

Spec: Part 10.6

Part 13 — Two-Panel Gutter Layout (Collapsible Left & Right Rails)

Wide Viewport (>1239px): Rails Float Into Gutters

Left rail floats into left margin via float:left; margin-left:-260px. Right rail mirrors on right. Both sticky. Content column stays full 700px width.

Doc Registry — desktop view, see both rails

Spec: Part 13.2

Narrow Viewport (≤1239px): Off-Canvas Drawers

Rails become fixed drawers hidden off-screen. Edge handles (27×38px): left is gold, right is accent #E2BF83. Tap to open drawer.

Doc Registry — resize to narrow, see edge handles

Spec: Part 13.3–13.5

Content Column Always 700px Centred (CRITICAL)

The outer wrapper (.f5_main) IS the 700px column — NOT full-width. Negative-margin gutters only work when the wrap is the column.

Doc Registry — resize to test, content stays centred

Spec: Part 13.1

Scrim Behind Open Drawer

When drawer opens, full-viewport semi-transparent scrim appears (rgba(0,0,0,.50)) behind it. Tap scrim to close drawer.

Doc Registry — narrow screen, open drawer, tap scrim

Spec: Part 13.4