/* ============================================================ GetSure Design System One file. Two skins via body class. or ============================================================ */ /* ============ TOKENS ============ */ :root{ /* Color */ --navy: #1e3a5f; --navy-deep: #16294a; --gold: #d4a84b; --gold-dark: #b88a2e; --cream: #faf8f5; --cream-dark: #f1ece2; --ink: #1a1a1a; --body: #333333; --muted: #666666; --border: #e5e5e5; --gray-light: #e6e3dc; /* Semantic (callouts) */ --info: #3b82f6; --info-bg: #eff6ff; --warning: #f59e0b; --warning-bg: #fffbeb; --success: #10b981; --success-bg: #f0fdf4; /* Type */ --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 26px; --text-2xl: 32px; --text-3xl: 40px; --text-4xl: 52px; --text-5xl: 68px; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 56px; --space-11: 64px; --space-12: 80px; --space-13: 96px; --space-14: 120px; /* Radius */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; /* Container widths */ --container-wide: 1180px; --container-narrow: 720px; } /* ============ RESET + BASE ============ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family: var(--font-sans); color: var(--body); background: #fff; line-height: 1.75; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4{ font-family: var(--font-serif); color: var(--ink); line-height: 1.3; } a{text-decoration:none;color:var(--navy)} button{font-family:inherit;cursor:pointer;border:none;background:none} img{max-width:100%;display:block} /* Brand body overrides */ body.brand{ background: var(--cream); color: var(--ink); line-height: 1.6; } body.brand h1, body.brand h2, body.brand h3, body.brand h4{ color: var(--navy); font-weight: 500; line-height: 1.15; } /* ============ HERO ============ */ .hero{ background: var(--cream); padding: var(--space-12) var(--space-6) var(--space-11); text-align: center; } .hero .inner{max-width: var(--container-narrow); margin: 0 auto} .hero h1{ font-size: var(--text-2xl); font-weight: 700; color: var(--ink); margin-bottom: var(--space-5); } .hero .pillars{font-size: 13px; color: var(--muted); margin-bottom: var(--space-5)} .hero .pillars span{color: var(--gold); margin: 0 8px} .hero p.lede{ font-size: var(--text-md); color: var(--body); max-width: 580px; margin: 0 auto var(--space-8); } .hero .eyebrow{ font-size: var(--text-xs); letter-spacing: 2px; text-transform: uppercase; color: var(--navy); font-weight: 700; margin-bottom: var(--space-4); display: inline-block; } body.brand .hero{ background: var(--navy); color: #fff; padding: var(--space-14) var(--space-7); position: relative; overflow: hidden; } body.brand .hero::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(212,168,75,.08) 0%, transparent 60%); } body.brand .hero .inner{max-width: 900px; position: relative} body.brand .hero .eyebrow{ letter-spacing: 3px; color: var(--gold); font-weight: 500; margin-bottom: var(--space-6); } body.brand .hero h1{ font-size: var(--text-5xl); color: #fff; font-weight: 500; line-height: 1.05; margin-bottom: var(--space-6); } body.brand .hero p.lede{ font-size: 21px; color: #e8e4d8; font-weight: 300; max-width: none; margin-bottom: var(--space-9); } /* ============ BUTTONS ============ */ .btn-primary{ display: inline-block; background: var(--navy); color: #fff; padding: 14px 32px; font-size: 14px; font-weight: 600; border-radius: var(--radius-md); } .btn-primary:hover{background: var(--navy-deep)} .btn-ghost{ display: inline-block; background: transparent; color: var(--navy); padding: 13px 30px; font-size: 14px; font-weight: 600; border: 1px solid var(--border); border-radius: var(--radius-md); } .btn-ghost:hover{background: var(--cream)} body.brand .btn-primary{ background: var(--gold); color: var(--navy-deep); padding: 18px 42px; font-size: var(--text-base); letter-spacing: .5px; text-transform: uppercase; border-radius: 0; } body.brand .btn-primary:hover{background: #e6ba56} body.brand .btn-ghost{ color: #fff; padding: 17px 40px; font-size: var(--text-base); letter-spacing: .5px; text-transform: uppercase; border: 2px solid #fff; border-radius: 0; margin-left: var(--space-3); } body.brand .btn-ghost:hover{background: #fff; color: var(--navy)} /* Inline text link */ .link{ color: var(--navy); font-weight: 600; border-bottom: 1px solid var(--gold); padding-bottom: 2px; font-size: 14px; } /* ============ NAV + UTILITY BAR ============ */ header.nav{ background: #fff; border-bottom: 1px solid var(--border); padding: var(--space-5) var(--space-6); } header.nav .wrap{ max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .logo{ font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--navy); } .logo span{color: var(--gold)} header.nav nav{display: flex; gap: var(--space-7); align-items: center} header.nav nav ul{list-style: none; display: flex; gap: var(--space-7)} header.nav nav a{font-size: 14px; color: var(--body); font-weight: 500} header.nav nav a:hover{color: var(--navy)} .nav-cta{ background: var(--navy); color: #fff; padding: 10px 22px; font-size: 13px; font-weight: 600; border-radius: var(--radius-sm); } body.brand header.nav{ border-bottom: 1px solid var(--gray-light); position: sticky; top: 0; z-index: 50; padding: 18px var(--space-7); } body.brand header.nav .wrap{max-width: var(--container-wide)} body.brand .logo{font-size: var(--text-xl); font-weight: 600} body.brand .logo span{color: var(--gold-dark)} body.brand header.nav nav a{font-size: var(--text-base); color: var(--ink)} body.brand header.nav nav a:hover{color: var(--gold-dark)} body.brand .nav-cta{ border-radius: 0; padding: var(--space-3) var(--space-6); font-size: 14px; } .utility-bar{ background: var(--navy-deep); color: #fff; font-size: var(--text-sm); padding: var(--space-2) 0; } .utility-bar .wrap{ max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--space-7); display: flex; justify-content: flex-end; gap: 28px; } .utility-bar a{color: #fff; opacity: .85} .utility-bar a:hover{opacity: 1} /* ============ SECTIONS ============ */ section{padding: var(--space-10) var(--space-6)} .container{max-width: var(--container-narrow); margin: 0 auto} .section-title{ font-size: var(--text-xl); text-align: center; font-weight: 700; color: var(--ink); margin-bottom: var(--space-3); } .section-sub{ text-align: center; color: var(--muted); font-size: 14px; max-width: 480px; margin: 0 auto var(--space-8); } body.brand section{padding: var(--space-13) var(--space-7)} body.brand .container{max-width: var(--container-wide)} body.brand .section-title{ font-size: var(--text-3xl); font-weight: 500; color: var(--navy); margin-bottom: var(--space-4); } body.brand .section-sub{ font-size: var(--text-md); max-width: 680px; margin-bottom: var(--space-11); } /* ============ READING COLUMN (Document long-form) ============ */ .reading{ max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-6); } .reading p{ font-size: 16px; line-height: 1.85; color: var(--body); margin-bottom: var(--space-6); } .reading p strong{color: var(--ink); font-weight: 600} .reading h3{ font-size: var(--text-lg); font-weight: 600; color: var(--navy); margin: var(--space-10) 0 var(--space-3); font-family: var(--font-sans); } .gold-line{ width: 48px; height: 2px; background: var(--gold); margin: var(--space-3) 0 var(--space-5); } /* ============ CARD ============ */ .card{ background: var(--cream); border-radius: var(--radius-xl); padding: 26px 30px; } .card h4{ font-size: var(--text-md); color: var(--ink); margin-bottom: var(--space-3); font-weight: 600; font-family: var(--font-sans); } .card p{font-size: 14px; line-height: 1.75; color: var(--body)} body.brand .card{ background: #fff; border: 1px solid var(--gray-light); border-left: 4px solid var(--navy); border-radius: 0; padding: 28px 32px; } body.brand .card h4{ font-family: var(--font-serif); font-size: var(--text-lg); color: var(--navy); font-weight: 500; } /* ============ CALLOUTS ============ */ .callout-info, .callout-warning, .callout-success, .callout-key{ border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: 22px 26px; margin: var(--space-7) 0; border-left: 4px solid; } .callout-info {background: var(--info-bg); border-left-color: var(--info)} .callout-warning {background: var(--warning-bg); border-left-color: var(--warning)} .callout-success {background: var(--success-bg); border-left-color: var(--success)} .callout-key {background: var(--cream); border-left-color: var(--gold)} .callout-info .lab, .callout-warning .lab, .callout-success .lab, .callout-key .lab{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; } .callout-info .lab {color: var(--info)} .callout-warning .lab {color: var(--warning)} .callout-success .lab {color: var(--success)} .callout-key .lab {color: var(--navy)} .callout-info p, .callout-warning p, .callout-success p, .callout-key p{ font-size: var(--text-base); line-height: 1.75; color: var(--body); margin: 0; } .callout-key h4{ font-family: var(--font-serif); font-size: 18px; color: var(--ink); margin-bottom: 8px; font-weight: 700; } /* Brand: callout-key becomes navy slab */ body.brand .callout-key{ background: var(--navy); color: #fff; padding: 48px 52px; margin: var(--space-9) 0; position: relative; border-left: none; border-radius: 0; } body.brand .callout-key::before{ content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 4px; background: var(--gold); } body.brand .callout-key .lab{ letter-spacing: 3px; color: var(--gold); font-weight: 600; margin-bottom: 14px; } body.brand .callout-key h4{ font-size: 28px; color: #fff; font-weight: 500; margin-bottom: 16px; } body.brand .callout-key p{ font-size: 17px; color: #e8e4d8; line-height: 1.7; } /* ============ TABLE ============ */ .table-wrap{overflow-x: auto; border-radius: var(--radius-md); margin: var(--space-6) 0} .compare-table{ width: 100%; border-collapse: collapse; font-size: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .compare-table th{ background: var(--cream); font-size: 11px; color: var(--navy); font-weight: 700; text-align: left; padding: var(--space-3) 14px; text-transform: uppercase; letter-spacing: .04em; } .compare-table td{ padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--body); } .compare-table tr:last-child td{border-bottom: none} .compare-table td:first-child{font-weight: 600; color: var(--ink)} body.brand .compare-table{ border: none; border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); border-radius: 0; font-size: var(--text-base); } body.brand .compare-table th{ font-family: var(--font-serif); font-size: 18px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 20px 24px; border-bottom: 1px solid var(--gold); } body.brand .compare-table td{ padding: 20px 24px; border-bottom: 1px solid var(--gray-light); color: var(--ink); } /* ============ LISTS ============ */ .doc-list{list-style: none; padding: 0; margin: 0} .doc-list li{ position: relative; padding-left: 22px; font-size: var(--text-base); line-height: 1.75; color: var(--body); margin-bottom: 8px; } .doc-list li::before{ content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); } .brand-list{list-style: none} .brand-list li{ padding: 14px 0 14px 32px; border-bottom: 1px solid var(--gray-light); position: relative; font-size: 16px; } .brand-list li::before{ content: ""; position: absolute; left: 0; top: 22px; width: 18px; height: 1px; background: var(--gold); } /* ============ STAT STRIP ============ */ .stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); max-width: 700px; margin: var(--space-7) auto; } .stats .stat{ background: var(--cream); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-4); text-align: center; } .stats .stat .num{ font-family: var(--font-serif); font-size: 32px; color: var(--navy); font-weight: 700; line-height: 1; margin-bottom: 6px; } .stats .stat .lab{font-size: 12px; color: var(--muted)} body.brand .stats{ grid-template-columns: repeat(4, 1fr); max-width: none; gap: 0; margin: var(--space-10) 0 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); } body.brand .stats .stat{ background: transparent; border-radius: 0; padding: var(--space-9) 28px; border-right: 1px solid var(--gray-light); } body.brand .stats .stat:last-child{border-right: none} body.brand .stats .stat .num{font-size: 48px; font-weight: 600; margin-bottom: 14px} /* ============ FAQ ACCORDION ============ */ .faq-list{max-width: var(--container-narrow); margin: 0 auto} .faq-item{ background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6) 28px; margin-bottom: var(--space-3); } .faq-q{ font-family: var(--font-serif); font-size: 19px; color: var(--ink); margin-bottom: var(--space-3); font-weight: 700; } .faq-a{font-size: var(--text-base); line-height: 1.75; color: var(--body)} body.brand .faq-list{max-width: 880px} body.brand .faq-item{ background: transparent; border: none; border-bottom: 1px solid var(--gray-light); border-radius: 0; padding: var(--space-7) 0; margin-bottom: 0; } body.brand .faq-q{ font-size: 22px; color: var(--navy); font-weight: 500; display: flex; justify-content: space-between; } body.brand .faq-q::after{content: "+"; color: var(--gold-dark); font-size: 26px} body.brand .faq-a{color: var(--muted); line-height: 1.7} /* ============ FINAL CTA ============ */ .final-cta{ background: var(--cream); text-align: center; padding: var(--space-12) var(--space-6); } .final-cta h2{ font-size: 28px; font-weight: 700; color: var(--ink); margin-bottom: var(--space-3); } .final-cta p{ font-size: 16px; color: var(--muted); margin-bottom: var(--space-8); max-width: 480px; margin-left: auto; margin-right: auto; } body.brand .final-cta{ background: var(--cream-dark); padding: var(--space-14) var(--space-7); } body.brand .final-cta h2{ font-size: 48px; font-weight: 500; color: var(--navy); } body.brand .final-cta p{font-size: 18px} /* ============ FOOTER ============ */ footer{ background: #fff; border-top: 1px solid var(--border); padding: var(--space-9) var(--space-6) var(--space-7); color: var(--body); } footer .wrap{max-width: 1100px; margin: 0 auto} .foot-grid{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-8); padding-bottom: var(--space-7); border-bottom: 1px solid var(--border); } .foot-brand .logo{margin-bottom: 10px; display: block} .foot-brand p{font-size: 13px; color: var(--muted); line-height: 1.7; max-width: 320px} .foot-col h4{ font-size: 12px; color: var(--navy); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; font-family: var(--font-sans); } .foot-col ul{list-style: none} .foot-col li{margin-bottom: 8px} .foot-col a{font-size: 13px; color: var(--body)} .foot-col a:hover{color: var(--navy)} .disclaimer{ padding-top: var(--space-6); font-size: 11px; color: var(--muted); line-height: 1.7; max-width: 900px; } .disclaimer p{margin-bottom: 8px} .copy{ margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); } body.brand footer{ background: var(--navy-deep); color: #cfd6e2; border-top: none; padding: var(--space-12) var(--space-7) var(--space-7); } body.brand footer .wrap{max-width: var(--container-wide)} body.brand .foot-grid{ gap: var(--space-9); padding-bottom: var(--space-10); border-bottom: 1px solid rgba(255,255,255,.1); } body.brand .foot-brand .logo{color: #fff; font-size: 28px; margin-bottom: var(--space-4)} body.brand .foot-brand .logo span{color: var(--gold)} body.brand .foot-brand p{color: #a8b1c2; max-width: 340px} body.brand .foot-col h4{color: var(--gold); letter-spacing: 1.5px} body.brand .foot-col a{color: #cfd6e2} body.brand .foot-col a:hover{color: #fff} body.brand .disclaimer{color: #8e96a8} body.brand .copy{ border-top-color: rgba(255,255,255,.08); color: #8e96a8; } /* ============ RESPONSIVE ============ */ @media (max-width: 900px){ body.brand .hero h1{font-size: 44px} body.brand .hero p.lede{font-size: 18px} .foot-grid, body.brand .stats{grid-template-columns: 1fr} body.brand .stats .stat{ border-right: none; border-bottom: 1px solid var(--gray-light); } body.brand .section-title{font-size: 32px} body.brand .final-cta h2{font-size: 32px} header.nav nav ul{display: none} body.brand .btn-ghost{margin-left: 0; margin-top: var(--space-3)} } @media (max-width: 768px){ .hero h1{font-size: 26px} .stats{grid-template-columns: 1fr; max-width: 400px} header nav{display: none} }