/* [file: wp-content/themes/storefront-storytheme/css/storytheme-tokens.css] */ /** * GuteNachtGeschichten Design Tokens — Calm Bedtime * ------------------------------------------------------------ * One accent only: warm moon-gold. Everything else is a calm, * deep night-sky with soft warm-white text. No neon glow, no * shifting gradients, no competing hues. Motion is limited to a * gentle hover lift and respects prefers-reduced-motion. * * Loaded early (dependency of child-style + magical-header) so the * theme AND the storybot plugin grids consume the --gng-* vars. * ------------------------------------------------------------ */ :root { /* --- Calm night-sky surfaces --- */ --gng-bg: #0f1226; /* page background base */ --gng-bg-deep: #0a0c1c; /* darker bottom / header / footer */ --gng-bg-glow: rgba(244, 201, 122, 0.06); /* soft warm moon glow at top */ /* --- Card surfaces --- */ --gng-card: #161a35; --gng-card-hover: #1c2142; /* --- Borders (subtle; gold only on hover) --- */ --gng-border: rgba(255, 255, 255, 0.08); --gng-border-hover: rgba(244, 201, 122, 0.40); /* --- Text --- */ --gng-text: #e8eaf2; /* soft warm white */ --gng-text-muted: #9aa0c0; --gng-text-dim: #7b8198; /* --- THE single accent: warm moon-gold --- */ --gng-accent: #f4c97a; /* CTA, links, stars, hover */ --gng-accent-hover: #e8b85f; --gng-accent-soft: rgba(244, 201, 122, 0.14); /* --- Semantic (used sparingly) --- */ --gng-success: #8fb89a; /* muted sage: "kostenlos" badge only */ /* --- Radii / shadow / spacing --- */ --gng-radius: 14px; --gng-radius-lg: 18px; --gng-radius-pill: 999px; --gng-shadow: 0 6px 20px rgba(5, 6, 15, 0.45); --gng-shadow-soft: 0 3px 12px rgba(5, 6, 15, 0.35); --gng-shadow-hover: 0 10px 28px rgba(5, 6, 15, 0.5); --gng-section-gap: clamp(48px, 8vw, 80px); --gng-container: 1200px; /* --- Fonts --- */ --gng-font-title: "Quicksand", "Open Sans", sans-serif; --gng-font-body: "Open Sans", Helvetica, Arial, sans-serif; /* Backwards-compat aliases so existing --storybot-grid-* vars in the plugin grids resolve to the calm palette in one place. */ --storybot-grid-bg-primary: var(--gng-bg); --storybot-grid-bg-secondary: var(--gng-bg-deep); --storybot-grid-bg-tertiary: var(--gng-card); --storybot-grid-bg-card: var(--gng-card); --storybot-grid-bg-hover: var(--gng-card-hover); --storybot-grid-text-primary: var(--gng-text); --storybot-grid-text-secondary: var(--gng-text); --storybot-grid-text-muted: var(--gng-text-muted); --storybot-grid-border-primary: var(--gng-border); --storybot-grid-border-hover: var(--gng-border-hover); --storybot-grid-shadow-light: rgba(5, 6, 15, 0.35); --storybot-grid-shadow-glow: rgba(244, 201, 122, 0.16); } /* Light theme override (toggled via .storybot-theme-light on ). Kept calm: warm cream storybook with the same moon-gold accent. */ .storybot-theme-light { --gng-bg: #f6f3ec; --gng-bg-deep: #efeae0; --gng-bg-glow: rgba(244, 201, 122, 0.10); --gng-card: #ffffff; --gng-card-hover: #fbf7ee; --gng-border: rgba(60, 50, 30, 0.10); --gng-border-hover: rgba(212, 160, 60, 0.55); --gng-text: #2f2a22; --gng-text-muted: #6b6557; --gng-text-dim: #8a8475; --gng-accent: #c9952f; --gng-accent-hover: #b58326; --gng-accent-soft: rgba(201, 149, 47, 0.12); --gng-success: #5e8f6e; --gng-shadow: 0 6px 20px rgba(60, 50, 30, 0.12); --gng-shadow-soft: 0 3px 12px rgba(60, 50, 30, 0.10); --gng-shadow-hover: 0 10px 28px rgba(60, 50, 30, 0.18); } /* ------------------------------------------------------------ Calm night-sky page background (pure CSS, no image assets) ------------------------------------------------------------ */ body { background-color: var(--gng-bg); background-image: radial-gradient(1100px 560px at 50% -8%, var(--gng-bg-glow), transparent 70%), linear-gradient(180deg, var(--gng-bg) 0%, var(--gng-bg-deep) 100%); color: var(--gng-text); font-family: var(--gng-font-body); } /* ------------------------------------------------------------ Start-page section rhythm + reusable components ------------------------------------------------------------ */ .gng-section { max-width: var(--gng-container); margin: 0 auto; padding-block: var(--gng-section-gap); padding-inline: 20px; } .gng-section:first-of-type { padding-top: clamp(32px, 5vw, 56px); } .gng-section-title { font-family: var(--gng-font-title); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--gng-text); text-align: center; margin: 0 0 0.4em; letter-spacing: 0.2px; } .gng-section-intro { text-align: center; color: var(--gng-text-muted); max-width: 640px; margin: 0 auto clamp(24px, 4vw, 40px); font-size: 1.05rem; line-height: 1.6; } /* Trust-signal stat pills (welcome section) */ .gng-stats { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 8px; } .gng-stat-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--gng-radius-pill); background: var(--gng-card); border: 1px solid var(--gng-border); box-shadow: var(--gng-shadow-soft); color: var(--gng-text); font-weight: 600; } .gng-stat-pill i { color: var(--gng-accent); } .gng-stat-pill .gng-stat-number { color: var(--gng-accent); font-size: 1.15em; } /* Buttons — calm, solid moon-gold primary (no gradient) */ .gng-btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 26px; border-radius: var(--gng-radius-pill); font-family: var(--gng-font-title); font-weight: 700; font-size: 15px; text-decoration: none; border: none; cursor: pointer; transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease; box-shadow: var(--gng-shadow-soft); } .gng-btn:hover { transform: translateY(-2px); text-decoration: none; } .gng-btn--primary { background: var(--gng-accent); color: #2a2410; /* dark text on gold for contrast */ } .gng-btn--primary:hover { background: var(--gng-accent-hover); box-shadow: var(--gng-shadow-hover); color: #2a2410; } .gng-btn--secondary { background: rgba(255, 255, 255, 0.08); color: var(--gng-text); border: 1px solid var(--gng-border); } .gng-btn--secondary:hover { background: rgba(255, 255, 255, 0.14); color: var(--gng-text); } /* How-it-works 3-step row */ .gng-howitworks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; } .gng-howitworks-step { background: var(--gng-card); border: 1px solid var(--gng-border); border-radius: var(--gng-radius-lg); padding: 30px 24px; text-align: center; box-shadow: var(--gng-shadow-soft); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .gng-howitworks-step:hover { transform: translateY(-4px); border-color: var(--gng-border-hover); box-shadow: var(--gng-shadow-hover); } .gng-howitworks-icon { width: 56px; height: 56px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 22px; color: #2a2410; background: var(--gng-accent); } .gng-howitworks-step h3 { font-family: var(--gng-font-title); font-weight: 600; font-size: 1.25rem; margin: 0 0 8px; color: var(--gng-text); } .gng-howitworks-step p { margin: 0; color: var(--gng-text-muted); line-height: 1.6; } /* Freemium CTA band — calm, single gold button */ .gng-cta-band { max-width: var(--gng-container); margin: 0 auto; padding: clamp(36px, 5vw, 56px) 28px; border-radius: var(--gng-radius-lg); text-align: center; background: var(--gng-card); border: 1px solid var(--gng-border); box-shadow: var(--gng-shadow); } .gng-cta-band h2 { font-family: var(--gng-font-title); font-weight: 600; color: var(--gng-text); margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2rem); } .gng-cta-band p { color: var(--gng-text-muted); max-width: 560px; margin: 0 auto 24px; line-height: 1.6; } .gng-cta-band .story-login-benefits { display: inline-block; text-align: left; margin: 0 auto 26px; } .gng-cta-band .story-login-benefits li { color: var(--gng-text); } .gng-cta-band .story-login-benefits i { color: var(--gng-accent); } @media (max-width: 768px) { .gng-howitworks { grid-template-columns: 1fr; } } /* Respect users who prefer no motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }