/* ========================================================================== Green Owl Financial — 2026 redesign Brand colors sampled directly from the existing site: green #00A468 (logo wordmark, buttons, section fills) cream #E1DFD9 (page background) Type: Marcellus (display) + PT Serif (body) — both carried over from the existing Squarespace build so the brand still feels like itself. ========================================================================== */ :root{ /* Brand */ --green: #00A468; --green-dark: #008554; --green-deep: #0A3B29; --green-ink: #07291D; --green-soft: #E3F4EC; /* Neutrals */ --cream: #E1DFD9; --sand: #F2F0EB; --paper: #FBFAF7; --white: #FFFFFF; --ink: #17201A; --muted: #5C6660; --line: #D6D3CB; /* System */ --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(10,59,41,.06), 0 2px 6px rgba(10,59,41,.05); --shadow-md: 0 4px 12px rgba(10,59,41,.07), 0 12px 28px rgba(10,59,41,.07); --shadow-lg: 0 8px 24px rgba(10,59,41,.10), 0 24px 60px rgba(10,59,41,.10); --display: 'Marcellus', 'Times New Roman', serif; --body: 'PT Serif', Georgia, serif; --header-h: 78px; } @media(min-width:760px){ :root{ --header-h: 90px; } } /* ------------------------------ Reset ------------------------------ */ *,*::before,*::after{ box-sizing:border-box; } [hidden]{ display:none !important; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); } body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; /* clip, not hidden: `hidden` would turn into a scroll container and break the sticky header. `clip` trims stray decorative overflow safely. */ overflow-x:clip; } img{ max-width:100%; height:auto; display:block; } a{ color:var(--green-dark); } h1,h2,h3,h4{ font-family:var(--display); font-weight:400; line-height:1.15; letter-spacing:-.01em; margin:0 0 .5em; } p{ margin:0 0 1.1em; } ul,ol{ margin:0; padding:0; list-style:none; } button{ font:inherit; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--green); color:#fff; padding:12px 18px; border-radius:0 0 var(--radius) 0; text-decoration:none; } .skip-link:focus{ left:0; } :focus-visible{ outline:3px solid var(--green); outline-offset:3px; border-radius:4px; } /* ------------------------------ Layout ------------------------------ */ .wrap{ width:min(1180px, calc(100% - 48px)); margin-inline:auto; } .wrap-narrow{ width:min(820px, calc(100% - 48px)); } .section{ padding:96px 0; } .center{ text-align:center; } .eyebrow{ font-family:var(--display); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--green-dark); margin:0 0 14px; } .eyebrow.light{ color:#8FDBB6; } .section-title{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); max-width:22ch; } .center.section-title{ margin-inline:auto; } .section-title.light{ color:#fff; } .section-sub{ color:var(--muted); font-size:1.06rem; max-width:60ch; margin:0 auto 52px; } .section-sub.light{ color:#C2E5D6; } .br-lg{ display:none; } @media(min-width:800px){ .br-lg{ display:inline; } } /* ------------------------------ Buttons ------------------------------ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--body); font-size:1rem; line-height:1; font-weight:700; padding:16px 28px; border-radius:999px; border:1.5px solid transparent; text-decoration:none; cursor:pointer; text-align:center; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease; } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .btn-primary{ background:var(--green); color:#fff; box-shadow:0 4px 14px rgba(0,164,104,.28); } .btn-primary:hover{ background:var(--green-dark); box-shadow:0 8px 22px rgba(0,164,104,.34); } .btn-outline{ background:transparent; color:var(--green-deep); border-color:var(--green); } .btn-outline:hover{ background:var(--green); color:#fff; } .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--ink); background:rgba(0,0,0,.03); } .btn-light{ background:#fff; color:var(--green-deep); box-shadow:var(--shadow-md); } .btn-light:hover{ background:var(--green-soft); } .btn-sm{ padding:12px 20px; font-size:.92rem; } .btn-lg{ padding:19px 36px; font-size:1.06rem; } /* ------------------------------ Header ------------------------------ */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(225,223,217,.86); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent; transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease; } .site-header.scrolled{ background:rgba(251,250,247,.94); border-bottom-color:var(--line); box-shadow:0 2px 14px rgba(10,59,41,.06); } .header-inner{ display:flex; align-items:center; gap:24px; height:var(--header-h); } .logo{ display:inline-flex; align-items:center; gap:13px; text-decoration:none; color:var(--green); flex:0 0 auto; } /* Her supplied owl illustration. Sized by height so it optically matches the wordmark's cap height; the art is slightly taller than wide (368x386). */ .logo-mark{ height:clamp(42px, 4.4vw, 52px); width:auto; flex:0 0 auto; display:block; } .logo-mark img{ height:100%; width:auto; display:block; } .logo-text{ font-family:var(--display); font-size:clamp(1.38rem, 2.5vw, 1.72rem); color:var(--green); letter-spacing:.005em; white-space:nowrap; } .nav{ display:none; margin-left:auto; gap:30px; } .nav a{ color:var(--ink); text-decoration:none; font-size:.98rem; position:relative; padding:6px 0; } .nav a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .22s ease; } .nav a:hover::after{ transform:scaleX(1); } .header-actions{ display:flex; align-items:center; gap:12px; margin-left:auto; } @media(min-width:940px){ .nav{ display:flex; } .header-actions{ margin-left:0; } } .header-actions .btn-sm{ display:none; } @media(min-width:620px){ .header-actions .btn-sm{ display:inline-flex; } } .nav-toggle{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0 10px; background:none; border:none; cursor:pointer; } .nav-toggle span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } @media(min-width:940px){ .nav-toggle{ display:none; } } .mobile-nav{ display:flex; flex-direction:column; gap:4px; padding:10px 24px 26px; background:var(--paper); border-bottom:1px solid var(--line); } .mobile-nav a{ color:var(--ink); text-decoration:none; padding:14px 4px; border-bottom:1px solid var(--line); font-size:1.05rem; } .mobile-nav .btn{ margin-top:16px; border-bottom:none; color:#fff; } @media(min-width:940px){ .mobile-nav{ display:none !important; } } /* ------------------------------ Hero ------------------------------ */ .hero{ padding:64px 0 0; } .hero-inner{ display:grid; gap:52px; align-items:center; } @media(min-width:960px){ .hero{ padding:84px 0 0; } .hero-inner{ grid-template-columns:1.05fr .95fr; gap:64px; } } .hero h1{ font-size:clamp(2.4rem, 5.6vw, 4.05rem); margin-bottom:.35em; } .lede{ font-size:clamp(1.06rem, 1.6vw, 1.22rem); color:var(--muted); max-width:52ch; margin-bottom:2em; } .lede strong{ color:var(--ink); } .cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:22px; } .cta-micro{ display:flex; flex-wrap:wrap; gap:10px 22px; font-size:.92rem; color:var(--muted); margin:0; } .cta-micro span{ display:inline-flex; align-items:center; gap:8px; } .cta-micro span::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--green); flex:0 0 auto; } /* Hero brand panel (stands in for a photo; see README photo slots) */ .hero-visual{ position:relative; } .hero-visual::before{ /* Kept inside the element's own box so it can never widen the document. */ content:''; position:absolute; inset:-6% 0 -8% 0; border-radius:50%; z-index:0; background:radial-gradient(closest-side, rgba(0,164,104,.22), transparent 74%); pointer-events:none; } .hero-card{ position:relative; z-index:1; background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; border:1px solid var(--line); } .hero-card-top{ display:flex; align-items:center; gap:7px; padding:14px 20px; background:var(--green-deep); color:#fff; } .hero-card-top .dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.32); } .hero-card-label{ margin-left:12px; font-family:var(--display); font-size:.86rem; letter-spacing:.06em; } .hero-card-body{ padding:26px 26px 30px; } .metric{ display:flex; flex-direction:column; gap:4px; margin-bottom:22px; } .metric-label{ font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .metric-value{ font-family:var(--display); font-size:2.5rem; line-height:1; color:var(--green-deep); } .metric-delta{ font-size:.9rem; } .metric-delta.up{ color:var(--green); } .bars{ display:flex; align-items:flex-end; gap:8px; height:104px; margin-bottom:24px; } .bars span{ flex:1; height:var(--h); border-radius:6px 6px 3px 3px; background:linear-gradient(180deg, var(--green) 0%, #6ECBA4 100%); opacity:.9; animation:grow .9s cubic-bezier(.2,.8,.3,1) backwards; } .bars span:nth-child(1){ animation-delay:.05s } .bars span:nth-child(2){ animation-delay:.11s } .bars span:nth-child(3){ animation-delay:.17s } .bars span:nth-child(4){ animation-delay:.23s } .bars span:nth-child(5){ animation-delay:.29s } .bars span:nth-child(6){ animation-delay:.35s } .bars span:nth-child(7){ animation-delay:.41s } .bars span:nth-child(8){ animation-delay:.47s } .bars span:last-child{ opacity:1; } @keyframes grow{ from{ height:0; opacity:0 } } .ledger{ border-top:1px solid var(--line); padding-top:16px; display:flex; flex-direction:column; gap:11px; } .ledger-row{ display:flex; justify-content:space-between; gap:16px; font-size:.95rem; color:var(--muted); } .ledger-row .ok{ color:var(--green-dark); font-weight:700; } /* Trust bar */ .trustbar{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; margin:64px 0 0; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } @media(min-width:820px){ .trustbar{ grid-template-columns:repeat(4,1fr); } } .trustbar li{ background:var(--sand); padding:24px 22px; display:flex; flex-direction:column; gap:5px; } .trustbar strong{ font-family:var(--display); font-size:1.42rem; color:var(--green-deep); line-height:1; } .trustbar span{ font-size:.86rem; color:var(--muted); line-height:1.45; } /* ------------------------------ Problem ------------------------------ */ .problem{ background:var(--paper); margin-top:96px; } .pain-grid{ display:grid; gap:20px; grid-template-columns:1fr; } @media(min-width:700px){ .pain-grid{ grid-template-columns:repeat(2,1fr); } } @media(min-width:1060px){ .pain-grid{ grid-template-columns:repeat(4,1fr); } } .pain{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease; } .pain:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); } .pain-icon{ width:46px; height:46px; border-radius:12px; margin-bottom:16px; background:var(--green-soft); color:var(--green-dark); display:flex; align-items:center; justify-content:center; } .pain-icon svg{ width:23px; height:23px; } .pain h3{ font-size:1.14rem; margin-bottom:.45em; } .pain p{ font-size:.95rem; color:var(--muted); margin:0; } /* ------------------------------ Services ------------------------------ */ .services{ background:var(--cream); } .service-grid{ display:grid; gap:24px; grid-template-columns:1fr; align-items:stretch; max-width:920px; margin-inline:auto; } @media(min-width:760px){ .service-grid{ grid-template-columns:repeat(2,1fr); } } .service-card{ position:relative; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 32px 32px; box-shadow:var(--shadow-sm); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--green); } /* Full-width brokerage card — PEO/payroll needs more room than the others because most owners don't know what a PEO is. */ .service-card.wide{ gap:30px; } @media(min-width:760px){ /* stretch, not flex-start, so the divider runs the full height of the card */ .service-card.wide{ grid-column:1 / -1; flex-direction:row; align-items:stretch; gap:44px; padding:36px 36px 34px; } .wide-main{ flex:1.3 1 0; } .wide-aside{ flex:1 1 0; border-left:1px solid var(--line); padding-left:40px; display:flex; flex-direction:column; justify-content:center; } } .wide-main{ display:flex; flex-direction:column; } .service-tag{ align-self:flex-start; background:var(--green-deep); color:#fff; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; padding:6px 13px; border-radius:999px; margin-bottom:18px; } .service-note{ margin:18px 0 0; padding:14px 18px; border-radius:12px; background:var(--green-soft); color:var(--green-deep); font-size:.93rem; line-height:1.55; } .wide-aside h4{ font-family:var(--body); font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 16px; } .peo-list{ display:flex; flex-direction:column; gap:12px; } .peo-list li{ position:relative; padding-left:27px; font-size:.95rem; line-height:1.5; } .peo-list li::before{ content:'✓'; position:absolute; left:0; top:0; color:var(--green); font-weight:700; } .services-cta{ text-align:center; margin-top:48px; } .services-cta-note{ margin:18px 0 0; font-size:.95rem; color:var(--muted); } .service-icon{ width:52px; height:52px; border-radius:14px; background:var(--green-soft); color:var(--green-dark); display:flex; align-items:center; justify-content:center; margin-bottom:20px; } .service-icon svg{ width:26px; height:26px; } .service-card h3{ font-size:1.42rem; margin-bottom:.4em; } .service-desc{ color:var(--muted); font-size:.98rem; margin:0; } /* ------------------------------ Process ------------------------------ */ .process{ background:var(--green-deep); color:#fff; } .steps{ display:grid; gap:20px; grid-template-columns:1fr; margin-bottom:44px; } @media(min-width:720px){ .steps{ grid-template-columns:repeat(2,1fr); } } @media(min-width:1080px){ .steps{ grid-template-columns:repeat(5,1fr); gap:16px; } } .step{ background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:26px 22px; transition:background-color .22s ease, transform .22s ease; } .step:hover{ background:rgba(255,255,255,.10); transform:translateY(-3px); } .step-num{ font-family:var(--display); font-size:.92rem; letter-spacing:.14em; color:#6FD6A6; display:block; margin-bottom:12px; } .step h3{ font-size:1.16rem; color:#fff; margin-bottom:.5em; } .step p{ font-size:.93rem; color:#C2E5D6; margin:0; line-height:1.6; } .process-close{ font-family:var(--display); font-size:clamp(1.14rem,2.1vw,1.5rem); line-height:1.55; color:#fff; text-align:center; max-width:62ch; margin:0 auto 36px; font-style:italic; } /* ------------------------------ About ------------------------------ */ .about{ background:var(--paper); } .about-inner{ display:grid; gap:48px; align-items:start; } @media(min-width:900px){ .about-inner{ grid-template-columns:340px 1fr; gap:72px; } } .about-photo{ display:flex; flex-direction:column; align-items:center; gap:20px; } @media(min-width:900px){ .about-photo{ position:sticky; top:calc(var(--header-h) + 32px); } } .about-photo img{ width:200px; height:200px; border-radius:50%; object-fit:cover; border:5px solid var(--white); box-shadow:var(--shadow-lg); } .about-cred{ text-align:center; display:flex; flex-direction:column; gap:3px; } .about-cred strong{ font-family:var(--display); font-size:1.32rem; color:var(--green-deep); } .about-cred span{ font-size:.9rem; color:var(--muted); letter-spacing:.05em; } .about-copy p{ color:var(--muted); } .about-copy p strong{ color:var(--ink); } .about-points{ display:flex; flex-direction:column; gap:12px; margin:28px 0 32px; } .about-points li{ display:flex; gap:13px; align-items:flex-start; font-size:.98rem; } .about-points span{ color:var(--green); font-weight:700; flex:0 0 auto; } /* ------------------------------ Testimonials (enable when real quotes exist) ---- */ .testimonials{ background:var(--cream); } .quote-grid{ display:grid; gap:24px; grid-template-columns:1fr; } @media(min-width:860px){ .quote-grid{ grid-template-columns:repeat(3,1fr); } } .quote{ margin:0; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px 28px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:20px; } .quote blockquote{ margin:0; font-size:1.04rem; line-height:1.65; } .quote blockquote::before{ content:'“'; font-family:var(--display); font-size:2.6rem; color:var(--green); line-height:0; vertical-align:-.28em; margin-right:.08em; } .quote figcaption{ display:flex; flex-direction:column; gap:2px; margin-top:auto; } .quote figcaption strong{ font-family:var(--display); color:var(--green-deep); } .quote figcaption span{ font-size:.86rem; color:var(--muted); } /* ------------------------------ FAQ ------------------------------ */ .faq{ background:var(--cream); } .faq-list{ display:flex; flex-direction:column; gap:12px; } .faq-item{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:box-shadow .2s ease, border-color .2s ease; } .faq-item[open]{ border-color:var(--green); box-shadow:var(--shadow-sm); } .faq-item summary{ cursor:pointer; list-style:none; padding:22px 56px 22px 26px; position:relative; font-family:var(--display); font-size:1.1rem; color:var(--green-deep); } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:''; position:absolute; right:26px; top:50%; width:11px; height:11px; border-right:2px solid var(--green); border-bottom:2px solid var(--green); transform:translateY(-70%) rotate(45deg); transition:transform .22s ease; } .faq-item[open] summary::after{ transform:translateY(-30%) rotate(-135deg); } .faq-body{ padding:0 26px 24px; } .faq-body p{ margin:0; color:var(--muted); font-size:.98rem; } /* ------------------------------ Booking ------------------------------ */ .book{ background:var(--green-deep); color:#fff; } .booking-panel{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; padding:8px; max-width:1060px; margin-inline:auto; } .booking-embed{ border-radius:calc(var(--radius-lg) - 8px); overflow:hidden; } .embed-fallback{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; min-height:420px; padding:48px 24px; text-align:center; color:var(--ink); } .embed-fallback p{ color:var(--muted); max-width:46ch; margin:0; } .noscript-fallback{ text-align:center; padding:40px 0; } .book-alt{ text-align:center; color:#C2E5D6; margin:32px 0 0; font-size:.98rem; } .book-alt a{ color:#fff; } /* ------------------------------ Footer ------------------------------ */ .site-footer{ background:var(--green-ink); color:#C2E5D6; padding:72px 0 0; } .footer-inner{ display:grid; gap:44px; grid-template-columns:1fr; padding-bottom:52px; } @media(min-width:760px){ .footer-inner{ grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:36px; } } .logo-footer .logo-text{ color:#fff; font-size:1.46rem; } /* The owl's body is near-black charcoal, which disappears against the dark footer — only its face survived, reading as a floating blob. A light chip restores the silhouette while keeping the logo's real colors. */ .logo-footer .logo-mark{ height:54px; width:54px; padding:5px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; } .logo-footer .logo-mark img{ height:100%; width:auto; } .footer-blurb{ margin:18px 0 0; font-size:.94rem; line-height:1.65; color:#95C0AE; } .footer-col{ display:flex; flex-direction:column; gap:11px; align-items:flex-start; } .footer-col h4{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:#6FD6A6; margin:0 0 6px; font-family:var(--body); font-weight:700; } .footer-col a{ color:#C2E5D6; text-decoration:none; font-size:.95rem; transition:color .18s ease; word-break:break-word; } .footer-col a:hover{ color:#fff; text-decoration:underline; } .footer-note{ font-size:.9rem; color:#86AF9D; } .footer-cta{ margin-top:10px; color:#fff !important; text-decoration:none !important; } .footer-bottom{ display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; border-top:1px solid rgba(255,255,255,.10); padding:22px 0 26px; font-size:.86rem; color:#86AF9D; } /* ------------------------------ Sticky mobile CTA ------------------------------ */ .sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:99; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); background:rgba(251,250,247,.97); border-top:1px solid var(--line); box-shadow:0 -4px 20px rgba(10,59,41,.10); transform:translateY(110%); transition:transform .3s cubic-bezier(.2,.8,.3,1); } .sticky-cta.visible{ transform:translateY(0); } .sticky-cta-text{ display:flex; flex-direction:column; line-height:1.3; } .sticky-cta-text strong{ font-size:.94rem; } .sticky-cta-text span{ font-size:.8rem; color:var(--muted); } .sticky-cta .btn{ flex:0 0 auto; padding:13px 22px; } @media(min-width:940px){ .sticky-cta{ display:none; } } /* ------------------------------ Reveal on scroll ------------------------------ */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); } .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } html{ scroll-behavior:auto; } .reveal{ opacity:1; transform:none; } } /* ------------------------------ Small screens ------------------------------ */ @media(max-width:600px){ body{ font-size:16px; } .wrap,.wrap-narrow{ width:calc(100% - 36px); } .section{ padding:68px 0; } .problem{ margin-top:68px; } .cta-row .btn{ width:100%; } .hero-card-body{ padding:22px 20px 24px; } .metric-value{ font-size:2.1rem; } main{ padding-bottom:76px; } /* room for the sticky CTA */ } /* ------------------------------ Print ------------------------------ */ @media print{ .site-header,.sticky-cta,.nav-toggle,.booking-panel{ display:none !important; } body{ background:#fff; color:#000; } }