/* Theme Name: Astra Child Template: astra Version: 1.0.397 */ /* Fonts — Cormorant Garamond + Inter (per design system; Inter 800 + Dancing Script omitted, not used on info pages). */ @import url('/wp-content/themes/astra-child/assets/css/fonts-local.css'); /* ========================================================================== CrazySneak — Design tokens (Pearl & Champagne) Mirrors the design system's colors_and_type.css. - Semantic tokens (--bg, --fg, etc.) are theme-aware. - Legacy --cs-* aliases preserved for back-compat with design system files. ========================================================================== */ :root { /* --- Semantic tokens (preferred in new code) --- */ --bg: #FAF7F2; --bg-alt: #F3EDE2; /* Using render truth #1A1412 not spec #2A2420 — JSX files hardcode #1A1412, astra-child already uses it. Design system colors_and_type.css is internally inconsistent. */ --fg: #1A1412; --card: #FFFFFF; --line: rgba(26, 20, 18, .09); --line-soft: rgba(26, 20, 18, .07); --muted: rgba(26, 20, 18, .55); --body-text: rgba(26, 20, 18, .78); --accent: #B58B5B; --accent-soft: #EFE4D3; --chip-border: rgba(26, 20, 18, .14); /* --- Legacy --cs-* aliases (back-compat with design system) --- */ --cs-bg: var(--bg); --cs-bg-alt: var(--bg-alt); --cs-bg-warm: var(--bg-alt); --cs-bg-white: var(--card); --cs-bg-dark: #2A2420; --cs-fg: var(--fg); --cs-fg-muted: var(--muted); --cs-fg-accent: var(--accent); --cs-fg-on-dark: #FFFFFF; --cs-fg-on-dark-2: #F6F1EA; --cs-card: var(--card); --cs-line: var(--line); --cs-line-soft: var(--line-soft); --cs-muted: var(--muted); --cs-body: var(--body-text); --cs-accent: var(--accent); --cs-accent-soft: var(--accent-soft); --cs-gold: var(--accent); --cs-chip-border: var(--chip-border); --cs-pattern-bg: var(--bg-alt); --cs-pattern-line: rgba(26, 20, 18, .035); --cs-urgent: #D23B3B; /* --- Typography --- */ --cs-font-serif: 'Cormorant Garamond', Georgia, serif; --cs-font-sans: 'Inter', system-ui, -apple-system, sans-serif; --cs-text-xs: 11px; --cs-text-sm: 13px; --cs-text-base: 15px; --cs-text-md: 16px; --cs-text-lg: 18px; --cs-text-xl: 22px; --cs-text-2xl: 28px; --cs-text-3xl: 34px; --cs-text-4xl: 44px; --cs-text-5xl: 56px; --cs-weight-regular: 400; --cs-weight-medium: 500; --cs-weight-semibold: 600; --cs-weight-bold: 700; --cs-leading-tight: 1.1; --cs-leading-snug: 1.25; --cs-leading-normal: 1.5; --cs-leading-relaxed: 1.7; --cs-tracking-tight: -0.01em; --cs-tracking-normal: 0; --cs-tracking-wide: 0.08em; --cs-tracking-wider: 0.14em; /* --- Spacing --- */ --cs-space-1: 4px; --cs-space-2: 8px; --cs-space-3: 12px; --cs-space-4: 16px; --cs-space-5: 20px; --cs-space-6: 24px; --cs-space-8: 32px; --cs-space-10: 40px; --cs-space-12: 48px; --cs-space-14: 56px; --cs-space-16: 64px; --cs-page-gutter: 20px; /* --- Radii --- */ --cs-radius-sm: 8px; --cs-radius-md: 12px; --cs-radius-card: 14px; --cs-radius-lg: 16px; --cs-radius-xl: 20px; --cs-radius-pill: 100px; --cs-radius-full: 9999px; /* --- Shadows --- */ --cs-shadow-sm: 0 1px 2px rgba(26, 20, 18, .05); --cs-shadow-card: 0 2px 8px rgba(26, 20, 18, .06); --cs-shadow-lg: 0 12px 32px rgba(26, 20, 18, .10); /* --- Motion --- */ --cs-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --cs-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --cs-dur-fast: 140ms; --cs-dur-base: 220ms; --cs-dur-slow: 360ms; } /* ========================================================================== Themes (selectable via [data-theme] on or ) ========================================================================== */ [data-theme="bordeaux"] { --bg: #F6F1EA; --bg-alt: #EFE7DB; --fg: #1A1412; --card: #FFFFFF; --line: rgba(26, 20, 18, .09); --muted: rgba(26, 20, 18, .55); --accent: #8B2C3A; --accent-soft: #EFE2DF; } [data-theme="midnight"] { --bg: #14131A; --bg-alt: #1D1B25; --fg: #F4E8E4; --card: #23212C; --line: rgba(244, 232, 228, .10); --muted: rgba(244, 232, 228, .55); --accent: #D88FA0; --accent-soft: #2C2530; } /* ========================================================================== Diagonal stripe pattern — signature texture for hero / product cards. ========================================================================== */ .cs-pattern-diagonal { background-color: var(--bg-alt); background-image: none; /* h2: stripes disabled */ } /* ========================================================================== csn-info-page chrome reset Hides Astra's default header/footer/breadcrumbs on FAQ / Shipping / Contact so our bespoke InfoHeader/InfoFooter render cleanly in their place. Body class added by csn_info_body_class() filter in functions.php. ========================================================================== */ body.csn-info-page #masthead, body.csn-info-page #colophon, body.csn-info-page #ast-scroll-top, body.csn-info-page .ast-mobile-header-wrap, body.csn-info-page .ast-flyout-menu, body.csn-info-page .ast-breadcrumbs-wrapper, body.csn-info-page .ast-secondary-header, body.csn-info-page .ast-author-details, body.csn-info-page .entry-header, body.csn-info-page .post-thumbnail, body.csn-info-page .entry-title { display: none !important; } body.csn-info-page #content, body.csn-info-page #primary, body.csn-info-page .site-content, body.csn-info-page .ast-container, body.csn-info-page .entry-content { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100%; background: var(--bg); } body.csn-info-page { background: var(--bg); color: var(--fg); font-family: var(--cs-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.csn-info-page * { box-sizing: border-box; } body.csn-info-page button { font-family: inherit; } body.csn-info-page a { -webkit-tap-highlight-color: transparent; } /* GLOBAL: CYO overlay header below announcement bar (loaded on every page) */ @media (max-width: 767.98px) { body.csn-info-page .csn-cyo-header { top: var(--csn-ann-h, 36px) !important; } } /* HOME exception: cyo-header is inside .csn-home-hero which already starts after the ann-bar, so reset top:0 */ @media (max-width: 767.98px) { body.home .csn-cyo-header, body.home .csn-home-hero .csn-cyo-header { top: 0 !important; } } /* SHOP: white logo + cart over hero photo for legibility */ @media (max-width: 767.98px) { body.woocommerce-shop .csn-cyo-header__logo, body.woocommerce-shop .csn-cyo-header__logo:hover, body.woocommerce-shop .csn-cyo-header__logo:focus, body.woocommerce-shop .csn-cyo-header__cart, body.woocommerce-shop .csn-cyo-header__cart:hover, body.woocommerce-shop .csn-cyo-header__cart:focus { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.18); } }