to lay them out in columns on a monitor. Below 1280px .oko-grid is a plain block, so phone + iPad stack exactly as before - the grid never activates on those screens. */ @media (min-width: 1280px) { .oko-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.2rem; align-items: start; } .oko-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } .oko-grid .span-2 { grid-column: 1 / -1; } /* a panel that should stay full-width inside the grid */ } /* Big monitors (your 24"+ at 1080p/1440p): step up to 3 columns so tiles fill the row. */ @media (min-width: 1560px) { .oko-grid { grid-template-columns: 1fr 1fr 1fr; } } /* Logo block sits in its own row above the header. Matches worker_home's logo position and 36/44/52 scale. */ .logo-row { display: flex; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 1.4rem) 0 0.6rem; } .logo-row img { height: 36px; width: auto; display: block; } @media (min-width: 700px) { .logo-row img { height: 44px; } } @media (min-width: 1000px) { .logo-row img { height: 52px; } } /* Header: title on the left, avatar + bell on the right (bell is auto-injected by oko-notifications.js right before the avatar). All three vertically centred. */ header { display: flex; align-items: center; gap: 0; padding: 0.6rem 0; margin: 0 0 0.4rem; background: transparent; justify-content: flex-start; } /* The bell is injected by oko-notifications.js between any leading content and the avatar. Belt-and-braces auto-margin here so per-page header rules can't accidentally push it into the middle. */ header .oko-notif-bell { margin-left: auto; } header .title { font-family: var(--display); font-weight: 400; font-size: 1.7rem; line-height: 1; letter-spacing: -0.005em; color: var(--ink); } /* Standard solid-circle avatar: ink-coloured bg with bg-coloured content. Scoped to `header` so per-page .avatar (e.g. identity cards) isn't overridden. */ header .avatar { flex-shrink: 0; margin-left: auto; /* pushes avatar (and bell, which inserts before it) to the right */ width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--bg); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: opacity 0.15s ease; } header .avatar:active { opacity: 0.6; } header .avatar .avatar-initials, header .avatar-initials { font-family: var(--display); font-size: 0.95rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; color: var(--bg); } @media (min-width: 700px) { header .avatar { width: 46px; height: 46px; } header .avatar-initials { font-size: 1.15rem; } } @media (min-width: 1000px) { header .avatar { width: 54px; height: 54px; } header .avatar-initials { font-size: 1.35rem; } } /* ============================================================ OPTION A - anchored card sections. Shared by every home page so each group reads as a distinct object instead of melting into a flat list. Every boundary is built from --ink / --bg (fill + weight + the inverted block) - never a new colour - so each page's own colourway just works. Page anatomy:

HEADING

...tile-row buttons...

and ONE inverted anchor near the top:

...status / what-needs-you...

============================================================ */ :root { --oko-line: color-mix(in srgb, var(--ink) 22%, transparent); --oko-edge: color-mix(in srgb, var(--ink) 46%, transparent); --oko-muted: color-mix(in srgb, var(--ink) 60%, transparent); } /* Section heading above each card - one size everywhere, with air. The legacy per-page heading classes are aliased here so every home's headings unify with no per-page edits (this stylesheet loads last, so it wins over the pages' own definitions). */ .section-eyebrow, .fin-group, .group, .eyebrow, .section-label { display: flex; align-items: center; gap: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 700; color: var(--ink); margin: 2.3rem 0 0.7rem; } .section-eyebrow:first-of-type, .fin-group:first-of-type, .group:first-of-type, .eyebrow:first-of-type, .section-label:first-of-type { margin-top: 1.2rem; } .section-eyebrow .se-ico { width: 15px; height: 15px; opacity: 0.9; flex-shrink: 0; } /* The card that wraps a section's rows/content: a clean OUTLINE only - no fill, no inversion - so it renders identically on every colourway. ONE level only, no nesting. */ .oko-card { background: transparent; border: 1px solid var(--oko-line); border-radius: 16px; padding: 0.3rem 1.15rem; margin: 0 0 1.5rem; } /* On desktop a card can also BE the grid (rows are its direct children). */ @media (min-width: 1280px) { .oko-card.oko-grid { padding: 0.3rem 1.4rem; column-gap: 2.6rem; } } /* The ONE priority group ("what needs you / now"): it stands out by a heavier edge + (page's own) serif numerals - emphasis through weight, never colour - so it travels across every colourway untouched. */ .oko-card.focal { border-width: 1.6px; border-color: var(--oko-edge); } /* The single tap/action row used inside every card. */ .tile-row { display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; width: 100%; padding: 0.95rem 0; background: transparent; border: none; text-align: left; color: inherit; font: inherit; cursor: pointer; } .tile-row + .tile-row { border-top: 1px solid var(--oko-line); } .tile-row:active { opacity: 0.65; } .tile-text { flex: 1; min-width: 0; } .tile-label { display: block; font-weight: 600; line-height: 1.25; } .tile-meta { display: block; font-size: 0.83rem; color: var(--oko-muted); margin-top: 0.12rem; font-weight: 400; line-height: 1.3; } .tile-chev { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; } /* In a desktop grid the rows sit in columns; drop the row hairline and let the grid gap + card boundary do the separating. */ @media (min-width: 1280px) { .oko-card.oko-grid .tile-row { border-top: none; padding: 0.8rem 0; } }