/* * wptream_dura_tokens.css * ------------------------------------------------------------------ * WpStream "la vita e dura" design system - TOKENS + SCOPED BASE. * * Source of truth: Claude Design project "Wpstream Redo" * tokens/fonts.css, tokens/colors.css, tokens/typography.css, * tokens/spacing.css, tokens/effects.css, tokens/base.css * Every value below is copied from those files. Only the names changed: * design `--ws-foo-bar` -> theme `--wptream_dura_foo_bar` * * Load order: this file FIRST, then wptream_dura_components.css. * * Scope rules * - Custom properties live on :root so any markup (Elementor, shortcodes, * templates) can read them. * - Base element styles (body font, links, headings) are scoped under the * `.wptream_dura_site` class, which the theme adds to on front * pages only. The user dashboard, checkout and login modal never get this * class, so nothing here can leak into them. * - `.wptream_dura_dark` switches a subtree to the dark context by * re-pointing the context variables (fg / bg / border). Components read * ONLY the context variables, so one class flips a whole section. * * Contents * 1. Font import + font stacks * 2. Colour: neutral ramp, accent, semantic, surfaces, text, scrims * 3. Typography scale, weights, line heights, tracking, measure * 4. Spacing scale, section rhythm, containers * 5. Effects: radii, shadows, motion, interaction transforms, focus ring * 6. Context variables (light default, dark override) * 7. Scoped base (reset, body, links, headings, selection) * 8. Keyframes * 9. Responsive token overrides * ------------------------------------------------------------------ */ /* 1. FONT ------------------------------------------------------------ * Manrope from Google Fonts. The theme also enqueues this URL through * wp_enqueue_style so the request is de-duplicated by WordPress; the * @import stays here so the file also works stand-alone (Elementor editor, * static previews). */ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap"); :root { --wptream_dura_font_display: "Manrope", "Helvetica Neue", Arial, sans-serif; --wptream_dura_font_body: "Manrope", "Helvetica Neue", Arial, sans-serif; --wptream_dura_font_mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* 2. COLOUR --------------------------------------------------------- */ /* Neutral ramp - the spine of the system. Dark-first. */ --wptream_dura_ink_000: #000000; --wptream_dura_ink_050: #0A0A0B; --wptream_dura_ink_100: #141416; --wptream_dura_ink_200: #1D1D20; --wptream_dura_ink_300: #2C2C31; --wptream_dura_ink_400: #45454C; --wptream_dura_ink_500: #6E6E77; --wptream_dura_ink_600: #9A9AA3; --wptream_dura_ink_700: #C4C4CB; --wptream_dura_ink_800: #E3E3E7; --wptream_dura_ink_900: #F2F2F4; --wptream_dura_ink_950: #F7F7F8; --wptream_dura_ink_1000: #FFFFFF; /* Accent - taken from the Wpstream logo */ --wptream_dura_accent: #4E2EE5; --wptream_dura_accent_hover: #6244EA; --wptream_dura_accent_press: #3D20C2; --wptream_dura_accent_tint: rgba(78, 46, 229, 0.12); --wptream_dura_accent_ring: rgba(78, 46, 229, 0.4); /* Supporting blues, also from the logo mark */ --wptream_dura_accent_2: #597DFA; --wptream_dura_accent_3: #7193F9; --wptream_dura_accent_2_tint: rgba(89, 125, 250, 0.14); /* Semantic */ --wptream_dura_live: #E8442A; --wptream_dura_success: #0FA968; --wptream_dura_success_tint: rgba(15, 169, 104, 0.14); --wptream_dura_success_text: #0B7A4B; --wptream_dura_warning: #F0A81B; --wptream_dura_danger: #E23A2E; /* Surfaces - dark context */ --wptream_dura_surface_dark: var(--wptream_dura_ink_050); --wptream_dura_surface_dark_raised: var(--wptream_dura_ink_100); --wptream_dura_surface_dark_inset: var(--wptream_dura_ink_000); --wptream_dura_border_dark: var(--wptream_dura_ink_300); --wptream_dura_border_dark_soft: var(--wptream_dura_ink_200); /* Surfaces - light context */ --wptream_dura_surface_light: var(--wptream_dura_ink_950); --wptream_dura_surface_light_raised: var(--wptream_dura_ink_1000); --wptream_dura_surface_light_inset: var(--wptream_dura_ink_900); --wptream_dura_border_light: var(--wptream_dura_ink_800); --wptream_dura_border_light_soft: var(--wptream_dura_ink_900); /* Text - dark context */ --wptream_dura_text_on_dark: var(--wptream_dura_ink_1000); --wptream_dura_text_on_dark_2: var(--wptream_dura_ink_700); --wptream_dura_text_on_dark_muted: var(--wptream_dura_ink_500); /* Text - light context */ --wptream_dura_text_on_light: var(--wptream_dura_ink_050); --wptream_dura_text_on_light_2: var(--wptream_dura_ink_400); --wptream_dura_text_on_light_muted: var(--wptream_dura_ink_500); /* Media protection over photography */ --wptream_dura_scrim_top: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 60%); --wptream_dura_scrim_bottom: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 65%); --wptream_dura_scrim_flat: rgba(0, 0, 0, 0.4); /* 3. TYPOGRAPHY ----------------------------------------------------- */ /* Display - headlines that carry a whole viewport. Tight tracking, heavy weight. */ --wptream_dura_size_display_1: 104px; --wptream_dura_size_display_2: 80px; --wptream_dura_size_display_3: 60px; --wptream_dura_size_display_4: 44px; /* Editorial + UI */ --wptream_dura_size_headline: 32px; --wptream_dura_size_title: 24px; --wptream_dura_size_subtitle: 21px; --wptream_dura_size_body_lg: 19px; --wptream_dura_size_body: 17px; --wptream_dura_size_body_sm: 15px; --wptream_dura_size_caption: 13px; --wptream_dura_size_eyebrow: 12px; --wptream_dura_size_legal: 11px; --wptream_dura_weight_regular: 400; --wptream_dura_weight_medium: 500; --wptream_dura_weight_semibold: 600; --wptream_dura_weight_bold: 700; --wptream_dura_weight_black: 800; --wptream_dura_lh_display: 1.04; --wptream_dura_lh_tight: 1.15; --wptream_dura_lh_snug: 1.3; --wptream_dura_lh_body: 1.55; --wptream_dura_lh_loose: 1.7; --wptream_dura_track_display: -0.032em; --wptream_dura_track_headline: -0.02em; --wptream_dura_track_normal: -0.006em; --wptream_dura_track_eyebrow: 0.08em; --wptream_dura_track_brand: -0.03em; /* Measure - headlines stay short, body stays readable */ --wptream_dura_measure_display: 16ch; --wptream_dura_measure_body: 62ch; --wptream_dura_measure_narrow: 44ch; /* 4. SPACING -------------------------------------------------------- */ --wptream_dura_space_1: 4px; --wptream_dura_space_2: 8px; --wptream_dura_space_3: 12px; --wptream_dura_space_4: 16px; --wptream_dura_space_5: 24px; --wptream_dura_space_6: 32px; --wptream_dura_space_7: 48px; --wptream_dura_space_8: 64px; --wptream_dura_space_9: 96px; --wptream_dura_space_10: 128px; --wptream_dura_space_11: 192px; /* Section rhythm - the vertical beat of a long scroll page */ --wptream_dura_section_y: 128px; --wptream_dura_section_y_lg: 192px; --wptream_dura_section_y_sm: 80px; /* Containers */ --wptream_dura_container: 1180px; --wptream_dura_container_wide: 1440px; --wptream_dura_container_text: 720px; --wptream_dura_gutter: 24px; --wptream_dura_nav_h: 56px; /* 5. EFFECTS -------------------------------------------------------- */ --wptream_dura_radius_xs: 4px; --wptream_dura_radius_sm: 8px; --wptream_dura_radius_md: 12px; --wptream_dura_radius_lg: 20px; --wptream_dura_radius_xl: 32px; --wptream_dura_radius_card: 28px; /* the large content-card corner (church + home cards) */ --wptream_dura_radius_pill: 980px; --wptream_dura_radius_round: 50%; /* Shadows are rare and neutral. Depth comes from surface contrast, not lift. */ --wptream_dura_shadow_none: none; --wptream_dura_shadow_sm: 0 1px 2px rgba(0, 0, 0, 0.06); --wptream_dura_shadow_md: 0 4px 16px rgba(0, 0, 0, 0.08); --wptream_dura_shadow_card: 0 2px 12px rgba(0, 0, 0, 0.06); /* resting shadow of raised content cards (slider, reviews) */ --wptream_dura_shadow_lg: 0 12px 48px rgba(0, 0, 0, 0.14); --wptream_dura_shadow_media: 0 24px 80px rgba(0, 0, 0, 0.35); --wptream_dura_dur_fast: 150ms; --wptream_dura_dur_med: 280ms; --wptream_dura_dur_slow: 600ms; --wptream_dura_ease: cubic-bezier(0.4, 0, 0.2, 1); --wptream_dura_ease_out: cubic-bezier(0.16, 1, 0.3, 1); --wptream_dura_tx: all var(--wptream_dura_dur_fast) var(--wptream_dura_ease); --wptream_dura_tx_transform: transform var(--wptream_dura_dur_med) var(--wptream_dura_ease_out); /* Interaction vocabulary - the whole system moves these three ways and no others. Hover lifts, press settles, media grows a little inside its frame. */ --wptream_dura_lift: translateY(-2px); --wptream_dura_lift_sm: translateY(-1px); --wptream_dura_press: scale(0.985); --wptream_dura_zoom: scale(1.04); --wptream_dura_nudge: translateX(3px); --wptream_dura_focus_ring: 0 0 0 3px var(--wptream_dura_accent_ring); --wptream_dura_hairline: 1px; /* 6. CONTEXT VARIABLES (light default) ------------------------------ * Components never reference surface_* / text_on_* directly. They read * these, so `.wptream_dura_dark` can flip a whole subtree. */ --wptream_dura_fg: var(--wptream_dura_text_on_light); --wptream_dura_fg_2: var(--wptream_dura_text_on_light_2); --wptream_dura_fg_muted: var(--wptream_dura_text_on_light_muted); --wptream_dura_bg: var(--wptream_dura_surface_light); --wptream_dura_bg_raised: var(--wptream_dura_surface_light_raised); --wptream_dura_bg_inset: var(--wptream_dura_surface_light_inset); --wptream_dura_border: var(--wptream_dura_border_light); --wptream_dura_border_soft: var(--wptream_dura_border_light_soft); /* Translucent fills used by secondary/outline buttons and ghost icon buttons. */ --wptream_dura_fill_soft: var(--wptream_dura_ink_900); --wptream_dura_fill_soft_hover: var(--wptream_dura_ink_800); --wptream_dura_fill_ghost_hover: rgba(0, 0, 0, 0.04); --wptream_dura_fill_ghost_hover_strong: rgba(0, 0, 0, 0.05); --wptream_dura_eyebrow_color: var(--wptream_dura_accent); } /* Dark context. Put this class on any section (or ) to flip it. */ .wptream_dura_dark { --wptream_dura_fg: var(--wptream_dura_text_on_dark); --wptream_dura_fg_2: var(--wptream_dura_text_on_dark_2); --wptream_dura_fg_muted: var(--wptream_dura_text_on_dark_muted); --wptream_dura_bg: var(--wptream_dura_surface_dark); --wptream_dura_bg_raised: var(--wptream_dura_surface_dark_raised); --wptream_dura_bg_inset: var(--wptream_dura_surface_dark_inset); --wptream_dura_border: var(--wptream_dura_border_dark); --wptream_dura_border_soft: var(--wptream_dura_border_dark_soft); --wptream_dura_fill_soft: rgba(255, 255, 255, 0.10); --wptream_dura_fill_soft_hover: rgba(255, 255, 255, 0.16); --wptream_dura_fill_ghost_hover: rgba(255, 255, 255, 0.08); --wptream_dura_fill_ghost_hover_strong: rgba(255, 255, 255, 0.12); --wptream_dura_eyebrow_color: var(--wptream_dura_text_on_dark_2); color: var(--wptream_dura_fg); background: var(--wptream_dura_bg); } /* 7. SCOPED BASE ------------------------------------------------------ * Mirrors tokens/base.css but only inside `.wptream_dura_site`. */ .wptream_dura_site, .wptream_dura_site *, .wptream_dura_site *::before, .wptream_dura_site *::after { box-sizing: border-box; } .wptream_dura_site { margin: 0; font-family: var(--wptream_dura_font_body); font-size: var(--wptream_dura_size_body); line-height: var(--wptream_dura_lh_body); letter-spacing: var(--wptream_dura_track_normal); color: var(--wptream_dura_fg); background: var(--wptream_dura_bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Plain content links only. Anchors that ARE a component (button, nav link, * footer link ...) carry a wptream_dura_* class and are excluded, otherwise * this rule (0,1,1) would outrank the single-class component rules. */ .wptream_dura_site a:not([class*="wptream_dura_"]) { color: var(--wptream_dura_accent); text-decoration: none; transition: var(--wptream_dura_tx); } .wptream_dura_site a:not([class*="wptream_dura_"]):hover { color: var(--wptream_dura_accent_hover); text-decoration: none; } .wptream_dura_site h1, .wptream_dura_site h2, .wptream_dura_site h3, .wptream_dura_site h4 { font-family: var(--wptream_dura_font_display); color: inherit; margin: 0; letter-spacing: var(--wptream_dura_track_headline); line-height: var(--wptream_dura_lh_tight); text-wrap: balance; } .wptream_dura_site p { margin: 0; text-wrap: pretty; } .wptream_dura_site ::selection { background: var(--wptream_dura_accent); color: #fff; } /* 8. KEYFRAMES ------------------------------------------------------ */ @keyframes wptream_dura_fade { from { opacity: 0; } to { opacity: 1; } } @keyframes wptream_dura_rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* 9. RESPONSIVE TOKEN OVERRIDES -------------------------------------- * Not in the design source (the kit is desktop-only). These shrink the * display scale and section rhythm on small screens so the same components * fit a phone without per-component media queries. Adjust here, once. */ @media (max-width: 768px) { :root { --wptream_dura_size_display_1: 56px; --wptream_dura_size_display_2: 44px; --wptream_dura_size_display_3: 38px; --wptream_dura_size_display_4: 32px; --wptream_dura_size_headline: 26px; --wptream_dura_section_y: 80px; --wptream_dura_section_y_lg: 96px; --wptream_dura_section_y_sm: 56px; --wptream_dura_gutter: 20px; } }