Design System — História Page
Source files: index.html · historia_styles.css
Color Palette
| Token |
Hex |
Usage |
| Brand Purple |
#660099 |
Headings (h1–h3, year), carousel buttons, timeline tab hover, CTA label, links |
| Brand Teal |
#00cc99 |
Active timeline tab background |
| Brand Teal Dark |
#00b386 |
Active timeline tab hover |
| Purple Hover Light |
#f0e6f9 |
Timeline tab hover background |
| Purple Hover Mid |
#a066cc |
Carousel dot hover |
| Body Text |
#69645c |
Body paragraphs (both sizes), inactive tab text |
| Black |
#000000 |
CTA body text |
| White |
#ffffff |
Carousel button icon on hover, tab text on active, page background |
| Surface Grey |
#f9f9f9 |
Carousel section background |
| Inactive Dot |
#d0d0d0 |
Carousel dots (inactive), timeline line, decorative dots |
| Shadow |
rgba(0,0,0,0.25) |
Timeline card box-shadow, stacked image shadows |
Typography
All text uses a single typeface family: Montserrat (Google Fonts), loaded with weights 300, 400, 600, 700, 800, 900.
Type Scale
| Role |
Class |
Weight |
Size (desktop) |
Line-height |
Letter-spacing |
Color |
| Page title (H1) |
.historia-title |
800 |
56px |
66px |
— |
#660099 |
| Section heading (H2) |
.historia-h2 |
800 |
38px |
50px |
— |
#660099 |
| Slide heading (H3) |
.historia-h3 |
800 |
30px |
45px |
−0.75px |
#660099 |
| Timeline year |
.historia-tl-card-year |
800 |
38px |
50px |
— |
#660099 |
| Body — large |
.historia-body-text |
500 |
22px |
28px |
— |
#69645c |
| Body — small |
.historia-body2-text |
500 |
18px |
24px |
— |
#69645c |
| CTA label |
.historia-cta-label |
600 |
21px |
30px |
−0.525px |
#660099 |
| CTA body |
.historia-cta-text |
500 |
18px |
24px |
— |
#000 |
| Timeline tab |
.historia-tl-tab |
500 (800 active) |
16px (17px active) |
24px |
— |
#69645c / #fff |
Responsive Overrides (≤ 860px)
| Role |
Size |
Line-height |
.historia-h2 |
28px |
36px |
.historia-h3 |
22px |
32px |
.historia-body-text |
17px |
24px |
.historia-body2-text |
15px |
22px |
.historia-tl-card-year |
28px |
— |
.historia-tl-tab |
15px |
— |
Responsive Overrides (≤ 600px)
| Role |
Size |
Line-height |
.historia-title |
36px |
44px |
Spacing
Container
| Context |
Max-width |
Horizontal padding |
| Default |
1200px |
40px |
| Timeline section |
1400px |
60px |
| Default (≤ 860px) |
— |
24px |
| Timeline (≤ 860px) |
— |
24px |
Section Vertical Padding
| Section |
Desktop |
≤ 860px |
≤ 600px |
| Hero |
120px top · 28px bottom |
— |
40px top · 32px bottom |
| Intro |
60px top · 80px bottom |
— |
40px top · 48px bottom |
Carousel (.historia-amigao) |
0 (overflow hidden) |
— |
48px all sides |
| Carousel slide |
80px top |
— |
— |
| Timeline section |
80px top · 60px bottom |
— |
48px top · 40px bottom |
| CTA |
40px top · 80px bottom |
— |
— |
Component Internal Spacing
| Component |
Value |
| Slide inner gap (text ↔ media) |
80px (desktop) → 48px (≤ 1024px) → 40px column (≤ 860px) |
| Slide text column width |
flex: 0 0 580px → 440px (≤ 1024px) → 100% (≤ 860px) |
| Text-only slide max-width |
780px |
| Carousel controls padding-bottom |
52px |
| Carousel controls gap |
24px |
| Carousel dot gap |
10px |
| Timeline card text padding |
54px top · 68px right · 65px bottom · 61px left |
| Timeline card text padding (≤ 860px) |
28px top · 24px horiz · 36px bottom |
| Timeline card media width |
flex: 0 0 440px → 100% (≤ 860px) |
| Timeline cards margin-top |
32px |
Layout
Page Structure
<header> — site-wide nav (not scoped to historia)
<section.historia-hero>
<section.historia-intro>
<section.historia-amigao> ← carousel
<section.historia-timeline-section>
<section.historia-cta>
<footer> — site-wide footer
Carousel Layout (historia-amigao)
- Track:
display: flex — slides translated with translateX on JS interaction
- Each slide:
min-width: 100%, text column left + media column right
- Media variants:
--stacked — two absolutely-positioned images overlapping (back: 420px wide, front: 240px wide, z-index 2)--logo — flex-centered logo, max-width 460px
- Text-only slides use
--text-only modifier (max-width 780px, no media column)
- Controls: prev/next circular buttons + dot pagination below the track
Timeline Layout (historia-timeline-section)
- Nav: horizontal
flex row with a position: absolute hairline (2px, #d0d0d0) at vertical center; decorative end-dots + year tab buttons above it
- Cards: hidden by default (
display: none), shown via .historia-tl-card--active
- Card body:
display: flex, text column (flex: 1) optionally preceded by a media column (flex: 0 0 440px) with two absolutely-positioned stacked images
- On mobile (≤ 860px): tab row wraps, line and decorative dots are hidden, card body becomes column (media on top, text below)
Interactive Components
Carousel
| State |
Effect |
| Track transition |
transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) |
| Dot — inactive |
12×12px circle, #d0d0d0 |
| Dot — active |
#660099, scale(1.25) |
| Dot — hover (not active) |
#a066cc |
| Dot transition |
background 0.2s, transform 0.2s |
| Arrow button |
44×44px circle, 2px border #660099, transparent fill |
| Arrow button — hover |
Fill #660099, icon white |
| Arrow button — disabled |
opacity: 0.3 |
| Arrow transition |
background 0.2s, color 0.2s |
| Touch swipe |
Threshold 50px, left = next, right = prev |
Timeline Tabs
| State |
Background |
Border |
Text |
Weight |
| Default |
#fff |
1px solid #69645c |
#69645c |
500 |
| Hover |
#f0e6f9 |
#660099 |
#660099 |
500 |
| Active |
#00cc99 |
#00cc99 |
#fff |
800 |
| Active hover |
#00b386 |
#00b386 |
#fff |
800 |
Tab transitions: background 0.2s, color 0.2s, border-color 0.2s
Border-radius: 15px
Padding: 10px 18px
CTA Link
| State |
Effect |
| Default |
#660099, underline, text-underline-offset: 2px |
| Hover |
opacity: 0.8 |
Component Inventory
| Component |
HTML anchor |
CSS classes |
| Page hero |
section.historia-hero |
.historia-hero, .historia-title |
| Intro block |
section.historia-intro |
.historia-intro, .historia-h2, .historia-body-text |
| Carousel section |
section.historia-amigao |
.historia-carousel, .historia-carousel-track, .historia-carousel-slide |
| Slide text column |
div.historia-slide-text |
.historia-slide-inner, .historia-slide-inner--text-only, .historia-h3, .historia-body2-text |
| Slide stacked images |
div.historia-slide-media--stacked |
.historia-slide-img-back, .historia-slide-img-front |
| Slide logo image |
div.historia-slide-media--logo |
.historia-slide-logo |
| Carousel controls |
div.historia-carousel-controls |
.historia-carousel-btn, .historia-carousel-dots, .historia-carousel-dot, .historia-carousel-dot--active |
| Timeline nav |
div.historia-timeline-nav-wrap |
.historia-timeline-line, .historia-timeline-tabs, .historia-tl-dot, .historia-tl-tab, .historia-tl-tab--active |
| Timeline card |
div.historia-tl-card |
.historia-tl-card--active, .historia-tl-card--with-media, .historia-tl-card-body, .historia-tl-card-text, .historia-tl-card-year, .historia-body2-text |
| Timeline card media |
div.historia-tl-card-media |
.historia-tl-card-img, .historia-tl-card-img--top, .historia-tl-card-img--bottom |
| CTA block |
section.historia-cta |
.historia-cta-label, .historia-cta-text, .historia-cta-link |
Breakpoints
| Breakpoint |
Scope |
≤ 1024px |
Carousel slide inner gap narrows; text column shrinks to 440px |
≤ 860px |
All containers drop to 24px padding; slide layout stacks vertically; timeline tabs wrap, line hidden; card body stacks (media first); all body text scales down |
≤ 600px |
Hero title shrinks to 36px; hero/intro/carousel/timeline vertical padding tightens |
External Dependencies
| Dependency |
Version / URL |
Purpose |
| Montserrat |
Google Fonts (weights 300–900) |
All page typography |
| Font Awesome |
v5.6.3 via CDN |
Footer social icons |
| normalize.css |
/assets/revendedor/stylesheet/normalize.css |
CSS reset |
| main.css |
/assets/revendedor/public/stylesheet/main.css |
Site-wide base styles (header, footer, nav) |
| style-blog.css |
/assets/css/style-blog.css |
Blog/shared page styles |
| historia_styles.css |
./historia_styles.css |
Page-scoped styles (this file) |
JavaScript Behaviour
All logic lives in a single inline IIFE at the bottom of index.html.
Timeline tabs
querySelectorAll('.historia-tl-tab') — on click, removes --active from all tabs, adds it to the clicked tab, toggles --active on cards by matching data-year ↔ data-panel.
Carousel
- State:
current index (0-based), wraps with modulo
goTo(index) — sets track.style.transform, syncs dot --active class and aria-selected- Prev/next buttons call
goTo(current ± 1)
- Dot buttons call
goTo(data-slide)
- Touch:
touchstart records startX; touchend triggers goTo if |diff| > 50px
