/* FotoBoyz OS — the shared look: LOAD-IN (direction B, chosen by Mickell 14 Sep 2026). * * "I dont like the entire app is vertical. use horizontal orientation features" * "hard to read on white background" * "I hate the font and how squeezed things look on mobile" * "more interactiveness digital animation" * * Built like a road case: steel-grey ground (never a white page), solid ink * outlines, safety orange only for what needs you, condensed Archivo headings * and Atkinson Hyperlegible text. Mock: scratchpad redesign/lookbook.html (.dB). * * HOW IT REACHES 42 PAGES WITHOUT OPENING THEM * Every page declares its own palette on :root (--paper, --surface, --ink, * --muted, --line, --blue, --navy, --sans ...). This file re-declares those SAME * names at :root:root:root (0,3,0), which outranks a page's :root (0,1,0), * flair.js's muted raise (0,2,0) and nav.js's dark block (0,2,0) regardless of * load order. Dark is :root:root:root[data-theme="dark"] (0,4,0) — nav.js stamps * data-theme from the menu's Light / Dark / System choice. * * CONTRAST (WCAG 2.x, computed, not eyeballed — see the commit message table): * light ink #0E1420 on ground 13.46, on card 16.87 * muted #465163 on ground 5.86, on card 7.35 * accent text #A8380A on ground 4.74, on card 5.94 (#C2410C is only * 3.78 on the ground, so it is never used for text on the ground) * good #1B6B45 4.74 / 5.94, warn #8A5300 4.62 / 5.79, crit #B42318 4.80 / 6.02 * orange FILL #E8590C carries INK text (5.15), never white (3.58) * dark ink #E8EDF4 on ground 15.15, on card 13.43 * muted #A7B1C0 8.23 / 7.29, accent #FF8A3D 7.60 / 6.73 * * TWO RULES THIS DOES NOT BREAK (6am, warehouse, phone, gloves): * a tap target is never smaller than 44px, primary controls 48px * no motion sits between a tap and its result; reduced motion means none */ /* ---------- 0. type ---------- * SELF-HOSTED in /fonts, not Google Fonts. This is an installed PWA used on * cellular at venues with poor signal: a third-party font host is a second DNS * lookup + TLS handshake + a CORS fetch before the text settles, is not covered * by the app's own cache headers, and fails outright when fonts.gstatic.com is * slow or blocked. Same-origin files ride the HTTP/2 connection the page already * has, and _headers gives /fonts/* a year, immutable. Latin subset only. * archivo-var.woff2 90 KB Archivo variable, wght 500-900, wdth 62-125% * atkinson-400.woff2 17 KB Atkinson Hyperlegible Regular * atkinson-700.woff2 18 KB Atkinson Hyperlegible Bold * Both SIL Open Font License 1.1. font-display:swap: fallback text paints at * once; invisible text on a job sheet is worse than the wrong font. * (satoshi/clash files stay in /fonts: the public vendor card still uses them.) */ @font-face{ font-family:'Archivo'; font-style:normal; font-weight:500 900; font-stretch:62% 125%; font-display:swap; src:url('/fonts/archivo-var.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Atkinson Hyperlegible'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/atkinson-400.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Atkinson Hyperlegible'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/atkinson-700.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ---------- 1. tokens ---------- */ :root:root:root{ /* Load-In palette, light */ --fz-ground:#D6DDE5; --fz-card:#F3F5F8; --fz-sec:#C9D1DB; --fz-ink:#0E1420; --fz-ink-2:#243044; --fz-muted:#465163; --fz-outline:#0E1420; --fz-hair:#A9B4C2; --fz-field:#6B7686; --fz-urgent:#E8590C; --fz-urgent-ink:#A8380A; --fz-on-urgent:#0E1420; --fz-good:#1B6B45; --fz-good-bg:#1B6B45; --fz-on-good:#FFFFFF; --fz-warn:#8A5300; --fz-warn-bg:#F2B84B; --fz-on-warn:#0E1420; --fz-crit:#B42318; --fz-crit-bg:#B42318; --fz-on-crit:#FFFFFF; --fz-primary:#0E1420; --fz-on-primary:#F3F5F8; --fz-bar:#0E1420; --fz-bar-fg:#F3F5F8; --fz-bar-muted:#9AA6B8; --fz-bar-line:#3A4658; --fz-bar-accent:#FF8A3D; --fz-shadow-c:#0E1420; --fz-lift-shadow:4px 4px 0 var(--fz-shadow-c); --fz-press-shadow:1px 1px 0 var(--fz-shadow-c); --fz-radius:8px; --fz-chip-radius:4px; --fz-display:'Archivo','Arial Narrow','Roboto Condensed',system-ui,sans-serif; --fz-body:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --fz-sans:var(--fz-body); /* motion + older names other files still read */ --fz-fast:.14s cubic-bezier(.2,.7,.3,1); --fz-mid:.22s cubic-bezier(.2,.7,.3,1); --fz-lift:var(--fz-lift-shadow); --fz-lift-soft:var(--fz-lift-shadow); --fz-glow:0 0 0 3px color-mix(in srgb, var(--fz-urgent) 45%, transparent); --fz-accent:linear-gradient(90deg, var(--fz-urgent), var(--fz-urgent)); --fz-cta:var(--fz-primary); /* THE MAPPING: the names the 42 pages already use */ --paper:var(--fz-ground); --surface:var(--fz-card); --card:var(--fz-card); --sunk:var(--fz-sec); --soft:var(--fz-sec); --ink:var(--fz-ink); --body:var(--fz-ink-2); --muted:var(--fz-muted); --dim:var(--fz-muted); --line:var(--fz-hair); --navy:#0E1420; --navy-deep:#060A12; --blue:var(--fz-urgent-ink); --blue-soft:#FFB27A; --link:var(--fz-urgent-ink); --red:var(--fz-crit); --bad:var(--fz-crit); --stop:var(--fz-crit); --green:var(--fz-good); --ok:var(--fz-good); --good:var(--fz-good); --go:var(--fz-good); --amber:var(--fz-warn); --warn:var(--fz-warn); --err:var(--fz-crit); --sans:var(--fz-body); /* nav.js reads these: the bar and dock are ink; panels stay on card */ --nav-bg:var(--fz-bar); --nav-fg:var(--fz-ink); --nav-line:var(--fz-outline); --nav-btn:var(--fz-card); --nav-btn-line:var(--fz-field); --nav-accent:var(--fz-urgent-ink); } :root:root:root[data-theme="dark"]{ --fz-ground:#121821; --fz-card:#1B2330; --fz-sec:#242E3D; --fz-ink:#E8EDF4; --fz-ink-2:#CBD3DE; --fz-muted:#A7B1C0; --fz-outline:#3A4658; --fz-hair:#3A4658; --fz-field:#6B7A90; --fz-urgent:#E8590C; --fz-urgent-ink:#FF8A3D; --fz-on-urgent:#121821; --fz-good:#5FD49A; --fz-good-bg:#1B6B45; --fz-on-good:#FFFFFF; --fz-warn:#F2B84B; --fz-warn-bg:#F2B84B; --fz-on-warn:#121821; --fz-crit:#FF8A80; --fz-crit-bg:#B42318; --fz-on-crit:#FFFFFF; --fz-primary:#FF8A3D; --fz-on-primary:#121821; --fz-bar:#0B1017; --fz-bar-fg:#E8EDF4; --fz-bar-muted:#A7B1C0; --fz-bar-line:#3A4658; --fz-bar-accent:#FF8A3D; --fz-shadow-c:#05080C; --navy:#0B1017; --navy-deep:#070B10; --blue-soft:#FFB27A; color-scheme:dark; } /* The events board's per-device accent (applyEvUi) writes --navy/--blue inline on , which no stylesheet outranks. Its DEFAULT, "navy", is the old blue (#3B82F6: white text 3.68:1); re-declared on body it follows Load-In. A crew member who picked Teal, Plum or Ember still gets their pick. */ body[data-accent="navy"]{ --navy:#0E1420; --blue:var(--fz-urgent-ink); } :root[data-theme="dark"] body[data-accent="navy"]{ --navy:#0B1017; } /* ---------- 2. ground and text ---------- */ html:root{ background-color:var(--paper); } html body{ background-color:var(--paper); color:var(--ink); font-family:var(--fz-body); line-height:1.55; -webkit-font-smoothing:antialiased; } html body :is(input, select, textarea, button){ font-family:inherit; } /* Headings: Archivo, condensed. Big ones at 78% width and 900; the small uppercase card labels pages already use at 85-90% so they stay legible. */ html body :is(h1, h3), .fz-display{ font-family:var(--fz-display); font-stretch:78%; font-weight:900; letter-spacing:0; } html body h2{ font-family:var(--fz-display); font-stretch:85%; font-weight:800; } html body h4{ font-family:var(--fz-display); font-stretch:88%; font-weight:800; } .eyebrow, .lbl, .fn-lbl{ letter-spacing:.1em; } /* Phone reading size. Pages set most text in px on their own classes, which this cannot out-rank without breaking compact layouts; it lifts the base and the plain prose elements, which is where "squeezed" was felt most. */ @media (max-width:520px){ html body{ font-size:16.5px; } html body :is(p, li, dd, td, label, .lede, .sub, .note, .hint, .desc){ line-height:1.55; } html body > :is(.wrap, main){ padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); } } /* Numbers in columns must not wander while they update. */ .kpi, .stat, .n, .gn, .num, .money, .pv, .ptile, td, th, .fz-chip b{ font-variant-numeric:tabular-nums; } /* ---------- 3. cards ---------- */ html body .card{ background-color:var(--surface); border:2px solid var(--fz-outline); border-radius:var(--fz-radius); box-shadow:none; } @media (max-width:520px){ html body .card{ padding:16px; } } html body .card.lift, html body a.card{ box-shadow:var(--fz-lift-shadow); } .card, a.card, .tile{ transition:transform var(--fz-fast), box-shadow var(--fz-fast); } @media (hover:hover){ a.card:hover, .tile:hover, .card.lift:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--fz-shadow-c); } } a.card:active, .tile:active, .card.lift:active{ transform:translate(3px,3px); box-shadow:var(--fz-press-shadow); } /* Card headings: the house voice is small caps labels; now in Archivo, ink. */ .card > h2, .card > h1{ font-size:14px !important; letter-spacing:.08em; text-transform:uppercase; color:var(--ink) !important; display:flex; align-items:center; gap:9px; } .card > h2 .fz-ico, .card > h1 .fz-ico{ width:30px; height:30px; flex:0 0 30px; font-size:16px; } /* KPI tiles become outlined chips with a big condensed number. */ html body :is(.kpi, .stat){ background-color:var(--surface); background-image:none; border:2px solid var(--fz-outline); border-radius:var(--fz-radius); } .kpi .n, .stat .n, .kpi b, .stat b{ font-family:var(--fz-display); font-stretch:78%; font-weight:900; font-size:clamp(24px, 2.4vw, 30px); letter-spacing:0; } /* ---------- 4. controls ---------- Primary buttons are drawn by flair.js (it loads last); these are the rest. */ html body :is(.ghost, .btn.ghost, .sbtn.ghost){ background-color:var(--surface); color:var(--ink); border:2px solid var(--fz-outline); border-radius:var(--fz-radius); } @media (hover:hover){ html body :is(.ghost, .btn.ghost, .sbtn.ghost):hover{ background-color:var(--fz-sec); color:var(--ink); border-color:var(--fz-outline); } } button:disabled, .btn:disabled, .sbtn:disabled{ filter:grayscale(.4); opacity:.55; transform:none !important; } /* Fields: a boundary you can see (field grey is 4.2:1 on the card). Colour only — widths are left to the page so no layout moves. */ html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea){ background-color:var(--surface); color:var(--ink); border-color:var(--fz-field); } input:focus, select:focus, textarea:focus{ border-color:var(--fz-outline) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--fz-urgent) 40%, transparent); } input[type=checkbox], input[type=radio]{ accent-color:var(--fz-primary); } /* Focus you can see on the ground, on a card and on the ink bar. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline:3px solid var(--fz-urgent); outline-offset:2px; } /* Pills and chips: square-cornered tags, 4px. */ html body :is(.pill, .chip, .badge, .tabnum){ border-radius:var(--fz-chip-radius); } .pill, .chip, .tabnum{ transition:background var(--fz-fast), color var(--fz-fast), transform var(--fz-fast); } /* Tabs: the page's own tab pills, lifted into the bar by nav.js. */ html body :is(.tab, .dtab){ border-radius:6px; font-weight:700; } /* Tables: keep your line on a long list. */ tbody tr{ transition:background var(--fz-fast); } tbody tr:hover{ background:color-mix(in srgb, var(--fz-sec) 60%, transparent); } html body th{ font-family:var(--fz-display); font-stretch:88%; letter-spacing:.06em; } .panelink, a.linky{ position:relative; } .panelink::after, a.linky::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%; background:var(--fz-urgent); transform:scaleX(0); transform-origin:left; transition:transform var(--fz-mid); } .panelink:hover::after, a.linky:hover::after{ transform:scaleX(1); } .fz-grad{ color:var(--ink); -webkit-text-fill-color:currentColor; background:none; } /* Emoji framed as icons (polish.js). */ .fz-ico{ display:inline-grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border-radius:6px; font-size:19px; line-height:1; background:var(--fz-sec); border:2px solid var(--fz-outline); } .fz-ico.warm{ background:var(--fz-warn-bg); } .fz-ico.good{ background:color-mix(in srgb, var(--fz-good-bg) 30%, var(--surface)); } .fz-ico.bad{ background:color-mix(in srgb, var(--fz-crit-bg) 25%, var(--surface)); } @keyframes fzIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } } .fz-in{ animation:fzIn var(--fz-mid) both; } /* ---------- 5. components (other pages build on these names) ---------- */ /* A section heading with an optional link on the right. */ .fz-section-label{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0 10px; padding:0; font-family:var(--fz-display); font-stretch:85%; font-weight:800; font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); line-height:1.2; } .fz-section-label :is(a, button){ font:inherit; font-size:14px; letter-spacing:.06em; color:var(--fz-urgent-ink); background:none; border:0; padding:0 4px; min-height:44px; display:inline-flex; align-items:center; text-decoration:none; cursor:pointer; } /* A horizontal row you flick through; each child snaps. */ .fz-rail{ display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scroll-padding-inline:2px; padding:2px 8px 10px 2px; scrollbar-width:none; } .fz-rail::-webkit-scrollbar{ display:none; } .fz-rail > *{ flex:0 0 min(82%, 340px); scroll-snap-align:start; min-width:0; } @media (min-width:900px){ .fz-rail > *{ flex-basis:300px; } } /* Full-bleed to the screen edge inside a 16px-padded container. */ .fz-rail.bleed{ margin-inline:-16px; padding-inline:16px 16px; scroll-padding-inline:16px; } /* motion.js wraps each rail: a fade and a ‹ › button on whichever side has more, since the scrollbar is hidden and a cut-off card alone did not say "scroll". */ .fz-railwrap{ position:relative; min-width:0; } .fz-railwrap::before, .fz-railwrap::after{ content:""; position:absolute; top:0; bottom:10px; width:36px; z-index:2; pointer-events:none; opacity:0; transition:opacity var(--fz-fast, .15s); } .fz-railwrap::before{ left:0; background:linear-gradient(to right, var(--fz-ground), transparent); } .fz-railwrap::after{ right:0; background:linear-gradient(to left, var(--fz-ground), transparent); } .fz-railwrap[data-more-left="1"]::before, .fz-railwrap[data-more-right="1"]::after{ opacity:1; } .fz-railbtn{ position:absolute; top:calc(50% - 5px); transform:translateY(-50%); z-index:3; width:44px; height:44px; border-radius:50%; padding:0; display:none; place-items:center; background:var(--surface); color:var(--ink); border:2px solid var(--fz-outline); box-shadow:0 4px 12px -4px rgba(0,0,0,.35); font:inherit; font-size:28px; font-weight:800; line-height:1; cursor:pointer; } .fz-railbtn > span{ margin-top:-3px; } .fz-railbtn.prev{ left:-4px; } .fz-railbtn.next{ right:-4px; } .fz-railwrap[data-more-left="1"] > .fz-railbtn.prev, .fz-railwrap[data-more-right="1"] > .fz-railbtn.next{ display:grid; } .fz-railbtn:active{ transform:translateY(-50%) scale(.94); } /* Big-number stat chips, swipeable: 3jobs */ .fz-chips{ display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding:2px 8px 10px 2px; scrollbar-width:none; } .fz-chips::-webkit-scrollbar{ display:none; } .fz-chip{ flex:0 0 auto; min-width:112px; min-height:64px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:10px 14px; scroll-snap-align:start; background:var(--surface); color:var(--ink); text-decoration:none; text-align:left; border:2px solid var(--fz-outline); border-radius:var(--fz-radius); font:inherit; cursor:default; } a.fz-chip, button.fz-chip{ cursor:pointer; transition:transform var(--fz-fast), box-shadow var(--fz-fast); } a.fz-chip:active, button.fz-chip:active{ transform:translate(2px,2px); } .fz-chip b{ font-family:var(--fz-display); font-stretch:78%; font-weight:900; font-size:30px; line-height:1; color:var(--ink); } .fz-chip span{ font-size:14px; font-weight:700; line-height:1.2; color:var(--muted); } .fz-chip.urgent{ box-shadow:inset 6px 0 0 var(--fz-urgent); padding-left:18px; } .fz-chip.urgent b{ color:var(--fz-urgent-ink); } .fz-chip.good{ box-shadow:inset 6px 0 0 var(--fz-good-bg); padding-left:18px; } .fz-chip.warn{ box-shadow:inset 6px 0 0 var(--fz-warn-bg); padding-left:18px; } /* The card. .lift for the one that is the thing to press. */ .fz-card{ display:grid; gap:10px; align-content:start; box-sizing:border-box; padding:16px; color:var(--ink); background:var(--surface); border:2px solid var(--fz-outline); border-radius:var(--fz-radius); } .fz-card.lift{ box-shadow:var(--fz-lift-shadow); } a.fz-card, button.fz-card{ text-decoration:none; font:inherit; text-align:left; cursor:pointer; transition:transform var(--fz-fast), box-shadow var(--fz-fast); } @media (hover:hover){ a.fz-card.lift:hover, button.fz-card.lift:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--fz-shadow-c); } } a.fz-card.lift:active, button.fz-card.lift:active{ transform:translate(3px,3px); box-shadow:var(--fz-press-shadow); } /* Status tags: ink by default; orange only for what needs you. */ .fz-tag{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; padding:3px 8px; border-radius:var(--fz-chip-radius); font-family:var(--fz-display); font-stretch:90%; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1.35; background:var(--ink); color:var(--surface); } .fz-tag.urgent{ background:var(--fz-urgent); color:var(--fz-on-urgent); } .fz-tag.good{ background:var(--fz-good-bg); color:var(--fz-on-good); } .fz-tag.warn{ background:var(--fz-warn-bg); color:var(--fz-on-warn); } .fz-tag.crit{ background:var(--fz-crit-bg); color:var(--fz-on-crit); } /* Progress:
*/ .fz-progress{ position:relative; display:block; height:12px; overflow:hidden; box-sizing:border-box; background:var(--surface); border:2px solid var(--fz-outline); border-radius:var(--fz-chip-radius); } .fz-progress > i{ display:block; height:100%; width:0; max-width:100%; background:var(--ink); transform-origin:left center; } .fz-progress.urgent > i{ background:var(--fz-urgent); } .fz-progress.good > i{ background:var(--fz-good-bg); } /* List + detail side by side when the phone turns, or on a wide screen. Children: the first is the list, the last the detail (or name them). */ .fz-split{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; } @media (orientation:landscape) and (min-width:640px), (min-width:1024px){ .fz-split{ grid-template-columns:minmax(220px, 36%) minmax(0,1fr); } .fz-split > :first-child, .fz-split > .fz-split-list{ position:sticky; top:calc(var(--foto-nav-h, 57px) + 8px); max-height:calc(100dvh - var(--foto-nav-h, 57px) - 16px); overflow-y:auto; overscroll-behavior:contain; } } /* Phases in one line:
  1. Booked4/4
    2. ... */ .fz-steps{ display:flex; gap:8px; margin:0; padding:2px 8px 8px 2px; list-style:none; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .fz-steps::-webkit-scrollbar{ display:none; } .fz-steps > *{ flex:0 0 auto; min-width:92px; min-height:48px; box-sizing:border-box; display:grid; align-content:center; gap:2px; padding:8px 12px; scroll-snap-align:start; font-size:14px; line-height:1.25; color:var(--ink); background:var(--surface); border:2px solid var(--fz-outline); border-radius:var(--fz-chip-radius); } .fz-steps > * b{ font-family:var(--fz-display); font-stretch:85%; font-weight:800; font-size:13.5px; letter-spacing:.05em; text-transform:uppercase; } .fz-steps > .done{ background:var(--fz-good-bg); border-color:var(--fz-good-bg); color:var(--fz-on-good); } .fz-steps > .now{ box-shadow:inset 0 -5px 0 var(--fz-urgent), var(--fz-lift-shadow); } /* Skipped is dashed and muted — not faded, which would drop the contrast. */ .fz-steps > .skip{ background:transparent; border-style:dashed; color:var(--muted); } /* ---------- 6. the page hero (hero.js) ---------- A compact steel band under the ink bar: the page's own colour survives as its icon block, the title is a condensed stencil line. */ html body #fzHero{ position:relative; overflow:hidden; background:var(--fz-sec); color:var(--ink); border-bottom:2px solid var(--fz-outline); padding:16px calc(16px + env(safe-area-inset-left,0px)); } #fzHero::after{ display:none; } .fz-hero-in{ position:relative; z-index:1; display:flex; align-items:center; gap:14px; max-width:1100px; margin:0 auto; } .fz-hero-ico{ flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; font-size:24px; line-height:1; border-radius:var(--fz-radius); background:var(--h1, #E8590C); border:2px solid var(--fz-outline); box-shadow:3px 3px 0 var(--fz-shadow-c); } .fz-hero-txt{ min-width:0; } html body #fzHero h1{ font-family:var(--fz-display); font-stretch:78%; font-weight:900; font-size:clamp(26px, 3.4vw, 34px); line-height:1.02; letter-spacing:.01em; text-transform:uppercase; margin:0; color:var(--ink); overflow-wrap:anywhere; } html body #fzHero p{ margin:4px 0 0; font-size:15px; line-height:1.4; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } @media (max-width:520px){ html body #fzHero p{ -webkit-line-clamp:2; } } @media print{ #fzHero{ display:none; } } /* ---------- 7. the home screen (index.html) ---------- The artwork stays (the phone must show it); the title becomes a stencil line and the tool tiles become outlined road-case cards. */ body[data-nav-hub] > header{ border-bottom:4px solid var(--fz-urgent); } body[data-nav-hub] > header h1{ font-family:var(--fz-display); font-stretch:78%; font-weight:900; letter-spacing:.005em; text-transform:uppercase; background:none; -webkit-text-fill-color:currentColor; color:#F3F5F8; } body[data-nav-hub] > header .eyebrow{ font-family:var(--fz-display); font-stretch:90%; color:#FFB27A; } body[data-nav-hub] > header .sub{ color:#E4E9F0; } body[data-nav-hub] .wrap > div > h2, body[data-nav-hub] #fnRecent h2{ font-family:var(--fz-display); font-stretch:85%; font-size:15px; letter-spacing:.08em; color:var(--ink); } body[data-nav-hub] .tool{ background:var(--surface); border:2px solid var(--fz-outline); border-radius:var(--fz-radius); box-shadow:none; transition:transform var(--fz-fast), box-shadow var(--fz-fast); } body[data-nav-hub] .tool::after{ display:none; } body[data-nav-hub] .tool::before{ width:6px; } @media (hover:hover){ body[data-nav-hub] .tool:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--fz-shadow-c); } } body[data-nav-hub] .tool:active{ transform:translate(2px,2px); box-shadow:var(--fz-press-shadow); } body[data-nav-hub] .tool .icon{ border-radius:var(--fz-radius); border:2px solid var(--fz-outline); box-shadow:none; } body[data-nav-hub] .tool .k{ color:var(--muted); font-family:var(--fz-display); font-stretch:90%; letter-spacing:.1em; } body[data-nav-hub] .tool .t{ font-family:var(--fz-display); font-stretch:85%; font-weight:800; color:var(--ink); } body[data-nav-hub] .tool .go{ background:var(--fz-primary); color:var(--fz-on-primary); border-radius:6px; min-height:44px; padding:0 14px; font-family:var(--fz-display); font-stretch:90%; letter-spacing:.06em; text-transform:uppercase; } body[data-nav-hub] .empty{ background:var(--surface); border:2px dashed var(--fz-field); border-radius:var(--fz-radius); } body[data-nav-hub] footer{ border-top:2px solid var(--fz-outline); } @media (max-width:520px){ body[data-nav-hub] .toolgrid{ gap:12px; } body[data-nav-hub] .tool{ padding:14px 12px 12px 16px; } body[data-nav-hub] .tool .t{ font-size:17px; } body[data-nav-hub] .tool .k{ font-size:11px; } } /* ---------- 8. empty states (polish.js) ---------- */ p.lede.fz-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:26px 18px; margin:2px 0 6px; max-width:none; font-size:15px; font-weight:700; color:var(--muted); border:2px dashed var(--fz-field); border-radius:var(--fz-radius); background:var(--surface); } .fz-empty-ico{ font-size:30px; line-height:1; opacity:.5; filter:saturate(.65); } @media (max-width:520px){ p.lede.fz-empty{ padding:20px 14px; } .fz-empty-ico{ font-size:26px; } } /* ---------- 9. the rules that do not bend ---------- */ button, .btn, .sbtn, .primary, .ghost, .chan, .tab, .dtab{ min-height:40px; } @media (max-width:520px){ button, .tab, .dtab, .chan{ min-height:44px; } .btn, .sbtn, .primary, .ghost{ min-height:48px; } } @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important; } a.card:hover, .tile:hover, .card.lift:hover, .fz-card:hover, .fz-chip:active, body[data-nav-hub] .tool:hover{ transform:none !important; } } @media print{ html body, html:root{ background:#fff !important; color:#000 !important; } .fz-card.lift, .card.lift{ box-shadow:none; } } /* The FotoBoyz / Kira, 15 Sep 2026. Shared chrome retains the Load-In tokens. Artwork is decorative and carries no workflow information. */ body[data-nav-hub] > header{background:#0E1420;padding-top:72px} body[data-nav-hub] .hdrart{background-image:url('/img/studio-load-in.webp');background-position:75% 55%} body[data-nav-hub] .hdrscrim{background:linear-gradient(90deg,#0E1420 0%,rgba(14,20,32,.94) 30%,rgba(14,20,32,.22) 75%)} body[data-nav-hub] > header h1{font-size:clamp(36px,5.5vw,62px);max-width:11ch;line-height:.98;font-stretch:90%} .fz-os-tag{display:block;font-size:12px;letter-spacing:.24em;color:#FF8A3D;margin-top:16px;font-stretch:100%} body[data-nav-hub] > header .eyebrow{font-size:11px;letter-spacing:.16em} body[data-nav-hub] .hdrart{animation:fz-art-arrive .8s ease-out both} @keyframes fz-art-arrive{from{opacity:.35;transform:scale(1.04)}to{opacity:1;transform:none}} html body #fzHero{background:var(--fz-sec);border-bottom:2px solid var(--fz-outline);padding-top:18px;padding-bottom:18px} #fzHero::before{content:'';position:absolute;right:0;top:0;bottom:0;width:31%;background:linear-gradient(90deg,var(--fz-sec),transparent 36%),url('/img/studio-load-in.webp') 82% 62%/cover;opacity:.25;pointer-events:none} #fzHero.fz-creative-hero::before{background-image:linear-gradient(90deg,var(--fz-sec),transparent 36%),url('/showcase/assets/arcade-hero.webp')} .fz-brand-kicker{font-family:var(--fz-display);font-weight:800;font-size:10px;letter-spacing:.15em;margin-bottom:6px;color:var(--muted)} .fz-brand-kicker span{font-weight:600;letter-spacing:.08em} html body #fzHero .fz-hero-txt{max-width:76%} html body #fzHero h1{font-stretch:85%;font-size:clamp(25px,3vw,34px);line-height:1.08} .fz-hero-ico{transform:rotate(-4deg);border-radius:10px} #fotoNav .fn-btn{transition:border-color .15s,background .15s,transform .15s} #fotoNav .fn-btn:active{transform:translateY(2px)} #fotoNav .fn-btn[aria-expanded=true]{border-color:#FF8A3D;background:#253044} #fotoNav .fn-r2 .tab.on,#fotoNav .fn-r2 [aria-selected=true]{box-shadow:inset 0 -3px 0 #FF8A3D} .fn-studio-brand{display:block;text-decoration:none;padding:12px 14px 15px;background:#0E1420;color:#F3F5F8;border-radius:6px;margin-bottom:12px;font-family:var(--fz-display);font-weight:900;letter-spacing:.06em} .fn-studio-brand span{color:#FF8A3D}.fn-studio-brand small{display:block;font-family:var(--fz-body);font-size:12px;font-weight:400;letter-spacing:0;margin-top:4px;color:#E4E9F0} body[data-nav-hub] .tool .icon{transition:transform .2s} @media(hover:hover){body[data-nav-hub] .tool:hover .icon{transform:rotate(-6deg)}.fn-studio-brand:hover{outline:2px solid #FF8A3D}} html body #fotoGate{background:#0E1420 url('/img/studio-load-in.webp') center/cover} html body #fotoGate .box{background:var(--surface,#F3F5F8);color:var(--ink,#0E1420);border:2px solid var(--fz-outline,#0E1420);border-top:5px solid #E8590C;border-radius:12px;box-shadow:8px 8px 0 #0E1420} html body #fotoGate .eb{color:var(--ink,#0E1420);font-family:var(--fz-display);font-weight:900;letter-spacing:.12em} @media(max-width:520px){ body[data-nav-hub] > header{padding:56px 18px 22px} body[data-nav-hub] > header h1{max-width:none} body[data-nav-hub] > header .fz-os-tag{margin-top:10px} body[data-nav-hub] .hdrart{background-position:76% center} body[data-nav-hub] .hdrscrim{background:linear-gradient(90deg,rgba(14,20,32,.96),rgba(14,20,32,.82) 55%,rgba(14,20,32,.28))} .fz-brand-kicker{font-size:9px;letter-spacing:.1em}.fz-brand-kicker span{display:none} #fzHero::before{width:28%;opacity:.15} html body #fzHero .fz-hero-txt{max-width:calc(100% - 62px)} } @media(prefers-reduced-motion:reduce){body[data-nav-hub] .hdrart{animation:none}body[data-nav-hub] .tool:hover .icon{transform:none}} @media print{#fzHero::before,.fz-os-tag{display:none}} /* Compact phone headers: one title, useful context, and full-size tap targets. */ @media(max-width:520px){ body[data-nav-hub] > header{padding:66px 18px 20px} body[data-nav-hub] > header .eyebrow,body[data-nav-hub] > header .fz-os-tag,body[data-nav-hub] > header .nowbar{display:none} body[data-nav-hub] > header h1{font-size:30px;line-height:1.1;margin:0;max-width:none} body[data-nav-hub] > header .sub{margin-top:8px;font-size:15px;line-height:1.4} body[data-nav-hub] > header .nextact{margin-top:8px;font-size:13px;line-height:1.4} html body #fnHubCtl #fnIdea{display:none} html body #fotoNav .fh-mark{display:none} html body #fotoNav .fn-r1{gap:6px;padding:7px calc(12px + env(safe-area-inset-right,0px)) 7px calc(12px + env(safe-area-inset-left,0px))} html body #fotoNav .fn-title{font-size:16px;letter-spacing:.01em;text-align:left} html body #fotoNav .fn-btn{padding:10px;min-width:44px;min-height:44px} html body #fzHero{padding-top:10px;padding-bottom:10px} html body #fzHero .fz-brand-kicker,html body #fzHero .fz-hero-ico{display:none} html body #fzHero .fz-hero-txt{max-width:100%;width:100%} html body #fzHero h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} html body #fzHero p{font-size:13px;line-height:1.4;margin:0;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} html body #fzHero::before{width:26%;opacity:.12} .foto-bot-long{display:none} .foto-bot-short{display:inline!important} }