From 025df5fd24999158f18bc85b4ddc9523bee46153 Mon Sep 17 00:00:00 2001 From: Matt Batchelder Date: Fri, 20 Feb 2026 22:06:53 -0500 Subject: [PATCH] Refactor theme comments and descriptions to use a consistent hyphen format instead of an em dash. Update color palette values in theme settings and JSON configuration for improved aesthetics. Enhance contact section icons with Font Awesome for better visual representation. Add GitHub Copilot and contributor instructions for improved collaboration and development practices. --- copilot-instructions.md | 75 ++++ pages/about.php | 6 +- pages/demo.php | 4 +- pages/devices.php | 8 +- pages/faq.php | 6 +- pages/features.php | 8 +- pages/home.php | 4 +- pages/pricing.php | 6 +- pages/solutions.php | 2 +- theme/assets/css/main.css | 681 +++++++++++++++++++++++++--------- theme/assets/js/main.js | 2 +- theme/blocks/editor.css | 2 +- theme/blocks/editor.js | 14 +- theme/blocks/index.php | 42 +-- theme/functions.php | 2 +- theme/inc/enqueue.php | 6 +- theme/inc/font-manager.php | 2 +- theme/inc/setup.php | 6 +- theme/inc/theme-defaults.php | 58 +-- theme/inc/theme-generator.php | 10 +- theme/inc/theme-settings.php | 24 +- theme/index.php | 2 +- theme/style.css | 2 +- theme/theme.json | 78 ++-- 24 files changed, 726 insertions(+), 324 deletions(-) create mode 100644 copilot-instructions.md diff --git a/copilot-instructions.md b/copilot-instructions.md new file mode 100644 index 0000000..c2b2e8a --- /dev/null +++ b/copilot-instructions.md @@ -0,0 +1,75 @@ +# GitHub Copilot & Contributor Instructions + +Purpose: guidance for using GitHub Copilot (and for humans) when working on this repo. + +**Repo overview** +- `theme/`: WordPress theme source (PHP, theme assets, includes). Edit here for theme behavior, templates, and assets. +- `pages/`: PHP page templates used by WordPress (e.g., `about.php`, `contact.php`). These are page-level templates or example pages. +- `theme/assets/`: CSS/JS/SVG used by the theme. `assets/css/main.css` and `assets/js/main.js` are the main files. +- `theme/inc/`: PHP helpers and feature modules (enqueueing, AJAX handlers, setup, theme defaults, generator, settings). +- `parts/`: small HTML snippets (header/footer) included by templates. +- `patterns/` and `templates/`: reusable patterns and template HTML files. + +**Goals when editing** +- Keep changes small and focused per PR. +- Preserve WordPress conventions (use `wp_enqueue_script`/`wp_enqueue_style`, action/filter hooks, and template hierarchy). +- Avoid breaking backward compatibility for theme consumers unless explicitly required. + +**Local development (recommended quick steps)** +- Testing is handled by the repository owner; do not run WordPress locally unless explicitly requested. + +Manual checks you can run locally before submitting changes: +- PHP syntax: `php -l path/to/file.php` +- Theme header: ensure `style.css` at `theme/style.css` contains valid theme metadata. + +**Editing the theme** +- Primary entry points: `theme/functions.php`, `theme/index.php`, `theme/assets/`, and `theme/inc/*`. +- Add / modify reusable sections in `parts/header.html` and `parts/footer.html`. +- For new templates: follow WP template naming (e.g., `page-{$slug}.php`) or create a template with a `/* Template Name: ... */` comment. +- Use `theme/inc/enqueue.php` (or existing helpers) to add scripts/styles โ€” keep asset handles unique and versioned. + +**Pages folder usage** +- `pages/*.php` contains standalone page templates or examples. When adding a new page template, document how it should be attached in WP admin (page template comment or theme settings). + +**Testing & validation** +- Run `php -l` on changed PHP files before committing. +- For CSS/HTML, use browser devtools and the W3C validator for critical pages. +- If adding JS, test in Safari and Chrome on macOS (this repo is tested on macOS by default). + +**Code style & safety** +- Follow existing code patterns in `theme/`. +- Escape outputs (use `esc_html()`, `esc_attr()`, `wp_kses_post()` where appropriate) for user-facing output. +- Nonces: use `wp_nonce_field()`/`check_admin_referer()` for forms/AJAX in `theme/inc/ajax.php`. + +**Commit and PR guidance** +- Keep commits focused: one feature/bugfix per PR. +- Provide a clear PR description: what changed, why, and how to test locally. +- Run `php -l` and a quick manual smoke-test before opening PR. + +**Using GitHub Copilot effectively for this repo** +- Provide context in prompts: mention exact file path(s) and constraints (WordPress version targets, PHP version, browser compatibility). +- Good prompt pattern: + - Short summary of intent. + - Files or functions to change (provide paths). + - Constraints (e.g., "must use wp_enqueue_script", "no breaking changes to header markup"). + - How to test the change. + +Example Good Prompt: +"Refactor theme/inc/enqueue.php to register and enqueue a new frontend script `theme-main` from `theme/assets/js/main.js`. Use `wp_enqueue_script` with dependency `jquery` and version based on file `filemtime`. Make sure it loads in the footer. Show the exact code to add and where." + +Example Bad Prompt: +"Make the theme faster." (too vague โ€” include file, objective, and measurable change) + +**When to ask for human review** +- Changes to security-sensitive code (nonce handling, AJAX endpoints). +- Template structure changes that may break theme consumers. +- Large refactors that affect multiple parts of the theme. + +**Owner / Maintainers** +- If unsure, open a draft PR and assign it to the repository owner for review. + +--- +If you want, I can also: +- Add a quick `Makefile` or NPM scripts for common checks (PHP lint, CSS/JS lint). +- Add a sample `wp-env` configuration for one-command local setup. + diff --git a/pages/about.php b/pages/about.php index 02dfb47..878cc42 100644 --- a/pages/about.php +++ b/pages/about.php @@ -9,11 +9,11 @@ ?> - + - + - + diff --git a/pages/demo.php b/pages/demo.php index 1e09f5c..34f320e 100644 --- a/pages/demo.php +++ b/pages/demo.php @@ -7,9 +7,9 @@ * Post Types: page */ ?> - + - + diff --git a/pages/devices.php b/pages/devices.php index 45ef71e..459713f 100644 --- a/pages/devices.php +++ b/pages/devices.php @@ -7,11 +7,11 @@ * Post Types: page */ ?> - + - - + + @@ -24,6 +24,6 @@ - + diff --git a/pages/faq.php b/pages/faq.php index 3b009ee..1b29bb0 100644 --- a/pages/faq.php +++ b/pages/faq.php @@ -12,13 +12,13 @@ - + - + @@ -27,7 +27,7 @@ - + diff --git a/pages/features.php b/pages/features.php index fb03643..8992d81 100644 --- a/pages/features.php +++ b/pages/features.php @@ -9,7 +9,7 @@ ?> - + @@ -17,7 +17,7 @@ - + @@ -25,9 +25,9 @@ - + - + diff --git a/pages/home.php b/pages/home.php index 74d4373..1e2428d 100644 --- a/pages/home.php +++ b/pages/home.php @@ -9,7 +9,7 @@ ?> - + @@ -29,4 +29,4 @@ - + diff --git a/pages/pricing.php b/pages/pricing.php index f38ec1c..a9a0816 100644 --- a/pages/pricing.php +++ b/pages/pricing.php @@ -7,12 +7,12 @@ * Post Types: page */ ?> - + - + @@ -21,6 +21,6 @@ - + diff --git a/pages/solutions.php b/pages/solutions.php index 5a0ce11..a3b1081 100644 --- a/pages/solutions.php +++ b/pages/solutions.php @@ -10,7 +10,7 @@ - + diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index a531ae1..416d36e 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -1,48 +1,47 @@ /* ============================================================= - OTS Theme โ€” Main Stylesheet + OTS Theme - Main Stylesheet ============================================================= */ /* โ”€โ”€ 1. CSS Variables โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ :root, [data-theme="light"] { - /* โ”€โ”€ Light palette โ€” values come from Site Editor (Appearance โ†’ Editor โ†’ Styles) - Falls back to the default when no override has been saved. โ”€โ”€ */ - --color-primary: var(--wp--preset--color--primary, #D83302); - --color-primary-dk: var(--wp--preset--color--primary-dk, #B52B02); - --color-primary-lt: var(--wp--preset--color--primary-lt, #FEF0EB); - --color-primary-rgb: 216,51,2; - --color-accent: var(--wp--preset--color--accent, #00757c); - --color-accent-dk: var(--wp--preset--color--accent-dk, #005a60); - --color-accent-lt: var(--wp--preset--color--accent-lt, #E6F4F5); - --color-accent-rgb: 0,117,124; - --color-dark: var(--wp--preset--color--dark, #0D1321); - --color-dark-2: var(--wp--preset--color--dark-2, #1a2236); - --color-text: var(--wp--preset--color--text, #2d3748); - --color-text-muted: var(--wp--preset--color--text-muted, #718096); - --color-border: var(--wp--preset--color--border, #e2e8f0); + /* โ”€โ”€ Light palette - British Racing Green + Monochrome โ”€โ”€ */ + --color-primary: var(--wp--preset--color--primary, #004225); + --color-primary-dk: var(--wp--preset--color--primary-dk, #002E1A); + --color-primary-lt: var(--wp--preset--color--primary-lt, #E8F5E9); + --color-primary-rgb: 0,66,37; + --color-accent: var(--wp--preset--color--accent, #4CAF50); + --color-accent-dk: var(--wp--preset--color--accent-dk, #388E3C); + --color-accent-lt: var(--wp--preset--color--accent-lt, #E8F5E9); + --color-accent-rgb: 76,175,80; + --color-dark: var(--wp--preset--color--dark, #111111); + --color-dark-2: var(--wp--preset--color--dark-2, #1A1A1A); + --color-text: var(--wp--preset--color--text, #333333); + --color-text-muted: var(--wp--preset--color--text-muted, #666666); + --color-border: var(--wp--preset--color--border, #E0E0E0); --color-bg: var(--wp--preset--color--bg, #ffffff); - --color-bg-alt: var(--wp--preset--color--bg-alt, #FFF8F5); - --color-bg-dark: var(--wp--preset--color--dark, #0D1321); - --color-heading: var(--wp--preset--color--dark, #0D1321); + --color-bg-alt: var(--wp--preset--color--bg-alt, #F5F5F5); + --color-bg-dark: var(--wp--preset--color--dark, #111111); + --color-heading: var(--wp--preset--color--dark, #111111); --header-scrolled-bg: rgba(255,255,255,.97); - --header-scrolled-text: var(--wp--preset--color--text, #2d3748); + --header-scrolled-text: var(--wp--preset--color--text, #333333); --card-bg: var(--wp--preset--color--bg, #ffffff); - --form-bg: var(--wp--preset--color--bg-alt, #FFF8F5); + --form-bg: var(--wp--preset--color--bg-alt, #F5F5F5); --form-bg-focus: var(--wp--preset--color--bg, #ffffff); /* โ”€โ”€ Typography โ”€โ”€ */ --font-sans: var(--wp--preset--font-family--sans, 'Inter', system-ui, -apple-system, sans-serif); --font-heading: var(--wp--preset--font-family--heading, var(--font-sans)); - /* โ”€โ”€ Border radii โ€” editable via Appearance โ†’ Editor โ†’ Styles โ†’ Custom โ”€โ”€ */ + /* โ”€โ”€ Border radii โ”€โ”€ */ --radius-sm: var(--wp--custom--radius--sm, 6px); - --radius-md: var(--wp--custom--radius--md, 12px); - --radius-lg: var(--wp--custom--radius--lg, 20px); - --radius-xl: var(--wp--custom--radius--xl, 32px); + --radius-md: var(--wp--custom--radius--md, 10px); + --radius-lg: var(--wp--custom--radius--lg, 16px); + --radius-xl: var(--wp--custom--radius--xl, 24px); - --shadow-sm: 0 1px 3px rgba(0,0,0,.08); - --shadow-md: 0 4px 16px rgba(0,0,0,.10); - --shadow-lg: 0 12px 40px rgba(0,0,0,.14); + --shadow-sm: none; + --shadow-md: 0 2px 8px rgba(0,0,0,.06); + --shadow-lg: 0 4px 16px rgba(0,0,0,.08); --transition: 0.2s ease; @@ -51,35 +50,34 @@ --container-pad: var(--wp--custom--container--pad, clamp(1rem, 5vw, 2rem)); } -/* โ”€โ”€ Dark Mode โ€” values come from Site Editor custom settings - (Appearance โ†’ Editor โ†’ Styles โ†’ Custom โ†’ Dark) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ +/* โ”€โ”€ Dark Mode โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ [data-theme="dark"] { - --color-primary: var(--wp--custom--dark--primary, #FF6B3D); - --color-primary-dk: var(--wp--custom--dark--primary-dk, #D83302); - --color-primary-lt: var(--wp--custom--dark--primary-lt, rgba(216,51,2,.15)); - --color-primary-rgb: 255,107,61; - --color-accent: var(--wp--custom--dark--accent, #00757c); - --color-accent-dk: var(--wp--custom--dark--accent-dk, #005a60); - --color-accent-lt: var(--wp--custom--dark--accent-lt, rgba(0,117,124,.15)); - --color-accent-rgb: 0,117,124; - --color-dark: var(--wp--custom--dark--dark, #E2E8F0); - --color-dark-2: var(--wp--custom--dark--dark-2, #CBD5E0); - --color-text: var(--wp--custom--dark--text, #CBD5E0); - --color-text-muted: var(--wp--custom--dark--text-muted, #A0AEC0); - --color-border: var(--wp--custom--dark--border, #2D3748); - --color-bg: var(--wp--custom--dark--bg, #0F1724); - --color-bg-alt: var(--wp--custom--dark--bg-alt, #151F30); - --color-bg-dark: var(--wp--custom--dark--bg-dark, #0A0F1A); - --color-heading: var(--wp--custom--dark--heading, #F7FAFC); - --header-scrolled-bg: rgba(15,23,36,.97); - --header-scrolled-text: var(--wp--custom--dark--text, #CBD5E0); - --card-bg: var(--wp--custom--dark--card-bg, #151F30); - --form-bg: var(--wp--custom--dark--card-bg, #151F30); - --form-bg-focus: #1A2538; + --color-primary: var(--wp--custom--dark--primary, #4CAF50); + --color-primary-dk: var(--wp--custom--dark--primary-dk, #004225); + --color-primary-lt: var(--wp--custom--dark--primary-lt, rgba(0,66,37,.15)); + --color-primary-rgb: 76,175,80; + --color-accent: var(--wp--custom--dark--accent, #66BB6A); + --color-accent-dk: var(--wp--custom--dark--accent-dk, #388E3C); + --color-accent-lt: var(--wp--custom--dark--accent-lt, rgba(76,175,80,.12)); + --color-accent-rgb: 102,187,106; + --color-dark: var(--wp--custom--dark--dark, #E0E0E0); + --color-dark-2: var(--wp--custom--dark--dark-2, #BDBDBD); + --color-text: var(--wp--custom--dark--text, #E0E0E0); + --color-text-muted: var(--wp--custom--dark--text-muted, #9E9E9E); + --color-border: var(--wp--custom--dark--border, #333333); + --color-bg: var(--wp--custom--dark--bg, #1A1A1A); + --color-bg-alt: var(--wp--custom--dark--bg-alt, #222222); + --color-bg-dark: var(--wp--custom--dark--bg-dark, #111111); + --color-heading: var(--wp--custom--dark--heading, #F5F5F5); + --header-scrolled-bg: rgba(26,26,26,.97); + --header-scrolled-text: var(--wp--custom--dark--text, #E0E0E0); + --card-bg: var(--wp--custom--dark--card-bg, #222222); + --form-bg: var(--wp--custom--dark--card-bg, #222222); + --form-bg-focus: #2A2A2A; - --shadow-sm: 0 1px 3px rgba(0,0,0,.25); - --shadow-md: 0 4px 16px rgba(0,0,0,.35); - --shadow-lg: 0 12px 40px rgba(0,0,0,.45); + --shadow-sm: none; + --shadow-md: 0 2px 8px rgba(0,0,0,.3); + --shadow-lg: 0 4px 16px rgba(0,0,0,.4); } /* โ”€โ”€ 2. Reset / Base โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ @@ -126,7 +124,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; .section-alt { background: var(--color-bg-alt); } .section-dark { - background: var(--color-bg-dark); + background: #111111; color: #fff; } @@ -145,7 +143,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; color: var(--color-primary); margin-bottom: .75rem; } -.section-dark .section-header .section-label { color: var(--color-accent); } +.section-dark .section-header .section-label { color: var(--color-primary-lt); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } @@ -333,7 +331,7 @@ p:last-child { margin-bottom: 0; } left: 0; width: 0; height: 2px; - background: var(--color-accent); + background: var(--color-primary); transition: width var(--transition); } .nav-menu a:hover, @@ -570,20 +568,7 @@ p:last-child { margin-bottom: 0; } inset: 0; z-index: 1; pointer-events: none; - background: - linear-gradient( - 110deg, - rgba(5, 8, 15, 0.94) 35%, - rgba(5, 8, 15, 0.60) 68%, - rgba(5, 8, 15, 0.25) 100% - ), - linear-gradient( - to bottom, - rgba(5, 8, 15, 0.55) 0%, - rgba(5, 8, 15, 0.00) 15%, - rgba(5, 8, 15, 0.00) 85%, - rgba(5, 8, 15, 0.55) 100% - ); + background: rgba(17, 17, 17, 0.85); } .hero { @@ -591,7 +576,7 @@ p:last-child { margin-bottom: 0; } min-height: 100vh; display: flex; align-items: center; - background: #080d18; + background: #111111; color: #fff; } @@ -658,7 +643,7 @@ p:last-child { margin-bottom: 0; } margin-top: .2rem; } -/* Hero visual โ€” device illustration */ +/* Hero visual - device illustration */ .hero-visual { display: flex; justify-content: center; @@ -763,7 +748,7 @@ p:last-child { margin-bottom: 0; } display: flex; align-items: center; justify-content: center; - filter: drop-shadow(0 2px 12px rgba(0,117,124,.3)); + filter: drop-shadow(0 2px 12px rgba(var(--color-primary-rgb),.2)); } .hero-device__cloud-icon svg { width: 100%; @@ -790,8 +775,8 @@ p:last-child { margin-bottom: 0; } .hero-device--desktop .hero-device__screen { width: 170px; height: 115px; - border: 1.5px solid var(--color-accent); - box-shadow: 0 4px 24px rgba(0,117,124,.2), 0 0 0 1px rgba(0,117,124,.1); + border: 1.5px solid var(--color-primary); + box-shadow: 0 4px 24px rgba(var(--color-primary-rgb),.15), 0 0 0 1px rgba(var(--color-primary-rgb),.08); } .hero-device__stand { width: 10px; @@ -826,7 +811,7 @@ p:last-child { margin-bottom: 0; } width: 100%; height: 6px; border-radius: 3px; - background: var(--color-accent); + background: var(--color-primary); opacity: .65; } .hero-device__dash-bar--short { @@ -901,7 +886,7 @@ p:last-child { margin-bottom: 0; } flex-shrink: 0; } -/* Stagger service items โ€” stack upward from device */ +/* Stagger service items - stack upward from device */ .hero-device--laptop .svc--1 { animation-delay: 1.2s; } .hero-device--laptop .svc--2 { animation-delay: 1.5s; } .hero-device--laptop .svc--3 { animation-delay: 1.8s; } @@ -972,16 +957,16 @@ p:last-child { margin-bottom: 0; } box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.05); } [data-theme="light"] .hero-device--desktop .hero-device__screen { - box-shadow: 0 4px 24px rgba(0,117,124,.12), 0 0 0 1px rgba(0,117,124,.08); + box-shadow: 0 4px 24px rgba(var(--color-primary-rgb),.08), 0 0 0 1px rgba(var(--color-primary-rgb),.05); } [data-theme="light"] .hero-device--phone .hero-device__screen { box-shadow: 0 4px 20px rgba(0,0,0,.08); } [data-theme="light"] .hero-device__cloud-icon { - filter: drop-shadow(0 2px 12px rgba(0,117,124,.2)); + filter: drop-shadow(0 2px 12px rgba(var(--color-primary-rgb),.15)); } [data-theme="light"] .hero-device__cloud-icon svg path { - stroke: var(--color-accent); + stroke: var(--color-primary); } [data-theme="light"] .hero-device__notif-icon { background: rgba(22,163,74,.12); @@ -1061,7 +1046,7 @@ p:last-child { margin-bottom: 0; } margin-bottom: 1.25rem; } -/* Image position: left โ€” side-by-side */ +/* Image position: left - side-by-side */ .oribi-card.img-left { display: flex; flex-direction: row; @@ -1081,7 +1066,7 @@ p:last-child { margin-bottom: 0; } } } -/* Image position: replace-icon โ€” image takes icon slot */ +/* Image position: replace-icon - image takes icon slot */ .oribi-card.img-replace-icon .oribi-card-img-wrap { margin-bottom: 1.25rem; } @@ -1106,7 +1091,7 @@ p:last-child { margin-bottom: 0; } content: ''; position: absolute; inset: 0; - background: linear-gradient(to bottom, rgba(13,19,33,.55), rgba(13,19,33,.85)); + background: rgba(17, 17, 17, 0.75); z-index: 1; pointer-events: none; } @@ -1126,16 +1111,17 @@ p:last-child { margin-bottom: 0; } .feature-card-link:hover { color: inherit; } .feature-icon { width: 52px; height: 52px; - background: linear-gradient(135deg, var(--color-primary-lt), rgba(var(--color-primary-rgb), .12)); + background: var(--color-primary-lt); + color: var(--color-primary); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; font-size: 1.4rem; - transition: transform var(--transition), background var(--transition); + transition: transform var(--transition), background var(--transition), color var(--transition); } -/* Font Awesome inside icon containers โ€” normalise line-height and prevent +/* Font Awesome inside icon containers - normalise line-height and prevent the icon from inheriting an unexpected font-size from its wrapper. */ .feature-icon i, .value-icon i { line-height: 1; @@ -1150,15 +1136,15 @@ p:last-child { margin-bottom: 0; } /* โ”€โ”€ 8b. Value Card โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .value-card { text-align: center; - border-top: 3px solid var(--color-accent); + border-top: 3px solid var(--color-primary); border-radius: var(--radius-sm) var(--radius-sm) var(--radius-md) var(--radius-md); } .value-card:hover { - border-top-color: var(--color-accent-dk); + border-top-color: var(--color-primary-dk); } .value-icon { width: 64px; height: 64px; - background: var(--color-accent-lt); + background: var(--color-primary-lt); border-radius: 50%; display: flex; align-items: center; @@ -1166,29 +1152,29 @@ p:last-child { margin-bottom: 0; } margin-inline: auto; margin-bottom: 1.25rem; font-size: 1.75rem; - transition: transform var(--transition), box-shadow var(--transition); + color: var(--color-primary); + transition: transform var(--transition); } .value-card:hover .value-icon { - transform: scale(1.1) rotate(-8deg); - box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), .25); + transform: scale(1.05); } /* โ”€โ”€ 8c. Addon Card โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .oribi-card.addon-card { border-style: dashed; - border-left: 3px solid var(--color-accent); + border-left: 3px solid var(--color-primary); border-left-style: solid; - background: linear-gradient(135deg, var(--card-bg) 0%, var(--color-accent-lt) 100%); + background: var(--card-bg); } .oribi-card.addon-card:hover { border-style: solid; - border-color: var(--color-accent); + border-color: var(--color-primary); } .addon-tag { display: inline-block; font-size: var(--wp--preset--font-size--xs, .75rem); - background: var(--color-accent-lt); - color: var(--color-accent); + background: var(--color-primary-lt); + color: var(--color-primary); padding: .25rem .75rem; border-radius: 999px; margin-bottom: .75rem; @@ -1235,7 +1221,7 @@ p:last-child { margin-bottom: 0; } left: 0; right: 0; height: 4px; - background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); + background: var(--color-primary); } .stat-value { font-size: var(--wp--preset--font-size--4-xl, 2.5rem); @@ -1246,10 +1232,7 @@ p:last-child { margin-bottom: 0; } letter-spacing: -0.02em; } .stat-card:hover .stat-value { - background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: var(--color-primary-dk); } .stat-label { font-size: var(--wp--preset--font-size--md, 1rem); @@ -1312,7 +1295,7 @@ p:last-child { margin-bottom: 0; } /* โ”€โ”€ 8g. Card Mobile Responsive โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ -/* Tablet โ€” tighten padding & typography */ +/* Tablet - tighten padding & typography */ @media (max-width: 960px) { .oribi-card { padding: 1.5rem; @@ -1325,7 +1308,7 @@ p:last-child { margin-bottom: 0; } } } -/* Small screens โ€” single-column adjustments */ +/* Small screens - single-column adjustments */ @media (max-width: 640px) { .oribi-card { padding: 1.25rem; @@ -1404,7 +1387,7 @@ p:last-child { margin-bottom: 0; } } } -/* Extra-small โ€” compact for narrow phones */ +/* Extra-small - compact for narrow phones */ @media (max-width: 400px) { .oribi-card { padding: 1rem; @@ -1427,7 +1410,7 @@ p:last-child { margin-bottom: 0; } } } -/* Touch devices โ€” disable hover transform to prevent sticky states */ +/* Touch devices - disable hover transform to prevent sticky states */ @media (hover: none) { .oribi-card:hover { transform: none; @@ -1435,13 +1418,13 @@ p:last-child { margin-bottom: 0; } border-color: var(--color-border); } .value-card:hover { - border-top-color: var(--color-accent); + border-top-color: var(--color-primary); } .oribi-card.addon-card:hover { border-style: dashed; border-left-style: solid; border-color: var(--color-border); - border-left-color: var(--color-accent); + border-left-color: var(--color-primary); } .link-card:hover { border-left-width: 4px; @@ -1456,25 +1439,399 @@ p:last-child { margin-bottom: 0; } } .oribi-card:hover .feature-icon { transform: none; - background: linear-gradient(135deg, var(--color-primary-lt), rgba(var(--color-primary-rgb), .12)); - color: inherit; + background: var(--color-primary-lt); + color: var(--color-primary); } .value-card:hover .value-icon { transform: none; box-shadow: none; } .stat-card:hover .stat-value { - background: none; - -webkit-background-clip: unset; - -webkit-text-fill-color: var(--color-primary); - background-clip: unset; + color: var(--color-primary); } .link-card:hover .link-card-cta::after { transform: none; } } -/* Legacy compat aliases (deprecated โ€” use .oribi-card) */ +/* Legacy compat aliases (deprecated) */ + +/* โ”€โ”€ 8h. New Card Variants โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ + +/* Bold Statement Card - large text, green left border */ +.oribi-card.bold-statement { + border-left: 5px solid var(--color-primary); + border-radius: 0 var(--radius-md) var(--radius-md) 0; + padding: 2.5rem; +} +.oribi-card.bold-statement h3 { + font-size: clamp(1.3rem, 2.5vw, 1.75rem); + font-weight: 800; + margin-bottom: .75rem; +} +.oribi-card.bold-statement p { + font-size: 1rem; + line-height: 1.7; +} + +/* Minimal Feature Card - clean icon + title + description */ +.oribi-card.minimal-feature { + border: none; + border-bottom: 2px solid var(--color-border); + border-radius: 0; + padding: 1.75rem 0; + background: transparent; +} +.oribi-card.minimal-feature:hover { + border-bottom-color: var(--color-primary); + transform: none; + box-shadow: none; +} +.oribi-card.minimal-feature .feature-icon { + width: 44px; height: 44px; + border-radius: 50%; + font-size: 1.1rem; +} +.oribi-card.minimal-feature h3 { + font-size: 1rem; + font-weight: 700; +} +.oribi-card.minimal-feature p { + font-size: .9rem; + margin: 0; +} + +/* Prominent Stat Card - oversized number */ +.oribi-card.prominent-stat { + text-align: center; + border: 1px solid var(--color-border); + padding: 2.5rem 2rem; +} +.oribi-card.prominent-stat:hover { + background: var(--color-primary-lt); + border-color: var(--color-primary); + transform: none; + box-shadow: none; +} +.oribi-card.prominent-stat .stat-value { + font-size: clamp(2.5rem, 5vw, 3.5rem); + font-weight: 900; + color: var(--color-primary); + line-height: 1; + margin-bottom: .5rem; +} +.oribi-card.prominent-stat .stat-label { + font-size: .85rem; + font-weight: 600; + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: .08em; +} +.oribi-card.prominent-stat::before { + display: none; +} + +/* Testimonial Card - quote with author */ +.oribi-card.testimonial { + border: none; + border-left: 4px solid var(--color-primary); + border-radius: 0 var(--radius-md) var(--radius-md) 0; + background: var(--color-bg-alt); + padding: 2rem 2.5rem; +} +.oribi-card.testimonial:hover { + transform: none; + box-shadow: none; + background: var(--color-primary-lt); +} +.oribi-card.testimonial blockquote, +.oribi-card.testimonial .testimonial-quote { + font-size: 1.05rem; + line-height: 1.8; + color: var(--color-text); + margin-bottom: 1.25rem; + font-style: normal; +} +.oribi-card.testimonial .testimonial-author { + font-weight: 700; + color: var(--color-primary); + font-size: .95rem; +} +.oribi-card.testimonial .testimonial-role { + font-size: .85rem; + color: var(--color-text-muted); +} + +/* Action Card - icon, title, arrow CTA */ +.oribi-card.action { + display: flex; + flex-direction: column; + border: 1px solid var(--color-border); + padding: 2rem; + cursor: pointer; +} +.oribi-card.action:hover { + background: var(--color-primary); + border-color: var(--color-primary); + color: #fff; + transform: none; + box-shadow: none; +} +.oribi-card.action:hover h3, +.oribi-card.action:hover p, +.oribi-card.action:hover .feature-icon { + color: #fff; +} +.oribi-card.action:hover .feature-icon { + background: rgba(255,255,255,.15); +} +.oribi-card.action .action-arrow { + margin-top: auto; + padding-top: 1rem; + font-size: 1.2rem; + color: var(--color-primary); + transition: transform var(--transition), color var(--transition); +} +.oribi-card.action:hover .action-arrow { + color: #fff; + transform: translateX(4px); +} + +/* Comparison Row Card - checkmark + label */ +.oribi-card.comparison-row { + display: flex; + align-items: center; + gap: 1rem; + border: none; + border-bottom: 1px solid var(--color-border); + border-radius: 0; + padding: 1.25rem 0; + background: transparent; +} +.oribi-card.comparison-row:hover { + background: var(--color-primary-lt); + transform: none; + box-shadow: none; + padding-inline: 1rem; + border-radius: var(--radius-sm); +} +.oribi-card.comparison-row .comparison-check { + width: 28px; + height: 28px; + background: var(--color-primary-lt); + color: var(--color-primary); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: .85rem; + font-weight: 700; + flex-shrink: 0; +} +.oribi-card.comparison-row h3 { + font-size: 1rem; + font-weight: 600; + margin: 0; +} +.oribi-card.comparison-row p { + font-size: .9rem; + margin: 0; + flex: 1; +} + +/* Image Info Card - image top + metadata */ +.oribi-card.image-info { + padding: 0; + overflow: hidden; + border: 1px solid var(--color-border); +} +.oribi-card.image-info:hover { + border-color: var(--color-primary); + transform: none; + box-shadow: none; +} +.oribi-card.image-info .oribi-card-img-wrap { + overflow: hidden; + line-height: 0; +} +.oribi-card.image-info .oribi-card-img { + transition: transform .3s ease; + width: 100%; + height: auto; +} +.oribi-card.image-info:hover .oribi-card-img { + transform: scale(1.03); +} +.oribi-card.image-info .oribi-card-body { + padding: 1.5rem; +} +.oribi-card.image-info .image-info-tag { + display: inline-block; + font-size: .72rem; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; + color: var(--color-primary); + margin-bottom: .5rem; +} +.oribi-card.image-info h3 { + font-size: 1.1rem; + margin-bottom: .5rem; +} +.oribi-card.image-info p { + font-size: .9rem; + line-height: 1.6; +} + +/* Addon Bundle Card - icon grid + features */ +.oribi-card.addon-bundle { + border: 1px solid var(--color-border); + padding: 2rem; +} +.oribi-card.addon-bundle:hover { + border-color: var(--color-primary); + transform: none; + box-shadow: none; +} +.oribi-card.addon-bundle .bundle-icons { + display: flex; + gap: .75rem; + margin-bottom: 1.25rem; + flex-wrap: wrap; +} +.oribi-card.addon-bundle .bundle-icon { + width: 40px; + height: 40px; + background: var(--color-primary-lt); + color: var(--color-primary); + border-radius: var(--radius-sm); + display: flex; + align-items: center; + justify-content: center; + font-size: 1rem; +} +.oribi-card.addon-bundle .bundle-features { + list-style: none; + margin-top: 1rem; +} +.oribi-card.addon-bundle .bundle-features li { + display: flex; + align-items: center; + gap: .5rem; + font-size: .9rem; + padding: .35rem 0; + color: var(--color-text-muted); +} +.oribi-card.addon-bundle .bundle-features li::before { + content: '\2713'; + color: var(--color-primary); + font-weight: 700; + font-size: .8rem; +} + +/* Status Badge Card - circle badge + label */ +.oribi-card.status-badge { + text-align: center; + border: 1px solid var(--color-border); + padding: 2.5rem 1.5rem; +} +.oribi-card.status-badge:hover { + border-color: var(--color-primary); + transform: none; + box-shadow: none; +} +.oribi-card.status-badge .badge-circle { + width: 80px; + height: 80px; + border-radius: 50%; + background: var(--color-primary); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1rem; + font-size: 1.5rem; + font-weight: 800; +} +.oribi-card.status-badge .badge-label { + font-size: .9rem; + font-weight: 600; + color: var(--color-heading); + text-transform: uppercase; + letter-spacing: .05em; +} + +/* Content Block Card - title + description + optional icon */ +.oribi-card.content-block { + display: flex; + gap: 1.5rem; + align-items: flex-start; + border: 1px solid var(--color-border); + padding: 2rem; +} +.oribi-card.content-block:hover { + border-color: var(--color-primary); + transform: none; + box-shadow: none; +} +.oribi-card.content-block .content-block-icon { + width: 56px; + height: 56px; + flex-shrink: 0; + background: var(--color-primary-lt); + color: var(--color-primary); + border-radius: var(--radius-sm); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.4rem; +} +.oribi-card.content-block .content-block-body { + flex: 1; + min-width: 0; +} +.oribi-card.content-block h3 { + font-size: 1.1rem; + margin-bottom: .5rem; +} +.oribi-card.content-block p { + font-size: .9rem; + line-height: 1.65; +} + +/* โ”€โ”€ New card variants: responsive overrides โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ +@media (max-width: 640px) { + .oribi-card.bold-statement { + padding: 1.5rem; + border-left-width: 4px; + } + .oribi-card.prominent-stat { + padding: 1.5rem; + } + .oribi-card.prominent-stat .stat-value { + font-size: 2rem; + } + .oribi-card.testimonial { + padding: 1.5rem; + } + .oribi-card.content-block { + flex-direction: column; + gap: 1rem; + } + .oribi-card.image-info .oribi-card-body { + padding: 1rem; + } + .oribi-card.addon-bundle { + padding: 1.5rem; + } + .oribi-card.status-badge .badge-circle { + width: 64px; + height: 64px; + font-size: 1.2rem; + } +} + +/* Legacy compat aliases (deprecated) */ .feature-card { background: var(--card-bg); border: 1px solid var(--color-border); @@ -1576,7 +1933,7 @@ p:last-child { margin-bottom: 0; } color: var(--color-text); } .pricing-features li:last-child { border-bottom: none; } -.pricing-check { color: var(--color-accent); font-size: 1rem; flex-shrink: 0; margin-top: 1px; } +.pricing-check { color: var(--color-primary); font-size: 1rem; flex-shrink: 0; margin-top: 1px; } @media (max-width: 900px) { .pricing-grid-3 { grid-template-columns: 1fr; max-width: 400px; } @@ -1629,7 +1986,7 @@ p:last-child { margin-bottom: 0; } /* โ”€โ”€ 11. Page Hero (inner pages) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .page-hero { - background: #080d18; + background: #111111; color: #fff; padding: 8rem 0 5rem; text-align: center; @@ -1637,20 +1994,7 @@ p:last-child { margin-bottom: 0; } overflow: hidden; } .page-hero .hero-overlay { - background: - radial-gradient( - ellipse at center, - rgba(5, 8, 15, 0.50) 0%, - rgba(5, 8, 15, 0.75) 60%, - rgba(5, 8, 15, 0.90) 100% - ), - linear-gradient( - to bottom, - rgba(5, 8, 15, 0.55) 0%, - rgba(5, 8, 15, 0.00) 20%, - rgba(5, 8, 15, 0.00) 80%, - rgba(5, 8, 15, 0.55) 100% - ); + background: rgba(17, 17, 17, 0.80); } .page-hero .container { position: relative; z-index: 2; } .page-hero h1 { color: #fff; margin-bottom: 1rem; } @@ -1682,7 +2026,7 @@ p:last-child { margin-bottom: 0; } pointer-events: none; } -/* Individual particles โ€” circles with staggered float animation */ +/* Individual particles - circles with staggered float animation */ .hero-particle { position: absolute; border-radius: 50%; @@ -1696,13 +2040,13 @@ p:last-child { margin-bottom: 0; } .hero-particle--2 { --p-dur: 28s; --p-delay: 3s; --p-tx: -40px; --p-ty: -105vh; --p-opacity: 0.25; --p-scale-end: 0.4; width: 14px; height: 14px; bottom: -20px; left: 20%; } .hero-particle--3 { --p-dur: 20s; --p-delay: 1s; --p-tx: 80px; --p-ty: -115vh; --p-opacity: 0.3; --p-scale-end: 0.3; width: 6px; height: 6px; bottom: -8px; left: 35%; } .hero-particle--4 { --p-dur: 26s; --p-delay: 5s; --p-tx: -60px; --p-ty: -100vh; --p-opacity: 0.4; --p-scale-end: 0.2; width: 10px; height: 10px; bottom: -12px; left: 50%; } -.hero-particle--5 { --p-dur: 24s; --p-delay: 2s; --p-tx: 30px; --p-ty: -108vh; --p-opacity: 0.2; --p-scale-end: 0.5; width: 20px; height: 20px; bottom: -25px; left: 65%; background: rgba(0,117,124,0.15); } +.hero-particle--5 { --p-dur: 24s; --p-delay: 2s; --p-tx: 30px; --p-ty: -108vh; --p-opacity: 0.2; --p-scale-end: 0.5; width: 20px; height: 20px; bottom: -25px; left: 65%; background: rgba(var(--color-primary-rgb),0.12); } .hero-particle--6 { --p-dur: 30s; --p-delay: 7s; --p-tx: -20px; --p-ty: -112vh; --p-opacity: 0.35; --p-scale-end: 0.3; width: 12px; height: 12px; bottom: -15px; left: 78%; } -.hero-particle--7 { --p-dur: 19s; --p-delay: 4s; --p-tx: 50px; --p-ty: -106vh; --p-opacity: 0.2; --p-scale-end: 0.4; width: 16px; height: 16px; bottom: -20px; left: 90%; background: rgba(216,51,2,0.12); } +.hero-particle--7 { --p-dur: 19s; --p-delay: 4s; --p-tx: 50px; --p-ty: -106vh; --p-opacity: 0.2; --p-scale-end: 0.4; width: 16px; height: 16px; bottom: -20px; left: 90%; background: rgba(var(--color-primary-rgb),0.08); } .hero-particle--8 { --p-dur: 25s; --p-delay: 6s; --p-tx: -70px; --p-ty: -102vh; --p-opacity: 0.3; --p-scale-end: 0.2; width: 7px; height: 7px; bottom: -10px; left: 15%; } -.hero-particle--9 { --p-dur: 32s; --p-delay: 8s; --p-tx: 45px; --p-ty: -110vh; --p-opacity: 0.15; --p-scale-end: 0.6; width: 24px; height: 24px; bottom: -30px; left: 42%; background: rgba(0,117,124,0.1); } +.hero-particle--9 { --p-dur: 32s; --p-delay: 8s; --p-tx: 45px; --p-ty: -110vh; --p-opacity: 0.15; --p-scale-end: 0.6; width: 24px; height: 24px; bottom: -30px; left: 42%; background: rgba(var(--color-primary-rgb),0.08); } .hero-particle--10 { --p-dur: 21s; --p-delay: 10s; --p-tx: -35px; --p-ty: -108vh; --p-opacity: 0.3; --p-scale-end: 0.3; width: 9px; height: 9px; bottom: -12px; left: 58%; } -.hero-particle--11 { --p-dur: 27s; --p-delay: 12s; --p-tx: 25px; --p-ty: -104vh; --p-opacity: 0.2; --p-scale-end: 0.4; width: 18px; height: 18px; bottom: -22px; left: 72%; background: rgba(216,51,2,0.08); } +.hero-particle--11 { --p-dur: 27s; --p-delay: 12s; --p-tx: 25px; --p-ty: -104vh; --p-opacity: 0.2; --p-scale-end: 0.4; width: 18px; height: 18px; bottom: -22px; left: 72%; background: rgba(var(--color-primary-rgb),0.06); } .hero-particle--12 { --p-dur: 23s; --p-delay: 9s; --p-tx: -55px; --p-ty: -106vh; --p-opacity: 0.25; --p-scale-end: 0.3; width: 11px; height: 11px; bottom: -14px; left: 5%; } /* Ambient glow effect behind content */ @@ -1713,13 +2057,12 @@ p:last-child { margin-bottom: 0; } width: 600px; height: 600px; border-radius: 50%; - background: radial-gradient(circle, rgba(0,117,124,0.15) 0%, rgba(0,117,124,0) 70%); - animation: glow-drift 12s ease-in-out infinite; + background: rgba(var(--color-primary-rgb), 0.06); z-index: 1; pointer-events: none; } -/* Animated hero layout โ€” centered single-column content */ +/* Animated hero layout - centered single-column content */ .hero-animated__inner { position: relative; z-index: 2; @@ -1758,7 +2101,7 @@ p:last-child { margin-bottom: 0; } margin-top: 2.5rem; } -/* Page hero animated โ€” inherits base page-hero + adds particles */ +/* Page hero animated - inherits base page-hero + adds particles */ .page-hero-animated { position: relative; } @@ -1789,7 +2132,7 @@ p:last-child { margin-bottom: 0; } align-items: center; } .about-intro-visual { - background: linear-gradient(135deg, #D83302 0%, #00757c 100%); + background: var(--color-primary); border-radius: var(--radius-xl); aspect-ratio: 1; max-width: 420px; @@ -1798,7 +2141,6 @@ p:last-child { margin-bottom: 0; } justify-content: center; font-size: 6rem; color: #fff; - box-shadow: var(--shadow-lg); } /* When an image is set, remove the gradient box styling */ .about-intro-visual.has-img { @@ -1864,7 +2206,7 @@ p:last-child { margin-bottom: 0; } color: var(--color-text); margin-bottom: .4rem; } -.form-group label .req { color: #D83302; } +.form-group label .req { color: #D32F2F; } .form-group input, .form-group textarea, @@ -1902,36 +2244,22 @@ p:last-child { margin-bottom: 0; } /* โ”€โ”€ 14. CTA Banner โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ @keyframes cta-shimmer { - 0% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } - 100% { background-position: 0% 50%; } + 0% { opacity: 1; } + 100% { opacity: 1; } } .cta-banner { position: relative; overflow: hidden; - background: linear-gradient(135deg, #D83302 0%, #E8450A 30%, #B52B02 60%, #D83302 100%); - background-size: 250% 250%; - animation: cta-shimmer 8s ease infinite; + background: var(--color-primary); color: #fff; padding-block: 5rem; text-align: center; } .cta-banner::before { - content: ''; - position: absolute; - inset: 0; - background: - radial-gradient(circle at 20% 80%, rgba(255,255,255,.12) 0%, transparent 50%), - radial-gradient(circle at 80% 20%, rgba(255,200,100,.10) 0%, transparent 50%); - pointer-events: none; + content: none; } .cta-banner::after { - content: ''; - position: absolute; - inset: 0; - background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); - background-size: 24px 24px; - pointer-events: none; + content: none; } .cta-banner .container { position: relative; z-index: 1; } .cta-banner h2 { color: #fff; margin-bottom: 1rem; } @@ -1939,7 +2267,7 @@ p:last-child { margin-bottom: 0; } /* โ”€โ”€ 15. Footer โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ .site-footer { - background: var(--color-dark); + background: #111111; color: rgba(255,255,255,.7); padding-top: 4rem; } @@ -2234,37 +2562,36 @@ p:last-child { margin-bottom: 0; } } /* โ”€โ”€ Dark mode overrides โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ -[data-theme="dark"] .section-dark { background: #0A0F1A; } +[data-theme="dark"] .section-dark { background: #111111; } [data-theme="dark"] .section-alt { background: var(--color-bg-alt); } -[data-theme="dark"] .hero { background: #0A0F1A; } +[data-theme="dark"] .hero { background: #111111; } [data-theme="dark"] .page-hero { - background: #0A0F1A; + background: #111111; } -[data-theme="dark"] .hero-animated { background: #060A12; } -[data-theme="dark"] .page-hero-animated { background: #060A12; } +[data-theme="dark"] .hero-animated { background: #0D0D0D; } +[data-theme="dark"] .page-hero-animated { background: #0D0D0D; } [data-theme="dark"] .hero-animated__glow { - background: radial-gradient(circle, rgba(0,117,124,0.2) 0%, rgba(0,117,124,0) 70%); + background: rgba(var(--color-primary-rgb), 0.08); } -[data-theme="dark"] .site-footer { background: #080C15; } +[data-theme="dark"] .site-footer { background: #0D0D0D; } -[data-theme="dark"] .site-nav.open { background: #0A0F1A; } +[data-theme="dark"] .site-nav.open { background: #111111; } -[data-theme="dark"] .logo-text { color: #F7FAFC; } +[data-theme="dark"] .logo-text { color: #F5F5F5; } [data-theme="dark"] .logo-text strong { color: var(--color-accent); } [data-theme="dark"] .nav-menu a { color: rgba(255,255,255,.8); } [data-theme="dark"] .nav-menu a:hover, [data-theme="dark"] .nav-menu .current-menu-item > a { color: var(--color-primary); } -[data-theme="dark"] .nav-toggle span { background: #F7FAFC; } +[data-theme="dark"] .nav-toggle span { background: #F5F5F5; } [data-theme="dark"] .cta-banner { - background: linear-gradient(135deg, #C02E02 0%, #D83302 30%, #9A2200 60%, #C02E02 100%); - background-size: 250% 250%; + background: var(--color-primary-dk); } [data-theme="dark"] .btn-ghost { diff --git a/theme/assets/js/main.js b/theme/assets/js/main.js index d5a26a9..cc9139e 100644 --- a/theme/assets/js/main.js +++ b/theme/assets/js/main.js @@ -1,5 +1,5 @@ /** - * OTS Theme โ€” Main JS + * OTS Theme - Main JS */ /* โ”€โ”€ Theme toggle (runs before DOMContentLoaded to prevent flash) โ”€โ”€ */ diff --git a/theme/blocks/editor.css b/theme/blocks/editor.css index 061e8c8..48b60c3 100644 --- a/theme/blocks/editor.css +++ b/theme/blocks/editor.css @@ -1,5 +1,5 @@ /** - * OTS Theme โ€” Editor-specific overrides + * OTS Theme - Editor-specific overrides * Loaded only inside the Gutenberg block editor. */ diff --git a/theme/blocks/editor.js b/theme/blocks/editor.js index f11b167..caeca38 100644 --- a/theme/blocks/editor.js +++ b/theme/blocks/editor.js @@ -1,5 +1,5 @@ /** - * OTS Theme โ€” Custom Block Editor Scripts (InnerBlocks Architecture) + * OTS Theme - Custom Block Editor Scripts (InnerBlocks Architecture) * * 13 blocks: 5 standalone + 4 parent/child pairs. * Parent blocks use InnerBlocks for child items. @@ -231,8 +231,8 @@ function iconControls(a, s) { /** * Return the element to render in the card preview for the current icon state. - * cssClass โ€” the wrapper class, e.g. 'feature-icon' or 'value-icon' - * extraStyle โ€” optional inline style object for the wrapper + * cssClass - the wrapper class, e.g. 'feature-icon' or 'value-icon' + * extraStyle - optional inline style object for the wrapper */ function iconPreview(a, cssClass, extraStyle) { var useFa = a.iconType === 'fontawesome'; @@ -272,7 +272,7 @@ function cardImageControls(a, s) { a.imgUrl ? el(Frag, null, el(RC, { label: 'Width (px)', value: imgW, min: 20, max: 600, step: 4, onChange: function(v){ s({ imgWidth: v }); } }), - el(RC, { label: 'Height (px) โ€” 0 = auto', value: imgH, min: 0, max: 600, step: 4, + el(RC, { label: 'Height (px) - 0 = auto', value: imgH, min: 0, max: 600, step: 4, onChange: function(v){ s({ imgHeight: v }); } }), el(TG, { label: 'Scale to fill (cover)', checked: imgFit === 'cover', onChange: function(v){ s({ imgFit: v ? 'cover' : 'contain' }); } }), @@ -1738,7 +1738,7 @@ reg('oribi/site-header', { supports: { html: false, multiple: false, reusable: false }, edit: function () { return el('div', { - style: { background: '#0D1321', color: '#fff', padding: '20px 24px', borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' } + style: { background: '#111111', color: '#fff', padding: '20px 24px', borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' } }, el('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } }, el('strong', { style: { fontSize: '1.2rem' } }, 'Oribi'), @@ -1762,9 +1762,9 @@ reg('oribi/site-footer', { supports: { html: false, multiple: false, reusable: false }, edit: function () { return el('div', { - style: { background: '#0D1321', color: '#fff', padding: '24px', borderRadius: '8px', textAlign: 'center' } + style: { background: '#111111', color: '#fff', padding: '24px', borderRadius: '8px', textAlign: 'center' } }, - el('strong', { style: { fontSize: '1.1rem' } }, 'OTS Theme โ€” Site Footer'), + el('strong', { style: { fontSize: '1.1rem' } }, 'OTS Theme - Site Footer'), el('p', { style: { opacity: 0.5, margin: '8px 0 0', fontSize: '.85rem' } }, 'Brand ยท Service Links ยท Company Links ยท Connect ยท Copyright') ); }, diff --git a/theme/blocks/index.php b/theme/blocks/index.php index 2160c0d..27bd4ac 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -1,6 +1,6 @@ - * - iconType = 'emoji' + icon = 'โ˜๏ธ' โ†’ โ˜๏ธ (escaped) + * - iconType = 'emoji' + icon = 'text' -> text (escaped) * * Legacy: if $icon_or_attrs is a plain string it behaves like before. * @@ -233,7 +233,7 @@ add_action( 'enqueue_block_editor_assets', function () { /* โ”€โ”€ Register all blocks โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ add_action( 'init', function () { - /* Shared supports โ€” exposes color pickers and font-size selector in the + /* Shared supports - exposes color pickers and font-size selector in the block inspector for every Oribi block. Individual blocks can override these by merging their own array if needed. */ $block_supports = [ @@ -618,7 +618,7 @@ add_action( 'init', function () { /* โ”€โ”€ ANIMATED HERO BLOCKS (OTS Signs) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ - /* Animated Hero โ€” full homepage hero with particle background */ + /* Animated Hero - full homepage hero with particle background */ register_block_type( 'oribi/hero-animated', [ 'attributes' => [ 'label' => [ 'type' => 'string', 'default' => '' ], @@ -640,7 +640,7 @@ add_action( 'init', function () { 'render_callback' => 'oribi_render_hero_animated', ] ); - /* Animated Page Hero โ€” inner pages with particle background */ + /* Animated Page Hero - inner pages with particle background */ register_block_type( 'oribi/page-hero-animated', [ 'attributes' => [ 'label' => [ 'type' => 'string', 'default' => '' ], @@ -935,10 +935,10 @@ function oribi_render_contact_section( $a ) {

-
📧
Email Us
-
🎫
Existing Customer Support
-
🌎
Client Portal
-
📍
Location
+
Email Us
+
Existing Customer Support
+
Client Portal
+
Location

@@ -970,12 +970,12 @@ function oribi_render_contact_section( $a ) { inner_blocks ); @@ -1261,7 +1261,7 @@ function oribi_render_pricing_section( $a, $content, $block ) {
@@ -1320,7 +1320,7 @@ function oribi_render_platform_section( $a, $content ) {
@@ -1379,7 +1379,7 @@ function oribi_render_trust_section( $a, $content ) {
@@ -1389,7 +1389,7 @@ function oribi_render_trust_item( $a ) { @@ -1408,7 +1408,7 @@ function oribi_render_faq_section( $a, $content ) {
@@ -1418,7 +1418,7 @@ function oribi_render_faq_item( $a ) { ✓'; - elseif ( $val === false ) echo ''; + elseif ( $val === false ) echo ''; else echo wp_kses_post( $val ); ?> diff --git a/theme/functions.php b/theme/functions.php index cc66fd7..a702998 100644 --- a/theme/functions.php +++ b/theme/functions.php @@ -1,6 +1,6 @@ __( 'Oribi Tech โ€” Pages', 'ots-theme' ), + 'label' => __( 'Oribi Tech - Pages', 'ots-theme' ), ] ); register_block_pattern_category( 'oribi-sections', [ - 'label' => __( 'Oribi Tech โ€” Sections', 'ots-theme' ), + 'label' => __( 'Oribi Tech - Sections', 'ots-theme' ), ] ); } ); diff --git a/theme/inc/theme-defaults.php b/theme/inc/theme-defaults.php index d0ae898..889a293 100644 --- a/theme/inc/theme-defaults.php +++ b/theme/inc/theme-defaults.php @@ -1,6 +1,6 @@ '#D83302', - 'color_primary_dk' => '#B52B02', - 'color_primary_lt' => '#FEF0EB', - 'color_accent' => '#00757c', - 'color_accent_dk' => '#005a60', - 'color_accent_lt' => '#E6F4F5', - 'color_dark' => '#0D1321', - 'color_dark_2' => '#1A2236', - 'color_text' => '#2D3748', - 'color_text_muted' => '#718096', - 'color_border' => '#E2E8F0', + 'color_primary' => '#004225', + 'color_primary_dk' => '#002E1A', + 'color_primary_lt' => '#E8F5E9', + 'color_accent' => '#4CAF50', + 'color_accent_dk' => '#388E3C', + 'color_accent_lt' => '#E8F5E9', + 'color_dark' => '#111111', + 'color_dark_2' => '#1A1A1A', + 'color_text' => '#333333', + 'color_text_muted' => '#666666', + 'color_border' => '#E0E0E0', 'color_bg' => '#FFFFFF', - 'color_bg_alt' => '#FFF8F5', + 'color_bg_alt' => '#F5F5F5', /* โ”€โ”€ Dark-mode colour palette โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ - 'dark_primary' => '#FF6B3D', - 'dark_primary_dk' => '#D83302', - 'dark_primary_lt' => 'rgba(216,51,2,0.15)', - 'dark_accent' => '#00757c', - 'dark_accent_dk' => '#005a60', - 'dark_accent_lt' => 'rgba(0,117,124,0.15)', - 'dark_dark' => '#E2E8F0', - 'dark_dark_2' => '#CBD5E0', - 'dark_text' => '#CBD5E0', - 'dark_text_muted' => '#A0AEC0', - 'dark_border' => '#2D3748', - 'dark_bg' => '#0F1724', - 'dark_bg_alt' => '#151F30', - 'dark_bg_dark' => '#0A0F1A', - 'dark_heading' => '#F7FAFC', - 'dark_card_bg' => '#151F30', + 'dark_primary' => '#4CAF50', + 'dark_primary_dk' => '#004225', + 'dark_primary_lt' => 'rgba(0,66,37,0.15)', + 'dark_accent' => '#66BB6A', + 'dark_accent_dk' => '#4CAF50', + 'dark_accent_lt' => 'rgba(76,175,80,0.15)', + 'dark_dark' => '#E0E0E0', + 'dark_dark_2' => '#BDBDBD', + 'dark_text' => '#E0E0E0', + 'dark_text_muted' => '#9E9E9E', + 'dark_border' => '#333333', + 'dark_bg' => '#1A1A1A', + 'dark_bg_alt' => '#222222', + 'dark_bg_dark' => '#111111', + 'dark_heading' => '#F5F5F5', + 'dark_card_bg' => '#222222', /* โ”€โ”€ Typography โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ 'font_family' => 'inter', // slug from WP Font Library diff --git a/theme/inc/theme-generator.php b/theme/inc/theme-generator.php index f5a4aaa..92122ed 100644 --- a/theme/inc/theme-generator.php +++ b/theme/inc/theme-generator.php @@ -1,6 +1,6 @@