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 @@