body { font-family: Lato } /* ===================================== Dare To Scale – Brand System (v3) Source: BrandBaser Manual ===================================== */
:root { /* Core Colors */ --dts-primary: #f59e0b; --dts-secondary: #d97706; --dts-accent: #800080; --dts-bg: #ffffff; --dts-text: #1e293b; --dts-muted: #fefce8; --dts-border: #fde68a; /* Typography */ --dts-font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Layout */ --dts-radius: 0.75rem; --dts-radius-pill: 999px; --dts-shadow: 0 10px 30px rgba(30,41,59,0.08);
}
/* Global baseline */
body { font-family: var(--dts-font); color: var(--dts-text); background-color: var(--dts-bg); line-height: 1.55;
}
/* Headings */
h1, h2, h3, h4, h5, h6 { font-family: var(--dts-font); font-weight: 700; color: var(--dts-text); line-height: 1.2;
}
/* Links */
a { color: var(--dts-primary); text-decoration: none;
}
a:hover { text-decoration: underline;
}
/* ===================================== Reusable Layout & Brand Classes (apply via element CSS class field) ===================================== */
/* Sections */
.dts-section { padding: 72px 0; background-color: var(--dts-bg);
}
.dts-section--muted { background-color: var(--dts-muted);
}
/* Containers */
.dts-container { max-width: 1120px; margin: 0 auto; padding: 0 20px;
}
/* Cards */
.dts-card { background-color: var(--dts-bg); border: 1px solid var(--dts-border); border-radius: var(--dts-radius); box-shadow: var(--dts-shadow); padding: 28px;
}
/* Typography helpers */
.dts-h1 { font-size: 44px; letter-spacing: -0.02em;
}
.dts-h2 { font-size: 30px; letter-spacing: -0.01em;
}
.dts-lead { font-size: 18px; color: var(--dts-text); max-width: 70ch;
}
/* Buttons */
.dts-btn-primary { display: inline-flex; align-items: center; justify-content: center; background-color: var(--dts-primary); color: #ffffff; border: 1px solid var(--dts-primary); border-radius: var(--dts-radius-pill); padding: 14px 22px; font-weight: 700; cursor: pointer;
}
.dts-btn-primary:hover { background-color: var(--dts-secondary); border-color: var(--dts-secondary);
}
.dts-btn-secondary { display: inline-flex; align-items: center; justify-content: center; background-color: transparent; color: var(--dts-primary); border: 1px solid var(--dts-border); border-radius: var(--dts-radius-pill); padding: 14px 22px; font-weight: 700; cursor: pointer;
}
.dts-btn-secondary:hover { background-color: var(--dts-muted);
} *{} {} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root { --gp-font-heading: 'Lato', sans-serif; --gp-font-body: 'Lato', sans-serif; --gp-color-primary: #f59e0b; --gp-color-secondary: #d97706; --gp-color-accent: #800080; --gp-color-background: #ffffff; --gp-color-text: #1e293b; --gp-color-muted: #fefce8; --gp-color-border: #fde68a; --gp-radius-base: 0.75rem; --gp-spacing-unit: 1rem; } body { font-family: var(--gp-font-body); color: var(--gp-color-text); background-color: var(--gp-color-background); line-height: 1.6; margin: 0; overflow-x: hidden; } h1, h2, h3 { font-family: var(--gp-font-heading); font-weight: 700; line-height: 1.2; margin: 0; } section { padding: calc(var(--gp-spacing-unit) * 6) calc(var(--gp-spacing-unit) * 2); max-width: 1200px; margin: 0 auto; } .btn-primary { display: inline-block; background-color: var(--gp-color-primary); color: white; padding: 1rem 2.5rem; text-decoration: none; font-weight: 700; border-radius: var(--gp-radius-base); transition: background-color 0.3s ease; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; } .btn-primary:hover { background-color: var(--gp-color-secondary); } /* Hero Styling */ .hero { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; text-align: center; border-bottom: 1px solid var(--gp-color-border); } .hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); max-width: 900px; margin: 0 auto var(--gp-spacing-unit); } .hero h2 { font-size: 1.5rem; color: var(--gp-color-secondary); margin-bottom: calc(var(--gp-spacing-unit) * 3); text-transform: uppercase; letter-spacing: 0.1em; } .hero .classification { max-width: 700px; margin: 0 auto calc(var(--gp-spacing-unit) * 2); font-size: 1.25rem; } .hero .value-prop { max-width: 600px; margin: 0 auto calc(var(--gp-spacing-unit) * 3); opacity: 0.8; } .hero .doctrine { font-weight: 700; color: var(--gp-color-accent); margin-bottom: calc(var(--gp-spacing-unit) * 4); font-size: 1.1rem; letter-spacing: 0.05em; } /* Problem Section Styling */ .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .emphasis-lines { font-size: 2.5rem; font-weight: 700; color: var(--gp-color-primary); display: flex; flex-direction: column; gap: 0.5rem; } .problem-content { font-size: 1.15rem; } .consequence-box { background: var(--gp-color-muted); padding: 2rem; border-left: 4px solid var(--gp-color-primary); margin: 2rem 0; } /* Filter Section Styling */ .filter-container { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; } .filter-card { padding: 3rem; border: 1px solid var(--gp-color-border); border-radius: var(--gp-radius-base); } .filter-card.is-for { background-color: #fafafa; } .filter-card h3 { margin-bottom: 2rem; color: var(--gp-color-accent); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.1em; } .filter-list { list-style: none; padding: 0; margin: 0; } .filter-list li { margin-bottom: 1.5rem; padding-left: 1.5rem; position: relative; } .filter-list li::before { content: "—"; position: absolute; left: 0; color: var(--gp-color-primary); } /* Pillars Styling */ .pillars-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; margin-top: 4rem; } .pillar-card { padding-bottom: 2rem; border-bottom: 1px solid var(--gp-color-border); } .pillar-card h3 { margin-bottom: 1rem; font-size: 1.25rem; } /* How We Work Styling */ .how-we-work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; } .subsection { margin-bottom: 3rem; } .subsection h3 { font-size: 1.1rem; margin-bottom: 1rem; color: var(--gp-color-secondary); } /* CTA Styling */ .final-cta { text-align: center; background-color: #1e293b; color: white; border-radius: var(--gp-radius-base); margin-top: 4rem; margin-bottom: 4rem; } .final-cta h2 { font-size: 3rem; margin-bottom: 2rem; } .final-cta .body-text { max-width: 700px; margin: 0 auto 3rem; font-size: 1.2rem; opacity: 0.9; } .secondary-note { display: block; margin-top: 2rem; font-size: 0.8rem; opacity: 0.6; } @media (max-width: 768px) { .problem-grid, .filter-container, .pillars-grid, .how-we-work-grid { grid-template-columns: 1fr; } } :root { --gp-color-accent: #800080; --gp-color-primary: #f59e0b; --gp-color-secondary: #d97706; --gp-color-background: #ffffff; --gp-color-foreground: #1e293b; --gp-font-heading: 'Lato', sans-serif; --gp-font-body: 'Lato', sans-serif; } body { font-family: var(--gp-font-body); color: var(--gp-color-foreground); background-color: var(--gp-color-background); line-height: 1.8; margin: 0; padding: 0; } .container { max-width: 800px; margin: 0 auto; padding: 80px 24px; } header { margin-bottom: 64px; border-bottom: 1px solid #e2e8f0; padding-bottom: 32px; } h1 { font-family: var(--gp-font-heading); font-size: 2.5rem; font-weight: 700; margin-bottom: 8px; color: var(--gp-color-foreground); } h2 { font-family: var(--gp-font-heading); font-size: 1.75rem; font-weight: 700; margin-top: 48px; margin-bottom: 24px; color: var(--gp-color-foreground); } p { margin-bottom: 24px; font-size: 1.125rem; } ul { margin-bottom: 24px; padding-left: 0; list-style: none; } li { position: relative; padding-left: 24px; margin-bottom: 12px; font-size: 1.125rem; } li::before { content: "—"; position: absolute; left: 0; color: #94a3b8; } .alt-bg { background-color: #fefce8; /* Pale yellow from brand kit */ padding: 64px 0; } .footer-ref { margin-top: 80px; padding-top: 32px; border-top: 1px solid #e2e8f0; font-size: 1rem; color: #64748b; } .footer-ref a { color: var(--gp-color-accent); text-decoration: none; font-weight: 600; } .footer-ref a:hover { text-decoration: underline; } @media (max-width: 768px) { h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } .container { padding: 48px 20px; } } :root { --gp-color-accent: #800080; --gp-color-primary: #f59e0b; --gp-color-secondary: #d97706; --gp-color-background: #ffffff; --gp-color-foreground: #1e293b; --gp-font-heading: 'Lato', sans-serif; --gp-font-body: 'Lato', sans-serif; } body { font-family: var(--gp-font-body); color: var(--gp-color-foreground); background-color: var(--gp-color-background); line-height: 1.8; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; } .container { max-width: 800px; margin: 0 auto; padding: 80px 24px; box-sizing: border-box; } header { margin-bottom: 64px; border-bottom: 1px solid #e2e8f0; padding-bottom: 32px; } h1 { font-family: var(--gp-font-heading); font-size: clamp(2rem, 5vw, 2.5rem); font-weight: 700; margin: 0 0 8px; color: var(--gp-color-foreground); line-height: 1.2; } h2 { font-family: var(--gp-font-heading); font-size: clamp(1.5rem, 4vw, 1.75rem); font-weight: 700; margin: 48px 0 24px; color: var(--gp-color-foreground); line-height: 1.3; } p { margin: 0 0 24px; font-size: 1.125rem; max-width: 65ch; /* Optimal reading length */ } ul { margin: 0 0 32px; padding: 0; list-style: none; } li { position: relative; padding-left: 28px; margin-bottom: 16px; font-size: 1.125rem; line-height: 1.6; } li::before { content: "—"; position: absolute; left: 0; color: var(--gp-color-primary); font-weight: 700; } .alt-bg { background-color: #fefce8; /* Pale yellow from brand kit */ width: 100%; } .footer-ref { margin-top: 80px; padding-top: 32px; border-top: 1px solid #e2e8f0; font-size: 1rem; color: #64748b; } .footer-ref a { color: var(--gp-color-accent); text-decoration: underline; font-weight: 600; text-underline-offset: 4px; } @media (max-width: 768px) { .container { padding: 60px 24px; } h2 { margin-top: 32px; } }