/* The editorial look. Everything here is scoped under [data-look="editorial"] so the original survives intact one setting away — a change this total should be reversible by a tap. The argument: what makes an app look generated is not its colour, it is that every element is the same object — a rounded card on a slightly lighter background, all at the same weight, none louder than the rest. A page from a printed journal works the opposite way. One thing is enormous, a few things are small, and what separates them is a hairline and empty space rather than a container. So: no cards, no shadows, one serif doing the talking, and the ring gone entirely. */ :root[data-look="editorial"]{ --radius:6px; --radius-sm:4px; --shadow:none; --rule:color-mix(in srgb, var(--text-hi) 13%, transparent); } /* Flat paper instead of a lit dashboard. The radial glow behind the old layout is the single most recognisable thing about the default look. */ :root[data-look="editorial"] body{ background:var(--bg); } /* ---- type ---------------------------------------------------------------- */ /* The serif was tried and rejected. The layout carries the character on its own — what the type has to do here is get out of the way and hold its columns straight. So: the app's own faces, one notch lighter than before at large sizes, and figures locked to a single width. */ :root[data-look="editorial"] .top-txt b{ font-size:22px; } :root[data-look="editorial"] .hero-n{ font-weight:500; letter-spacing:-.03em; } /* Figures the same width, so a number that changes does not shuffle the ones around it. */ :root[data-look="editorial"] b, :root[data-look="editorial"] .hero-n, :root[data-look="editorial"] .meal-k, :root[data-look="editorial"] .tile b{ font-variant-numeric:tabular-nums lining-nums; } /* Small, letter-spaced, upper-ish labels — the print convention for a caption under a figure. */ :root[data-look="editorial"] .ed-cap, :root[data-look="editorial"] .card-head b, :root[data-look="editorial"] .lib-group, :root[data-look="editorial"] .rb-sec{ font-size:10.5px; letter-spacing:.14em; color:var(--text-lo); font-weight:600; } /* ---- containers become rules --------------------------------------------- */ :root[data-look="editorial"] .card, :root[data-look="editorial"] .hero{ background:none; border:none; border-top:1px solid var(--rule); border-radius:0; padding:16px 0 4px; margin-top:22px; box-shadow:none; } :root[data-look="editorial"] .card-head{ margin-bottom:13px; font-size:15px; } :root[data-look="editorial"] .meal{ background:none; border:none; border-top:1px solid var(--rule); border-radius:0; padding:13px 0 4px; margin-top:0; } :root[data-look="editorial"] .meal-slim{ padding:11px 0; } :root[data-look="editorial"] .meal-t{ font-size:16px; } :root[data-look="editorial"] .item{ background:none; border:none; border-radius:0; padding:9px 0; border-top:1px dotted var(--rule); } :root[data-look="editorial"] .dot{ display:none; } /* ---- the hero: a figure and its caption ---------------------------------- */ :root[data-look="editorial"] .ed-hero{ padding:26px 0 6px; } :root[data-look="editorial"] .ed-figure{ text-align:center; margin-bottom:22px; } :root[data-look="editorial"] .ed-figure .hero-n{ display:block; font-size:76px; line-height:.9; letter-spacing:-.02em; } :root[data-look="editorial"] .ed-figure .hero-n.over{ color:var(--danger); } :root[data-look="editorial"] .ed-cap{ display:block; margin-top:12px; } :root[data-look="editorial"] .ed-sub{ display:block; margin-top:5px; font-size:12px; color:var(--text-lo); } /* The day as a line rather than a circle: the meals sit along it in the order they were eaten, and what is left of the goal is the empty part. A ring cannot show that without being read twice. */ :root[data-look="editorial"] .ed-strip{ position:relative; display:flex; height:10px; width:100%; border-top:1px solid var(--text-hi); border-bottom:1px solid var(--text-hi); background:color-mix(in srgb, var(--text-hi) 5%, transparent); } :root[data-look="editorial"] .ed-strip i{ display:block; height:100%; } :root[data-look="editorial"] .ed-strip u{ position:absolute; top:100%; width:1px; height:4px; background:var(--rule); } :root[data-look="editorial"] .ed-strip.over{ border-color:var(--danger); } :root[data-look="editorial"] .ed-legend{ position:relative; height:30px; margin-top:2px; font-size:11px; color:var(--text-mid); } :root[data-look="editorial"] .ed-legend span{ position:absolute; top:0; white-space:nowrap; padding-top:11px; transform:translateX(50%); /* RTL: shifts right by half its width, centring it on the segment */ } :root[data-look="editorial"] .ed-legend span b{ font-weight:600; color:var(--text-hi); } /* the tick that says which segment this label belongs to */ :root[data-look="editorial"] .ed-legend u{ position:absolute; top:0; inset-inline-start:50%; width:1px; height:8px; background:var(--primary); } :root[data-look="editorial"] .ed-legend .quiet{ position:static; color:var(--text-lo); font-style:italic; transform:none; padding-top:11px; display:block; } /* One ink, stepped down in tone for each meal in turn — the way a printed chart separates series without reaching for a second colour. Set by position in JS, so a meal the user invented gets a tone like any other. */ :root[data-look="editorial"] .ed-strip i{ background:var(--primary); } /* ---- macros as three ruled lines, not three rings ------------------------ */ :root[data-look="editorial"] .ed-macros{ margin-top:26px; border-top:1px solid var(--rule); } :root[data-look="editorial"] .ed-macro{ display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px dotted var(--rule); } :root[data-look="editorial"] .ed-m-l{ width:62px; flex:0 0 auto; font-size:12.5px; color:var(--text-mid); } :root[data-look="editorial"] .ed-m-bar{ flex:1; height:3px; background:color-mix(in srgb, var(--text-hi) 9%, transparent); } :root[data-look="editorial"] .ed-m-bar i{ display:block; height:100%; } :root[data-look="editorial"] .ed-m-bar i.p{ background:var(--p); } :root[data-look="editorial"] .ed-m-bar i.c{ background:var(--c); } :root[data-look="editorial"] .ed-m-bar i.f{ background:var(--f); } :root[data-look="editorial"] .ed-m-v{ flex:0 0 auto; font-size:12px; color:var(--text-lo); font-variant-numeric:tabular-nums; } :root[data-look="editorial"] .ed-m-v b{ font-family:'Rubik',sans-serif; font-weight:600; font-size:16px; color:var(--text-hi); margin-inline-end:2px; } /* ---- the rest of the furniture ------------------------------------------- */ :root[data-look="editorial"] .week-row{ margin-bottom:22px; } :root[data-look="editorial"] .wday{ background:none; border:none; border-radius:0; padding:6px 2px; border-bottom:2px solid transparent; } :root[data-look="editorial"] .wday.on{ border-bottom-color:var(--primary); background:none; } :root[data-look="editorial"] .wnav{ background:none; border:none; } :root[data-look="editorial"] .wday .wbar{ background:color-mix(in srgb, var(--text-hi) 9%, transparent); border-radius:0; width:5px; } :root[data-look="editorial"] .wday .wbar i{ border-radius:0; } :root[data-look="editorial"] .round{ background:none; border-color:var(--rule); } :root[data-look="editorial"] .btn{ border-radius:8px; } :root[data-look="editorial"] .chip{ border-radius:4px; } :root[data-look="editorial"] .tabbar{ background:var(--bg); backdrop-filter:none; border-top:1px solid var(--rule); } :root[data-look="editorial"] .fab{ border-radius:3px; box-shadow:none; border:1px solid color-mix(in srgb, var(--primary) 45%, transparent); } :root[data-look="editorial"] .srow{ background:none; border:none; border-top:1px solid var(--rule); border-radius:0; } :root[data-look="editorial"] .tile{ background:none; border:none; border-top:1px solid var(--rule); border-radius:0; padding:12px 0; } :root[data-look="editorial"] .tile b{ font-size:26px; font-weight:500; } :root[data-look="editorial"] .rc-card{ background:none; border:none; border-radius:0; border-top:1px solid var(--rule); padding:11px 0; } :root[data-look="editorial"] .rc-img{ border-radius:2px; } :root[data-look="editorial"] .rc-act{ border-radius:6px; background:none; border:1px solid var(--rule); } :root[data-look="editorial"] .sheet{ border-radius:10px 10px 0 0; } :root[data-look="editorial"] .w-hero b{ font-weight:500; letter-spacing:-.02em; } :root[data-look="editorial"] .recent, :root[data-look="editorial"] .rb-item{ background:none; border:none; border-top:1px solid var(--rule); border-radius:0; } :root[data-look="editorial"] .search-input, :root[data-look="editorial"] .fld input, :root[data-look="editorial"] textarea{ border-radius:5px; } @media (min-width:980px){ :root[data-look="editorial"] .sheet{ border-radius:10px; } :root[data-look="editorial"] .tabbar{ border-inline-end:1px solid var(--rule); } } /* The saturated three-colour macro bar belongs to the card look. Here it is a hairline in the same restrained ink, and the legend drops to a caption. */ :root[data-look="editorial"] .msplit-bar{ height:2px; border-radius:0; background:color-mix(in srgb, var(--text-hi) 10%, transparent); } :root[data-look="editorial"] .msplit-bar i.p{ background:color-mix(in srgb, var(--p) 70%, var(--text-hi)); } :root[data-look="editorial"] .msplit-bar i.c{ background:color-mix(in srgb, var(--c) 70%, var(--text-hi)); } :root[data-look="editorial"] .msplit-bar i.f{ background:color-mix(in srgb, var(--f) 70%, var(--text-hi)); } :root[data-look="editorial"] .msplit-legend{ font-size:10px; } :root[data-look="editorial"] .msplit-legend em{ width:5px; height:5px; border-radius:0; } /* the entry figures set larger and lighter, so a column of them reads as a column of numbers */ :root[data-look="editorial"] .it-k b{ font-family:'Rubik',sans-serif; font-weight:500; font-size:21px; } /* labels lose their pill shape along with everything else */ :root[data-look="editorial"] .badge, :root[data-look="editorial"] .streak{ border-radius:3px; } :root[data-look="editorial"] .add-sm, :root[data-look="editorial"] .cam-btn{ border-radius:4px; } /* the calendar in the editorial look: no filled tiles, a rule under the week, selection by weight */ :root[data-look="editorial"] .cal-d{ background:none; border-radius:0; border:none; border-top:1px solid var(--rule); } :root[data-look="editorial"] .cal-d.today{ border-top-color:var(--text-lo); } :root[data-look="editorial"] .cal-d.on{ background:none; color:var(--primary); font-weight:700; border-top:2px solid var(--primary); } :root[data-look="editorial"] .cal-d.on::after{ background:var(--primary); } :root[data-look="editorial"] .cal-nav{ background:none; border-radius:0; border:none; } :root[data-look="editorial"] .cal-grid, :root[data-look="editorial"] .cal-dow{ gap:2px 4px; } /* ---- the flattening, finished ------------------------------------------- The look is defined by the absence of containers: hairlines and space instead of filled, rounded boxes. Only part of the app had been carried across, so buttons, chips and small controls were still wearing the card look underneath the editorial one. Photographs keep a small radius — a picture with square corners reads as an error rather than as a decision. */ :root[data-look="editorial"] .btn, :root[data-look="editorial"] .btn.sm, :root[data-look="editorial"] .btn.xs{ background:none; border:1px solid var(--rule); border-radius:2px; color:var(--text-hi); } :root[data-look="editorial"] .btn:active{ background:color-mix(in srgb, var(--text-hi) 6%, transparent); } /* The one filled thing on the page stays filled — it is the only loud element the look allows. The fill has to be restated here: the rule above sets background:none on every .btn, and inheriting that left the primary action as dark text on nothing, which is why it stopped reading as a button at all. */ :root[data-look="editorial"] .btn.primary{ background-color:var(--primary); background-image:var(--grad); border-color:transparent; color:var(--on-primary); border-radius:2px; } :root[data-look="editorial"] .btn.danger{ background:none; } :root[data-look="editorial"] .btn.danger{ border-color:color-mix(in srgb, var(--danger) 45%, transparent); } :root[data-look="editorial"] .icon-btn, :root[data-look="editorial"] .add-sm, :root[data-look="editorial"] .qty-b, :root[data-look="editorial"] .cam-btn, :root[data-look="editorial"] .cal-nav, :root[data-look="editorial"] .wnav{ background:none; border:1px solid var(--rule); border-radius:2px; } :root[data-look="editorial"] .round{ border-radius:2px; } :root[data-look="editorial"] .chip{ background:none; border:1px solid var(--rule); border-radius:0; } :root[data-look="editorial"] .chip.on{ background:none; border-color:var(--primary); color:var(--primary); } :root[data-look="editorial"] .badge{ background:none; border:1px solid currentColor; border-radius:0; padding:1px 6px; line-height:1.45; } :root[data-look="editorial"] .seg{ background:none; border:1px solid var(--rule); border-radius:0; padding:0; } :root[data-look="editorial"] .seg button{ border-radius:0; } :root[data-look="editorial"] .seg button.on{ background:none; color:var(--primary); box-shadow:inset 0 -2px 0 var(--primary); } :root[data-look="editorial"] .fld input, :root[data-look="editorial"] .fld select, :root[data-look="editorial"] textarea, :root[data-look="editorial"] .search-input, :root[data-look="editorial"] .rev-brand-in, :root[data-look="editorial"] .rb-g{ background:none; border:0; border-bottom:1px solid var(--rule); border-radius:0; padding-inline:2px; } :root[data-look="editorial"] .fld input:focus, :root[data-look="editorial"] textarea:focus, :root[data-look="editorial"] .search-input:focus{ outline:none; border-bottom-color:var(--primary); } :root[data-look="editorial"] .nut-rows, :root[data-look="editorial"] .nut-table, :root[data-look="editorial"] .rc-prop, :root[data-look="editorial"] .meal-edit, :root[data-look="editorial"] .d-amount, :root[data-look="editorial"] .rows{ background:none; border:none; border-radius:0; } :root[data-look="editorial"] .rc-prop{ border-top:1px solid var(--rule); padding:12px 0; } /* the day strip and the bars lose their pill ends: this look has no capsules in it */ :root[data-look="editorial"] .split-bar, :root[data-look="editorial"] .msplit-bar, :root[data-look="editorial"] .wbar, :root[data-look="editorial"] .ed-m-bar{ border-radius:0; } :root[data-look="editorial"] .split-legend em, :root[data-look="editorial"] .msplit-legend em{ border-radius:0; } /* photographs and the app's own mark keep their corners — those are objects, not chrome */ :root[data-look="editorial"] .thumb, :root[data-look="editorial"] .recent-img, :root[data-look="editorial"] .rc-img, :root[data-look="editorial"] .pp-img, :root[data-look="editorial"] .sh-cell img, :root[data-look="editorial"] .sh-compare img{ border-radius:3px; } /* the toast was still a capsule floating over a page that has no capsules left in it */ :root[data-look="editorial"] .toast{ border-radius:2px; border:1px solid var(--rule); } /* the confirm sheet's rows were still filled cards in a look that has none */ :root[data-look="editorial"] .rev{ background:none; border:none; border-radius:0; border-top:1px solid var(--rule); padding:14px 0 10px; margin-bottom:0; } :root[data-look="editorial"] .rev:first-of-type{ border-top:none; } :root[data-look="editorial"] .rev-note, :root[data-look="editorial"] .rev-share{ border-radius:0; } /* ---- what the sweep found ------------------------------------------------ Found by walking every screen and every sheet and measuring, rather than by waiting to be told: these are the components the flattening had missed. */ /* the meal editor's three fields were never covered by the .fld rule — they are bare inputs */ :root[data-look="editorial"] .me-icon, :root[data-look="editorial"] .me-name, :root[data-look="editorial"] .me-hour{ background:none; border:0; border-bottom:1px solid var(--rule); border-radius:0; } /* the nutrition block is a filled grid with hairline gutters; here it is just ruled rows */ :root[data-look="editorial"] .nut-grid{ background:none; gap:0; border-radius:0; border-top:1px solid var(--rule); } :root[data-look="editorial"] .nut{ background:none; border-inline-start:1px solid var(--rule); border-top:none; } :root[data-look="editorial"] .nut:first-child{ border-inline-start:none; } /* an explanatory paragraph does not need a container to be read */ :root[data-look="editorial"] .hint{ background:none; border-radius:0; padding:0 0 2px; border-inline-start:2px solid var(--rule); padding-inline-start:11px; } :root[data-look="editorial"] .rc-act{ border-radius:2px; } :root[data-look="editorial"] .sheet-bar button{ border-radius:2px; } /* the look picker keeps its round shapes on purpose: the miniature of the classic look has to look like the classic look, or it is not a preview of anything */ /* the last capsule: the legend swatch for the trend line */ :root[data-look="editorial"] .k-line, :root[data-look="editorial"] .k-bar{ border-radius:0; } :root[data-look="editorial"] .me-mark{ background:none; border:1px solid var(--rule); border-radius:2px; } :root[data-look="editorial"] .mk-cell{ background:none; border:1px solid var(--rule); border-radius:2px; } :root[data-look="editorial"] .mk-cell.on{ background:none; border-color:var(--primary); } :root[data-look="editorial"] .supp-chip{ border-radius:0; border-color:var(--rule); } :root[data-look="editorial"] .supp-chip.on{ border-radius:0; border-color:color-mix(in srgb, var(--primary) 55%, transparent); } :root[data-look="editorial"] .supp-note{ background:none; border-radius:0; padding:10px 0 0; border-top:1px solid var(--rule); } :root[data-look="editorial"] .story-opt{ border-radius:0; } :root[data-look="editorial"] .pick-opt{ border-radius:0; } :root[data-look="editorial"] .chain-tile{ border-radius:0; } :root[data-look="editorial"] .chain-mark{ border-radius:0; } /* Flatter, but still opaque — sticky demands it. The rule above the band does the separating. */ :root[data-look="editorial"] .menu-sec{ background:var(--card); box-shadow:0 -1px 0 var(--border); border-bottom:1px solid var(--border); } :root[data-look="editorial"] .menu-sec::before{ border-radius:0; } :root[data-look="editorial"] .film-i{ border-radius:0; } :root[data-look="editorial"] .ms-dot{ border-radius:0; } :root[data-look="editorial"] .w-total{ border-radius:0; background:none; padding:5px 0; border-top:1px solid currentColor; } /* ---- large text: the day's macros stop being three lines ------------------ At 1.15 and 1.32 the three ruled lines push the meals themselves below the fold, and the meals are what the screen is for. The same three numbers, side by side, in a third of the height. */ :root[data-font="l"] .ed-macros, :root[data-font="xl"] .ed-macros{ display:flex; gap:12px; margin-top:16px; } :root[data-font="l"] .ed-macro, :root[data-font="xl"] .ed-macro{ flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:9px 0 0; border-bottom:none; } :root[data-font="l"] .ed-m-l, :root[data-font="xl"] .ed-m-l{ width:auto; font-size:11px; } :root[data-font="l"] .ed-m-bar, :root[data-font="xl"] .ed-m-bar{ width:100%; flex:none; order:3; } :root[data-font="l"] .ed-m-v b, :root[data-font="xl"] .ed-m-v b{ font-size:15px; } /* ---- the editorial look squares off what the default look rounds ---------- */ :root[data-look="editorial"] .add-hero{ border-radius:6px; } :root[data-look="editorial"] .add-tile{ background:none; border:1px solid var(--rule); border-radius:2px; } :root[data-look="editorial"] .add-other button{ border-radius:2px; border-color:var(--rule); } :root[data-look="editorial"] .mc{ background:none; border:none; border-radius:0; border-top:1px solid var(--rule); padding:14px 0 12px; } :root[data-look="editorial"] .mc-fat{ border-radius:0; } :root[data-look="editorial"] .mt-tabs{ background:none; border:none; border-radius:0; border-bottom:1px solid var(--rule); padding:0; gap:0; } :root[data-look="editorial"] .mt-tabs button{ border-radius:0; background:none; color:var(--text-lo); border-bottom:2px solid transparent; } :root[data-look="editorial"] .mt-tabs button.on{ background:none; color:var(--text-hi); border-bottom-color:var(--primary); } :root[data-look="editorial"] .mp{ background:none; border-radius:2px; border-color:var(--rule); } :root[data-look="editorial"] .mt-recent .chip{ border-radius:4px; border-color:var(--rule); } /* The editorial look keeps its paper ground; the hue lives in the rule and the bar instead. */ :root[data-look="editorial"] .mc[class*="mc-"]{ background:none; border-top-color:color-mix(in srgb, hsl(var(--kind)) 45%, var(--rule)); }