/* ============================================================ Holy Land Prayer : design tokens Every colour, size and space in the prototype resolves to a custom property declared here. Nothing is hard-coded per component, which is exactly the failure of the current site (roughly 4,000 lines of per-widget overrides in post-6.css). ============================================================ */ :root { /* ---------- Colour ------------------------------------------------ ONE navy. ONE gold. The logo's navy wins over the site's #324B93 because customers already have it on their certificates. ------------------------------------------------------------------ */ --navy: #20346F; /* brand navy, sampled from the logo */ --navy-deep: #16163F; /* dark surfaces: hero, bands, footer */ --gold: #F8A61B; /* accent, sampled from the logo dove */ --gold-hover: #FFB840; /* the only other gold that exists */ /* Warm neutrals. The photography is candlelight on limestone; a cold #FFFFFF ground fights it. */ --paper: #FBF8F3; /* page ground */ --stone: #F1ECE3; /* alternating band */ --stone-deep: #E7DFD2; /* insets, wells */ --ink: #1B1D26; /* body copy on paper */ --ink-muted: #5F5B54; /* secondary copy, captions */ --line: #E3DCD0; /* hairlines */ --line-strong: #CFC5B4; /* input borders, dividers that matter */ --on-dark: #FBF8F3; /* text on navy */ --on-dark-muted: #C9CFE6; /* secondary text on navy */ --on-dark-line: rgba(251, 248, 243, 0.16); --focus: #FFB840; /* focus ring, visible on both grounds */ /* ---------- Type -------------------------------------------------- */ --font-display: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; --font-ui: 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Fluid scale, 375px to 1280px. Body sits at 18px minimum: the audience is 45 to 70 and reading emotional content. */ --t-xs: 0.8125rem; /* 13 labels */ --t-sm: 0.9375rem; /* 15 fine print */ --t-base: clamp(1.0625rem, 0.99rem + 0.31vw, 1.1875rem); /* 17 - 19 */ --t-lead: clamp(1.1875rem, 1.10rem + 0.38vw, 1.375rem); /* 19 - 22 */ --t-md: clamp(1.25rem, 1.14rem + 0.47vw, 1.5rem); /* 20 - 24 */ --t-lg: clamp(1.5rem, 1.30rem + 0.85vw, 2rem); /* 24 - 32 */ --t-xl: clamp(1.875rem, 1.51rem + 1.55vw, 2.75rem); /* 30 - 44 */ --t-2xl: clamp(2.375rem, 1.80rem + 2.45vw, 3.75rem); /* 38 - 60 */ --t-num: clamp(3rem, 2.05rem + 4.05vw, 5.25rem); /* 48 - 84 */ --lh-tight: 1.08; --lh-head: 1.16; --lh-body: 1.65; --track-label: 0.14em; /* small caps labels */ --track-head: -0.012em; /* display headings */ /* ---------- Space (4px base) --------------------------------------- */ --s-1: 0.25rem; /* 4 */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-5: 1.5rem; /* 24 */ --s-6: 2rem; /* 32 */ --s-7: 3rem; /* 48 */ --s-8: 4rem; /* 64 */ --s-9: 6rem; /* 96 */ --s-10: 8rem; /* 128 */ --section-y: clamp(3.5rem, 2.4rem + 4.7vw, 7rem); /* ---------- Structure ---------------------------------------------- */ --measure: 34rem; /* readable line length */ --wrap: 74rem; /* 1184px content container */ --wrap-narrow: 52rem; --gutter: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem); --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(27, 29, 38, 0.06), 0 2px 6px rgba(27, 29, 38, 0.05); --shadow: 0 2px 4px rgba(27, 29, 38, 0.05), 0 10px 24px rgba(27, 29, 38, 0.09); --shadow-lg: 0 4px 8px rgba(27, 29, 38, 0.06), 0 24px 56px rgba(27, 29, 38, 0.16); --shadow-dark: 0 24px 60px rgba(6, 6, 22, 0.55); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 220ms; --header-h: 68px; /* ============================================================ LIGHT The hero is not a navy rectangle with a tint on it. It is a stone interior lit from one place. Everything below models that: a warm source low left, a cold vault up right, one shaft, and a floor. Kept as tokens so the same light can be reused on the scripture band and the closing band. ============================================================ */ /* The base field. Not flat: the vault is colder and higher, the floor is warmer and lower, which is the whole reason a real nave does not photograph as one colour. */ --nave-base: linear-gradient(168deg, #0C1026 0%, #101635 34%, #151C44 66%, #171E48 100%); /* The candle rank. Six stops rather than two, with the midpoints placed by hand to approximate inverse-square falloff: it drops hard for the first third and then carries a long dim tail. A two-stop gradient ramps linearly, which is exactly what reads as a CSS gradient rather than as light. */ --nave-bloom: radial-gradient(58% 46% at 18% 84%, rgba(255, 188, 92, 0.30) 0%, rgba(250, 166, 44, 0.195) 15%, rgba(238, 141, 30, 0.108) 30%, rgba(205, 113, 28, 0.054) 47%, rgba(162, 88, 24, 0.022) 66%, rgba(120, 64, 20, 0) 100%); /* Where the light does not reach. Cool, high, and weak, because a vault is lit by bounce and nothing else. */ --nave-vault: radial-gradient(72% 58% at 84% -6%, rgba(44, 76, 150, 0.44) 0%, rgba(32, 54, 112, 0.21) 34%, rgba(20, 32, 72, 0.06) 62%, rgba(14, 20, 50, 0) 84%); /* The Rotunda oculus. One soft column, off vertical, feathered on both edges so it has no findable boundary. */ --nave-shaft: linear-gradient(172deg, rgba(255, 214, 150, 0) 26%, rgba(255, 214, 150, 0.030) 38%, rgba(255, 222, 166, 0.062) 47%, rgba(255, 214, 150, 0.026) 56%, rgba(255, 214, 150, 0) 68%); /* A floor. Without it the field has no bottom and the whole thing floats. */ --nave-falloff: radial-gradient(128% 104% at 44% 34%, rgba(5, 8, 22, 0) 38%, rgba(5, 8, 22, 0.30) 74%, rgba(4, 7, 18, 0.60) 100%); /* ============================================================ GLASS The referent is the rank of oil lamps hanging over the Stone: blown vessels, warm at the shoulder, cooling to the base, with a hard rim highlight where the light catches the lip. It is not a frosted white iOS panel and it must never read as one. Warm, slightly amber, top-lit, imperfect. ============================================================ */ --lamp-fill: linear-gradient(168deg, rgba(255, 234, 200, 0.088) 0%, rgba(255, 212, 152, 0.046) 24%, rgba(186, 178, 208, 0.026) 58%, rgba(38, 42, 92, 0.062) 100%); /* the sheen: a single off-axis band, like a window in the glass */ --lamp-sheen: linear-gradient(104deg, rgba(255, 240, 214, 0) 30%, rgba(255, 240, 214, 0.040) 46%, rgba(255, 240, 214, 0) 60%); --lamp-rim: rgba(255, 233, 198, 0.22); /* lit lip, top edge */ --lamp-base: rgba(8, 10, 30, 0.38); /* shadowed foot */ --lamp-edge: rgba(255, 226, 184, 0.13); /* the border hairline */ --lamp-cast: 0 20px 48px rgba(4, 6, 22, 0.44); --lamp-blur: 14px; /* ============================================================ MOTION Candle flame and stone. Nothing springs, nothing bounces, nothing overshoots. Two easings only: one that decelerates hard for anything arriving, one symmetric for anything that breathes. ============================================================ */ --ease-settle: cubic-bezier(0.16, 0.84, 0.34, 1); /* arrivals */ --ease-breath: cubic-bezier(0.45, 0.05, 0.55, 0.95);/* cycles */ --dur-fast: 180ms; --dur-slow: 620ms; --dur-settle: 940ms; --dur-told: 1900ms; /* the count. Long enough to be a statement */ --cycle-flame: 19s; /* the bloom, breathing in still air */ } @media (min-width: 900px) { :root { --header-h: 80px; } } /* On a phone the hero is one tall column, so the bloom's bright core at 84 percent down lands directly behind the closing quote credit instead of in empty space beside it. Measured at 3.88:1 for gold there. The light is not removed, it is flattened and pushed to the very bottom edge so only its tail reaches any type. */ @media (max-width: 899px) { :root { --nave-bloom: radial-gradient(74% 30% at 10% 99%, rgba(255, 188, 92, 0.26) 0%, rgba(250, 166, 44, 0.165) 15%, rgba(238, 141, 30, 0.090) 30%, rgba(205, 113, 28, 0.044) 47%, rgba(162, 88, 24, 0.018) 66%, rgba(120, 64, 20, 0) 100%); } }