/* ============================================================ PASCUA — Colors & Type "2D sacred storybook, vibrant gentle watercolor" For kids 4-9 · Catholic/biblical theology ============================================================ */ /* ---------- Webfonts (all local, in /fonts/) ---------- url() paths are relative to THIS CSS file, which lives at the project root, so /fonts/* works whether the CSS is imported from root or a subfolder. */ /* Fraunces — static cuts: Light 300 · Regular 400 · Bold 700 · Black 900 (normal + italic) */ @font-face { font-family:'Fraunces'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/Fraunces-Light.ttf') format('truetype'); } @font-face { font-family:'Fraunces'; font-style:italic; font-weight:300; font-display:swap; src:url('fonts/Fraunces-LightItalic.ttf') format('truetype'); } @font-face { font-family:'Fraunces'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Fraunces-Regular.ttf') format('truetype'); } @font-face { font-family:'Fraunces'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/Fraunces-Italic.ttf') format('truetype'); } @font-face { font-family:'Fraunces'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/Fraunces-Bold.ttf') format('truetype'); } @font-face { font-family:'Fraunces'; font-style:italic; font-weight:700; font-display:swap; src:url('fonts/Fraunces-BoldItalic.ttf') format('truetype'); } @font-face { font-family:'Fraunces'; font-style:normal; font-weight:900; font-display:swap; src:url('fonts/Fraunces-Black.ttf') format('truetype'); } @font-face { font-family:'Fraunces'; font-style:italic; font-weight:900; font-display:swap; src:url('fonts/Fraunces-BlackItalic.ttf') format('truetype'); } /* Manrope — static cuts */ @font-face { font-family:'Manrope'; font-style:normal; font-weight:200; font-display:swap; src:url('fonts/manrope-thin.otf') format('opentype'); } @font-face { font-family:'Manrope'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/manrope-light.otf') format('opentype'); } @font-face { font-family:'Manrope'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/manrope-regular.otf') format('opentype'); } @font-face { font-family:'Manrope'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/manrope-medium.otf') format('opentype'); } @font-face { font-family:'Manrope'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/manrope-semibold.otf') format('opentype'); } @font-face { font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/manrope-bold.otf') format('opentype'); } /* Inter — static cuts */ @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Inter-Regular.otf') format('opentype'); } @font-face { font-family:'Inter'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/Inter-Italic.otf') format('opentype'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/Inter-Medium.otf') format('opentype'); } @font-face { font-family:'Inter'; font-style:italic; font-weight:500; font-display:swap; src:url('fonts/Inter-MediumItalic.otf') format('opentype'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/Inter-SemiBold.otf') format('opentype'); } @font-face { font-family:'Inter'; font-style:italic; font-weight:600; font-display:swap; src:url('fonts/Inter-SemiBoldItalic.otf') format('opentype'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/Inter-Bold.otf') format('opentype'); } @font-face { font-family:'Inter'; font-style:italic; font-weight:700; font-display:swap; src:url('fonts/Inter-BoldItalic.otf') format('opentype'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/Inter-ExtraBold.otf') format('opentype'); } @font-face { font-family:'Inter'; font-style:italic; font-weight:800; font-display:swap; src:url('fonts/Inter-ExtraBoldItalic.otf') format('opentype'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:900; font-display:swap; src:url('fonts/Inter-Black.otf') format('opentype'); } @font-face { font-family:'Inter'; font-style:italic; font-weight:900; font-display:swap; src:url('fonts/Inter-BlackItalic.otf') format('opentype'); } /* Karla — static cuts */ @font-face { font-family:'Karla'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Karla-Regular.ttf') format('truetype'); } @font-face { font-family:'Karla'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/Karla-Italic.ttf') format('truetype'); } @font-face { font-family:'Karla'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/Karla-Bold.ttf') format('truetype'); } @font-face { font-family:'Karla'; font-style:italic; font-weight:700; font-display:swap; src:url('fonts/Karla-BoldItalic.ttf') format('truetype'); } /* Karla 500/600 fall back to 700 (closest cut available). Use 700 for label-ui weight. */ @font-face { font-family:'Karla'; font-style:normal; font-weight:500 600; font-display:swap; src:url('fonts/Karla-Bold.ttf') format('truetype'); } :root { /* ============================================================ COLOR TOKENS — full 34-color sacred palette ============================================================ */ /* Greens — growth, garden, creation */ --soft-sage: #B8D4A8; --warm-green: #8FB870; --deep-moss: #5A8050; --forest-dark: #3D5A3D; /* Earth — wood, parchment, ground */ --cream-sand: #F4E4BC; --warm-tan: #D4B583; --earth-brown: #8B6F47; --deep-umber: #5C4329; /* Sky & water — Marian, baptismal */ --sky-blue: #B8DCEB; --ocean-blue: #6B9FBC; --deep-blue: #3D6680; --twilight-blue: #2A4A60; /* Stone & shadow — neutrals */ --soft-grey: #C8C0B5; --stone-grey: #8E8576; --slate-dark: #5C544A; /* Gold — halo, illumination, holiness */ --cream-gold: #F5E6BD; --warm-gold: #D4A862; --royal-gold: #B08846; /* Pure white */ --pure-white: #FFFFFF; /* Warm pinks/oranges — Sacred Heart, sunset, joy */ --soft-pink: #F5C9A8; --coral-warm: #E89E7A; --sunset-deep: #C46A4A; --sacred-red: #A03030; /* Liturgical — vestments & seasons */ --mary-blue: #4A6FA5; --liturgical-green: #2D6B3D; --liturgical-purple:#6B3D6B; --liturgical-white: #FAFAF5; --liturgical-red: #B81F1F; --liturgical-rose: #E89BAA; /* Clouds — atmosphere, gentle backgrounds */ --morning-cloud: #F5F0E8; --stormy-cloud: #6E7480; --heavenly-cloud: #FFF8DC; --twilight-cloud: #9DA3B0; --pure-cloud: #F8F8FF; /* Blues — extended sky range, atmospheric */ --sky-pale: #DCEEF6; /* lightest sky wash */ --sky-soft: #D8EBF4; /* very soft sky */ --sky-misty: #C2DDEB; /* misty mid */ --sky-haze: #A5CADE; /* hazy medium */ --sky-clear: #85B6CE; /* clearer deeper */ /* Pinks — Sacred Heart, sunset, blush extended */ --rose-mist: #FBD0DA; /* lightest pink */ --rose-pale: #FBE0E8; /* pale rose */ --rose-soft: #F4B8C8; /* soft rose */ --rose-warm: #EA9DB5; /* warm rose */ --rose-deep: #D86F8A; /* deeper rose / mature pink */ /* Purples — Marian, advent, lilac twilight */ --purple-deep: #4A2D4A; /* deepest twilight purple */ --purple-mid: #7D507D; /* mid purple */ --lilac-mid: #A88EAB; /* mid lilac */ --lilac-soft: #C3ABC3; /* soft lilac */ --lilac-pale: #E8D5E0; /* lightest lilac body */ /* Sage extended — meadow / dewy garden */ --sage-pale: #E8F2DC; /* lightest sage */ --sage-soft: #E0EED2; /* soft sage body */ --sage-mid: #A0C28E; /* mid sage */ /* ============================================================ SEMANTIC COLORS — use these in components ============================================================ */ /* Surfaces */ --bg-page: var(--morning-cloud); /* default page bg, gentle parchment */ --bg-surface: var(--pure-white); /* cards, panels */ --bg-elevated: var(--heavenly-cloud); /* lifted/featured cards */ --bg-muted: var(--liturgical-white);/* subtle wash */ --bg-inverse: var(--twilight-blue); /* dark headers, night mode */ /* Foreground / text */ --fg-1: var(--deep-umber); /* primary text — warm dark brown */ --fg-2: var(--slate-dark); /* secondary text */ --fg-3: var(--stone-grey); /* muted, captions */ --fg-4: var(--soft-grey); /* disabled, hints */ --fg-on-dark: var(--liturgical-white);/* text on dark bg */ --fg-on-gold: var(--deep-umber); /* text on gold */ --fg-link: var(--ocean-blue); /* links */ --fg-link-hover: var(--deep-blue); /* Borders / dividers */ --border-soft: rgba(140, 111, 71, 0.18); /* warm-brown @ 18% */ --border-strong: var(--warm-tan); --border-focus: var(--warm-gold); /* Brand accents — by menu */ --learn-color: var(--ocean-blue); /* Learn */ --learn-tint: var(--sky-blue); --play-color: var(--coral-warm); /* Play */ --play-tint: var(--soft-pink); --watch-color: var(--liturgical-purple); /* Watch */ --watch-tint: #D5BFD5; --faith-color: var(--royal-gold); /* Faith */ --faith-tint: var(--cream-gold); --profile-color: var(--deep-moss); /* Profile */ --profile-tint: var(--soft-sage); /* Feedback */ --success: var(--liturgical-green); --success-tint: var(--soft-sage); --warning: var(--warm-gold); --warning-tint: var(--cream-gold); --danger: var(--liturgical-red); --danger-tint: var(--liturgical-rose); --info: var(--mary-blue); --info-tint: var(--sky-blue); /* Holy / sacred accents */ --halo: var(--warm-gold); --halo-glow: radial-gradient(ellipse at center, rgba(212, 168, 98, 0.45) 0%, rgba(245, 230, 189, 0.15) 50%, rgba(245, 230, 189, 0) 80%); /* ============================================================ TYPE — fonts, scale, semantic styles ============================================================ */ --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif; /* storybook, scripture, hero — expressive serif */ --font-heading: 'Manrope', 'Avenir Next', system-ui, sans-serif; /* UI section titles, card headers */ --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* default body + UI text */ --font-accent: 'Karla', 'Inter', system-ui, sans-serif; /* labels, captions, parent-zone, scripture refs */ --font-mono: 'SFMono-Regular', ui-monospace, monospace; /* rare */ /* Type scale — generous for young readers */ --fs-display-xl: 56px; /* big storybook moments */ --fs-display-l: 44px; --fs-display-m: 34px; --fs-h1: 28px; --fs-h2: 22px; --fs-h3: 19px; --fs-body-l: 18px; /* default for kids */ --fs-body: 16px; --fs-body-s: 14px; /* captions, parent-only zones */ --fs-mono: 14px; /* Line heights — airy */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.7; /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ============================================================ SPACING, RADII, SHADOWS ============================================================ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* Generous, pillowy radii — soft like storybook corners */ --radius-xs: 6px; --radius-s: 10px; --radius-m: 16px; --radius-l: 24px; --radius-xl: 32px; --radius-pill: 999px; /* Shadows — warm, like a candle-lit page */ --shadow-1: 0 1px 2px rgba(92, 67, 41, 0.08); --shadow-2: 0 4px 12px rgba(92, 67, 41, 0.10), 0 1px 2px rgba(92, 67, 41, 0.06); --shadow-3: 0 10px 28px rgba(92, 67, 41, 0.14), 0 2px 6px rgba(92, 67, 41, 0.06); --shadow-glow: 0 0 32px rgba(212, 168, 98, 0.45); /* gold halo */ --shadow-inner-page: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 6px rgba(139, 111, 71, 0.10); /* parchment depth */ /* Watercolor wash backgrounds — radial blooms */ --wash-sky: radial-gradient(120% 80% at 30% 20%, #DCEEF6 0%, #F5F0E8 60%, #F5F0E8 100%); --wash-rose: radial-gradient(120% 80% at 70% 30%, #FBE0D5 0%, #F5F0E8 60%, #F5F0E8 100%); --wash-meadow: radial-gradient(120% 80% at 30% 80%, #D6E8C4 0%, #F5F0E8 60%, #F5F0E8 100%); --wash-dusk: radial-gradient(120% 80% at 50% 0%, #BBC5DA 0%, #F5F0E8 70%, #F5F0E8 100%); --wash-gold: radial-gradient(120% 80% at 50% 30%, #FBEEC6 0%, #FFF8DC 50%, #F5F0E8 100%); /* Motion */ --ease-storybook: cubic-bezier(.34, 1.3, .64, 1); /* gentle bounce — soft pop */ --ease-page: cubic-bezier(.4, 0, .2, 1); /* page turn */ --dur-fast: 180ms; --dur-base: 260ms; --dur-slow: 420ms; } /* Tap-wiggle — used by active nav glyphs */ @keyframes pascula-wiggle { 0% { transform: rotate(0deg) scale(1); } 15% { transform: rotate(-12deg) scale(1.08); } 35% { transform: rotate(10deg) scale(1.08); } 55% { transform: rotate(-7deg) scale(1.04); } 75% { transform: rotate(4deg) scale(1.02); } 100% { transform: rotate(0deg) scale(1); } } .pascula-wiggle { animation: pascula-wiggle 0.55s cubic-bezier(.34, 1.3, .64, 1) both; transform-origin: center; } /* ============================================================ SEMANTIC ELEMENT STYLES ============================================================ */ body { font-family: var(--font-body); font-size: var(--fs-body-l); line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg-page); -webkit-font-smoothing: antialiased; } h1, .h1, h2, .h2, h3, .h3 { font-family: var(--font-heading); color: var(--fg-1); line-height: var(--lh-snug); margin: 0 0 .4em; letter-spacing: -0.01em; } h1, .h1 { font-size: var(--fs-h1); font-weight: 700; } h2, .h2 { font-size: var(--fs-h2); font-weight: 700; } h3, .h3 { font-size: var(--fs-h3); font-weight: 600; } .display-xl, .display-l, .display-m { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight); color: var(--fg-1); letter-spacing: -0.02em; font-optical-sizing: auto; font-variation-settings: 'opsz' 96, 'SOFT' 60; } .display-xl { font-size: var(--fs-display-xl); } .display-l { font-size: var(--fs-display-l); } .display-m { font-size: var(--fs-display-m); } p, .body { font-size: var(--fs-body-l); line-height: var(--lh-normal); } .body-s, small { font-size: var(--fs-body-s); color: var(--fg-2); } .caption { font-size: var(--fs-body-s); color: var(--fg-3); } .scripture { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-relaxed); color: var(--fg-1); } .scripture-ref { font-family: var(--font-accent); font-weight: 600; font-size: var(--fs-body-s); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); } .label-ui { font-family: var(--font-accent); font-weight: var(--fw-bold); font-size: var(--fs-body-s); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); } a { color: var(--fg-link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } a:hover { color: var(--fg-link-hover); } /* ── SOP: 1px scrollbars everywhere (horizontal + vertical) ── */ *::-webkit-scrollbar { width: 1px; height: 1px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(92,67,41,0.35); border-radius: 999px; } *::-webkit-scrollbar-corner { background: transparent; } * { scrollbar-width: thin; scrollbar-color: rgba(92,67,41,0.35) transparent; }