/* ========================================================================== CORWRITERS public pages: blog, custom pages (terms, privacy, use cases), contact, cookie banner. Matches the new homepage. Load LAST in of the public layout. Every selector starts with "body" so it outranks the old compiled theme even if the order is not perfect. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@600;700;800&display=swap"); :root { --cw-ink: #070a17; --cw-ink-2: #0e1328; --cw-line-d: rgba(255, 255, 255, 0.11); --cw-text: #0c1222; --cw-body: #2a3347; --cw-muted: #56627a; --cw-faint: #8791a5; --cw-line: #e1e7f0; --cw-mist: #f5f7fb; --cw-blue: #007bff; --cw-blue-strong: #0b62d9; --cw-cyan: #38d6ff; --cw-font-display: 'Sora', 'Poppins', system-ui, sans-serif; --cw-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --cw-ease: cubic-bezier(0.22, 1, 0.36, 1); } body { font-family: var(--cw-font-body); -webkit-font-smoothing: antialiased; } body h1, body h2, body h3, body h4 { font-family: var(--cw-font-display); letter-spacing: -0.03em; } /* ---------- Inner pages: page background + navigation ---------- Your layout adds the "blue-background" class to on every page except the old homepage, and the menu is #navbar-responsive. Both are used here so the nav is correct whether or not the old script adds .page-navbar. */ body.blue-background { background: var(--cw-mist); } body.blue-background #navbar-responsive, body .page-navbar, body .secondary-navbar { line-height: 60px; background: rgba(255, 255, 255, 0.86) !important; -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--cw-line); box-shadow: none !important; } body.blue-background #navbar-responsive .navbar-collapse { background: transparent; } body.blue-background #navbar-responsive .navbar-nav li.nav-item a.nav-link, body .page-navbar .navbar-nav li.nav-item a.nav-link, body .secondary-navbar .navbar-nav li.nav-item a.nav-link { font: 500 14px/1.4 var(--cw-font-body); color: var(--cw-text) !important; text-shadow: none; opacity: 0.8; transition: opacity 0.2s ease, color 0.2s ease; } body.blue-background #navbar-responsive .navbar-nav li.nav-item a.nav-link:hover, body.blue-background #navbar-responsive .navbar-nav li.nav-item a.nav-link:focus, body.blue-background #navbar-responsive .navbar-nav li.nav-item a.active, body .page-navbar .navbar-nav li.nav-item a.nav-link:hover, body .page-navbar .navbar-nav li.nav-item a.active, body .secondary-navbar .navbar-nav li.nav-item a.nav-link:hover { color: var(--cw-blue-strong) !important; opacity: 1; } body.blue-background #navbar-responsive #login-button, body .page-navbar #login-button, body .secondary-navbar #login-button { font: 500 14px/1.4 var(--cw-font-body); color: var(--cw-text) !important; opacity: 0.85; } body.blue-background #navbar-responsive #login-button:hover, body .page-navbar #login-button:hover, body .secondary-navbar #login-button:hover { color: var(--cw-blue-strong) !important; opacity: 1; } body.blue-background #navbar-responsive .action-button, body .page-navbar .action-button, body .secondary-navbar .action-button { color: #fff !important; background: var(--cw-blue-strong); border: 0; border-radius: 999px; font: 600 14px/1.4 var(--cw-font-body); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px -8px rgba(0, 123, 255, 0.55); transition: transform 0.2s var(--cw-ease), background-color 0.2s ease; } body.blue-background #navbar-responsive .action-button:hover, body .page-navbar .action-button:hover, body .secondary-navbar .action-button:hover { background: #0d70f2; transform: translateY(-1px); } body.blue-background #navbar-responsive .register-button, body.blue-background #navbar-responsive .dashboard-button { background: var(--cw-ink); box-shadow: none; } body.blue-background #navbar-responsive .register-button:hover, body.blue-background #navbar-responsive .dashboard-button:hover { background: var(--cw-blue-strong); } body.blue-background #frontend-local .header-icon, body.blue-background #frontend-local .icon span { color: var(--cw-muted) !important; } body.blue-background #frontend-local .header-icon:hover { color: var(--cw-text) !important; } body.blue-background #navbar-responsive .dropdown-menu { padding: 6px; border: 1px solid var(--cw-line); border-radius: 14px; box-shadow: 0 2px 4px rgba(10, 16, 40, 0.05), 0 18px 36px -14px rgba(10, 16, 40, 0.18); } body.blue-background #navbar-responsive .dropdown-item { border-radius: 8px; } body.blue-background #navbar-responsive .dropdown-item:hover { color: var(--cw-blue-strong); background: var(--cw-mist); } /* ---------- Page title band (custom pages, blog posts, contact) ---------- */ body .secondary-background { background: var(--cw-mist) !important; } body #contact-row h1 { font-family: var(--cw-font-display); font-weight: 800; letter-spacing: -0.035em; color: var(--cw-text); } body #contact-row .fs-10, body #contact-row .fs-10 a { font-size: 13px !important; color: var(--cw-muted); } body #contact-row .fs-10 a:hover { color: var(--cw-blue-strong); } /* ---------- Custom pages (terms, privacy, use cases, case study) ---------- */ body #page-wrapper { background: #fff; color: var(--cw-body); } body #page-wrapper h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.1; color: var(--cw-text); } body #page-wrapper h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); font-weight: 700; line-height: 1.2; color: var(--cw-text); margin-top: 2.2em; } body #page-wrapper h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--cw-text); margin-top: 1.8em; } body #page-wrapper h4 { font-size: 1.0625rem; font-weight: 700; color: var(--cw-text); margin-top: 1.6em; } body #page-wrapper p, body #page-wrapper li { font-size: 1.0625rem; line-height: 1.75; color: var(--cw-body); } body #page-wrapper p, body #page-wrapper ul, body #page-wrapper ol, body #page-wrapper blockquote { max-width: 72ch; } body #page-wrapper a { color: var(--cw-blue-strong); text-underline-offset: 3px; } body #page-wrapper a:hover { text-decoration: underline; } body #page-wrapper blockquote { margin: 1.6em 0; padding: 0.2em 0 0.2em 1.2em; color: var(--cw-muted); border-left: 3px solid var(--cw-blue); } body #page-wrapper img { max-width: 100%; height: auto; border-radius: 14px; } body #page-wrapper table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 0.9375rem; } body #page-wrapper th { padding: 10px 12px; text-align: left; font-weight: 600; color: var(--cw-muted); border-bottom: 1px solid var(--cw-line); } body #page-wrapper td { padding: 10px 12px; border-bottom: 1px solid var(--cw-line); } body #page-wrapper hr { border-color: var(--cw-line); opacity: 1; } body #page-wrapper code { padding: 2px 6px; font-size: 0.9em; color: var(--cw-text); background: var(--cw-mist); border-radius: 6px; } /* ---------- Blog ---------- */ body .blog-box { min-height: 270px; overflow: hidden; background: #fff; border: 1px solid var(--cw-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(10, 16, 40, 0.05), 0 4px 12px -4px rgba(10, 16, 40, 0.07); transition: border-color 0.3s var(--cw-ease), box-shadow 0.3s var(--cw-ease); } body .blog-box:hover { border-color: rgba(0, 123, 255, 0.3); box-shadow: 0 2px 4px rgba(10, 16, 40, 0.05), 0 18px 36px -14px rgba(10, 16, 40, 0.18); } body .blog-box .blog-img img { border-radius: 0; box-shadow: none; transition: transform 0.4s var(--cw-ease); } body .blog-box:hover .blog-img img { transform: scale(1.03); } body .blog-box .blog-img span { padding: 5px 10px; font: 600 11px/1.3 var(--cw-font-body); background: rgba(255, 255, 255, 0.88); border-radius: 8px; } body .blog-box .blog-info h5 { font: 700 15px/1.4 var(--cw-font-display); letter-spacing: -0.01em; color: var(--cw-text); } body .blog-box .blog-info h6 { color: var(--cw-faint); } body .blog-view img { border-radius: 16px; box-shadow: 0 1px 2px rgba(10, 16, 40, 0.06); } body #blogs .blog-all a { color: #fff; background: var(--cw-ink); border-radius: 999px; padding: 8px 26px; font: 600 13px/1.4 var(--cw-font-body); transition: background-color 0.2s ease; } body #blogs .blog-all a:hover { background: var(--cw-blue-strong); } /* blog post body */ body #blogs .main-image { border-radius: 24px; } body #blogs .main-text, body #blog-view-mobile { color: var(--cw-body); } body #blogs .main-text h2, body #blogs .main-text h3, body #blogs .main-text h4 { color: var(--cw-text); font-weight: 700; line-height: 1.25; margin-top: 2em; } body #blogs .main-text h2 { font-size: 1.75rem; } body #blogs .main-text h3 { font-size: 1.35rem; } body #blogs .main-text p, body #blogs .main-text li { font-size: 1.0625rem; line-height: 1.8; color: var(--cw-body); } body #blogs .main-text a { color: var(--cw-blue-strong); text-underline-offset: 3px; } body #blogs .main-text a:hover { text-decoration: underline; } body #blogs .main-text img { max-width: 100%; height: auto; border-radius: 14px; } body #blogs .main-text blockquote { margin: 1.6em 0; padding: 0.2em 0 0.2em 1.2em; color: var(--cw-muted); border-left: 3px solid var(--cw-blue); } /* ---------- Contact + FAQ ---------- */ body #contact-wrapper .contact-info-box .contact-title h6 { font: 700 16px/1.4 var(--cw-font-display); letter-spacing: -0.01em; color: var(--cw-text); } body #contact-wrapper .contact-info-box .contact-title p { color: var(--cw-muted); } body #contact-wrapper .contact-info-box .contact-icon i { color: var(--cw-blue-strong) !important; } body #contact-wrapper .form-control { background: #fff !important; border: 1px solid var(--cw-line); border-radius: 10px; box-shadow: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } body #contact-wrapper .form-control:focus { border-color: var(--cw-blue); box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.14); } body #contact-wrapper .row button { font: 600 13px/1.4 var(--cw-font-body); background-color: var(--cw-blue-strong); border-color: var(--cw-blue-strong); border-radius: 10px; } body #contact-wrapper .row button:hover { background: var(--cw-ink); border-color: var(--cw-ink); } body #faqs { background: var(--cw-mist); } body #faqs #accordion .card { background: #fff; border: 1px solid var(--cw-line) !important; border-radius: 14px !important; box-shadow: none; } body #faqs #accordion .card .card-header .btn-link { font-weight: 600; color: var(--cw-text); text-decoration: none; } body #faqs #accordion .card .card-body { color: var(--cw-muted); line-height: 1.7; } /* ---------- Footer ---------- */ /* straight top edge like the homepage: hide the old curve */ body #welcome-footer #curve-container { display: none; } body #welcome-footer #footer { padding-top: 96px; } body #welcome-footer .footer-cta { display: inline-block; padding: 14px 32px; font: 600 15px/1 var(--cw-font-body); color: #fff; text-decoration: none; background: var(--cw-blue-strong); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px -8px rgba(0, 123, 255, 0.6); transition: transform 0.2s var(--cw-ease), background-color 0.2s ease; } body #welcome-footer .footer-cta:hover { color: #fff; background: #0d70f2; transform: translateY(-1px); } body #welcome-footer #frontend-copyright { color: var(--cw-faint); } body #welcome-footer #frontend-copyright a { color: var(--cw-cyan); font-weight: 600; } body #back-to-top { color: #fff; background: var(--cw-blue-strong); border-radius: 12px; box-shadow: 0 2px 4px rgba(10,16,40,.05), 0 18px 36px -14px rgba(10,16,40,.3); } body #welcome-footer { background-color: var(--cw-ink); background-image: linear-gradient(var(--cw-ink-2), var(--cw-ink)); } body #welcome-footer #footer h1 { font-family: var(--cw-font-display); font-weight: 800; letter-spacing: -0.035em; color: #fff; text-shadow: none; } body #welcome-footer #footer h3 { font-weight: 600; letter-spacing: -0.02em; color: var(--cw-faint); text-shadow: none; } body #welcome-footer #footer a.footer-link { font-size: 13px; color: var(--cw-faint); transition: color 0.2s ease; } body #welcome-footer #footer a.footer-link:hover, body #welcome-footer #footer a.footer-link:focus { color: #fff; } body #welcome-footer #footer .notification { color: var(--cw-faint); } body #welcome-footer .footer-icon { color: var(--cw-faint); transition: color 0.25s ease; } body #welcome-footer .footer-icon:hover, body #welcome-footer .footer-icon:focus { color: #fff; } body #welcome-footer .twitter-icon { fill: var(--cw-faint); transition: fill 0.25s ease; } body #welcome-footer .twitter-icon:hover, body #welcome-footer .twitter-icon:focus { fill: #fff; } body #welcome-footer #copyright { border-top: 1px solid var(--cw-line-d); } body #welcome-footer #copyright p { color: var(--cw-faint); } body #welcome-footer #copyright p a { color: var(--cw-cyan); font-weight: 600; } body #welcome-footer #copyright p a:hover { color: #fff; } /* ---------- Cookie banner (CookieConsent v3, loaded from your footer) ---------- */ body #cc-main { --cc-font-family: var(--cw-font-body); --cc-bg: #ffffff; --cc-primary-color: var(--cw-text); --cc-secondary-color: var(--cw-muted); --cc-btn-primary-bg: var(--cw-blue-strong); --cc-btn-primary-color: #ffffff; --cc-btn-primary-border-color: var(--cw-blue-strong); --cc-btn-primary-hover-bg: #0d70f2; --cc-btn-primary-hover-color: #ffffff; --cc-btn-primary-hover-border-color: #0d70f2; --cc-btn-secondary-bg: var(--cw-mist); --cc-btn-secondary-color: var(--cw-text); --cc-btn-secondary-border-color: var(--cw-line); --cc-btn-secondary-hover-bg: #e9eef7; --cc-btn-secondary-hover-color: var(--cw-text); --cc-btn-secondary-hover-border-color: #d3dbe8; --cc-separator-border-color: var(--cw-line); --cc-toggle-on-bg: var(--cw-blue-strong); --cc-toggle-off-bg: #9aa5bb; --cc-modal-border-radius: 20px; --cc-btn-border-radius: 999px; --cc-pm-toggle-border-radius: 999px; --cc-overlay-bg: rgba(7, 10, 23, 0.55); } body #cc-main .cm, body #cc-main .pm { border: 1px solid var(--cw-line); box-shadow: 0 24px 60px -20px rgba(10, 16, 40, 0.35); } body #cc-main .cm__title, body #cc-main .pm__title { font-family: var(--cw-font-display); letter-spacing: -0.02em; } body #cc-main .cm__btn, body #cc-main .pm__btn { font-weight: 600; } /* older GDPR bar, in case any page still uses it */ body .js-cookie-consent { left: 16px; right: 16px; bottom: 16px; width: auto; max-width: 960px; margin: 0 auto; border: 1px solid var(--cw-line); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(10, 16, 40, 0.35) !important; } body .js-cookie-consent .js-cookie-consent-agree { background-color: var(--cw-blue-strong); border-color: var(--cw-blue-strong); border-radius: 999px; text-transform: none; font-weight: 600; } /* ---------- Keyboard focus + reduced motion ---------- */ body a:focus-visible, body button:focus-visible { outline: 2px solid var(--cw-blue); outline-offset: 3px; } body #welcome-footer a:focus-visible { outline-color: var(--cw-cyan); } @media (prefers-reduced-motion: reduce) { body .blog-box, body .blog-box .blog-img img, body .page-navbar .action-button { transition-duration: 0.01ms !important; } body .blog-box:hover .blog-img img { transform: none; } }