Styling, Assets & Plugins
Relevant source files
The following files were used as context for generating this wiki page:
- sunrise-angular/src/assets/assets/scss/main.scss
- sunrise-angular/src/assets/css/global.css
- sunrise-angular/src/assets/assets/scss/layout/_footer.scss
- sunrise-angular/src/app/pages/services/service-cluster/service-cluster.component.scss
- sunrise-angular/src/app/pages/products/product-detail/product-detail.component.scss
- implementation_plan.md
Sunrise Communication employs a multi-layered styling architecture that combines global CSS variables, a modular SCSS structure, and component-specific styles. The system supports high-intent B2B and B2C catalogs through a professional visual language optimized for both Search Engine Optimization (SEO) and Search Experience Optimization (SXO).
The project uses a foundation of Bootstrap integrated with custom theme variables to ensure consistency across hardware catalogs (CCTV, EPABX, Biometrics) and service modules. This architecture includes specialized CSS-generated placeholders to maintain visual integrity in the absence of physical product assets.
Global Style Architecture
The project defines visual constants using CSS custom properties (variables) within a global scope. These variables govern the color palette, typography, and spacing scales used throughout the application.
Color Palette and Theming
The theme relies on a primary red (--main-color) and several variations of dark blues and navies (--main-color-two through --main-color-three) to establish a professional security and telecommunications brand identity.
| Variable | Value (RGB/Hex) | Purpose |
|---|---|---|
--main-color | rgb(223, 3, 3) | Primary Brand Action Color (Buttons, Icons) |
--main-color-two | rgb(1, 12, 58) | Secondary Theme Color (Headers, Dark Sections) |
--main-color-three | rgb(0, 45, 91) | Tertiary Theme Color |
--white-color | rgb(255, 255, 255) | Backgrounds and Light Text |
--dark-color | rgb(37, 37, 37) | Primary Body Text Color |
Sources: sunrise-angular/src/assets/css/global.css:54-150
Typography
The application utilizes Google Fonts to provide a modern interface. The primary font families are:
- Poppins: Used for headings and body text.
- Jost: Secondary font for specific UI elements.
- DM Sans & Sen: Utilized for specific component themes.
Sources: sunrise-angular/src/assets/css/global.css:179-183, implementation_plan.md:16
SCSS Modular Structure
The project organizes styles into a modular SCSS hierarchy, separating abstracts, base styles, layout definitions, and components.
The hierarchy ensures that utility mixins and variables are available to all downstream layout and component files.
Sources: sunrise-angular/src/assets/assets/scss/main.scss:32-75
Component-Specific Styling
Angular components leverage encapsulated SCSS for feature-specific layouts. This is evident in the Service Cluster and Product Detail pages, which use sophisticated gradients and grid layouts.
Service Cluster Layouts
The service cluster pages utilize a "Voice-Ready Quick Facts Ribbon" and a "4-Step Process" grid. These elements use specific shadow and border variables to create depth.
- Quick Facts Ribbon: Uses a flexbox layout with
justify-content: space-betweenandflex-wrap: wrapfor responsiveness. - Process Cards: Employs CSS transitions (
all 0.25s ease) and hover transforms (translateY(-3px)) for interactive feedback.
Sources: sunrise-angular/src/app/pages/services/service-cluster/service-cluster.component.scss:80-155
Product Detail Assets
The product detail styling includes a specific strategy for handling missing images using CSS placeholders based on product categories.
The detail view uses object-fit: cover for actual images and falls back to .detail-css-placeholder when images are unavailable.
Sources: sunrise-angular/src/app/pages/products/product-detail/product-detail.component.scss:83-125, implementation_plan.md:155-168
UI Components and Buttons
The global CSS defines seventeen distinct button styles (btn-style-one to btn-style-seventeen). These styles utilize CSS pseudo-elements (:before) to create sophisticated hover effects such as scaling and sliding overlays.
| Style | Characterstics | Usage |
|---|---|---|
btn-style-one | Red background, white hover scale | Primary CTA |
btn-style-six | Rounded corners (8px), circular hover fill | Modern Action |
btn-style-nine | Linear gradient (Purple to Pink), rotating icon | Special Features |
btn-style-eleven | Transparent border, pill shape | Secondary Buttons |
Sources: sunrise-angular/src/assets/css/global.css:487-750
Assets and Plugins
The styling system integrates several external and internal asset types to enhance the UI:
- Icons: Supports
flaticon,icofont, andfa(FontAwesome) sets for category markers and UI actions. - Animations: Uses AOS (Animate on Scroll) for entrance animations, defined via attributes like
data-aos="fade-up". - Placeholders: Utilizes pure CSS gradients and generated badges to represent brand logos and product hardware before real assets are loaded.
- Images: Managed via
NgOptimizedImagefor static assets to improve performance and LCP (Largest Contentful Paint) metrics.
Sources: implementation_plan.md:158-168, implementation_plan.md:278, sunrise-angular/src/app/pages/services/service-cluster/service-cluster.component.scss:10-25
Conclusion
The styling and asset management in Sunrise Communication prioritize scalability and SEO. By combining global CSS variables with modular SCSS and dynamic CSS placeholders, the project maintains a consistent professional brand even as dynamic product data is populated from the backend.