/* ========================================================================== Sidedish Two kinds of page, deliberately unalike. The LANDING is a scene: a field, a question, a search field, nothing else. Every reference that inspired it -- Ecosia, OceanHero, Soar -- earns its calm by refusing to put anything else on that screen. Everything after it is CONTENT: rows, rules, tight vertical rhythm, no scenery. HappyCow is dense and unadorned and that is why it works. Mixing the two is what made the first attempt look like a prototype with a banner stuck on top. ========================================================================== */ /* ---- tokens -------------------------------------------------------- */ :root { /* paper, not white: white goes grey next to a green scene */ --paper: #fcfbf7; --card: #ffffff; --ink: #16190f; --ink-2: #5c6353; --ink-3: #878d7c; --rule: #e7e6dc; --rule-soft: #f1f0e8; --green: #2f6b34; --green-ink: #24522a; --green-wash: #e9f1e6; --gold: #9a6a12; --gold-wash: #f8efdb; --clay: #8a4b2a; --clay-wash: #f7ece5; --slate: #6d7367; --slate-wash: #efefea; /* the scene */ --sky-top: #cfe3ef; --sky-mid: #eaf1e2; --sky-low: #f6f3e2; --sun: #ffe9b0; --hill-far: #b9cfa8; --hill-near: #94b884; --blade-far: #9dbf85; --blade-near: #244d1f; --scene-ink: #16190f; --shadow-sm: 0 1px 2px rgba(22,25,15,.06); --shadow-lg: 0 18px 48px -18px rgba(22,25,15,.28); --r: 14px; --maxw: 1080px; } /* NO DARK PALETTE. The content pages are light only -- both references are, and a dark restaurant listing reads like a terminal, which was the original complaint. These blocks used to redefine --paper, --ink, --card and --rule for a dark OS, and they OUTRANKED the light palette below no matter what order they appeared in: `:root:not([data-theme="light"])` scores higher on specificity than a bare `:root`. So anybody whose machine was set to dark got the old scheme and the redesign never reached them. The homepage keeps its dark photographic treatment; it sets its own --scene-ink and --scene-dim inside .scene and does not depend on these. ------------------------------------------------------------------- */ /* ---- base ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font: inherit; } /* one type scale, used everywhere */ .t-display { font-size: clamp(36px, 6.2vw, 68px); font-weight: 680; letter-spacing: -0.04em; line-height: 1.02; } .t-title { font-size: clamp(26px, 3.4vw, 38px); font-weight: 660; letter-spacing: -0.028em; line-height: 1.1; } .t-lede { font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.5; color: var(--ink-2); } .t-row { font-size: 17px; font-weight: 600; letter-spacing: -0.012em; } .t-meta { font-size: 13.5px; color: var(--ink-2); } .t-cap { font-size: 12.5px; color: var(--ink-3); } .shell { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } .narrow { max-width: 760px; } /* ---- chrome -------------------------------------------------------- */ .bar { display: flex; align-items: center; gap: 22px; max-width: var(--maxw); margin: 0 auto; padding: 18px 22px; } .bar.on-scene { position: relative; z-index: 3; } .mark { font-size: 16.5px; font-weight: 700; letter-spacing: -0.03em; } .mark i { font-style: normal; color: var(--green); } .bar nav { margin-left: auto; display: flex; gap: 20px; font-size: 14.5px; color: var(--ink-2); } .bar nav a:hover { color: var(--ink); } .on-scene .mark, .on-scene nav { color: var(--scene-ink); } .on-scene nav a { opacity: .78; } .on-scene nav a:hover { opacity: 1; } /* ---- the scene ------------------------------------------------------- Rebuilt using Soar's actual technique rather than my guess at it. Theirs is not painted; it is a composited stack, and every layer is a CSS gradient the GPU handles for free: .sky-ramp-morph five stacked radial-gradients -- two "walls" at the sides, a soft white DOME low and centre (the thing that reads as cloud), a wide horizon lift, a base rays two repeating-conic-gradients, mix-blend-mode:screen, radial-masked so they fade before the edges grain an SVG feTurbulence tile, opacity .5, soft-light mask the whole unit masked out toward the bottom The motion is CSS custom properties transitioning, which is why it drifts without a single repaint. That needs @property so the browser knows how to interpolate a percentage or a colour. Adapted here for a field rather than a sky: the photograph is the base, the dome becomes low haze sitting on the grass, and the rays fall from above the way late light does across a pasture. -------------------------------------------------------------------- */ @property --haze-y { syntax: ""; inherits: false; initial-value: 112%; } @property --haze-a { syntax: ""; inherits: false; initial-value: .50; } @property --wall-y { syntax: ""; inherits: false; initial-value: 88%; } @property --lift-y { syntax: ""; inherits: false; initial-value: 104%; } @property --ray-a { syntax: ""; inherits: false; initial-value: 1; } /* THE GROUND IS THE SCENE'S, ALL THE WAY DOWN. 100svh is the SMALL viewport: on an iPhone the moment Safari's toolbar folds away the page grows past it and the body's paper showed through as a white band under the hero. Riley: "why's the homepage background not fill the mobile height?" dvh tracks the toolbar; vh is the fallback for browsers without it; and the body itself is painted the scene's green so there is nothing white to show even while the viewport is mid-change. */ .page-home body { background: #1d2c1b; } /* midpoint of the photo's rendered top (#253225) and bottom (#152712) edges -- this colour is what Safari paints into the status-bar and toolbar bands, which no layer can reach (100lvh=836, screen=956). Was #101f0e, far darker than either edge. See FOUR PHONE FIXES at the end of this file. */ .scene { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #101f0e; --scene-ink: #f4f6f0; --scene-dim: #c6cfbe; --par-x: 0px; --par-y: 0px; --tint-strong: #dff0d2; --tint-mid: #b9d6a8; --tint-band: #8fbe83; } /* L0 -- the photograph, AS RILEY GRADED IT. /field.jpg is his own export of the romaine macro: already darkened, already vignetted, already the olive it is meant to be. NOTHING IS LAYERED OVER IT. There was a #4e5331 multiply here for one build -- his first instruction, before he sent the graded file -- and it is gone because the file now arrives with that treatment baked in and doing it twice is doing it twice. The old brightness(.82) is gone for the same reason. Any change to how dark this photograph is belongs in the file, not in a filter that silently disagrees with the artwork. */ .scene::before { content: ""; position: absolute; inset: -3%; z-index: 0; background: url(/field.jpg) 50% 50% / cover no-repeat; transform: translate(var(--par-x), var(--par-y)); transition: transform .6s cubic-bezier(.2,.7,.3,1); will-change: transform; } /* L1 -- atmosphere. The dome is the cloud. */ .sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,.55) 88%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,.55) 88%, rgba(0,0,0,0) 100%); } .sky-ramp { position: absolute; inset: 0; background: radial-gradient(48% 80% at -10% 96%, color-mix(in srgb, var(--tint-strong) 16%, transparent) 0%, transparent 58%), radial-gradient(48% 80% at 110% 96%, color-mix(in srgb, var(--tint-strong) 16%, transparent) 0%, transparent 58%), radial-gradient(90% 60% at 50% 128%, rgba(226,238,214,.30) 0%, rgba(226,238,214,.12) 34%, rgba(226,238,214,0) 60%), radial-gradient(200% 130% at 50% 118%, color-mix(in srgb, var(--tint-mid) 14%, transparent) 0%, color-mix(in srgb, var(--tint-band) 8%, transparent) 22%, transparent 44%); /* NOT animated. Soar transitions these on a state change, once, over 1.25s -- it never loops them, because animating a gradient repaints the whole layer every frame. Any motion here comes from transform and opacity, which the compositor does for free. */ } /* L2 -- light falling through, exactly Soar's construction */ .rays { display: none; position: absolute; left: 50%; bottom: -14%; width: 200vw; height: 118vh; z-index: 2; mix-blend-mode: screen; transform: translateX(-50%); pointer-events: none; opacity: var(--ray-a); background: repeating-conic-gradient(from 200deg at 50% 0%, rgba(255,255,255,0) 0deg, rgba(255,255,255,.085) 3deg, rgba(255,255,255,0) 11deg), repeating-conic-gradient(from 206deg at 50% 0%, rgba(255,255,255,0) 0deg, rgba(255,255,255,.05) 1.4deg, rgba(255,255,255,0) 6.5deg); -webkit-mask-image: radial-gradient(80% 95% at 50% 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 45%, transparent 78%); mask-image: radial-gradient(80% 95% at 50% 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 45%, transparent 78%); animation: rays-drift 78s ease-in-out infinite; } /* transform and opacity only: both composited, neither repaints */ @keyframes rays-drift { 0%,100% { opacity: .55; transform: translateX(-50%) rotate(-.7deg); } 50% { opacity: .95; transform: translateX(-50%) rotate(.7deg); } } /* L3 -- grain. Soar's exact tile, and the reason a big gradient stops looking like a big gradient. */ .grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .5; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* L4 -- motes, on a canvas the way their starfield is */ #field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; } /* L5 -- the scrim the copy sits on */ /* The scrim was built to darken a bright field photograph enough to read white type on. The multiply on L0 now does most of that, so these are HALF what they were -- stacked at their old strength over the olive the headline sat in a black hole and the leaves stopped being visible at all. What is left is the part that still earns its place: a little more weight behind the copy, and the top and bottom edges pulled down so the masthead and the footer links have something to sit against. */ /* --edge IS THE FADE INTO THE BROWSER'S OWN BANDS. Zero by default, so on a desktop the scrim is exactly what it always was: a gradient whose two stops both sit at 0 takes its LAST colour everywhere, which here is transparent. The phone rule at the end of this file is the only place that gives it a width; see TWO FOOTER FIXES / FOUR PHONE FIXES there. */ .scene::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(180deg, #101f0e 0px, rgba(16,31,14,0) var(--edge, 0px)), linear-gradient(0deg, #101f0e 0px, rgba(16,31,14,0) var(--edge, 0px)), radial-gradient(46% 30% at 50% 41%, rgba(2,8,4,.34) 0%, rgba(2,8,4,.15) 55%, rgba(2,8,4,0) 78%), linear-gradient(180deg, rgba(3,10,5,.40) 0%, rgba(3,10,5,.10) 16%, rgba(3,10,5,0) 34%, rgba(3,10,5,.12) 70%, rgba(3,10,5,.46) 100%); } .scene-body { position: relative; z-index: 6; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 22px; padding-bottom: clamp(150px, 30vh, 340px); } .scene-body h1 { margin: 0 0 8px; color: var(--scene-ink); font-size: clamp(28px, 3.2vw, 42px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; text-shadow: 0 2px 34px rgba(0,0,0,.6); } .scene-body .kicker { margin: 0 0 30px; color: var(--scene-dim); font-size: 15px; text-shadow: 0 1px 22px rgba(0,0,0,.65); } @media (prefers-reduced-motion: reduce) { .sky-ramp, .rays { animation: none; } .scene::before { transition: none; } .peek { transition: none; } .peek.open { transition: none; } .peek iframe { transition: none; } } /* ---- the search bar: dark glass ------------------------------------ */ .find { display: flex; align-items: center; width: min(660px, 100%); background: rgba(20, 24, 21, .62); border: 1px solid rgba(255, 255, 255, .10); border-radius: 999px; padding: 7px 7px 7px 22px; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 22px 60px -26px rgba(0, 0, 0, .9); transition: border-color .2s ease, background .2s ease; } .find:focus-within { border-color: rgba(255, 255, 255, .2); background: rgba(24, 30, 25, .74); } .find svg { flex: 0 0 auto; color: var(--scene-dim); margin-right: 13px; } .find input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--scene-ink); font: inherit; font-size: 15.5px; padding: 13px 0; -webkit-appearance: none; } .find input::placeholder { color: var(--scene-dim); opacity: .82; } .find input::-webkit-search-cancel-button { display: none; } .find button { flex: 0 0 auto; border: 0; border-radius: 999px; cursor: pointer; background: #3f8f47; color: #fff; font-weight: 560; font-size: 14px; padding: 11px 20px; letter-spacing: -0.005em; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 8px 26px -8px rgba(74,154,74,.75); transition: filter .16s ease; } .find button:hover { filter: brightness(1.1); } /* suggestion chips. These lost their base rules when the scene block was rewritten, and rendered as bare square buttons on the results page. */ .suggest { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 20px; } .suggest button { border: 1px solid rgba(255,255,255,.13); background: rgba(20,24,21,.5); color: var(--scene-dim); font-size: 13.5px; padding: 7px 15px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all .15s ease; } .suggest button:hover { color: var(--scene-ink); border-color: rgba(255,255,255,.3); background: rgba(28,34,28,.72); } /* the secondary row, the way Soar puts trip options under the search */ .opts { display: inline-flex; align-items: center; margin-top: 14px; background: rgba(20, 24, 21, .5); border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px; padding: 3px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .opts button { border: 0; background: none; cursor: pointer; color: var(--scene-dim); font-size: 13.5px; padding: 8px 15px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; transition: color .15s ease, background .15s ease; } .opts button:hover { color: var(--scene-ink); } .opts .div { width: 1px; height: 17px; background: rgba(255,255,255,.10); } /* ---- scene chrome -------------------------------------------------- */ .bar.on-scene { position: relative; z-index: 7; padding: 20px 30px; max-width: none; width: 100%; } /* THE OLD SCENE WORDMARK, and why these two lines are gone rather than edited. The redesign block near the bottom of this file restates the masthead in full; it used to restate the font-size too, which is the only reason this 17px never showed. Trimming it to `color: #fff` -- correct, since the sizes are meant to live in ONE place -- handed the size back to this rule, and the homepage wordmark rendered at 17px while every other page rendered at 39. The green went with it: the is now the "eats" half of the logotype, and tinting it would make the wordmark two colours as well as two weights. */ /* THE OLD OUTLINED GLASS PILLS ARE GONE TOO, and this one had teeth: it set font-size ON THE , while the redesign sets it on the