/* ========================================================================== Home Church, design tokens This file holds custom properties only. No selectors beyond :root and the dark theme scope. Everything else in the app reads from here. ========================================================================== */ :root { /* --- Color, core surfaces and ink ------------------------------------ */ --hc-paper: #F7F4EF; /* app background, warm off-white */ --hc-paper-sunk: #EFEAE2; /* inputs, wells, disabled */ --hc-cream: #EDE8DF; /* cards, raised surfaces */ --hc-ink: #111111; /* primary text */ --hc-dark: #1A1918; /* dark panels, primary button fill */ /* Three of these moved for contrast. The numbers below are measured against --hc-cream, the card surface, because that is the hardest ground in the app and a token that passes there passes on paper too. --hc-mid was #7A7570, which is 3.74:1 on a card. It is the color of .hc-caption, which carries bylines, dates, service times, and every card subtitle, so it is the second most common text style in the app after the body serif and it was failing AA everywhere it appeared. --hc-accent-deep was #8F8271, at 3.07:1. That token exists specifically for eyebrows a person has to read, which is to say it had one job. Its class is even called --legible. Hue and saturation are unchanged in all three. Only value moved, by the smallest amount that clears 4.5:1 on cream, so the palette still reads as the same warm family. */ --hc-mid: #6D6864; /* secondary text, 5.02 paper / 4.51 cream */ --hc-rule: #C8C0B0; /* hairlines, dividers, not text */ --hc-accent: #B5A898; /* taupe, DECORATIVE ONLY, 2.12, never set text in it */ --hc-accent-deep: #71675A; /* taupe when text must be legible, 5.05 / 4.54 */ --hc-success: #5F7355; --hc-warning: #896134; /* 5.01 paper / 4.50 cream */ --hc-error: #8B4A3F; --hc-overlay: rgba(26,25,24,0.55); /* Text on a dark fill. Kept as a token so dark mode can retarget it. */ --hc-on-dark: #F7F4EF; /* --- Type faces ------------------------------------------------------ */ /* THE NAME IS HISTORICAL. This token held Cormorant, a Garamond revival, and every rule in the app still reads it by the name it had then. It now holds Manrope, which is a sans. Renaming it would touch a hundred lines across four files and leave the .hc-body-serif class, which lives in template strings all over js/, still saying serif. So the name stays and this comment carries the truth: --hc-serif is the reading face, whatever it happens to be. See the note in css/fonts.css for why it moved. */ --hc-serif: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --hc-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Section headers, the Home greeting, and the scroll-revealed screen title. A heavier geometric sans, distinct from both the reading serif and the plain UI sans, used only where something needs to announce itself at a glance. */ --hc-sans-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* --- Type scale, size / line ----------------------------------------- THE READING SIZES CAME DOWN A STEP when Cormorant left. Cormorant has an unusually small x-height, so it was set large to compensate; Manrope's is much bigger and the same pixel size reads noticeably larger. These are roughly 10% off the old numbers, which lands the actual drawn height of a lowercase letter back where it was. The sans and eyebrow sizes are untouched, because nothing about them changed. */ --hc-display-xl: 36px; --hc-display-xl-line: 40px; --hc-display-l: 29px; --hc-display-l-line: 34px; --hc-display-m: 23px; --hc-display-m-line: 28px; --hc-eyebrow: 11px; --hc-eyebrow-line: 14px; --hc-body-serif: 16px; --hc-body-serif-line: 25px; --hc-body-sans: 16px; --hc-body-sans-line: 24px; --hc-question: 17px; --hc-question-line: 26px; --hc-quote: 19px; --hc-quote-line: 28px; --hc-caption: 13px; --hc-caption-line: 18px; --hc-button: 16px; --hc-button-line: 20px; --hc-tab: 11px; --hc-tab-line: 14px; --hc-track-eyebrow: 0.12em; --hc-track-button: 0.02em; /* User text size preference, set from Profile. Multiplies reading type. */ --hc-text-scale: 1; /* --- Spacing, 4pt base ----------------------------------------------- */ --hc-space-xs: 4px; --hc-space-sm: 8px; --hc-space-md: 12px; --hc-space-base:16px; --hc-space-lg: 24px; --hc-space-xl: 32px; --hc-space-xxl: 48px; --hc-space-xxxl:64px; --hc-screen-pad: 20px; --hc-card-pad: 20px; --hc-card-gap: 12px; --hc-section-top:40px; /* --- Shape ------------------------------------------------------------ */ --hc-radius-sm: 8px; /* inputs */ --hc-radius-md: 10px; /* buttons */ --hc-radius-lg: 12px; /* cards */ --hc-radius-pill:999px; /* pills, avatars */ --hc-hairline: 0.5px; --hc-edge-rule: 1.5px; /* the signature left edge */ /* --- Elevation, used only on sheets and modals ------------------------ */ --hc-shadow-sheet: 0 -2px 24px rgba(26,25,24,0.10); --hc-shadow-modal: 0 8px 32px rgba(26,25,24,0.14); /* --- Motion ----------------------------------------------------------- */ --hc-ease: cubic-bezier(0.4, 0, 0.2, 1); --hc-ease-enter: cubic-bezier(0, 0, 0.2, 1); --hc-dur-fast: 200ms; /* small state changes */ --hc-dur-base: 300ms; /* view transitions */ --hc-dur-sheet: 400ms; /* bottom sheets */ /* --- Chrome ----------------------------------------------------------- */ --hc-header-h: 52px; --hc-tap-min: 44px; /* minimum touch target, never go below this */ /* THE BOTTOM OF THE SCREEN, AND WHAT IS RESERVED AT IT. TWO NAVIGATIONS SHIP AND EITHER ONE CAN BE DOWN THERE, which is what these two numbers exist to hide from everything else. The six tile plinth and the round button are different shapes with different footprints, and the ten or so rules that clear the bottom of the screen, the discs, the journal pill, the toast, every screen's own padding, should not any of them have to know which one is on. --hc-chrome-inset is the gap between anything fixed at an edge and that edge. The plinth floats on it, the button sits on it, and so do the two discs and the pill on the row above them, which is what keeps them all on the same margins whichever navigation is drawn. --hc-chrome-space is the whole footprint of whichever one is on, inset included. It is defined here as the button's, because the button is the default, and redefined on #app[data-nav="bar"] in css/components.css as the plinth's. Nothing else in the app asks the question twice. */ --hc-chrome-inset: 12px; --hc-navfab-size: 64px; --hc-chrome-space: calc(var(--hc-navfab-size) + (var(--hc-chrome-inset) * 2)); /* The plinth, for the phones set to 'bar'. Two measurements describe it: the row of tabs, and the frame between that row and the edge of the glass it sits on. --hc-chrome-space above is the sum, plus its inset. */ --hc-tabbar-h: 56px; --hc-tabbar-pad: 6px; /* The active tab is a tile raised out of the plinth. On glass there is no solid ground to rise from, so the rise is drawn with light: a lighter face, a hairline, a bright lip on top and a dark one underneath. */ --hc-tabbar-tile: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,244,239,0.86)); --hc-tabbar-tile-edge: rgba(122,110,95,0.18); --hc-tabbar-tile-shadow: inset 0 1px 0 rgba(255,255,255,0.90), inset 0 -1px 0 rgba(26,25,24,0.06), 0 3px 9px rgba(26,25,24,0.12); /* THE BUTTON HAS NO SKIN OF ITS OWN. It used to: a fixed dark fill and a shadow, drawn as a solid disc with a 2px gold ring, which read as a badge bolted onto the app rather than a piece of it. It is made of --hc-glass-* now, the same frosted paper as the plinth it replaced, so the only thing left to say about its size is its size. */ /* The full screen navigation behind it. A dark scrim over whatever was on the glass, blurred just enough that the screen underneath reads as a place you have not left rather than as a background image. The two inks are white and a step down from it, and they are fixed rather than themed for the same reason the fill above is: this layer is its own dark room in both themes, so ink that followed --hc-ink would go black on black the moment somebody turned the lights on. */ --hc-navmenu-scrim: rgba(0,0,0,0.75); --hc-navmenu-ink: #FFFFFF; --hc-navmenu-dim: rgba(247,244,239,0.72); --hc-navmenu-rule: rgba(247,244,239,0.22); /* The floating glass. Two backgrounds because the blurred version has to be far more transparent to read as glass, and the opaque one has to be dense enough to stay legible where backdrop-filter is unsupported. In light mode this is frosted paper, not grey glass: the tint stays in the warm family so it looks like the app rather than like the OS. THE NAME USED TO SAY TABBAR, and the material was the tab bar's plinth. The plinth is gone; the material is not. The card behind the focused heading on the index rail is drawn in it, which is what keeps that card reading as a piece of this app's chrome rather than as a tooltip, and anything else that has to float over a photograph should reach for these four rather than inventing a fifth grey. */ --hc-glass-skin: linear-gradient(178deg, rgba(255,253,250,0.94), rgba(238,233,225,0.92)); --hc-glass-skin-lens: linear-gradient(178deg, rgba(255,253,250,0.72), rgba(238,233,225,0.62)); --hc-glass-edge: rgba(122,110,95,0.28); --hc-glass-shadow: 0 14px 34px rgba(26,25,24,0.18), 0 2px 8px rgba(26,25,24,0.08), inset 0 1px 0 rgba(255,255,255,0.70), inset 0 -1px 0 rgba(26,25,24,0.05); --hc-glass-sheen: linear-gradient(112deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 26%, rgba(255,255,255,0) 52%); /* The brand gold, sampled from assets/icons/mark.png rather than guessed. It is a mark colour everywhere else in this app, see README; the back to top disc is the one interface element that borrows it, deliberately, because being the only gold thing on the screen is what makes it findable without a label. Two skins, same reasoning as the tab bar: --hc-gold-skin-lens is the real glass and needs to be thin enough that what scrolls underneath shows through, --hc-gold-skin stands in where the browser cannot blur and has to be dense enough to read on its own. The arrow flips with the theme rather than staying dark in both, because at this thinness the disc composites towards whatever it is over, and a fixed arrow colour fails contrast on one side or the other. The halo is what keeps it legible on the one surface that can be any colour at all, a photograph. */ /* The highlight, and the hint that teaches it. A MARKER BEHIND THE WORDS, NOT A LINE UNDER THEM. This was a gradient filling the bottom 0.55em of the line, which is a real highlighter's shape on paper and reads on a phone as an underline: at a glance the words did not look kept, they looked linked. It is a block behind the whole of them now. The two values are a percentage of --hc-accent, so each theme gets the one it can carry. Light lays 62% of taupe over paper and near black ink sits on it at about 11:1. Dark cannot take that much: --hc-accent lifts to #C4B5A2 there, and 62% of it under paper coloured text is a block you read off rather than through, so it drops to 30% and the text holds around 8:1. Whoever changes one of these has to check the other. */ --hc-hl-wash: color-mix(in srgb, var(--hc-accent) 62%, transparent); --hc-hl-noted: color-mix(in srgb, var(--hc-accent) 78%, transparent); --hc-gold: #D7BA85; /* The light that crosses a scripture reference, css/components.css. A shade deeper than the gold above, because it is drawn inside taupe text on paper rather than as a surface, and the brand gold on paper nearly disappears. */ --hc-scripture-glint: #C0913C; --hc-scripture-glint-hi: #E8BC62; --hc-scripture-glow: rgba(214, 164, 72, 0.55); --hc-gold-ink: #1A1918; --hc-gold-halo: rgba(255,252,246,0.55); --hc-gold-skin: linear-gradient(178deg, rgba(233,208,158,0.86), rgba(206,177,122,0.82)); --hc-gold-skin-lens: linear-gradient(178deg, rgba(233,208,158,0.34), rgba(206,177,122,0.28)); --hc-gold-edge: rgba(122,96,48,0.34); --hc-gold-shadow: 0 10px 24px rgba(26,25,24,0.16), 0 2px 6px rgba(26,25,24,0.08), inset 0 1px 0 rgba(255,255,255,0.40), inset 0 -1px 0 rgba(26,25,24,0.07); --hc-gold-sheen: linear-gradient(112deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.09) 26%, rgba(255,255,255,0) 54%); color-scheme: light; } /* -------------------------------------------------------------------------- Dark mode. Home Church's dark is warm charcoal, never pure black. Applied by an explicit attribute so the Profile toggle is authoritative and the system preference only decides the default. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { --hc-paper: #1A1918; --hc-paper-sunk: #201E1D; --hc-cream: #232120; --hc-ink: #F2EEE7; --hc-dark: #F2EEE7; /* primary button inverts to light on dark */ --hc-mid: #9A938A; --hc-rule: #3A3633; --hc-accent: #C4B5A2; --hc-accent-deep: #CFC1AE; --hc-success: #86A078; --hc-warning: #C89A63; --hc-error: #C2796B; --hc-overlay: rgba(10,10,9,0.65); --hc-on-dark: #1A1918; --hc-shadow-sheet: 0 -2px 24px rgba(0,0,0,0.40); --hc-shadow-modal: 0 8px 32px rgba(0,0,0,0.48); /* The floating glass in the dark. The shadow does the work of making it float and the sheen is one soft diagonal pass. See the note in :root for what still reaches for these. */ --hc-glass-skin: linear-gradient(178deg, rgba(58,54,51,0.88), rgba(26,25,24,0.86)); --hc-glass-skin-lens: linear-gradient(178deg, rgba(58,54,51,0.52), rgba(26,25,24,0.42)); --hc-glass-edge: rgba(196,181,162,0.20); --hc-glass-shadow: 0 16px 36px rgba(0,0,0,0.52), inset 0 1px 0 rgba(242,238,231,0.10), inset 0 -1px 0 rgba(0,0,0,0.30); --hc-glass-sheen: linear-gradient(112deg, rgba(247,244,239,0.15) 0%, rgba(247,244,239,0.05) 26%, rgba(247,244,239,0) 52%); /* The raised tile in the dark: a denser pane set into the glass rather than a hole cut through it. */ --hc-tabbar-tile: linear-gradient(180deg, rgba(247,244,239,0.15), rgba(247,244,239,0.055)); --hc-tabbar-tile-edge: rgba(207,193,174,0.30); --hc-tabbar-tile-shadow: inset 0 1px 0 rgba(255,252,247,0.24), inset 0 -1px 0 rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.30); /* The disc in the dark. The gold deepens so it glows against charcoal instead of glaring, and the arrow inverts to paper for the same reason the light theme's is ink. */ /* See the note in :root. Much less of it here, for the reason given. */ --hc-hl-wash: color-mix(in srgb, var(--hc-accent) 30%, transparent); --hc-hl-noted: color-mix(in srgb, var(--hc-accent) 42%, transparent); --hc-gold: #CBAC74; /* Brighter on dark, the other way round: the text is already light, so the light crossing it has to be lighter still to be seen at all. */ --hc-scripture-glint: #EBCB8B; --hc-scripture-glint-hi: #FFF3D6; --hc-scripture-glow: rgba(240, 210, 150, 0.50); --hc-gold-ink: #F4EFE6; --hc-gold-halo: rgba(12,11,10,0.55); --hc-gold-skin: linear-gradient(178deg, rgba(226,197,141,0.86), rgba(190,158,100,0.80)); --hc-gold-skin-lens: linear-gradient(178deg, rgba(226,197,141,0.42), rgba(190,158,100,0.34)); --hc-gold-edge: rgba(247,231,196,0.30); --hc-gold-shadow: 0 14px 28px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,246,224,0.24), inset 0 -1px 0 rgba(0,0,0,0.20); --hc-gold-sheen: linear-gradient(112deg, rgba(255,250,236,0.24) 0%, rgba(255,250,236,0.07) 26%, rgba(255,250,236,0) 54%); color-scheme: dark; }